<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ invoice_title }}</title>
    <style>
/* CSS styles for invoice template */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    color: #333;
    font-size: 12px;
}

.container {
    max-width: 800px;
    margin: 0 auto;
}

.header {
    text-align: center;
    margin-bottom: 20px;
}

.logo {
    float: left;
    width: 150px;
    margin-bottom: 10px;
}

.logo img {
    max-width: 100%;
    height: auto;
}

.invoice-title {
    font-size: 18px;
    font-weight: bold;
    margin: 10px 0;
    clear: both;
}

.invoice-code {
    font-size: 12px;
    margin: 5px 0;
}

.test-notice {
    font-weight: bold;
    font-size: 10px;
    color: #d32f2f;
    margin: 10px 0;
}

.info-section {
    width: 100%;
    margin: 10px 0;
}

.info-grid {
    display: table;
    width: 100%;
}

.info-left, .info-right {
    display: table-cell;
    vertical-align: top;
    width: 50%;
    padding: 10px;
}

.info-row {
    margin: 5px 0;
    display: flex;
    align-items: flex-start;
}

.info-label {
    font-weight: bold;
    display: inline-block;
    width: 150px;
    white-space: nowrap;
    margin-right: 5px;
}

.info-row span + * {
    white-space: normal;
    word-break: break-word;
    flex: 1;
}

.items-table {
    width: 100%;
    border-collapse: collapse;
    margin: 10px 0;
}

.items-table th,
.items-table td {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: left;
}

.items-table th {
    background-color: #f5f5f5;
    font-weight: bold;
    font-size: 11px;
}

.items-table td {
    font-size: 10px;
}

.items-table .text-right {
    text-align: right;
}

/* === NUEVO: Contenedor en dos columnas 50/50 para Footer (QR) y Totales === */
.bottom-sections {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    margin-top: 20px;
}

/* Mitad izquierda: footer (QR + CAE) */
.footer-section {
    width: 65%;
    margin: 0;           /* anulamos márgenes altos para alinear con totales */
    padding: 0;
}

