@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>Aprobar Facturas</h4>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">
                            @if (\App\Support\UnidadIcat::esDireccionGeneral($unidadUsuario))
                                <div class="d-flex flex-wrap gap-3">
                                    <div class="filter-dropdown-container">
                                        <button type="button" id="btnSelectedUnits"
                                            class="btn btn-dark 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; background: #2C3E50;">
                                            <span id="selectedUnitsText" class="text-white small">Unidades</span>
                                            <i class=" ri-building-line 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->identificador }}"
                                                                    data-name="{{ $un->nombre_corto }}">
                                                                <span>{{ $un->nombre_corto }}</span>
                                                            </label>
                                                        </div>
                                                    @endforeach
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="filter-dropdown-container">
                                        <button type="button" id="btnSelectedMonths"
                                            class="btn btn-dark 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; background: #2C3E50;">
                                            <span id="selectedMonthsText" class="text-white small">Meses</span>
                                            <i class=" ri-calendar-line 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">
                                        <button type="button" id="btnClearFilters"
                                            class="btn btn-danger 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"></i>
                                            <span class="small">Limpiar</span>
                                        </button>
                                    </div>
                                </div>
                            @else
                                <div class="filter-dropdown-container">
                                    <label class="text-dark mb-1 d-block"
                                        style="font-size: 0.9rem; margin-bottom: 2px !important;">Filtrar por meses:</label>
                                    <button type="button" id="btnSelectedMonths"
                                        class="btn btn-dark d-flex align-items-center justify-content-between shadow-sm filter-toggle-btn"
                                        style="min-width: 200px; border-radius: 8px; padding: 0.6rem 1rem; border: none; background: #2C3E50;">
                                        <span id="selectedMonthsText" class="text-white">Meses</span>
                                        <i class=" ri-calendar-line ms-2 text-white"></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>
                            @endif
                            <div class="table-responsive mt-3 p-md-0">
                                <table id="tablaHorasFacturas"
                                    class="table table-striped table-hover responsive w-100 aulas-table">
                                    <!--class="table table-striped responsive w-100 dataTable no-footer dtr-inline collapsed aulas-table">-->
                                    <thead>
                                        <tr class="">
                                            <th style="color: white !important;">Clave Aula</th>
                                            <th>Clave Aula</th>
                                            <th>Nombre Curso</th>
                                            <th>Instructor</th>
                                            <th class="text-center">Mes</th>
                                            <th>Cap.</th>
                                            <th>Inicia</th>
                                            <th>Termina</th>
                                            <th>Estatus</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <style>
        .btn-estilo {
            border-radius: 6px;
            padding: 4px 12px;
        }

        .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>
@endsection
@push('scripts')
    <!-- 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() {
            $('#filtroForm').on('submit', function(e) {
                e.preventDefault();
                tabla.ajax.reload();
            });

            let tabla;
            loadFilters();
            // 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: {
                    url: "{{ route('showVerificarFacturas') }}",
                    data: function(d) {
                        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;
                    }
                },
                columnDefs: [{
                    target: 0,
                    visible: false,
                    searchable: false,
                }],
                columns: [{
                        data: "id"
                    },
                    {
                        data: "clave_registro",
                        className: "fw-bold",
                    },
                    {
                        data: "curso_nombre",
                    },
                    {
                        data: "instructor_nombre",
                    },
                    {
                        data: "mes_pago",
                        className: "text-center",
                    },
                    {
                        data: "capacitandos",
                        className: "text-center",
                    },
                    {
                        data: "au_fecha_inicia",
                    },
                    {
                        data: "au_fecha_termina",
                    },
                    {
                        data: null,
                        className: "fw-bold text-nowrap",
                        render: function(data) {
                            const {
                                id,
                                estatus,
                                id,
                                fecha_corresponde
                            } = data;
                            const estados = {
                                1: {
                                    icon: "ri-pushpin-line text-dark",
                                    color: "warning text-dark",
                                    tooltip: "Por Autorizar",
                                    texto: "En revisión"
                                },
                                2: {
                                    icon: "ri-close-line",
                                    color: "danger",
                                    tooltip: "Rechazada",
                                    texto: "Rechazada"
                                },
                                default: {
                                    icon: "ri-check-line",
                                    color: "success",
                                    tooltip: "Autorizada",
                                    texto: "Autorizada"
                                }
                            };
                            const estado = estados[estatus] || estados.default;
                            return `
                                <div class="d-flex align-items-center">
                                    <form action="{{ route('indexAprobarFactura') }}" method="POST">
                                        @csrf
                                        <input type="hidden" name="id" value="${id}">
                                        <input type="hidden" name="id" value="${id}">
                                        <input type="hidden" name="fecha_corresponde" value="${fecha_corresponde}">
                                        <button 
                                            type="submit" 
                                            class="btn btn-${estado.color} btn-xs btn-estilo"
                                            data-bs-toggle="tooltip"
                                            title="${estado.tooltip}">
                                            <i class="${estado.icon} me-1"></i>
                                            ${estado.texto}
                                        </button>
                                    </form>
                                </div>`;
                        }
                    }
                ]
            });

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

            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