@extends('layouts.app', ['activePage' => 'consulta-cfdis', 'menuParent' => '', 'titlePage' => ''])
@section('content')
@include('includes.tailwind')

<div class="content">
    <div class="container-fluid mt-4">
        <div class="row gy-3 mb-3 align-items-stretch">
            <div class="col-lg-8 h-100">
                <div class="bg-white border border-slate-200 rounded-lg shadow-sm px-4 pt-4 pb-2 mb-2 h-100">
                    <div class="flex items-start justify-between mb-1">
                        <div>
                            <h6 class="text-2xl font-semibold text-slate-900 ">Consulta de CFDI´s</h6>
                            <p class="text-sm text-slate-500">Controla los comprobantes emitidos y recibidos con filtros claros y una vista ligera inspirada en la descarga SAT.</p>
                        </div>
                    </div>
                    <form id="cfdiFilters" class="space-y-4">
                        <section id="tourCfdiFiltros" class="bg-gray-25 rounded-lg border border-gray-200 p-3">
                            <div class="flex items-center gap-3 mb-4">
                                <span class="h-10 w-10 rounded-lg border border-slate-900 flex items-center justify-center text-lg text-slate-900">&#128269;</span>
                                <div>
                                    <h6 class="text-base font-semibold text-slate-900">PARAMETROS DE BUSQUEDA</h6>
                                    <p class="text-sm text-slate-700 mb-0">Define los filtros clave antes de solicitar la información.</p>
                                </div>
                            </div>
                            <div class="grid sm:grid-cols-2 gap-3">
                                <div>
                                    <label class="block text-sm font-medium text-slate-700">Tipo de factura:</label>
                                    <select id="tipoFacturaFilter" class="select2 w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 listado-cuentas-mayor" data-size="7" data-width="100%" data-style="select-with-transition" data-live-search="true">
                                        <option value="" selected>-Todas-</option>
                                        <option value="I">Ingreso</option>
                                        <option value="E">Egreso</option>
                                        <option value="P">Pago</option>
                                    </select>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-slate-700">Método de pago:</label>
                                    <select id="metodoPagoFilter" class="select2 w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 listado-cuentas-mayor" data-size="7" data-width="100%" data-style="select-with-transition" data-live-search="true">
                                        <option value="" selected>-Todas-</option>
                                        <option value="PUE">PUE</option>
                                        <option value="PPD">PPD</option>
                                    </select>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-slate-700">Estatus:</label>
                                    <select id="estatusFilter" class="select2 w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 listado-cuentas-mayor" data-size="7" data-width="100%" data-style="select-with-transition" data-live-search="true">
                                        <option value="" selected>-Todas-</option>
                                        <option value="1">Pendiente</option>
                                        <option value="2">Pagada</option>
                                        <option value="3">Cancelada</option>
                                        <option value="4">Con Póliza</option>
                                        <option value="5">Sin Póliza</option>
                                    </select>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-slate-700">Año: <span class="text-red-500">*</span></label>
                                    <select id="anioFilter" class="select2 w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" data-size="7" data-width="100%" data-style="select-with-transition">
                                        <option value="" selected>-Seleccione-</option>
                                        @for($i = date('Y'); $i >= 2020; $i--)
                                        <option value="{{ $i }}">{{ $i }}</option>
                                        @endfor
                                    </select>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-slate-700">Mes: <span class="text-red-500">*</span></label>
                                    <select id="mesFilter" class="select2 w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" data-size="7" data-width="100%" data-style="select-with-transition">
                                        <option value="" selected>-Seleccione-</option>
                                        <option value="1">Enero</option>
                                        <option value="2">Febrero</option>
                                        <option value="3">Marzo</option>
                                        <option value="4">Abril</option>
                                        <option value="5">Mayo</option>
                                        <option value="6">Junio</option>
                                        <option value="7">Julio</option>
                                        <option value="8">Agosto</option>
                                        <option value="9">Septiembre</option>
                                        <option value="10">Octubre</option>
                                        <option value="11">Noviembre</option>
                                        <option value="12">Diciembre</option>
                                    </select>
                                </div>
                            </div>
                            <div class="flex flex-wrap items-center justify-between gap-3 pt-3">
                                <p class="text-xs text-slate-500 mb-0">Año y mes son obligatorios. Usa rangos acotados para respuestas rápidas.</p>
                                <button type="button" class="inline-flex items-center gap-2 bg-[#0A415F] hover:bg-[#083549] text-white px-4 py-2 text-sm rounded-md font-medium transition-colors duration-200" onclick="getVentas()">
                                    <i class="material-icons text-base leading-none">refresh</i>
                                    Actualizar listado
                                </button>
                            </div>
                        </section>
                    </form>
                </div>
            </div>
            <div class="col-lg-4 h-100">
                <div id="tourCfdiAyuda" class="bg-white border border-slate-200 rounded-lg shadow-sm p-3 mb-4">
                    <div class="flex items-center gap-2 mb-3">
                        <h6 class="text-sm font-semibold text-slate-900 mb-0">Guía rápida</h6>
                    </div>
                    <div class="space-y-3">
                        <div class="flex gap-2">
                            <div class="cfdi-help-step">1</div>
                            <div>
                                <p class="font-semibold text-sm mb-1">Configura el tipo</p>
                                <p class="text-xs text-slate-600 mb-0">Elige el tipo de comprobante y método de pago para acotar la búsqueda.</p>
                            </div>
                        </div>
                        <div class="flex gap-2">
                            <div class="cfdi-help-step">2</div>
                            <div>
                                <p class="font-semibold text-sm mb-1">Filtra por estatus</p>
                                <p class="text-xs text-slate-600 mb-0">Puedes mostrar sólo pendientes, pagadas o canceladas según la necesidad.</p>
                            </div>
                        </div>
                        <div class="flex gap-2">
                            <div class="cfdi-help-step">3</div>
                            <div>
                                <p class="font-semibold text-sm mb-1">Periodo recomendado</p>
                                <p class="text-xs text-slate-600 mb-0">Trabaja por mes para mantener la carga rápida. Los selectores se inician en el periodo vigente.</p>
                            </div>
                        </div>
                        <div class="flex gap-2">
                            <div class="cfdi-help-step">4</div>
                            <div>
                                <p class="font-semibold text-sm mb-1">Explora detalles</p>
                                <p class="text-xs text-slate-600 mb-0">Haz clic sobre la fila para abrir la factura y revisar XML/PDF vinculados.</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="tourCfdiHistorial" class="bg-white border border-slate-200 rounded-lg shadow-sm p-3 mb-3">
                    <div class="flex items-center justify-between mb-2">
                        <div>
                            <h6 class="text-sm font-semibold text-slate-900 mb-0">Historial reciente</h6>
                        </div>
                        <span id="cfdiHistoryBadge" class="cfdi-history-badge neutral">Sin registros</span>
                    </div>
                    <dl class="cfdi-last-download">
                        <div>
                            <dt>Fecha de descarga</dt>
                            <dd id="cfdiHistoryDate">-</dd>
                        </div>
                        <div>
                            <dt>Resultados</dt>
                            <dd id="cfdiHistoryTotals">-</dd>
                        </div>
                    </dl>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <div id="tourCfdiTabla" class="bg-white border border-slate-200 rounded-lg shadow-sm p-4">
                    <div class="flex flex-wrap items-center justify-between gap-3 border-b border-slate-200">
                        <div>
                            <h6 class="text-base font-semibold text-slate-900 mb-1">Listado de CFDI</h6>
                            <p class="text-xs text-slate-500 mb-0">Haz clic en cualquier fila para abrir los detalles en una nueva pestaña.</p>
                        </div>
                        <div class="text-left">
                            <p id="cfdiStatus" class="text-xs font-semibold text-slate-600 bg-slate-50 border border-slate-200 rounded-md px-3 py-1">Esperando filtros</p>
                            <p class="text-[11px] text-slate-500 mt-1 mb-0">Última actualización: <span id="cfdiLastRefresh">-</span></p>
                        </div>
                    </div>
                    <div class="table-scroll">
                        <table class="min-w-full" id="list-ventas" width="100%">
                            <thead class="sticky-top bg-gray-50 px-6 py-3 text-[10px] font-semibold text-left text-gray-500 uppercase tracking-wider">
                                <tr>
                                    <th></th>
                                    <th class="px-2 py-2" width="10%">Emisor</th>
                                    <th class="px-2 py-2" width="10%">Receptor</th>
                                    <th class="px-2 py-2">Fecha de creación</th>
                                    <th class="px-2 py-2">Serie</th>
                                    <th class="px-2 py-2">Folio</th>
                                    <th class="px-2 py-2">Tipo</th>
                                    <th class="px-2 py-2">Subtotal</th>
                                    <th class="px-2 py-2">Descuento</th>
                                    <th class="px-2 py-2">IVA</th>
                                    <th class="px-2 py-2">IVA Ret.</th>
                                    <th class="px-2 py-2">ISR</th>
                                    <th class="px-2 py-2">Monto</th>
                                    <th class="px-2 py-2">Saldo</th>
                                    <th class="px-2 py-2">M. Pago</th>
                                    <th class="px-2 py-2">F. Pago</th>
                                    <th class="px-2 py-2">Moneda</th>
                                    <th class="px-2 py-2">T.C</th>
                                </tr>
                            </thead>
                            <tfoot>
                                <tr>
                                    <th></th>
                                    <th></th>
                                    <th></th>
                                    <th></th>
                                    <th></th>
                                    <th></th>
                                    <th></th>
                                    <th></th>
                                    <th></th>
                                    <th></th>
                                    <th></th>
                                    <th></th>
                                    <th></th>
                                    <th></th>
                                    <th></th>
                                    <th></th>
                                    <th></th>
                                    <th></th>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>



