{{-- resources/views/livewire/documentos/detalle.blade.php --}}
<div>
    {{-- ── HEADER ──────────────────────────────────── --}}
    <div style="display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:20px;">
        <div>
            <div style="display:flex;align-items:center;gap:12px;margin-bottom:4px;">
                <a href="{{ route('documentos') }}" wire:navigate
                   style="font-size:13px;color:var(--blue);text-decoration:none;">
                    ← Documentos
                </a>
                <span style="color:var(--label3);">/</span>
                <span style="font-size:13px;color:var(--label2);">{{ $factura->consecutivo }}</span>
            </div>
            <div class="page-title">
                {{ $factura->descripcionTipo() }}
                @if($factura->es_proforma) <span style="font-size:16px;">· Proforma</span> @endif
            </div>
        </div>
        <div style="display:flex;gap:8px;flex-wrap:wrap;">
            @if($factura->estaAceptada() || $factura->es_proforma)
            <button wire:click="descargarPdf('carta')" class="btn-plain" style="font-size:12px;padding:8px 14px;">
                📄 PDF Carta
            </button>
            <button wire:click="descargarPdf('ticket')" class="btn-plain" style="font-size:12px;padding:8px 14px;">
                🧾 Ticket
            </button>
            @endif
            @if($factura->estaAceptada())
            <button wire:click="descargarXml" class="btn-plain" style="font-size:12px;padding:8px 14px;">
                📝 XML
            </button>
            @if($factura->receptor_email)
            <button wire:click="reenviarCorreo" class="btn-plain" style="font-size:12px;padding:8px 14px;">
                ✉️ Reenviar
            </button>
            @endif
            @endif
            @if(in_array($factura->estado_hacienda, ['rechazado','contingencia']))
            <button wire:click="reintentar" class="btn-blue" style="font-size:12px;padding:8px 14px;">
                🔄 Reintentar
            </button>
            @endif
        </div>
    </div>

    @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

    {{-- ── ESTADO HACIENDA ──────────────────────────── --}}
    <div style="background:#fff;border-radius:16px;padding:16px 20px;box-shadow:var(--shadow);
                margin-bottom:18px;display:flex;align-items:center;gap:14px;">
        <span class="chip {{ match($factura->estado_hacienda) {
            'aceptado'    => 'ch-green',
            'rechazado'   => 'ch-red',
            'contingencia'=> 'ch-orange',
            'enviado','cola' => 'ch-blue',
            default       => 'ch-gray',
        } }}" style="font-size:13px;padding:6px 14px;">
            {{ $factura->descripcionEstado() }}
        </span>
        @if($factura->clave_hacienda)
        <div style="font-family:'Courier New',monospace;font-size:11px;color:var(--label2);
                    word-break:break-all;">
            {{ $factura->clave_hacienda }}
        </div>
        @endif
        @if($factura->fecha_hacienda)
        <div style="font-size:11px;color:var(--label2);margin-left:auto;white-space:nowrap;">
            {{ $factura->fecha_hacienda->format('d/m/Y H:i') }}
        </div>
        @endif
    </div>

    @if($factura->mensaje_hacienda && $factura->estaRechazada())
    <div class="alert alert-red" style="margin-bottom:16px;">
        <span style="flex-shrink:0;">❌</span>
        <span>{{ $factura->mensaje_hacienda }}</span>
    </div>
    @endif

    {{-- ── DATOS PRINCIPALES ────────────────────────── --}}
    <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:18px;">

        {{-- Emisor y receptor --}}
        <div class="inset-card">
            <div style="padding:16px 20px 18px;">
                <div class="group-label" style="margin-bottom:12px;">Datos del comprobante</div>
                @foreach([
                    ['Tipo', $factura->descripcionTipo()],
                    ['Consecutivo', $factura->consecutivo],
                    ['Fecha emisión', $factura->created_at->format('d/m/Y H:i')],
                    ['Condición', $factura->condicion_venta === '02' ? "Crédito {$factura->plazo_credito_dias} días" : 'Contado'],
                ] as [$lbl, $val])
                <div style="display:flex;justify-content:space-between;padding:6px 0;
                            border-bottom:.5px solid var(--separator);font-size:13px;">
                    <span style="color:var(--label2);">{{ $lbl }}</span>
                    <span style="font-weight:500;">{{ $val }}</span>
                </div>
                @endforeach

                @php
                    $medios_arr = is_array($factura->medio_pago)
                        ? $factura->medio_pago
                        : json_decode($factura->medio_pago ?? '[]', true);
                    $medios_str = implode(', ', array_map(fn($m) => $medios_pago[$m] ?? $m, $medios_arr));
                @endphp
                <div style="display:flex;justify-content:space-between;padding:6px 0;font-size:13px;">
                    <span style="color:var(--label2);">Medio de pago</span>
                    <span style="font-weight:500;">{{ $medios_str }}</span>
                </div>
            </div>
        </div>

        {{-- Receptor --}}
        <div class="inset-card">
            <div style="padding:16px 20px 18px;">
                <div class="group-label" style="margin-bottom:12px;">
                    {{ $factura->es_proforma ? 'Proforma para' : 'Facturado a' }}
                </div>
                @if($factura->receptor_nombre)
                    @foreach([
                        ['Nombre', $factura->receptor_nombre],
                        ['Cédula', ($factura->receptor_cedula_tipo ?? '') . '-' . ($factura->receptor_cedula ?? '')],
                        ['Correo', $factura->receptor_email ?: '—'],
                        ['Actividad', $factura->receptor_actividad ?: '—'],
                    ] as [$lbl, $val])
                    <div style="display:flex;justify-content:space-between;padding:6px 0;
                                border-bottom:.5px solid var(--separator);font-size:13px;">
                        <span style="color:var(--label2);">{{ $lbl }}</span>
                        <span style="font-weight:500;text-align:right;max-width:60%;">{{ $val }}</span>
                    </div>
                    @endforeach
                @else
                    <div style="font-size:13px;color:var(--label2);padding-top:8px;">
                        Consumidor final (Tiquete)
                    </div>
                @endif
            </div>
        </div>
    </div>

    {{-- ── LÍNEAS DE DETALLE ────────────────────────── --}}
    <div class="group-label">Detalle del comprobante</div>
    <div class="inset-card" style="margin-bottom:18px;">
        <div style="overflow-x:auto;">
            <table class="ios-table">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Descripción · CABYS</th>
                        <th style="text-align:right;">Cantidad</th>
                        <th style="text-align:right;">P. Unitario</th>
                        <th style="text-align:right;">Descuento</th>
                        <th style="text-align:center;">IVA</th>
                        <th style="text-align:right;">Total línea</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($lineas as $linea)
                    <tr wire:key="ld-{{ $linea->id }}">
                        <td style="font-size:11px;color:var(--label2);">{{ $linea->numero_linea }}</td>
                        <td>
                            <div style="font-size:12px;font-weight:500;">{{ $linea->descripcion }}</div>
                            <div class="td-mono" style="font-size:10px;margin-top:2px;">
                                {{ $linea->cabys_codigo }}
                            </div>
                            @if($linea->registro_sanitario)
                            <div style="font-size:10px;color:var(--blue);">
                                💊 {{ $linea->registro_sanitario }}
                            </div>
                            @endif
                            @if($linea->tieneExoneracion())
                            <div style="font-size:10px;color:var(--orange);">
                                Exoneración {{ $linea->exoneracion_porcentaje }}%
                            </div>
                            @endif
                        </td>
                        <td style="text-align:right;font-size:12px;">
                            {{ number_format($linea->cantidad, 2) }}
                            <span style="font-size:10px;color:var(--label2);">{{ $linea->unidad_medida }}</span>
                        </td>
                        <td style="text-align:right;font-family:'Courier New',monospace;font-size:12px;">
                            ₡{{ number_format($linea->precio_unitario, 2) }}
                        </td>
                        <td style="text-align:right;font-size:12px;color:var(--red);">
                            {{ $linea->descuento_monto > 0 ? '-₡'.number_format($linea->descuento_monto, 2) : '—' }}
                        </td>
                        <td style="text-align:center;">
                            <span class="chip ch-gray">{{ $linea->tarifa_iva }}%</span>
                            @if($linea->devolucion_iva_aplica)
                            <div style="font-size:9px;color:var(--green2);margin-top:2px;">💳 Dev.</div>
                            @endif
                        </td>
                        <td style="text-align:right;font-weight:700;
                                   font-family:'Courier New',monospace;font-size:12px;">
                            ₡{{ number_format($linea->total_linea, 2) }}
                            <div style="font-size:10px;font-weight:400;color:var(--label2);">
                                IVA: ₡{{ number_format($linea->monto_iva, 2) }}
                            </div>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        {{-- Totales --}}
        <div style="display:flex;justify-content:flex-end;padding:16px 20px;
                    border-top:.5px solid var(--separator);">
            <div style="min-width:280px;">
                @foreach([
                    ['Base gravada 13%', $factura->base_gravada_13, $factura->base_gravada_13 > 0],
                    ['IVA 13%', $factura->iva_13, $factura->iva_13 > 0],
                    ['Base gravada 4% · salud', $factura->base_gravada_4, $factura->base_gravada_4 > 0],
                    ['IVA 4% · salud', $factura->iva_4, $factura->iva_4 > 0],
                    ['Base gravada 2% · medic.', $factura->base_gravada_2, $factura->base_gravada_2 > 0],
                    ['IVA 2%', $factura->iva_2, $factura->iva_2 > 0],
                    ['Descuentos', -$factura->descuento_total, $factura->descuento_total > 0],
                ] as [$lbl, $val, $mostrar])
                @if($mostrar)
                <div class="t-row">
                    <span class="t-lbl">{{ $lbl }}</span>
                    <span class="t-val" style="{{ $val < 0 ? 'color:var(--red);' : '' }}">
                        {{ $val < 0 ? '-' : '' }}₡{{ number_format(abs($val), 2) }}
                    </span>
                </div>
                @endif
                @endforeach

                @if($factura->devolucion_iva_aplica && $factura->monto_devolucion_iva > 0)
                <div class="t-row" style="color:var(--green2);">
                    <span class="t-lbl">💳 Dev. IVA 4% (tarjeta)</span>
                    <span class="t-val">−₡{{ number_format($factura->monto_devolucion_iva, 2) }}</span>
                </div>
                @endif

                <div class="t-row grand">
                    <span>Total comprobante</span>
                    <span class="t-val">₡{{ number_format($factura->total_comprobante, 2) }}</span>
                </div>
            </div>
        </div>
    </div>

    {{-- ── CXC ASOCIADA ─────────────────────────────── --}}
    @if($factura->cuentaPorCobrar)
    @php $cxc = $factura->cuentaPorCobrar; @endphp
    <div class="group-label">Cuenta por cobrar</div>
    <div class="inset-card" style="margin-bottom:18px;">
        <div style="padding:16px 20px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;">
            <div>
                <div style="font-size:11px;color:var(--label2);text-transform:uppercase;letter-spacing:.4px;">Estado cobro</div>
                <span class="chip {{ match($cxc->estado) {
                    'pagado'=>'ch-green','vencido'=>'ch-red',
                    'parcial'=>'ch-blue','pendiente'=>'ch-orange',default=>'ch-gray'
                } }}" style="margin-top:4px;">
                    {{ ucfirst($cxc->estado) }}
                </span>
            </div>
            <div>
                <div style="font-size:11px;color:var(--label2);text-transform:uppercase;letter-spacing:.4px;">Pendiente</div>
                <div style="font-size:18px;font-weight:700;color:var(--orange);">
                    ₡{{ number_format($cxc->monto_pendiente, 2) }}
                </div>
            </div>
            <div>
                <div style="font-size:11px;color:var(--label2);text-transform:uppercase;letter-spacing:.4px;">Vencimiento</div>
                <div style="font-size:13px;font-weight:600;">
                    {{ $cxc->fecha_vencimiento->format('d/m/Y') }}
                </div>
            </div>
            @if($factura->rep_requerido)
            <div>
                <div style="font-size:11px;color:var(--label2);text-transform:uppercase;letter-spacing:.4px;">REP</div>
                <span class="chip {{ $factura->rep_generado ? 'ch-green' : 'ch-orange' }}">
                    {{ $factura->rep_generado ? '✓ Generado' : '⏳ Pendiente' }}
                </span>
            </div>
            @endif
            <div style="margin-left:auto;">
                <a href="{{ route('cxc') }}" wire:navigate>
                    <button class="btn-plain" style="font-size:12px;padding:8px 14px;">
                        💰 Ver CxC →
                    </button>
                </a>
            </div>
        </div>
    </div>
    @endif

    {{-- ── REFERENCIA ───────────────────────────────── --}}
    @if($factura->referencia_clave)
    <div class="group-label">Referencia</div>
    <div class="inset-card" style="margin-bottom:18px;">
        <div style="padding:14px 20px;font-size:13px;">
            <div style="color:var(--label2);margin-bottom:4px;">Documento referenciado</div>
            <div class="td-mono">{{ $factura->referencia_clave }}</div>
            @if($factura->referencia_razon)
            <div style="margin-top:6px;color:var(--label2);">{{ $factura->referencia_razon }}</div>
            @endif
        </div>
    </div>
    @endif

    {{-- ── NOTAS ────────────────────────────────────── --}}
    @if($factura->notas)
    <div class="group-label">Notas</div>
    <div class="inset-card" style="margin-bottom:18px;">
        <div style="padding:14px 20px;font-size:13px;color:var(--label2);">
            {{ $factura->notas }}
        </div>
    </div>
    @endif

</div>