@extends('adminlte::page')

@section('content_header')
    <h1><b>Horarios/Registro de un nuevo horario</b></h1>
    <hr>
@stop

@section('content')

    <div class="row">

        <div class="col-md-8">


            <div class="row">
                <div class="col-md-12">
                    <div class="card card-primary">
                        <div class="card-header">
                            <h3 class="card-title">Datos del Grupo Académico</h3>
                            <!-- /.card-tools -->
                            <div class="card-tools">
                                <button type="button" class="btn btn-info" data-toggle="modal" data-target="#exampleModal">
                                    Buscar grupo académico
                                </button>
                            </div>
                        </div>
                        <!-- /.card-header -->
                        <div class="card-body">

                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">

                                        <h4>Datos del docente</h4>
                                        <hr>
                                        <div id="datos_docente" style="display:block">
                                            <div class="row">
                                                <div class="col-md-8">
                                                    <div class="row">
                                                        <div class="col-md-4">
                                                            <div class="form-group">
                                                                <label for="">Nombres</label>
                                                                <p id="nombres"></p>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-4">
                                                            <div class="form-group">
                                                                <label for="">Apellidos</label>
                                                                <p id="apellidos"></p>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-4">
                                                            <div class="form-group">
                                                                <label for="">CI</label>
                                                                <p id="ci"></p>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="row">
                                                        <div class="col-md-4">
                                                            <div class="form-group">
                                                                <label for="">Fecha nacimiento</label>
                                                                <p id="fecha_nacimiento"></p>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-4">
                                                            <div class="form-group">
                                                                <label for="">Teléfono</label>
                                                                <p id="telefono"></p>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-4">
                                                            <div class="form-group">
                                                                <label for="">Profesión</label>
                                                                <p id="profesion"></p>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="row">

                                                        <div class="col-md-6">
                                                            <div class="form-group">
                                                                <label for="">Email</label>
                                                                <p id=email></p>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="form-group">
                                                                <label for="">Dirección</label>
                                                                <p id="direccion"></p>
                                                            </div>
                                                        </div>
                                                    </div>

                                                </div>
                                                <div class="col-md-4">
                                                    <img src="" id="foto_docente" width="60%"
                                                        alt="fotografia del docente">
                                                </div>
                                            </div>
                                        </div>


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





                        </div>
                        <!-- /.card-body -->
                    </div>
                    <!-- /.card -->
                </div>
            </div>

            <div class="row">
                <div class="col-12">
                    <div class="card card-primary">
                        <div class="card-header">
                            <h3 class="card-title">Datos del grupo académico</h3>
                            <!-- /.card-tools -->
                        </div>
                        <!-- /.card-header -->
                        <div class="card-body">

                            <div class="row">
                            
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="">Gestión académica</label><b> (*)</b>
                                        <div class="input-group mb-3">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text"><i class="fas fa-book"></i></span>
                                            </div>
                                            <input type="text" class="form-control" name="" id="gestion_id" readonly>
                                        </div>

                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="">Nivel Académico</label><b> (*)</b>
                                        <div class="input-group mb-3">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text"><i class="fas fa-layer-group"></i></span>
                                            </div>
                                            <input type="text" class="form-control" name="" id="nivel_id" readonly>
                                        </div>

                                    </div>
                                </div>

                            </div>

                            <div class="row">

                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="">Carrera</label><b> (*)</b>
                                        <div class="input-group mb-3">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text"><i class="fas fa-graduation-cap"></i></span>
                                            </div>
                                            <input type="text" class="form-control" name="" id="carrera_id" readonly>
                                        </div>

                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="">Periodo Académico</label><b> (*)</b>
                                        <div class="input-group mb-3">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text"><i class="fas fa-calendar-alt"></i></span>
                                            </div>
                                            <input type="text" class="form-control" name="" id="periodo_id" readonly>
                                        </div>

                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="nombre">Materia</label><b> (*)</b>
                                        <div class="input-group mb-3">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text"><i class="fas fa-book"></i></span>
                                            </div>
                                            <input type="text" class="form-control" name="" id="materia_id" readonly>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label for="">Turnos</label><b> (*)</b>
                                        <div class="input-group mb-3">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text"><i class="fas fa-clock"></i></span>
                                            </div>
                                            <input type="text" class="form-control" name="" id="turno_id" readonly>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label for="">Paralelos</label><b> (*)</b>
                                        <div class="input-group mb-3">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text"><i class="fas fa-clone"></i></span>
                                            </div>
                                            <input type="text" class="form-control" name="" id="paralelo_id" readonly>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="form-group">
                                        <label for="">Nro Cupos</label><b> (*)</b>
                                        <div class="input-group mb-3">
                                            <input type="text" class="form-control" name="cupos_maximo"
                                                id="cupos_maximo" readonly>

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

                            </div>
                        </div>
                        <!-- /.card-body -->
                    </div>
                    <!-- /.card -->
                </div>
            </div>


        </div>


        <div class="col-md-4">
            <div class="row">
                <div class="col-md-12">
                    <div class="card card-primary">
                        <div class="card-header">
                            <h3 class="card-title">Datos del horario</h3>
                            <!-- /.card-tools -->
                        </div>
                        <!-- /.card-header -->
                        <div class="card-body">
                            <form action="{{url('admin/horarios/create')}}" method="post">
                                @csrf
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <input type="text" name="grupo_academico_id" id="grupo_academico_id" hidden>
                                            <label>Día</label><b> (*)</b>
                                            <div class="input-group mb-3">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text"><i class="fas fa-calendar-day"></i></span>
                                                </div>
                                                <select name="dia" class="form-control" required>
                                                    <option value="">Seleccione un día</option>
                                                    <option value="Lunes">Lunes</option>
                                                    <option value="Martes">Martes</option>
                                                    <option value="Miércoles">Miércoles</option>
                                                    <option value="Jueves">Jueves</option>
                                                    <option value="Viernes">Viernes</option>
                                                    <option value="Sábado">Sábado</option>
                                                </select>
                                            </div>
                                            @error('dia')
                                            <small style="color: red">{{ $message }}</small>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label>Aula</label><b> (*)</b>
                                            <div class="input-group mb-3">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text"><i class="fas fa-door-open"></i></span>
                                                </div>
                                                <input type="text" name="aula" class="form-control" placeholder="Ej: A-101" required>
                                            </div>
                                            @error('aula')
                                            <small style="color: red">{{ $message }}</small>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label>Hora de inicio</label><b> (*)</b>
                                            <div class="input-group mb-3">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text"><i class="fas fa-clock"></i></span>
                                                </div>
                                                <input type="time" name="hora_inicio" class="form-control" required>
                                            </div>
                                            @error('hora_inicio')
                                            <small style="color: red">{{ $message }}</small>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label>Hora de finalización</label><b> (*)</b>
                                            <div class="input-group mb-3">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text"><i class="fas fa-clock"></i></span>
                                                </div>
                                                <input type="time" name="hora_fin" class="form-control" required>
                                            </div>
                                            @error('hora_fin')
                                            <small style="color: red">{{ $message }}</small>
                                            @enderror
                                        </div>
                                    </div>
                                    
                                </div>
                                <hr>
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <a href="{{url('/admin/horarios')}}" class="btn btn-secondary">Cancelar</a>
                                            <button type="submit" class="btn btn-primary">Registrar</button>
                                        </div>
                                    </div>
                            </form>
                        </div>
                        <!-- /.card-body -->
                    </div>
                    <!-- /.card -->
                </div>
            </div>

        </div>






    </div>




    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Grupos académicos</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <table id="example1" class="table table-bordered table-hover table-striped table-sm">
                        <thead>
                            <tr>
                                <th style="text-align: center">Nro</th>
                                <th style="text-align: center">Docente</th>
                                <th style="text-align: center">Gestión</th>
                                <th style="text-align: center">Nivel</th>
                                <th style="text-align: center">Periodo</th>
                                <th style="text-align: center">Carrera</th>
                                <th style="text-align: center">Materia</th>
                                <th style="text-align: center">Turno</th>
                                <th style="text-align: center">Paralelo</th>
                                <th style="text-align: center">Cupos</th>

                                <th style="text-align: center">Acción</th>
                            </tr>
                        </thead>
                        <tbody>
                            @php
                                $contador = 1;
                            @endphp
                            @foreach ($gruposAcademicos as $grupos)
                                <tr>
                                    <td style="text-align: center">{{ $contador++ }}</td>
                                    <td>{{ $grupos->docente->apellidos . ' ' . $grupos->docente->nombres }}</td>
                                    <td>{{ $grupos->gestion->nombre }}</td>
                                    <td>{{ $grupos->nivel->nombre }}</td>
                                    <td>{{ $grupos->periodo->nombre }}</td>
                                    <td>{{ $grupos->carrera->nombre }}</td>
                                    <td>{{ $grupos->materia->nombre }}</td>
                                    <td>{{ $grupos->turno->nombre }}</td>
                                    <td>{{ $grupos->paralelo->nombre }}</td>
                                    <td>{{ $grupos->cupo_maximo }}</td>

                                    <td style="text-align: center">
                                        <div class="btn-group" role="group" aria-label="Basic example">
                                            <button class="btn btn-info btn_selecionar"
                                                data-id="{{ $grupos->id }}" data-dismiss="modal">Seleccionar</button>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>

