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

<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <title>Packing List - {{ factura.numero }}</title>
    <style type="text/css">
        /* ESTILOS EXACTOS DE SCAPII PARA MANTENER EL FORMATO */
        * {
            margin: 0;
            padding: 0;
            font-family: Tahoma, sans-serif;
            color: black;
        }

        .titulo {
            font-size: 14pt;
            padding: 3pt 0 0 6pt;
        }

        .grande {
            font-size: 13pt;
            padding-left: 5pt;
        }

        .medio-bold {
            font-size: 9pt;
            font-weight: bold;
            padding: 3pt 0 0 3pt;
        }

        .normal {
            font-size: 8pt;
        }

        .small-bold {
            font-size: 8pt;
            font-weight: bold;
        }

        .tiny-bold {
            font-size: 7pt;
            font-weight: bold;
        }

        .tiny {
            font-size: 7pt;
        }

        .mini {
            font-size: 5pt;
        }

        h1 {
            font-weight: bold;
            font-size: 8pt;
        }

        p {
            font-size: 7pt;
        }

        .cliente {
            border-bottom: 1pt solid black;
            text-decoration: none;
            display: block;
            width: 100%
        }

        .center {
            text-align: center;
        }

        .right {
            text-align: right;
        }

        .border {
            border: 1pt solid #808080;
        }

        .p-t-1 {
            padding-top: 1pt;
        }

        .p-t-2 {
            padding-top: 2pt;
        }

        .p-t-3 {
            padding-top: 3pt;
        }

        .p-t-4 {
            padding-top: 4pt;
        }

        .p-t-5 {
            padding-top: 5pt;
        }

        .p-t-8 {
            padding-top: 8pt;
        }

        .p-t-9 {
            padding-top: 9pt;
        }

        .p-l-2 {
            padding-left: 2pt;
        }

        .p-l-3 {
            padding-left: 3pt;
        }

        .p-l-5 {
            padding-left: 5pt;
        }

        .p-l-6 {
            padding-left: 6pt;
        }

        .p-l-7 {
            padding-left: 7pt;
        }

        .p-l-8 {
            padding-left: 8pt;
        }

        .p-l-9 {
            padding-left: 9pt;
        }

        .p-l-10 {
            padding-left: 10pt;
        }

        .p-r-1 {
            padding-right: 1pt;
        }

        .p-r-2 {
            padding-right: 2pt;
        }

        .p-r-4 {
            padding-right: 4pt;
        }

        .p-r-5 {
            padding-right: 5pt;
        }

        .p-r-9 {
            padding-right: 9pt;
        }

        .p-b-1 {
            padding-bottom: 1pt;
        }

        .h-10 {
            height: 10pt;
        }

        .h-11 {
            height: 11pt;
        }

        .h-14 {
            height: 14pt;
        }

        .h-15 {
            height: 15pt;
        }

        .h-18 {
            height: 18pt;
        }

        .h-22 {
            height: 22pt;
        }

        .h-82 {
            height: 82pt;
        }

        .h-384 {
            height: 384pt;
        }

        .line-1 {
            line-height: 1pt;
        }

        .line-7 {
            line-height: 7pt;
        }

        .line-8 {
            line-height: 8pt;
        }

        .line-9 {
            line-height: 9pt;
        }

        .line-10 {
            line-height: 10pt;
        }

        .m-l-3 {
            margin-left: 3pt;
        }

        .m-l-5 {
            margin-left: 5.74pt;
        }

        .flex-container {
            width: 100%;
            overflow: hidden;
        }

        .flex-container-end {
            width: 100%;
            overflow: hidden;
        }

        .width-48 {
            width: 48%;
            float: left;
        }

        .width-48-right {
            width: 48%;
            float: right;
            text-align: right;
        }

        .position-relative-centered {
            position: relative;
            width: 48%;
            float: left;
        }

        .full-width-block {
            display: block;
            width: 100%;
        }

        .clearfix::after {
            content: "";
            display: table;
            clear: both;
        }

        table,
        tbody {
            vertical-align: top;
            overflow: visible;
        }
    </style>
