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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Quotation - {{ quotation_num }}-{{ version }}</title>
    <style>
        /* 
        =======================
        VARIABLES Y RESET
        =======================
        */
        :root {
            --primary-color: #003366;
            --secondary-color: #f8f9fa;
            --accent-color: #ff9900;
            --text-color: #333333;
            --border-color: #dddddd;
            --error-color: #ff5555;
            --success-color: #66ff66;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Arial', sans-serif;
        }

        body {
            color: var(--text-color);
            line-height: 1.6;
            font-size: 12px;
        }

        /* 
        =======================
        LAYOUT
        =======================
        */
        .container {
            max-width: 1140px;
            margin: 0 auto;
            padding: 20px;
        }

        .row {
            display: flex;
            flex-wrap: wrap;
            margin: 0 -15px;
        }

        .col-4 {
            flex: 0 0 33.333333%;
            max-width: 33.333333%;
            padding: 0 15px;
        }

        .col-6 {
            flex: 0 0 50%;
            max-width: 50%;
            padding: 0 15px;
        }

        .col-8 {
            flex: 0 0 66.666667%;
            max-width: 66.666667%;
            padding: 0 15px;
        }

        .col-12 {
            flex: 0 0 100%;
            max-width: 100%;
            padding: 0 15px;
        }

        .section {
            margin-bottom: 8px;
        }

        /* 
        =======================
        HEADER
        =======================
        */
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-bottom: 20px;
            border-bottom: 2px solid var(--primary-color);
            margin-bottom: 30px;
        }

        .logo {
            max-width: 200px;
        }

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

        /* 
        =======================
        TÍTULOS Y TEXTO
        =======================
        */
        .section-title {
            color: var(--primary-color);
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 1px;
            padding-bottom: 1px;
            border-bottom: 1px solid var(--border-color);
        }

        .info-title {
            font-weight: bold;
            color: var(--primary-color);
        }

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

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

        /* 
        =======================
        BOXES Y CONTENEDORES
        =======================
        */
        .info-box {
            margin-bottom: 10px;
        }

        .project-box {
            background-color: var(--secondary-color);
            padding: 15px;
            border-radius: 5px;
            border-left: 4px solid var(--primary-color);
        }

        .terms-box {
            background-color: var(--secondary-color);
            padding: 15px;
            border-radius: 5px;
            margin-bottom: 2px;
            font-size: 12px;
        }

        .terms-title {
            font-weight: bold;
            margin-bottom: 10px;
            color: var(--primary-color);
        }

        .Subtile-title {
            font-weight: bold;
            font-size: 14px;
            margin-top: 10px;
            margin-bottom: 2px;
            color: var(--primary-color);
        }

        .payment-details {
            background-color: var(--secondary-color);
            padding: 15px;
            border-radius: 5px;
            border-left: 4px solid var(--accent-color);
        }

        /* 
        =======================
        TABLAS 
        =======================
        */
        .specs-table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 3px;
        }

        .specs-table td {
            padding: 1.5px;
            vertical-align: top;
        }

        .specs-table tr:nth-child(even) {
            background-color: var(--secondary-color);
        }

        .specs-table .param {
            font-weight: bold;
            width: 40%;
        }

        /* Tabla de cotización */
        .quote-table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
            font-size: 10px;
        }

        .quote-table th {
            padding: 8px;
            text-align: left;
            border-bottom: 1px solid var(--border-color);
        }

        .quote-table td {
            padding: 1px;
            text-align: left;
            border-bottom: 1px solid var(--border-color);
        }

        .quote-table th {
            background-color: var(--primary-color);
            color: white;
        }

        .quote-table tr:nth-child(even) {
            background-color: var(--secondary-color);
        }

        /* Tabla de resumen */
        .summary-table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }

        .summary-table td {
            font-size: 11px;
        }

        .summary-table tr td:first-child {
            font-weight: normal;
        }

        .summary-table tr td:last-child {
            text-align: right;
        }

        .summary-table tr:last-child {
            font-weight: bold;
        }

        .quote-total {
            text-align: right;
            font-weight: bold;
            font-size: 12px;
        }

        /* 
        =======================
        BOTONES
        =======================
        */
        .send-btn {
            background-color: var(--primary-color);
            color: white;
            padding: 12px 30px;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            margin: 20px 0;
            transition: background-color 0.3s ease;
        }

        .send-btn:hover {
            background-color: #002244;
        }

        .send-btn:disabled {
            background-color: #cccccc;
            cursor: not-allowed;
        }

        /* 
        =======================
        OVERLAY DE CARGA
        =======================
        */
        .loading-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.7);
            z-index: 9999;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }

        .spinner-container {
            text-align: center;
            color: white;
        }

        .spinner {
            border: 5px solid rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            border-top: 5px solid white;
            width: 50px;
            height: 50px;
            margin: 0 auto 20px;
            animation: spin 1s linear infinite;
        }

        .status-message {
            font-size: 18px;
            font-weight: bold;
            margin-top: 15px;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        /* 
        =======================
        FOOTER
        =======================
        */
        .footer {
            margin-top: 30px;
            padding-top: 20px;
            border-top: 1px solid var(--border-color);
            font-size: 12px;
            text-align: center;
        }

        /* 
        =======================
        MEDIA QUERIES
        =======================
        */
        @media print {
            .send-btn {
                display: none;
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <!-- Company Header -->
        <div class="header">
            <div>
                <h1 style="color: var(--primary-color);">{{ empresa }}</h1>
            </div>
            <div class="company-info">
                <h1>IGSA CORP</h1>
                <p>5918 SANTA MARIA AVE</p>
                <p>LAREDO TEXAS 78041, USA</p>
                <p>Tax ID 74-2187362</p>
                <p>Tel: +19567914472</p>
            </div>
        </div>

        <!-- Client Information & Quotation Header -->
        <div class="section">
            <div class="row">
                <div class="col-6">
                    <div class="info-box">
                        <h2 class="section-title">CLIENT INFORMATION</h2>
                        <p><span class="info-title">COMPANY:</span> {{ cliente_nombre }}</p>
                        <p><span class="info-title">ADDRESS:</span> {{ cliente_direccion|default('N/A', true) }}</p>
                        <p><span class="info-title">CONTACT:</span> {{ tipo_contacto }}</p>
                        <p><span class="info-title">EMAIL:</span> {{ cliente_email }}</p>
                        <p><span class="info-title">TEL:</span> {{ cliente_telefono }}</p>
                    </div>
                </div>
                <div class="col-6">
                    <div class="project-box">
                        <h2 class="section-title">QUOTATION #{{ quotation_num }}-{{ version }}</h2>
                        <p><span class="info-title">DATE:</span> {{ fecha_actual }}</p>
                        <p><span class="info-title">CURRENCY:</span> {{ moneda }}</p>
                        <p><span class="info-title">TAX CODE:</span> {{ impuesto_codigo }}</p>
                        <div class="Subtile-title">SALES CONTACT INFORMATION:</div>
                        <p><span class="info-title">NAME:</span> {{ vendedor_asignado }}</p>
                        <p><span class="info-title">EMAIL:</span> {{ vendedor_email|default('ventas@igsa.com', true) }}</p>
                        <p><span class="info-title">PHONE:</span> {{ vendedor_telefono|default('N/A', true) }}</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Project Information -->
        {% if proyecto_nombre or proyecto_requerimientos %}
        <div class="section">
            <h2 class="section-title">PROJECT INFO</h2>
            <div class="payment-details">
                <div class="row">
                    <div class="col-12">
                        <p><span class="info-title">Project Name:</span> {{ proyecto_nombre|default('N/A', true) }}</p>
                        <p><span class="info-title">Customer Special Requirements:</span> {{ proyecto_requerimientos|default('N/A', true) }}</p>
                    </div>
                </div>
            </div>
        </div>
        {% endif %}

        <!-- Quotation Lines Table -->
        <div class="section">
            <h2 class="section-title">QUOTATION ITEMS</h2>
            <table class="quote-table">
                <thead>
                    <tr>
                        <th style="width: 5%;">LINE</th>
                        <th style="width: 15%;">PART NUMBER</th>
                        <th style="width: 35%;">DESCRIPTION</th>
                        <th style="width: 10%;">QTY</th>
                        <th style="width: 10%;">UOM</th>
                        <th style="width: 12.5%;">UNIT PRICE</th>
                        <th style="width: 12.5%;">AMOUNT</th>
                    </tr>
                </thead>
                <tbody>
                    {% for line in lineas %}
                    <tr>
                        <td>{{ line.QuotationLine }}</td>
                        <td>{{ line.PartNum }}</td>
                        <td>{{ line.PartDescription }}</td>
                        <td>{{ '{:,.2f}'.format(line.Qty) }}</td>
                        <td>{{ line.UOMCode }}</td>
                        <td>{{ moneda }} ${{ '{:,.2f}'.format(line.UnitPrice) }}</td>
                        <td>{{ moneda }} ${{ '{:,.2f}'.format(line.Amount) }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        <!-- Quote Summary -->
        <div class="section">
            <div class="row">
                <!-- Primera columna: Tabla de precios -->
                <div class="col-4">
                    <h2 class="section-title">QUOTE SUMMARY</h2>
                    <table class="summary-table">
                        <tr>
                            <td>List Price:</td>
                            <td class="text-right">{{ moneda }} ${{ '{:,.2f}'.format(precio_lista) }}</td>
                        </tr>
                        {% if descuento_porcentaje > 0 %}
                        <tr>
                            <td>Discount ({{ '{:.2f}'.format(descuento_porcentaje) }}%):</td>
                            <td class="text-right" style="color: var(--success-color);">
                                -{{ moneda }} ${{ '{:,.2f}'.format(monto_descuento) }}
                            </td>
                        </tr>
                        {% endif %}
                        <tr>
                            <td><strong>Subtotal:</strong></td>
                            <td class="text-right"><strong>{{ moneda }} ${{ '{:,.2f}'.format(precio_oferta) }}</strong></td>
                        </tr>
                        <tr>
                            <td>Tax ({{ impuesto_nombre }} {{ '{:.0f}'.format(impuesto_porcentaje) }}%):</td>
                            <td class="text-right">{{ moneda }} ${{ '{:,.2f}'.format(monto_impuesto) }}</td>
                        </tr>
                        <tr>
                            <td><strong>TOTAL ({{ moneda }}):</strong></td>
                            <td class="text-right"><strong>{{ moneda }} ${{ '{:,.2f}'.format(precio_total) }}</strong></td>
                        </tr>
                    </table>
                </div>

                <!-- Segunda columna: Términos y condiciones -->
                <div class="col-8">
                    <div class="terms-box">
                        <div class="terms-title">TERMS & CONDITIONS</div>
                        <p>This quotation is valid for a period of <strong>30 days</strong> from the date of issue. 
                            The following items are excluded from this quote: 
                            <em>sales tax, installation, permits, engineering, fuel, utility fees, offloading, 
                                start-up and testing, and installation of exhaust silencer if shipped separately.
                            </em>
                        </p>

                        <p>It is the responsibility of the distributor/purchaser and end user to ensure that this equipment is operated in full 
                            compliance with all applicable <strong>local, state, and federal laws and regulations</strong> governing the use and operation of this equipment.
                        </p>

                        <p>This proposal represents our interpretation of your requirements and includes only the items 
                            specifically listed in this quotation. Should there be additional requirements or specifications, 
                            we will provide a revised quote accordingly.
                        </p>

                        <p>Pricing is subject to review for accuracy at the time of order placement. 
                            <strong>IGSA Corp.</strong> cannot be held liable for any pricing errors resulting from software malfunctions or system errors.
                        </p>

                        <p>The prices of the products or services offered are 
                            <u>subject to change without prior notice</u> 
                            due to modifications in tariff laws or government regulations. In the event that such laws impact the cost of import, 
                            export, or any other price-related aspects, <u>the provider reserves the right to adjust pricing</u> 
                            for products or services in accordance with changes in applicable tariffs and regulations.
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Payment Terms -->
        <div class="section">
            <div class="row">
                <div class="col-6">
                    <div class="terms-box">
                        <div class="terms-title">PAYMENT TERMS</div>
                        <p>All prices are EXW Laredo Texas. IGSA Corp address 5918 Santa Maria Ave, Laredo Texas,
                            78041 Net 30 days with approved credit or 30% due to order and balance due to ship.</p>
                        <p>There are no order cancellations, refunds or exchanges. (in case of cancellation
                            acceptance, a 35% fee of the total amount will be charged to the client).</p>
                    </div>
                </div>
                <div class="col-6">
                    <div class="terms-box">
                        <div class="terms-title">WARRANTY TERMS</div>
                        <p>Please refer to IGSA POWER Warranty documents for details.</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Wiring Instructions -->
        <div class="section">
            <h2 class="section-title">WIRING INSTRUCTIONS</h2>
            <div class="payment-details">
                <div class="row">
                    <div class="col-6">
                        <p><span class="info-title">Beneficiary:</span> IGSA CORP</p>
                        <p><span class="info-title">Beneficiary address:</span> 5918 Santa Maria, Laredo, Texas,
                            78041-2905</p>
                        <p><span class="info-title">Account:</span> 703700701</p>
                        <p><span class="info-title">Bank:</span> International Bank of Commerce</p>
                    </div>
                    <div class="col-6">
                        <p><span class="info-title">Bank address:</span> 1200 San Bernardo Ave, Laredo, Texas, 78040
                        </p>
                        <p><span class="info-title">ABA/Routing:</span> 114902528</p>
                        <p><span class="info-title">SWIFT:</span> IBCLUS44</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Sales Contact Information -->
        <div class="section">
            <h2 class="section-title">SALES CONTACT INFORMATION</h2>
            <div class="payment-details">
                <div class="row">
                    <div class="col-6">
                        <p><span class="info-title">Name:</span> {{ vendedor_asignado }}</p>
                        <p><span class="info-title">Email:</span> {{ vendedor_email|default('ventas@igsa.com', true) }}</p>
                        <p><span class="info-title">Phone:</span> {{ vendedor_telefono|default('N/A', true) }}</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Footer -->
        <div class="footer">
            <p>IGSA CORP | Tel: +19567914472 | 5918 SANTA MARIA AVE, LAREDO TEXAS 78041, USA</p>
            <p>This quotation is confidential and intended only for the recipient. Reproduction in whole or in part
                is prohibited.</p>
        </div>
    </div>

</body>

</html>