@extends('layout.template')
@section('title', 'SICCAP ICATEP')
@section('content')
    <div class="content-body">

        <!-- row -->
        <div class="container-fluid">
            <div class="row">
                <div class="col-xl-12">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">Pagos Capacitandos</h4>
                        </div>
                        <div class="card-body">
                            <!--<div class="basic-form d-block">-->
                            <div class="basic-form d-flex gap-4 flex-wrap justify-content-between align-items-center w-full">
                                <!--<button type="button" class="btn btn-rounded btn-danger">
                                                                                                                                                                                            </span>300</button>-->
                                <div class="d-flex flex-wrap gap-1">
                                    @puede('Aulas', 'entrar_modulo_aulas')
                                        @if (isset($status) && count($status) > 0)
                                            @foreach ($status as $key => $data)
                                                <div class="dashboard-card {{ $data['color'] }} status-card"
                                                    data-bs-toggle="tooltip" data-bs-placement="top"
                                                    title="{{ $data['label'] }}" data-estatus="{{ $key }}"
                                                    style="cursor: pointer;">
                                                    <div class="card-body-dashboard">
                                                        @php $textColor = $data['color'] == 'bg-light' ? 'text-dark' : 'text-white'; @endphp
                                                        <div class="d-flex align-items-center justify-content-center gap-1">
                                                            <i class="{{ $data['icon'] }} {{ $textColor }}"
                                                                style="font-size: 10px;"></i>
                                                            <span class="mb-0 {{ $textColor }}"
                                                                style="font-size: 14px; font-weight: 500;">{{ $data['count'] }}</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endforeach
                                            <style>
                                                .dashboard-card {
                                                    transition: all 0.1s ease-in-out;
                                                    border-radius: 5px;
                                                }

                                                .dashboard-card:hover {
                                                    transform: scale(1.05);

                                                }

                                                @media screen and (min-width: 969px) {
                                                    .card-body-dashboard {
                                                        padding: 2px 4px;
                                                    }
                                                }

                                                /* Color Status F */
                                                .bg-light-darker {
                                                    background-color: #d1d7db !important;
                                                    color: #000 !important;
                                                    border: 1px solid #999 !important;
                                                }

                                                .filter-dropdown-container {
                                                    position: relative;
                                                    display: inline-block;
                                                }

                                                .filter-dropdown-menu {
                                                    display: none;
                                                    position: absolute;
                                                    border: 1px solid #2C3E5050;
                                                    top: 100%;
                                                    left: 0;
                                                    z-index: 1000;
                                                    min-width: 400px;
                                                    background-color: #fff;
                                                    border-radius: 12px;
                                                    overflow: hidden;
                                                    margin-top: 5px;
                                                    transform-origin: top left;
                                                    animation: growAnimation 0.2s ease-out forwards;
                                                }

                                                @keyframes growAnimation {
                                                    from {
                                                        transform: scale(0.8);
                                                        opacity: 0;
                                                    }

                                                    to {
                                                        transform: scale(1);
                                                        opacity: 1;
                                                    }
                                                }

                                                .filter-dropdown-menu.show {
                                                    display: block;
                                                }

                                                .filter-dropdown-header {
                                                    padding: 0.8rem;
                                                    background-color: #2C3E50;
                                                    color: white;
                                                    display: flex;
                                                    justify-content: space-between;
                                                    align-items: center;
                                                }

                                                .filter-dropdown-body {
                                                    padding: 1.2rem;
                                                    max-height: 400px;
                                                    overflow-y: auto;
                                                }

                                                .unit-checkbox-label {
                                                    cursor: pointer;
                                                    padding: 5px 8px;
                                                    border-radius: 6px;
                                                    transition: background 0.2s;
                                                    display: flex;
                                                    align-items: center;
                                                    width: 100%;
                                                    margin-bottom: 2px;
                                                    font-size: 0.85rem;
                                                }

                                                .unit-checkbox-label:hover {
                                                    background-color: #f1f1f1;
                                                }

                                                .filter-section-title {
                                                    font-weight: 700;
                                                    color: #2C3E50;
                                                    border-bottom: 2px solid #2C3E50;
                                                    margin-bottom: 15px;
                                                    padding-bottom: 5px;
                                                    font-size: 0.95rem;
                                                }

                                                .compact-row {
                                                    margin-right: -5px;
                                                    margin-left: -5px;
                                                }

                                                .compact-row>[class*="col-"] {
                                                    padding-right: 5px;
                                                    padding-left: 5px;
                                                }

                                                .transform-0.9 {
                                                    transform: scale(0.9);
                                                }

                                                @media screen and (max-width: 576px) {
                                                    .filter-dropdown-menu {
                                                        min-width: 300px;
                                                        position: fixed;
                                                        top: 50%;
                                                        left: 50%;
                                                        transform: translate(-50%, -50%) !important;
                                                        margin-top: 0;
                                                        width: 90%;
                                                    }
                                                }
                                            </style>
                                            <div class="dashboard-card bg-dark status-card me-4" data-estatus="" title="Todos"
                                                style="cursor: pointer;">
                                                <div class="card-body-dashboard">
                                                    <div class="d-flex align-items-center justify-content-center gap-1">
                                                        <i class="fas fa-layer-group text-white" style="font-size: 10px;"></i>
                                                        <span class="mb-0 text-white" style="font-size: 14px; font-weight: 500;">
                                                            Todas ({{ $totalAulasAnioActual }})
                                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                        @endif
                                    @endpuede
                                    @if ($perfil != 22)
                                        <div class="filter-dropdown-container">
                                            <button type="button" id="btnSelectedUnits"
                                                class="btn btn-primary btn-sm d-flex align-items-center justify-content-between shadow-sm filter-toggle-btn px-3 py-1"
                                                style="min-width: 140px; border-radius: 6px;">
                                                <span id="selectedUnitsText" class="text-white small">Unidades</span>
                                                <i class="las la-building fs-6 ms-2 text-white small"></i>
                                            </button>
                                            <div class="filter-dropdown-menu shadow-lg" id="dropdownUnidades">
                                                <div class="filter-dropdown-header">
                                                    <h5 class="text-white mb-0">Seleccionar Unidades</h5>
                                                    <div class="d-flex">
                                                        <button type="button" class="btn btn-xxs btn-outline-light"
                                                            style="background: #fefefe;" id="btnSelectAllUnits"
                                                            style="font-size: 0.7rem;">Seleccionar Todas</button>
                                                    </div>
                                                </div>
                                                <div class="filter-dropdown-body">
                                                    <div class="row compact-row" id="unidadesList">
                                                        @foreach ($unidades as $un)
                                                            <div class="col-md-6 col-12">
                                                                <label class="unit-checkbox-label">
                                                                    <input type="checkbox" class="unit-check me-2"
                                                                        value="{{ $un->uni_identificador }}"
                                                                        data-name="{{ $un->uni_nombre_corto }}">
                                                                    <span>{{ $un->uni_nombre_corto }}</span>
                                                                </label>
                                                            </div>
                                                        @endforeach
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="filter-dropdown-container">
                                            <button type="button" id="btnSelectedMonths"
                                                class="btn btn-primary btn-sm d-flex align-items-center justify-content-between shadow-sm filter-toggle-btn px-3 py-1"
                                                style="min-width: 140px; border-radius: 6px;">
                                                <span id="selectedMonthsText" class="text-white small">Meses</span>
                                                <i class="fa fa-calendar fs-6 ms-2 text-white small"></i>
                                            </button>
                                            <div class="filter-dropdown-menu shadow-lg" id="dropdownMeses">
                                                <div class="filter-dropdown-header">
                                                    <h5 class="text-white mb-0">Seleccionar Meses</h5>
                                                    <div class="d-flex justify-content-end ">
                                                        <button type="button" class="btn btn-xxs btn-outline-light"
                                                            style="background: #fefefe;" id="btnSelectAllMonths"
                                                            style="font-size: 0.7rem;">Seleccionar Todos</button>
                                                    </div>
                                                </div>
                                                <div class="filter-dropdown-body">
                                                    <div class="row compact-row">
                                                        @foreach ($meses as $mes)
                                                            <div class="col-md-6 col-12">
                                                                <label class="unit-checkbox-label">
                                                                    <input type="checkbox" class="month-check me-2"
                                                                        value="{{ $mes->mes_id }}"
                                                                        data-name="{{ $mes->mes_nombre }}">
                                                                    <span>{{ $mes->mes_nombre }}</span>
                                                                </label>
                                                            </div>
                                                        @endforeach

                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="d-inline-block h-full d-flex align-items-end me-4">
                                            <button type="button" id="btnClearFilters"
                                                class="btn btn-light btn-sm shadow-sm d-flex align-items-center justify-content-center gap-1 px-3 py-1"
                                                style="border-radius: 6px;" title="Limpiar Filtros">
                                                <i class="fa fa-times text-white small text-dark"></i>
                                                <span class="small">Limpiar</span>
                                            </button>
                                        </div>
                                    @endif

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                @if (session('success'))
                    <div class="alert alert-primary alert-dismissible fade show" id="alert-container">
                        <svg class="alert-icon" viewBox="0 0 24 24" width="24" height="24" stroke="currentColor"
                            stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
                            <polyline points="9 11 12 14 22 4"></polyline>
                            <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path>
                        </svg>
                        <strong id="alert-confirmacion"> {{ session('success') }}</strong>
                    </div>
                @endif
                @if (session('error'))
                    <div class="alert alert-danger alert-dismissible fade show" id="alert-container-error">
                        <svg class="alert-icon" viewBox="0 0 24 24" width="24" height="24" stroke="currentColor"
                            stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
                            <polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2">
                            </polygon>
                            <line x1="15" y1="9" x2="9" y2="15"></line>
                            <line x1="9" y1="9" x2="15" y2="15"></line>
                        </svg>
                        <strong id="alert-confirmacion-error"> {{ session('error') }}</strong>
                    </div>
                @endif
                <input type="hidden" value="{{ $perfil }}" id="perfil">
                <div id="responsiveTable_wrapper" class="dataTables_wrapper no-footer">
                    <table id="responsiveTable"
                        class="table table-striped responsive w-100 dataTable no-footer dtr-inline collapsed aulas-table"
                        aria-describedby="responsiveTable_info">
                        <thead>
                            <tr>
                                <th width="5%">ID</th>
                                <th width="5%">Clave Aula</th>
                                <th width="30%">Curso</th>
                                <th width="15%">PSC</th>
                                <th width="3%" class="text-center">CAP.</th>
                                <th width="5%">INICIA</th>
                                <th width="5%">TERMINA</th>
                                <th width="5%">CREADA</th>
                                <th width="12%">ESTATUS | AVANCE

                                </th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
                <div class="modal modal-lg fade" id="modal_fechas_deshabilitadas" aria-modal="true" role="dialog"
                    style="display: none;">
                    <div class="modal-dialog modal-dialog-lg" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title">D&iacute;as Inh&aacute;biles en Aulas</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal">
                                </button>
                            </div>
                            <div class="modal-body">
                                <div class="row">
                                    <div class="col-lg-6 mb-3 col-md-6">
                                        <!--<div id="fechas_deshabilitadas"></div>-->
                                        <input type="text" id="fechas_deshabilitadas" class="form-control"
                                            placeholder="Seleccione fecha">
                                    </div>
                                    <div class="col-lg-6 mb-3 col-md-6 text-center">
                                        <div class="basic-list-group">
                                            <ul class="list-group">
                                                <li class="list-group-item bg-primary disabled">D&iacute;as
                                                    Inh&aacute;biles</li>
                                                <li class="list-group-item" id="dias_inhabiles"
                                                    style="max-height: 300px; overflow-y: auto; font-weight: bold;"></li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div id="error_fecha" class="text-danger"></div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-primary btn-sm" id="deshabilitar"
                                        disabled>Activar d&iacute;a inh&aacute;bil </button>
                                    <button type="button" class="btn d-none btn-danger btn-sm" id="habilitar"
                                        disabled>Desactivar d&iacute;a inh&aacute;bil</button>
                                    <button type="button" class="btn btn-danger light btn-sm"
                                        data-bs-dismiss="modal">Cerrar</button>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- MODAL PARA VER EL CONTRATO-->
                <div class="modal fade" id="modalContrato" tabindex="-1" aria-labelledby="modalArchivoLabel"
                    aria-hidden="true">
                    <div class="modal-dialog modal-xl">
                        <div class="modal-content">
                            <div class="modal-header bg-primary">
                                <h5 class="modal-title text-white" id="modalArchivoLabel">Contrato</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                    aria-label="Cerrar"></button>
                            </div>
                            <div class="modal-body">
                                <iframe id="visorContrato" src="" width="100%" height="800px"
                                    frameborder="0"></iframe>
                            </div>
                        </div>
                    </div>
                </div>
                <!--</div>-->
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        function generarContrato(status_contrato, ruta_contrato, obs_juridico) {

            const botones = {
                3: {
                    color: "success",
                    title: "Ver Contrato"
                },
                2: {
                    color: "danger",
                    title: obs_juridico
                },
                1: {
                    color: "warning",
                    title: "Contrato en Revision"
                }
            };

            const btn = botones[status_contrato];

            if (!btn) return "";

            return `
            <button type="button" class="btn btn-${btn.color} shadow btn-xs sharp me-1 ver-pdf"
                data-bs-toggle="modal"
                data-bs-target="#modalContrato"
                data-src="${ruta_contrato}">
                <i class="dripicons-blog" data-bs-toggle="tooltip" title="${btn.title}"></i>
            </button>
            `;
        }
        //
        function generarPagos(enRevision, rechazadas, aprobadas, statusAula) {

            if (statusAula !== 'D') return "";

            let color, title;

            if (rechazadas > 0) {
                color = "danger";
                title = `Facturas Rechazadas (${rechazadas})`;
            } else if (enRevision > 0) {
                color = "warning";
                title = `Facturas en Revisión (${enRevision})`;
            } else if (aprobadas > 0) {
                color = "success";
                title = "Facturas Aprobadas";
            } else {
                return "";
            }

            return `
            <button type="button" class="btn btn-${color} shadow btn-xs sharp me-1">
                <i class="la la-file-invoice-dollar fs-5" data-bs-toggle="tooltip" title="${title}"></i>
            </button>
            `;
        }
        // Función para filtrar la tabla por estatus
        function initTooltips() {
            document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(el => {
                bootstrap.Tooltip.getOrCreateInstance(el, {
                    container: 'body',
                    trigger: 'hover'
                });
            });
        }

        function filtrarPorEstatus(estatus) {

            var baseUrl = "{{ route('aulasShow') }}";
            var newUrl = estatus ? baseUrl + '?estatus=' + estatus : baseUrl;

            table.ajax.url(newUrl).load();
        }

        /*$(document).on('click', '.status-card', function(e) {
            e.stopPropagation();
            var estatus = $(this).data('estatus');
            filtrarPorEstatus(estatus);
        });*/
        /*$('.status-card').on('click', function() {
            estatusActivo = $(this).data('estatus');

            // efecto visual de activo
            $('.status-card').removeClass('active-card');
            $(this).addClass('active-card');

            tabla.ajax.reload();
        });*/
        $('.status-card').on('click', function() {
            let estatus = $(this).data('estatus');
            // null cuando es "Todos"
            estatusActivo = estatus ? estatus : null;
            $('.status-card').removeClass('active-card');
            $(this).addClass('active-card');
            // Limpia search y vuelve a página 1
            tabla.search('').page('first');
            tabla.ajax.reload();
        });


        $(document).ready(function() {
            // Limpiar localStorage cuando se regresa a la página de listado después de crear/editar
            @if (session('success'))
                localStorage.clear();
            @endif

            setTimeout(function() {
                $("#alert-container-error").fadeOut("slow");
                $("#alert-container").fadeOut("slow"); // Desaparece alerta
            }, 4000); // 4 segundos

        });

        // $('.aulas-table').on('draw.dt', function() {
        //     const tooltips = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
        //     tooltips.forEach(function(tooltipEl) {
        //         new bootstrap.Tooltip(tooltipEl);
        //     });
        // });

        var table = $('.aulas-table').DataTable();

        table.on('draw.dt', function() {
            initTooltips();
        });

        initTooltips();

        $(document).on('click', '.status-card', function() {
            const tip = bootstrap.Tooltip.getInstance(this);
            if (tip) tip.hide();
        });

        if ($.fn.DataTable.isDataTable('#responsiveTable')) {
            $('#responsiveTable').DataTable().destroy();
        }

        $(document).on('click', '.ver-pdf', function() {
            const src = $(this).data('src');
            $('#visorContrato').attr('src', src);
        });

        const puedeRechazarAula =
            {{ \App\Services\PermisoService::tienePermisoCache('Aulas', 'rechazar_aula') ? 'true' : 'false' }};
        const baseAsset = "{{ asset('') }}";

        var perfil = $('#perfil').val();
        let estatusActivo = null;
        let tabla;

        // Tabla para mostrar cursos registrados
        tabla = $('.aulas-table').DataTable({
            ordering: true, // Disable automatic ordering
            order: [
                [0, 'desc']
            ],

            language: {
                url: "https://cdn.datatables.net/plug-ins/1.10.25/i18n/Spanish.json"
            },
            stateSave: true,
            stateDuration: 10000,
            processing: true,
            serverSide: true,
            //ajax: "{{ route('aulasShow') }}", // Fetch data from route
            ajax: {
                url: "{{ route('showPagosCapacitandos') }}",
                data: function(d) {
                    d.estatus = estatusActivo;

                    let selectedUnits = [];
                    $('.unit-check:checked').each(function() {
                        selectedUnits.push($(this).val());
                    });

                    let selectedMonths = [];
                    $('.month-check:checked').each(function() {
                        selectedMonths.push($(this).val());
                    });

                    if (selectedUnits.length > 0) d.unidades = selectedUnits;
                    if (selectedMonths.length > 0) d.meses = selectedMonths;
                }
            },
            stateSaveParams: function(settings, data) {
                data.estatusActivo = estatusActivo;

            },

            stateLoadParams: function(settings, data) {
                estatusActivo = data.estatusActivo || null;
            },

            initComplete: function() {
                if (estatusActivo) {
                    $('.status-card[data-estatus="' + estatusActivo + '"]').addClass('active-card');
                } else {
                    $('.status-card[data-estatus=""]').addClass('active-card');
                }
            },
            columnDefs: [{
                target: 0,
                visible: false,
                searchable: false,
            }],
            columns: [{
                    data: "aul_id"
                },
                {
                    data: "aul_clave_registro"
                },
                {
                    data: "aul_curso_nombre"
                },
                {
                    data: "aul_instructor_nombre"
                },
                {
                    data: "aul_capacitandos",
                    className: "text-center"
                },
                {
                    data: "au_fecha_inicia"
                },
                {
                    data: "au_fecha_termina"
                },
                {
                    data: "au_fecha_creacion"
                },
                {
                    data: null,
                    render: function(data) {
                        // orderable: false,
                        const {
                            aul_estatus: status,
                            aul_juridico_estatus: status_contrato,
                            aul_id,
                            aul_registro_cursos_id,
                            aul_file_contrato: ruta_contrato,
                            aul_juridico_observaciones: obs_juridico,
                            aul_estatus_capacitandos: estatus_capacitandos,
                            aul_estatus_pagos_capacitandos: aul_estatus_pagos,
                            aul_estatus_lista_asistencia,
                            aul_estatus_riacd,
                            aul_estatus_reporte_final,
                            aul_estatus_evaluacion_curso,
                            aul_estatus_anexo_sesion,
                            tiene_facturas_en_revision,
                            tiene_facturas_rechazadas,
                            tiene_facturas_aprobadas
                        } = data;

                        let aulaEstatus = data.aul_estatus + data.aul_estatus_numero;

                        let icon = "dripicons-pencil";
                        let color = "secondary";
                        let progress = "70%";
                        let progress_class = "bg-primary";
                        let tooltip = "";

                        let contrato = generarContrato(status_contrato, ruta_contrato, obs_juridico);

                        // ===== ESTATUS =====

                        if (aulaEstatus === 'A1') {

                            icon = "dripicons-pin text-dark";
                            color = "warning";
                            progress = "10%";
                            tooltip = "Por Autorizar";

                        } else if (aulaEstatus === 'A2') {

                            icon = "dripicons-trash";
                            color = "danger";
                            progress = "10%";
                            tooltip = "Aula rechazada";

                        } else if (aulaEstatus === 'B0') {

                            icon = "dripicons-document-edit";
                            color = "primary";
                            progress = "20%";
                            progress_class = "bg-primary";
                            tooltip = "Carga de Capacitandos";

                            if (status_contrato == "3") {
                                progress = "40%";
                            } else if (status_contrato == "2") {
                                progress = "30%";
                            } else if (status_contrato == "1") {
                                progress = "30%";
                            }
                        } else if (status === 'B' && estatus_capacitandos == 1) {

                            icon = "las la-graduation-cap fs-4 text-dark";
                            color = "warning";
                            progress = "25%";
                            tooltip = "Validar Capacitandos";

                        } else if (status === 'B' && estatus_capacitandos == 2) {

                            icon = "las la-graduation-cap fs-4";
                            color = "danger";
                            progress = "20%";
                            tooltip = "Corregir Capacitandos";

                        } else if (status === 'B' && estatus_capacitandos == 3) {

                            icon = "las la-graduation-cap fs-4";
                            color = "success";
                            progress = "30%";
                            tooltip = "Capacitandos validados";

                        } else if (aulaEstatus === 'D2') {

                            icon = "dripicons-list";
                            color = "danger";
                            progress = "50%";
                            tooltip = "Rechazo por calificaciones";

                        } else if (status === 'D') {

                            icon = "dripicons-list";
                            color = "info";
                            progress = "40%";
                            tooltip = "Acreditacion de Alumnos";

                        } else if (status === 'X') {

                            icon = "las la-thumbs-down fs-4";
                            color = "danger";
                            progress = "0%";
                            progress_class = "bg-danger";
                            tooltip = "Aula Cancelada";

                        } else if (status === 'E') {

                            icon = "dripicons-lock-open";
                            color = "dark";
                            progress = "60%";
                            tooltip = "Imprimir Constancias";

                        } else if (status === 'F') {

                            icon = "dripicons-loading";
                            color = "light-darker";
                            progress = "70%";
                            tooltip = "Entrega de Certificados";

                        } else if (status === 'G') {

                            icon = "dripicons-upload";
                            progress = "80%";
                            tooltip = "Carga de Documentos del Aula";

                            const estatusDocs = [
                                aul_estatus_lista_asistencia,
                                aul_estatus_riacd,
                                aul_estatus_reporte_final,
                                aul_estatus_evaluacion_curso,
                                aul_estatus_anexo_sesion
                            ].map(Number);

                            if (estatusDocs.includes(2) && perfil == 4) {
                                color = "danger";
                            } else if (estatusDocs.includes(1)) {
                                color = "warning";
                            }

                        } else if (status === 'Z') {

                            icon = "dripicons-checkmark";
                            color = "success";
                            progress = "100%";
                            tooltip = "Aula Finalizada";
                        }

                        return `
                           <div class="d-flex align-items-center">
                            <form action="{{ route('datosAula') }}" method="post">
                                @csrf
                                <button type="submit"
                                    class="btn bg-${color} text-white shadow btn-xs sharp me-1">
                                    <input type="hidden" value="${aul_id}" name="aul_id">
                                    <input type="hidden" value="${aul_registro_cursos_id}" name="aul_registro_cursos_id">
                                    <input type="hidden" value="1" name="financieros">
                                    <i class="${icon}" data-bs-toggle="tooltip" title="${tooltip}"></i>
                                </button>
                            </form>
                            ${generarPagos(tiene_facturas_en_revision, tiene_facturas_rechazadas, tiene_facturas_aprobadas, status)}
                            ${contrato}
                            <div class="progress flex-grow-1 me-1" style="height: 20px; background: rgba(127, 99, 244, .1)">
                                <div class="progress-bar ${progress_class}"
                                    style="width:${progress};">
                                </div>
                            </div>
                            <span class="badge bg-primary">${progress}</span>
                         </div>`;
                    }

                }
            ]
        });

        function fechasDeshabilitadas() {
            // Preserve currently selected date if any exists
            let fechaSeleccionada = $("#fechas_deshabilitadas").val();

            $.ajax({
                url: "{{ route('fechasDeshabilitadas') }}", // Asegúrate de tener esta ruta definida
                method: 'GET',
                dataType: "json",
                success: function(response) {
                    let data = response.data; // dias_deshabilitados
                    let html = '';
                    let fechasAjax = [];
                    data.forEach(function(item) {
                        html += `<li class="list-group-item text-danger">${item.fecha}</li>`;
                        fechasAjax.push(item.fecha_formateada); // Guardar en array (Y-m-d)
                    });

                    let todasFechas = fechasAjax;
                    $('#dias_inhabiles').html(html);

                    // Config object
                    let flatpickrConfig = {
                        locale: 'es',
                        dateFormat: "d/m/Y",
                        inline: true,
                        position: "center",
                        onChange: function(selectedDates, dateStr, instance) {
                            if (selectedDates.length > 0) {
                                const fecha = instance.formatDate(selectedDates[0], "Y-m-d");

                                if (todasFechas.includes(fecha)) {
                                    $('#habilitar').removeClass('d-none').prop('disabled', false);
                                    $('#deshabilitar').addClass('d-none');
                                } else {
                                    $('#deshabilitar').removeClass('d-none').prop('disabled', false);
                                    $('#habilitar').addClass('d-none');
                                }
                            }
                        },
                        onDayCreate: function(_, __, ___, dayElem) {
                            if (!dayElem.dateObj) return;
                            const d = dayElem.dateObj;
                            const fecha = d.getFullYear() + "-" +
                                String(d.getMonth() + 1).padStart(2, '0') + "-" +
                                String(d.getDate()).padStart(2, '0');

                            if (todasFechas.includes(fecha)) {
                                dayElem.style.background = "#ff1616";
                                dayElem.title = "Día festivo";
                                dayElem.style.color = "white";
                                dayElem.style.fontWeight = "bold";
                            }
                        }
                    };

                    if (fechaSeleccionada) {
                        flatpickrConfig.defaultDate = fechaSeleccionada;
                    }
                    const fp = flatpickr("#fechas_deshabilitadas", flatpickrConfig);

                    // Fuerza actualizacion de botones
                    if (fechaSeleccionada) {
                        let partes = fechaSeleccionada.split('/');
                        let fechaYMD = `${partes[2]}-${partes[1]}-${partes[0]}`;

                        if (todasFechas.includes(fechaYMD)) {
                            $('#habilitar').removeClass('d-none').prop('disabled', false);
                            $('#deshabilitar').addClass('d-none');
                        } else {
                            $('#deshabilitar').removeClass('d-none').prop('disabled', false);
                            $('#habilitar').addClass('d-none');
                        }
                    }
                },
                error: function(xhr) {
                    console.log("Error en la solicitud AJAX:", xhr);
                }
            });
        }

        $(document).ready(function() {

            $('#modal_fechas_deshabilitadas').on('show.bs.modal', function() {
                fechasDeshabilitadas();
            });

            $("#deshabilitar").on("click", function(e) {
                e.preventDefault(); // Previene la recarga de la página
                let form = $(this);
                let actionUrl = form.attr("action");
                let formData = form.serialize();
                let fecha = $("#fechas_deshabilitadas").val(); // 29/08/2025
                if (fecha == null || fecha == "" || fecha == undefined) {
                    $('#error_fecha').text("Seleccione una fecha del calendario");
                    return;
                }

                let partes = fecha.split('/');
                let fechaStr = `${partes[2]}-${partes[1]}-${partes[0]}`; // 2025-08-29
                $('#error_fecha').text("");

                $.ajax({
                    url: actionUrl,
                    url: "{{ route('deshabilitarFecha') }}",
                    method: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                        fecha: fechaStr
                    },
                    success: function(response) {
                        fechasDeshabilitadas();
                    },
                    error: function(xhr) {
                        console.log("Error en la solicitud AJAX:", xhr);
                    }
                });
            });

            $("#habilitar").on("click", function(e) {
                e.preventDefault(); // Previene la recarga de la página
                let form = $(this);
                let actionUrl = form.attr("action");
                let formData = form.serialize();
                let fecha = $("#fechas_deshabilitadas").val(); // 29/08/2025
                if (fecha == null || fecha == "" || fecha == undefined) {
                    $('#error_fecha').text("Seleccione una fecha del calendario");
                    return;
                }

                let partes = fecha.split('/');
                let fechaStr = `${partes[2]}-${partes[1]}-${partes[0]}`; // 2025-08-29
                $('#error_fecha').text("");
                $(this).prop('disabled', true)
                    .html('<i class="fa fa-spinner fa-spin"></i> Desactivar d&iacute;a inh&aacute;bil');

                $.ajax({
                    url: actionUrl,
                    url: "{{ route('habilitarFecha') }}", // Asegúrate de tener esta ruta definida
                    method: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                        fecha: fechaStr
                    },
                    success: function(response) {
                        fechasDeshabilitadas();
                        setTimeout(function() {
                            $('#habilitar').prop('disabled', false).html(
                                'Desactivar d&iacute;a inh&aacute;bil');
                        }, 300); // 4 segundos

                    },
                    error: function(xhr) {
                        console.log("Error en la solicitud AJAX:", xhr);
                    }
                });
            });

        });


        function activarBotonVisual() {
            $('.btn').removeClass('active-filter');
            if (filtroRequisicionActivo) {
                $('#btnFiltroRequisicion').addClass('active-filter');
            } else if (filtroAutorizadasActivo) {
                $('#btnFiltroAutorizadas').addClass('active-filter');
            } else if (filtroPorComprometerActivo) {
                $('#btnFiltroPorComprometer').addClass('active-filter');
            } else {
                $('#btnFiltroTodos').addClass('active-filter');
            }
        }

        $('#btnFiltroTodos').click(function() {
            filtroRequisicionActivo = null;
            filtroAutorizadasActivo = null;
            filtroPorComprometerActivo = null;
            activarBotonVisual();
            tabla.ajax.reload();
        });

        $('#btnFiltroRequisicion').click(function() {
            filtroRequisicionActivo = 1;
            filtroAutorizadasActivo = null;
            filtroPorComprometerActivo = null;
            activarBotonVisual();
            tabla.ajax.reload();
        });

        $('#btnFiltroAutorizadas').click(function() {
            filtroRequisicionActivo = null;
            filtroAutorizadasActivo = 1;
            filtroPorComprometerActivo = null;
            activarBotonVisual();
            tabla.ajax.reload();
        });

        $('#btnFiltroPorComprometer').click(function() {
            filtroRequisicionActivo = null;
            filtroAutorizadasActivo = null;
            filtroPorComprometerActivo = 1;
            activarBotonVisual();
            tabla.ajax.reload();
        });

        //----------------------------------------//
        // Dropdown Toggle Logic
        $('.filter-toggle-btn').on('click', function(e) {
            e.stopPropagation();
            let $target = $(this).siblings('.filter-dropdown-menu');
            $('.filter-dropdown-menu').not($target).removeClass('show');
            $('.filter-toggle-btn').not(this).removeClass('transform-0.9');
            $(this).toggleClass('transform-0.9');
            $target.toggleClass('show');
        });

        // Close dropdowns when clicking outside
        $(document).on('click', function(e) {
            if (!$(e.target).closest('.filter-dropdown-container').length) {
                $('.filter-dropdown-menu').removeClass('show');
                $('.filter-toggle-btn').removeClass('transform-0.9');
            }
        });

        // Prevent dropdown from closing when clicking inside
        $('.filter-dropdown-menu').on('click', function(e) {
            e.stopPropagation();
        });

        // Unit/Month Selection Logic
        $('.unit-check').on('change', function() {
            saveFilters();
            updateUnitButtonText();
            tabla.ajax.reload();
        });

        $('.month-check').on('change', function() {
            saveFilters();
            updateMonthButtonText();
            tabla.ajax.reload();
        });

        $('#btnSelectAllUnits').on('click', function() {
            let allChecked = $('.unit-check:not(:checked)').length === 0 && $('.unit-check').length > 0;
            $('.unit-check').prop('checked', !allChecked);
            $(this).text(allChecked ? 'Seleccionar Todas' : 'Deseleccionar Todas');
            saveFilters();
            updateUnitButtonText();
            tabla.ajax.reload();
        });

        $('#btnSelectAllMonths').on('click', function() {
            let allChecked = $('.month-check:not(:checked)').length === 0 && $('.month-check').length >
                0;
            $('.month-check').prop('checked', !allChecked);
            $(this).text(allChecked ? 'Seleccionar Todos' : 'Deseleccionar Todos');
            saveFilters();
            updateMonthButtonText();
            tabla.ajax.reload();
        });

        $('#btnClearFilters').on('click', function() {
            $('.unit-check, .month-check').prop('checked', false);
            $('#btnSelectAllUnits').text('Seleccionar Todas');
            $('#btnSelectAllMonths').text('Seleccionar Todos');
            localStorage.removeItem('facturas_filter_units');
            localStorage.removeItem('facturas_filter_months');
            updateUnitButtonText();
            updateMonthButtonText();

            estatusActivo = null;

            $('.status-card').removeClass('active-card');
            $('.status-card[data-estatus=""]').addClass('active-card');

            $('.unit-check').prop('checked', false);
            $('.month-check').prop('checked', false);

            tabla.search('').page('first');

            tabla.ajax.reload(null, false);
        });

        function saveFilters() {
            let units = [];
            $('.unit-check:checked').each(function() {
                units.push($(this).val());
            });
            let months = [];
            $('.month-check:checked').each(function() {
                months.push($(this).val());
            });

            localStorage.setItem('facturas_filter_units', JSON.stringify(units));
            localStorage.setItem('facturas_filter_months', JSON.stringify(months));
        }

        function loadFilters() {
            let units = JSON.parse(localStorage.getItem('facturas_filter_units') || '[]');
            let months = JSON.parse(localStorage.getItem('facturas_filter_months') || '[]');

            units.forEach(u => {
                $(`.unit-check[value="${u}"]`).prop('checked', true);
            });
            months.forEach(m => {
                $(`.month-check[value="${m}"]`).prop('checked', true);
            });

            updateUnitButtonText();
            updateMonthButtonText();

            let allUnitsChecked = $('.unit-check:not(:checked)').length === 0 && $('.unit-check').length > 0;
            $('#btnSelectAllUnits').text(allUnitsChecked ? 'Deseleccionar Todas' : 'Seleccionar Todas');

            let allMonthsChecked = $('.month-check:not(:checked)').length === 0 && $('.month-check').length > 0;
            $('#btnSelectAllMonths').text(allMonthsChecked ? 'Deseleccionar Todos' : 'Seleccionar Todos');
        }

        function updateUnitButtonText() {
            let selected = $('.unit-check:checked');
            let text = 'Unidades';
            if (selected.length === 1) {
                text = selected.first().data('name');
            } else if (selected.length > 1) {
                text = selected.length + ' unidades';
            }
            $('#selectedUnitsText').text(text);

            if (selected.length > 0) {
                $('#btnSelectedUnits').addClass('btn-dark').removeClass('btn-outline-dark');
            } else {
                $('#btnSelectedUnits').addClass('btn-outline-dark').removeClass('btn-dark');
            }
        }

        function updateMonthButtonText() {
            let selected = $('.month-check:checked');
            let text = 'Meses';
            if (selected.length === 1) {
                text = selected.first().data('name');
            } else if (selected.length > 1) {
                text = selected.length + ' meses';
            }
            $('#selectedMonthsText').text(text);

            if (selected.length > 0) {
                $('#btnSelectedMonths').addClass('btn-dark').removeClass('btn-outline-dark');
            } else {
                $('#btnSelectedMonths').addClass('btn-outline-dark').removeClass('btn-dark');
            }
        }

        // Sync select all button text on load
        let allUnitsChecked = $('.unit-check:not(:checked)').length === 0 && $('.unit-check').length > 0;
        $('#btnSelectAllUnits').text(allUnitsChecked ? 'Deseleccionar Todas' : 'Seleccionar Todas');

        let allMonthsChecked = $('.month-check:not(:checked)').length === 0 && $('.month-check').length > 0;
        $('#btnSelectAllMonths').text(allMonthsChecked ? 'Deseleccionar Todos' : 'Seleccionar Todos');
    </script>
@endpush