@extends('plantilla')
@section('titulo', "Datos del curso")
@section('scripts')
<link href=https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css rel="stylesheet">
<script src=https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js></script>
<script>
    globalId = '0';
    
</script>
@endsection
@section('breadcrumb')
<ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="/home">Inicio</a></li>
    <li class="breadcrumb-item">Administraci&oacute;n</li>
    <li class="breadcrumb-item"><a href="/administracion/cursos">Cursos</a></li>
    <li class="breadcrumb-item active">Curso nuevo</li>
</ol>
<ol class="toolbar">
    <li class="btn-item"><a title="Nuevo" href="/administracion/curso/nuevo" class="fa fa-plus-circle" aria-hidden="true"><span>Nuevo</span></a></li>
    <li class="btn-item"><a title="Guardar" href="#" class="fa fa-floppy-o" aria-hidden="true" onclick="javascript: $('#modalGuardar').modal('toggle');"><span>Guardar</span></a>
    </li>
    <li class="btn-item"><a title="Eliminar" href="#" class="fa fa-trash-o" aria-hidden="true" onclick="javascript: $('#mdlEliminar').modal('toggle');"><span>Eliminar</span></a>
    </li>
    <li class="btn-item"><a title="Salir" href="#" class="fa fa-arrow-circle-o-left" aria-hidden="true" onclick="javascript: $('#modalSalir').modal('toggle');"><span>Salir</span></a></li>
</ol>
<script>
function fsalir(){
    location.href ="/administracion/cursos";
}
</script>

@endsection
@section('contenido')
<div class="row">
    <div id = "msg"></div>
    </div>
