<!--
Archivo: RecepcionCotizacionMail.html
Ruta: src/templates/Emails/Ventas/Cotiz/RecepcionCotizacionMail.html
Descripción: Plantilla de correo electrónico para notificar la recepción de cotización al departamento de ingeniería.
Autor: Equipo de Desarrollo IGSA
Fecha: 2025
-->

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nueva Cotización Recibida - IGSA</title>
    
    <style type="text/css">
        /* Reset básico */
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
            background-color: #f5f7fa;
            color: #333333;
        }
        
        table {
            border-collapse: collapse;
            width: 100%;
        }
        
        /* Contenedor principal */
        .email-container {
            max-width: 600px;
            margin: 0 auto;
            background-color: #ffffff;
            border: 1px solid #e5e9ec;
        }
        
        /* Header */
        .header {
            background-color: #003366;
            color: #ffffff;
            padding: 20px;
            text-align: center;
        }
        
        .header-title {
            font-size: 22px;
            font-weight: bold;
            margin: 10px 0 5px 0;
        }
        
        .header-subtitle {
            font-size: 14px;
            margin: 0;
        }
        
        /* Contenido */
        .content {
            padding: 25px;
        }
        
        /* Alerta */
        .alert {
            border: 1px solid #059669;
            padding: 15px;
            margin-bottom: 20px;
            text-align: center;
            border-radius: 5px;
            background-color: #f0fdf4;
        }
        
        .alert-text {
            font-weight: bold;
            color: #065f46;
            margin: 5px 0 0 0;
        }
        
        /* Secciones */
        .section {
            margin-bottom: 25px;
            border-bottom: 1px solid #e5e9ec;
            padding-bottom: 20px;
        }
        
        .section-title {
            font-size: 16px;
            font-weight: bold;
            color: #003366;
            margin-bottom: 12px;
            border-left: 4px solid #003366;
            padding-left: 12px;
        }
        
        /* Tabla de datos */
        .data-row {
            border-bottom: 1px solid #f3f4f6;
        }
        
        .data-label {
            font-weight: bold;
            color: #374151;
            padding: 8px 12px;
            width: 40%;
        }
        
        .data-value {
            color: #1f2937;
            padding: 8px 12px;
        }
        
        /* Badge para caso de costeo */
        .badge {
            display: inline-block;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 11px;
            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;
        }
        
        /* Estadísticas */
        .stats {
            border: 1px solid #dbeafe;
            padding: 15px;
            text-align: center;
            border-radius: 5px;
        }
        
        .stat-item {
            display: inline-block;
            margin: 0 20px;
            text-align: center;
        }
        
        .stat-number {
            font-size: 24px;
            font-weight: bold;
            color: #003366;
            display: block;
        }
        
        .stat-label {
            font-size: 12px;
            color: #6b7280;
            margin-top: 5px;
        }
        
        /* Información financiera */
        .financial-info {
            border: 1px solid #e5e7eb;
            padding: 15px;
            border-radius: 5px;
            background-color: #f9fafb;
        }
        
        .price-row {
            display: flex;
            justify-content: space-between;
            padding: 8px 0;
            border-bottom: 1px solid #e5e7eb;
        }
        
        .price-row:last-child {
            border-bottom: none;
            font-weight: bold;
            font-size: 16px;
            color: #003366;
            padding-top: 12px;
            border-top: 2px solid #003366;
        }
        
        .price-label {
            color: #374151;
        }
        
        .price-value {
            color: #1f2937;
            font-weight: bold;
        }
        
        /* Acciones */
        .actions {
            border: 1px solid #dbeafe;
            padding: 20px;
            text-align: center;
            border-radius: 5px;
            background-color: #eff6ff;
        }
        
        .action-title {
            font-size: 18px;
            font-weight: bold;
            color: #003366;
            margin-bottom: 10px;
        }
        
        .action-text {
            color: #374151;
            margin-bottom: 15px;
        }
        
        .btn {
            background-color: #003366;
            color: #ffffff;
            text-decoration: none;
            padding: 12px 24px;
            border-radius: 5px;
            font-weight: bold;
            display: inline-block;
            margin: 5px;
        }
        
        /* Footer */
        .footer {
            background-color: #f9fafb;
            border-top: 1px solid #e5e7eb;
            padding: 20px;
            text-align: center;
            font-size: 12px;
            color: #6b7280;
        }
        
        .footer a {
            color: #003366;
            text-decoration: none;
            margin: 0 10px;
        }
    </style>
