@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>Oficios Pago</h4>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">
                            <div class="table-responsive">
                                <table id="tablaHorasFacturas"
                                    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>Unidad</th>
                                            <th>Mes Pago</th>
                                            <th>Estatus</th>
                                            <th>Facturas</th>
                                            <th>Total</th>
                                            <th>Subtotal</th>
                                            <th>IVA</th>
                                            <th>ISR</th>
                                            <th>Acciones</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>
                            <input type="hidden" value="@puede('Oficios de pago consulta', 'aprobar_oficio_pago')1
@endpuede"
                                id="puedeAprobar">
                        </div>
                    </div>
                </div>
            </div>
            <!-- MODAL PARA VER EL CONTRATO-->
            <div class="modal fade" id="modalContrato" tabindex="-1" aria-labelledby="modalArchivoLabel"
                aria-hidden="true">
                <div class="modal-dialog modal-xl">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title text-primary" id="modalArchivoLabel">Oficio de Pago</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 class="modal fade" id="eliminar" aria-modal="true" role="dialog">
                <div class="modal-dialog modal-dialog-centered" role="document">
                    <div class="modal-content">
                        <div class="modal-header alert-danger">
                            <h5 class="modal-title">Eliminar Oficio</h5>
                            <h5 class="modal-title text-danger">
                                &nbsp;</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal">
                            </button>
                        </div>
                        <form action="{{ route('destroy') }}" method="post">
                            @csrf
                            <div class="modal-body text-center">
                                <strong></strong> <br>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-primary light" data-bs-dismiss="modal">Cerrar</button>
                                <button type="submit" class="btn btn-danger">Eliminar</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <style>
        .btn-estilo {
            border-radius: 6px;
            padding: 4px 12px;
        }
    </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 initTooltips() {
            document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(el => {
                bootstrap.Tooltip.getOrCreateInstance(el, {
                    container: 'body',
                    trigger: 'hover',
                    cursor: 'pointer'
                });
            });
        }

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

        $(document).on('click', '.abrir-modal-archivo', function() {
            const archivoUrl = $(this).data('archivo');
            $('#iframeArchivo').attr('src', archivoUrl); // poner el archivo en el iframe
            const modal = new bootstrap.Modal(document.getElementById('modalArchivo'));
            modal.show();
        });

        const baseStorage = "{{ asset('') }}";
        $(document).on('click', '.ver-pdf', function() {
            const src = $(this).data('src');
            const ruta = $(this).data('src'); // 
            if (!src) {
                return;
            }
            // Construir URL absoluta si la ruta es relativa
            const fullSrc = ruta.startsWith('http') ? ruta : baseStorage.replace(/\/+$/, '') + '/' + ruta.replace(
                /^\/+/, '');
            $('#visorContrato').attr('src', fullSrc);
        });

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

        initTooltips();

        $(document).ready(function() {
            $('#filtroForm').on('submit', function(e) {
                e.preventDefault();
                table.ajax.reload();
            });
            let tabla;
            let puedeAprobar = $('#puedeAprobar').val();
            let id_aula = "{{ $unidad }}";
            // 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,
                ordering: true,
                ajax: {
                    url: "{{ route('showOficios') }}",
                    data: function(d) {
                        // d.estatus = estatusActivo;
                    }
                },
                /*stateSaveParams: function(settings, data) {
                    data.estatusActivo = estatusActivo;
                },

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

                /*initComplete: function() {
                    if (estatusActivo) {
                        this.api().ajax.reload();
                        $('.status-card[data-estatus="' + estatusActivo + '"]')
                            .addClass('active-card');
                    }
                },*/
                /*initComplete: function() {
                    if (estatusActivo) {
                        $('.status-card[data-estatus="' + estatusActivo + '"]').addClass('active-card');
                    } else {
                        $('.status-card[data-estatus=""]').addClass('active-card');
                    }
                },*/

                columnDefs: [{
                    target: 0,
                    visible: false,
                    searchable: false,
                }],
                columns: [{
                        data: "aul_id"
                    },
                    {
                        data: "uni_nombre_corto"
                    },
                    {
                        data: "mes_pago"
                    },
                    {
                        data: null,
                        className: "text-center",
                        render: function(data) {
                            let observacion = data.ofi_observaciones_solicitud;

                            const estados = {
                                1: {
                                    text: "En revisión",
                                    color: "warning",
                                    title: "En revisión"
                                },
                                2: {
                                    text: "Rechazado",
                                    color: "danger",
                                    title: observacion
                                },
                                3: {
                                    text: "Aprobado",
                                    color: "success",
                                    title: "Aprobado"
                                }
                            };

                            const estado = estados[data.ofi_estatus_solicitud];

                            if (!estado) return "";

                            return `
                                    <span class="badge light badge-${estado.color} cursor-pointer" data-bs-toggle="tooltip" data-bs-placement="top" title="${estado.title}">
                                        <i class="fa fa-circle text-${estado.color} me-1"  ></i>
                                        ${estado.text}
                                    </span>
                                `;
                        }
                    },
                    {
                        data: "total_facturas",
                        className: "text-center"
                    },
                    {
                        data: "total_importe",
                        className: "text-center",
                        render: function(data, type, row) {
                            return formatoMoneda(data);
                        }
                    },
                    {
                        data: "subtotal",
                        className: "text-center",
                        render: function(data, type, row) {
                            // data viene como número desde PHP
                            return formatoMoneda(data);
                        }
                    },
                    {
                        data: "iva",
                        className: "text-center",
                        render: function(data, type, row) {
                            // data viene como número desde PHP
                            return formatoMoneda(data);
                        }
                    },
                    {
                        data: "isr",
                        className: "text-center",
                        render: function(data, type, row) {
                            // data viene como número desde PHP
                            return formatoMoneda(data);
                        }
                    },
                    {
                        data: null,
                        // orderable: false,
                        render: function(data) {
                            const {
                                aul_estatus: status,
                                aul_juridico_estatus: status_contrato,
                                aul_id,

                            } = data;

                            let estatus_factura = data.ofi_estatus_solicitud;
                            let id_factura = data.fac_id;
                            let fecha_corresponde = data.fac_fecha_corresponde;
                            let unidad = data.uni_nombre_corto;
                            let nombre_oficio = data.ofi_nombre_archivo_solicitud;
                            let total_importe = data.total_importe;
                            let mes = data.mes_pago;
                            let id_oficio = data.ofi_id;
                            let unidadLower = data.uni_nombre_corto.toLowerCase();
                            let nombreOficio = data.ofi_nombre_archivo_solicitud;
                            let url =
                                `storage/oficios pagos/${unidadLower}/${nombreOficio}.pdf`;
                       
                            let boton = '<button type="submit" class="btn btn-primary shadow btn-xxs me-1"><i class="fa fa-file me-1" data-bs-toggle="tooltip" title=""></i> Revisar </button>';

                            if(id_aula!=8){
                            boton = '<button type="submit" class="btn btn-primary shadow btn-xs sharp me-1"><i class="fa fa-file"  data-bs-toggle="tooltip" title=""></i></button>';
                            }
                                return `
                                    <div class="d-flex align-items-center">
                                                 <button type="submit" class="btn btn-light shadow btn-xs sharp me-1 ver-pdf border-dark"
                                                        data-bs-toggle="modal" data-bs-target="#modalContrato" data-src="${url}">
                                                    <i class="fa fa-eye"  data-bs-toggle="tooltip" title=""></i>
                                                 </button>
                                           <form action="{{ route('indexAprobarOficioPago') }}" method="post">
                                             @csrf
                                                ${boton}
                                                <input type="hidden" value="${total_importe}" name="total_importe">
                                                <input type="hidden" value="${mes}" name="mes">
                                                <input type="hidden" value="${unidad}" name="unidad">
                                                <input type="hidden" value="${nombre_oficio}" name="nombre_oficio">
                                                <input type="hidden" value="${id_oficio}" name="id_oficio">
                                         </form>
                                    </div>`;
                            }
                        //}
                    }
                ]
            });
        });
    </script>
@endpush