@extends('layouts.app', ['activePage' => 'descarga-sat', 'menuParent' => '', 'titlePage' =>''])

@section('content')
@include('includes.tailwind')
<div class="content">
    <div class="container-fluid mt-4">
        <div class="row">
            <div class="col-lg-8">
                <div class="bg-white border border-slate-200 rounded-lg shadow-sm p-6 mb-2">
                    <div class="flex items-start justify-between mb-1">
                        <div>
                            <h4 class="text-2xl uppercase font-semibold text-slate-900">Descarga de CFDI's del SAT</h4>
                            <p class="text-sm text-slate-500">Configura los parámetros de búsqueda para descargar comprobantes fiscales del portal del SAT.</p>
                        </div>
                    </div>

                    <form id="satDownloadForm" class="space-y-5">
                        <section id="tourSatTipoConsulta" 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">Tipo de consulta</h6>
                                    <p class="text-sm text-slate-500">Define la dirección del comprobante y qué recursos descargar.</p>
                                </div>
                            </div>
                            <div class="grid lg:grid-cols-2 gap-3">
                                <div>
                                    <label class="block text-sm font-medium text-slate-700 mb-3">Tipo de factura: <span class="text-rose-500">*</span></label>
                                    <div class="flex flex-wrap gap-3">
                                        <label class="cursor-pointer">
                                            <input type="radio" name="tipoFactura" value="emitidas" class="sr-only peer" checked>
                                            <span class="px-4 py-2 rounded-full border border-slate-300 text-sm font-medium text-slate-600 peer-checked:bg-[#0A415F] peer-checked:text-white peer-checked:border-slate-900 transition">Emitidas</span>
                                        </label>
                                        <label class="cursor-pointer">
                                            <input type="radio" name="tipoFactura" value="recibidas" class="sr-only peer">
                                            <span class="px-4 py-2 rounded-full border border-slate-300 text-sm font-medium text-slate-600 peer-checked:bg-[#0A415F] peer-checked:text-white peer-checked:border-slate-900 transition">Recibidas</span>
                                        </label>
                                    </div>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-slate-700 mb-3">Recursos a descargar:</label>
                                    <div class="flex flex-wrap gap-3">
                                        <label class="cursor-pointer">
                                            <input type="checkbox" name="recursos[]" value="xml" class="sr-only peer" checked>
                                            <span class="px-4 py-2 rounded-full border border-slate-300 text-sm font-medium text-slate-600 peer-checked:bg-[#0A415F] peer-checked:text-white peer-checked:border-slate-900 transition">XML</span>
                                        </label>
                                        <label class="cursor-pointer">
                                            <input type="checkbox" name="recursos[]" value="pdf" class="sr-only peer" checked>
                                            <span class="px-4 py-2 rounded-full border border-slate-300 text-sm font-medium text-slate-600 peer-checked:bg-[#0A415F] peer-checked:text-white peer-checked:border-slate-900 transition">PDF</span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </section>
                        <section id="tourSatRangoFechas" 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">&#128197;</span>
                                <div>
                                    <h6 class="text-base font-semibold text-slate-900">Rango de fechas</h6>
                                    <p class="text-sm text-slate-500">Selecciona el período de búsqueda en formato AAAA-MM-DD.</p>
                                </div>
                            </div>
                            <div class="grid lg:grid-cols-2 gap-3">
                                <div>
                                    <label class="block text-sm font-medium text-slate-700 mb-2">Fecha inicio: <span class="text-rose-500">*</span></label>
                                    <input type="date" id="fecha_inicio" name="fechaInicio" required class="w-full rounded-lg focus:ring-1 focus:ring-blue-500 focus:border-transparent border border-slate-300 bg-white px-4 py-2 text-slate-700 ">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-slate-700 mb-2">Fecha fin: <span class="text-rose-500">*</span></label>
                                    <input type="date" id="fecha_fin" name="fechaFin" required class="w-full rounded-lg focus:ring-1 focus:ring-blue-500 focus:border-transparent border border-slate-300 bg-white px-4 py-2 text-slate-700 ">
                                </div>
                            </div>
                        </section>
                        <section id="tourSatFiltros" 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">&#128196;</span>
                                <div>
                                    <h6 class="text-base font-semibold text-slate-900">Filtros opcionales</h6>
                                    <p class="text-sm text-slate-500">Aplica criterios adicionales para refinar tu búsqueda de comprobantes.</p>
                                </div>
                            </div>
                            <div class="grid md:grid-cols-2 gap-3">
                                <div>
                                    <label class="block text-sm font-medium text-slate-700 mb-2">RFC Emisor:</label>
                                    <input type="text" id="rfc_emisor" placeholder="XAXX010101000" class="w-full rounded-lg focus:ring-1 focus:ring-blue-500 focus:border-transparent border border-slate-300 bg-white px-4 py-2 text-slate-700 ">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-slate-700 mb-2">RFC Receptor:</label>
                                    <input type="text" id="rfc_receptor" placeholder="COSC8001137NA" class="w-full rounded-lg focus:ring-1 focus:ring-blue-500 focus:border-transparent border border-slate-300 bg-white px-4 py-2 text-slate-700 ">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-slate-700 mb-2">UUID:</label>
                                    <input type="text" id="uuid" placeholder="Ingresa el UUID exacto" class="w-full rounded-lg focus:ring-1 focus:ring-blue-500 focus:border-transparent border border-slate-300 bg-white px-4 py-2 text-slate-700 ">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-slate-700 mb-2">Serie / Folio:</label>
                                    <input type="text" id="folio" placeholder="FG-0001" class="w-full rounded-lg focus:ring-1 focus:ring-blue-500 focus:border-transparent border border-slate-300 bg-white px-4 py-2 text-slate-700 ">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-slate-700 mb-3">Tipo de comprobante:</label>
                                    <div class="flex flex-wrap gap-3">
                                        <label class="cursor-pointer">
                                            <input type="checkbox" name="tipos[]" value="I" class="sr-only peer" checked>
                                            <span class="px-4 py-2 rounded-full border border-slate-300 text-sm font-medium text-slate-600 peer-checked:bg-[#0A415F] peer-checked:text-white peer-checked:border-slate-900 transition">Ingreso (I)</span>
                                        </label>
                                        <label class="cursor-pointer">
                                            <input type="checkbox" name="tipos[]" value="E" class="sr-only peer">
                                            <span class="px-4 py-2 rounded-full border border-slate-300 text-sm font-medium text-slate-600 peer-checked:bg-[#0A415F] peer-checked:text-white peer-checked:border-slate-900 transition">Egreso (E)</span>
                                        </label>
                                        <label class="cursor-pointer">
                                            <input type="checkbox" name="tipos[]" value="P" class="sr-only peer">
                                            <span class="px-4 py-2 rounded-full border border-slate-300 text-sm font-medium text-slate-600 peer-checked:bg-[#0A415F] peer-checked:text-white peer-checked:border-slate-900 transition">Pago (P)</span>
                                        </label>
                                    </div>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-slate-700 mb-3">Estatus SAT:</label>
                                    <div class="flex flex-wrap gap-3">
                                        <label class="cursor-pointer">
                                            <input type="checkbox" name="estatusSat[]" value="vigente" class="sr-only peer" checked>
                                            <span class="px-4 py-2 rounded-full border border-slate-300 text-sm font-medium text-slate-600 peer-checked:bg-[#0A415F] peer-checked:text-white peer-checked:border-slate-900 transition">Vigente</span>
                                        </label>
                                        <label class="cursor-pointer">
                                            <input type="checkbox" name="estatusSat[]" value="cancelado" class="sr-only peer">
                                            <span class="px-4 py-2 rounded-full border border-slate-300 text-sm font-medium text-slate-600 peer-checked:bg-[#0A415F] peer-checked:text-white peer-checked:border-slate-900 transition">Cancelado</span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </section>

                        <div id="tourSatAccion" class="flex flex-col items-end pt-2">
                            <button type="submit" id="satSubmitBtn" class="inline-flex items-center gap-3 bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200">
                                <span class="spinner-border hidden h-4 w-4 border-2 border-white border-t-transparent rounded-full animate-spin" aria-hidden="true"></span>
                                <span class="btn-text inline-flex items-center gap-2">
                                    <i class="material-icons align-middle text-sm">cloud_download</i>
                                    <span class="btn-text-label">Descargar CFDI's</span>
                                </span>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
            <div class="col-lg-4">
                <div id="tourSatAyuda" 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">Ayuda rápida</h6>
                    </div>
                    <div class="space-y-3">
                        <div class="flex gap-2 group">
                            <div class="h-[24px] w-[24px] rounded-full bg-[#0A415F] flex items-center justify-center text-sm font-semibold text-white shadow-sm flex-shrink-0">1</div>
                            <div>
                                <p class="font-semibold text-sm mb-1">Define el tipo de descarga</p>
                                <p class="text-xs text-slate-600 mb-0">QueryByFilters acepta emitidas o recibidas. Envía una sola dirección por solicitud.</p>
                            </div>
                        </div>
                        <div class="flex gap-2 group">
                            <div class="h-[24px] w-[24px] rounded-full bg-[#0A415F] flex items-center justify-center text-sm font-semibold text-white shadow-sm flex-shrink-0">2</div>
                            <div>
                                <p class="font-semibold text-sm mb-1">Rango sugerido</p>
                                <p class="text-xs text-slate-600 mb-0">El SAT recomienda períodos máximos de 31 días para respuestas estables.</p>
                            </div>
                        </div>
                        <div class="flex gap-2 group">
                            <div class="h-[24px] w-[24px] rounded-full bg-[#0A415F] flex items-center justify-center text-sm font-semibold text-white shadow-sm flex-shrink-0">3</div>
                            <div>
                                <p class="font-semibold text-sm mb-1">Filtros compatibles</p>
                                <p class="text-xs text-slate-600 mb-0">RFC emisor/receptor, UUID, serie/folio, tipo y estatus SAT están soportados.</p>
                            </div>
                        </div>
                        <div class="flex gap-2 group">
                            <div class="h-[24px] w-[24px] rounded-full bg-[#0A415F] flex items-center justify-center text-sm font-semibold text-white shadow-sm flex-shrink-0">4</div>
                            <div>
                                <p class="font-semibold text-sm mb-1">Salida</p>
                                <p class="text-xs text-slate-600 mb-0">Los XML/PDF se almacenan en la ruta configurada en el backend. Verifica permisos.</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="tourSatHistorial" class="bg-white border border-slate-200 rounded-lg shadow-sm p-4 sticky top-4">
                    <div class="flex items-center gap-2 mb-3">
                        <h6 class="text-base font-semibold text-slate-900">Histórico reciente</h6>
                    </div>
                    <div id="satStatus" class="mb-3 text-xs font-medium text-slate-500 px-3 py-1.5 bg-slate-50 rounded-md border border-slate-200 inline-block">
                        En espera
                    </div>
                    <div id="satResponse" class="min-h-[140px] rounded-lg border border-slate-200 bg-white p-2 text-sm text-slate-600">
                        <div class="flex flex-col items-center justify-center h-full text-center py-4">
                            <span class="text-3xl mb-2 opacity-50">📥</span>
                            <p class="text-sm font-medium text-slate-700 mb-1">Sin descargas</p>
                            <p class="text-xs text-slate-500">Aún no se ha ejecutado una descarga en esta sesión.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@push('js')