</head>

<body>
    <table width="100%" cellpadding="0" cellspacing="0" border="0">
        <tr>
            <td align="center" style="background-color: #f5f7fa; padding: 20px 0;">
                
                <table class="email-container" cellpadding="0" cellspacing="0" border="0">
                    
                    <!-- Header -->
                    <tr>
                        <td class="header">
                            <div class="header-title">Nueva Cotización Recibida</div>
                            <div class="header-subtitle">Notificación para el Departamento de Ingeniería</div>
                        </td>
                    </tr>
                    
                    <!-- Contenido -->
                    <tr>
                        <td class="content">
                            
                            <!-- Alerta -->
                            <div class="alert">
                                <div style="color: #059669; font-size: 20px; font-weight: bold;">✅</div>
                                <div class="alert-text">Se ha recibido una nueva cotización para procesamiento</div>
                            </div>

                            <!-- Información de la Cotización -->
                            <div class="section">
                                <div class="section-title">📋 Información de la Cotización</div>
                                <table width="100%" cellpadding="0" cellspacing="0">
                                    <tr class="data-row">
                                        <td class="data-label">Oportunidad CRM:</td>
                                        <td class="data-value">{{ oportunidad_crm }}</td>
                                    </tr>
                                    <tr class="data-row">
                                        <td class="data-label">Número de Cotización:</td>
                                        <td class="data-value"><strong>{{ oportunidad_crm }}</strong></td>
                                    </tr>
                                    <tr class="data-row">
                                        <td class="data-label">Versión:</td>
                                        <td class="data-value">{{ version }}</td>
                                    </tr>
                                    <!-- <tr class="data-row">
                                        <td class="data-label">ID de Costeo:</td>
                                        <td class="data-value">{{ costing_id }}</td>
                                    </tr> -->
                                    <!-- <tr class="data-row">
                                        <td class="data-label">Caso de Costeo:</td>
                                        <td class="data-value">
                                            {% if caso_costeo == 'A' %}
                                                <span class="badge badge-caso-a">Caso A</span>
                                            {% elif caso_costeo == 'B' %}
                                                <span class="badge badge-caso-b">Caso B</span>
                                            {% elif caso_costeo == 'C' %}
                                                <span class="badge badge-caso-c">Caso C</span>
                                            {% else %}
                                                {{ caso_costeo }}
                                            {% endif %}
                                        </td>
                                    </tr> -->
                                </table>
                            </div>

                            <!-- Información del Cliente -->
                            <div class="section">
                                <div class="section-title">👤 Información del Cliente</div>
                                <table width="100%" cellpadding="0" cellspacing="0">
                                    <tr class="data-row">
                                        <td class="data-label">Empresa:</td>
                                        <td class="data-value"><strong>{{ cliente_nombre }}</strong></td>
                                    </tr>
                                    <tr class="data-row">
                                        <td class="data-label">Tipo de Contacto:</td>
                                        <td class="data-value">{{ tipo_contacto }}</td>
                                    </tr>
                                    <tr class="data-row">
                                        <td class="data-label">Email:</td>
                                        <td class="data-value">{{ cliente_email }}</td>
                                    </tr>
                                    <tr class="data-row">
                                        <td class="data-label">Teléfono:</td>
                                        <td class="data-value">{{ cliente_telefono }}</td>
                                    </tr>
                                    <!-- <tr class="data-row">
                                        <td class="data-label">Ubicación:</td>
                                        <td class="data-value">{{ cliente_ciudad }}, {{ cliente_estado }}, {{ cliente_pais }}</td>
                                    </tr> -->
                                </table>
                            </div>

                            <!-- Estadísticas -->
                            <div class="section">
                                <div class="section-title">📊 Resumen de la Cotización</div>
                                <div class="stats">
                                    <div class="stat-item">
                                        <span class="stat-number">{{ total_lineas }}</span>
                                        <div class="stat-label">Líneas de<br>Cotización</div>
                                    </div>
                                    <div class="stat-item">
                                        <span class="stat-number">{{ version }}</span>
                                        <div class="stat-label">Versión de<br>Cotización</div>
                                    </div>
                                    <div class="stat-item">
                                        <span class="stat-number">{{ moneda }}</span>
                                        <div class="stat-label">Moneda</div>
                                    </div>
                                </div>
                            </div>

