<!--
Archivo: CotizEspSolicitudMail.html
Ruta: src\templates\Emails\Ventas\Cotiz\CotizEspSolicitudMail.html
Descripción: Plantilla de correo electrónico para la solicitud de cotización especial.
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 Solicitud de Cotización Especial - 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: #1e3a8a;
            color: #ffffff;
            padding: 20px;
            text-align: center;
        }
        
        .logo {
            max-width: 180px;
            height: auto;
        }
        
        .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 {
            /*background-color: #fef3c7;*/
            border: 1px solid #f59e0b;
            padding: 15px;
            margin-bottom: 20px;
            text-align: center;
            border-radius: 5px;
        }
        
        .alert-text {
            font-weight: bold;
            color: #92400e;
            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: #1e3a8a;
            margin-bottom: 12px;
            border-left: 4px solid #1e3a8a;
            padding-left: 12px;
        }
        
        /* Tabla de datos */
        .data-row {
            border-bottom: 1px solid #f3f4f6;
        }
        
        .data-label {
            font-weight: bold;
            color: #374151;
            padding: 8px 12px;
            width: 35%;
        }
        
        .data-value {
            color: #1f2937;
            padding: 8px 12px;
        }
        
        /* Lista de formularios */
        .form-list {
            /* background-color: #f9fafb;*/
            border: 1px solid #e5e7eb;
            padding: 15px;
            border-radius: 5px;
        }
        
        .form-item {
            margin-bottom: 8px;
            padding: 5px 0;
        }
        
        .checkmark {
            color: #059669;
            font-weight: bold;
            margin-right: 8px;
        }
        
        /* Estadísticas */
        .stats {
            /* background-color: #eff6ff;*/
            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: #1e3a8a;
            display: block;
        }
        
        .stat-label {
            font-size: 12px;
            color: #6b7280;
            margin-top: 5px;
        }
        
        /* Información del proyecto */
        .project-info {
            /*background-color: #f0fdf4;*/
            border: 1px solid #bbf7d0;
            padding: 15px;
            border-radius: 5px;
        }
        
        .project-description {
            background-color: #ffffff;
            border: 1px solid #d1d5db;
            padding: 12px;
            margin-top: 10px;
            font-style: italic;
            color: #4b5563;
            border-radius: 3px;
        }
        
        /* Acciones */
        .actions {
            /*background-color: #fef2f2;*/
            border: 1px solid #fecaca;
            padding: 20px;
            text-align: center;
            border-radius: 5px;
        }
        
        .action-title {
            font-size: 18px;
            font-weight: bold;
            color: #dc2626;
            margin-bottom: 10px;
        }
        
        .action-text {
            color: #7f1d1d;
            margin-bottom: 15px;
        }
        
        .btn {
            background-color: #1e3a8a;
            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: #1e3a8a;
            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 Solicitud de Cotización Especial</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: #f59e0b; font-size: 20px; font-weight: bold;">🔔</div>
                                <div class="alert-text">Se ha recibido una nueva solicitud de cotización especial</div>
                            </div>

                            <!-- Información de la Oportunidad -->
                            <div class="section">
                                <div class="section-title">📋 Información de la Oportunidad</div>
                                <table width="100%" cellpadding="0" cellspacing="0">
                                    <tr class="data-row">
                                        <td class="data-label">Número de Oportunidad:</td>
                                        <td class="data-value"><strong>{{ numero_oportunidad }}</strong></td>
                                    </tr>
                                    <tr class="data-row">
                                        <td class="data-label">Cliente:</td>
                                        <td class="data-value">{{ cliente_nombre }}</td>
                                    </tr>
                                    <tr class="data-row">
                                        <td class="data-label">Fecha de Solicitud:</td>
                                        <td class="data-value">{{ fecha_solicitud }} a las {{ hora_solicitud }}</td>
                                    </tr>
                                    <tr class="data-row">
                                        <td class="data-label">Solicitado por:</td>
                                        <td class="data-value">{{ solicitante_nombre }}</td>
                                    </tr>
                                </table>
                            </div>

                            <!-- Formularios Solicitados -->
                            <div class="section">
                                <div class="section-title">📝 Formularios de Cotización Solicitados</div>
                                <div class="form-list">
                                    <div class="form-item">
                                        <span class="checkmark">✅</span>
                                        <span>Formulario General</span>
                                    </div>
                                    {% for formulario in formularios_solicitados %}
                                    <div class="form-item">
                                        <span class="checkmark">✅</span>
                                        <span>{{ formulario }}</span>
                                    </div>
                                    {% endfor %}
                                </div>
                            </div>

                            <!-- Estadísticas -->
                            <div class="section">
                                <div class="section-title">📊 Resumen de la Solicitud</div>
                                <div class="stats">
                                    <div class="stat-item">
                                        <span class="stat-number">{{ total_formularios }}</span>
                                        <div class="stat-label">Formularios<br>Creados</div>
                                    </div>
                                    <div class="stat-item">
                                        <span class="stat-number">{{ total_tareas }}</span>
                                        <div class="stat-label">Tareas<br>Generadas</div>
                                    </div>
                                    <div class="stat-item">
                                        <span class="stat-number">{{ version or 1 }}</span>
                                        <div class="stat-label">Versión de<br>Solicitud</div>
                                    </div>
                                </div>
                            </div>

                            <!-- Información del Proyecto -->
                            {% if proyecto_descripcion or proyecto_estado %}
                            <div class="section">
                                <div class="section-title">🏗️ Información del Proyecto</div>
                                <div class="project-info">
                                    {% if proyecto_estado and proyecto_ciudad %}
                                    <table width="100%" cellpadding="0" cellspacing="0">
                                        <tr class="data-row">
                                            <td class="data-label">Ubicación:</td>
                                            <td class="data-value">{{ proyecto_ciudad }}, {{ proyecto_estado }}</td>
                                        </tr>
                                        {% if proyecto_direccion %}
                                        <tr class="data-row">
                                            <td class="data-label">Dirección:</td>
                                            <td class="data-value">{{ proyecto_direccion }}</td>
                                        </tr>
                                        {% endif %}
                                        {% if requiere_visita is defined %}
                                        <tr class="data-row">
                                            <td class="data-label">Requiere Visita Técnica:</td>
                                            <td class="data-value">
                                                {% if requiere_visita %}
                                                    <strong style="color: #dc2626;">SÍ - Visita requerida</strong>
                                                {% else %}
                                                    <span style="color: #059669;">No es necesaria</span>
                                                {% endif %}
                                            </td>
                                        </tr>
                                        {% endif %}
                                    </table>
                                    {% endif %}
                                    
                                    {% if proyecto_descripcion %}
                                    <div class="project-description">
                                        <strong>Descripción del Proyecto:</strong><br>
                                        {{ proyecto_descripcion }}
                                    </div>
                                    {% endif %}
                                </div>
                            </div>
                            {% endif %}

                            <!-- Información Técnica -->
                            <div class="section">
                                <div class="section-title">🔧 Información Técnica</div>
                                <table width="100%" cellpadding="0" cellspacing="0">
                                    <tr class="data-row">
                                        <td class="data-label">FormIDs Generados:</td>
                                        <td class="data-value">
                                            {% for form_id in form_ids %}
                                                {{ form_id }}{% if not loop.last %}, {% endif %}
                                            {% endfor %}
                                        </td>
                                    </tr>
                                    <tr class="data-row">
                                        <td class="data-label">Sistema de Origen:</td>
                                        <td class="data-value">IGSA Elephant - Módulo de Ventas</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 solicitud de cotización especial.
                                    {% if total_tareas > 0 %}
                                    Se han generado {{ total_tareas }} tarea(s) en el sistema.
                                    {% endif %}
                                </div>
                                
                                <a href="https://sycelephant.com" class="btn">🖥️ Acceder al Sistema</a>
                                
                            </div>

                        </td>
                    </tr>

                    <!-- Footer -->
                    <tr>
                        <td class="footer">
                            <div>
                                <a href="mailto:{{ soporte_email or 'alexis.moreno@igsa.com.mx' }}">Soporte Técnico</a>
                                <a href="mailto:{{ ventas_email or '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>{{ empresa_completa or 'Integradora de Servicios Avanzados' }}</strong> - {{ año_actual or '2025' }}
                            </p>
                            <p style="margin-top: 10px; font-size: 11px; color: #9ca3af;">
                                <em>Notificación enviada el {{ fecha_actual }} desde el módulo de Cotizaciones Especiales.</em>
                            </p>
                        </td>
                    </tr>
                    
                </table>
                
            </td>
        </tr>
    </table>
</body>
</html>