@extends("admin.layout.layout")
@section("styles")
    @php
        $titulo = "Matriculas";
        $modulo = "Matriculas";
        $vista="Sin Agendar";
    @endphp
    <title>{{getenv("APP_NAME")}} | {{$titulo }} {{$vista}}</title>
    <link href="assets/plugins/custom/datatables/datatables.bundle.css" rel="stylesheet" type="text/css" />

    <style>
        #tabla thead th {
            font-weight: bold;
        }
    </style>

@endsection

@section("contenido")
    <!--begin::Row-->
    <div class="row gx-5 gx-xl-10">
        <div class="card card-flush bgi-no-repeat bgi-size-contain bgi-position-x-end h-md-50 mb-1" style="background-color: #f15c27;)">
            <div class="card-header pt-5">
                <div class="card-title d-flex flex-column">
                    <span class="fs-2hx fw-bold text-white me-2 lh-1 ls-n2">{{$matriculas->count()}}</span>
                    <span class="text-white pt-1 fw-semibold fs-6">Matriculas sin agendar {{$parametro->curso_lectivo->curso_lectivo}}</span>
                </div>
            </div>

            <div class="card-body d-flex align-items-end pt-0 mb-1">
                <div class="d-flex align-items-center flex-column mt-3 w-100">
                </div>

                <div class="d-flex mx-3">
                    <div class="form-group">
                        <label for="seccion_id" class="text-white">Sección</label>
                        <select class="form-select form-select-sm" id="seccion_id" name="seccion_id">
                            @foreach($secciones as $seccion)
                                <option value="{{$seccion->id}}">{{$seccion->seccion}}</option>

                            @endforeach
                        </select>
                    </div>

                </div>
            </div>
            <!--end::Card body-->
        </div>
        <div class="card mt-1">
            <div class="card-body my-0">
                <div class="row">
                    <div class="col-md-12">
                        <table id="tabla" class="table table-hover"></table>
                    </div>
                </div>
            </div>
        </div>

    </div>
@endsection

@section("scripts")
    <script src="assets/plugins/custom/datatables/datatables.bundle.js"></script>

    <script>
        let tabla;
        let url_dt="{{route('admin::matriculas.sinAgendar.dataTable',"1")}}";
        $( document ).ready(function() {
            tabla= $('#tabla').DataTable({
                dom:
                    "<'row'<'col-sm-6 text-left'f><'col-sm-6 text-right'B>>" +
                    "<'row'<'col-sm-12'tr>>" +
                    "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7 dataTables_pager'lp>>",

                buttons: [
                    'excelHtml5',
                    'pdfHtml5',
                ],
                responsive: true,
                fixedHeader: true,
                pageLength : 25,
                processing: true,
                language: { url: "//cdn.datatables.net/plug-ins/1.10.22/i18n/Spanish.json" },
                ajax: {
                    url: url_dt,
                    type: 'GET',
                    dataType: 'json',
                },
                order: [[4,"asc"],[5,"asc"],[6,"asc"]],
                columns: [
                    {title:"#", data: 'id', },
                    {title:"Fecha", data: 'fecha', render: data => data ? new Date(data).toISOString().slice(0, 10) : '' },
                    {title:"Tipo identificación", data: 'estudiante.tipo_identificacion.tipo_identificacion', },
                    {title:"Identificación", data: 'estudiante.identificacion', },
                    {title:"Primer apellido", data: 'estudiante.primer_apellido', },
                    {title:"Segundo apellido", data: 'estudiante.segundo_apellido', },
                    {title:"Nombre", data: 'estudiante.nombre', responsivePriority: 1 },
                    {title:"Sección", data: 'seccion.seccion', },
                    {title:"Celular", data: 'estudiante.celular', },
                    {title:"Acciones", data: null, responsivePriority: 2,
                        render: function (data, type, row) {
                            return'<a class="btn btn-primary btn-sm" href="' + "{{ route('admin::matricula.revisar',':id') }}".replace(':id', data.id) + '">Revisar</a>';
                        }
                    },
                ],
            });

            $('#seccion_id').on('change', function () {
                let id = $(this).val();
                let url_dt="{{route('admin::matriculas.sinAgendar.dataTable',":id")}}";
                url_dt=url_dt.replace(":id",id);
                tabla.ajax.url(url_dt).load();
            });
        });
    </script>
@endsection