<!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;
        }
        .perception-info {
            margin-bottom: 20px;
            padding: 10px;
            background-color: #f9f9f9;
            border: 1px solid #ddd;
        }
        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;
        }
        .totals {
            float: right;
            width: 35%;
        }
        .totals table {
            width: 100%;
        }
        .totals table th {
            text-align: right;
        }
        .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>
            </div>
            <div class="clear"></div>
        </div>
        
        <div class="section">
            <h3>Datos del Cliente</h3>
            <p><strong>{{ receptor.tipoDocumentoDesc }}:</strong> {{ receptor.numeroDocumento }}</p>
            <p><strong>Razón Social:</strong> {{ receptor.razonSocial }}</p>
            {% if receptor.direccion %}
            <p><strong>Dirección:</strong> {{ receptor.direccion.direccion }}
                {% if receptor.direccion.distrito %}, {{ receptor.direccion.distrito }}{% endif %}
                {% if receptor.direccion.provincia %}, {{ receptor.direccion.provincia }}{% endif %}
                {% if receptor.direccion.departamento %}, {{ receptor.direccion.departamento }}{% endif %}
            </p>
            {% endif %}
        </div>
        
        <div class="perception-info">
            <h3>Información de la Percepción</h3>
            <p><strong>Régimen de Percepción:</strong> {{ sistemaPercepcionDesc }}</p>
            <p><strong>Tasa de Percepción:</strong> {{ porcentajePercepcion }}%</p>
            <p><strong>Importe Total Percibido:</strong> S/ {{ importeTotalPercibido }}</p>
            <p><strong>Importe Total Cobrado:</strong> S/ {{ importeTotalCobrado }}</p>
        </div>
        
        <table>
            <thead>
                <tr>
                    <th>Tipo Documento</th>
                    <th>Número</th>
                    <th>Fecha Emisión</th>
                    <th>Moneda</th>
                    <th>Importe Total</th>
                    <th>Fecha Cobro</th>
                    <th>Importe Percibido</th>
                    <th>Importe Total Cobrado</th>
                </tr>
            </thead>
            <tbody>
                {% for doc in documentos %}
                <tr>
                    <td>{{ doc.tipoDocumentoDesc }}</td>
                    <td>{{ doc.numeroDocumento }}</td>
                    <td>{{ doc.fechaEmision }}</td>
                    <td>{{ doc.moneda }}</td>
                    <td>{{ doc.importeTotal }}</td>
                    <td>{{ doc.fechaPago }}</td>
                    <td>{{ doc.importePercibido }}</td>
                    <td>{{ doc.importeTotalCobrado }}</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>
