@extends('admin.layout.master')

@section('content')
    <main>
        <!-- Breadcrumb Area -->
        <div class="breadcrumb-area">
            <h1>Dashboard</h1>
            <ol class="breadcrumb">
                <li class=""><a href="{{url('/admin')}}"><i class='bx bx-home-alt' style="font-size: 18px;color: #F31519;"></i></a></li>
                <li class=""><a href="{{url('/admin')}}">Principal </a></li>
                <li class="">&nbsp;&nbsp;/ Admin Aula</li>
                <li class="">&nbsp;&nbsp;/ <a href="{{url('/admin/examen')}}">Examenes Online</a></li>
            </ol>
        </div>
        <!-- End Breadcrumb Area -->

        <div class="card mb-30">
            <div class="card-header d-flex justify-content-between align-items-center">
                <div class="card-body">

                    {{-- <div class="alert alert-success alert-dismissible fade show" role="alert">
                        <strong>Mensaje!</strong> Se agregó la respuesta correctamente.
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>

                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                        <strong>Mensaje!</strong> Se agregó la pregunta correctamente.
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>

                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                        <strong>Mensaje!</strong> Se modificó la pregunta correctamente.
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>

                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        <strong>Mensaje!</strong> Se eliminó la pregunta correctamente.
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>

                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        <strong>Mensaje!</strong> Error de registro, campo vacío verifique.
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>

                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        <strong>Error!</strong> No se puede subir una imagen con ese formato desconocido.
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div> --}}

                </div>
            </div>

            <div class="card-header d-flex justify-content-between align-items-center">
                <h3><strong>Nombre del Examen:</strong> Examen de Matemáticas<br> El examen tiene <b>10</b> preguntas │
                    total puntaje de <b>100</b> │ Tiempo examen <b>02:00</b></h3>
            </div>

            <div class="card-body">
                <p align="center">
                    <a href="" class="btn btn-primary rounded-pill" data-toggle="modal" data-target="#myModal"><i
                            class="bx bxs-comment-edit"></i> Nueva Pregunta</a>
                    <a href="" class="btn btn-secondary rounded-pill" data-toggle="modal" data-target="#myModal2"><i
                            class="bx bx-data"></i> Banco preguntas</a>
                    <a href="" class="btn btn-success rounded-pill" data-toggle="modal" data-target="#myModal5"><i
                            class="bx bx-reset"></i> Actualizar Puntaje</a>
                </p>
            </div>
        </div>

        <!-- Ejemplo de pregunta listada -->
        <div class="card mb-30">
            <div class="card-body">
                <p align="justify"><b>Pregunta: 1</b> .- ¿Cuál es la capital de Francia?</p>
                <br><img class='img-responsive' src='imagenes/paris.jpg'>
                <div class='card-body p-4 text-info border-warning'>
                    <label class='btn btn-success btn-xs'>París</label>
                    <label class='btn btn-info btn-xs'>Londres</label>
                    <label class='btn btn-info btn-xs'>Berlín</label>
                    <label class='btn btn-info btn-xs'>Madrid</label>
                </div>
                <div class='card-body p-4 text-info border-info'>
                    <button type='button' class='btn btn-primary' data-toggle='modal'
                        data-target='#myModalEditaPregunta1'><i class='bx bx-edit'></i> Editar Pregunta</button>
                    <button type='button' class='btn btn-success' data-toggle='modal' data-target='#myModalpregunta1'><i
                            class='bx bxs-pencil'></i> Agregar Respuestas</button>
                    <button type='button' class='btn btn-danger' data-dismiss='modal'><i class='bx bx-trash'></i> Eliminar
                        Pregunta</button>
                </div>
            </div>
        </div>

        <!-- Ejemplo de Pregunta 5 con Respuestas Largas -->
        <div class="card mb-30">
            <div class="card-body">
                <p align="justify"><b>Pregunta 5:</b> ¿Cuál de las siguientes es una característica fundamental del proceso
                    de fotosíntesis en las plantas?</p>
                <div class="card-body p-4 text-info border-warning">
                    <label class='btn btn-info btn-xs'>
                        La fotosíntesis es el proceso por el cual las plantas utilizan la luz solar para convertir el
                        dióxido de carbono y el agua en glucosa y oxígeno.
                    </label>
                    <label class='btn btn-success btn-xs'>
                        La fotosíntesis se lleva a cabo en los cloroplastos de las células vegetales, donde la clorofila
                        captura la energía de la luz solar.
                    </label>
                    <label class='btn btn-info btn-xs'>
                        Durante la fotosíntesis, las plantas consumen oxígeno y liberan dióxido de carbono como un
                        subproducto.
                    </label>
                    <label class='btn btn-info btn-xs'>
                        La fotosíntesis solo ocurre en las raíces de las plantas y es un proceso independiente de la luz
                        solar.
                    </label>
                </div>
                <div class='card-body p-4 text-info border-info'>
                    <button type='button' class='btn btn-primary' data-toggle='modal' data-target='#myModalEditaPregunta5'>
                        <i class='bx bx-edit'></i> Editar Pregunta
                    </button>
                    <button type='button' class='btn btn-success' data-toggle='modal' data-target='#myModalpregunta5'>
                        <i class='bx bxs-pencil'></i> Agregar Respuestas
                    </button>
                    <button type='button' class='btn btn-danger' data-dismiss='modal'><i class='bx bx-trash'></i> Eliminar
                        Pregunta</button>
                </div>
            </div>
        </div>


        <!-- Modal para crear una nueva pregunta -->
        <div class="modal fade" id="myModal" role="dialog">
            <div class="modal-dialog modal-lg modal-dialog-scrollable">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Crear nueva pregunta<br>Examen: Examen de Matemáticas / categoría: Geografía
                        </h5>
                        <button type="button" class="close" data-dismiss="modal">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form method="post" action="insertpreg.php" enctype="multipart/form-data">
                            <div class='form-group'>
                                <label>Pregunta:</label>
                                <textarea class="form-control textarea" rows="3" name="pregunta" placeholder="Ingresa tu pregunta" required
                                    autofocus></textarea>
                            </div>
                            <div class='form-group'>
                                <label class="control-label">Imagen</label> <small>Formatos Permitidos:*gif, *.jpg, *.jpeg,
                                    *.png / peso imagen menor a 100KB<br> Dimensiones 1200px x 400px</small>
                                <input name="carga_imagen" id="carga_imagen" type="file" class="form-control" />
                                <span class="help-block">
                                    <font color="#F53904"><small>* Si la pregunta no tiene imagen no cargar nada.</small>
                                    </font>
                                </span>
                            </div>
                            <div class='form-group'>
                                <label>Solución de la Pregunta:</label>
                                <textarea class="form-control textarea" rows="3" name="solucion"
                                    placeholder="Ingresa la solución de la pregunta" required autofocus></textarea>
                            </div>
                            <div class='form-group'>
                                <label class="control-label">Solución Imagen</label> <small>Formatos Permitidos:*gif,
                                    *.jpg, *.jpeg, *.png / peso imagen menor a 100KB<br> Dimensiones 1200px x 400px</small>
                                <input name="carga2_imagen" id="carga2_imagen" type="file" class="form-control" />
                                <span class="help-block">
                                    <font color="#F53904"><small>* Si la solución no tiene imagen no cargar nada.</small>
                                    </font>
                                </span>
                            </div>
                            <div class='form-group'>
                                <label>Puntaje:</label>
                                <div class='input-group col-lg-3'>
                                    <input type='text' class='form-control' name='puntaje' required autofocus>
                                    <span class="input-group-addon" id="basic-addon2">0.00</span>
                                </div>
                            </div>
                            <div class='form-group'>
                                <button type='submit' class='btn btn-primary'>Registrar Pregunta</button>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
                    </div>
                </div>
            </div>
        </div>


        <!-- Modal para Editar Pregunta -->
        <div class="modal fade" id="myModalEditaPregunta1" role="dialog">
            <div class="modal-dialog modal-lg modal-dialog-scrollable">

                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Modificación de pregunta<br>Examen: Ejemplo de Examen / Categoría: Ciencia
                        </h5>
                        <button type='button' class='close' data-dismiss='modal'>
                            <span aria-hidden='true'>&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form method="post" action="modificapreg.php" enctype="multipart/form-data">
                            <div class='form-group'>
                                <label>Pregunta:</label>
                                <input type='hidden' class='form-control' name='codidexam' value='123'>
                                <input type="hidden" class='form-control' name='codipregunta' value='456'>
                                <textarea class="form-control textarea" rows="3" name="pregunta" id=""
                                    placeholder="Ingresa tu pregunta" required autofocus>¿Cuál es la fórmula química del agua?</textarea>
                            </div>
                            <div class='form-group'>
                                <label class="control-label">Imagen</label>
                                <small>Formatos Permitidos: *.gif, *.jpg, *.jpeg, *.png / Peso imagen menor a 100KB<br>
                                    Dimensiones 1200px x 400px</small>
                                <input type='hidden' class='form-control' name='imagenA' value='imagen_actual.jpg'>
                                <input name="carga_imagen" id="carga_imagen" type="file" class="form-control" />
                                <span class="help-block">
                                    <font color="#F53904"><small>* Si la pregunta no tiene imagen no cargar nada.</small>
                                    </font>
                                </span>
                            </div>
                            <div class='form-group'>
                                <label>Solución de la Pregunta:</label>
                                <textarea class="form-control textarea" rows="3" name="solucion" id=""
                                    placeholder="Ingresa la solución de la pregunta" required autofocus>La fórmula química del agua es H2O.</textarea>
                            </div>

                            <div class='form-group'>
                                <label class="control-label">Solución Imagen</label>
                                <small>Formatos Permitidos: *.gif, *.jpg, *.jpeg, *.png / Peso imagen menor a 100KB<br>
                                    Dimensiones 1200px x 400px</small>
                                <input type='hidden' class='form-control' name='imagenB'
                                    value='solucion_imagen_actual.jpg'>
                                <input name="carga2_imagen" id="carga2_imagen" type="file" class="form-control" />
                                <span class="help-block">
                                    <font color="#F53904"><small>* Si la solución no tiene imagen no cargar nada.</small>
                                    </font>
                                </span>
                            </div>

                            <div class='form-group'>
                                <label>Puntaje:</label>
                                <div class='input-group col-lg-3'>
                                    <input type='text' class='form-control' name='puntaje' required autofocus
                                        value="10">
                                    <span class="input-group-addon" id="basic-addon2">0.00</span>
                                </div>
                            </div>

                            <div class='form-group'>
                                <button type='submit' class='btn btn-success'>Actualizar Pregunta</button>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
                    </div>
                </div>

            </div>
        </div>
        <!-- Fin del Modal para Editar Pregunta -->

        <!-- modal para agregar respuesta -->
        <div class='modal fade' id='myModalpregunta1' role='dialog'>
            <div class='modal-dialog'>
                <div class='modal-content'>
                    <div class='modal-header'>
                        <h5 class='modal-title'>Crear nueva respuesta alternativa</h5>
                        <button type='button' class='close' data-dismiss='modal'>
                            <span aria-hidden='true'>&times;</span>
                        </button>
                    </div>
                    <div class='modal-body'>
                        <form method='post' action='insertresp.php'>
                            <div class='form-group'>
                                <label>Respuesta:</label>
                                <input type='hidden' class='form-control' name='idexam' value='123'>
                                <input type='hidden' class='form-control' name='idpregu' value='456'>
                                <input type='text' class='form-control' name='respuesta' required autofocus placeholder="Ingrese la respuesta aquí">
                            </div>
                            <div class='form-group'>
                                <label>Correcta:</label>
                                <select name='correcta' class='form-control'>
                                    <option value='No'>No</option>
                                    <option value='Si'>Sí</option>
                                </select>
                            </div>
                            <div class='form-group'>
                                <button type='submit' class='btn btn-primary'>Registrar Respuesta</button>
                            </div>
                        </form>
                    </div>
                    <div class='modal-footer'>
                        <button type='button' class='btn btn-danger' data-dismiss='modal'>Cerrar</button>
                    </div>
                </div>
            </div>
        </div>
        


        <!-- Modal para seleccionar banco de preguntas docente o academia -->
        <div class="modal fade" id="myModal2" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Selección Banco de Preguntas</h5>
                        <button type="button" class="close" data-dismiss="modal">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-lg-6 text-center">
                                <span class="bx bx-data" style="font-size: 85px;"></span><br />
                                <button class="btn btn-primary" data-toggle="modal" data-target="#myModal3">Banco de
                                    Preguntas Docente</button>
                            </div>
                            <div class="col-lg-6 text-center">
                                <span class="bx bx-data" style="font-size: 85px;"></span><br />
                                <button class="btn btn-primary" data-toggle="modal" data-target="#myModal4">Banco de
                                    Preguntas Academia</button>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- Fin del modal de selección de banco de preguntas -->

        <!-- Modal para selección de categorías de banco de preguntas docente -->
        <div class="modal fade" id="myModal3" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Selección categoría de Banco de Preguntas Docentes</h5>
                        <button type="button" class="close" data-dismiss="modal">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form method="post" action="selecpregunta.php" enctype="multipart/form-data">
                            <div class='form-group'>
                                <label>Seleccione una Categoría:</label>
                                <select name="categoria" class="form-control" required>
                                    <option value="" selected>..:: Seleccione Opción ::..</option>
                                    <option value="1">Matemáticas</option>
                                    <option value="2">Ciencias</option>
                                </select>
                            </div>
                            <div class='form-group'>
                                <button type='submit' class='btn btn-primary btn-block'> Siguiente <i
                                        class="glyphicon glyphicon-arrow-right"></i></button>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- Fin del modal de selección de categorías para banco de preguntas docente -->

        <!-- Modal para selección de categorías de banco de preguntas academia -->
        <div class="modal fade" id="myModal4" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Selección categoría de Banco de Preguntas de Auge Academia</h5>
                        <button type="button" class="close" data-dismiss="modal">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form method="post" action="selecpregunta_academia.php" enctype="multipart/form-data">
                            <div class='form-group'>
                                <label>Seleccione una Categoría:</label>
                                <select name="categoriacademia" class="form-control" required>
                                    <option value="" selected>..:: Seleccione Opción ::..</option>
                                    <option value="1">Historia</option>
                                    <option value="2">Geografía</option>
                                </select>
                            </div>
                            <div class='form-group'>
                                <button type='submit' class='btn btn-primary btn-block'> Siguiente <i
                                        class="glyphicon glyphicon-arrow-right"></i></button>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- Fin del modal de selección de categorías para banco de preguntas academia -->

        <!-- Modal para actualizar puntajes generales -->
        <div class="modal fade" id="myModal5" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Actualizar los puntos generales en este examen:</h5>
                        <button type="button" class="close" data-dismiss="modal">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form method="post" action="actualizapuntosgen.php" enctype="multipart/form-data">
                            <div class='form-group'>
                                <label>Puntaje:</label>
                                <div class='input-group col-lg-5'>
                                    <input type='text' class='form-control' name='puntajegen' required autofocus>
                                    <span class="input-group-addon" id="basic-addon2">0.00</span>
                                </div>
                            </div>
                            <div class='form-group'>
                                <button type='submit' class='btn btn-primary'> Actualizar Puntaje</button>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- Fin del modal para actualizar puntajes generales -->


    </main>
@endsection