@extends('layout.template')
@section('title', 'ICAT | Reporte Horas y Facturas')
@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">
                        <h4>Reporte de Horas y Facturas</h4>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">
                            <div class="d-flex flex-wrap gap-1 mb-3">
                                <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">Tipo </span>
                                        <i class=" ri-check-line 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 Tipo</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 ($tiposCursos as $un)
                                                    <div class="col-md-6 col-12">
                                                        <label class="unit-checkbox-label">
                                                            <input type="checkbox" class="unit-check me-2"
                                                                value="{{ $un->id }}"
                                                                data-name="{{ $un->nombre }}">
                                                            <span>{{ $un->nombre }}</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=" ri-calendar-line 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->id }}"
                                                                data-name="{{ $mes->nombre }}">
                                                            <span>{{ $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=" ri-close-line text-white small text-dark"></i>
                                        <span class="small">Limpiar</span>
                                    </button>
                                </div>
                                @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>
                                    @endif
                                @endpuede
                            </div>
                            <div class="table-responsive">
                                <table id="tablaHorasFacturas" class="table table-striped table-hover responsive w-100">
                                    <!--class="table table-striped responsive w-100 dataTable no-footer dtr-inline collapsed">-->
                                    <thead>
                                        <tr class="">
                                            <th style="display:none">AUL_ID</th>
                                            <th width="10%">Clave Aula</th>
                                            <th width="8%">Unidad</th>
                                            <th>Curso</th>
                                            <th width="25%">Instructor</th>
                                            <th width="10%">Mes</th>
                                            <th width="8%">Acciones</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('scripts')
    <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%;
            }
        }




        /* Hide the original select elements after Select2 initialization */
        .btn.dropdown-toggle.bs-placeholder.btn-light {
            display: none !important;
        }

        /* Limita el alto de  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;
        }
    </style>

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

    <script>
        $(document).ready(function() {

            $('.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
                table.search('').page('first');
                table.ajax.reload();
            });

            let estatusActivo = null;
            loadFilters();
            var table = $('#tablaHorasFacturas').DataTable({
                serverSide: true,
                processing: true,
                ordering: true,
                paginate: true,
                language: {
                    url: "https://cdn.datatables.net/plug-ins/1.10.25/i18n/Spanish.json"
                },
                stateSave: true,
                stateDuration: -1, // Guardar el estado indefinidamente
                ajax: {
                    url: "{{ route('facturas.horas.data2') }}",
                    type: "POST",
                    data: function(d) {
                        @if (Auth::user()->Auth::user()->hasProfile('Unidad'))
                            @php
                                // convertir identificador a id para enviar al servidor
                                $identificador = Auth::user()->unidad_id;
                                $unidadRow = \Illuminate\Support\Facades\DB::table('unidades')->where('identificador', $identificador)->first();
                                $unidadIdToSend = $unidadRow ? $unidadRow->id : $identificador;
                            @endphp
                            d.unidadcap = ['{{ $unidadIdToSend }}'];
                        @else
                            d.unidadcap = ['all'];
                        @endif
                        d.tipos = ['all'];
                        d.mes = ['all'];
                        d.anio = ['all'];
                        d._token = $('input[name="_token"]').val();

                        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.tipos = selectedUnits;
                        if (selectedMonths.length > 0) d.meses = selectedMonths;


                    },
                    error: function(xhr, status, error) {
                        console.error("Error en  solicitud AJAX:", error);
                        console.error("Response:", xhr.responseText);
                        alert(
                            "Ocurrió un error al cargar los datos. Por favor, revise  consola para más detalles."
                        );
                    }
                },
                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');
                    }
                },
                dom: 'lfrtip',
                lengthMenu: [
                    [10, 25, 50, 100],
                    [10, 25, 50, 100]
                ], // ordenar por  columna oculta AUL_ID desc
                columns: [{
                        data: 'id',
                        visible: false,
                        searchable: true,
                    },
                    {
                        data: 'clave_registro',
                        className: "fw-bold",
                    },
                    {
                        data: 'nombre_corto',
                        className: "nowrap",
                    },
                    {
                        data: 'curso_nombre'
                    },
                    {
                        data: 'instructor_nombre'
                    },
                    {
                        data: 'fac_mes_nombre',
                    },
                    {
                        data: null,
                        orderable: false,
                        searchable: false,
                        className: "fw-bold text-nowrap",

                        render: function(data, type, row) {
                            let idAula = row.id;
                            let fechaTermino = row.fecha_termina;
                            let mesCorrespondiente = row.fecha_corresponde;
                            let estatusFactra = row
                                .estatus; // Obtener el estatus de  factura desde  fila
                            let ordePrioridad = row
                                .orden_prioridad; // Obtener el estatus de  factura desde  fila
                            let url = "{{ route('indexReporteHoras') }}" + "?id=" + idAula;
                            let puedeEntrarReporteHoras =
                                "{{ $puedeEntrarReporteHoras ? 'true' : 'false' }}";

                            /*console.log('termino:', row.fecha_termina, 'corresponde:', row
                                    .fecha_corresponde);
    */
                            let normalizarFecha = (fecha) => fecha ? fecha.substring(0, 07) : null;
                            let mismaFecha = normalizarFecha(fechaTermino) === normalizarFecha(
                                mesCorrespondiente);

                            let msj, clase, textColor;

                            switch (ordePrioridad) {
                                case 1:
                                    msj = "En Revisiòn";
                                    clase = "btn-warning";
                                    textColor = "text-dark";
                                    icon = "ri-rocket-line";
                                    // Lógica para estatus 1
                                    break;
                                case 2:
                                    msj = "Rechazda";
                                    clase = "btn-danger";
                                    textColor = "text-white";
                                    icon = "ri-close-line";

                                    // Lógica para estatus 2
                                    break;
                                case 4:
                                    msj = "Finalizada";
                                    clase =
                                        "btn-dark"; // puedes cambiar el color si quieres distinguirla
                                    textColor = "text-white";
                                    icon = "ri-checkbox-circle-line";
                                    break;
                                case 3:
                                    /* if(mismaFecha) {
                                         msj = "Finalizada";
                                         clase =
                                         "btn-dark"; // puedes cambiar el color si quieres distinguirla
                                         textColor = "text-white";
                                         icon = "ri-checkbox-circle-line";
                                     } else {*/
                                    msj = "Autorizada";
                                    clase = "btn-success";
                                    textColor = "text-white";
                                    icon = "ri-check-line";
                                    //}
                                    break;
                                case 7:
                                    msj = "Por Aceptar";
                                    clase = "btn-info";
                                    textColor = "text-white";
                                    icon = "ri-time-line";
                                    break;
                                case 6:
                       
                                    msj = "Por Subir";
                                    clase = "btn-warning";
                                    textColor = "text-dark";
                                    icon = "ri-hourglass-line";
                                    //}
                                    break;
                                default:
                                    // Lógica por defecto
                                    msj = "Por Reportar";
                                    clase = "btn-info";
                                    textColor = "text-white";
                                    icon = "ri-check-line";
                            }

                            const boton = puedeEntrarReporteHoras ?
                                `<a href="${url}" class="btn ${clase} shadow btn-xs ${textColor}">
                                   <i class="${icon} font-size-18 black align-middle me-2"></i> ${msj}
                                </a> ` : '';
                            return `
                            ${boton}
                        `;
                        }

                    },
                ]
            });

            $('#filtroForm').on('submit', function(e) {
                e.preventDefault();
                table.ajax.reload();
            });

            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();
                table.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();
                table.ajax.reload();
            });

            $('.month-check').on('change', function() {
                saveFilters();
                updateMonthButtonText();
                table.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();
                table.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();
                table.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_tipos');
                localStorage.removeItem('facturas_filter_months');
                updateUnitButtonText();
                updateMonthButtonText();
                table.ajax.reload();
            });

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

                localStorage.setItem('facturas_filter_tipos', JSON.stringify(tipos));
                localStorage.setItem('facturas_filter_months', JSON.stringify(months));
            }

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

                tipos.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 = 'Tipos';
                if (selected.length === 1) {
                    text = selected.first().data('name');
                } else if (selected.length > 1) {
                    text = selected.length + ' tipos';
                }
                $('#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