<style>
    .cfdi-section {
        background-color: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 0.75rem;
        padding: 1rem;
    }

    .cfdi-section__header {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        margin-bottom: 1rem;
    }

    .cfdi-section__icon {
        height: 40px;
        width: 40px;
        border-radius: 0.75rem;
        border: 1px solid #0f172a;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        color: #0f172a;
    }


    .cfdi-help-step {
        height: 24px;
        width: 24px;
        border-radius: 9999px;
        background-color: #0A415F;
        color: #fff;
        font-weight: 600;
        font-size: 0.75rem;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        box-shadow: 0 4px 10px rgba(15, 23, 42, 0.12);
    }

    .cfdi-tip-item {
        display: flex;
        gap: 0.45rem;
        line-height: 1.4;
        list-style: none;
        padding-left: 0;
    }

    .cfdi-tip-item::before {
        content: '•';
        color: #0A415F;
        font-weight: 700;
    }

    .cfdi-last-download {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.5rem;
        margin-bottom: 0.5rem;
    }

    .cfdi-last-download dt {
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: #94a3b8;
        margin-bottom: 0.1rem;
    }

    .cfdi-last-download dd {
        margin: 0;
        font-size: 0.9rem;
        font-weight: 600;
        color: #0f172a;
    }

    .cfdi-history-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.25rem 0.85rem;
        border-radius: 9999px;
        font-size: 0.75rem;
        font-weight: 600;
        border: 1px solid #cbd5f5;
        transition: all 0.2s ease-in-out;
    }

    .cfdi-history-badge.neutral {
        background-color: #f8fafc;
        color: #475569;
        border-color: #cbd5f5;
    }

    .cfdi-history-badge.success {
        background-color: #dcfce7;
        color: #166534;
        border-color: #86efac;
    }

    .cfdi-history-badge.warning {
        background-color: #fef9c3;
        color: #854d0e;
        border-color: #fde68a;
    }

    .cfdi-history-badge.danger {
        background-color: #fee2e2;
        color: #991b1b;
        border-color: #fecaca;
    }

    .select2-container {
        width: 100% !important;
    }

    .select2-container .select2-selection--single {
        height: 40px !important;
    }

    .select2-container .select2-selection--single .select2-selection__rendered {
        line-height: 40px !important;
    }


    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_processing,
    .dataTables_wrapper .dataTables_paginate {
        font-size: 10px;
    }

    .dataTables_wrapper .dataTables_length select,
    .dataTables_wrapper .dataTables_filter input {
        font-size: 10px !important;
    }

    table.dataTable thead th,
    table.dataTable thead td {
        font-size: 10px !important;
    }

    table.dataTable tfoot th,
    table.dataTable tfoot td {
        font-size: 11px !important;
    }

    table.dataTable tbody td {
        font-size: 11px !important;
    }


    table.dataTable tbody tr:hover {
        background-color: #f8f9fa;
        cursor: pointer;
    }

    .dataTables_wrapper .dataTables_filter input {
        padding: 0.25rem 0.5rem !important;
        border-radius: 0.375rem !important;
        border: 1px solid #e2e8f0 !important;
    }

    .dataTables_wrapper .dataTables_filter input:focus {
        outline: none !important;
        border-color: #0A415F !important;
        box-shadow: 0 0 0 2px rgba(10, 65, 95, 0.1) !important;
    }

    .table-scroll {
        max-height: 550px;
        overflow-y: auto;
    }


    .estatus-row {
        margin-right: 6px;
        width: 110%;
        max-width: 100px;
        display: inline-block;
    }
