@extends('layout.template')
@section('title', 'SICCAP ICATEP | Reporte Instructores')
@section('content')
<div class="content-body">
    <div class="container-fluid">
        
         <div class="row page-titles mx-0">
            <div class="col-sm-6 p-md-0">
                <div class="welcome-text">
                    <h5>Reporte de Instructores (PSC)</h5>
                </div>
            </div>
            <div class="col-sm-6 p-md-0 justify-content-sm-end mt-2 mt-sm-0 d-flex">
                <ol class="breadcrumb">
                    <a href="{{ url('reportes') }}" class="btn btn-rounded btn-dark back-fixed" aria-label="Regresar">
                        <span class="btn-icon-start text-dark"><i class="fa fa-arrow-left"></i></span>
                        Regresar
                    </a>
                </ol>
            </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-4 mb-3">
                                    <label for="unidadcap" class="form-label">Unidad</label>
                                    <select multiple class="form-control select-all-trigger" name="unidadcap[]" id="unidadcap" required>
                                        <option value="all">Seleccionar todo</option>
                                        @foreach($unidades as $unidad)
                                        <option value="{{ $unidad->uni_id }}">
                                            {{ $unidad->uni_nombre_corto }}
                                        </option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="col-md-2">
                                    <label class="form-label">&nbsp;</label>
                                    <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="mb-3">
                            <button type="button" id="exportExcelBtn" class="btn btn-success">
                                <i class="bx bxs-file-doc font-size-15 align-middle me-2"></i>Exportar a Excel
                            </button>
                        </div>
                        <div class="table-responsive">
                            <table id="tablaInstructores" class="table table-bordered dt-responsive nowrap w-100">
                                <thead>
                                    <tr>
                                        <th>UNIDAD</th>
                                        <th>EXPEDIENTE</th>
                                        <th>APELLIDO PATERNO</th>
                                        <th>APELLIDO MATERNO</th>
                                        <th>NOMBRE(S)</th>
                                        <th>EMAIL</th>
                                        <th>CURP</th>
                                        <th>RFC</th>
                                        <th>SEXO</th>
                                        <th>FECHA NAC.</th>
                                        <th>CELULAR</th>
                                        <th>FECHA INGRESO</th>
                                        <th>FECHA DE ALTA</th>
                                        <th>CALLE</th>
                                        <th>NO.EXTERIOR</th>
                                        <th>NO. INTERIOR</th>
                                        <th>COLONIA</th>
                                        <th>MUNICIPIO</th>
                                        <th>GRADO DE ESTUDIO</th>
                                        <th>OFICIO</th>
                                        <th>PROFESION</th>
                                        <th>PROFESION 2</th>
                                        <th>NOMBRE LIC/ING</th>
                                        <th>LIC/ING 2</th>      
                                        <th>MAESTRIA</th>
                                        <th>MAESTRIA 2</th>
                                        <th>DOCTORADO</th>
                                        <th>POSGRADO</th>
                                        <th>ESPECIALIDAD 1</th>
                                        <th>ESPECIALIDAD 2</th>
                                        <th>ESPECIALIDAD 3</th>
                                        <th>ESPECIALIDAD 4</th>
                                        <th>ESPECIALIDAD 5</th>
                                        <th>INE</th>
                                        <th>ESTATUS</th>
                                        <th>RÉGIMEN</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Progress Modal -->
<div class="modal fade" id="progressModal" tabindex="-1" role="dialog" aria-labelledby="progressModalLabel" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="progressModalLabel">Exportando a Excel</h5>
            </div>
            <div class="modal-body">
                <p id="progressStatus">Preparando descarga...</p>
                <div class="progress" style="height: 25px;">
                    <div id="progressBar" class="progress-bar progress-bar-striped progress-bar-animated bg-success" 
                         role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
                        0%
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<style>
    /* Hide the original select elements after Select2 initialization */
    .btn.dropdown-toggle.bs-placeholder.btn-light {
        display: none !important;
    }

    /* Limita el alto de la lista de opciones */
    .select2-selection--multiple {
        max-height: 70px !important;
        overflow-y: auto !important;
    }

    /* Custom Checkboxes for Select2 */
    .select2-results__option {
        padding-left: 35px !important;
        position: relative;
        cursor: pointer;

    }

    .select2-results__option::before {
        content: '';
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        width: 18px;
        height: 18px;
        border: 2px solid #adb5bd;
        border-radius: 4px;
        background-color: #fff;

        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }

    .select2-results__option.is-selected::before {
        background-color: #556ee6 !important;
        border-color: #556ee6 !important;
        content: '✓';
        color: white !important;
        font-size: 12px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: bold;
        line-height: 18px;
    }

    /* Special styling for "Select All" and "Unselect All" options */
    .select2-results__option[data-select2-id*="all"]::before {
        border-color: #556ee6;
        background-color: #f0f2ff;
    }

    .select2-results__option[data-select2-id*="all"].is-selected::before {
        background-color: #556ee6;
    }

    /* Ocultar el tag de "Seleccionar todo" en el cuadro de selección */
    .select2-selection__choice[title="Seleccionar todo"],
    .select2-selection__choice[title="all"] {
        display: none !important;
    }
