{% extends 'base.html.twig' %}
{% block title %}Imprimir Documento {{ documento.serie ? documento.serie ~ '-' : '' }}{{ documento.numero }}{% endblock %}

{# Hide sidebar and header for print view #}
{% block sidebar %}{% endblock %}
{% block nav_header %}{% endblock %}
{% block breadcrumb %}{% endblock %}
{% block content_header %}{% endblock %}

{% block stylesheets %}
{{ parent() }}
<style>
    /* Print-optimized styles */
    @media print {
        body {
            -webkit-print-color-adjust: exact !important;
            print-color-adjust: exact !important;
            font-size: 12pt;
            line-height: 1.4;
        }
        .no-print { display: none !important; }
        .print-container {
            max-width: 100% !important;
            margin: 0 !important;
            padding: 0 !important;
        }
        table { page-break-inside: avoid; }
        tr { page-break-inside: avoid; }
    }

    @page {
        size: letter;
        margin: 0.75in;
    }

    .print-container {
        max-width: 8.5in;
        margin: 0 auto;
        padding: 20px;
        font-family: 'Helvetica Neue', Arial, sans-serif;
    }

    .header-section {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        border-bottom: 3px solid #1e40af;
        padding-bottom: 15px;
        margin-bottom: 20px;
    }

    .company-info h1 {
        font-size: 24pt;
        color: #1e40af;
        margin: 0;
        font-weight: bold;
    }

    .company-info p {
        margin: 2px 0;
        color: #6b7280;
        font-size: 10pt;
    }

    .document-info {
        text-align: right;
    }

    .document-info .doc-number {
        font-size: 18pt;
        font-weight: bold;
        color: #111827;
    }

    .document-info .doc-type {
        background-color: #dbeafe;
        color: #1e40af;
        padding: 4px 12px;
        border-radius: 4px;
        font-size: 10pt;
        font-weight: 600;
        display: inline-block;
        margin-top: 5px;
    }

    .info-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        margin-bottom: 25px;
    }

    .info-box {
        background-color: #f9fafb;
        border: 1px solid #e5e7eb;
        border-radius: 6px;
        padding: 15px;
    }

    .info-box h3 {
        font-size: 11pt;
        color: #6b7280;
        margin: 0 0 10px 0;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .info-box p {
        margin: 4px 0;
        font-size: 11pt;
    }

    .info-box .primary {
        font-size: 12pt;
        font-weight: 600;
        color: #111827;
    }

    .detail-table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 20px;
    }

    .detail-table th {
        background-color: #1e40af;
        color: white;
        padding: 10px 12px;
        text-align: left;
        font-size: 10pt;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .detail-table th.right {
        text-align: right;
    }

    .detail-table td {
        border-bottom: 1px solid #e5e7eb;
        padding: 10px 12px;
        font-size: 10pt;
    }

    .detail-table td.right {
        text-align: right;
    }

    .detail-table td.mono {
        font-family: 'Courier New', monospace;
    }

    .totals-section {
        display: flex;
        justify-content: flex-end;
    }

    .totals-box {
        width: 280px;
    }

    .total-row {
        display: flex;
        justify-content: space-between;
        padding: 8px 12px;
        font-size: 11pt;
    }

    .total-row.alt {
        background-color: #f9fafb;
    }

    .total-row.final {
        background-color: #1e40af;
        color: white;
        font-weight: bold;
        font-size: 13pt;
        border-radius: 0 0 6px 6px;
    }

    .total-row .label {
        color: #6b7280;
    }

    .total-row.final .label {
        color: white;
    }

    .total-row .value {
        font-weight: 600;
        font-family: 'Courier New', monospace;
    }

    .footer-section {
        margin-top: 40px;
        padding-top: 20px;
        border-top: 1px solid #e5e7eb;
        font-size: 9pt;
        color: #9ca3af;
        text-align: center;
    }

    .print-actions {
        position: fixed;
        bottom: 20px;
        right: 20px;
        display: flex;
        gap: 10px;
        z-index: 1000;
    }

    .print-btn {
        padding: 12px 24px;
        border-radius: 6px;
        font-weight: 600;
        cursor: pointer;
        border: none;
        font-size: 14px;
        display: flex;
        align-items: center;
        gap: 8px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    }

    .print-btn.primary {
        background-color: #1e40af;
        color: white;
    }

    .print-btn.primary:hover {
        background-color: #1e3a8a;
    }

    .print-btn.secondary {
        background-color: white;
        color: #374151;
        border: 1px solid #d1d5db;
    }

    .print-btn.secondary:hover {
        background-color: #f9fafb;
    }
</style>
{% endblock %}

{% block body %}
<div class="print-container">
    <!-- Header -->
    <div class="header-section">
        <div class="company-info">
            {% if documento.tipoDocumento.codigo == 'RET' %}
                <h1>CONSTANCIA DE RETENCIÓN DEL ISR</h1>
                <p>Decreto 10-2012, Ley de Actualización Tributaria</p>
                <p><strong>Agente de Retención</strong></p>
            {% else %}
                <h1>DOCUMENTO CXP</h1>
                <p>Sistema de Cuentas por Pagar</p>
            {% endif %}
        </div>
        <div class="document-info">
            <div class="doc-number">{{ documento.serie ? documento.serie ~ '-' : '' }}{{ documento.numero }}</div>
            <div class="doc-type">{{ documento.tipoDocumento.codigo }} - {{ documento.tipoDocumento.nombre }}</div>
        </div>
    </div>

    <!-- Info Grid -->
    <div class="info-grid">
        <div class="info-box">
            <h3>{% if documento.tipoDocumento.codigo == 'RET' %}Sujeto de Retención{% else %}Proveedor{% endif %}</h3>
            {% if documento.tipoDocumento.codigo == 'RET' and documento.documentoPadre %}
                <p class="primary">{{ documento.documentoPadre.proveedor.razonSocial }}</p>
                <p>NIT: {{ documento.documentoPadre.proveedor.nit }}</p>
                {% if documento.documentoPadre.proveedor.direccion %}
                <p>{{ documento.documentoPadre.proveedor.direccion }}</p>
                {% endif %}
            {% else %}
                <p class="primary">{{ documento.proveedor.razonSocial }}</p>
                <p>NIT: {{ documento.proveedor.nit }}</p>
                {% if documento.proveedor.direccion %}
                <p>{{ documento.proveedor.direccion }}</p>
                {% endif %}
            {% endif %}
        </div>
        <div class="info-box">
            <h3>Fechas</h3>
            <p><strong>Emisión:</strong> {{ documento.fechaEmision|date('d/m/Y') }}</p>
            {% if documento.tipoDocumento.codigo != 'RET' %}
                <p><strong>Recepción:</strong> {{ documento.fechaRecepcion|date('d/m/Y') }}</p>
                <p><strong>Vencimiento:</strong> {{ documento.fechaVencimiento|date('d/m/Y') }}</p>
            {% endif %}
            <p><strong>Moneda:</strong> {{ documento.moneda.codigo }}</p>
        </div>
    </div>

    <!-- Detail Table -->
    <table class="detail-table">
        <thead>
            <tr>
                <th style="width: 40px;">#</th>
                <th>Concepto</th>
                {% if documento.tipoDocumento.codigo == 'RET' %}
                    <th class="right" style="width: 120px;">Base Imponible</th>
                    <th class="right" style="width: 80px;">Tasa %</th>
                    <th class="right" style="width: 120px;">Impuesto Retenido</th>
                {% else %}
                    <th class="right" style="width: 80px;">Cant.</th>
                    <th class="right" style="width: 100px;">Precio Unit.</th>
                    <th class="right" style="width: 100px;">Subtotal</th>
                    <th class="right" style="width: 90px;">Impuesto</th>
                    <th class="right" style="width: 110px;">Total</th>
                {% endif %}
            </tr>
        </thead>
        <tbody>
            {% for linea in lineas %}
            <tr>
                <td>{{ linea.linea }}</td>
                <td>{{ linea.descripcion }}</td>
                {% if documento.tipoDocumento.codigo == 'RET' %}
                    {# Asumiendo que para RET: Cantidad=1, Precio=Monto Retenido. Pero necesitamos la BASE.
                       En la logica actual de creacion RET, no guardamos la base explicita en linea.
                       Usaremos el Documento Padre (Referencia) o calcularemos inverso si es posible,
                       pero por ahora mostraremos el Total como Retencion #}
                    <td class="right mono">{{ (linea.totalLinea / (documento.tipoCambio ?: 1))|number_format(2, '.', ',') }}</td>
                    <td class="right mono">-</td>
                    <td class="right mono">{{ linea.totalLinea|number_format(2, '.', ',') }}</td>
                {% else %}
                    <td class="right mono">{{ linea.cantidad|number_format(2, '.', ',') }}</td>
                    <td class="right mono">{{ linea.precioUnitario|number_format(2, '.', ',') }}</td>
                    <td class="right mono">{{ (linea.cantidad * linea.precioUnitario)|number_format(2, '.', ',') }}</td>
                    <td class="right mono">{{ linea.impuestoMonto|number_format(2, '.', ',') }}</td>
                    <td class="right mono"><strong>{{ linea.totalLinea|number_format(2, '.', ',') }}</strong></td>
                {% endif %}
            </tr>
            {% endfor %}
        </tbody>
    </table>

    <!-- Totals -->
    <div class="totals-section">
        <div class="totals-box">
            <div class="total-row alt">
                <span class="label">Subtotal</span>
                <span class="value">{{ documento.moneda.codigo }} {{ documento.subtotal|number_format(2, '.', ',') }}</span>
            </div>
            <div class="total-row">
                <span class="label">IVA (12%)</span>
                <span class="value">{{ documento.moneda.codigo }} {{ documento.impuestoTotal|number_format(2, '.', ',') }}</span>
            </div>
            {% if documento.retencionTotal > 0 %}
            <div class="total-row alt">
                <span class="label">Retenciones</span>
                <span class="value" style="color: #dc2626;">-{{ documento.moneda.codigo }} {{ documento.retencionTotal|number_format(2, '.', ',') }}</span>
            </div>
            {% endif %}
            {% if documento.idpTotal is defined and documento.idpTotal > 0 %}
            <div class="total-row">
                <span class="label">IDP</span>
                <span class="value">{{ documento.moneda.codigo }} {{ documento.idpTotal|number_format(2, '.', ',') }}</span>
            </div>
            {% endif %}
            <div class="total-row final">
                <span class="label">TOTAL A PAGAR</span>
                <span class="value">{{ documento.moneda.codigo }} {{ documento.totalNeto|number_format(2, '.', ',') }}</span>
            </div>
        </div>
    </div>

    {% if documento.observaciones %}
    <div class="info-box" style="margin-top: 20px;">
        <h3>Observaciones</h3>
        <p>{{ documento.observaciones }}</p>
    </div>
    {% endif %}

    <!-- Footer -->
    <div class="footer-section">
        <p>Documento generado el {{ "now"|date('d/m/Y H:i:s') }} | Sistema CXP</p>
    </div>
</div>

<!-- Print Actions (hidden when printing) -->
<div class="print-actions no-print">
    <a href="{{ path('documento_show', {id: documento.id}) }}" class="print-btn secondary">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" width="20" height="20">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
        </svg>
        Volver
    </a>
    <button onclick="window.print()" class="print-btn primary">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" width="20" height="20">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"/>
        </svg>
        Imprimir / Guardar PDF
    </button>
</div>
{% endblock %}