@extends('layout.template')
@section('title', 'SICCAP ICATEP | 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>Pagos Facturas</h4>
                    </div>
                </div>
                <div class="col-sm-6 p-md-0 justify-content-sm-end mt-2 mt-sm-0 d-flex">
                    <ol class="breadcrumb">
                        <a href="{{ url('dashboard') }}" class="btn btn-rounded btn-dark back-fixed" aria-label="Regresar">
                            <span class="btn-icon-start text-dark"><i class="fa fa-arrow-left"></i></span>
                            Regresar
                        </a>
                    </ol>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">
                            <div class="d-flex flex-wrap gap-3 mb-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="fa fa-building 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-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="fa fa-calendar 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">
                                    <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="fa fa-times text-white small"></i>
                                        <span class="small">Limpiar</span>
                                    </button>
                                </div>
                            </div>
                            <div class="table-responsive">
                                <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;" width="5%">Clave Aula</th>
                                            <th>Clave Aula</th>
                                            <th># Pago</th>
                                            <th>Nombre Curso</th>
                                            <th>Mes Pago</th>
                                            <th>Instructor</th>
                                            <th>Cap.</th>
                                            <th>Inicia</th>
                                            <th>Termina</th>
                                            <th width="12%">Estatus</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- MODAL PARA VER EL CONTRATO-->
            <div class="modal fade" id="modalComprobante" tabindex="-1" aria-labelledby="labelContrato" aria-hidden="true">
                <div class="modal-dialog modal-xl">
                    <div class="modal-content">
                        <div class="modal-header" style="background: #861E34;">
                            <h5 class="modal-title text-white" id="tituloModal"></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>
    <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%;
            }
        }

        .text-hover-underline .dropdown-item:hover {
            text-decoration: underline;
            cursor: pointer;
        }
    </style>

    </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>
        function abrirXml(url) {
            const w = 1000;
            const h = 800;
            const dualScreenLeft = window.screenLeft !== undefined ? window.screenLeft : screen.left;
            const dualScreenTop = window.screenTop !== undefined ? window.screenTop : screen.top;
            const width = window.innerWidth || document.documentElement.clientWidth || screen.width;
            const height = window.innerHeight || document.documentElement.clientHeight || screen.height;
            const left = dualScreenLeft + (width - w) / 2;
            const top = dualScreenTop + (height - h) / 2;
            window.open(
                url,
                'visorXML',
                `scrollbars=yes,resizable=yes,width=${w},height=${h},top=${top},left=${left}`
            );
        }

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

        let tabla;
        loadFilters();

        $(document).ready(function() {

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

            const unidades = [{
                    id: 1,
                    nombre: "acatlan"
                },
                {
                    id: 2,
                    nombre: "ahuazotepec"
                },
                {
                    id: 3,
                    nombre: "amozoc"
                },
                {
                    id: 4,
                    nombre: "atlixco"
                },
                {
                    id: 5,
                    nombre: "chiautla"
                },
                {
                    id: 6,
                    nombre: "accion movil"
                },
                {
                    id: 7,
                    nombre: "serdan"
                },
                {
                    id: 9,
                    nombre: "huauchinango"
                },
                {
                    id: 10,
                    nombre: "izucar"
                },
                {
                    id: 11,
                    nombre: "oriental"
                },
                {
                    id: 12,
                    nombre: "puebla"
                },
                {
                    id: 13,
                    nombre: "texmelucan"
                },
                {
                    id: 14,
                    nombre: "cholula"
                },
                {
                    id: 15,
                    nombre: "tecamachalco"
                },
                {
                    id: 16,
                    nombre: "tehuacan"
                },
                {
                    id: 17,
                    nombre: "tepexi"
                },
                {
                    id: 18,
                    nombre: "teziutlan"
                },
                {
                    id: 19,
                    nombre: "zacatlan"
                }
            ];

            // 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('showPagosFacturas') }}",
                    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: "aul_id"
                    },
                    {
                        data: "aul_clave_registro",
                        className: "fw-bold",
                    },
                    {
                        data: "parcialidad",
                        className: "text-center"
                    },
                    {
                        data: "aul_curso_nombre"
                    },
                    {
                        data: "mes_pago",
                        className: "text-center"
                    },
                    {
                        data: "aul_instructor_nombre",
                        className: "text-nowrap"
                    },
                    {
                        data: "aul_capacitandos",
                        className: "text-center"
                    },
                    {
                        data: "au_fecha_inicia"
                    },
                    {
                        data: "au_fecha_termina"
                    },
                    {
                        data: null,
                        render: function(data) {

                            const {
                                aul_id,
                                fac_estatus,
                                fac_id,
                                fac_fecha_corresponde,
                                fac_comprobante_pago,
                                fac_folio,
                                aul_unidad,
                                aul_curso_tipo,
                                aul_file_contrato
                            } = data;

                            const esPagada = fac_comprobante_pago == 1;
                            const estado = esPagada ? {
                                icon: "dripicons-checkmark",
                                color: "success",
                                tooltip: "Pagada",
                                texto: ""
                            } : {
                                icon: "dripicons-pin text-dark",
                                color: "warning text-dark",
                                tooltip: "Pendiente",
                                texto: "Pendiente"
                            };

                            const cursos = {
                                1: "para el trabajo",
                                2: "en el trabajo"
                            };
                            const curso = cursos[aul_curso_tipo] || "";
                            // Obtener unidad 
                            const unidad = unidades.find(u => u.id == aul_unidad)?.nombre || "";
                            //  Ruta (solo si hay comprobante)
                            const ruta = esPagada ?
                                `/storage/facturas/psc/${unidad}/${curso}/${fac_folio}_C.pdf` : "";

                            const ruta_factura =
                                `/storage/facturas/psc/${unidad}/${curso}/${fac_folio}.pdf`;
                            const ruta_verificacion =
                                `/storage/facturas/psc/${unidad}/${curso}/${fac_folio}_V.pdf`;
                            const ruta_xml =
                                `/storage/facturas/psc/${unidad}/${curso}/${fac_folio}.xml`;
                            const ruta_contrato = `${aul_file_contrato}`;

                            const ver_comprobante = esPagada ? `
                                   <div class="btn-group mx-1" role="group">
                                        <button type="button"
                                            class="btn btn-primary btn-sm dropdown-toggle btn-estilo"
                                            data-bs-toggle="dropdown"
                                            aria-expanded="false"> <i 
                                            class="fa fa-eye"></i>
                                        </button>
                                        <div class="dropdown-menu text-hover-underline">
                                            <a class="dropdown-item ver-comprobante"
                                                data-bs-toggle="modal"
                                                data-bs-target="#modalComprobante"
                                                data-src="${ruta}" data-nombre="Comprobante de Pago">
                                                <i class="las la-hand-holding-usd fs-3"></i> 
                                                Comprobante Pago
                                            </a> 
                                            <a class="dropdown-item ver-comprobante"
                                                data-bs-toggle="modal"
                                                data-bs-target="#modalComprobante"
                                                data-src="${ruta_factura}" data-nombre="Factura">
                                                <i class="las la-file-invoice-dollar fs-3"></i> Factura
                                            </a>
                                            <a class="dropdown-item ver-comprobante"
                                                data-bs-toggle="modal"
                                                data-bs-target="#modalComprobante"
                                                data-src="${ruta_verificacion}" data-nombre="Verificación SAT">
                                                <i class="las la-file fs-3"></i> Verificacion SAT
                                            </a>
                                            <a class="dropdown-item"
                                                target="_blank"
                                                onclick="abrirXml('${ruta_xml}')">
                                                <i class="las la-file-code fs-3"></i> XML
                                            </a>
                                            <a class="dropdown-item ver-comprobante"
                                                data-bs-toggle="modal"
                                                data-bs-target="#modalComprobante" data-nombre="Contrato"
                                                data-src="/${ruta_contrato}">
                                                <i class="las la-file-alt fs-3"></i> Contrato 
                                            </a>
                                        </div>
                                   </div>
                                    ` : "";
                            return `
                                    <div class="d-flex align-items-center">
                                        <form action="{{ route('indexAddPago') }}" method="post">
                                            @csrf
                                            <button type="submit" class="btn btn-${estado.color} btn-xs btn-estilo">
                                                <i class="las la-dollar-sign fs-4"
                                                   data-bs-toggle="tooltip"
                                                   title="${estado.tooltip}"></i>
                                                ${estado.texto}
                                            </button>
                                            <input type="hidden" value="${aul_id}" name="aul_id">
                                            <input type="hidden" value="${fac_id}" name="fac_id">
                                        </form>
                                        ${ver_comprobante}
                                    </div>`;
                        }
                    }
                ]
            });
        });

        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();
            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