<!--
Archivo: VEUcotizadorbase.html
Ruta: src\templates\Ventas\VentasEUA\VEUcotizadorbase.html
Lenguaje: HTML
-->

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Quote - Generator Set</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);
        }

        /* 
        =======================
        IMÁGENES
        =======================
        */
        .product-image {
            max-width: 100%;
            height: auto;
            border-radius: 5px;
            border: 1px solid var(--border-color);
        }

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

        .specs-table td {
            padding: 1.5px;
            /* Reducido de 5px a 3px */
            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;
            /* Reducido de 10px a 6px */
            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;
            ;
            /* Añadido padding específico */
        }

        .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>
                <img src="{{ url_for('static', filename='img/aDisenoGral/LogoIGSAPowerAzul.png') }}"
                    alt="IGSA CORP Logo" class="logo">
            </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 -->
        <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> {{ data.Customer.CustomerCompany }} </p>
                        <p><span class="info-title">ADDRESS:</span> {{ data.Customer.CustomerAddress }}</p>
                        <p><span class="info-title">CONTACT:</span> {{ data.Customer.CustomerContact }}</p>
                        <p><span class="info-title">EMAIL:</span> {{ data.Customer.CustomerEmail }}</p>
                        <p><span class="info-title">TEL:</span> {{ data.Customer.CustomerTel }}</p>
                    </div>
                </div>
                <div class="col-6">
                    <div class="project-box">
                        <h2 class="section-title">QUOTATION #{{ data.quote_id }}</h2>
                        <p><span class="info-title">DATE:</span> {{ data.date.DATE }}</p>
                        <div class="Subtile-title">SALES CONTACT INFORMATION:</div>
                        <p><span class="info-title">NAME:</span> {{ data.Seller.SellerName }} </p>
                        <p><span class="info-title">EMAIL:</span> {{ data.Seller.SellerEmail }} </p>
                        <p><span class="info-title">PHONE:</span> {{ data.Seller.SellerPhone }} </p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Project information -->
        <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> {{ data.project_info.project }}</p>
                        <p><span class="info-title">Customer Special Requirements:</span> {{
                            data.project_info.customer_requirements }}</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Generator Set Specifications -->
        <div class="section">
            <h2 class="section-title">GENERATOR SET</h2>
            <div class="row">
                <div class="col-8">
                    <table class="specs-table">
                        <tr>
                            <td class="param">MODEL:</td>
                            <td>{{ data.general_info.Genset_model }}</td>
                        </tr>
                        <tr>
                            <td class="param">FUEL TYPE:</td>
                            <td>{{ data.general_info.FuelTypeFront }}</td>
                        </tr>
                        <tr>
                            <td class="param">STANDBY:</td>
                            <td>{{ data.general_info.KWOutput }} KW</td>
                        </tr>
                        <tr>
                            <td class="param">FREQUENCY:</td>
                            <td>{{ data.general_info.Frecuency }}</td>
                        </tr>
                        <tr>
                            <td class="param">VOLTAGE:</td>
                            <td>{{ data.general_info.VoltageID }} V</td>
                        </tr>
                        <tr>
                            <td class="param">PHASE:</td>
                            <td>{{ data.general_info.Phases }}</td>
                        </tr>
                        <tr>
                            <td class="param">CERTIFICATION:</td>
                            <td>{{ data.general_info.Certification }}</td>
                        </tr>
                    </table>
                </div>
                <div class="col-4">
                    <img src="{{ url_for('static', filename='img/Ventas/VentasEUA/PlantaEstandar.png') }}"
                        alt="Generator Set Image" class="product-image">
                </div>
            </div>
        </div>

        <!-- Engine Specifications -->
        <div class="section">
            <h2 class="section-title">ENGINE</h2>
            <div class="row">
                <div class="col-6">
                    <table class="specs-table">
                        <tr>
                            <td class="param">BRAND:</td>
                            <td>{{ data.engine.EngineBrand }}</td>
                        </tr>
                        <tr>
                            <td class="param">MODEL:</td>
                            <td>{{ data.engine.EngineModel }}</td>
                        </tr>
                        <tr>
                            <td class="param">EXHAUST EMISSIONS:</td>
                            <td>EPA TIER {{ data.engine.specifications.Engine_Tier }}</td>
                        </tr>
                        <tr>
                            <td class="param">RPM:</td>
                            <td>{{ data.engine.specifications.Engine_Rpm }}</td>
                        </tr>
                        <tr>
                            <td class="param">STANDBY POWER:</td>
                            <td>{{ data.engine.specifications.Engine_Power }}</td>
                        </tr>
                    </table>
                </div>
                <div class="col-6">
                    <table class="specs-table">
                        <tr>
                            <td class="param">NUMBER OF CYLINDERS:</td>
                            <td>{{ data.engine.specifications.Engine_NumberOfCylinder }}</td>
                        </tr>
                        <tr>
                            <td class="param">ASPIRATION:</td>
                            <td>{{ data.engine.specifications.Engine_Aspiration }}</td>
                        </tr>
                        <tr>
                            <td class="param">GOVERNOR TYPE:</td>
                            <td>{{ data.engine.specifications.Engine_Governor_type }}</td>
                        </tr>
                        <tr>
                            <td class="param">CONTROL VOLTAGE:</td>
                            <td>{{ data.engine.specifications.Engine_Control_voltage }} V</td>
                        </tr>
                        <tr>
                            <td class="param">RADIATOR AMBIENT TEMPERATURE:</td>
                            <td>{{ data.engine.specifications.Engine_RadiatorTemp }}</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>

        <!-- Alternator Specifications -->
        <div class="section">
            <h2 class="section-title">ALTERNATOR</h2>
            <div class="row">
                <div class="col-6">
                    <table class="specs-table">
                        <tr>
                            <td class="param">BRAND:</td>
                            <td>{{ data.alternator.AlternatorBrand }}</td>
                        </tr>
                        <tr>
                            <td class="param">MODEL:</td>
                            <td>{{ data.alternator.AlternatorModel }}</td>
                        </tr>
                        <tr>
                            <td class="param">PHASES:</td>
                            <td>{{ data.general_info.Phases }}</td>
                        </tr>
                        <tr>
                            <td class="param">POWER FACTOR:</td>
                            <td>{{ data.alternator.specifications.Altern_Powerfactor }}</td>
                        </tr>
                        <tr>
                            <td class="param">INSULATION SYSTEM:</td>
                            <td>{{ data.alternator.specifications.Altern_Insulation_Sys }}</td>
                        </tr>
                    </table>
                </div>
                <div class="col-6">
                    <table class="specs-table">
                        <tr>
                            <td class="param">CONTROL SYSTEM:</td>
                            <td>{{ data.alternator.specifications.Altern_Control_System }}</td>
                        </tr>
                        <tr>
                            <td class="param">PROTECTION:</td>
                            <td>{{ data.alternator.specifications.Altern_Protection }}</td>
                        </tr>
                        <tr>
                            <td class="param">AVR MODEL:</td>
                            <td>{{ data.alternator.specifications.Altern_AvrModel }}</td>
                        </tr>
                        <tr>
                            <td class="param">VOLTAGE REGULATION:</td>
                            <td>{{ data.alternator.specifications.Altern_VoltageRegulat }}</td>
                        </tr>
                        <tr>
                            <td class="param">CLASS-TEMP RISE:</td>
                            <td>{{ data.alternator.specifications.Altern_Class_temp_rise }}</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>

        <!-- Standard Accessories -->
        <div class="section">
            <h2 class="section-title">STANDARD ACCESSORIES</h2>
            <div class="row">
                <div class="col-6">
                    <table class="specs-table">
                        <tr>
                            <td class="param">CONTROLLER:</td>
                            <td>{{ data.controller.ControlModel }}</td>
                        </tr>
                        <tr>
                            <td class="param">BATTERY:</td>
                            <td>{{ data.engine.specifications.Engine_Control_voltage }} V</td>
                        </tr>
                        <tr>
                            <td class="param">BATTERY CHARGER:</td>
                            <td>{{ data.controller.AdicionalyConfigController.BateryCharger }}</td>
                        </tr>
                    </table>
                </div>
                <div class="col-6">
                    <table class="specs-table">
                        {% if data.Breakers.Breaker1.Breaker1 != "Seleccione una opción" and
                        data.Breakers.Breaker1.Breaker1 != "Select an option" %}
                        <tr>
                            <td class="param">BREAKER 1:</td>
                            <td>{{ data.Breakers.Breaker1.Breaker1 }}</td>
                        </tr>
                        {% endif %}

                        {% if data.Breakers.Breaker2.Breaker2 != "Seleccione una opción" and
                        data.Breakers.Breaker2.Breaker2 != "Select an option" %}
                        <tr>
                            <td class="param">BREAKER 2:</td>
                            <td>{{ data.Breakers.Breaker2.Breaker2 }}</td>
                        </tr>
                        {% endif %}

                        {% if data.Breakers.Breaker3.Breaker3 != "Seleccione una opción" and
                        data.Breakers.Breaker3.Breaker3 != "Select an option" %}
                        <tr>
                            <td class="param">BREAKER 3:</td>
                            <td>{{ data.Breakers.Breaker3.Breaker3 }}</td>
                        </tr>
                        {% endif %}

                    </table>
                </div>
            </div>
        </div>

        {% if data.Tank.BaseTank %}
        <!-- Base Tank -->
        <div class="section">
            <div class="row">
                <div class="col-12">
                    <h2 class="section-title">BASE TANK</h2>
                    <table class="specs-table">
                        <tr>
                            <td class="param">DESCRIPTION:</td>
                            <td>{{ data.Tank.BaseTank }}</td>
                        </tr>
                        <tr>
                            <td class="param">AUTONOMY:</td>
                            <td>{{ data.Tank.TankAutonomy }}</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        {% endif %}

        <!-- Acoustic Enclosure -->
        {% if data.Enclosure.AcousticEnclosure %}
        <div class="section">
            <div class="row">
                <div class="col-12">
                    <h2 class="section-title">ACOUSTIC ENCLOSURE</h2>
                    <table class="specs-table">
                        <tr>
                            <td class="param">DESCRIPTION:</td>
                            <td>{{ data.Enclosure.AcousticEnclosure }}</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        {% endif %}

        <!-- Quote Table -->
        <div class="section">
            <h2 class="section-title">GENERATOR SET COMPONENTS</h2>
            <table class="quote-table">
                <thead>
                    <tr>
                        <th style="width: 10%;">PART</th>
                        <th style="width: 40%;">DESCRIPTION</th>
                        <th style="width: 10%;">QTY</th>
                        <th style="width: 20%;">UNIT PRICE</th>
                        <th style="width: 20%;">AMOUNT</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- Aquí se inserta el contenido de la tabla generada dinámicamente -->
                    {{ table_CotizacionGenset|safe }}
                </tbody>
            </table>
        </div>

        <!-- Breakers Table -->
        <div class="section">
            <h2 class="section-title">BREAKERS</h2>
            <table class="quote-table">
                <thead>
                    <tr>
                        <th style="width: 10%;">PART</th>
                        <th style="width: 40%;">DESCRIPTION</th>
                        <th style="width: 10%;">QTY</th>
                        <th style="width: 20%;">UNIT PRICE</th>
                        <th style="width: 20%;">AMOUNT</th>
                    </tr>
                </thead>
                {{ table_CotizacionBreakers|safe }}
            </table>
        </div>

        <!-- Controller Table -->
        <div class="section">
            <h2 class="section-title">CONTROLLER</h2>
            <table class="quote-table">
                <thead>
                    <tr>
                        <th style="width: 10%;">PART</th>
                        <th style="width: 40%;">DESCRIPTION</th>
                        <th style="width: 10%;">QTY</th>
                        <th style="width: 20%;">UNIT PRICE</th>
                        <th style="width: 20%;">AMOUNT</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- Aquí se inserta el contenido de la tabla generada dinámicamente -->
                    {{ table_CotizacionControl|safe }}
                </tbody>
            </table>
        </div>

        <!-- Enclosure Table -->
        {% if table_CotizacionEnclosure and '<tr' in table_CotizacionEnclosure|string %} <div class="section">
            <h2 class="section-title">ENCLOSURE</h2>
            <table class="quote-table">
                <thead>
                    <tr>
                        <th style="width: 10%;">PART</th>
                        <th style="width: 40%;">DESCRIPTION</th>
                        <th style="width: 10%;">QTY</th>
                        <th style="width: 20%;">UNIT PRICE</th>
                        <th style="width: 20%;">AMOUNT</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- Aquí se inserta el contenido de la tabla generada dinámicamente -->
                    {{ table_CotizacionEnclosure|safe }}
                </tbody>
            </table>
    </div>
    {% endif %}

    <!-- Accesories Table -->
    {% if table_CotizacionAccesories and '<tr' in table_CotizacionAccesories|string %} <div class="section">
        <h2 class="section-title">ADITIONAL ACCESORIES - INSTALLED</h2>
        <table class="quote-table">
            <thead>
                <tr>
                    <th style="width: 10%;">PART</th>
                    <th style="width: 40%;">DESCRIPTION</th>
                    <th style="width: 10%;">QTY</th>
                    <th style="width: 20%;">UNIT PRICE</th>
                    <th style="width: 20%;">AMOUNT</th>
                </tr>
            </thead>
            <tbody>
                <!-- Aquí se inserta el contenido de la tabla generada dinámicamente -->
                {{ table_CotizacionAccesories|safe }}
            </tbody>
        </table>
        </div>
        {% endif %}

        <!-- Tank Table -->
        {% if table_CotizacionTank and '<tr' in table_CotizacionTank|string %} <div class="section">
            <h2 class="section-title">BASE TANK</h2>
            <table class="quote-table">
                <thead>
                    <tr>
                        <th style="width: 10%;">PART</th>
                        <th style="width: 40%;">DESCRIPTION</th>
                        <th style="width: 10%;">QTY</th>
                        <th style="width: 20%;">UNIT PRICE</th>
                        <th style="width: 20%;">AMOUNT</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- Aquí se inserta el contenido de la tabla generada dinámicamente -->
                    {{ table_CotizacionTank|safe }}
                </tbody>
            </table>
            </div>
            {% endif %}

            <!-- Warranty and Testing Table -->
            <div class="section">
                <h2 class="section-title">WARRANTY AND TESTING</h2>
                <table class="quote-table">
                    <thead>
                        <tr>
                            <th style="width: 10%;">PART</th>
                            <th style="width: 40%;">DESCRIPTION</th>
                            <th style="width: 10%;">QTY</th>
                            <th style="width: 20%;">UNIT PRICE</th>
                            <th style="width: 20%;">AMOUNT</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- Aquí se inserta el contenido de la tabla de garantías y pruebas generada dinámicamente -->
                        {{ table_WarrantyAndTest|safe }}
                    </tbody>
                </table>
            </div>

            <!-- Payment Terms -->
            <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>Genset:</td>
                                <td class="text-right">${{ '{:,.2f}'.format(price_CotizacionGenset) }}</td>
                            </tr>
                            <tr>
                                <td>Breakers:</td>
                                <td class="text-right">${{ '{:,.2f}'.format(price_CotizacionBreakers) }}</td>
                            </tr>
                            <tr>
                                <td>Controller:</td>
                                <td class="text-right">${{ '{:,.2f}'.format(price_CotizacionControl) }}</td>
                            </tr>

                            {% if price_CotizacionEnclosure is not none and price_CotizacionEnclosure != 0 %}
                            <tr>
                                <td>Enclosure:</td>
                                <td class="text-right">${{ '{:,.2f}'.format(price_CotizacionEnclosure) }}</td>
                            </tr>
                            {% endif %}


                            {% if price_CotizacionAccesories is not none and price_CotizacionAccesories != 0 %}
                            <tr>
                                <td>Accesories:</td>
                                <td class="text-right">${{ '{:,.2f}'.format(price_CotizacionAccesories) }}</td>
                            </tr>
                            {% endif %}


                            {% if price_CotizacionTank is not none and price_CotizacionTank != 0 %}
                            <tr>
                                <td>Tank:</td>
                                <td class="text-right">${{ '{:,.2f}'.format(price_CotizacionTank) }}</td>
                            </tr>
                            {% endif %}


                            <tr>
                                <td>Warranty and Testing:</td>
                                <td class="text-right">${{ '{:,.2f}'.format(price_WarrantyAndTest) }}</td>
                            </tr>
                            <!--- COUNTRY DATA -->
                            <tr>
                                {% if countryData.isDiscount is not none and countryData.total != 0 %}
                                <td><strong>Subtotal:</strong></td>
                                {% else %}
                                <td><strong>TOTAL:</strong></td>
                                {% endif %}
                                <td class="text-right"><strong>${{ '{:,.2f}'.format(GranTotal) }}</strong></td>

                            </tr>
                            {% if countryData and countryData.discount is not none %}
                            {% if countryData.total is not none and countryData.total != 0 %}
                            <tr>
                                {% if countryData.isDiscount %}
                                <td><strong>Discount Applied:</strong></td>
                                <td class="text-right">
                                    <strong class="success-color">-{{ '{:,.2f}'.format(countryData.discount)}}%</strong>
                                </td>
                                {% else %}
                                <td><strong>Charge Applied:</strong></td>
                                <td class="text-right"><strong class="error-color">+{{
                                        '{:,.2f}'.format(countryData.discount)}}%</strong></td>
                                {% endif %}
                            </tr>
                            <tr>
                                <td><strong>TOTAL:</strong></td>
                                <td class="text-right"><strong>${{ '{:,.2f}'.format(countryData.total)}}</strong></td>
                            </tr>
                            {% endif %}
                            {% endif %}

                        </table>
                    </div>

                    <!-- Segunda columna: Términos y condiciones (manteniendo su estilo original) -->
                    <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 class="terms-title">TERMS & CONDITIONS</div>
                            <p>This quote is valid for a period of <strong>30 days</strong>. 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 loose.</em>
                            </p>
                            <p>It is the distributor/purchaser and end user's responsibility to ensure that this
                                equipment
                                is operated in accordance with all applicable <strong>local, state, and federal laws and
                                    regulations</strong>
                                governing the use and operation of this equipment.</p>
                            <p>This proposal is our interpretation of your requirement. It includes only the items
                                listed on
                                this quotation. Should there be other requirements or specifications, we will re-quote
                                accordingly.</p>
                            <p>At the time of order, price may be reviewed for accuracy. <strong>IGSA Corp.</strong>
                                cannot be held liable
                                for any pricing errors caused by a malfunction in the software.</p>
                            <p>
                                The price of the products or services offered is
                                <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 the prices</u> of the
                                products or services in accordance with the 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> {{ data.Seller.SellerName }} </p>
                            <p><span class="info-title">Email:</span> {{ data.Seller.SellerEmail }} </p>
                            <p><span class="info-title">Phone:</span> {{ data.Seller.SellerPhone }} </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>

            {% if show_send_button %}
            <div class="text-center mt-4 mb-5">
                <!-- -->
                <button id="sendButton" class="send-btn">Send Quote</button>
            </div>

            <div id="pdfGenerationStatus" class="alert alert-info" style="display: none;">
                <i class="fas fa-spinner fa-spin"></i> Generando PDF, por favor espere...
            </div>

            <div id="loadingOverlay" class="loading-overlay">
                <div class="spinner-container">
                    <div class="spinner"></div>
                    <div id="statusMessage" class="status-message">Generando PDF, por favor espere...</div>
                </div>
            </div>
            <!-- JavaScript para manejar el clic en el botón -->
            <script>
                document.getElementById('sendButton').addEventListener('click', function () {
                    // Deshabilitar el botón para evitar clics múltiples
                    this.disabled = true;

                    // Mostrar el overlay de carga
                    const overlay = document.getElementById('loadingOverlay');
                    overlay.style.display = 'flex';

                    // Actualizar mensaje de estado
                    const statusMessage = document.getElementById('statusMessage');
                    statusMessage.textContent = 'Generando PDF, por favor espere...';

                    // Obtener el ID de la cotización
                    const quoteId = '{{ quote_id }}';

                    if (!quoteId) {
                        statusMessage.textContent = 'Error: No se encontró el ID de cotización.';
                        // Cambiar color del mensaje a rojo para indicar error
                        statusMessage.style.color = '#ff5555';
                        return;
                    }

                    // Hacer la solicitud para generar el PDF
                    fetch('/Ventas/VentasEUA/generar_pdf/' + quoteId, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                        }
                    })
                        .then(response => {
                            if (!response.ok) {
                                throw new Error('Error en la respuesta del servidor: ' + response.status);
                            }
                            return response.json();
                        })
                        .then(data => {
                            if (data.status === 'processing') {
                                // Iniciar verificación periódica del estado
                                checkPdfStatus(quoteId);
                            } else {
                                // Actualizar mensaje de error
                                statusMessage.textContent = 'Error: ' + (data.message || 'Error desconocido');
                                statusMessage.style.color = '#ff5555';

                                // Habilitar el botón nuevamente después de un error
                                document.getElementById('sendButton').disabled = false;

                                // Opcional: cerrar el overlay después de unos segundos
                                setTimeout(() => {
                                    overlay.style.display = 'none';
                                }, 3000);
                            }
                        })
                        .catch(error => {
                            console.error('Error:', error);
                            // Actualizar mensaje de error
                            statusMessage.textContent = 'Error al generar el PDF: ' + error;
                            statusMessage.style.color = '#ff5555';

                            // Habilitar el botón nuevamente después de un error
                            document.getElementById('sendButton').disabled = false;

                            // Opcional: cerrar el overlay después de unos segundos
                            setTimeout(() => {
                                overlay.style.display = 'none';
                            }, 3000);
                        });
                });

                function checkPdfStatus(quoteId) {
                    const statusMessage = document.getElementById('statusMessage');
                    const overlay = document.getElementById('loadingOverlay');

                    // Verificar el estado cada 2 segundos
                    const checkInterval = setInterval(() => {
                        fetch('/Ventas/VentasEUA/check_pdf_status/' + quoteId)
                            .then(response => response.json())
                            .then(data => {
                                if (data.status === 'completed') {
                                    clearInterval(checkInterval);

                                    // Actualizar mensaje a éxito
                                    statusMessage.textContent = 'PDF generado correctamente.';
                                    statusMessage.style.color = '#66ff66'; // Verde para indicar éxito

                                    // Mostrar mensaje con SweetAlert y opciones para abrir PDF
                                    setTimeout(() => {
                                        // Ocultar overlay antes de mostrar SweetAlert
                                        overlay.style.display = 'none';

                                        // Crear URL para acceder al PDF
                                        //const pdfUrl = `/static/pdf/Ventas/VentasEUA/cotizacion_${token}.pdf`;
                                        // Extraer la URL del PDF correctamente
                                        let pdfUrl = data.ruta;

                                        Swal.fire({
                                            title: '¡Éxito!',
                                            text: 'La cotización fue generada correctamente en PDF.',
                                            icon: 'success',
                                            showCancelButton: false,
                                            confirmButtonText: 'Ir a Cotizador',
                                            allowOutsideClick: false, // Esto evita que el modal se cierre al hacer clic fuera
                                            allowEscapeKey: false // Opcionalmente, esto evita que se cierre con la tecla ESC
                                            //cancelButtonText: 'Cerrar'
                                        }).then((result) => {
                                            if (result.isConfirmed) {
                                                // Abrir el PDF en una nueva pestaña

                                                window.open(pdfUrl);
                                                //Ir a Cotizador
                                            }
                                        });
                                        // Habilitar el botón nuevamente
                                        document.getElementById('sendButton').disabled = false;
                                    }, 1000);
                                }
                            })
                            .catch(error => {
                                console.error('Error:', error);
                                clearInterval(checkInterval);

                                // Actualizar mensaje de error
                                statusMessage.textContent = 'Error al verificar el estado del PDF: ' + error;
                                statusMessage.style.color = '#ff5555';

                                // Cerrar overlay después de unos segundos
                                setTimeout(() => {
                                    overlay.style.display = 'none';
                                    // Habilitar el botón nuevamente
                                    document.getElementById('sendButton').disabled = false;
                                }, 3000);
                            });
                    }, 2000);
                }
            </script>
            {% endif %}

</body>

<!-- Incluir SweetAlert para notificaciones -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

</html>