/* Contenido interno del footer en fila */
.footer-inner {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.qr-section {
    width: 150px;
    text-align: center;
    flex: 0 0 150px;
}

.qr-code {
    width: 150px;
    height: 150px;
}

.cae-info {
    flex: 1 1 auto;
    margin: 0;
}

.cae-row {
    margin: 2px 0;
}

.authorization-notice {
    font-size: 10px;
    margin-top: 20px;
    text-align: left;
}

.disclaimer {
    font-size: 8px;
    color: #666;
    text-align: left;
    margin-top: 10px;
}

.disclaimer2 {
    font-size: 7px;
    color: #666;
    text-align: left;
    margin-top: 10px;
}

/* Mitad derecha: totales */
.totals-section {
    width: 40%;
    margin-left: auto;
    margin-right: 0;
}

.total-row {
    display: flex;
    justify-content: space-between;
    margin: 5px 0;
    padding: 3px 0;
}

.total-label {
    font-weight: bold;
    text-align: right;
}

.total-value {
    text-align: right;
    min-width: 100px;
}

.final-total {
    border-top: 2px solid #333;
    font-weight: bold;
    font-size: 14px;
}

/* Observaciones */
.observations {
    margin: 20px 0;
}

.observations-title {
    font-weight: bold;
    font-size: 12px;
    margin-bottom: 5px;
}

.observations-content {
    font-size: 11px;
    background-color: #f3d5d5ff;
    padding: 10px;
    border-left: 3px solid #ec4e4eff;
}

@media print {
    body {
        margin: 0;
        padding: 3px;
    }
    .container {
        max-width: none;
    }
    .bottom-sections {
        gap: 12px; /* un poco menos de separación para impresión */
    }
}
    </style>
</head>
<body>
    <div class="container">
        <!-- Header with logo -->
        <div class="header" style="display: flex; align-items: center; justify-content: center; position: relative; min-height: 80px;">
            {% if logo_path %}
            <div class="logo" style="flex: 0 0 auto; margin-bottom: 0; position: absolute; left: 0; top: 50%; transform: translateY(-50%);">
                <img src="{{ logo_path }}" alt="Logo">
            </div>
            {% endif %}
            <div style="flex: 1 1 0; text-align: center;">
                <div class="invoice-title">{{ invoice_title }}</div>
                <div class="invoice-code">COD. {{ invoice_type_code }}</div>
                {% if is_test %}
                <div class="test-notice">
                    Factura realizada en el ambiente de Prueba - NO TIENE VALIDEZ FISCAL
                </div>
                {% endif %}
            </div>
        </div>

        <!-- Emisor and Receptor Information -->
        <div class="info-section">
            <div class="info-grid">
                <div class="info-left">
                    <h3 style="margin-top: 0;">Información del Emisor</h3>
                    <div class="info-row">
                        <span class="info-label">Emisor:</span>
                        {{ emisor.denominacion }}
                    </div>
                    <div class="info-row">
                        <span class="info-label">CUIT Emisor:</span>
                        {{ emisor.cuit }}
                    </div>
                    <div class="info-row">
                        <span class="info-label">Fecha de Emisión:</span>
                        {{ emisor.fecha_emision }}
                    </div>
                    <div class="info-row">
                        <span class="info-label">Punto de Venta:</span>
                        {{ emisor.punto_venta }}
                    </div>
                    <div class="info-row">
                        <span class="info-label">Nro de Comprobante:</span>
                        {{ emisor.nro_comprobante }}
                    </div>
                    <div class="info-row">
                        <span class="info-label">Condición frente al IVA:</span>
                        {{ emisor.condicion_iva }}
                    </div>
                    <div class="info-row">
                        <span class="info-label">Domicilio del Emisor:</span>
                        {{ emisor.domicilio }}
                    </div>
                    
                    {% if periodo %}
                    <div class="info-row">
                        <span class="info-label">Período Facturado Desde:</span>
                        {{ periodo.desde }}
                    </div>
                    <div class="info-row">
                        <span class="info-label">Período Facturado Hasta:</span>
                        {{ periodo.hasta }}
                    </div>
                    <div class="info-row">
                        <span class="info-label">Fecha de Vto. para el pago:</span>
                        {{ periodo.vto_pago }}
                    </div>
                    {% endif %}
                </div>
                
                <div class="info-right">
                    <h3 style="margin-top: 0;">Información del Receptor</h3>
                    <div class="info-row">
                        <span class="info-label">Receptor:</span>
                        {{ receptor.denominacion }}
                    </div>
                    <div class="info-row">
                        <span class="info-label">Tipo Doc Receptor:</span>
                        {{ receptor.tipo_doc }}
                    </div>
                    <div class="info-row">
                        <span class="info-label">Nro Doc Receptor:</span>
                        {{ receptor.nro_doc }}
                    </div>
                    <div class="info-row">
                        <span class="info-label">Tipo Resp. IVA:</span>
                        {{ receptor.tipo_responsable_iva }}
                    </div>
                    <div class="info-row">
                        <span class="info-label">Condición de venta:</span>
                        {{ receptor.condicion_venta }}
                    </div>
                    <div class="info-row">
                        <span class="info-label">Domicilio Receptor:</span>
                        {{ receptor.domicilio }}
                    </div>
                </div>
            </div>
        </div>

        <!-- Sección de Ítems -->
        <h3 class="observations-title">Detalle de Ítems:</h3>

        <!-- Items Table -->
        <table class="items-table">
            <thead>
                <tr>
                    <th>Descripción</th>
                    <th>Cant.</th>
                    <th>$ Unit.</th>
                    <th>Bonif.</th>
                    <th>Subtotal</th>
                    <th>% IVA</th>
                    <!--<th>IVA</th>-->
                    <th>Subtotal</th>
                </tr>
            </thead>
            <tbody>
                {% for item in items %}
                <tr>
                    <td>{{ item.descripcion }}</td>
                    <td class="text-right">{{ item.cantidad }}</td>
                    <td class="text-right">{{ item.precio_unitario }}</td>
                    <td class="text-right">{{ item.bonificacion }}</td>
                    <td class="text-right">{{ item.importe }}</td>
                    <td class="text-right">{{ item.alicuota_iva }}</td>
                    <!--<td class="text-right">{{ item.iva }}</td>-->
                    <td class="text-right">{{ item.subtotal }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>

        <div class="authorization-notice" style="font-size:9px; margin-top:20px; text-align:right;">
            Régimen de Transparencia Fiscal al Consumidor Ley 27.743
        </div>

        <!-- Otros Tributos Table -->
        {% if otros_tributos %}

        <h3 class="observations-title">Otros Tributos:</h3>

        <table class="items-table">
            <thead>
                <tr>
                    <th>Descripción</th>
                    <th>Base Imponible</th>
                    <th>Alícuota</th>
                    <th>Importe</th>
                </tr>
            </thead>
            <tbody>
                {% for tributo in otros_tributos %}
                <tr>
                    <td>{{ tributo.descripcion }}</td>
                    <td class="text-right">{{ tributo.base_imponible }}</td>
                    <td class="text-right">{{ tributo.alicuota }}</td>
                    <td class="text-right">{{ tributo.importe }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
        {% endif %}

        <!-- Observations -->
        {% if observaciones %}
        <div class="observations">
            <div class="observations-title">Observaciones:</div>
            <div class="observations-content">
                Code: {{ observaciones.code }} - {{ observaciones.mensaje }}
            </div>
        </div>
        {% endif %}


        <!-- NUEVO BLOQUE EN DOS COLUMNAS: Izquierda (QR/CAE) y Derecha (Totales) -->
        <div class="bottom-sections">
            <!-- Footer with QR and CAE - IZQUIERDA (50%) -->
            <div class="footer-section">
                <div class="footer-inner">
                    <div class="qr-section">
                        {% if qr_code_b64 %}
                        <img src="data:image/png;base64,{{ qr_code_b64 }}" alt="Código QR" class="qr-code">
                        {% endif %}
                    </div>
                    <div class="cae-info">
                        <div class="cae-row">
                            <strong>CAE N°:</strong> {{ cae.numero }}
                        </div>
                        <div class="cae-row">
                            <strong>Fecha de Vto. de CAE:</strong> {{ cae.fecha_vto }}
                        </div>
                        <div class="authorization-notice" style="margin-top:5px;">
                            Comprobante Autorizado por ARCA
                        </div>
                        <div class="cae-row" style="margin-top:5px;">
                            <span style="font-size:10px; color:#888;"><strong>Powered by:</strong></span>
                        </div>
                        <div class="cae-row" style="margin-top:1px;">
                            <img src="data:image/png;base64, " alt="Imagen adicional" style="max-width:120px; max-height:120px;">
                        </div>
                        <div class="disclaimer" style="margin-top: 5px;">
                            Mr Bot no se responsabiliza por los datos ingresados en el detalle de la operación
                        </div>
                        <div class="disclaimer" style="margin-top: 5px;">
                            Software gratuito desarrollado por Agustín Bustos Piasentini
                        </div>
                    </div>
                </div>
            </div>

            <!-- Totales - DERECHA (50%) -->
            <div class="totals-section">
                <div class="total-row">
                    <span class="total-label">Subtotal:</span>
                    <span class="total-value">$ {{ totales.subsubtotal }}</span>
                </div>
                <div class="total-row">
                    <span class="total-label">Importe Exento:</span>
                    <span class="total-value">$ {{ totales.exento }}</span>
                </div>
                <div class="total-row">
                    <span class="total-label">Importe No Gravado:</span>
                    <span class="total-value">$ {{ totales.no_gravado }}</span>
                </div>
                <div class="total-row">
                    <span class="total-label">Importe de Tributos:</span>
                    <span class="total-value">$ {{ totales.tributos }}</span>
                </div>
                <div class="total-row final-total">
                    <span class="total-label">TOTAL:</span>
                    <span class="total-value">$ {{ totales.total }}</span>
                </div>
                <div class="total-row">
                    <span class="total-label">IVA Contenido:</span>
                    <span class="total-value">$ {{ totales.iva }}</span>
                </div>
            </div>
        </div>
        <!-- FIN BLOQUE EN DOS COLUMNAS -->
    </div>
</body>
</html>
