<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>{{ tipoDocumentoDesc }} {{ serie }}-{{ correlativo }}</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            font-size: 10pt;
            margin: 0;
            padding: 0;
        }
        .container {
            width: 100%;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        .header {
            border-bottom: 1px solid #ddd;
            padding-bottom: 10px;
            margin-bottom: 20px;
        }
        .logo {
            max-width: 200px;
            max-height: 80px;
        }
        .company-info {
            float: left;
            width: 60%;
        }
        .document-info {
            float: right;
            width: 35%;
            border: 1px solid #000;
            padding: 10px;
            text-align: center;
        }
        .clear {
            clear: both;
        }
        .section {
            margin-bottom: 20px;
            padding: 10px;
            border: 1px solid #ddd;
        }
        .section h3 {
            margin-top: 0;
            border-bottom: 1px solid #ddd;
            padding-bottom: 5px;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }
        table th, table td {
            border: 1px solid #ddd;
            padding: 5px;
        }
        table th {
            background-color: #f2f2f2;
            text-align: left;
        }
        .footer {
            margin-top: 30px;
            border-top: 1px solid #ddd;
            padding-top: 10px;
            text-align: center;
            font-size: 8pt;
        }
        .qr-code {
            margin-top: 20px;
            text-align: center;
        }
        .qr-code img {
            max-width: 100px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <div class="company-info">
                {% if logo %}
                <img src="{{ logo }}" alt="Logo" class="logo">
                {% endif %}
                <h2>{{ emisor.razonSocial }}</h2>
                <p>{{ emisor.nombreComercial }}</p>
                <p>{{ emisor.direccion.direccion }}, {{ emisor.direccion.distrito }}, {{ emisor.direccion.provincia }}, {{ emisor.direccion.departamento }}</p>
                <p>RUC: {{ emisor.ruc }}</p>
            </div>
            <div class="document-info">
                <h3>{{ tipoDocumentoDesc }}</h3>
                <h2>{{ serie }}-{{ correlativo }}</h2>
                <p>Fecha de emisión: {{ fechaEmision }}</p>
                <p>Fecha de referencia: {{ fechaReferencia }}</p>
            </div>
            <div class="clear"></div>
        </div>
        
        <div class="section">
            <h3>Información del Resumen Diario</h3>
            <p>Este documento contiene el resumen de los comprobantes de pago emitidos en la fecha de referencia.</p>
        </div>
        
        <table>
            <thead>
                <tr>
                    <th>#</th>
                    <th>Tipo Documento</th>
                    <th>Serie</th>
                    <th>Correlativo Inicio</th>
                    <th>Correlativo Fin</th>
                    <th>Moneda</th>
                    <th>Total</th>
                    <th>Estado</th>
                </tr>
            </thead>
            <tbody>
                {% for doc in documentos %}
                <tr>
                    <td>{{ loop.index }}</td>
                    <td>{{ doc.tipoDocumentoDesc }}</td>
                    <td>{{ doc.serie }}</td>
                    <td>{{ doc.correlativoInicio }}</td>
                    <td>{{ doc.correlativoFin }}</td>
                    <td>{{ doc.moneda }}</td>
                    <td>{{ doc.total }}</td>
                    <td>{{ doc.estadoDesc }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
        
        <div class="qr-code">
            {% if qrCode %}
            <img src="{{ qrCode }}" alt="QR Code">
            {% endif %}
            <p>Representación impresa del {{ tipoDocumentoDesc }} Electrónico</p>
            <p>Consulte su documento en: <a href="https://consulta.sunat.gob.pe">https://consulta.sunat.gob.pe</a></p>
        </div>
        
        <div class="footer">
            <p>{{ footerText }}</p>
            {% if includePageNumber %}
            <p>Página {{ pageNumber }} de {{ totalPages }}</p>
            {% endif %}
        </div>
    </div>
</body>
</html>
