@extends('layout.template')
@section('title', 'SICCAP ICATEP | Reporte Capacitandos')
@section('content')
<div class="content-body">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                    <h4 class="mb-sm-0 font-size-18">Reporte de Capacitandos</h4>
                    <div class="page-title-right">
                        <ol class="breadcrumb m-0">
                            <li class="breadcrumb-item"><a href="{{ route('reportes') }}">Reportes</a></li>
                            <li class="breadcrumb-item active">Capacitandos</li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">Filtros de Búsqueda</h4>
                    </div>
                    <div class="card-body">
                        <form id="filtroForm">
                            @csrf
                            <div class="row">
                                <div class="col-md-3 mb-3">
                                    <label for="unidadcap" class="form-label">Unidad</label>
                                    <select multiple class="form-control select-all-trigger" name="unidadcap[]">
                                        <option value="all">Seleccionar todo</option>
                                        @foreach($unidades as $unidad)
                                            <option value="{{ $unidad->uni_identificador }}">
                                                {{ $unidad->uni_nombre_corto }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="col-md-3 mb-3">
                                    <label for="tipo" class="form-label">Tipo de Curso</label>
                                    <select class="form-control select-all-trigger" multiple name="tipo[]" required>
                                        <option value="all">Seleccionar todo</option>
                                        @foreach($tiposCursos as $tipo)
                                            <option value="{{ $tipo->tip_id }}">{{ $tipo->tip_nombre }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-2 mb-3">
                                    <label for="mes" class="form-label">Mes</label>
                                    <select class="form-control select-all-trigger" multiple name="mes[]" required>
                                        <option value="all">Seleccionar todo</option>
                                        @foreach($meses as $mes)
                                            <option value="{{ $mes->mes_id }}">{{ $mes->mes_nombre }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                @push('scripts')
                                <script>
                                    document.querySelectorAll('.select-all-trigger').forEach(select => {
                                        select.addEventListener('change', function() {
                                            let options = Array.from(this.options);
                                            let allOption = options.find(opt => opt.value === 'all' || opt.value === '1'); // Ajustar según el value del option 'todos'
                                            
                                            if (allOption && allOption.selected) {
                                                options.forEach(opt => opt.selected = true);
                                                allOption.selected = false; // Desmarcar 'todos' para evitar enviarlo si no se desea, o dejarlo true.
                                                // Si usas librerías como Select2, aquí deberías triggerar el evento change: $(this).trigger('change');
                                            }
                                        });
                                    });
                                </script>
                                @endpush
                                <div class="col-md-2 mb-3">
                                    <label for="anio" class="form-label">Año</label>
                                    <select class="form-control" multiple name="anio[]" required>
                                        @foreach($anios as $anio)
                                            <option value="{{ $anio }}" {{ $anio == date('Y') ? 'selected' : '' }}>{{ $anio }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-2 mb-3 d-flex align-items-end">
                                    <button type="submit" class="btn btn-primary w-100">Buscar</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        <div class="table-responsive">
                            <table id="tablaCapacitandos" class="table table-bordered dt-responsive nowrap w-100">
                                <thead>
                                    <tr>
                                        <th>UNIDAD</th>
                                        <th>CLAVE REGISTRO</th>
                                        <th>TIPO CURSO</th>
                                        <th>NOMBRE CURSO</th>
                                        <th>CLAVE CURSO</th>
                                        <th>INSTRUCTOR</th>
                                        <th>INICIA</th>
                                        <th>TERMINA</th>
                                        <th>NO. CONTROL</th>
                                        <th>CAPACITANDO</th>
                                        <th>CURP</th>
                                        <th>TELEFONO</th>
                                        <th>EMAIL</th>
                                        <th>IMPORTE</th>
                                        <th>DIRECCION</th>
                                        <th>MUNICIPIO</th>
                                        <th>ESTADO</th>
                                        <th>HORAS</th>
                                        <th>CONVENIO</th>
                                        <th>ESTATUS</th>
                                        <th>TOTAL ALUMNOS</th>
                                        <th>MODALIDAD</th>
                                        <th>UBICACION</th>
                                        <th>DOMICILIO</th>
                                        <th>HORARIO</th>
                                        <th>BECADO</th>
                                        <th>EDO. CIVIL</th>
                                        <th>POB. VULNERABLE</th>
                                        <th>DISCAPACIDAD</th>
                                        <th>MEDIO ENTERO</th>
                                        <th>SEXO</th>
                                        <th>GRADO ESTUDIOS</th>
                                        <th>EDAD</th>
                                        <th>ACREDITADO</th>
                                        <th>FOLIO DOC.</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<style>
    /* Hide the original select elements after Select2 initialization */
    select.select2-hidden-accessible {
        display: none !important;
    }
</style>

<!-- Select2 -->
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<!-- DataTables -->
<link href="https://cdn.datatables.net/1.11.4/css/dataTables.bootstrap5.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/buttons/2.2.2/css/buttons.bootstrap5.min.css" rel="stylesheet">
<script src="https://cdn.datatables.net/1.11.4/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.11.4/js/dataTables.bootstrap5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.2.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.2.2/js/buttons.html5.min.js"></script>

<script>
    $(document).ready(function() {
        // Initialize Select2 with "Select All" functionality
        // function initializeSelectAll(selector) {
        //     $(selector).select2({
        //         placeholder: "Seleccione una opción",
        //         width: '100%'
        //     }).on('select2:select', function(e) {
        //         var data = e.params.data;
        //         if (data.id === 'all') {
        //             // Select all options except "all"
        //             var allOptions = [];
        //             $(this).find('option').not('[value="all"]').each(function() {
        //                 allOptions.push($(this).val());
        //             });
        //             $(this).val(allOptions).trigger('change');
        //         }
        //     }).on('select2:unselect', function(e) {
        //         var data = e.params.data;
        //         // If any option is deselected, also deselect "all"
        //         if (data.id !== 'all') {
        //             var currentValues = $(this).val() || [];
        //             var index = currentValues.indexOf('all');
        //             if (index > -1) {
        //                 currentValues.splice(index, 1);
        //                 $(this).val(currentValues).trigger('change');
        //             }
        //         }
        //     });
        // }

        // initializeSelectAll('select[name="unidadcap[]"]');
        // initializeSelectAll('#tipo');
        // initializeSelectAll('#mes');

        $('#anio').select2({ placeholder: "Seleccione Año", width: '100%' });

        var table = $('#tablaCapacitandos').DataTable({
            language: {
                url: "//cdn.datatables.net/plug-ins/1.10.25/i18n/Spanish.json"
            },
            dom: 'Bfrtip',
            buttons: [
                'excelHtml5'
            ],
            columns: [
                { data: 'nombre_unidad' },
                { data: 'au_nva_cve_reg' },
                { data: 'tipo_curso' },
                { data: 'au_cr_nombre' },
                { data: 'cr_clave' },
                { data: 'au_in_nombre' },
                { data: 'aul_fecha_inicia' },
                { data: 'aul_fecha_termina' },
                { data: 'al_num_control' },
                { data: 'capacitando' },
                { data: 'al_curp' },
                { data: 'al_celular' },
                { data: 'al_email' },
                { data: 'aa_importe' },
                { data: 'direccion' },
                { data: 'al_municipio' },
                { data: 'esmex_nombre' },
                { data: 'au_horas' },
                { data: 'au_convenio' },
                { data: 'au_status' },
                { data: 'total_alumnos' },
                { data: 'au_modalidad' },
                { data: 'au_ubicacion' },
                { data: 'au_domicilio' },
                { data: 'au_dias' },
                { data: 'aa_becado' },
                { data: 'al_edo_civ' },
                { data: 'al_pob_vul' },
                { data: 'al_discapacidad' },
                { data: 'aa_como_se_entero' },
                { data: 'al_sexo' },
                { data: 'al_grado_estudios' },
                { data: 'edad' },
                { data: 'aa_acreditado' },
                { data: 'aa_folio_diploma' }
            ]
        });

        $('#filtroForm').on('submit', function(e) {
            e.preventDefault();
            
            // Remove "all" values before submitting
            var formData = $(this).serializeArray().filter(function(item) {
                return item.value !== 'all';
            });

            $.ajax({
                url: "{{ route('reportes.capacitandos.data') }}",
                type: "POST",
                data: $.param(formData) + '&_token=' + $('input[name="_token"]').val(),
                success: function(response) {
                    table.clear();
                    table.rows.add(response.data);
                    table.draw();
                }
            });
        });
    });
</script>
@endpush