@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">
            <div class="col-lg-8">
                <div id="factura-dashboard" class="space-y-4">
                    <div class="bg-white border border-slate-200 rounded-lg shadow-sm p-6">
                        <div class="text-center py-10 text-slate-500">
                            <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-slate-400 mx-auto mb-4"></div>
                            <p class="text-sm">Preparando la información de la factura...</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="bg-white border border-slate-200 rounded-lg shadow-sm p-4 mb-4">
                    <div class="flex items-center justify-between mb-3">
                        <button onclick="getFactura()" class="inline-flex items-center gap-2 px-3 py-2 rounded-lg border border-slate-200 text-xs font-semibold text-slate-600 hover:border-slate-400">
                            <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                            </svg>
                            Recargar
                        </button>
                    </div>
                    <div id="panel-estado" class="space-y-3 text-sm text-slate-600">
                        <div class="rounded-lg border border-dashed border-slate-200 py-5 text-center text-slate-400 text-xs">
                            Esperando datos del CFDI...
                        </div>
                    </div>
                </div>

                <div class="bg-white border border-slate-200 rounded-lg shadow-sm p-4 mb-4">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-[11px] font-semibold tracking-[0.3em] uppercase text-slate-400 mb-1">Documentos</p>
                            <h6 class="text-base font-semibold text-slate-900 m-0">Archivos originales</h6>
                        </div>
                        <span class="inline-flex items-center gap-1 text-[11px] font-semibold text-slate-500 px-2 py-1 rounded-full bg-slate-50 border border-slate-100">CFDI</span>
                    </div>
                    <p class="text-xs text-slate-500 mt-1">Abre los archivos reportados por el SAT sin salir de esta vista.</p>
                    <div id="acciones-factura" class="mt-4">
                        <div class="rounded-lg border border-dashed border-slate-200 py-4 text-center text-slate-400 text-xs">
                            Sin enlaces disponibles
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .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;
    }
</style>
@endsection