</style>
@endsection

@push('js')
<script>
    let id_factura = '';
    let updateCfdiStatus = function() {};
    let refreshCfdiTimestamp = function() {};
    let fetchLastDownloadHistory = function() {};
    let focusCfdiTable = function() {};
    let $cfdiTable = null;

    $(document).ready(function() {
        if (window.TourManager) {
            window.TourManager.start('consultaCfdiGrid');
        }

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        const $cfdiStatus = $('#cfdiStatus');
        const $cfdiLastRefresh = $('#cfdiLastRefresh');
        $cfdiTable = $('#list-ventas');
        const historyEndpoint = "{{ route('historial-descargas.get-historico') }}";
        const $historyBadge = $('#cfdiHistoryBadge');
        const $historyDate = $('#cfdiHistoryDate');
        const $historyTotals = $('#cfdiHistoryTotals');
        const historyBadgeStates = ['neutral', 'success', 'warning', 'danger'];

        updateCfdiStatus = function(message) {
            if ($cfdiStatus.length) {
                $cfdiStatus.text(message);
            }
        };

        refreshCfdiTimestamp = function() {
            if ($cfdiLastRefresh.length) {
                const now = new Date();
                $cfdiLastRefresh.text(now.toLocaleString('es-MX'));
            }
        };
  

        focusCfdiTable = function() {
            if (!$cfdiTable || !$cfdiTable.length) {
                return;
            }

            $cfdiTable.attr('tabindex', '-1');
            setTimeout(function() {
                $cfdiTable.trigger('focus');
            }, 50);
        };

        const setHistoryBadgeState = function(statusText) {
            if (!$historyBadge.length) {
                return;
            }

            let statusClass = 'neutral';
            if (statusText) {
                const normalized = statusText.toLowerCase();
                if (normalized.indexOf('complet') !== -1) {
                    statusClass = 'success';
                } else if (normalized.indexOf('proceso') !== -1 || normalized.indexOf('parcial') !== -1 || normalized.indexOf('pendiente') !== -1) {
                    statusClass = 'warning';
                } else if (normalized.indexOf('fall') !== -1 || normalized.indexOf('error') !== -1) {
                    statusClass = 'danger';
                }
            }

            $historyBadge.removeClass(historyBadgeStates.join(' ')).addClass(statusClass);
            $historyBadge.text(statusText || 'Sin registros');
        };

        const resetHistorySummary = function(badgeText) {
            setHistoryBadgeState(badgeText || 'Sin registros');

            if ($historyDate.length) {
                $historyDate.text('-');
            }
            if ($historyTotals.length) {
                $historyTotals.text('-');
            }
        };

        fetchLastDownloadHistory = function() {
            $.ajax({
                url: historyEndpoint,
                method: 'POST',
                data: {
                    tipoDescarga: '',
                    estatus: '',
                    usuario: '',
                    fechaDesde: '',
                    fechaHasta: ''
                },
                success: function(response) {
                    const data = response && Array.isArray(response.data) ? response.data : [];
                    const registro = data.length ? data[0] : null;

                    if (!registro) {
                        resetHistorySummary('Sin registros');
                        return;
                    }

                    setHistoryBadgeState(registro.estatus || 'Completado');
                    $historyDate.text(registro.fecha_descarga_formateada || '-');

                    const descargados = registro.cantidad_archivos_descargados || 0;
                    const insertados = registro.cantidad_archivos_insertados || 0;
                    const errores = registro.cantidad_archivos_errores || 0;
                    $historyTotals.text(descargados + ' descargados · ' + insertados + ' insertados · ' + errores + ' errores');

                },
                error: function() {
                    resetHistorySummary('Sin conexión');
                }
            });
        };

        $('.select2').select2({
            width: '100%',
        });

        // Obtener mes y año actual
        var fecha = new Date();
        var mesActual = fecha.getMonth() + 1; // getMonth() devuelve 0-11
        var anioActual = fecha.getFullYear();

        // Establecer valores en los selectores
        $('#mesFilter').val(mesActual).trigger('change');
        $('#anioFilter').val(anioActual).trigger('change');

        
        // Llamar a la función getVentas
        getVentas();
        fetchLastDownloadHistory();
    });


    function getVentas() {
        updateCfdiStatus('Validando filtros...');
        if (!$('#mesFilter').val() || !$('#anioFilter').val()) {
            Swal.fire({
                icon: 'warning',
                title: 'Atención',
                text: 'Debe seleccionar mes y año para continuar',
                confirmButtonColor: '#0A415F'
            });
            updateCfdiStatus('Selecciona mes y año');
            return false;
        }

        $('#list-ventas').dataTable().fnDestroy();
        if ($cfdiTable && $cfdiTable.length) {
            $cfdiTable.attr('aria-busy', 'true');
        }
        updateCfdiStatus('Solicitando datos al servidor...');

        var table = $('#list-ventas').DataTable({
            lengthMenu: [10, 15, 20, 50, 100, 200, 500],
            dom: 'Bfrtip',
            language: {
                url: "{{asset('material/datatable_sp.json')}}"
            },
            ajax: {
                url: "{{route('consulta-cfdis.get-cfdis')}}",
                type: "POST",
                data: {
                    tipo_factura: $('#tipoFacturaFilter  option:selected').val(),
                    estatus: $('#estatusFilter  option:selected').val(),
                    mes: $('#mesFilter').val(),
                    anio: $('#anioFilter').val(),
                    metodo_pago: $('#metodoPagoFilter option:selected').val()
                },
                error: function() {
                    updateCfdiStatus('No fue posible actualizar los datos');
                }
            },
            createdRow: function(row, data, rowIndex) {
                $.each($('td', row), function(colIndex) {
                    $(this).attr('title', 'Ver detalles de la factura');
                });
            },
            initComplete: function() {
                updateCfdiStatus('Consulta actualizada');
                refreshCfdiTimestamp();
                if ($cfdiTable && $cfdiTable.length) {
                    $cfdiTable.removeAttr('aria-busy');
                }
                focusCfdiTable();
            },
            footerCallback: function(row, data, start, end, display) {
                var api = this.api();
                // Remove the formatting to get integer data for summation
                var intVal = function(i) {
                    return typeof i === 'string' ?
                        i.replace(/[\$,]/g, '') * 1 :
                        typeof i === 'number' ?
                        i : 0;
                };

                var array = [7, 8, 9, 10, 11, 12, 13];
                    if ($cfdiTable && $cfdiTable.length) {
                        $cfdiTable.removeAttr('aria-busy');
                    }
                array.forEach(element => {

                    // Total over all pages
                    total = api
                        .column(element)
                        .data()
                        .reduce(function(a, b) {
                            return intVal(a) + intVal(b);
                        }, 0);

                    // Total over this page
                    pageTotal = api
                        .column(element, {
                            page: 'current'
                        })
                        .data()
                        .reduce(function(a, b) {
                            return intVal(a) + intVal(b);
                        }, 0);

                    // Update footer
                    $(api.column(element).footer()).html(
                        '<span class="font-weight-bold">' + formatter.format(parseFloat(total)) + '<span>'
                    );
                });
            },
            columns: [{
                    data: "id",
                    visible: false,
                    orderable: false,
                    searchable: false
                },
                // {
                //     data: "acciones",
                //     orderable: false,
                //     searchable: false
                // },
                // {
                //     data: "estatus",
                //     orderable: false,
                //     searchable: false
                // },
                {
                    data: "emisor",
                },
                {
                    data: "receptor",
                },
                {
                    data: "fecha_emision",
                },
                {
                    data: "serie",
                },
                {
                    data: "folio",
                },
                {
                    data: "tipo",
                },
                {
                    data: "subtotal",
                },
                {
                    data: "descuento",
                },
                {
                    data: "iva",
                },
                {
                    data: "iva_ret",
                },
                {
                    data: "isr",
                },
                {
                    data: "monto",
                },
                {
                    data: "saldo",
                },
                {
                    data: "metodo_pago",
                },
                {
                    data: "forma_pago",
                },

                {
                    data: "moneda",
                },
                {
                    data: "tipo_cambio",
                },
            ],
            buttons: [{
                    extend: 'excel',
                    text: 'Exportar a Excel',
                    className: 'bg-[#0A415F] hover:bg-[#083549] text-white px-4 py-2 rounded-md text-xs font-medium transition-colors duration-200',
                    exportOptions: {
                        columns: ':not(:first-child)',
                        footer: true
                    }
                },
                {
                    extend: 'pdf',
                    className: 'bg-[#0A415F] hover:bg-[#083549] text-white px-4 py-2 rounded-md text-xs font-medium transition-colors duration-200',
                    text: 'Exportar a PDF',
                    title: 'Listado de ventas',
                    orientation: 'landscape',
                    exportOptions: {
                        columns: ':not(:first-child)',
                        footer: true
                    },
                    customize: function(doc) {
                        doc.defaultStyle.fontSize = 8;
                        doc.styles.tableHeader.fontSize = 8;
                    }
                }
            ],
            order: [
                [7, "desc"]
            ],
        });

        table.on('click', 'tr', function(e) {
            var target = $(e.target);
            var cell = table.cell(target);

            if (!cell || !cell.index()) {
                return;
            }

            var columnIndex = cell.index().column;
            var columnTitle = table.column(columnIndex).header().textContent.trim();

            if (columnTitle === 'Ver' || columnTitle === 'Estatus' || columnTitle === 'Pago') {
                return;
            }

            var row = table.row(this).data();
            if (!row) {
                return;
            }

            $('.checkPro').map(function() {
                if ($(this).val() == row.id) {
                    $(this).prop('checked', true);
                }
            });

            window.open("{{ route('consulta-cfdis.detalles-factura', ['id' => ':id']) }}".replace(':id', row.id), '_blank');
        });
    }
</script>

@endpush