@extends('layouts.master')
@section('title') Inicio @endsection
@section('content')
<!-- this is breadcrumbs -->
@section('css')

<link href="{{URL::asset('assets/plugins/huebee/huebee.min.css')}}" rel="stylesheet" type="text/css" />
<link href="{{URL::asset('assets/plugins/datepicker/datepicker.min.css')}}" rel="stylesheet" type="text/css" />
@endsection
@component('components.breadcrumb')
@slot('li_1') Inicio @endslot
@slot('li_2') Panel Academico @endslot
@slot('title') Supervición de Docentes @endslot
@endcomponent

<!-- start page content -->
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <!-- Botón para agregar nueva matrícula -->


                <div class="card shadow-sm border-0 rounded-4 mb-3">
                    <div class="card-body">

                        <h5 class="mb-3 fw-bold">🔎 Filtros de Supervisión</h5>

                        <div class="row">

                            <!-- PERIODO -->
                            <div class="col-md-4">
                                <label class="form-label">Periodo</label>
                                <select id="periodo_id" class="form-control">
                                    <option value="">Seleccione</option>
                                    @foreach($periodos as $p)
                                    <option value="{{ $p->id }}">{{ $p->nombre }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <!-- PLAN -->
                            <div class="col-md-4">
                                <label class="form-label">Plan de Estudio</label>
                                <select id="plan_id" class="form-control">
                                    <option value="">Seleccione</option>
                                </select>
                            </div>

                            <!-- BOTON -->
                            <div class="col-md-4 d-flex align-items-end">
                                <button id="btnBuscar" class="btn btn-primary w-100">
                                    🔍 Buscar
                                </button>
                            </div>

                        </div>

                    </div>
                </div>

                <div id="loader" class="text-center my-4" style="display:none;">
                    <div class="spinner-border text-primary"></div>
                    <p class="mt-2">Cargando datos...</p>
                </div>

                <div id="resultado"></div>




            </div>

            <!--end card-body-->
        </div>
        <!--end card-->
    </div>
    <!--end col-->
</div>
<!-- Modal de edición -->



<!--end row-->


@endsection
@section('script')
<!-- jQuery y DataTables -->

<!-- jQuery y DataTables -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>

<!-- DataTables Buttons -->
<script src="https://cdn.datatables.net/buttons/2.3.6/js/dataTables.buttons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.print.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.colVis.min.js"></script>

<!-- DataTables CSS -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.3.6/css/buttons.dataTables.min.css">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>


<script>
    $('#btnBuscar').click(function() {

        let periodo = $('#periodo_id').val();
        let plan = $('#plan_id').val();

        if (!periodo) {
            Swal.fire('Error', 'Seleccione un periodo', 'warning');
            return;
        }

        $('#loader').show();
        $('#resultado').html('');

        $.ajax({
            url: "{{ route('supervision.cargar') }}",
            method: "POST",
            data: {
                _token: "{{ csrf_token() }}",
                periodo_id: periodo,
                plan_id: plan
            },
            success: function(res) {
                $('#loader').hide();
                $('#resultado').html(res);
            },
            error: function() {
                $('#loader').hide();
                Swal.fire('Error', 'Ocurrió un error', 'error');
            }
        });

    });
</script>

<script>
$('#periodo_id').change(function () {

    let periodo = $(this).val();

    $('#plan_id').html('<option>Cargando...</option>');

    $.ajax({
        url: "{{ route('supervision.planes') }}",
        method: "POST",
        data: {
            _token: "{{ csrf_token() }}",
            periodo_id: periodo
        },
        success: function (planes) {

            let html = '<option value="">Seleccione</option>';

            planes.forEach(function (p) {
                html += `<option value="${p.id}">${p.nombre}</option>`;
            });

            $('#plan_id').html(html);
        },
        error: function () {
            Swal.fire('Error', 'No se pudieron cargar los planes', 'error');
        }
    });

});
</script>




@endsection