<script>
    $(document).ready(function() {

        const $form = $('#satDownloadForm');
        const $response = $('#satResponse');
        const $status = $('#satStatus');
        const $btn = $('#satSubmitBtn');
        const $spinner = $btn.find('.spinner-border');
        const $btnLabel = $btn.find('.btn-text-label');
        const defaultBtnLabel = $btnLabel.text();
        const endpoint = "{{ route('descarga-sat.descargar-xml') }}";
        const CFDI_LIMIT = 50;

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

        const getCheckedValues = (name) => $('input[name="' + name + '"]:checked').map(function() {
            return this.value;
        }).get();

        const buildPayload = () => ({
            fechaInicio: $('#fecha_inicio').val(),
            fechaFin: $('#fecha_fin').val(),
            tipoFactura: $('input[name="tipoFactura"]:checked').val(),
            rfcEmisor: $('#rfc_emisor').val().trim(),
            rfcReceptor: $('#rfc_receptor').val().trim(),
            uuid: $('#uuid').val().trim(),
            folio: $('#folio').val().trim(),
            tipos: getCheckedValues('tipos[]'),
            recursos: getCheckedValues('recursos[]'),
            estatusSat: getCheckedValues('estatusSat[]')
        });

        const renderStats = (stats = {}) => {
            const descargas = stats.descargas || {};
            const items = [{
                    label: 'Encontrados',
                    value: stats.encontrados ?? 0
                },
                {
                    label: 'XML descargados',
                    value: descargas.xml ?? 0
                },
                {
                    label: 'PDF descargados',
                    value: descargas.pdf ?? 0
                },
                {
                    label: 'Insertados',
                    value: stats.insertados ?? 0
                },
                {
                    label: 'Errores',
                    value: stats.errores ?? 0
                }
            ];

            const cards = items.map((item) => `
                <div class="rounded-lg border border-slate-200 bg-slate-50 px-3 py-2">
                    <p class="text-[11px] uppercase tracking-wide text-slate-500">${item.label}</p>
                    <p class="text-lg font-semibold text-slate-900">${item.value}</p>
                </div>
            `).join('');

            return `<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-3">${cards}</div>`;
        };

        const renderCfdiList = (cfdis = []) => {
            if (!cfdis.length) {
                return '<p class="text-sm text-slate-500">No se recibieron CFDI para mostrar.</p>';
            }

            const rows = cfdis.map((cfdi) => `
                <tr class="border-t border-slate-100">
                    <td class="px-3 py-2 font-mono text-[11px] text-slate-600 break-all">${cfdi.serie || '-'}-${cfdi.folio || '-'}</td>
                    <td class="px-3 py-2 text-xs text-slate-700">${cfdi.rfc_emisor || '-'}</td>
                    <td class="px-3 py-2 text-xs text-slate-700">${cfdi.rfc_receptor || '-'}</td>
                    <td class="px-3 py-2 text-xs text-slate-700">${cfdi.total || '-'}</td>
                    <td class="px-3 py-2 text-xs text-slate-700">${cfdi.fecha_emision || '-'}</td>
                    <td class="px-3 py-2 text-xs text-slate-700">
                        <span class="font-semibold">${cfdi.estado || '-'}</span>
                        <span class="block text-[11px] text-slate-500">${cfdi.efecto || '-'}</span>
                    </td>
                </tr>
            `).join('');

            return `
                <div class="border border-slate-200 rounded-lg overflow-hidden">
                    <div class="flex items-center justify-between px-4 py-2 bg-slate-50 border-b border-slate-200">
                        <p class="text-sm font-semibold text-slate-800">Listado de CFDI (máx. ${CFDI_LIMIT})</p>
                        <span class="text-xs text-slate-500">Mostrando ${cfdis.length} registros</span>
                    </div>
                    <div class="overflow-x-auto" >
                        <table class="min-w-full text-left text-xs text-slate-600">
                            <thead class="bg-white text-[11px] uppercase text-slate-500">
                                <tr>
                                    <th class="px-3 py-2">Folio</th>
                                    <th class="px-3 py-2">Emisor</th>
                                    <th class="px-3 py-2">Receptor</th>
                                    <th class="px-3 py-2">Total</th>
                                    <th class="px-3 py-2">Fecha</th>
                                    <th class="px-3 py-2">Estado</th>
                                </tr>
                            </thead>
                            <tbody class="bg-white" style="max-height: 300px; overflow-y: auto;">${rows}</tbody>
                        </table>
                    </div>
                </div>
            `;
        };

        const renderSuccess = (message, data = {}) => {
            const statsHtml = renderStats(data.stats || {});
            const cfdiHtml = renderCfdiList(data.cfdis || []);

            $response.html(`
                <div class="space-y-4">
                    <div class="rounded-md border border-green-200 bg-green-50 px-3 py-2 text-sm text-green-800">
                        ${message}
                    </div>
                    ${statsHtml}
                    ${cfdiHtml}
                </div>
            `);
        };

        const renderError = (message, details = null) => {
            const detailHtml = details ?
                `<pre class="mt-2 overflow-x-auto rounded border border-rose-100 bg-rose-50 p-2 text-[11px] text-rose-700">${typeof details === 'string' ? details : JSON.stringify(details, null, 2)}</pre>` :
                '';

            $response.html(`
                <div class="rounded-md border border-rose-200 bg-rose-50 px-3 py-2 text-sm text-rose-700">
                    <p class="font-semibold">Error en la solicitud</p>
                    <p>${message}</p>
                    ${detailHtml}
                </div>
            `);
        };

        $form.on('submit', function(e) {
            e.preventDefault();

            const payload = buildPayload();

            if (!payload.fechaInicio || !payload.fechaFin) {
                renderError('Selecciona un rango de fechas válido.');
                return;
            }

            if (!payload.recursos.length) {
                renderError('Selecciona al menos un recurso a descargar (XML o PDF).');
                return;
            }

            $btn.prop('disabled', true);
            $spinner.removeClass('hidden');
            $btnLabel.text('Procesando...');
            $status.text('Procesando solicitud con el SAT...');

            $.ajax({
                url: endpoint,
                method: 'POST',
                data: payload,
                success: function(response) {
                    const message = response && response.message ? response.message : 'El proceso se completó correctamente.';
                    const data = response && response.data ? response.data : {};
                    renderSuccess(message, data);
                    $status.text('Descarga finalizada');
                },
                error: function(xhr) {
                    const errorPayload = xhr.responseJSON || {};
                    const message = errorPayload.error || 'No fue posible completar la descarga. Inténtalo nuevamente.';
                    const details = errorPayload.details || errorPayload.message || null;
                    renderError(message, details);
                    $status.text('Ocurrió un error');
                },
                complete: function() {
                    $btn.prop('disabled', false);
                    $spinner.addClass('hidden');
                    $btnLabel.text(defaultBtnLabel);
                }
            });
        });

        if (window.TourManager) {
            window.TourManager.start('descargaSatForm');
        }
    });
</script>
@endpush