<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Reporte COVE</title>
    <style>
        /* Resets básicos para simular una hoja impresa */
        body {
            background-color: #525659; /* Fondo oscuro típico de visores PDF */
            margin: 0;
            padding: 20px 0;
        }

        /* Contenedor principal que simula la hoja tamaño Carta (8.5 x 11 pulgadas) */
        .hoja-carta {
            width: 8.5in;
            min-height: 11in;
            margin: 0 auto;
            background-color: white;
            padding: 0.3in 0.4in; /* Márgenes de impresión estándar */
            box-sizing: border-box;
            box-shadow: 0 0 10px rgba(0,0,0,0.5);
        }

        /* Tipografías y tamaños legacy exactos de Clarion */
        .titulo-seccion {
            font-family: Arial, Helvetica, sans-serif;
            font-size: 13pt;
            font-weight: normal;
            color: black;
            margin-top: 10px;
            margin-bottom: 2px;
        }

        .titulo-principal {
            font-family: Arial, Helvetica, sans-serif;
            font-size: 13pt;
            font-weight: normal;
            color: black;
            margin-bottom: 2px;
        }

        /* Tablas rígidas para simular comandos BOX y LINE */
        .cove-table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 2px; /* Pequeño gap entre cajas de Clarion */
            table-layout: fixed; /* Fuerza a respetar estrictamente los anchos del colgroup */
        }

        .cove-table th, .cove-table td {
            border: 1px solid black;
            text-align: left;
            vertical-align: top; /* Alineación arriba a la izquierda como en Clarion */
            padding-top: 1px;
            padding-left: 3px;
            padding-right: 3px;
            padding-bottom: 1px;
            box-sizing: border-box;
            overflow: hidden;
        }

        .cove-table th {
            /* FONT('Arial',10,,FONT:bold) y FILL(COLOR:Silver) */
            background-color: #C0C0C0 !important;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 10pt;
            font-weight: bold;
            color: black;
            height: 18px;
            -webkit-print-color-adjust: exact;
            print-color-adjust: exact;
        }

        .cove-table td {
            /* FONT('Times New Roman',11) */
            font-family: "Times New Roman", Times, serif;
            font-size: 11pt;
            color: black;
            height: 20px; /* Altura mínima de la banda de datos */
        }

        /* Casos especiales de altura */
        .td-observaciones {
            min-height: 28pt;
            height: 28pt;
        }

        /* Imagen fluida dentro de sus contenedores */
        .img-header-footer {
            width: 100%;
            display: block;
        }

        .subtitulo {
            font-family: Arial, Helvetica, sans-serif;
            font-size: 8pt;
            font-weight: normal;
            color: #555;
            margin-top: 0;
            margin-bottom: 3px;
            letter-spacing: 0.3px;
        }

        /* Badge con el número de COVE (ej. COVE24782HO65) */
        .cove-badge {
            font-family: Arial, Helvetica, sans-serif;
            font-size: 11pt;
            font-weight: bold;
            color: #ffffff;
            background-color: #1a3d6e;
            padding: 3px 10px;
            display: inline-block;
            letter-spacing: 0.5px;
            -webkit-print-color-adjust: exact;
            print-color-adjust: exact;
        }

        /* Configuración de impresión */
        @media print {
            body {
                background-color: white;
                padding: 0;
                margin: 0;
            }
            .hoja-carta {
                box-shadow: none;
                width: 100%;
                margin: 0;
                /* Top ajustado: el header-html de wkhtmltopdf ya ocupa su margen superior.
                   Los 5mm aquí son solo el respiro entre el borde del área de contenido
                   y la primera tabla. Lados: 8mm para alinearse visualmente con la imagen. */
                padding: 5mm 8mm 8mm;
            }
            .titulo-principal { margin-top: 0; margin-bottom: 1px; }
            .browser-only { display: none; }
            .cove-table th { background-color: #C0C0C0 !important; }
            .cove-badge {
                -webkit-print-color-adjust: exact;
                print-color-adjust: exact;
                background-color: #1a3d6e !important;
                color: #ffffff !important;
            }
        }
    </style>
</head>
<body>

    <div class="hoja-carta">

        <!-- HEADER IMAGE (solo visible en el navegador; en PDF lo repite wkhtmltopdf via --header-html) -->
        <div class="browser-only">
            <img src="{{ header_img }}" alt="Encabezado COVE" class="img-header-footer" style="margin-bottom: 10px;">
        </div>

        <!-- Bloque de título del acuse + badge con número COVE -->
        <table style="width:100%;border:none;border-collapse:collapse;margin-bottom:4px;">
            <tr>
                <td style="border:none;padding:0;vertical-align:bottom;">
                    <div class="titulo-principal">Datos del Acuse de Valor:</div>
                    <div class="subtitulo">COMPROBANTE DE VALOR ELECTRÓNICO</div>
                </td>
                {% if edocument %}
                <td style="border:none;padding:0;vertical-align:middle;text-align:right;white-space:nowrap;width:1%;">
                    <span class="cove-badge">{{ edocument }}</span>
                </td>
                {% endif %}
            </tr>
        </table>

        <!-- ==========================================
             SECCIÓN 1: DATOS DE LA FACTURA
        =========================================== -->
        <table class="cove-table">
            <colgroup>
                <col style="width: 33%;">
                <col style="width: 34%;">
                <col style="width: 33%;">
            </colgroup>
            <tr>
                <th bgcolor="#C0C0C0" style="background-color: #C0C0C0;">Tipo de operación</th>
                <th bgcolor="#C0C0C0" style="background-color: #C0C0C0;">Relación de facturas</th>
                <th bgcolor="#C0C0C0" style="background-color: #C0C0C0;">No. de factura</th>
            </tr>
            <tr>
                <td>{{ tipo_operacion }}</td>
                <td>{{ numero_factura_relacionada }}</td>
                <td>{{ numero_factura }}</td>
            </tr>
        </table>

        <table class="cove-table">
            <colgroup>
                <col style="width: 51%;">
                <col style="width: 49%;">
            </colgroup>
            <tr>
                <th bgcolor="#C0C0C0" style="background-color: #C0C0C0;">Tipo de figura</th>
                <th bgcolor="#C0C0C0" style="background-color: #C0C0C0;">Fecha Exp.</th>
            </tr>
            <tr>
                <td>{{ tipo_figura }}</td>
                <td>{{ fecha_expedicion }}</td>
            </tr>
        </table>

        <table class="cove-table">
            <colgroup>
                <col style="width: 100%;">
            </colgroup>
            <tr>
                <th bgcolor="#C0C0C0" style="background-color: #C0C0C0;">Observaciones</th>
            </tr>
            <tr>
                <td class="td-observaciones">{{ observaciones }}</td>
            </tr>
        </table>

        <div class="titulo-seccion">RFC Con permiso de consulta</div>
        <table class="cove-table">
            <colgroup>
                <col style="width: 51%;">
                <col style="width: 49%;">
            </colgroup>
            <tr>
                <th bgcolor="#C0C0C0" style="background-color: #C0C0C0;">RFC de Consulta</th>
                <th bgcolor="#C0C0C0" style="background-color: #C0C0C0;">Nombre o Razón Social</th>
            </tr>
            <tr>
                <td>{{ rfc_consulta }}</td>
                <td>{{ nombre_razon_social_consulta }}</td>
            </tr>
        </table>

        <div class="titulo-seccion">Número de patente aduanal</div>
        <table class="cove-table">
            <colgroup>
                <col style="width: 100%;">
            </colgroup>
            <tr>
                <th bgcolor="#C0C0C0" style="background-color: #C0C0C0;">Número de autorización aduanal</th>
            </tr>
            <tr>
                <td>{{ patente_aduanal }}</td>
            </tr>
        </table>

        <div class="titulo-seccion">Datos de la factura</div>
        <table class="cove-table">
            <colgroup>
                <col style="width: 33%;">
                <col style="width: 34%;">
                <col style="width: 33%;">
            </colgroup>
            <tr>
                <th bgcolor="#C0C0C0" style="background-color: #C0C0C0;">Subdivisión</th>
                <th bgcolor="#C0C0C0" style="background-color: #C0C0C0;">Certificado de origen</th>
                <th bgcolor="#C0C0C0" style="background-color: #C0C0C0;">No. de exportador autorizado</th>
            </tr>
            <tr>
                <td>{{ subdivision }}</td>
                <td>{{ certificado_origen }}</td>
                <td>{{ exportador_autorizado }}</td>
            </tr>
        </table>

        <!-- ==========================================
             SECCIÓN 2: DATOS DEL PROVEEDOR
        =========================================== -->
        <div class="titulo-seccion">Datos generales del proveedor</div>
        <table class="cove-table">
            <colgroup>
                <col style="width: 44%;">
                <col style="width: 56%;">
            </colgroup>
            <tr>
                <th bgcolor="#C0C0C0" style="background-color: #C0C0C0;">Tipo de identificador</th>
                <th bgcolor="#C0C0C0" style="background-color: #C0C0C0;">Tax ID/Sin Tax/RFC/CURP</th>
            </tr>
            <tr>
                <td>{{ emisor.tipo_identificador }}</td>
                <td>{{ emisor.identificacion }}</td>
            </tr>
        </table>
        
        <table class="cove-table">
            <colgroup>
                <col style="width: 44%;">
                <col style="width: 28%;">
                <col style="width: 28%;">
            </colgroup>
            <tr>
                <th bgcolor="#C0C0C0" style="background-color: #C0C0C0;">Nombre(s) o Razón Social</th>
                <th bgcolor="#C0C0C0" style="background-color: #C0C0C0;">Apellido paterno</th>
                <th bgcolor="#C0C0C0" style="background-color: #C0C0C0;">Apellido materno</th>
            </tr>
            <tr>
                <td>{{ emisor.nombre }}</td>
                <td>{{ emisor.apellido_paterno }}</td>
                <td>{{ emisor.apellido_materno }}</td>
            </tr>
        </table>

        <div class="titulo-seccion">Domicilio del proveedor</div>
        <table class="cove-table">
            <colgroup>
                <col style="width: 51%;">
                <col style="width: 16%;">
                <col style="width: 19%;">
                <col style="width: 14%;">
            </colgroup>
            <tr>
                <th bgcolor="#C0C0C0" style="background-color: #C0C0C0;">Calle</th>
                <th bgcolor="#C0C0C0" style="background-color: #C0C0C0;">No. exterior</th>
                <th bgcolor="#C0C0C0" style="background-color: #C0C0C0;">No. interior</th>
                <th bgcolor="#C0C0C0" style="background-color: #C0C0C0;">Código postal</th>
            </tr>
            <tr>
                <td>{{ emisor.calle }}</td>
                <td>{{ emisor.numero_exterior }}</td>
                <td>{{ emisor.numero_interior }}</td>
                <td>{{ emisor.codigo_postal }}</td>
            </tr>
            <tr>
                <th bgcolor="#C0C0C0" style="background-color: #C0C0C0;">Colonia</th>
                <th colspan="3" bgcolor="#C0C0C0" style="background-color: #C0C0C0;">Localidad</th>
            </tr>
            <tr>
                <td>{{ emisor.colonia }}</td>
                <td colspan="3">{{ emisor.localidad }}</td>
            </tr>
            <tr>
                <th bgcolor="#C0C0C0" style="background-color: #C0C0C0;">Entidad federativa</th>
                <th colspan="3" bgcolor="#C0C0C0" style="background-color: #C0C0C0;">Municipio</th>
            </tr>
            <tr>
                <td>{{ emisor.entidad_federativa }}</td>
                <td colspan="3">{{ emisor.municipio }}</td>
            </tr>
            <tr>
                <th colspan="4" bgcolor="#C0C0C0" style="background-color: #C0C0C0;">País</th>
            </tr>
            <tr>
                <td colspan="4">{{ emisor.pais }}</td>
            </tr>
        </table>

        <!-- ==========================================
             SECCIÓN 3: DATOS DEL DESTINATARIO
        =========================================== -->
        <div class="titulo-seccion">Datos generales del destinatario</div>
        <table class="cove-table">
            <colgroup>
                <col style="width: 44%;">
                <col style="width: 56%;">
            </colgroup>
            <tr>
                <th bgcolor="#C0C0C0" style="background-color: #C0C0C0;">Tipo de Identificador</th>
                <th bgcolor="#C0C0C0" style="background-color: #C0C0C0;">Tax ID/Sin Tax/RFC/CURP</th>
            </tr>
            <tr>
                <td>{{ destinatario.tipo_identificador }}</td>
                <td>{{ destinatario.identificacion }}</td>
            </tr>
        </table>
        
        <table class="cove-table">
            <colgroup>
                <col style="width: 44%;">
                <col style="width: 28%;">
                <col style="width: 28%;">
            </colgroup>
            <tr>
                <th bgcolor="#C0C0C0" style="background-color: #C0C0C0;">Nombre(s) o Razón Social</th>
                <th bgcolor="#C0C0C0" style="background-color: #C0C0C0;">Apellido paterno</th>
                <th bgcolor="#C0C0C0" style="background-color: #C0C0C0;">Apellido materno</th>
            </tr>
            <tr>
                <td>{{ destinatario.nombre }}</td>
                <td>{{ destinatario.apellido_paterno }}</td>
                <td>{{ destinatario.apellido_materno }}</td>
            </tr>
        </table>

        <div class="titulo-seccion">Domicilio del destinatario</div>
        <table class="cove-table">
            <colgroup>
                <col style="width: 51%;">
                <col style="width: 16%;">
                <col style="width: 19%;">
                <col style="width: 14%;">
            </colgroup>
            <tr>
                <th bgcolor="#C0C0C0" style="background-color: #C0C0C0;">Calle</th>
                <th bgcolor="#C0C0C0" style="background-color: #C0C0C0;">No. exterior</th>
                <th bgcolor="#C0C0C0" style="background-color: #C0C0C0;">No. interior</th>
                <th bgcolor="#C0C0C0" style="background-color: #C0C0C0;">Código postal</th>
            </tr>
            <tr>
                <td>{{ destinatario.calle }}</td>
                <td>{{ destinatario.numero_exterior }}</td>
                <td>{{ destinatario.numero_interior }}</td>
                <td>{{ destinatario.codigo_postal }}</td>
            </tr>
            <tr>
                <th bgcolor="#C0C0C0" style="background-color: #C0C0C0;">Colonia</th>
                <th colspan="3" bgcolor="#C0C0C0" style="background-color: #C0C0C0;">Localidad</th>
            </tr>
            <tr>
                <td>{{ destinatario.colonia }}</td>
                <td colspan="3">{{ destinatario.localidad }}</td>
            </tr>
            <tr>
                <th bgcolor="#C0C0C0" style="background-color: #C0C0C0;">Entidad federativa</th>
                <th colspan="3" bgcolor="#C0C0C0" style="background-color: #C0C0C0;">Municipio</th>
            </tr>
            <tr>
                <td>{{ destinatario.entidad_federativa }}</td>
                <td colspan="3">{{ destinatario.municipio }}</td>
            </tr>
            <tr>
                <th colspan="4" bgcolor="#C0C0C0" style="background-color: #C0C0C0;">País</th>
            </tr>
            <tr>
                <td colspan="4">{{ destinatario.pais }}</td>
            </tr>
        </table>

        <!-- ==========================================
             SECCIÓN 4: PARTIDAS / MERCANCÍAS
        =========================================== -->
        {% if items %}
        {% for item in items %}
        <div class="titulo-seccion" style="{% if not loop.first %}margin-top: 10px;{% endif %}">Datos de la mercancía</div>
        <table class="cove-table">
            <colgroup>
                <col style="width: 58%;">
                <col style="width: 22%;">
                <col style="width: 20%;">
            </colgroup>
            <tr>
                <th bgcolor="#C0C0C0" style="background-color: #C0C0C0;">Descripción genérica de la mercancía</th>
                <th bgcolor="#C0C0C0" style="background-color: #C0C0C0;">Clave UMC</th>
                <th bgcolor="#C0C0C0" style="background-color: #C0C0C0;">Cantidad UMC</th>
            </tr>
            <tr>
                <td>{{ item.descripcion_generica }}</td>
                <td>{{ item.clave_unidad_medida }}</td>
                <td>{{ item.cantidad }}</td>
            </tr>
        </table>

        <table class="cove-table">
            <colgroup>
                <col style="width: 28%;">
                <col style="width: 30%;">
                <col style="width: 22%;">
                <col style="width: 20%;">
            </colgroup>
            <tr>
                <th bgcolor="#C0C0C0" style="background-color: #C0C0C0;">Tipo moneda</th>
                <th bgcolor="#C0C0C0" style="background-color: #C0C0C0;">Valor unitario</th>
                <th bgcolor="#C0C0C0" style="background-color: #C0C0C0;">Valor total</th>
                <th bgcolor="#C0C0C0" style="background-color: #C0C0C0;">Valor total en dólares</th>
            </tr>
            <tr>
                <td>{{ item.tipo_moneda }}</td>
                <td>$ {{ item.valor_unitario }}</td>
                <td>$ {{ item.valor_total }}</td>
                <td>$ {{ item.valor_dolares }}</td>
            </tr>
        </table>

        {% if item.descripciones_especificas %}
        <div class="titulo-seccion" style="margin-top: 6px;">Descripción de la mercancía</div>
        <table class="cove-table">
            <colgroup>
                <col style="width: 28%;">
                <col style="width: 30%;">
                <col style="width: 22%;">
                <col style="width: 20%;">
            </colgroup>
            <tr>
                <th bgcolor="#C0C0C0" style="background-color: #C0C0C0;">Marca</th>
                <th bgcolor="#C0C0C0" style="background-color: #C0C0C0;">Modelo</th>
                <th bgcolor="#C0C0C0" style="background-color: #C0C0C0;">Serie</th>
                <th bgcolor="#C0C0C0" style="background-color: #C0C0C0;">Submodelo</th>
            </tr>
            {% for desc in item.descripciones_especificas %}
            <tr>
                <td>{{ desc.marca }}</td>
                <td>{{ desc.modelo }}</td>
                <td>{{ desc.numero_serie }}</td>
                <td>{{ desc.submodelo }}</td>
            </tr>
            {% endfor %}
        </table>
        {% endif %}

        {% endfor %}
        {% else %}
        <table class="cove-table">
            <tr>
                <td style="font-style: italic; color: #555;">Sin partidas registradas.</td>
            </tr>
        </table>
        {% endif %}

        <!-- FOOTER IMAGE (solo visible en el navegador; en PDF lo repite wkhtmltopdf via --footer-html) -->
        <div class="browser-only">
            <img src="{{ footer_img }}" alt="Pie de página COVE" class="img-header-footer" style="margin-top: 25px;">
        </div>

    </div>

</body>
</html>