</style>

<script src="https://cdn.sheetjs.com/xlsx-0.20.1/package/dist/xlsx.full.min.js"></script>

<script>
    $(document).ready(function() {
        // Initialize Select2
        function configureSelect2(selector, placeholderText) {
            var $select = $(selector);

            $select.select2({
                placeholder: placeholderText || "Seleccione una opción",
                width: '100%',
                closeOnSelect: false,
                templateResult: function(data, container) {
                    if (!data.id) {
                        return data.text;
                    }

                    // Check selection state directly from the element value for reliability
                    var selectedValues = $select.val() || [];
                    var isSelected = selectedValues.includes(data.id);

                    if (isSelected) {
                        $(container).addClass('is-selected');
                        $(container).addClass('select2-results__option--selected');
                        $(container).attr('aria-selected', 'true');
                    } else {
                        $(container).removeClass('is-selected');
                        $(container).removeClass('select2-results__option--selected');
                        $(container).attr('aria-selected', 'false');
                    }

                    return data.text;
                },
                templateSelection: function(data) {
                    if (data.id === 'all') {
                        return "";
                    }
                    return data.text;
                }
            });

            function updateClasses() {
                var selectedValues = $select.val() || [];
                var select2Instance = $select.data('select2');
                if (!select2Instance || !select2Instance.$dropdown) return;

                var $results = select2Instance.$dropdown.find('.select2-results__options');

                $results.find('.select2-results__option').each(function() {
                    var data = $(this).data('data');
                    if (data) {
                        if (selectedValues.includes(data.id)) {
                            $(this).addClass('is-selected');
                            $(this).addClass('select2-results__option--selected');
                            $(this).attr('aria-selected', 'true');
                        } else {
                            $(this).removeClass('is-selected');
                            $(this).removeClass('select2-results__option--selected');
                            $(this).attr('aria-selected', 'false');
                        }
                    }
                });
            }

            function checkIfAllSelected() {
                var allOptionsCount = $select.find('option').not('[value="all"]').length;
                var selectedOptionsCount = $select.find('option:selected').not('[value="all"]').length;

                if (allOptionsCount > 0 && allOptionsCount === selectedOptionsCount) {
                    var currentValues = $select.val() || [];
                    if (currentValues.indexOf('all') === -1) {
                        currentValues.push('all');
                        $select.val(currentValues).trigger('change');
                    }
                } else {
                    var currentValues = $select.val() || [];
                    var index = currentValues.indexOf('all');
                    if (index > -1) {
                        currentValues.splice(index, 1);
                        $select.val(currentValues).trigger('change');
                    }
                }
            }

            $select.on('select2:select', function(e) {
                var data = e.params.data;

                if (data.id === 'all') {
                    var allValues = [];
                    $select.find('option').each(function() {
                        allValues.push($(this).val());
                    });
                    $select.val(allValues).trigger('change');

                    var select2Instance = $select.data('select2');
                    if (select2Instance && select2Instance.$dropdown) {
                        var $options = select2Instance.$dropdown.find('.select2-results__option');
                        $options.addClass('is-selected');
                        $options.addClass('select2-results__option--selected');
                        $options.attr('aria-selected', 'true');
                    }
                } else {
                    checkIfAllSelected();
                    if (data._resultId) {
                        var $option = $('#' + data._resultId);
                        $option.addClass('is-selected');
                        $option.addClass('select2-results__option--selected');
                        $option.attr('aria-selected', 'true');
                    }
                }
            });

            $select.on('select2:unselect', function(e) {
                var data = e.params.data;

                if (data.id === 'all') {
                    $select.val(null).trigger('change');

                    var select2Instance = $select.data('select2');
                    if (select2Instance && select2Instance.$dropdown) {
                        var $options = select2Instance.$dropdown.find('.select2-results__option');
                        $options.removeClass('is-selected');
                        $options.removeClass('select2-results__option--selected');
                        $options.attr('aria-selected', 'false');
                    }
                } else {
                    var currentValues = $select.val() || [];
                    var index = currentValues.indexOf('all');
                    if (index > -1) {
                        currentValues.splice(index, 1);
                        $select.val(currentValues).trigger('change');
                    }

                    if (data._resultId) {
                        var $option = $('#' + data._resultId);
                        $option.removeClass('is-selected');
                        $option.removeClass('select2-results__option--selected');
                        $option.attr('aria-selected', 'false');
                    }
                }
            });

            $select.on('select2:open', function() {
                setTimeout(updateClasses, 0);
            });

            $select.on('change', function() {
                if ($select.data('select2') && $select.data('select2').isOpen()) {
                    setTimeout(updateClasses, 10);
                }
            });
        }

        configureSelect2('#unidadcap', 'Seleccione una unidad');

        var table = $('#tablaInstructores').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: "{{ route('reportes.instructores.data') }}",
                type: "POST",
                data: function(d) {
                    var formData = $('#filtroForm').serializeArray();
                    $.each(formData, function(i, field) {
                        if (field.value !== 'all') {
                            if (!d[field.name]) d[field.name] = [];
                            if (Array.isArray(d[field.name])) {
                                d[field.name].push(field.value);
                            } else {
                                d[field.name] = [d[field.name], field.value];
                            }
                        }
                    });
                    d._token = $('input[name="_token"]').val();
                },
                error: function(xhr, status, error) {
                    console.error("Error:", error);
                    alert("Ocurrió un error al cargar los datos.");
                }
            },
            language: {
                url: "//cdn.datatables.net/plug-ins/1.10.25/i18n/Spanish.json",
                processing: '<div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.8); z-index: 9999; display: flex; justify-content: center; align-items: center;"><div class="sk-three-bounce"><div class="sk-child sk-bounce1"></div><div class="sk-child sk-bounce2"></div><div class="sk-child sk-bounce3"></div></div></div>'
            },
            dom: 'lfrtip',
            lengthMenu: [[10, 25, 50, 100], [10, 25, 50, 100]],
            columns: [
                { data: 'uni_nombre' },
                { data: 'ins_num_exp' },
                { data: 'ins_ape_pat' },
                { data: 'ins_ape_mat' },
                { data: 'ins_nombre' },
                { data: 'ins_email' },
                { data: 'ins_curp' },
                { data: 'ins_rfc' },
                { data: 'ins_sexo' },
                { data: 'ins_fecha_nac' },
                { data: 'ins_celular' },
                { data: 'ins_fecha_ingreso' },
                { data: 'ins_fecha_alta' },
                { data: 'ins_calle' },
                { data: 'ins_num_ext' },
                { data: 'ins_num_int' },
                { data: 'ins_colonia' },
                { data: 'ins_municipio' },
                { data: 'ins_grado_estudios' },
                { data: 'ins_oficio' },
                { data: 'ins_nom_profesion' },
                { data: 'ins_nom_profesion_otra' },
                { data: 'ins_lic_ing' },
                { data: 'ins_lic_ing_otra' },
                { data: 'ins_maestria' },
                { data: 'ins_maestria_otra' },
                { data: 'ins_doctorado' },
                { data: 'ins_posgrado' },
                { data: 'especialidad_1' },
                { data: 'especialidad_2' },
                { data: 'especialidad_3' },
                { data: 'especialidad_4' },
                { data: 'especialidad_5' },
                { data: 'ins_folio_identificacion' },
                { data: 'estatus_texto' },
                { data: 'ins_regimen_nombre' }
            ]
        });

        // Excel Export
        $('#exportExcelBtn').on('click', function() {
            var formData = $('#filtroForm').serializeArray().filter(function(item) {
                return item.value !== 'all';
            });

            $('#progressModal').modal('show');
            $('#progressBar').css('width', '10%').attr('aria-valuenow', 10).text('10%');
            $('#progressStatus').text('Cargando datos del servidor...');

            $.ajax({
                url: "{{ route('reportes.instructores.export') }}",
                type: "POST",
                data: $.param(formData) + '&_token=' + $('input[name="_token"]').val(),
                beforeSend: function() {
                    $('#progressBar').css('width', '20%').attr('aria-valuenow', 20).text('20%');
                },
                success: function(response) {
                    $('#progressBar').css('width', '60%').attr('aria-valuenow', 60).text('60%');
                    $('#progressStatus').text('Procesando datos...');

                    var data = response.data;
                    
                    if (data.length === 0) {
                        alert('No hay datos para exportar con los filtros seleccionados.');
                        $('#progressModal').modal('hide');
                        return;
                    }

                    $('#progressBar').css('width', '70%').attr('aria-valuenow', 70).text('70%');
                    $('#progressStatus').text('Preparando archivo Excel (' + data.length + ' registros)...');

                    var chunkSize = 1000;
                    var excelData = [];
                    var currentChunk = 0;
                    var totalChunks = Math.ceil(data.length / chunkSize);

                    function processChunk() {
                        var start = currentChunk * chunkSize;
                        var end = Math.min(start + chunkSize, data.length);
                        
                        for (var i = start; i < end; i++) {
                            var row = data[i];
                            var excelRow = {};
                            
                            excelRow['UNIDAD'] = row.uni_nombre || '';
                            excelRow['EXPEDIENTE'] = row.ins_num_exp || '';
                            excelRow['APELLIDO PATERNO'] = row.ins_ape_pat || '';
                            excelRow['APELLIDO MATERNO'] = row.ins_ape_mat || '';
                            excelRow['NOMBRE(S)'] = row.ins_nombre || '';
                            excelRow['EMAIL'] = row.ins_email || '';
                            excelRow['CURP'] = row.ins_curp || '';
                            excelRow['RFC'] = row.ins_rfc || '';
                            excelRow['SEXO'] = row.ins_sexo || '';
                            excelRow['FECHA NAC.'] = row.ins_fecha_nac || '';
                            excelRow['CELULAR'] = row.ins_celular || '';
                            excelRow['FECHA INGRESO'] = row.ins_fecha_ingreso || '';
                            excelRow['FECHA DE ALTA'] = row.ins_fecha_alta || '';
                            excelRow['CALLE'] = row.ins_calle || '';
                            excelRow['NO.EXTERIOR'] = row.ins_num_ext || '';
                            excelRow['NO. INTERIOR'] = row.ins_num_int || '';
                            excelRow['COLONIA'] = row.ins_colonia || '';
                            excelRow['MUNICIPIO'] = row.ins_municipio || '';
                            excelRow['GRADO DE ESTUDIO'] = row.ins_grado_estudios || '';
                            excelRow['OFICIO'] = row.ins_oficio || '';
                            excelRow['PROFESION'] = row.ins_nom_profesion || '';
                            excelRow['PROFESION 2'] = row.ins_nom_profesion_otra || '';
                            excelRow['NOMBRE LIC/ING'] = row.ins_lic_ing || '';
                            excelRow['LIC/ING 2'] = row.ins_lic_ing_otra || '';
                            excelRow['MAESTRIA'] = row.ins_maestria || '';
                            excelRow['MAESTRIA 2'] = row.ins_maestria_otra || '';
                            excelRow['DOCTORADO'] = row.ins_doctorado || '';
                            excelRow['POSGRADO'] = row.ins_posgrado || '';
                            excelRow['ESPECIALIDAD 1'] = row.especialidad_1 || '';
                            excelRow['ESPECIALIDAD 2'] = row.especialidad_2 || '';
                            excelRow['ESPECIALIDAD 3'] = row.especialidad_3 || '';
                            excelRow['ESPECIALIDAD 4'] = row.especialidad_4 || '';
                            excelRow['ESPECIALIDAD 5'] = row.especialidad_5 || '';
                            excelRow['INE'] = row.ins_folio_identificacion || '';
                            excelRow['ESTATUS'] = row.estatus_texto || '';
                            excelRow['RÉGIMEN'] = row.ins_regimen_nombre || '';

                            excelData.push(excelRow);
                        }

                        currentChunk++;
                        var progress = 70 + Math.round((currentChunk / totalChunks) * 20);
                        $('#progressBar').css('width', progress + '%').attr('aria-valuenow', progress).text(progress + '%');

                        if (currentChunk < totalChunks) {
                            setTimeout(processChunk, 0);
                        } else {
                            $('#progressBar').css('width', '95%').attr('aria-valuenow', 95).text('95%');
                            $('#progressStatus').text('Generando archivo Excel...');

                            setTimeout(function() {
                                var ws = XLSX.utils.json_to_sheet(excelData);
                                var wb = XLSX.utils.book_new();
                                XLSX.utils.book_append_sheet(wb, ws, "Instructores");

                                var today = new Date();
                                var filename = 'Reporte_Instructores_' + 
                                    today.getFullYear() + 
                                    ('0' + (today.getMonth() + 1)).slice(-2) + 
                                    ('0' + today.getDate()).slice(-2) + '.xlsx';

                                $('#progressBar').css('width', '100%').attr('aria-valuenow', 100).text('100%');
                                $('#progressStatus').text('¡Descarga completada!');

                                XLSX.writeFile(wb, filename);

                                setTimeout(function() {
                                    $('#progressModal').modal('hide');
                                }, 1000);
                            }, 100);
                        }
                    }

                    processChunk();
                },
                error: function(xhr, status, error) {
                    console.error("Error:", error);
                    alert("Ocurrió un error al exportar los datos.");
                    $('#progressModal').modal('hide');
                }
            });
        });

        $('#filtroForm').on('submit', function(e) {
            e.preventDefault();
            table.ajax.reload();
        });
    });
</script>
@endpush