<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Comprobante de Transporte</title>
    <style>
        @page {
            size: letter landscape;
            margin: 2cm;
        }
        body {
            font-family: "Courier New", Courier, monospace;
            font-size: 10pt;
            line-height: 1.2;
            margin: 0;
            padding: 0;
        }
        .container {
            width: 100%;
            min-height: 17cm;
            position: relative;
        }
        .header-top {
            margin-bottom: 15px;
        }
        .header-table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }
        .header-table td {
            width: 40%;
            padding: 0;
            vertical-align: top;
        }
        .header-table td:first-child {
            text-align: left;
            white-space: nowrap;
        }
        .header-table td:last-child {
            text-align: right;
        }
        .header-table p {
            margin: 0;
            font-size: 10pt;
        }
        .slogan {
            text-align: center;
            margin: 20px 0;
        }
        .main-table {
            width: 90%;
            border-collapse: collapse;
            margin: 30px auto;
            table-layout: fixed; /* Fuerza anchos fijos */
        }
        .main-table th, .main-table td {
            border: 1px solid black;
            padding: 2px;
            text-align: center;
            font-size: 7pt; /* Tamaño más pequeño para ajustar */
            word-wrap: break-word; /* Permite ajustar texto largo */
            overflow: hidden; /* Oculta exceso si es necesario */
            white-space: normal; /* Permite múltiples líneas */
        }
        .main-table th {
            font-weight: bold;
        }
        /* Ajuste de anchos proporcionales */
        .main-table col:nth-child(1) { width: 1%; }
        .main-table col:nth-child(2) { width: 14%; }
        .main-table col:nth-child(3) { width: 8%; }
        .main-table col:nth-child(4) { width: 7%; }
        .main-table col:nth-child(5) { width: 12%; }
        .main-table col:nth-child(6) { width: 4%; }
        .main-table col:nth-child(7) { width: 20%; }
        .main-table col:nth-child(8) { width: 15%; }
        .main-table col:nth-child(9) { width: 15%; }
        .firmas-table {
            width: 100%;
            border-collapse: collapse;
            position: absolute;
            bottom: 0;
            margin-bottom: 0;
            font-size: 8pt;
            margin-top: 150px;
            color: rgba(0, 0, 0, 0.5);
        }
        .firmas-table td {
            width: 33.33%;
            text-align: center;
            padding: 3px;
            border: none;
            vertical-align: top;
        }
        .firmas-table p {
            margin: 0;
        }
        .footer {
            position: absolute;
            bottom: 0;
            width: 100%;
            text-align: center;
            font-size: 8pt;
            color: rgba(0, 0, 0, 0.5);
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header-top">
            <p><strong>54 BIENES EN DEPÓSITO</strong></p>
        </div>

        <table class="header-table">
            <tr>
                <td>
                    <p><strong>DEL:</strong> SERVICIO DE TRANSPORTE DEL EJÉRCITO BOLIVARIANO</p>

                   
                    <p><strong>PARA:</strong> {{ unidad_nombre }}</p>
                   
                </td>
                <td></td>
                <td>
                    <p><strong>COMPROBANTE N°:</strong> _______</p>
                    <p><strong>CARACAS, 18 JULIO DEL 2024</strong></p>
                </td>
            </tr>
        </table>

        <div class="slogan">
            <p><strong>CERECOSE / TRANSPORTE</strong></p>
        </div>

        <table class="main-table">
            <colgroup>
                <col />
                <col />
                <col />
                <col />
                <col />
                <col />
                <col />
                <col />
                <col />
            </colgroup>
            <thead>
                <tr>
                    <th>N°</th>
                    <th>VEHÍCULO</th>
                    <th>MODELO</th>
                    <th>MARCA</th>
                    <th>COLOR</th>
                    <th>AÑO</th>
                    <th>SERIAL DE CARROCERÍA</th>
                    <th>SERIAL DEL MOTOR</th>
                    <th>SERIAL</th>
                </tr>
            </thead>
            <tbody>

                {% for asignaciones in asignaciones  %}
                    
                <tr>
                    <td>01</td>
                    <td>ADMINISTRATIVO</td>
                    <td>HILUX</td>
                    <td>TOYOTA</td>
                    <td>VERDE MILITAR</td>
                    <td>1981</td>
                    <td>WRODXSCDIP2529855</td>
                    <td>2TRB055068</td>
                    <td>EJB2859</td>
                </tr>

                {% endfor %}
            </tbody>
        </table>

        <table class="firmas-table">
            <tr>
                <td>
 		  {% if jefe %}
                    <p><strong>{{ jefe.nombres }}</strong></p>
                    <p><strong> {{ jefe.grado }} </strong></p>
                    <p><strong>{{ jefe.cargos }}</strong></p>
 		    {% else %}
                        Jefe no disponible
                    {% endif %}
                </td>
                <td>
 		{% if director %}
                    <p><strong>{{ director.nombres }}</strong></p>
                    <p><strong>{{ director.grado }}</strong></p>
                    <p><strong>{{ director.cargos }}</strong></p>
 		{% else %}
                        Director no disponible
                    {% endif %}
                </td>
                <td>
                    <p><strong>RECIBIDO POR:</strong></p>
                    <p><strong>GRADO:</strong> __________________</p>
                    <p><strong>NOMBRE:</strong> _________________</p>
                    <p><strong>FIRMA:</strong> ____________________</p>
                </td>
            </tr>
        </table>
    </div>

    <div class="footer">
        <p><strong>CHÁVEZ VIVE LA PATRIA SIGUE INDEPENDENCIA Y PATRIA SOCIALISTA… VIVIREMOS Y VENCEREMOS</strong></p>
    </div>
</body>
</html>