<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <title>Descarga de Factura {{ invoice_number }}</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            font-size: 8pt;
        }

        .header-table {
            width: 100%;
            border-bottom: 2px solid black;
            margin-bottom: 10px;
        }

        .title {
            font-weight: bold;
            font-size: 12pt;
        }

        .company-info {
            text-align: center;
        }

        .page-info {
            text-align: right;
            font-size: 8pt;
        }

        /* Main Table */
        .main-table {
            width: 100%;
            border-collapse: collapse;
        }

        .main-table th {
            border: 1px solid black;
            background-color: #f0f0f0;
            padding: 3px;
            font-size: 7pt;
            text-align: left;
        }

        .main-table td {
            border-left: 1px solid black;
            border-right: 1px solid black;
            padding: 3px;
            vertical-align: top;
        }

        .row-border-bottom td {
            border-bottom: 1px solid black;
        }

        .totals-row td {
            border-top: 1px solid black;
            border-bottom: 1px solid black;
            font-weight: bold;
            text-align: right;
        }

        .sub-header {
            font-weight: bold;
            padding: 5px 0;
            border-left: 1px solid black;
            border-right: 1px solid black;
        }

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

        .text-center {
            text-align: center;
        }
    </style>
</head>

<body>

    <!-- Header -->
    <table class="header-table">
        <tr>
            <td style="width: 30%;">
                <span class="title">DESCARGA DE LA FACTURA: {{ invoice_number }}</span>
            </td>
            <td style="width: 40%;" class="company-info">
                <strong>{{ company_name }}</strong><br>
                {{ company_address }}<br>
                R.F.C.: {{ company_rfc }}, IMMEX: {{ company_immex }}
            </td>
            <td style="width: 30%;" class="page-info">
                Page/Página: <span class="page"></span> Of/de <span class="topage"></span>
            </td>
        </tr>
    </table>

    <div style="margin-bottom: 5px;">La factura se descargo de:</div>

    <table class="main-table">
        <thead>
            <tr>
                <th style="width: 12%;">No. Pedimento<br>Fecha de Pago</th>
                <th style="width: 10%;">Import Invoice/<br>Factura de Impo.</th>
                <th style="width: 15%; border-right: none;">Part Number/No. de Parte<br>Description/Descripción</th>
                <th style="width: 10%; border-left: none;">Fracción<br>(Origen-Prefer.-Sector)</th>
                <th style="width: 8%;">Quantity/<br>Cantidad U.M.</th>
                <th style="width: 8%;">Net Weight/<br>Peso Neto (KGS)</th>
                <th style="width: 8%;">Value/Valor M.N.<br>MXP/Pesos</th>
                <th style="width: 8%;">Value/Valor M.E.<br>USD/Dolares</th>
                <th style="width: 8%;">Value/Monto IGI<br>USD/Dolares</th>
                <th style="width: 5%;">Se<br>Pagó</th>
                <th style="width: 5%;">Linea Expo<br>Expo Line</th>
            </tr>
        </thead>
        <tbody>
            <!-- Loops Items -->
            {% for item in items %}
            <tr class="{{ 'row-border-bottom' if loop.last else '' }}">
                <td>
                    <div style="font-weight: bold;">{{ item.pedimento_numero }}</div>
                    <table style="width: 100%; border: none; margin-top: 2px; border-collapse: collapse;">
                        <tr>
                            <td style="border: none; padding: 0; font-size: 6.5pt; text-align: left; width: 30%;">{{
                                item.pedimento_clave }}</td>
                            <td style="border: none; padding: 0; font-size: 6.5pt; text-align: right; width: 70%;">{{
                                item.pedimento_fecha_pago }}</td>
                        </tr>
                    </table>
                </td>
                <td>{{ item.factura_impo }}</td>
                <td style="border-right: none;">
                    <b>{{ item.numero_parte }}</b><br>
                    {{ item.descripcion }}
                </td>
                <td style="font-size: 6pt; border-left: none;">
                    {{ item.fraccion }}<br>
                    {{ item.origen_pref_sector }}
                </td>
                <td class="text-right">
                    {{ item.cantidad }} {{ item.unidad_medida }}
                </td>
                <td class="text-right">{{ item.peso_neto }}</td>
                <td class="text-right">{{ item.valor_mn }}</td>
                <td class="text-right">{{ item.valor_me }}</td>
                <td class="text-right">{{ item.valor_igi }}</td>
                <td class="text-center">{{ item.se_pago }}</td>
                <td class="text-center">{{ item.linea_expo }}</td>
            </tr>
            {% endfor %}

            <!-- Sub Totals -->
            <tr class="totals-row">
                <td colspan="4" class="text-center">Totales de los Comp. Temporales:</td>
                <td class="text-right">{{ total_cantidad }}</td>
                <td class="text-right">{{ total_peso }}</td>
                <td class="text-right">{{ total_valor_mn }}</td>
                <td class="text-right">{{ total_valor_me }}</td>
                <td class="text-right">{{ total_igi }}</td>
                <td class="text-center"></td>
                <td class="text-center"></td>
            </tr>

            <!-- Grand Totals -->
            <tr class="totals-row" style="border-top: 2px solid black;">
                <td colspan="4" class="text-center" style="font-size: 9pt;">TOTALES:</td>
                <td class="text-right">{{ total_cantidad }}</td>
                <td class="text-right">{{ total_peso }}</td>
                <td class="text-right">{{ total_valor_mn }}</td>
                <td class="text-right">{{ total_valor_me }}</td>
                <td class="text-right">{{ total_igi }}</td>
                <td class="text-center"></td>
                <td class="text-center"></td>
            </tr>

        </tbody>
    </table>

</body>

</html>