</head>

<body>
    <header>
        <div class="flex-container clearfix">
            <div class="width-48" style="position: relative;">
                <p class="titulo">PACKING LIST / LISTA DE EMPAQUE</p>
                <div class="cliente" style="height: 1px;"></div>
                <p class="cliente p-t-1 p-b-1"></p>
            </div>
            <div class="width-48-right">
                <table cellspacing="0" class="m-l-3" style="float: right; text-align: left;">
                    <tbody>
                        <tr class="h-22">
                            <td bgcolor="#E4E4E4" class="border" style="width:100pt">
                                <p class="medio-bold p-l-3 line-9">PACKING LIST / LISTA DE EMPAQUE:</p>
                            </td>
                            <td class="border" colspan="3" style="width:128pt">
                                <p class="grande p-l-5">{{ factura.numero }}</p>
                            </td>
                        </tr>
                        <tr class="h-22">
                            <td bgcolor="#E4E4E4" class="border">
                                <p class="small-bold p-l-3 line-9">MX CUSTOM BROKER / AGENTE ADUANAL MEXICANO:</p>
                            </td>
                            <td class="border" colspan="3">
                                <p class="normal p-l-5">{{ factura.agente_aduanal or '' }}</p>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="flex-container-end clearfix" style="overflow: visible;">
            <div class="position-relative-centered">
                {% if logo_b64 %}
                <div style="position: absolute; top: 10pt; left: 0;">
                    <img src="{{ logo_b64 }}" style="max-height: 70pt; max-width: 120pt;" />
                </div>
                {% endif %}
                <div style="margin-left: 130pt; padding-top: 5pt; text-align: left;">
                    <h1 class="cliente">{{ cliente_proveedor.header }}</h1>
                    <p>{{ cliente_proveedor.nombre }}</p>
                    <p>{{ cliente_proveedor.direccion }}
                        {% if cliente_proveedor.num_exterior %} Ext: {{ cliente_proveedor.num_exterior }}{% endif %}
                        {% if cliente_proveedor.num_interior %} Int: {{ cliente_proveedor.num_interior }}{% endif %}
                    </p>
                    <p>{{ cliente_proveedor.colonia }} {% if cliente_proveedor.codigo_postal %} CP: {{
                        cliente_proveedor.codigo_postal }}{% endif %}</p>
                    <p>{{ cliente_proveedor.ciudad }}, {{ cliente_proveedor.estado }}, {{ cliente_proveedor.pais }}</p>
                    <p>TAX ID: {{ cliente_proveedor.tax_id }}
                        {% if cliente_proveedor.programa and cliente_proveedor.programa != 'Ninguno' %}
                        {{ cliente_proveedor.programa }}: {{ cliente_proveedor.autorizacion }}
                        {% endif %}
                    </p>
                    <p><br></p>
                </div>
            </div>


        </div>

        <div class="flex-container clearfix">
            <div class="width-48">
                <h1 class="p-t-5 p-l-5 line-10 cliente">{{ cliente_vendido.header }}</h1>
                <p class="p-l-5 line-8">{{ cliente_vendido.nombre }}</p>
                <p class="p-l-5">{{ cliente_vendido.direccion }}
                    {% if cliente_vendido.num_exterior %} Ext: {{ cliente_vendido.num_exterior }}{% endif %}
                    {% if cliente_vendido.num_interior %} Int: {{ cliente_vendido.num_interior }}{% endif %}
                </p>
                <p class="p-l-5">{{ cliente_vendido.colonia }} {% if cliente_vendido.codigo_postal %} CP: {{
                    cliente_vendido.codigo_postal }}{% endif %}</p>
                <p class="p-l-5">{{ cliente_vendido.ciudad }}, {{ cliente_vendido.estado }}, {{ cliente_vendido.pais }}
                </p>
                <p class="p-l-5">RFC: {{ cliente_vendido.tax_id }}
                    {% if cliente_vendido.programa and cliente_vendido.programa != 'Ninguno' %}
                    {{ cliente_vendido.programa }}: {{ cliente_vendido.autorizacion }}
                    {% endif %}
                </p>
                <p class="p-l-5">
                    {% if cliente_vendido.prosec %}PROSEC: {{ cliente_vendido.prosec }} {% endif %}
                    {% if cliente_vendido.reg_emp %}REG EMP: {{ cliente_vendido.reg_emp }} {% endif %}
                    {% if cliente_vendido.cert %}CERT: {{ cliente_vendido.cert }}{% endif %}
                </p>
            </div>

            <div class="width-48-right" style="text-align: left;">
                <h1 class="p-t-5 p-l-5 line-10 cliente full-width-block">{{ cliente_enviado.header }}</h1>
                <p class="p-l-5 line-8">{{ cliente_enviado.nombre }}</p>
                <p class="p-l-5">{{ cliente_enviado.direccion }}
                    {% if cliente_enviado.num_exterior %} Ext: {{ cliente_enviado.num_exterior }}{% endif %}
                    {% if cliente_enviado.num_interior %} Int: {{ cliente_enviado.num_interior }}{% endif %}
                </p>
                <p class="p-l-5">{{ cliente_enviado.colonia }} {% if cliente_enviado.codigo_postal %} CP: {{
                    cliente_enviado.codigo_postal }}{% endif %}</p>
                <p class="p-l-5">{{ cliente_enviado.ciudad }}, {{ cliente_enviado.estado }}, {{ cliente_enviado.pais }}
                </p>
                <p class="p-l-5">RFC: {{ cliente_enviado.tax_id }}
                    {% if cliente_enviado.programa and cliente_enviado.programa != 'Ninguno' %}
                    {{ cliente_enviado.programa }}: {{ cliente_enviado.autorizacion }}
                    {% endif %}
                </p>
                <p class="p-l-5">
                    {% if cliente_enviado.prosec %}PROSEC: {{ cliente_enviado.prosec }} {% endif %}
                    {% if cliente_enviado.reg_emp %}REG EMP: {{ cliente_enviado.reg_emp }} {% endif %}
                    {% if cliente_enviado.cert %}CERT: {{ cliente_enviado.cert }}{% endif %}
                </p>
            </div>
        </div>
        <p class="p-t-8"><br /></p>
    </header>

    <table cellspacing="0" class="m-l-5" style="width: 99%; max-width: 580pt;">
        <thead>
            <!-- TABLA DE TRANSPORTES ELIMINADA POR SOLICITUD DEL USUARIO -->

            <tr class="h-10">
                <td class="border" rowspan="2">
                    <p class="tiny-bold p-t-5 center">Line / Línea</p>
                </td>
                <td class="border" rowspan="2" colspan="2">
                    <p class="tiny-bold p-l-2 line-10">Part Number / Número de Parte</p>
                    <p class="tiny-bold p-l-2 line-10">Description / Descripción</p>
                </td>
                <td class="border" colspan="2">
                    <p class="tiny-bold center line-9">Quantity / Cantidad</p>
                </td>
                <td class="border" colspan="2" style="width:60pt">
                    <p class="tiny-bold center line-9">Packing / Empaque</p>
                </td>
                <td class="border" colspan="2">
                    <p class="tiny-bold center line-9">Weight / Peso (KGS)</p>
                </td>
                <!-- COLUMNA VALORES REMOVIDA -->
            </tr>
            <tr class="h-11">
                <!-- Subheaders -->
                <td class="border center">
                    <p class="mini p-l-2">Qty / Cant.</p>
                </td>
                <td class="border center">
                    <p class="mini p-l-1">U.M.</p>
                </td>
                <td class="border">
                    <p class="mini center">Qty / Cant.</p>
                </td>
                <td class="border">
                    <p class="mini center">Type / Tipo</p>
                </td>
                <td class="border">
                    <p class="mini center">Net / Neto</p>
                    <p class="mini center font-bold" style="font-size: 4pt;">(LBS / KGS)</p>
                </td>
                <td class="border">
                    <p class="mini center">Gross / Bruto</p>
                    <p class="mini center font-bold" style="font-size: 4pt;">(LBS / KGS)</p>
                </td>
            </tr>
        </thead>

        <tbody class="h-384" style="width: 100%;">
            {% for partida in partidas %}
            <tr>
                <td class="border" style="width: 25pt;">
                    <p class="mini p-t-3 center">{{ loop.index }}</p>
                </td>
                <td class="border" colspan="2">
                    <p class="mini p-t-1" style="font-weight: bold;">{{ partida.numero_parte }}</p>
                    <p class="mini">{{ partida.descripcion }} / {{ partida.fraccion_americana }} / {{ partida.origen }}
                    </p>
                </td>
                <td class="border">
                    <p class="mini p-t-2 center">{{ partida.cantidad_importacion }}</p>
                </td>
                <td class="border">
                    <p class="mini p-t-2 center">{{ partida.unidad_medida }}</p>
                </td>
                <td class="border">
                    <p class="mini p-t-2 center">
                        {% if partida.cantidad_bultos != 0 %}{{ partida.cantidad_bultos }}{% endif %}
                    </p>
                </td>
                <td class="border">
                    <p class="mini p-t-2 center">
                        {{ partida.clave_bultos }}
                    </p>
                </td>
                <td class="border">
                    <p class="mini p-t-1 center">{{ partida.peso_neto_lbs }}</p>
                    <p class="mini center font-bold">{{ partida.peso_neto }}</p>
                </td>
                <td class="border">
                    <p class="mini p-t-1 center">{{ partida.peso_bruto_lbs }}</p>
                    <p class="mini center font-bold">{{ partida.peso_bruto }}</p>
                </td>
            </tr>
            {% endfor %}
        </tbody>

        <tfoot>
            <tr class="h-14">
                <td bgcolor="#E4E4E4" class="border" colspan="3" style="width:123pt">
                    <p class="small-bold p-t-2 p-l-3 line-10">
                        <span>Observaciones:</span>
                        <span class="small-bold" style="float: right; margin-right: 2pt;">TOTALES</span>
                    </p>
                </td>
                <td class="border" style="width:40pt">
                    <p class="mini p-t-3 p-r-1 line-8 center">{{ totales.cantidad_total }}</p>
                </td>
                <td class="border" style="width:22pt"></td>
                <td class="border" style="width:30pt">
                    <p class="mini p-t-3 center line-8">
                        {% if totales.bultos_total != 0 %}{{ totales.bultos_total }}{% endif %}
                    </p>
                </td>
                <td class="border" style="width:30pt">
                    <p class="mini p-t-3 center line-8">
                        <span>{{ totales.clave_bultos or '' }}</span>
                    </p>
                </td>
                <td class="border" style="width:40pt">
                    <p class="mini p-t-2 center line-8">{{ totales.peso_neto_total_lbs }} LBS</p>
                    <p class="mini center line-8 font-bold">{{ totales.peso_neto_total }} KGS</p>
                </td>
                <td class="border" style="width:40pt">
                    <p class="mini p-t-2 center line-8">{{ totales.peso_bruto_total_lbs }} LBS</p>
                    <p class="mini center line-8 font-bold">{{ totales.peso_bruto_total }} KGS</p>
                </td>
            </tr>
            <tr>
                <td colspan="3" class="border" style="height: 100pt; text-align:start; vertical-align: top;">
                    <p class="mini p-l-2 p-t-2">{{ factura.observaciones }}</p>
                </td>
                <td colspan="5" style="width:336pt; vertical-align: bottom; height: 100%;">
                    <p style="border-bottom: 1pt solid black; width: 80%; margin: 0 auto 2pt auto;"></p>
                    <p class="normal center" style="margin-bottom: 0;">{{ cliente_proveedor.nombre }}</p>
                    <p style="margin-bottom: 0;"><br /></p>
                </td>
            </tr>
            <tr>
                <td colspan="10" style="width:580pt; vertical-align: top; height: 100%;">
                    <p class="p-t-8"><br /></p>
                </td>
            </tr>
        </tfoot>
    </table>
</body>

</html>