@push('js')
<script>
    $(document).ready(function() {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $('.select2').select2({
            placeholder: "-Selecciona-",
            width: '100%',
        });

        getFactura();
    });

    const consultaFacturaDetalleUrl = "{{ route('consulta-cfdis.get-factura-detalles') }}";
    var idFacturaDetalles = @json($id);
    const indexRoute = "{{ route('consulta-cfdis.index') }}";

    const formatCurrency = (value) => Number(value || 0).toLocaleString('es-MX', {
        minimumFractionDigits: 2,
        maximumFractionDigits: 2
    });

    function safeText(value, fallback = 'N/A') {
        if (value === undefined || value === null || value === '') {
            return fallback;
        }
        return value;
    }

    function getFactura() {
        validateExistFactura();

        $.ajax({
            url: consultaFacturaDetalleUrl,
            type: 'POST',
            data: {
                id: idFacturaDetalles,
            },
    
            success: function(response) {
                const data = response || {};
                renderizarFactura(data);
                renderizarPanelEstado(data);
                renderizarAcciones(data);
            },
            error: function(response) {
                const message = response?.responseJSON?.message || 'No se puede obtener la información.';
                Swal.fire({
                    icon: 'error',
                    title: 'Atención',
                    html: '<div class="text-gray-700">No se puede obtener la información, debido a: <span class="font-semibold text-red-500">' + message + '</span></div>',
                    confirmButtonColor: '#0A415F',
                    confirmButtonText: 'Cerrar'
                });
            },
            complete: function() {
                setTimeout(() => {
                    $('#loadingLoad').modal('hide');
                }, 500);
            }
        });
    }

    function renderizarFactura(data) {
        if (!Object.keys(data).length) {
            $('#factura-dashboard').html(`
                <div class="text-center py-10 text-gray-500">
                    <p class="text-sm">No se encontró información para esta factura.</p>
                </div>
            `);
            $('#panel-estado').html('<div class="text-center text-xs text-slate-400 py-6 border border-dashed border-slate-200 rounded-lg">Sin datos para mostrar</div>');
            return;
        }

        const conceptos = Array.isArray(data.conceptos) ? data.conceptos : [];

        const conceptosHtml = conceptos.length ? conceptos.map(concepto => `
            <tr>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${safeText(concepto.clave_prod, '-')}</td>
                <td class="px-6 py-4 text-sm text-gray-500">${safeText(concepto.descripcion, '-')}</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${safeText(concepto.cantidad, '0')}</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$${formatCurrency(concepto.valor_unitario)}</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$${formatCurrency(concepto.importe)}</td>
                <td class="px-6 py-4 text-sm text-gray-500">
                    ${concepto.impuestos && concepto.impuestos.length > 0 ? `
                        <div class="space-y-1">
                            ${concepto.impuestos.map(impuestoData => `
                                <div class="text-xs">
                                    <span class="font-medium">${safeText(impuestoData.impuesto && impuestoData.impuesto.impuesto, '-')}:</span>
                                    <span class="text-gray-600">${safeText(impuestoData.tasa, '0%')} - $${formatCurrency(impuestoData.importe)}</span>
                                </div>
                            `).join('')}
                        </div>
                    ` : '<span class="text-gray-400">Sin impuestos</span>'}
                </td>
            </tr>
        `).join('') : `
            <tr>
                <td colspan="6" class="px-6 py-4 text-center text-sm text-gray-500">Sin conceptos registrados.</td>
            </tr>
        `;

        const html = `
            <section class="bg-white border border-slate-200 rounded-lg p-4 shadow-sm">
                <div class="flex flex-wrap items-start justify-between gap-4">
                    <div>
                        <p class="text-[11px] font-semibold tracking-[0.3em] uppercase text-slate-400">Identificador</p>
                        <h2 class="text-2xl font-semibold text-slate-900 break-all mt-1">${safeText(data.uuid)}</h2>
                        <p class="text-sm text-slate-500 mt-1">Serie ${safeText(data.serie, '-')}, folio ${safeText(data.folio, '-')}</p>
                    </div>
                    <div class="text-right">
                        <p class="text-[11px] font-semibold tracking-[0.3em] uppercase text-slate-400">Total CFDI</p>
                        <p class="text-3xl font-semibold text-slate-900 leading-tight">$${formatCurrency(data.monto)}</p>
                        <p class="text-xs text-slate-500">Emitido el ${safeText(data.fecha_emision)}</p>
                    </div>
                </div>
                <div class="grid sm:grid-cols-3 gap-3 mt-4 text-sm text-slate-600">
                    <div class="rounded-lg border border-slate-100 bg-white p-3">
                        <p class="text-[11px] font-semibold tracking-[0.3em] uppercase text-slate-400 mb-1">Método</p>
                        <p class="font-semibold text-slate-900">${safeText(data.metodo_pago)}</p>
                    </div>
                    <div class="rounded-lg border border-slate-100 bg-white p-3">
                        <p class="text-[11px] font-semibold tracking-[0.3em] uppercase text-slate-400 mb-1">Forma</p>
                        <p class="font-semibold text-slate-900">${safeText(data.forma_pago)}</p>
                    </div>
                    <div class="rounded-lg border border-slate-100 bg-white p-3">
                        <p class="text-[11px] font-semibold tracking-[0.3em] uppercase text-slate-400 mb-1">Saldo</p>
                        <p class="font-semibold text-slate-900">$${formatCurrency(data.saldo)}</p>
                    </div>
                </div>
            </section>

            <section class="bg-white rounded-lg border border-gray-200 p-4 space-y-4">
                <div class="flex items-center gap-3">
                    <span class="h-10 w-10 rounded-lg border border-slate-900 flex items-center justify-center text-lg text-slate-900">&#128101;</span>
                    <div>
                        <h6 class="text-base font-semibold text-slate-900 m-0">Datos registrados en el CFDI</h6>
                    </div>
                </div>
                <div class="grid md:grid-cols-2 gap-4 text-sm text-slate-600">
                    <div class="rounded-lg border border-slate-200 bg-white p-3">
                        <p class="text-[11px] font-semibold tracking-[0.3em] uppercase text-slate-400 mb-1">Emisor</p>
                        <p class="font-semibold text-slate-900">${safeText(data.razon_social_emisor)}</p>
                        <p class="text-xs text-slate-500">RFC ${safeText(data.rfc_emisor)}</p>
                    </div>
                    <div class="rounded-lg border border-slate-200 bg-white p-3">
                        <p class="text-[11px] font-semibold tracking-[0.3em] uppercase text-slate-400 mb-1">Receptor</p>
                        <p class="font-semibold text-slate-900">${safeText(data.razon_social_receptor)}</p>
                        <p class="text-xs text-slate-500">RFC ${safeText(data.rfc_receptor)}</p>
                    </div>
                </div>
            </section>

            <section class="bg-white border border-slate-200 rounded-lg p-4 shadow-sm">
                <div class="flex items-center gap-2 mb-4">
                    <span class="h-10 w-10 rounded-lg border border-slate-900 flex items-center justify-center text-lg text-slate-900">
                        <svg class="h-5 w-5 text-slate-900" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                        </svg>
                    </span>
                    <div>
                      <h6 class="text-base font-semibold text-slate-900 m-0">Información general</h6>
                    </div>
                </div>
                <div class="grid md:grid-cols-3 gap-4 text-sm text-slate-600">
                    <div>
                        <p class="text-[11px] font-semibold tracking-[0.3em] uppercase text-slate-400 mb-1">Identificadores</p>
                        <p><span class="font-medium text-slate-800">Serie:</span> ${safeText(data.serie)}</p>
                        <p><span class="font-medium text-slate-800">Folio:</span> ${safeText(data.folio)}</p>
                        <p><span class="font-medium text-slate-800">UUID:</span> ${safeText(data.uuid)}</p>
                    </div>
                    <div>
                        <p class="text-[11px] font-semibold tracking-[0.3em] uppercase text-slate-400 mb-1">Calendario</p>
                        <p><span class="font-medium text-slate-800">Fecha emisión:</span> ${safeText(data.fecha_emision)}</p>
                        <p><span class="font-medium text-slate-800">Fecha certificación:</span> ${safeText(data.fecha_certificacion)}</p>
                        <p><span class="font-medium text-slate-800">Moneda:</span> ${safeText(data.moneda)}</p>
                    </div>
                    <div>
                        <p class="text-[11px] font-semibold tracking-[0.3em] uppercase text-slate-400 mb-1">Control</p>
                        <p><span class="font-medium text-slate-800">Tipo cambio:</span> ${safeText(data.tipo_cambio, 'N/A')}</p>
                        <p><span class="font-medium text-slate-800">Estatus:</span> ${safeText(data.estatus, 'N/A')}</p>
                        <p><span class="font-medium text-slate-800">Saldo:</span> $${formatCurrency(data.saldo)}</p>
                    </div>
                </div>
            </section>

            <section class="bg-white border border-slate-200 rounded-lg p-4 shadow-sm">
                <div class="flex items-center gap-2 mb-4">
                    <span class="h-10 w-10 rounded-lg border border-slate-900 flex items-center justify-center text-lg text-slate-900">
                        <svg class="h-5 w-5 text-slate-900" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7h16M4 12h16M4 17h16"/>
                        </svg>
                    </span>
                    <div>
                        <h6 class="text-base font-semibold text-slate-900 m-0">Lista de conceptos</h6>
                    </div>
                </div>
                <div class="overflow-x-auto rounded-lg border border-slate-200">
                    <table class="min-w-full text-sm">
                        <thead class="bg-slate-50 text-slate-500 text-xs uppercase tracking-wider">
                            <tr>
                                <th class="px-4 py-3 text-left">Clave</th>
                                <th class="px-4 py-3 text-left">Descripción</th>
                                <th class="px-4 py-3 text-left">Cantidad</th>
                                <th class="px-4 py-3 text-left">Valor unitario</th>
                                <th class="px-4 py-3 text-left">Importe</th>
                                <th class="px-4 py-3 text-left">Impuestos</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100">
                            ${conceptosHtml}
                        </tbody>
                    </table>
                </div>
            </section>
            <section class="grid md:grid-cols-2 gap-4">
                <div class="bg-white rounded-lg border border-slate-200 p-4 shadow-sm">
                    <div class="flex items-center gap-3 mb-3">
                        <span class="h-9 w-9 rounded-lg bg-emerald-600 text-white flex items-center justify-center">
                            <span class="material-icons text-white text-base leading-none">insights</span>
                        </span>
                        <div>
                            <p class="text-[11px] font-semibold tracking-[0.3em] uppercase text-slate-400">Totales</p>
                            <p class="text-sm text-slate-600 m-0">Resumen de importes del CFDI</p>
                        </div>
                    </div>
                    <dl class="space-y-2 text-sm text-slate-700">
                        <div class="flex items-center justify-between">
                            <dt class="font-medium text-slate-500">Subtotal</dt>
                            <dd class="font-semibold text-slate-900">$${formatCurrency(data.subtotal)}</dd>
                        </div>
                        <div class="flex items-center justify-between">
                            <dt class="font-medium text-slate-500">Descuento aplicado</dt>
                            <dd class="font-semibold text-rose-600">$${formatCurrency(data.descuento)}</dd>
                        </div>
                        <div class="flex items-center justify-between">
                            <dt class="font-medium text-slate-500">IVA trasladado</dt>
                            <dd class="font-semibold text-slate-900">$${formatCurrency(data.iva)}</dd>
                        </div>
                    </dl>
                </div>
                <div class="bg-white rounded-lg border border-slate-200 p-4 shadow-sm">
                    <div class="flex items-center gap-3 mb-3">
                        <span class="h-9 w-9 rounded-lg bg-emerald-600 text-white flex items-center justify-center">
                            <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c1.657 0 3-1.343 3-3S13.657 2 12 2 9 3.343 9 5s1.343 3 3 3zm0 2c-2.21 0-4 1.79-4 4v7h8v-7c0-2.21-1.79-4-4-4z" />
                            </svg>
                        </span>
                        <div>
                            <p class="text-[11px] font-semibold tracking-[0.3em] uppercase text-slate-400">Balances</p>
                            <p class="text-sm text-slate-600 m-0">Situación financiera actual</p>
                        </div>
                    </div>
                    <div class="space-y-3 text-sm text-slate-700">
                        <div class="flex items-center justify-between">
                            <p class="font-medium text-slate-500">Total facturado</p>
                            <span class="px-3 py-1 rounded-full bg-slate-50 border border-slate-200 text-slate-900 font-semibold">$${formatCurrency(data.monto)}</span>
                        </div>
                        <div class="flex items-center justify-between">
                            <p class="font-medium text-slate-500">Saldo pendiente</p>
                            <span class="px-3 py-1 rounded-full bg-amber-50 border border-amber-100 text-amber-700 font-semibold">$${formatCurrency(data.saldo)}</span>
                        </div>
                    </div>
                </div>
            </section>
        `;

        $('#factura-dashboard').html(html);
    }

    function renderizarPanelEstado(data) {
        if (!Object.keys(data).length) {
            $('#panel-estado').html('<div class="rounded-lg border border-dashed border-slate-200 py-5 text-center text-slate-400 text-xs">Sin datos para mostrar</div>');
            return;
        }

        const saldo = Number(data.saldo || 0);
        const estado = saldo === 0 ? 'Pagado' : 'Pendiente';
        const estadoColor = saldo === 0 ? 'bg-emerald-50 text-emerald-700 border-emerald-100' : 'bg-amber-50 text-amber-700 border-amber-100';

        const html = `
            <div class="rounded-lg border border-slate-100 bg-white p-3">
                <div class="flex items-center justify-between mb-2">
                    <div>
                        <p class="text-[11px] font-semibold tracking-[0.3em] uppercase text-slate-400">Situación</p>
                        <p class="text-base font-semibold text-slate-900">${estado}</p>
                    </div>
                    <span class="px-3 py-1 rounded-full border ${estadoColor} text-xs font-semibold">$${formatCurrency(saldo)}</span>
                </div>
                <p class="text-xs text-slate-500">Actualizado al ${safeText(data.fecha_emision)}</p>
            </div>
            <div class="grid grid-cols-2 gap-3 text-xs text-slate-600">
                <div class="rounded-lg border border-slate-100 p-3">
                    <p class="text-[11px] font-semibold tracking-[0.3em] uppercase text-slate-400 mb-1">Método</p>
                    <p class="text-sm font-semibold text-slate-900">${safeText(data.metodo_pago)}</p>
                    <p class="text-[11px] text-slate-500">Forma ${safeText(data.forma_pago)}</p>
                </div>
                <div class="rounded-lg border border-slate-100 p-3">
                    <p class="text-[11px] font-semibold tracking-[0.3em] uppercase text-slate-400 mb-1">Moneda</p>
                    <p class="text-sm font-semibold text-slate-900">${safeText(data.moneda)}</p>
                    <p class="text-[11px] text-slate-500">Tipo cambio ${safeText(data.tipo_cambio, 'N/A')}</p>
                </div>
            </div>
            <div class="rounded-lg border border-slate-100 p-3">
                <p class="text-[11px] font-semibold tracking-[0.3em] uppercase text-slate-400 mb-1">Certificación</p>
                <p class="text-sm font-semibold text-slate-900">${safeText(data.fecha_certificacion)}</p>
            </div>
        `;

        $('#panel-estado').html(html);
    }

    function renderizarAcciones(data) {
        const buttons = [];

        if (data.referencia_pdf) {
            buttons.push(`
                <a href="${data.referencia_pdf}" target="_blank" class="flex items-center gap-3 p-3 rounded-lg border border-slate-200 hover:border-slate-400 transition bg-white">
                    <span class="h-9 w-9 rounded-full bg-red-50 text-red-500 flex items-center justify-center">
                        <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"/></svg>
                    </span>
                    <div>
                        <p class="text-sm font-semibold text-slate-900">Ver PDF</p>
                        <p class="text-xs text-slate-500">Representación impresa del CFDI.</p>
                    </div>
                </a>
            `);
        }

        if (data.referencia_xml) {
            buttons.push(`
                <a href="${data.referencia_xml}" target="_blank" class="flex items-center gap-3 p-3 rounded-lg border border-slate-200 hover:border-slate-400 transition bg-white">
                    <span class="h-9 w-9 rounded-full bg-purple-50 text-purple-500 flex items-center justify-center">
                        <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/></svg>
                    </span>
                    <div>
                        <p class="text-sm font-semibold text-slate-900">Ver XML</p>
                        <p class="text-xs text-slate-500">Archivo original sellado por el SAT.</p>
                    </div>
                </a>
            `);
        }

        if (buttons.length) {
            $('#acciones-factura').html(`
                <div class="grid gap-3">
                    ${buttons.join('')}
                </div>
            `);
        } else {
            $('#acciones-factura').html('<div class="rounded-lg border border-dashed border-slate-200 py-5 text-center text-slate-400 text-xs">No hay archivos disponibles para esta factura.</div>');
        }
    }

    function validateExistFactura() {
        if (!idFacturaDetalles) {
            Swal.fire({
                icon: 'error',
                title: 'Atención',
                html: '<div class="text-gray-700"><span class="font-semibold text-red-500">No es posible acceder a la información de la factura</span></div>',
                confirmButtonColor: '#0A415F',
                confirmButtonText: 'Volver',
                showCancelButton: true,
                cancelButtonText: 'Cerrar',
                cancelButtonColor: '#6B7280'
            }).then((result) => {
                if (result.isConfirmed) {
                    window.location.href = indexRoute;
                }
            });
        }
    }
</script>
@endpush