@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>Registro Oficio de Pago</h4>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">
                            <div class="basic-form mb-4">
                                @csrf
                                <div class="d-flex align-items-end gap-4">
                                    <div class="col-lg-4 col-md-6">
                                        <label class="form-label" id="">Mes de Pago</label>

                                        <select class="form-control form-control-sm" id="mes" required>
                                            <option value="">Seleccione</option>
                                            @foreach ($meses as $mes)
                                                <option value="{{ $mes->mes_id }}">
                                                    {{ $mes->mes_nombre }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-lg-4 col-md-6">
                                        <label class="form-label">Unidad</label>
                                        <select class="form-control form-control-sm" id="unidad" name="unidad" required>
                                            <option value="" selected>Seleccione</option>
                                            @foreach ($unidadCapacitacion as $unidad)
                                                <option value="{{ $unidad->uni_id }}"
                                                    {{ $unidad->uni_id == $unidad->uni_id ? 'selected' : '' }}>
                                                    {{ $unidad->uni_nombre_corto }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-lg-2 col-md-6">
                                        <button class="btn btn-primary btn-sm w-50" type="button" id="btn-search">
                                            Aceptar
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <div class="table-responsive">
                                <table id=""
                                    class="table table-striped responsive w-100 dataTable no-footer dtr-inline collapsed table-facturas">
                                    <thead class="text-center">
                                        <tr>
                                            <th>Aula</th>
                                            <th style="display:none">Folio Factura</th>
                                            <th>PSC</th>
                                            <th>Horas</th>
                                            <th>Total</th>
                                            <th>Subotal</th>
                                            <th>IVA</th>
                                            <th></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>
                            <div class="d-none" id="div-facturas-seleccionadas">
                                <div class="p-2 mt-2 mb-4">
                                    <div class="d-flex justify-content-center align-items-center gap-2">
                                        <i class="las la-file-invoice-dollar fs-2 text-primary"></i>
                                        <h5 class="text-primary mb-0">
                                            Facturas Agregadas:
                                            <span id="count-facturas">0</span>
                                        </h5>
                                        <h5 class="text-success mb-0 principal mx-4">
                                            Monto Total:
                                            <span class="mx-3" id="total-facturas">$ 0.00</span>
                                        </h5>
                                        <form action="{{ route('formatos.oficioPago') }}" method="POST" target="_blank"
                                            id="form-print-oficio">
                                            @csrf
                                            <input type="hidden" name="ids_facturas_oficio" class="ids_input_print">
                                            <input type="hidden" name="mes" id="print_mes">
                                            <input type="hidden" name="anio" id="print_anio">
                                            <input type="hidden" name="id_unidad" id="id_unidad">
                                            <button type="submit" class="btn btn-warning btn-sm text-dark">
                                                <i class="fa fa-file-pdf"></i> Generar Oficio
                                            </button>
                                        </form>
                                        <!--<form action="{{ route('generarWord') }}" method="POST">
                                            csrf
                                            <button type="submit" class="btn btn-primary btn-sm">
                                                Descargar <i class="fa fa-file-word text-white fs-4"></i> 
                                            </button>
                                            <input type="hidden" name="ids_facturas_oficio" class="ids_input_print">
                                            <input type="hidden" name="mes" id="print_mes">
                                            <input type="hidden" name="anio" id="print_anio">
                                            <input type="hidden" name="id_unidad" id="id_unidad">
                                        </form>-->
                                    </div>
                                </div>
                                <div class="table-responsive">
                                    <table id="table-selected"
                                        class="table table-striped responsive w-100 dataTable no-footer dtr-inline collapsed">
                                        <thead class="text-center">
                                            <tr>
                                                <th>Aula</th>
                                                <th>Folio Factura</th>
                                                <th>PSC</th>
                                                <th>Horas</th>
                                                <th class="text-center">Total</th>
                                                <th class="text-center">Subotal</th>
                                                <th class="text-center">IVA</th>
                                                <th></th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                        </tbody>
                                    </table>
                                </div>
                                <form action="{{ route('createOficio') }}" class="mt-4" method="POST"
                                    id="form-print-oficio" enctype="multipart/form-data">
                                    @csrf
                                    <div class="row">
                                        <div class="col-lg-6 col-md-6 row align-items-end gap-3">
                                            <div>
                                                <label class="form-label">Seleccionar Oficio</label>
                                                <input class="form-control form-control-sm" type="file" name="pdf_oficio"
                                                    id="fileOficio" accept=".pdf" required>
                                            </div>
                                        </div>
                                        <div class="col-lg-2 col-md-6 row align-items-end gap-3">
                                            <button class="btn btn-success btn-sm" type="submit">
                                                Guardar
                                            </button>
                                            <input type="hidden" name="ids_facturas_oficio" class="ids_facturas_oficio"
                                                id="ids_facturas_oficio" value="">
                                            <input type="hidden" name="mes" id="print_mes">
                                            <input type="hidden" name="anio" id="print_anio">
                                            <input type="hidden" name="nombre_unidad" id="nombre_unidad">
                                            <input type="hidden" name="id_oficio" id="nombre_unidad">
                                            <input type="hidden" id="folio" name="folio">
                                            <input type="hidden" name="id_unidad" id="id_unidad2">
                                        </div>
                                    </div>
                                </form>
                                <div class="accordion-item mt-2 d-none" id="acordeonOficio">
                                    <h2 class="accordion-header accordion-header-primary" id="headingOne7">
                                        <button class="accordion-button collapsed btn light btn-primary" type="button"
                                            data-bs-toggle="collapse" data-bs-target="#verificacion">
                                            <span class="accordion-header-text">Previsualizar
                                                Oficio de Pago</span>
                                        </button>
                                    </h2>
                                    <div id="verificacion" class="accordion-collapse collapse show"
                                        aria-labelledby="headingOne7" data-bs-parent="#accordion-six">
                                        <div class="accordion-body mb-0">
                                            <!-- Vista previa PDF -->
                                            <iframe id="previewOficio" class="mt-3 d-none"
                                                style="width:100%; height:800px; border:1px solid #ddd;"></iframe>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
    </div>
    <style>
        .principal {
            font-weight: 700;
            color: #15803d;
            font-variant-numeric: tabular-nums;
            letter-spacing: 0.5px;
        }

        .principal span {
            font-weight: 700;
            color: #15803d;
            background-color: #f0fdf4;
            border-radius: 10px;
            font-variant-numeric: tabular-nums;
            letter-spacing: 1px;
            box-shadow: 0 4px 12px rgba(34, 197, 94, 0.25);
            text-align: center;
        }

        .numerico {
            font-variant-numeric: tabular-nums;
            letter-spacing: 0.5px;
        }

        .btn-estilo {
            border-radius: 6px;
            padding: 4px 12px;
        }
    </style>
@endsection
@push('scripts')
    <script>
        let tableFacturas;
        let tablaSeleccionadas;
        //let selectedFacturas;
        let selectedFacturas = [];

        function sincronizarInputs() {
            let ids = selectedFacturas.map(f => f.id_factura); // 🔥 CORRECTO
            $('#ids_facturas_oficio').val(ids.join(','));
            $('.ids_facturas_oficio').val(ids.join(','));
            $('.ids_input_print').val(ids.join(','));
            $('#count-facturas').text(ids.length);
            let total = selectedFacturas.reduce((acc, f) => {
                return acc + parseFloat(f.importe_total || 0);
            }, 0);
            $('#total-facturas').text(formatoMoneda(total));
        }

        $(document).ready(function() {
            /* ==========================================
               1️⃣ TABLA FACTURAS DISPONIBLES
            ========================================== */
            tableFacturas = $('.table-facturas').DataTable({
                language: {
                    url: "https://cdn.datatables.net/plug-ins/1.10.25/i18n/Spanish.json"
                },
                columnDefs: [{
                        targets: 1,
                        className: 'text-nowrap'
                    },
                    {
                        targets: 2,
                        className: 'text-nowrap'
                    },
                    {
                        targets: 3,
                        className: 'text-center principal'
                    },
                    {
                        targets: 4,
                        className: 'text-center principal'
                    },
                    {
                        targets: 5,
                        className: 'text-center numerico'
                    },
                    {
                        targets: 6,
                        className: 'text-center numerico'
                    }
                ]
            });


            /* ==========================================
               2️⃣ TABLA FACTURAS SELECCIONADAS
            ========================================== */
            tablaSeleccionadas = $('#table-selected').DataTable({
                ordering: true,
                order: [
                    [0, 'desc']
                ],
                language: {
                    url: "https://cdn.datatables.net/plug-ins/1.10.25/i18n/Spanish.json"
                },
                processing: false,
                serverSide: false,
                ajax: {
                    url: "{{ route('oficiosRechazados') }}",
                    data: function(d) {
                        d.mes = $('#mes').val();
                        d.unidad = $('#unidad').val();
                    },
                    dataSrc: function(json) {
                        // 🔥 Aquí json.data debe ser un array
                        if (json && json.data && json.data.length > 0) {
                            selectedFacturas = json.data; // llenar array
                            sincronizarInputs(); // actualizar inputs
                            //console.log(selectedFacturas); // 
                        }
                        return json.data || [];
                    }
                },
                columns: [{
                        data: "aul_clave_registro",
                        className: "text-center",
                    },
                    {
                        data: "folio_factura",
                        className: "text-nowrap",
                    },
                    {
                        data: "psc",
                        className: "text-nowrap",
                    },
                    {
                        data: "total",
                        className: "text-center",
                    },
                    {
                        data: "importe_total",
                        className: "text-center",
                        render: function(data, type, row) {
                            return formatoMoneda(data);
                        }
                    },
                    {
                        data: "subtotal",
                        className: "text-center",
                        render: function(data, type, row) {
                            return formatoMoneda(data);
                        }
                    },
                    {
                        data: "monto_iva",
                        className: "text-center",
                        render: function(data, type, row) {
                            return formatoMoneda(data);
                        }
                    },
                    {
                        data: null,
                        className: "text-center",
                        orderable: false,
                        render: function(data) {

                            return `
                        <button type="button"
                            class="btn btn-danger btn-xxs btn-remove"
                            data-json='${JSON.stringify(data)}'>
                            Eliminar
                        </button>
                    `;
                        }
                    }
                ],
            });
            /* ==========================================
               3️⃣ BOTÓN BUSCAR
            ========================================== */
            $('#btn-search').click(function() {
                let mes = $('#mes').val();
                $('#print_mes').val(mes);
                let unidad = $('#unidad').val();
                $('#id_unidad2').val(unidad);


                let data = {
                    mes: $('#mes').val(),
                    unidad: $('#unidad').val(),
                };

                $.ajax({
                    url: "{{ route('facturasValidadas') }}",
                    data: data,
                    success: function(response) {
                        tableFacturas.clear().draw();
                        // 🔹 Si existen facturas validadas
                        if (response.data && response.data.length > 0) {
                            response.data.forEach(item => {
                                $('#nombre_unidad').val(item.uni_nombre_corto);
                                $('#id_unidad').val(item.id_unidad);

                                $('#folio').val(response.folio);

                                let btn = `
                        <button type="button"
                            class="btn btn-primary btn-xs btn-add"
                            data-json='${JSON.stringify(item)}'>
                            Agregar
                        </button>`;

                                tableFacturas.row.add([
                                    item.clave_aula,
                                    item.folio_factura,
                                    item.psc,
                                    item.total,
                                    formatoMoneda(item.importe_total),
                                    formatoMoneda(item.subtotal),
                                    formatoMoneda(item.monto_iva),
                                    btn
                                ]);
                            });
                            tableFacturas.draw();
                            $('#div-facturas-disponibles').removeClass(
                                'd-none'); // Mostrar sección si quieres

                        } else {
                            // 🔴 Ocultar si no hay resultados
                            $('#div-facturas-seleccionadas').addClass('d-none');
                        }
                        // Siempre cargar oficios rechazados
                        tablaSeleccionadas.ajax
                            .reload(); // esto cargará la tabla con oficios rechazados
                        //$('#div-facturas-seleccionadas').removeClass('d-none');

                        if (response.existeOficio > 0) {
                            $('#div-facturas-seleccionadas').removeClass('d-none');
                        }
                        console.log(response.existeOficio);


                    }
                });


            });


            /* ==========================================
               4️⃣ AGREGAR FACTURA
            ========================================== */
            /*$('.table-facturas').on('click', '.btn-add', function() {

                let item = JSON.parse($(this).attr('data-json'));

                tablaSeleccionadas.row.add(item).draw(false);

                tableFacturas.row($(this).parents('tr')).remove().draw();

                $('#div-facturas-seleccionadas').removeClass('d-none');

            });*/

            $('.table-facturas').on('click', '.btn-add', function() {

                let item = JSON.parse($(this).attr('data-json'));

                selectedFacturas.push(item);
                sincronizarInputs();
                let mes = $('#mes').val();

                tablaSeleccionadas.row.add(item).draw(false);
                tableFacturas.row($(this).parents('tr')).remove().draw();

                //$('#count-facturas').text(selectedFacturas.length);
                //$('#total-facturas').text(formatoMoneda(totalGeneral));
                //$('#id_aula').val(selectedFacturas.map(f => f.id_factura));
                $('#id_aula').val(selectedFacturas.map(f => f.fac_id).join(','));

                $('#print_mes').val(mes);
                $('#print_anio').val(2026);

                $('#div-facturas-seleccionadas').removeClass('d-none');

            });


            /* ==========================================
               5️⃣ ELIMINAR FACTURA (REGRESAR)
            ========================================== */
            $('#table-selected').on('click', '.btn-remove', function() {


                let item = JSON.parse($(this).attr('data-json'));
                selectedFacturas = selectedFacturas.filter(f => f.id_factura != item.id_factura);

                tablaSeleccionadas.row($(this).parents('tr')).remove().draw();

                let btnAgregar = `
                         <button type="button" class="btn btn-primary btn-xs btn-add" data-json='${JSON.stringify(item)}'>
                             Agregar
                         </button>`;


                tableFacturas.row.add([
                    item.aul_clave_registro,
                    item.folio_factura,
                    item.psc,
                    item.total,
                    formatoMoneda(item.importe_total),
                    formatoMoneda(item.subtotal),
                    formatoMoneda(item.monto_iva),
                    btnAgregar
                ]).draw(false);
                sincronizarInputs();



                //tablaSeleccionadas.row($(this).parents('tr')).remove().draw();

                // 🔥 eliminar de la tabla


                // 🔥 actualizar inputs (si usas array, también deberías quitarlo de ahí)
                //sincronizarInputs();

                // 🔥 VALIDAR SI YA NO HAY REGISTROS
                if (tablaSeleccionadas.rows().count() === 0) {
                    $('#div-facturas-seleccionadas').addClass('d-none');
                }


            });

        });

        function formatoMoneda(valor) {
            return '$ ' + new Intl.NumberFormat('es-MX', {
                minimumFractionDigits: 2,
                maximumFractionDigits: 2
            }).format(valor);
        }


        $('#fileOficio').on('change', function() {
            mostrarVistaPreviaPDF(this, '#previewOficio');
            $('#acordeonOficio').removeClass('d-none');
        });

        function mostrarVistaPreviaPDF(input, iframeSelector) {
            const file = input.files[0];
            if (!file) return;

            if (file.type !== 'application/pdf') {
                alert('Solo se permiten archivos PDF');
                $(input).val('');
                return;
            }

            const fileURL = URL.createObjectURL(file);

            $(iframeSelector)
                .attr('src', fileURL)
                .removeClass('d-none');
        }


        /*let tableFacturas;
        let tablaSeleccionadas;
        //let selectedFacturas;

        let selectedFacturas = [];

        /*function actualizarInputs() {
        let ids_fac = $('#ids_facturas_oficio').val();

        let ids = selectedFacturas.map(f => f.fac_id);
        $('#ids_facturas_oficio').val(ids.join(','));
        $('.ids_input_print').val(ids.join(','));
        console.log(ids_fac);

        }*/
        /*function sincronizarInputs() {
        let ids = selectedFacturas.map(f => f.id_factura);
        $('#ids_facturas_oficio').val(ids.join(','));
        $('.ids_facturas_oficio').val(ids.join(','));
        $('.ids_input_print').val(ids.join(','));
        $('#count-facturas').text(ids.length);
        let total = selectedFacturas.reduce((acc, f) => {
        return acc + parseFloat(f.importe_total || 0);
        }, 0);

        // 🔹 Formatear a 2 decimales
        $('#total-facturas').text(formatoMoneda(total));
        //formatoMoneda(response.importe_total)

        }

        $(document).ready(function() {



        /* ==========================================
        1️⃣ TABLA FACTURAS DISPONIBLES
        ========================================== */
        /* tableFacturas = $('.table-facturas').DataTable({
        language: {
        url: "https://cdn.datatables.net/plug-ins/1.10.25/i18n/Spanish.json"
        },
        columnDefs: [{
        targets: 1,
        className: 'text-nowrap'
        },
        {
        targets: 2,
        className: 'text-nowrap'
        },
        {
        targets: 3,
        className: 'text-center principal'
        },
        {
        targets: 4,
        className: 'text-center principal'
        },
        {
        targets: 5,
        className: 'text-center numerico'
        },
        {
        targets: 6,
        className: 'text-center numerico'
        }
        ]
        });


        /* ==========================================
        2️⃣ TABLA FACTURAS SELECCIONADAS
        ========================================== */
        /* tablaSeleccionadas = $('#table-selected').DataTable({
                                        ordering: true,
                                        order: [
                                        [0, 'desc']
                                        ],
                                        language: {
                                        url: "https://cdn.datatables.net/plug-ins/1.10.25/i18n/Spanish.json"
                                        },
                                        processing: false,
                                        serverSide: false,
                                        ajax: {
                                        url: "{{ route('oficiosRechazados') }}",
                                        data: function(d) {
                                        d.mes = $('#mes').val();
                                        d.unidad = $('#unidad').val();
                                        },
                                        dataSrc: function(json) {
                                        // 🔥 Aquí json.data debe ser un array
                                        if (json && json.data && json.data.length > 0) {
                                        selectedFacturas = json.data; // llenar array
                                        sincronizarInputs(); // actualizar inputs
                                        console.log(selectedFacturas); // 🔥 debug
                                        }
                                        return json.data || [];
                                        }
                                        },
                                        columns: [{
                                        data: "aul_clave_registro",
                                        className: "text-center",
                                        },
                                        {
                                        data: "folio_factura",
                                        className: "text-nowrap",
                                        },
                                        {
                                        data: "psc",
                                        className: "text-nowrap",
                                        },
                                        {
                                        data: "total",
                                        className: "text-center",
                                        },
                                        {
                                        data: "importe_total",
                                        className: "text-center",
                                        render: function(data, type, row) {
                                        return formatoMoneda(data);
                                        }
                                        },
                                        {
                                        data: "subtotal",
                                        className: "text-center",
                                        render: function(data, type, row) {
                                        return formatoMoneda(data);
                                        }
                                        },
                                        {
                                        data: "monto_iva",
                                        className: "text-center",
                                        render: function(data, type, row) {
                                        return formatoMoneda(data);
                                        }
                                        },
                                        {
                                        data: null,
                                        className: "text-center",
                                        orderable: false,
                                        render: function(data) {

                                        return `
    <button type="button" class="btn btn-danger btn-xxs btn-remove" data-json='${JSON.stringify(data)}'>
        Eliminar
    </button>
    `;
                                        }
                                        }
                                        ],



                                        });



                                        /* ==========================================
                                        3️⃣ BOTÓN BUSCAR
                                        ========================================== */
        /*$('#btn-search').click(function() {

                                        let data = {
                                        mes: $('#mes').val(),
                                        unidad: $('#unidad').val(),
                                        };

                                        $.ajax({
                                        url: "{{ route('facturasValidadas') }}",
                                        data: data,
                                        success: function(response) {

                                        tableFacturas.clear().draw();

                                        // 🔹 Si existen facturas validadas
                                        /* if (response.data && response.data.length > 0) {

                                        response.data.forEach(item => {

                                        $('#nombre_unidad').val(item.uni_nombre_corto);

                                        let btn = `
    <button type="button" class="btn btn-primary btn-xs btn-add" data-json='${JSON.stringify(item)}'>
        Agregar
    </button>`;

                                        tableFacturas.row.add([
                                        item.clave_aula,
                                        item.folio_factura,
                                        item.psc,
                                        item.total,
                                        formatoMoneda(item.importe_total),
                                        formatoMoneda(item.subtotal),
                                        formatoMoneda(item.monto_iva),
                                        btn
                                        ]);
                                        });
                                        tableFacturas.draw();
                                        $('#div-facturas-disponibles').removeClass(
                                        'd-none'); // Mostrar sección si quieres
                                        }
                                        // Siempre cargar oficios rechazados
                                        tablaSeleccionadas.ajax
                                        .reload(); // esto cargará la tabla con oficios rechazados
                                        $('#div-facturas-seleccionadas').removeClass('d-none');*/

        /* if (response.data && response.data.length > 0) {

                                        response.data.forEach(item => {

                                        $('#nombre_unidad').val(item.uni_nombre_corto);

                                        let btn = `
    <button type="button" class="btn btn-primary btn-xs btn-add" data-json='${JSON.stringify(item)}'>
        Agregar
    </button>`;

                                        tableFacturas.row.add([
                                        item.clave_aula,
                                        item.folio_factura,
                                        item.psc,
                                        item.total,
                                        formatoMoneda(item.importe_total),
                                        formatoMoneda(item.subtotal),
                                        formatoMoneda(item.monto_iva),
                                        btn
                                        ]);
                                        });

                                        tableFacturas.draw();

                                        $('#div-facturas-disponibles').removeClass('d-none');

                                        } else {
                                        // 🔴 Ocultar si no hay resultados
                                        $('#div-facturas-disponibles').addClass('d-none');
                                        }


                                        }
                                        });

                                        });


                                        /* ==========================================
                                        4️⃣ AGREGAR FACTURA
                                        ========================================== */
        /*$('.table-facturas').on('click', '.btn-add', function() {

        let item = JSON.parse($(this).attr('data-json'));

        tablaSeleccionadas.row.add(item).draw(false);

        tableFacturas.row($(this).parents('tr')).remove().draw();

        $('#div-facturas-seleccionadas').removeClass('d-none');

        });*/

        /*$('.table-facturas').on('click', '.btn-add', function() {

        let item = JSON.parse($(this).attr('data-json'));

        selectedFacturas.push(item);
        sincronizarInputs();

        tablaSeleccionadas.row.add(item).draw(false);
        tableFacturas.row($(this).parents('tr')).remove().draw();

        //$('#count-facturas').text(selectedFacturas.length);
        //$('#total-facturas').text(formatoMoneda(totalGeneral));
        //$('#id_aula').val(selectedFacturas.map(f => f.id_factura));
        $('#id_aula').val(selectedFacturas.map(f => f.fac_id).join(','));



        $('#print_mes').val(01);
        $('#print_anio').val(2026);

        });


        /* ==========================================
        5️⃣ ELIMINAR FACTURA (REGRESAR)
        ========================================== */
        /* $('#table-selected').on('click', '.btn-remove', function() {


                                        let item = JSON.parse($(this).attr('data-json'));

                                        let btnAgregar = `
    <button type="button" class="btn btn-primary btn-xs btn-add" data-json='${JSON.stringify(item)}'>
        Agregar
    </button>`;

                                        tableFacturas.row.add([
                                        item.aul_clave_registro,
                                        item.folio_factura,
                                        item.psc,
                                        item.total,
                                        formatoMoneda(item.importe_total),
                                        formatoMoneda(item.subtotal),
                                        formatoMoneda(item.monto_iva),
                                        btnAgregar
                                        ]).draw(false);
                                        sincronizarInputs();

                                        tablaSeleccionadas.row($(this).parents('tr')).remove().draw();


                                        });

                                        });

                                        function formatoMoneda(valor) {
                                        return '$ ' + new Intl.NumberFormat('es-MX', {
                                        minimumFractionDigits: 2,
                                        maximumFractionDigits: 2
                                        }).format(valor);
                                        }


                                        $('#fileOficio').on('change', function() {
                                        mostrarVistaPreviaPDF(this, '#previewOficio');
                                        $('#acordeonOficio').removeClass('d-none');
                                        });

                                        function mostrarVistaPreviaPDF(input, iframeSelector) {
                                        const file = input.files[0];
                                        if (!file) return;

                                        if (file.type !== 'application/pdf') {
                                        alert('Solo se permiten archivos PDF');
                                        $(input).val('');
                                        return;
                                        }

                                        const fileURL = URL.createObjectURL(file);

                                        $(iframeSelector)
                                        .attr('src', fileURL)
                                        .removeClass('d-none');
                                        }


                                        // AQUI EMPEIEZAN LOS COMENTARIOS

                                        /*let selectedFacturas = [];

                                        $(document).ready(function() {
                                        let tableFacturas = $('.table-facturas').DataTable({
                                        language: {
                                        url: "https://cdn.datatables.net/plug-ins/1.10.25/i18n/Spanish.json"
                                        },
                                        columnDefs: [{
                                        targets: 1,
                                        className: 'text-nowrap',
                                        },
                                        {
                                        targets: 2,
                                        className: 'text-nowrap ',
                                        },
                                        {
                                        targets: 3,
                                        className: 'text-center principal',
                                        },
                                        {
                                        targets: 4,
                                        className: 'text-center principal',
                                        },
                                        {
                                        targets: 5,
                                        className: 'text-center numerico',
                                        },
                                        {
                                        targets: 6,
                                        className: 'text-center numerico',
                                        },

                                        ]
                                        });



                                        $('#btn-search').click(function() {
                                        let data = {
                                        mes: $('#mes').val(),
                                        unidad: $('#unidad').val(),
                                        };
                                        $.ajax({
                                        url: "{{ route('facturasValidadas') }}",
                                        data: data,
                                        success: function(response) {
                                        tableFacturas.clear().draw();
                                        response.data.forEach(item => {
                                        $('#nombre_unidad').val(item.uni_nombre_corto);
                                        let btn =
                                        `<button type="button" class="btn btn-primary btn-xs btn-add btn-estilo"
        data-json='${JSON.stringify(item)}'>Agregar</button>`;
                                        tableFacturas.row.add([
                                        item.clave_aula,
                                        item.folio_factura,
                                        item.psc,
                                        item.total,
                                        formatoMoneda(item.importe_total),
                                        formatoMoneda(item.subtotal),
                                        formatoMoneda(item.monto_iva),
                                        btn
                                        ]).draw(false);
                                        });

                                        if (response.existeOficio > 0) {
                                        $('#div-facturas-seleccionadas').removeClass('d-none');
                                        }
                                        }
                                        });

                                        let tabla;
                                        let puedeAprobar = $('#puedeAprobar').val();
                                        // Tabla para mostrar cursos registrados
                                        tabla = $('#table-selected').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: false,
                                        serverSide: false,
                                        ajax: {
                                        url: "{{ route('oficiosRechazados') }}",
                                        data: data,
                                        },
                                        columns: [{
                                        data: "aul_clave_registro"
                                        },
                                        {
                                        data: "folio_factura"
                                        },
                                        {
                                        data: "psc"
                                        },
                                        {
                                        data: "total"
                                        },
                                        {
                                        data: "importe_total"
                                        },

                                        {
                                        data: "subtotal"
                                        },
                                        {
                                        data: "monto_iva"
                                        },
                                        {
                                        data: null,
                                        className: "text-center",
                                        render: function(data) {
                                        let id_factura = data.fac_id;
                                        return `<button type="button" class="btn btn-danger btn-xxs btn-remove btn-estilo"
        data-json='${JSON.stringify(data)}'>
        Eliminar
    </button>`;
                                        }
                                        },

                                        ]
                                        });

                                        $('#table-selected').on('click', '.btn-remove', function() {

                                        let item = JSON.parse($(this).attr('data-json'));

                                        let btnAgregar = `
    <button type="button" class="btn btn-primary btn-xs btn-add" data-json='${JSON.stringify(item)}'>
        Agregar
    </button>`;

                                        tableFacturas.row.add([
                                        item.aul_clave_registro,
                                        item.folio_factura,
                                        item.psc,
                                        item.total,
                                        formatoMoneda(item.importe_total),
                                        formatoMoneda(item.subtotal),
                                        formatoMoneda(item.monto_iva),
                                        btnAgregar
                                        ]).draw(false);

                                        tabla.row($(this).parents('tr')).remove().draw();

                                        });


                                        });
                                        });*/



        /*function updateSelectedTable() {
                                        //$('#div-facturas-seleccionadas').addClass('d-none');
                                        let tbody = $('#table-selected tbody');
                                        tbody.empty();
                                        let ids = [];
                                        let totalGeneral = 0;

                                        selectedFacturas.forEach((f, index) => {
                                        ids.push(f.id_factura);

                                        totalGeneral += parseFloat(f.importe_total);
                                        if (totalGeneral > 0) {

                                        $('#div-facturas-seleccionadas').removeClass('d-none');
                                        }
                                        tbody.append(`
    <tr>
        <td>${index + 1}</td>
        <td>${f.clave_aula}</td>
        <td>${f.folio_factura}</td>
        <td>${f.psc}</td>
        <td>${f.total}</td>
        <td class="text-center">${formatoMoneda(f.importe_total)}</td>
        <td class="text-center">${formatoMoneda(f.subtotal)}</td>
        <td class="text-center">${formatoMoneda(f.monto_iva)}</td>
        <td>
            <button type="button" class="btn btn-danger btn-xxs btn-remove btn-estilo" data-id="${f.id_factura}">
                Eliminar
            </button>
        </td>
    </tr>
    `);
                                        });

                                        $('#count-facturas').text(selectedFacturas.length);
                                        $('#total-facturas').text(formatoMoneda(totalGeneral));
                                        $('#ids_facturas_oficio').val(ids.join(','));
                                        $('#id_aula').val(selectedFacturas.map(f => f.id_factura));

                                        $('#ids_facturas_oficio').val(ids.join(','));
                                        $('.ids_input_print').val(ids.join(','));
                                        $('#print_mes').val(01);
                                        $('#print_anio').val(2026);


                                        }



                                        /*$(document).on('click', '.btn-add', function() {
                                        let data = $(this).data('json');
                                        if (!selectedFacturas.find(f => f.id_factura === data.id_factura)) {
                                        selectedFacturas.push(data);
                                        updateSelectedTable();
                                        $(this).prop('disabled', true).addClass('d-none');
                                        }
                                        });*/

        /* $(document).on('click', '.btn-remove', function() {
        let id = $(this).data('id');
        selectedFacturas = selectedFacturas.filter(f => f.id_factura !== id);
        updateSelectedTable();
        $(`.btn-add[data-json*='"id_factura":${id}']`).prop('disabled', false).removeClass('d-none');
        });*/
    </script>
@endpush