@stop

@section('css')
    <style>
        .select2-container .select2-selection--single {
            height: 40px !important;
        }
    </style>
@stop

@section('js')

    <script>
        $('.btn_selecionar').click(function() {
            var id = $(this).data('id');
            if (id) {
                $.ajax({
                    url: "{{ url('/admin/horarios/buscar_grupo_academico/') }}" + '/' + id,
                    type: 'GET',
                    success: function(grupoAcademico) {
                        console.log(grupoAcademico);
                        $('#nombres').html(grupoAcademico.docente.nombres);
                        $('#apellidos').html(grupoAcademico.docente.apellidos);
                        $('#ci').html(grupoAcademico.docente.ci);
                        $('#fecha_nacimiento').html(grupoAcademico.docente.fecha_nacimiento);
                        $('#telefono').html(grupoAcademico.docente.telefono);
                        $('#profesion').html(grupoAcademico.docente.profesion);
                        $('#direccion').html(grupoAcademico.docente.direccion);
                        $('#email').html(grupoAcademico.docente.usuario.email);
                        $('#grupo_academico_id').val(grupoAcademico.id);
                        $('#foto_docente').attr('src', grupoAcademico.foto_url).show();

                        $('#gestion_id').val(grupoAcademico.gestion.nombre);
                        $('#nivel_id').val(grupoAcademico.nivel.nombre);
                        $('#carrera_id').val(grupoAcademico.carrera.nombre);
                        $('#periodo_id').val(grupoAcademico.periodo.nombre);
                        $('#materia_id').val(grupoAcademico.materia.nombre);
                        $('#turno_id').val(grupoAcademico.turno.nombre);
                        $('#paralelo_id').val(grupoAcademico.paralelo.nombre);
                        $('#cupos_maximo').val(grupoAcademico.cupo_maximo);

                    },
                    error: function() {
                        alert("No se pudo obtener la información del docente");
                    }
                });
            }

        });
    </script>

    <script>
        $(function() {
            $("#example1").DataTable({
                "pageLength": 5,
                "language": {
                    "emptyTable": "No hay información",
                    "info": "Mostrando _START_ a _END_ de _TOTAL_ Grupos Académicos",
                    "infoEmpty": "Mostrando 0 a 0 de 0 Grupos Académicos",
                    "infoFiltered": "(Filtrado de _MAX_ total Grupos Académicos)",
                    "lengthMenu": "Mostrar _MENU_ Grupos Académicos",
                    "loadingRecords": "Cargando...",
                    "processing": "Procesando...",
                    "search": "Buscador:",
                    "zeroRecords": "Sin resultados encontrados",
                    "paginate": {
                        "first": "Primero",
                        "last": "Último",
                        "next": "Siguiente",
                        "previous": "Anterior"
                    }
                },
                "responsive": true,
                "lengthChange": true,
                "autoWidth": false,

            }).buttons().container().appendTo('#example1_wrapper .row:eq(0)');
        });
    </script>

    <script>
        $('.select2').select2({});

        $('#buscar_docente').on('change', function() {
            var id = $(this).val();


            if (id) {
                $.ajax({
                    url: "{{ url('/admin/grupos_academicos/buscar_docente/') }}" + '/' + id,
                    type: 'GET',
                    success: function(docente) {
                        console.log(docente);
                        $('#nombres').html(docente.nombres);
                        $('#apellidos').html(docente.apellidos);
                        $('#ci').html(docente.ci);
                        $('#fecha_nacimiento').html(docente.fecha_nacimiento);
                        $('#telefono').html(docente.telefono);
                        $('#profesion').html(docente.profesion);
                        $('#direccion').html(docente.direccion);
                        $('#email').html(docente.usuario.email);
                        $('#foto_docente').attr('src', docente.foto_url).show();
                        $('#datos_docente').css('display', 'block');
                        $('#historial_academico').css('display', 'block');
                        $('#docente_id').val(docente.id);

                        if (docente.formacion && docente.formacion.length > 0) {
                            //alert("tiene formacion");
                            var tabla = '<table class="table table-bordered">';
                            tabla +=
                                '<thead><tr><th>Título</th><th>Institución</th><th>Nivel</th><th>Año de graduación</th></tr></thead>';
                            tabla += '<tbody>';
                            docente.formacion.forEach(function(item) {
                                tabla += '<tr>';
                                tabla += '<td>' + item.titulo + '</td>';
                                tabla += '<td>' + item.institucion + '</td>';
                                tabla += '<td>' + item.nivel + '</td>';
                                tabla += '<td>' + item.ano_graduacion + '</td>';
                                tabla += '</tr>';
                            });
                            tabla += '</table>';
                            $('#tabla_historial').html(tabla).show();
                        } else {
                            // alert("no tiene formacion");
                            $('#tabla_historial').html(
                                '<p>No hay formación académico registrado del docente</p>').show();
                        }



                    },
                    error: function() {
                        alert("No se pudo obtener la información del docente");
                    }
                });
            }
        });
    </script>
@stop