<!--
Archivo: PreviewCotizacion.html
Ruta: src/templates/Emails/Ventas/Cotiz/PreviewCotizacion.html
Descripción: Vista previa de cotización
Autor: Equipo de Desarrollo IGSA
Fecha: 2025
-->

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vista Previa - Cotización {{ 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;
            --warning-color: #fbbf24;
        }

        * {
            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;
            padding-bottom: 120px; /* Espacio para botones fijos */
        }

        /* 
        =======================
        PREVIEW BANNER
        =======================
        */

        /* 
        =======================
        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: 20px;
        }

        /* 
        =======================
        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;
        }

        .company-info h1 {
            font-size: 20px;
            color: var(--primary-color);
            margin-bottom: 5px;
        }

        .company-info p {
            font-size: 11px;
            margin: 2px 0;
        }

        /* 
        =======================
        TÍTULOS Y TEXTO
        =======================
        */
        .section-title {
            color: var(--primary-color);
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 10px;
            padding-bottom: 5px;
            border-bottom: 2px 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;
        }

        .info-box p {
            margin: 5px 0;
        }

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

        .project-box p {
            margin: 5px 0;
        }

        .terms-box {
            background-color: var(--secondary-color);
            padding: 15px;
            border-radius: 5px;
            margin-bottom: 10px;
            font-size: 11px;
            line-height: 1.6;
        }

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

        .terms-box p {
            margin-bottom: 10px;
            text-align: justify;
        }

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

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

        .payment-details p {
            margin: 5px 0;
        }

        /* 
        =======================
        TABLAS 
        =======================
        */
        .quote-table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
            font-size: 11px;
            border: 1px solid var(--border-color);
        }

        .quote-table th {
            padding: 10px 8px;
            text-align: left;
            border-bottom: 2px solid var(--border-color);
            background-color: var(--primary-color);
            color: white;
            font-weight: bold;
        }

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

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

        .quote-table tbody tr:hover {
            background-color: #e8f4f8;
        }

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

        .summary-table td {
            padding: 8px 10px;
            font-size: 11px;
            border-bottom: 1px solid #e0e0e0;
        }

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

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

        .summary-table tr:last-child {
            font-weight: bold;
            font-size: 13px;
            border-top: 2px solid var(--primary-color);
        }

        .summary-table tr:last-child td {
            padding-top: 12px;
            color: var(--primary-color);
        }

        .discount-row td:last-child {
            color: var(--success-color) !important;
        }

        /* 
        =======================
        BADGES
        =======================
        */
        .badge {
            display: inline-block;
            padding: 4px 10px;
            border-radius: 3px;
            font-size: 10px;
            font-weight: bold;
            text-transform: uppercase;
        }

        .badge-caso-a {
            background-color: #dcfce7;
            color: #166534;
            border: 1px solid #86efac;
        }

        .badge-caso-b {
            background-color: #fef3c7;
            color: #92400e;
            border: 1px solid #fde047;
        }

        .badge-caso-c {
            background-color: #fee2e2;
            color: #991b1b;
            border: 1px solid #fca5a5;
        }

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

        .footer p {
            margin: 5px 0;
        }

        /* 
        =======================
        ALERT BOX
        =======================
        */
        .alert-box {
            background-color: #fff3cd;
            border: 1px solid #ffc107;
            border-left: 4px solid #ffc107;
            padding: 15px;
            margin: 20px 0;
            border-radius: 4px;
        }

        .alert-box strong {
            color: #856404;
        }

        .alert-box p {
            margin: 5px 0;
            font-size: 11px;
            color: #856404;
        }
    </style>
</head>

