@extends('cultural.plantillaPanelAdministrador')
@section('scripts')
<link href="{{ asset('css/datatables.min.css') }}" rel="stylesheet">
<script src="{{ asset('js/datatables.min.js') }}"></script>
<script>
    globalId = '0';
    </script>
@endsection
@section('breadcrumb')

@endsection
@section('titulo', "Administrador")
@section('contenido')
<div class="col-9">
    <div class="row">
        <div class="col-sm-12 mb-2">
            <a title="Nuevo" href="/panel/administrador/examenes/nuevo" class="btn buttonRecargar btn-cultural" aria-hidden="true"><span>Nuevo</span></a>
            <a title="Guardar" href="#" class="buttonRecargar btn btn-cultural" aria-hidden="true" onclick="javascript: $('#modalGuardar').modal('toggle');"><span>Guardar</span></a>
            <a title="Eliminar" href="#" class="buttonRecargar btn btn-cultural" aria-hidden="true" onclick="javascript: $('#mdlEliminar').modal('toggle');"><span>Eliminar</span></a>
            <a title="Recargar" href="#" class="btn buttonRecargar btn-cultural" aria-hidden="true" onclick='window.location.replace("/panel/administrador/examenes/nuevo");'><span>Recargar</span></a>

        </div>
        <div class="col-sm-12">
            <form id="form1" method="POST">
                <input type="hidden" name="_token" value="{{ csrf_token() }}"></input>
                <input type="hidden" id="id" name="id" class="form-control" value="{{$globalId}}">
                <div class="row py-3">
                    <div class="col-12 mt-2">
                        <label>Nivel:*</label>
                        <select id="lstCurso" name="lstCurso" class="form-control" required>
                            <option value="" disabled selected>Seleccionar</option>
                            @for ($i = 0; $i < count($array_cursos); $i++) @if (isset($examen) and $array_cursos[$i]->idcurso == $examen->fk_idcurso)
                                <option selected value="{{ $array_cursos[$i]->idcurso }}">{{ $array_cursos[$i]->nombre }}</option>
                                @else
                                <option value="{{ $array_cursos[$i]->idcurso }}">{{ $array_cursos[$i]->nombre }}</option>
                                @endif
                                @endfor
                        </select>
                    </div>
                    <div class="col-12 mt-2">
                        <label>URL:*</label>
                        <input type="text" class="form-control" id="txtUrl" name="txtUrl" value="{{$examen->url }}">
                    </div>
                    <div class="col-12 mt-2">
                        <label>Arancel:*</label>
                        <select id="lstProducto" name="lstProducto" class="form-control" required>
                            <option value="" disabled selected>Seleccionar</option>
                            @for ($i = 0; $i < count($array_productos); $i++) @if (isset($examen) and $array_productos[$i]->idproducto == $examen->fk_idproducto)
                                <option selected value="{{ $array_productos[$i]->idproducto }}">{{ $array_productos[$i]->nombre }}</option>
                                @else
                                <option value="{{ $array_productos[$i]->idproducto }}">{{ $array_productos[$i]->nombre }}</option>
                                @endif
                                @endfor
                        </select>
                    </div>
                </div>

                <div class="row">
                    <div class="col-12 pt-4">
                        <div class="card mb-3">
                            <div class="card-header">
                                <h6 class="m-0 font-weight-bold" style="color:#FF0000;">Programar el exámen:</h6>

                            </div>
                            <div class="panel-body">
                                <div class="row mb-5 px-2">
                                    <div class="col-sm-4 col-12 mt-2">
                                        <label>Fecha examen:*</label>
                                        <input type="date" class="form-control" id="txtFechaExamen" name="txtFechaExamen" value="{{$examen->fecha_examen }}" required>
                                    </div>
                                    <div class="col-sm-4 col-12 mt-2">
                                        <label>Hora inicio:*</label>
                                        <input type="time" class="form-control" id="txtHoraInicio" name="txtHoraInicio" value="{{$examen->hora_inicio }}">
                                    </div>
                                    <div class="col-sm-4 col-12 mt-2">
                                        <label>Hora fin:*</label>
                                        <input type="time" class="form-control" id="txtHoraFin" name="txtHoraFin" value="{{$examen->hora_fin }}">
                                    </div>
                                    @if(isset($examen))
                                    <div class="col-sm-6 col-12 mt-4 pl-5">
                                        <label><strong>INICIAR MANUALMENTE</strong></label> <br>
                                        @if($examen->hora_fin == "00:00:00" && $examen->hora_inicio != "00:00:00")
                                        <a title="Iniciar" href="#" class="btn-iniciar pl-4 ml-3" aria-hidden="true" onclick='iniciarExamen();'><span><i class="fas fa-stop-circle"></i></span></a>
                                        @elseif($examen->hora_fin =! "00:00:00" && $examen->hora_inicio =! "00:00:00")
                                        <a title="Iniciar" href="#" class="btn-iniciar pl-4 ml-3" aria-hidden="true" onclick='iniciarExamen();'><span><i class="fas fa-play-circle"></i></span></a>
                                        @else
                                        <a title="Iniciar" href="#" class="btn-iniciar pl-4 ml-3" aria-hidden="true" onclick='iniciarExamen();'><span><i class="fas fa-play-circle"></i></span></a>
                                        @endif
                                    </div>
                                    @else

                                    <div class="col-sm-6 col-12 mt-4 pl-5">
                                        <label><strong>INICIAR MANUALMENTE</strong></label> <br>
                                        <a title="Iniciar" href="#" class="btn-iniciar pl-4 ml-3" aria-hidden="true" onclick='abrirModalIniciar();'><span><i class="fas fa-play-circle"></i></span></a>

                                    </div>
                                    @endif


                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-12">
                        <div class="card mb-3">
                            <div class="card-header">
                                <h6 class="m-0 font-weight-bold" style="color:#FF0000;">Docentes</h6>
                                <div class="pull-right">
                                    <button type="button" class="btn btn-secondary fa fa-minus-circle" onclick="abrirDialogoEliminarDocente()"></button>
                                    <button type="button" class="btn btn-secondary fa fa-plus-circle" onclick="abrirModalDocente()"></button>
                                </div>
                            </div>
                            <div class="panel-body p-3">
                                <table id="grillaDocente" class="display" style="width:100%">
                                    <thead>
                                        <tr>
                                            <th> </th>
                                            <th>Nombre</th>
                                        </tr>
                                    </thead>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                        <div class="card mb-3">
                            <div class="card-header">
                                <h6 class="m-0 font-weight-bold" style="color:#FF0000;">Alumnos matriculados</h6>
                                <div class="pull-right">
                                    <button type="button" class="btn btn-cultural mr-3" onclick="fAbrirModalCsv()">Importar Alumnos</button>
                                    <button type="button" class="btn btn-secondary fa fa-minus-circle" onclick="abrirDialogoEliminarAlumno()"></button>
                                    <button type="button" class="btn btn-secondary fa fa-plus-circle" onclick="abrirModalAlumno()"></button>
                                </div>
                            </div>
                            <div class="panel-body p-2">
                                <table id="grillaAlumno" class="display" style="width:100%">
                                    <thead>
                                        <tr>
                                            <th> </th>
                                            <th>Alumno/a</th>
                                            <th>Fecha</th>
                                            <th>Estado</th>
                                            <th>Duración</th>
                                            <th>Calificación Escrita</th>
                                            <th>Calificación Oral</th>
                                            <th></th>

                                        </tr>
                                    </thead>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
            <!-- modal archivo csv -->
            <div class="modal fade" id="modalArchivoCsv" tabindex="-1" role="dialog" aria-labelledby="modalArchivoCsvLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="modalArchivoCsvLabel">Archivo</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <form method="POST" id="formArchivo" enctype="multipart/form-data" action="/panel/administrador/examenes/importar/{{$globalId}}">
                        <input type="hidden" name="_token" value="{{ csrf_token() }}"></input>
                        <input type="hidden" id="idExamen" name="idExamen" class="form-control" value="{{$examen->idexamen}}">
                            <div class="modal-body">

                                <div class="row">
                                    <div class="col-12 form-group">
                                        <label><strong> Docente: </strong></label>
                                        <select class="form-control" id="lstDocente" name="lstDocente">
                                            <option disabled selected value=" ">Seleccionar</option>
                                            @for ($i = 0; $i < count($array_docentes); $i++) <option value="{{ $array_docentes[$i]->iddocente }}">{{ $array_docentes[$i]->nombre }} {{$array_docentes[$i]->apellido}} </option>
                                                @endfor
                                        </select>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-12 form-group">
                                        <label><strong> Archivo CSV:</strong></label>
                                        <input type="file" id="txtArchivoCSv" name="txtArchivoCSv" class="form-control">
                                    </div>
                                </div>

                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                                <button type="button" class="btn btn-primary" onclick="$('#formArchivo').submit();">Enviar</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>


            <div class="modal fade" id="mdlEliminar" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLabel">Eliminar registro?</h5>
                            <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">×</span>
                            </button>
                        </div>
                        <div class="modal-body">¿Deseas eliminar el registro actual?</div>
                        <div class="modal-footer">
                            <button class="btn btn-secondary" type="button" data-dismiss="modal">No</button>
                            <button type="button" class="btn btn-primary" onclick="eliminar();">Sí</button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Docente -->
            <div class="modal fade" id="modalDocente" tabindex="-1" role="dialog" aria-labelledby="modalColorLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="modalDocenteLabel">Docentes</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <div class="row">
                                <div class="col-12 form-group">
                                    <select class="form-control" id="lstDocente" name="lstDocente">
                                        <option disabled selected value=" ">Seleccionar</option>
                                        @for ($i = 0; $i < count($array_docentes); $i++) <option value="{{ $array_docentes[$i]->iddocente }}">{{ $array_docentes[$i]->nombre }} {{$array_docentes[$i]->apellido}} </option>
                                            @endfor
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                            <button type="button" class="btn btn-primary" onclick="fAgregarDocente();">Agregar</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal fade" id="modalIniciar" tabindex="-1" role="dialog" aria-labelledby="modalIniciarLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="modalIniciarLabel">Docentes</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body px-4">
                            <p>Debe guardar el examen antes de poder dar de alta una de hora inicio y una hora de fin.</p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-primary" data-dismiss="modal">Aceptar</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal fade" id="modalmsgDocente" tabindex="-1" role="dialog" aria-labelledby="modalmsgDocente">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="modalBuscarLabel">Eliminar</h5>
                            <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">×</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <div class="row">
                                <div class="form-group col-sm-6">
                                    &#191;Desea confirmar la operacion?
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
                            <button type="button" class="btn btn-primary" onclick="eliminarDocente();">Aceptar</button>
                        </div>
                    </div>
                </div>
            </div>
            <!--Alumnos -->
            <div class="modal fade" id="modalAlumno" tabindex="-1" role="dialog" aria-labelledby="modalAlumnoLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="modalAlumnoLabel">Alumnos</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>

                        <div class="modal-body">

                            <div class="row">
                                <div class="col-12 form-group">
                                    <select class="form-control" id="lstAlumno" name="lstAlumno">
                                        <option disabled selected value=" ">Seleccionar</option>
                                        @for ($i = 0; $i < count($array_cliente); $i++) <option value="{{ $array_cliente[$i]->id }}">{{ $array_cliente[$i]->nombre }} {{$array_cliente[$i]->apellido}} </option>
                                            @endfor
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                            <button type="button" class="btn btn-primary" onclick="agregarAlumno();">Agregar</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal fade" id="modalmsgAlumno" tabindex="-1" role="dialog" aria-labelledby="modalmsgAlumno">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="modalBuscarLabel">Eliminar</h5>
                            <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">×</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <div class="row">
                                <div class="form-group col-sm-6">
                                    &#191;Desea confirmar la operacion?
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                            <button type="button" class="btn btn-primary" onclick="eliminarAlumno();">Aceptar</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- -->
<script>
    var dataTable = $('#grillaDocente').DataTable({
        "processing": true,
        "serverSide": false,
        "bFilter": false,
        "bInfo": true,
        "bSearchable": false,
        "paging": false,
        "pageLength": 25,
        "order": [
            [0, "asc"]
        ],
        "ajax": "{{ asset('/panel/administrador/examenes/cargarGrillaDocente?idExamen='.$globalId)}}"
    });
    var dataTable = $('#grillaAlumno').DataTable({
        "processing": true,
        "serverSide": false,
        "bFilter": false,
        "bInfo": true,
        "bSearchable": false,
        "paging": false,
        "pageLength": 25,
        "order": [
            [0, "asc"]
        ],
        "ajax": "{{ asset('/panel/administrador/examenes/cargarGrillaAlumno?idExamen='.$globalId)}}"
    });

    function guardar() {
        if ($("#form1").valid()) {
            modificado = false;
            form1.submit();
        } else {
            $("#modalGuardar").modal('toggle');
            msgShow("Corrija los errores e intente nuevamente.", "danger");
            return false;
        }
    }

    function eliminar() {
        $.ajax({
            type: "GET",
            url: "{{ asset('/panel/administrador/examenes/nuevo/eliminar') }}",
            data: {
                id: globalId
            },
            async: true,
            dataType: "json",
            success: function(data) {
                if (data.err = "0") {
                    msgShow("Registro eliminado exitosamente.", "success");
                    $("#btnEnviar").hide();
                    $("#btnEliminar").hide();
                    $('#mdlEliminar').modal('toggle');
                } else {
                    msgShow("Error al eliminar", "success");
                }
            }
        });
    }

    //Docente
    function abrirModalDocente() {
        if (globalId == "0") {
            msgShow("Debe guardar el examen antes de poder dar de alta un docente asociada.", "danger");
        } else {
            $('#modalDocente').modal('toggle');
        }

    }

    function abrirModalIniciar() {
        $('#modalIniciar').modal('toggle');

    }

    function fAgregarDocente() {
        var grilla = $('#grillaDocente').DataTable();
        grilla.row.add([
            "<input type='checkbox' name='txtId[]' value=''>",
            $("#lstDocente option:selected").text() + "<input type='hidden' name='txtDocente[]' value='" + $("#lstDocente option:selected").val() + "'>"
        ]).draw();
        $('#modalDocente').modal('toggle');
        limpiarFormularioDocente();
    }

    function agregarAlumno() {
        idCliente = $("#lstAlumno option:selected").val();
        $.ajax({
            type: "GET",
            url: "{{ asset('/panel/administrador/examenes/nuevo/agregar-alumno') }}",
            data: {
                idExamen: globalId,
                idCliente: idCliente
            },
            async: true,
            dataType: "json",
            success: function(data) {
                $('#grillaAlumno').DataTable().ajax.reload();
                $('#modalAlumno').modal('toggle');
            }
        });
    }

    function eliminarAlumno() {
        idCliente = $('#chk_alumno' + idCliente).val();
        $.ajax({
            type: "GET",
            url: "{{ asset('/panel/administrador/examenes/nuevo/eliminar-alumno') }}",
            data: {
                idExamen: globalId,
                idCliente: idCliente
            },
            async: true,
            dataType: "json",
            success: function(data) {
                $('#grillaAlumno').DataTable().ajax.reload();

            }
        });
    }

    function calificar(idCliente, idExamen) {
        idNota = $("#lstNota_" + idCliente + "_" + idExamen + " option:selected").val();
        $.ajax({
            type: "GET",
            url: "{{ asset('/panel/administrador/examenes/nuevo/calificar') }}",
            data: {
                idExamen: idExamen,
                idNota: idNota,
                idCliente: idCliente
            },
            async: true,
            dataType: "json",
            success: function(data) {
                $('#grillaAlumno').DataTable().ajax.reload();
            }
        });
    }

    function calificarOral(idCliente, idExamen) {
        idNota = $("#lstNotaOral_" + idCliente + "_" + idExamen + " option:selected").val();
        $.ajax({
            type: "GET",
            url: "{{ asset('/panel/administrador/examenes/nuevo/calificarOral') }}",
            data: {
                idExamen: idExamen,
                idNota: idNota,
                idCliente: idCliente
            },
            async: true,
            dataType: "json",
            success: function(data) {
                $('#grillaAlumno').DataTable().ajax.reload();
            }
        });
    }

    function limpiarFormularioDocente() {
        $("#lstDocente").val(0);
    }

    function abrirDialogoEliminarDocente() {
        $('#modalmsgDocente').modal('toggle');
    }

    function eliminarDocente() {
        var grilla = $('#grillaDocente').DataTable();
        $('#grillaDocente input[type=checkbox]').each(function() {
            if (this.checked) {
                $(this.parentElement.parentNode).addClass('borrar');
            }
        });
        grilla.rows('.borrar').remove().draw(false);
        $('#modalmsgDocente').modal('toggle');
    }

    //Alumno
    function abrirModalAlumno() {
        if (globalId == "0") {
            msgShow("Debe guardar el examen antes de poder dar de alta un Alumno asociada.", "danger");
        } else {
            $('#modalAlumno').modal('toggle');
        }

    }


    function limpiarFormularioAlumno() {
        $("#lstAlumno").val(0);
    }

    function abrirDialogoEliminarAlumno() {
        $('#modalmsgAlumno').modal('toggle');


    }

    function iniciarExamen() {
        horaInicio = $("#HoraInicio").val();
        horaFin = $("#HoraFin").val();
        $.ajax({
            type: "GET",
            url: "{{ asset('/panel/administrador/examenes/nuevo/iniciar') }}",
            data: {
                idExamen: globalId,
            },
            async: true,
            dataType: "json",
            success: function(data) {
                location.reload();
            }
        });
    }

    function fAbrirModalCsv() {
        $('#modalArchivoCsv').modal('toggle');
    }
</script>

@endsection