<!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: 98%;
            border-collapse: collapse;
            margin: 20px auto;
            table-layout: fixed;
        }
        .main-table th, .main-table td {
            border: 1px solid black;
            padding: 2px;
            text-align: center;
            font-size: 7pt;
            word-wrap: break-word;
            white-space: normal;
        }
        .main-table th {
            font-weight: bold;
            background-color: #f0f0f0;
        }
        .main-table col:nth-child(1) { width: 4%; }
        .main-table col:nth-child(2) { width: 10%; }
        .main-table col:nth-child(3) { width: 10%; }
        .main-table col:nth-child(4) { width: 10%; }
        .main-table col:nth-child(5) { width: 8%; }
        .main-table col:nth-child(6) { width: 5%; }
        .main-table col:nth-child(7) { width: 18%; }
        .main-table col:nth-child(8) { width: 18%; }
        .main-table col:nth-child(9) { width: 12%; }
        

        .firmas-table {
            width: 100%;
            border-collapse: collapse;
            position: absolute;
            bottom: 0;
            margin-bottom: 0;
            font-size: 10pt;
            margin-top: 100px;
            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> {% if asignaciones %}{{ asignaciones.first.comprobante }}{% else %}_______{% endif %}</p>
                    <p><strong>CARACAS, {{ asignaciones.first.fecha_creacion|date:"d F Y"|upper }}</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><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>PLACA MILITAR</th>
                    <th>PRECIO</th>
                </tr>
            </thead>
            <tbody>
                {% for asignacion in asignaciones %}
                <tr>
                    <td>{{ forloop.counter }}</td>
                    <td>{{ asignacion.vehiculo.tipo_vehiculo|default:"-" }}</td>
                    <td>{{ asignacion.vehiculo.modelo|default:"-" }}</td>
                    <td>{{ asignacion.vehiculo.marca|default:"-" }}</td>
                    <td>{{ asignacion.vehiculo.color|default:"-" }}</td>
                    <td>{{ asignacion.vehiculo.ano|default:"-" }}</td>
                    <td>{{ asignacion.vehiculo.serial_carroceria|default_if_none:"-" }}</td>
                    <td>{{ asignacion.vehiculo.placa_militar|default:"-" }}</td>
                    <td>{{ asignacion.precio|floatformat:2 }}</td>
                </tr>
                {% empty %}
                <tr>
                    <td colspan="10">No hay asignaciones disponibles</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 %}
                    <p>Jefe no disponible</p>
                    {% endif %}
                </td>
                <td>
                    {% if director %}
                    <p><strong>{{ director.nombres }}</strong></p>
                    <p><strong>{{ director.grado }}</strong></p>
                    <p><strong>{{ director.cargos }}</strong></p>
                    {% else %}
                    <p>Director no disponible</p>
                    {% 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>