<body>

    <div class="container">
        <!-- Company Header -->
        <div class="header">
            <div>
                <h1 style="color: var(--primary-color); font-size: 24px;">{{ empresa }}</h1>
                <p style="font-size: 11px; color: #666;">{{ empresa_completa }}</p>
            </div>
            <div class="company-info">
                <h1>IGSA</h1>
                <p>2977 PROL PASEO DE LA REFORMA</p>
                <p>CIUDAD DE MÉXICO 05000, CDMX</p>
                <p>TELEFONO: +52 4426055058</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">INFORMACIÓN DEL CLIENTE</h2>
                        <p><span class="info-title">EMPRESA:</span> {{ cliente_nombre }}</p>
                        <p><span class="info-title">DIRECCIÓN:</span> {{ cliente_direccion|default('Por especificar', true) }}</p>
                        <p><span class="info-title">CONTACTO:</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">COTIZACIÓN #{{ quotation_num }}</h2>
                        <p><span class="info-title">FECHA:</span> {{ fecha_actual }}</p>
                        <p><span class="info-title">HORA:</span> {{ hora_actual }}</p>
                        <p><span class="info-title">MONEDA:</span> {{ moneda }}</p>
                        <p><span class="info-title">IMPUESTO:</span> {{ impuesto_codigo }}</p>
                        <p><span class="info-title">OPORTUNIDAD CRM:</span>{{ version }}</p>
                        <div class="Subtile-title">INFORMACIÓN DEL VENDEDOR:</div>
                        <p><span class="info-title">NOMBRE:</span> {{ vendedor_asignado }}</p>
                        <p><span class="info-title">EMAIL:</span> {{ vendedor_email|default('ventas@igsa.com', true) }}</p>
                        <p><span class="info-title">TELÉFONO:</span> {{ vendedor_telefono|default('N/A', true) }}</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Project Information -->
        <!-- <div class="section">
            <h2 class="section-title">INFORMACIÓN DEL PROYECTO</h2>
            <div class="payment-details">
                <div class="row">
                    <div class="col-12">
                        <p><span class="info-title">Nombre del Proyecto:</span> {{ proyecto_nombre|default('Por definir', true) }}</p>
                        <p><span class="info-title">Descripción del Proyecto:</span> {{ proyecto_requerimientos|default('Ninguno especificado', true) }}</p>
                    </div>
                </div>
            </div>
        </div> -->

        <!-- Alert Box -->
        <div class="alert-box">
            <strong>📌 Nota:</strong>
            <p>Las especificaciones técnicas detalladas del equipo (motor, alternador, accesorios) se incluirán en la cotización final una vez confirmada la configuración.</p>
        </div>

        <!-- Quotation Lines Table -->
        <div class="section">
            <h2 class="section-title">COMPONENTES DE LA COTIZACIÓN</h2>
            <table class="quote-table">
                <thead>
                    <tr>
                        <th style="width: 6%;">LÍNEA</th>
                        <th style="width: 14%;">PART NUMBER</th>
                        <th style="width: 38%;">DESCRIPCIÓN</th>
                        <th style="width: 8%;" class="text-center">CANT.</th>
                        <th style="width: 8%;" class="text-center">UM</th>
                        <th style="width: 13%;" class="text-right">PRECIO UNIT.</th>
                        <th style="width: 13%;" class="text-right">IMPORTE</th>
                    </tr>
                </thead>
                <tbody>
                    {% for line in lineas %}
                    <tr>
                        <td>{{ line.QuotationLine }}</td>
                        <td>{{ line.PartNum }}</td>
                        <td>{{ line.PartDescription }}</td>
                        <td class="text-center">{{ '{:,.2f}'.format(line.Qty) }}</td>
                        <td class="text-center">{{ line.UOMCode }}</td>
                        <td class="text-right">${{ '{:,.2f}'.format(line.UnitPrice) }}</td>
                        <td class="text-right"><strong>${{ '{:,.2f}'.format(line.Amount) }}</strong></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">RESUMEN DE COTIZACIÓN</h2>
                    <table class="summary-table">
                        <tr>
                            <td>Precio de Lista:</td>
                            <td class="text-right">${{ '{:,.2f}'.format(precio_lista) }}</td>
                        </tr>
                        {% if descuento_porcentaje > 0 %}
                        <tr class="discount-row">
                            <td>Descuento ({{ '{:.2f}'.format(descuento_porcentaje) }}%):</td>
                            <td class="text-right">
                                -${{ '{:,.2f}'.format(precio_lista - precio_oferta) }}
                            </td>
                        </tr>
                        {% endif %}
                        <tr>
                            <td>Subtotal:</td>
                            <td class="text-right">${{ '{:,.2f}'.format(precio_oferta) }}</td>
                        </tr>
                        <tr>
                            <td>Impuesto ({{ impuesto_codigo }}):</td>
                            <td class="text-right">${{ '{:,.2f}'.format(precio_total - precio_oferta) }}</td>
                        </tr>
                        <tr>
                            <td>TOTAL:</td>
                            <td class="text-right">${{ '{:,.2f}'.format(precio_total) }}</td>
                        </tr>
                    </table>
                </div>

                <!-- Segunda columna: Términos y condiciones -->
                <div class="col-8">
                    <div class="terms-box">
                        <div class="terms-title">TÉRMINOS Y CONDICIONES</div>
                        <p>Esta cotización es válida por un período de <strong>30 días</strong> a partir de la fecha de emisión. 
                            Los siguientes elementos están excluidos de esta cotización: 
                            <em>impuesto sobre ventas, instalación, permisos, ingeniería, combustible, tarifas de servicios públicos, 
                                descarga, puesta en marcha y pruebas, e instalación del silenciador de escape si se envía por separado.
                            </em>
                        </p>

                        <p>Es responsabilidad del distribuidor/comprador y usuario final asegurarse de que este equipo se opere 
                            en total cumplimiento con todas las <strong>leyes y regulaciones locales, estatales y federales</strong> 
                            aplicables que rigen el uso y operación de este equipo.
                        </p>

                        <p>Esta propuesta representa nuestra interpretación de sus requisitos e incluye solo los elementos 
                            específicamente listados en esta cotización. Si hubiera requisitos o especificaciones adicionales, 
                            proporcionaremos una cotización revisada en consecuencia.
                        </p>

                        <p>Los precios están sujetos a revisión para verificar precisión al momento de realizar el pedido. 
                            <strong>IGSA .</strong> no puede ser responsable de errores de precios resultantes de 
                            mal funcionamiento del software o errores del sistema.
                        </p>

                        <p>Los precios de los productos o servicios ofrecidos están 
                            <u>sujetos a cambios sin previo aviso</u> 
                            debido a modificaciones en las leyes arancelarias o regulaciones gubernamentales. En el caso de que 
                            dichas leyes impacten el costo de importación, exportación o cualquier otro aspecto relacionado con precios, 
                            <u>el proveedor se reserva el derecho de ajustar los precios</u> de productos o servicios de 
                            acuerdo con los cambios en aranceles y regulaciones aplicables.
                        </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">TÉRMINOS DE PAGO</div>
                        <p>Todos los precios son EXW Laredo Texas. Dirección de IGSA : 5918 Santa Maria Ave, Laredo Texas,
                            78041. Net 30 días con crédito aprobado o 30% al ordenar y saldo al enviar.</p>
                        <p>No hay cancelaciones de pedidos, reembolsos o intercambios. (En caso de aceptación de cancelación,
                            se cobrará una tarifa del 35% del monto total al cliente).</p>
                    </div>
                </div>
                <div class="col-6">
                    <div class="terms-box">
                        <div class="terms-title">TÉRMINOS DE GARANTÍA</div>
                        <p>Por favor, consulte los documentos de garantía de IGSA POWER para más detalles.</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Wiring Instructions -->
        <div class="section">
            <h2 class="section-title">INSTRUCCIONES DE TRANSFERENCIA</h2>
            <div class="payment-details">
                <div class="row">
                    <div class="col-6">
                        <p><span class="info-title">Beneficiario:</span> IGSA </p>
                        <p><span class="info-title">Dirección del Beneficiario:</span> 5918 Santa Maria, Laredo, Texas, 78041-2905</p>
                        <p><span class="info-title">Cuenta:</span> 703700701</p>
                        <p><span class="info-title">Banco:</span> International Bank of Commerce</p>
                    </div>
                    <div class="col-6">
                        <p><span class="info-title">Dirección del Banco:</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">INFORMACIÓN DE CONTACTO DE VENTAS</h2>
            <div class="payment-details">
                <div class="row">
                    <div class="col-6">
                        <p><span class="info-title">Nombre:</span> {{ vendedor_asignado }}</p>
                        <p><span class="info-title">Email:</span> {{ vendedor_email|default('ventas@igsa.com', true) }}</p>
                        <p><span class="info-title">Teléfono:</span> {{ vendedor_telefono|default('N/A', true) }}</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Additional Info -->
        <div class="section">
            <h2 class="section-title">INFORMACIÓN ADICIONAL DEL SISTEMA</h2>
            <div class="row">
                <div class="col-6">
                    <div class="payment-details">
                        <p><strong>📅 Fecha de Generación:</strong> {{ fecha_actual }} a las {{ hora_actual }}</p>
                        <p><strong>👤 Generado por:</strong> {{ vendedor_asignado }}</p>
                        <p><strong>🏢 Empresa:</strong> {{ empresa_completa }}</p>
                        <p><strong>📊 Versión:</strong> {{ version }}</p>
                    </div>
                </div>
                <div class="col-6">
                    <div class="payment-details">
                        <!-- <p><strong>💰 Factor de Sobrecosto:</strong> {{ '{:.2f}'.format(factor_sobrecosto) }}</p> -->
                        <!-- <p><strong>📦 Total de Líneas:</strong> {{ total_lineas }}</p> -->
                        <p><strong>💵 Moneda:</strong> {{ moneda }}</p>
                        <!-- <p><strong>🔢 ID de Costeo:</strong> {{ costing_id }}</p> -->
                    </div>
                </div>
            </div>
        </div>

        <!-- Important Note -->
        <div class="alert-box" style="background-color: #fee2e2; border-color: #ef4444;">
            <strong style="color: #991b1b;">⚠️ NOTA IMPORTANTE:</strong>
            <p style="color: #991b1b;">
                Al confirmar el envío de esta cotización, los datos se guardarán permanentemente en el sistema 
                y se enviará automáticamente una notificación por correo electrónico al departamento de 
                ingeniería para su procesamiento. Esta acción no se puede deshacer.
            </p>
        </div>

        <!-- Footer -->
        <div class="footer">
            <p><strong>IGSA </strong> | Tel: +52 4426055058 | 2977 PROL PASEO DE LA REFORMA, CDMX</p>
            <p>Esta cotización es confidencial y está destinada únicamente al destinatario. 
                La reproducción total o parcial está prohibida.</p>
            <p style="margin-top: 10px; font-size: 10px;">
                Generado por el Sistema IGSA Elephant - {{ año_actual }}
            </p>
        </div>
    </div>
</body>

</html>