{{-- resources/views/livewire/documentos/index.blade.php --}}
<div>
    {{-- ── HEADER ──────────────────────────────────── --}}
    <div style="display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:20px;">
        <div>
            <div class="page-title">📄 Documentos emitidos</div>
            <div class="page-sub">Comprobantes electrónicos · estado Hacienda en tiempo real</div>
        </div>
        <a href="{{ route('factura.nueva') }}" wire:navigate>
            <button class="btn-blue">➕ Nueva factura</button>
        </a>
    </div>

    {{-- ── MENSAJES ─────────────────────────────────── --}}
    @if($mensaje_exito)
    <div class="alert alert-green" x-data x-init="setTimeout(() => $wire.set('mensaje_exito',''), 4000)">
        ✅ {{ $mensaje_exito }}
    </div>
    @endif
    @if($mensaje_error)
    <div class="alert alert-red" x-data x-init="setTimeout(() => $wire.set('mensaje_error',''), 4000)">
        ❌ {{ $mensaje_error }}
    </div>
    @endif

    {{-- ── KPIs DEL PERÍODO ────────────────────────── --}}
    <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px;">
        <div style="background:#fff;border-radius:16px;padding:16px;box-shadow:var(--shadow);">
            <div style="font-size:11px;color:var(--label2);margin-bottom:6px;text-transform:uppercase;letter-spacing:.4px;">Total docs</div>
            <div style="font-size:22px;font-weight:700;">{{ number_format($totales->total) }}</div>
        </div>
        <div style="background:#fff;border-radius:16px;padding:16px;box-shadow:var(--shadow);">
            <div style="font-size:11px;color:var(--label2);margin-bottom:6px;text-transform:uppercase;letter-spacing:.4px;">✓ Aceptadas</div>
            <div style="font-size:22px;font-weight:700;color:var(--green2);">{{ number_format($totales->aceptadas) }}</div>
        </div>
        <div style="background:#fff;border-radius:16px;padding:16px;box-shadow:var(--shadow);">
            <div style="font-size:11px;color:var(--label2);margin-bottom:6px;text-transform:uppercase;letter-spacing:.4px;">Monto total</div>
            <div style="font-size:22px;font-weight:700;">₡{{ number_format($totales->monto_total, 0) }}</div>
        </div>
        <div style="background:#fff;border-radius:16px;padding:16px;box-shadow:var(--shadow);">
            <div style="font-size:11px;color:var(--label2);margin-bottom:6px;text-transform:uppercase;letter-spacing:.4px;">⚠️ Atención</div>
            <div style="font-size:22px;font-weight:700;color:var(--red);">{{ $totales->rechazadas + $totales->contingencia }}</div>
        </div>
    </div>

    {{-- ── FILTROS ──────────────────────────────────── --}}
    <div class="inset-card" style="margin-bottom:16px;">
        <div style="padding:14px 18px;display:flex;gap:10px;flex-wrap:wrap;align-items:center;">
            {{-- Búsqueda --}}
            <input type="text"
                   wire:model.live.debounce.400ms="filtro_busqueda"
                   placeholder="🔍 Buscar cliente, número, clave…"
                   style="font-size:13px;padding:8px 14px;background:var(--bg);border:none;
                          border-radius:50px;min-width:240px;outline:none;font-family:'Ubuntu',sans-serif;" />

            {{-- Tipo --}}
            <select wire:model.live="filtro_tipo"
                    style="font-size:12px;padding:8px 12px;background:var(--bg);border:none;
                           border-radius:50px;font-family:'Ubuntu',sans-serif;outline:none;">
                <option value="">Todos los tipos</option>
                @foreach($tipos as $codigo => $nombre)
                <option value="{{ $codigo }}">{{ $nombre }}</option>
                @endforeach
            </select>

            {{-- Estado Hacienda --}}
            <select wire:model.live="filtro_estado"
                    style="font-size:12px;padding:8px 12px;background:var(--bg);border:none;
                           border-radius:50px;font-family:'Ubuntu',sans-serif;outline:none;">
                <option value="">Todos los estados</option>
                @foreach($estados_hacienda as $codigo => $nombre)
                <option value="{{ $codigo }}">{{ $nombre }}</option>
                @endforeach
            </select>

            {{-- Período --}}
            <input type="date" wire:model.live="filtro_desde"
                   style="font-size:12px;padding:7px 10px;background:var(--bg);border:none;
                          border-radius:50px;font-family:'Ubuntu',sans-serif;outline:none;" />
            <span style="font-size:12px;color:var(--label2);">—</span>
            <input type="date" wire:model.live="filtro_hasta"
                   style="font-size:12px;padding:7px 10px;background:var(--bg);border:none;
                          border-radius:50px;font-family:'Ubuntu',sans-serif;outline:none;" />

            {{-- Reset --}}
            @if($filtro_tipo || $filtro_estado || $filtro_busqueda)
            <button wire:click="$set('filtro_tipo','')|$set('filtro_estado','')|$set('filtro_busqueda','')"
                    style="font-size:12px;color:var(--label2);background:none;border:none;cursor:pointer;">
                ✕ Limpiar
            </button>
            @endif
        </div>
    </div>

    {{-- ── TABLA ────────────────────────────────────── --}}
    <div class="inset-card">
        <div style="overflow-x:auto;">
            <table class="ios-table" style="min-width:900px;">
                <thead>
                    <tr>
                        <th>Tipo</th>
                        <th>Número</th>
                        <th>Cliente</th>
                        <th>Fecha</th>
                        <th style="text-align:right;">Total</th>
                        <th>Pago</th>
                        <th>Estado Hacienda</th>
                        <th>Cobro</th>
                        <th style="text-align:center;">Acciones</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($facturas as $factura)
                    <tr wire:key="doc-{{ $factura->id }}">
                        {{-- Tipo --}}
                        <td>
                            @if($factura->es_proforma)
                                <span class="chip ch-purple">📋 PRO</span>
                            @else
                                <span class="chip ch-blue">
                                    {{ match($factura->tipo_documento) {
                                        '01' => '📄 FE',
                                        '02' => '📈 ND',
                                        '03' => '🔄 NC',
                                        '04' => '🎫 TIQ',
                                        '05' => '🛒 FEC',
                                        '99' => '🧾 REP',
                                        default => $factura->tipo_documento
                                    } }}
                                </span>
                            @endif
                        </td>

                        {{-- Número --}}
                        <td>
                            <a href="{{ route('documentos.detalle', $factura->id) }}" wire:navigate
                               style="font-family:'Courier New',monospace;font-size:11px;
                                      color:var(--blue);text-decoration:none;font-weight:600;">
                                {{ $factura->consecutivo }}
                            </a>
                        </td>

                        {{-- Cliente --}}
                        <td>
                            <div class="td-bold" style="font-size:12px;">
                                {{ $factura->receptor_nombre ?: '—' }}
                            </div>
                            @if($factura->receptor_cedula)
                            <div style="font-size:10px;color:var(--label2);">
                                {{ $factura->receptor_cedula }}
                            </div>
                            @endif
                        </td>

                        {{-- Fecha --}}
                        <td style="font-size:11px;color:var(--label2);white-space:nowrap;">
                            {{ $factura->created_at->format('d M Y') }}<br>
                            <span style="font-size:10px;">{{ $factura->created_at->format('H:i') }}</span>
                        </td>

                        {{-- Total --}}
                        <td style="text-align:right;font-weight:700;font-family:'Courier New',monospace;
                                   font-size:12px;white-space:nowrap;">
                            ₡{{ number_format($factura->total_comprobante, 2) }}
                        </td>

                        {{-- Medio de pago --}}
                        <td>
                            @php
                                $medios = is_array($factura->medio_pago)
                                    ? $factura->medio_pago
                                    : json_decode($factura->medio_pago ?? '[]', true);
                                $labels = ['01'=>'Efectivo','02'=>'T.Débito','03'=>'T.Crédito',
                                           '04'=>'Transfer.','05'=>'SINPE','99'=>'Otro'];
                            @endphp
                            @foreach($medios as $medio)
                            <span class="chip ch-gray" style="font-size:9px;margin:1px;">
                                {{ $labels[$medio] ?? $medio }}
                            </span>
                            @endforeach
                        </td>

                        {{-- Estado Hacienda --}}
                        <td>
                            @if($factura->es_proforma)
                                <span class="chip ch-purple">📋 Proforma</span>
                            @else
                                <span class="chip {{ match($factura->estado_hacienda) {
                                    'aceptado'    => 'ch-green',
                                    'rechazado'   => 'ch-red',
                                    'contingencia'=> 'ch-orange',
                                    'enviado','cola' => 'ch-blue',
                                    default       => 'ch-gray',
                                } }}">
                                    {{ match($factura->estado_hacienda) {
                                        'aceptado'    => '✓ Aceptada',
                                        'rechazado'   => '✕ Rechazada',
                                        'contingencia'=> '⚠️ Contingencia',
                                        'enviado'     => '⏳ Enviada',
                                        'cola'        => '📤 En cola',
                                        'borrador'    => '📝 Borrador',
                                        default       => $factura->estado_hacienda,
                                    } }}
                                </span>
                                {{-- Mensaje de error si fue rechazada --}}
                                @if($factura->estado_hacienda === 'rechazado' && $factura->mensaje_hacienda)
                                <div style="font-size:9px;color:var(--red);margin-top:3px;max-width:180px;
                                            overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"
                                     title="{{ $factura->mensaje_hacienda }}">
                                    {{ $factura->mensaje_hacienda }}
                                </div>
                                @endif
                            @endif
                        </td>

                        {{-- Estado cobro --}}
                        <td>
                            @if($factura->condicion_venta === '02')
                            <span class="chip {{ match($factura->estado_cobro) {
                                'pagado'   => 'ch-green',
                                'vencido'  => 'ch-red',
                                'parcial'  => 'ch-blue',
                                'pendiente'=> 'ch-orange',
                                default    => 'ch-gray',
                            } }}">
                                {{ match($factura->estado_cobro) {
                                    'pagado'   => '✓ Pagada',
                                    'vencido'  => '🔴 Vencida',
                                    'parcial'  => '◑ Parcial',
                                    'pendiente'=> '⏳ Pendiente',
                                    default    => 'Contado',
                                } }}
                            </span>
                            @else
                                <span style="font-size:11px;color:var(--label2);">Contado</span>
                            @endif
                        </td>

                        {{-- Acciones --}}
                        <td>
                            <div style="display:flex;gap:6px;justify-content:center;flex-wrap:wrap;">

                                {{-- Ver detalle --}}
                                <a href="{{ route('documentos.detalle', $factura->id) }}" wire:navigate
                                   title="Ver detalle">
                                    <button class="btn-plain" style="font-size:11px;padding:5px 10px;">
                                        👁
                                    </button>
                                </a>

                                {{-- Imprimir --}}
                                @if($factura->estaAceptada() || $factura->es_proforma)
                                <button wire:click="seleccionarFormato({{ $factura->id }})"
                                        class="btn-plain" style="font-size:11px;padding:5px 10px;"
                                        title="Imprimir / Descargar PDF">
                                    🖨️
                                </button>
                                @endif

                                {{-- Descargar XML --}}
                                @if($factura->estaAceptada())
                                <button wire:click="descargarXml({{ $factura->id }})"
                                        class="btn-plain" style="font-size:11px;padding:5px 10px;"
                                        title="Descargar XML firmado">
                                    📝
                                </button>
                                @endif

                                {{-- Reenviar correo --}}
                                @if($factura->estaAceptada() && $factura->receptor_email)
                                <button wire:click="reenviarCorreo({{ $factura->id }})"
                                        class="btn-plain" style="font-size:11px;padding:5px 10px;"
                                        title="Reenviar por correo">
                                    ✉️
                                </button>
                                @endif

                                {{-- Reintentar --}}
                                @if(in_array($factura->estado_hacienda, ['rechazado','contingencia']))
                                <button wire:click="reintentar({{ $factura->id }})"
                                        class="btn-blue" style="font-size:11px;padding:5px 10px;"
                                        title="Reintentar envío a Hacienda">
                                    🔄
                                </button>
                                @endif

                                {{-- Nota de crédito --}}
                                @if($factura->estaAceptada() && $factura->tipo_documento === '01')
                                <button wire:click="emitirNotaCredito({{ $factura->id }})"
                                        class="btn-plain" style="font-size:11px;padding:5px 10px;"
                                        title="Emitir nota de crédito">
                                    🔄 NC
                                </button>
                                @endif

                                {{-- Convertir proforma --}}
                                @if($factura->es_proforma)
                                <button wire:click="convertirProforma({{ $factura->id }})"
                                        class="btn-blue" style="font-size:11px;padding:5px 10px;">
                                    ✓ Facturar
                                </button>
                                @endif
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="9" style="text-align:center;padding:40px;color:var(--label2);">
                            No hay documentos con los filtros seleccionados
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        {{-- Paginación --}}
        @if($facturas->hasPages())
        <div style="padding:14px 18px;border-top:.5px solid var(--separator);">
            {{ $facturas->links() }}
        </div>
        @endif
    </div>

    {{-- ── MODAL SELECTOR DE FORMATO ───────────────── --}}
    @if($mostrar_formato)
    <div style="position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:100;
                display:flex;align-items:center;justify-content:center;"
         wire:click.self="$set('mostrar_formato', false)">
        <div style="background:#fff;border-radius:22px;padding:28px;width:360px;
                    box-shadow:0 20px 60px rgba(0,0,0,.2);">

            <div style="font-size:17px;font-weight:700;margin-bottom:6px;">🖨️ Formato de impresión</div>
            <div style="font-size:13px;color:var(--label2);margin-bottom:20px;">
                Elige cómo descargar el comprobante
            </div>

            <div style="display:flex;flex-direction:column;gap:10px;margin-bottom:22px;">
                <label style="display:flex;align-items:center;gap:12px;padding:14px 16px;
                              border-radius:14px;cursor:pointer;border:2px solid;
                              {{ $formato_elegido === 'carta' ? 'border-color:var(--blue);background:rgba(0,122,255,.05);' : 'border-color:var(--separator);' }}">
                    <input type="radio" wire:model.live="formato_elegido" value="carta"
                           style="accent-color:var(--blue);width:18px;height:18px;" />
                    <div>
                        <div style="font-size:14px;font-weight:600;">📄 PDF tamaño carta</div>
                        <div style="font-size:11px;color:var(--label2);">
                            Formato A4 · con logo, colores y firma
                        </div>
                    </div>
                </label>

                <label style="display:flex;align-items:center;gap:12px;padding:14px 16px;
                              border-radius:14px;cursor:pointer;border:2px solid;
                              {{ $formato_elegido === 'ticket' ? 'border-color:var(--blue);background:rgba(0,122,255,.05);' : 'border-color:var(--separator);' }}">
                    <input type="radio" wire:model.live="formato_elegido" value="ticket"
                           style="accent-color:var(--blue);width:18px;height:18px;" />
                    <div>
                        <div style="font-size:14px;font-weight:600;">🧾 Ticket térmico 80mm</div>
                        <div style="font-size:11px;color:var(--label2);">
                            Impresoras POS · formato compacto
                        </div>
                    </div>
                </label>
            </div>

            <div style="display:flex;gap:10px;">
                <button wire:click="$set('mostrar_formato', false)"
                        class="btn-plain" style="flex:1;justify-content:center;">
                    Cancelar
                </button>
                <button wire:click="descargarPdf"
                        class="btn-blue" style="flex:1;justify-content:center;">
                    ⬇️ Descargar
                </button>
            </div>
        </div>
    </div>
    @endif

</div>