<!-- Información Financiera -->
<div class="section">
    <div class="section-title">💰 Información Financiera</div>
    <div class="financial-info">
        <div class="price-row">
            <span class="price-label">Precio de Lista:</span>
            <span class="price-value">${{ '{:,.2f}'.format(precio_lista) }}</span>
        </div>
        
        {% if descuento_porcentaje > 0 %}
        <div class="price-row">
            <span class="price-label">Descuento ({{ '{:.2f}'.format(descuento_porcentaje) }}%):</span>
            <span class="price-value" style="color: #059669;">
                -{${{ '{:,.2f}'.format(monto_descuento) }}
            </span>
        </div>
        {% endif %}
        
        <div class="price-row">
            <span class="price-label">Precio de Oferta:</span>
            <span class="price-value">${{ '{:,.2f}'.format(precio_oferta) }}</span>
        </div>
        
        <div class="price-row">
            <span class="price-label">Impuesto ({{ impuesto_nombre }} {{ '{:.0f}'.format(impuesto_porcentaje) }}%):</span>
            <span class="price-value">${{ '{:,.2f}'.format(monto_impuesto) }}</span>
        </div>
        
        <div class="price-row">
            <span class="price-label"><strong>TOTAL:</strong></span>
            <span class="price-value"><strong>${{ '{:,.2f}'.format(precio_total) }}</strong></span>
        </div>
    </div>
</div>

                            <!-- Información del Vendedor -->
                            <div class="section">
                                <div class="section-title">👨‍💼 Vendedor Asignado</div>
                                <table width="100%" cellpadding="0" cellspacing="0">
                                    <tr class="data-row">
                                        <td class="data-label">Nombre:</td>
                                        <td class="data-value">{{ vendedor_asignado }}</td>
                                    </tr>
                                    <!-- <tr class="data-row">
                                        <td class="data-label">Factor de Sobrecosto:</td>
                                        <td class="data-value">{{ factor_sobrecosto }}</td>
                                    </tr> -->
                                </table>
                            </div>

                            <!-- Acciones Requeridas -->
                            <div class="actions">
                                <div class="action-title">⚡ Acciones Requeridas</div>
                                <div class="action-text">
                                    El departamento de ingeniería debe revisar y procesar esta cotización.<br>
                                    Por favor, acceda al sistema para comenzar el procesamiento.
                                </div>
                                
                                <a href="https://sycelephant.com" class="btn">🖥️ Acceder al Sistema</a>
                            </div>

                        </td>
                    </tr>

                    <!-- Footer -->
                    <tr>
                        <td class="footer">
                            <div>
                                <a href="mailto:alexis.moreno@igsa.com.mx">Soporte Técnico</a>
                                <a href="mailto:ventas@igsa.com.mx">Ventas</a>
                                <span>Tel: 5556265350 Ext: 5337</span>
                            </div>
                            <p>
                                Este correo fue generado automáticamente por el sistema IGSA Elephant.<br>
                                <strong>Integradora de Servicios Avanzados</strong> - 2025
                            </p>
                            <p style="margin-top: 10px; font-size: 11px; color: #9ca3af;">
                                <em>Notificación enviada desde el módulo de Recepción de Cotizaciones.</em>
                            </p>
                        </td>
                    </tr>
                    
                </table>
                
            </td>
        </tr>
    </table>
</body>
</html>