<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>{{ $comprobante->tipo_documento_nombre }} {{ $comprobante->numero_completo }}</title>
@php
    $moneda = $empresaGlobal->moneda ?? '$';
    $esRetencion = $comprobante->tipo_documento === '07';
@endphp
<style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body { font-family: 'Helvetica', 'Arial', sans-serif; padding: 20px; background: #f5f5f5; font-size: 11px; color: #1e293b; }
    .a4 { width: 210mm; max-width: 794px; margin: 0 auto; background: white; padding: 15mm; box-shadow: 0 4px 16px rgba(0,0,0,0.1); }

    .header { display: table; width: 100%; margin-bottom: 16px; }
    .header > div { display: table-cell; vertical-align: top; }
    .col-emisor { width: 55%; padding-right: 12px; }
    .col-comprobante { width: 45%; }
    .logo { font-size: 22px; font-weight: bold; color: #059669; }
    .razon-social { font-size: 13px; font-weight: bold; margin-top: 4px; }
    .info-emisor { font-size: 9px; color: #475569; margin-top: 4px; line-height: 1.5; }

    .box-comprobante { border: 1px solid #94a3b8; border-radius: 6px; padding: 10px; }
    .box-comprobante .ruc { font-size: 11px; font-weight: bold; }
    .box-comprobante .tipo { font-size: 13px; font-weight: bold; margin: 6px 0; color: #059669; }
    .box-comprobante .numero { font-size: 13px; font-weight: bold; font-family: 'Courier New', monospace; }
    .box-comprobante .clave { font-size: 7px; word-break: break-all; font-family: 'Courier New', monospace; margin-top: 6px; color: #475569; }
    .box-comprobante .meta { font-size: 8px; margin-top: 6px; line-height: 1.5; }
    .box-comprobante .meta strong { display: inline-block; width: 90px; }

    .section-title { background: #059669; color: white; padding: 4px 8px; font-size: 10px; font-weight: bold; margin: 12px 0 4px; border-radius: 3px; }
    .datos { font-size: 10px; line-height: 1.7; }
    .datos strong { display: inline-block; width: 130px; }

    table.items { width: 100%; border-collapse: collapse; margin: 8px 0; }
    table.items th { background: #f1f5f9; padding: 6px 4px; font-size: 8px; font-weight: bold; text-align: left; border-bottom: 2px solid #cbd5e1; text-transform: uppercase; color: #475569; }
    table.items td { padding: 6px 4px; border-bottom: 1px solid #e2e8f0; font-size: 9px; }
    table.items td.num { text-align: right; }
    table.items .codigo { color: #94a3b8; font-size: 7px; }

    .totales { float: right; width: 260px; margin-top: 8px; }
    .totales table { width: 100%; }
    .totales td { padding: 4px 8px; font-size: 10px; }
    .totales tr.total td { font-size: 13px; font-weight: bold; background: #059669; color: white; }

    .estado-banner { clear: both; background: #ecfdf5; border-left: 4px solid #10b981; padding: 8px 12px; margin-top: 20px; font-size: 9px; }
    .estado-banner.malo { background: #fef2f2; border-left-color: #ef4444; }
    .estado-banner.pend { background: #fefce8; border-left-color: #eab308; }

    .actions { margin-bottom: 16px; text-align: center; }
    .actions button { padding: 10px 18px; border: none; border-radius: 6px; cursor: pointer; font-weight: bold; margin: 0 4px; font-size: 13px; }
    .btn-print { background: #059669; color: white; }
    .btn-back { background: #64748b; color: white; text-decoration: none; padding: 10px 18px; display: inline-block; border-radius: 6px; }

    @media print {
        body { background: white; padding: 0; }
        .a4 { box-shadow: none; padding: 12mm; width: 100%; }
        .actions { display: none; }
    }
</style>
</head>
<body>
<div class="actions">
    <button class="btn-print" onclick="window.print()">Imprimir</button>
    <a class="btn-back" href="{{ url()->previous() }}">Volver</a>
</div>

<div class="a4">
    <!-- Header -->
    <div class="header">
        <div class="col-emisor">
            @if($empresaGlobal && $empresaGlobal->logo_url)
                <img src="{{ $empresaGlobal->logo_url }}" style="max-height: 56px; max-width: 150px; margin-bottom: 6px;">
            @else
                <div class="logo">{{ $empresaGlobal->nombre_comercial ?? $comprobante->emisor_razon_social }}</div>
            @endif
            <div class="razon-social">{{ $comprobante->emisor_razon_social }}</div>
            <div class="info-emisor">
                <strong>Dir. Matriz:</strong> {{ $comprobante->emisor_dir_matriz }}<br>
                @if($comprobante->emisor_dir_establecimiento)
                    <strong>Dir. Establecimiento:</strong> {{ $comprobante->emisor_dir_establecimiento }}<br>
                @endif
                @if($comprobante->obligado_contabilidad)
                    Obligado a llevar contabilidad: {{ $comprobante->obligado_contabilidad }}<br>
                @endif
                @if($comprobante->contribuyente_especial)
                    Contribuyente Especial Nro: {{ $comprobante->contribuyente_especial }}
                @endif
            </div>
        </div>
        <div class="col-comprobante">
            <div class="box-comprobante">
                <div class="ruc">R.U.C.: {{ $comprobante->emisor_ruc }}</div>
                <div class="tipo">{{ strtoupper($comprobante->tipo_documento_nombre) }}</div>
                <div class="numero">No. {{ $comprobante->numero_completo }}</div>
                <div class="meta">
                    <strong>NÚMERO DE AUTORIZACIÓN</strong>
                    <div class="clave">{{ $comprobante->numero_autorizacion ?: $comprobante->clave_acceso }}</div>
                    <strong>FECHA Y HORA</strong> {{ $comprobante->fecha_autorizacion?->format('d/m/Y H:i:s') ?? 'Pendiente de autorización' }}<br>
                    <strong>AMBIENTE</strong> {{ strtoupper($comprobante->ambiente_nombre) }}<br>
                    <strong>EMISIÓN</strong> NORMAL<br>
                    <strong>CLAVE DE ACCESO</strong>
                    <div class="clave">{{ $comprobante->clave_acceso }}</div>
                </div>
            </div>
        </div>
    </div>

    <!-- Datos del receptor / sujeto -->
    <div class="section-title">{{ $esRetencion ? 'SUJETO RETENIDO' : 'INFORMACIÓN DEL CLIENTE' }}</div>
    <div class="datos">
        <strong>Razón Social / Nombres:</strong> {{ $comprobante->receptor_razon_social }}<br>
        <strong>Identificación:</strong> {{ $comprobante->receptor_identificacion }} ({{ $comprobante->receptor_tipo_label }})<br>
        <strong>Fecha de emisión:</strong> {{ $comprobante->fecha_emision->format('d/m/Y') }}
        @if($comprobante->receptor_direccion)
            <br><strong>Dirección:</strong> {{ $comprobante->receptor_direccion }}
        @endif
    </div>

    @if($comprobante->num_doc_modificado)
    <div class="datos" style="margin-top:6px;">
        <strong>Comprobante que modifica:</strong> Factura {{ $comprobante->num_doc_modificado }} —
        {{ $comprobante->motivo }}
    </div>
    @endif
    @if($esRetencion)
    <div class="datos" style="margin-top:6px;">
        <strong>Período fiscal:</strong> {{ $comprobante->periodo_fiscal }}
    </div>
    @endif

    @if($esRetencion)
        <!-- Tabla de retenciones -->
        <div class="section-title">IMPUESTOS RETENIDOS</div>
        <table class="items">
            <thead>
                <tr>
                    <th>Comprobante</th>
                    <th>Impuesto</th>
                    <th class="num">Base imponible</th>
                    <th class="num">% Retención</th>
                    <th class="num">Valor retenido</th>
                </tr>
            </thead>
            <tbody>
                @foreach($comprobante->detalles as $d)
                <tr>
                    <td>{{ $comprobante->doc_sustento_numero }}</td>
                    <td>{{ \App\Models\ComprobanteDetalle::CODIGOS_RETENCION[$d->ret_codigo] ?? $d->descripcion }}</td>
                    <td class="num">{{ number_format($d->ret_base_imponible, 2) }}</td>
                    <td class="num">{{ number_format($d->ret_porcentaje, 2) }}%</td>
                    <td class="num"><strong>{{ number_format($d->ret_valor_retenido, 2) }}</strong></td>
                </tr>
                @endforeach
            </tbody>
        </table>
        <div class="totales">
            <table>
                <tr class="total"><td>VALOR TOTAL RETENIDO:</td><td style="text-align:right;">{{ $moneda }} {{ number_format($comprobante->total_retenido, 2) }}</td></tr>
            </table>
        </div>
    @else
        <!-- Detalle de productos -->
        <div class="section-title">DETALLE</div>
        <table class="items">
            <thead>
                <tr>
                    <th style="width: 10%;">Cant.</th>
                    <th>Descripción</th>
                    <th style="width: 16%;" class="num">P. Unitario</th>
                    <th style="width: 12%;" class="num">Descuento</th>
                    <th style="width: 16%;" class="num">Precio Total</th>
                </tr>
            </thead>
            <tbody>
                @foreach($comprobante->detalles as $d)
                <tr>
                    <td class="num">{{ number_format($d->cantidad, 2) }}</td>
                    <td>
                        {{ $d->descripcion }}
                        @if($d->codigo_principal)<div class="codigo">Cód: {{ $d->codigo_principal }}</div>@endif
                    </td>
                    <td class="num">{{ number_format($d->precio_unitario, 4) }}</td>
                    <td class="num">{{ number_format($d->descuento, 2) }}</td>
                    <td class="num"><strong>{{ number_format($d->precio_total_sin_impuesto, 2) }}</strong></td>
                </tr>
                @endforeach
            </tbody>
        </table>

        <!-- Totales -->
        <div class="totales">
            <table>
                <tr><td>Subtotal sin impuestos:</td><td style="text-align: right;">{{ $moneda }} {{ number_format($comprobante->total_sin_impuestos, 2) }}</td></tr>
                @if($comprobante->total_descuento > 0)
                <tr><td>Descuento:</td><td style="text-align: right; color:#dc2626;">-{{ $moneda }} {{ number_format($comprobante->total_descuento, 2) }}</td></tr>
                @endif
                <tr><td>IVA:</td><td style="text-align: right;">{{ $moneda }} {{ number_format($comprobante->total_iva, 2) }}</td></tr>
                @if($comprobante->propina > 0)
                <tr><td>Propina:</td><td style="text-align: right;">{{ $moneda }} {{ number_format($comprobante->propina, 2) }}</td></tr>
                @endif
                <tr class="total"><td>VALOR TOTAL:</td><td style="text-align: right;">{{ $moneda }} {{ number_format($comprobante->importe_total, 2) }}</td></tr>
            </table>
        </div>
    @endif

    <!-- Estado SRI -->
    @if($comprobante->estado_sri === 'AUTORIZADO')
        <div class="estado-banner">
            <strong>COMPROBANTE AUTORIZADO POR EL SRI</strong><br>
            Documento generado electrónicamente. Consulte su validez en www.sri.gob.ec
        </div>
    @elseif(in_array($comprobante->estado_sri, ['DEVUELTA','NO_AUTORIZADO','EXCEPCION']))
        <div class="estado-banner malo">
            <strong>COMPROBANTE NO AUTORIZADO ({{ str_replace('_',' ',$comprobante->estado_sri) }})</strong>
        </div>
    @else
        <div class="estado-banner pend">
            <strong>COMPROBANTE PENDIENTE DE AUTORIZACIÓN POR EL SRI</strong>
        </div>
    @endif
</div>

<script>setTimeout(() => window.print(), 800);</script>
</body>
</html>