<form id="form1" method="POST">
    <div class="row">
        <input type="hidden" name="_token" value="{{ csrf_token() }}"></input>
        <input type="hidden" id="id" name="id" class="form-control" value="{{$globalId}}" required>
        <div class="form-group col-sm-6">
            <label>Nombre *:</label>
            <input type="text" class="form-control" id="txtNombre" name="txtNombre" value="{{$curso->nombre }}" required>
        </div>
        <div class="form-group col-sm-6">
            <label>Activo *:</label>
            <select class="form-control" id="lstEstado" name="lstEstado">
                <option selected disabled value="">Seleccionar</option>
                <option value="1" {{isset($curso) && $curso->estado == 1? 'selected' : ''}}>Si</option>
                <option value="0" {{isset($curso) && $curso->estado == 0? 'selected' : ''}}>No</option>
            </select>
        </div>
        <div class="form-group col-sm-6">
            <label>Producto asociado:</label>
            <select class="form-control selectpicker" id="lstProducto" name="lstProducto" data-live-search="true">  
                <option disabled selected value="">Seleccionar</option>
                @for ($i = 0; $i < count($array_productos); $i++)
                    @if (isset($curso) and $array_productos[$i]->idproducto == $curso->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 class="form-group col-sm-6">
            <label>URL zoom:</label>
            <input type="url" class="form-control" id="txtUrlZoom" name="txtUrlZoom" value="{{$curso->url_zoom }}">
        </div>
        <div class="form-group col-sm-6">
            <label>Periodo inicio de inscripci&oacute;n:</label>
            <input type="date" class="form-control" id="txtPeriodoInicio" name="txtPeriodoInicio" value="{{$curso->periodo_inicio }}">
        </div>
        <div class="form-group col-sm-6">
            <label>Periodo fin de inscripci&oacute;n:</label>
            <input type="date" class="form-control" id="txtPeriodoFin" name="txtPeriodoFin" value="{{$curso->periodo_fin }}">
        </div>
        <div class="form-group col-sm-6">
            <label>Cursada inicio:</label>
            <input type="date" class="form-control" id="txtCursadaInicio" name="txtCursadaInicio" value="{{$curso->cursada_inicio }}">
        </div>
        <div class="form-group col-sm-6">
            <label>Cursada fin:</label>
            <input type="date" class="form-control" id="txtCursadaFin" name="txtCursadaFin" value="{{$curso->cursada_fin }}">
        </div>
        
    </div>
    <div class="row mt-3">   
        <div class="col-sm-12">  
        <div class="card mb-3">
                <div class="card-header">
                    <h6 class="m-0 font-weight-bold text-primary">Alumnos matriculados</h6>
                    <div class="pull-right">
                        <button type="button" class="btn btn-secondary fa fa-minus-circle" onclick="abrirDialogoEliminarAlumnoMatriculado()"></button>
                        <button type="button" class="btn btn-secondary fa fa-plus-circle" onclick="abrirModalAlumnoMatriculado()"></button>
                    </div>
                </div>
                <div class="panel-body">
                    <table id="grillaAlumnosMatriculados" class="display" style="width:98%">
                        <thead>
                            <tr>
                                <th> </th>
                                <th>Nombre</th>
                                <th>DNI</th>
                                <th>Email</th>
                                <th>Telefono</th>
                                <th>Fecha de inscripci&oacute;n</th>
                                <th>Presentismo</th>
                                <th>Promedio</th>
                                <th>Acci&oacute;n</th>
                            </tr>
                        </thead>
                    </table> 
                 </div>
            </div>          
        </div>
    </div> 
</form>
<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>
<!-- Modal -->
<div class="modal fade" id="modalAlumnoMatriculado" tabindex="-1" role="dialog" aria-labelledby="modalAlumnoMatriculadoLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content" style="display: inline-table">
            <div class="modal-header">
                <h5 class="modal-title" id="modalBuscarLabel">Nuevo alumno</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">
                        <label>Alumno</label>
                        <select id="lstAlumnoMatriculado" name="lstAlumnoMatriculado" class="form-control selectpicker" data-live-search="true">
                            <option selected disabled value="">Seleccionar</<option>
                            @foreach($array_alumnos as $alumno)
                                <option value="{{$alumno->id}}">{{$alumno->nombre}} {{$alumno->apellido}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group col-sm-6">
                        <label>Fecha inscripcion</label>
                        <input type="date" id="txtFechaInscripcionAlumno" name="txtFechaInscripcionAlumno" class="form-control">
                    </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="fAgregarAlumnoMatriculado();">Agregar</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modalmsgAlumnoMatriculado" tabindex="-1" role="dialog" aria-labelledby="modalmsgAlumnoMatriculado">
    <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-lg-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="eliminarAlumnoMatriculado();">Aceptar</button>
            </div>
        </div>
    </div>
</div>
<script>
    $("#form1").validate();

    var dataTable = $('#grillaAlumnosMatriculados').DataTable({
        "processing": true,
        "serverSide": false,
        "bFilter": false,
        "bInfo": true,
        "bSearchable": false,
        "paging": false,
        "pageLength": 25,
        "order": [
            [0, "asc"]
        ],
        "ajax": "{{ asset('/administracion/curso/cargarGrillaAlumnosMatriculados?idcurso='.$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('/administracion/curso/eliminar') }}",
            data: { id:globalId },
            async: true,
            dataType: "json",
            success: function (data) {
                msgShow(data.MSG, data.ESTADO);
                if (data.ESTADO = "success") {
                    $("#btnEnviar").hide();
                    $("#btnEliminar").hide();
                    $('#mdlEliminar').modal('toggle');
                }
            }
        });
    }
    //funcionalidad modal alumnos matriculados
    function abrirModalAlumnoMatriculado() {
        if(globalId == 0 ){
            msgShow("Debe guardar el curso antes de poder dar de alta una alumno asociado.", "danger");
        }
        else{
            $('#modalAlumnoMatriculado').modal('toggle');
        }

    }
    function limpiarFormularioAlumnoMatriculado(){
        $("#lstAlumnoMatriculado").val();
        $("#txtFechaInscripcionAlumno").val();
    }
    
    function fAgregarAlumnoMatriculado(){
       idAlumno = $("#lstAlumnoMatriculado option:selected").val();
       fechaInscripcion = $("#txtFechaInscripcionAlumno").val();
        $.ajax({
            type: "GET",
            url: "{{ asset('/administracion/curso/agregarAlumnoMatriculado') }}",
            data: {
                idCurso: globalId,
                idAlumno: idAlumno,
                fechaInscripcion: fechaInscripcion
            },
            async: true,
            dataType: "json",
            success: function(data) {
                $('#grillaAlumnosMatriculados').DataTable().ajax.reload();
                $('#modalAlumnoMatriculado').modal('toggle');
            }
        });
    }

    function abrirDialogoEliminarAlumnoMatriculado() {
        $('#modalmsgAlumnoMatriculado').modal('toggle');
    }
    function eliminarAlumnoMatriculado() {
        var grilla = $('#grillaAlumnosMatriculados').DataTable();
        $('#grillaAlumnosMatriculados input[type=checkbox]').each(function () {
            if (this.checked) {
                $(this.parentElement.parentNode).addClass('borrar');
                idAlumno = this.value;
                $.ajax({
                    type: "GET",
                    url: "{{ asset('/administracion/curso/eliminarAlumnoMatriculado') }}",
                    data: {
                        idCurso: globalId,
                        idAlumno: idAlumno
                    },
                    async: true,
                    dataType: "json",
                    success: function(data) {
                        $('#grillaAlumnosMatriculados').DataTable().ajax.reload();
                    }
                }); 
            }
        });
        grilla.rows('.borrar').remove().draw(false);
        $('#modalmsgAlumnoMatriculado').modal('toggle');
    }
</script>
@endsection