    <!--
Archivo: CotizEspSolicitud.html (OPTIMIZADO)
Ruta: src\templates\Ventas\Cotiz\CotizEspSolicitud.html
Descripción: Plantilla  para solicitar cotizaciones universales al departamento de ingeniería.
Autor: Equipo de Desarrollo IGSA
Fecha: 2025
-->

{% extends "layout.html" %}

{% block title %}{{ _('Solicitud de Cotización Especial - IGSA') }}{% endblock %}

{% block content %}

<!-- ⚠️ Cargar al final para que tenga prioridad -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/Ventas/Cotiz/CotizEspSolicitud.css') }}">

<main>
    <section class="clean-block">
        <div class="container">
            <div class="block-heading">
                <h2 class="text-info">{{ _('Solicitud de Cotización Especial') }}</h2>
                <p>{{ _('Bienvenido. Módulo para solicitar cotizaciones especiales al departamento de ingeniería,
                    diseñado para el área comercial de IGSA.') }}</p>
            </div>

            <div class="form-main-container">
                <!-- === BÚSQUEDA DE OPORTUNIDAD === -->
                <div class="form-section">
                    <div class="row-search">
                        <label class="search-label" for="CRM_OpportunityNumber">Número de Oportunidad:</label>
                        <input id="CRM_OpportunityNumber" class="search-input form-control"
                            placeholder="Ej: OPP-2025-001" aria-describedby="opportunity-help">
                        <button type="button" class="search-button btn-custom btn-primary"
                            id="btn-search-opportunity">Buscar</button>
                        <div class="search-spacer"></div>
                    </div>
                    <small id="opportunity-help" class="help-text">
                        Ingrese el número de oportunidad del CRM para cargar los datos automáticamente
                    </small>
                </div>

                <!-- === DATOS DE LA OPORTUNIDAD === -->
                <form id="Forms-opportunity" class="form-section" aria-label="Datos de la oportunidad">
                    <h3 class="form-title">Datos de la Oportunidad</h3>

                    <!-- Información del contacto -->
                    <div class="row-3col">
                        <div class="field-group">
                            <label for="CRM_ContactID">ID del Contacto</label>
                            <input type="text" id="CRM_ContactID" class="form-control" readonly
                                aria-describedby="contact-id-help">
                        </div>

                        <div class="field-group">
                            <label for="CRM_ContactName">Nombre del Contacto</label>
                            <input type="text" id="CRM_ContactName" class="form-control" readonly>
                        </div>

                        <div class="field-group">
                            <label for="CRM_ContactType">Tipo de Contacto</label>
                            <input type="text" id="CRM_ContactType" class="form-control" readonly>
                        </div>
                    </div>

                    <!-- Información comercial -->
                    <div class="row-3col">
                        <div class="field-group">
                            <label for="CRM_AssignedSalesperson">Vendedor Asignado</label>
                            <input type="text" id="CRM_AssignedSalesperson" class="form-control" readonly>
                        </div>

                        <div class="field-group">
                            <label for="CRM_ContactEmail">Correo Electrónico</label>
                            <input type="email" id="CRM_ContactEmail" class="form-control" readonly>
                        </div>

                        <div class="field-group">
                            <label for="CRM_ContactLegalIdentifier">Identificador Legal</label>
                            <input type="text" id="CRM_ContactLegalIdentifier" class="form-control" readonly>
                        </div>
                    </div>

                    <!-- Información de ubicación -->
                    <div class="row-3col">
                        <div class="field-group">
                            <label for="CRM_ContactAdress">Dirección</label>
                            <input type="text" id="CRM_ContactAdress" class="form-control" readonly>
                        </div>

                        <div class="field-group">
                            <label for="CRM_ContactColonia">Colonia</label>
                            <input type="text" id="CRM_ContactColonia" class="form-control" readonly>
                        </div>

                        <div class="field-group">
                            <label for="CRM_ContactNumber">Número</label>
                            <input type="text" id="CRM_ContactNumber" class="form-control" readonly>
                        </div>
                    </div>

                    <div class="row-3col">
                        <div class="field-group">
                            <label for="CRM_ContactCity">Ciudad</label>
                            <input type="text" id="CRM_ContactCity" class="form-control" readonly>
                        </div>

                        <div class="field-group">
                            <label for="CRM_ContactState">Estado</label>
                            <input type="text" id="CRM_ContactState" class="form-control" readonly>
                        </div>

                        <div class="field-group">
                            <label for="CRM_ContactCountry">País</label>
                            <input type="text" id="CRM_ContactCountry" class="form-control" readonly>
                        </div>
                    </div>

                    <div class="row-3col">
                        <div class="field-group">
                            <label for="CRM_ContactZip">Código Postal</label>
                            <input type="text" id="CRM_ContactZip" class="form-control" readonly>
                        </div>
                        <div class="field-group"></div>
                        <div class="field-group"></div>
                    </div>
                </form>

                <!-- === SELECCIÓN DE FORMULARIOS === -->
                <form id="Forms-SelecForm" class="form-section" aria-label="Selección de tipos de cotización">
                    <h3 class="form-title">Elección de Formularios para Cotización</h3>
                    <p class="text-small mb-3">Seleccione los tipos de equipos para los cuales necesita cotización:</p>

                    <div class="checkbox-group-vertical">

                        <div class="field-group horizontal">
                            <input type="checkbox" id="FormSolicVis" name="cotizacionForms" value="SolicVis"
                                aria-describedby="FormSolicVis-help">
                            <label for="FormSolicVis">Formulario de Solicitud de Visita Técnica</label>
                        </div>
                        <small id="FormSolicVis-help" class="help-text">
                            Para solicitar una visita técnica al sitio
                        </small> <!-- SOLVIS -->

                        <div class="field-group horizontal">
                            <input type="checkbox" id="FormPTTransNac" name="cotizacionForms" value="PTTransNac" 
                                aria-describedby="FormPTTransNac-help"> 
                            <label for="FormPTTransNac">Formulario de Plantas, Tableros y Transformadores Nacionales</label> 
                        </div>
                        <small id="FormPTTransNac-help" class="help-text"> 
                            Para plantas de emergencia, tableros de transferencia/sincronía y transformadores
                        </small> <!-- FPETABTRANS -->

                        <div class="field-group horizontal">
                            <input type="checkbox" id="FormPTTransUL" name="cotizacionForms" value="PTTransUL"
                                aria-describedby="FormPTTransUL-help">
                            <label for="FormPTTransUL">Formulario de Plantas, Tableros y Transformadores UL</label>
                        </div>
                        <small id="FormPTTransUL-help" class="help-text">
                            Para plantas que requieren certificación UL (mercado de EUA y Canadá)
                        </small> <!-- FPETABTRANSUL -->

                        <div class="field-group horizontal">
                            <input type="checkbox" id="FormAire" name="cotizacionForms" value="Aire"
                                aria-describedby="FormAire-help">
                            <label for="FormAire">Formulario de Aires Acondicionados</label>
                        </div>
                        <small id="FormAire-help" class="help-text">
                            Para sistemas de aire acondicionado
                        </small> <!-- Aires-->

                        <div class="field-group horizontal">
                            <input type="checkbox" id="FormSistCritUPS" name="cotizacionForms" value="SistCritUPS"
                                aria-describedby="FormSistCritUPS-help">
                            <label for="FormSistCritUPS">Formulario de Sistemas Críticos (UPS)</label>
                        </div>
                        <small id="FormSistCritUPS-help" class="help-text">
                            Para sistemas UPS y equipos de energía ininterrumpida
                        </small> <!-- SCUPS -->

                        <div class="field-group horizontal">
                            <input type="checkbox" id="FormBess" name="cotizacionForms" value="BESS"
                                aria-describedby="FormBess-help">
                            <label for="FormBess">Formulario de BESS</label>
                        </div>  <!-- Step -->
                        <small id="FormBess-help" class="help-text">
                            Para sistemas de almacenamiento de energía (BESS)
                        </small>  <!-- Step -->

                        <div class="field-group horizontal">
                            <input type="checkbox" id="FormSolar" name="cotizacionForms" value="Solar"
                                aria-describedby="FormSolar-help">
                            <label for="FormSolar">Formulario de Sistemas Solares</label>
                        </div> <!-- SOLARR -->
                        <small id="FormSolar-help" class="help-text">
                            Para sistemas de energía solar fotovoltaica
                        </small> <!-- SOLARR -->

                        <div class="field-group horizontal">
                            <input type="checkbox" id="FormEneCog" name="cotizacionForms" value="EnergyCogeneration"
                                aria-describedby="FormEneCog-help">
                            <label for="FormEneCog">Formulario de Energía y Cogeneración</label>
                        </div>
                        <small id="FormEneCog-help" class="help-text">
                            Para sistemas de energía y cogeneración (turbinas/motores)
                        </small> <!-- ENECOG -->

                        <div class="field-group horizontal">
                            <input type="checkbox" id="FormImess" name="cotizacionForms" value="Imess"
                                aria-describedby="FormImess-help">
                            <label for="FormImess">Formulario de IMESS</label>
                        </div>
                        <small id="FormImess-help" class="help-text">
                            Para sistemas de almacenamiento de energía con inversores (IMESS)
                        </small> <!-- IMESS -->

                        <div class="field-group horizontal">
                            <input type="checkbox" id="FormProyecEsp" name="cotizacionForms" value="ProyecEsp"
                                aria-describedby="FormProyecEsp-help">
                            <label for="FormProyecEsp">Formulario de Proyectos Especiales</label>
                        </div>
                        <small id="FormProyecEsp-help" class="help-text">
                            Para proyectos especiales y personalizados
                        </small> <!-- PROYESP -->

                    </div>
                </form>

                <!-- === FORMULARIOS DE COTIZACIÓN === -->
                <form id="Forms-Gral" class="form-section" aria-label="Formularios de cotización">
                    <h3 class="form-title">Sección de Formularios</h3>

                    <!-- === FORMULARIO GENERAL === -->
                    <div class="section-FormGral">
                        <h4 class="form-subtitle">Formulario General
                            <span class="required-counter pending" id="general-counter">0/4 completados</span>
                        </h4>

                        <!-- Nombre del proyecto -->
                        <div class="row-1col">
                            <div class="form-group">
                                <label for="projectname" class="required">Nombre del Proyecto:</label>
                                <input type="text" id="projectname" class="form-control" placeholder="Escriba su respuesta" required>
                            </div>
                        </div>

                        
                        <!-- Información del proyecto -->
                        <div class="row-1col">
                            <div class="field-group">
                                <label for="InfoProy" class="required">Descripción del Proyecto:</label>
                                <textarea id="InfoProy" rows="4" class="form-control" required
                                    placeholder="Describa detalladamente: tipo de proyecto, requerimientos específicos, condiciones del sitio, cronograma esperado, etc."
                                    aria-describedby="InfoProy-help"></textarea>
                                <small id="InfoProy-help" class="help-text">
                                    Proporcione toda la información relevante que ayude al especialista a entender el
                                    proyecto y preparar una cotización precisa
                                </small>
                            </div>
                        </div>

                        <div id="location-fields" class="location-conditional">
                            <h5 class="form-section-title">Información de Ubicación</h5>
                            <div class="row-2col">
                                <div class="field-group">
                                    <label for="visitCountry" class="required">País:</label>
                                    <select id="visitCountry" class="form-select" aria-describedby="visitCountry-help" required>
                                        <option value="" selected >Selecciona un país</option> <!-- Correccion Victor disabled-->
                                    </select>
                                    <small id="visitCountry-help" class="help-text">
                                        Seleccione el país donde se realizará la visita
                                    </small>
                                </div>
                                <div class="field-group">
                                    <label for="visitState" class="required">Estado/Provincia:</label>
                                    <select id="visitState" class="form-select" aria-describedby="visitState-help" required>
                                        <option value="" selected >Primero selecciona un país</option> <!-- Correccion Victor disabled-->
                                    </select>
                                    <small id="visitState-help" class="help-text">
                                        Seleccione el estado o provincia de la visita
                                    </small>
                                </div>
                            </div>
                            <div class="row-1col">
                                <div class="field-group">
                                    <label for="visitAddress" class="required">Ciudad o Dirección Completa:</label>
                                    <textarea id="visitAddress" rows="3" class="form-control"
                                        placeholder="Calle, número, colonia, ciudad, código postal..."
                                        aria-describedby="visitAddress-help" required></textarea>
                                    <small id="visitAddress-help" class="help-text">
                                        Proporcione la dirección completa y detallada para la visita del especialista
                                    </small>
                                </div>
                            </div>
                        </div>


                        <h5 class="form-section-title">Contacto técnico del Cliente, para poder resolver dudas de la solicitud</h5>
                        <div class="row-2col">
                            <div class="field-group">
                                <label for="name_contact_technician">Nombre:</label>
                                <input type="text" id="name_contact_technician" class="field-input" 
                                    placeholder="Escriba su respuesta">
                            </div>
                            <div class="field-group">
                                <label class="field-label" for="phone_contact_technician">Télefono:</label>
                                <input type="tel" id="phone_contact_technician" class="field-input" 
                                    placeholder="+52 55 1234 5678">
                            </div>                  
                        </div>

                        <div class="row-2col">
                            <div class="field-group">
                                <label for="position_contact_technician">Puesto:</label>
                                <input type="text" id="position_contact_technician" class="field-input" 
                                    placeholder="Escriba su respuesta">
                            </div>
                            <div class="field-group">
                                <label for="email_contact_technician">Email:</label>
                                <input type="email" id="email_contact_technician" class="field-input" 
                                    placeholder="ejemplo@igsa.com">
                            </div> 
                        </div>


                    

                    </div>

                    <!-- === FORMULARIOS ESPECÍFICOS === -->

                    <!-- Formulario de Solicitud de Visita -->
                    <div class="section-FormSolicVis" style="display: none;">
                        <h4 class="form-subtitle">1) Formulario de Solicitud de Visita Técnica
                            <span class="required-counter pending" id="solicvis-counter">0/0 completados</span>
                        </h4>
                        {% include 'Ventas/Cotiz/CotizEspSolicitud/FormSolicVis.html' %}
                    </div> <!-- SOLVIS -->

                    <!-- Formulario de Plantas Eléctricas -->
                    <div class="section-FormPTTransNac" style="display: none;"> 
                        <h4 class="form-subtitle">2) Formulario de Plantas, Tableros y Transformadores Nacionales 
                            <span class="required-counter pending" id="pttransnac-counter">0/0 completados</span> 
                        </h4>
                        {% include 'Ventas/Cotiz/CotizEspSolicitud/FormPTTransNac.html' %} 
                    </div> <!-- FPETABTRANS -->

                    <!-- Formulario de Plantas Eléctricas UL -->
                    <div class="section-FormPTTransUL" style="display: none;">
                        <h4 class="form-subtitle">3) Formulario de Plantas, Tableros y Transformadores UL
                            <span class="required-counter pending" id="pttransul-counter">0/0 completados</span> 
                        </h4>
                        {% include 'Ventas/Cotiz/CotizEspSolicitud/FormPTTransUL.html' %} 
                    </div> <!-- FPETABTRANSUL -->

                    <div class="section-FormAire" style="display: none;">
                        <h4 class="form-subtitle">4) Formulario de Aires Acondicionados
                            <span class="required-counter pending" id="aire-counter">0/0 completados</span>
                        </h4>
                        {% include 'Ventas/Cotiz/CotizEspSolicitud/FormAire.html' %}
                    </div> <!-- Aires -->

                    <!-- Formulario de Sistemas Críticos (UPS) -->
                    <div class="section-FormSistCritUPS" style="display: none;">
                        <h4 class="form-subtitle">5) Formulario de Sistemas Críticos (UPS)
                            <span class="required-counter pending" id="sistcritups-counter">0/0 completados</span>
                        </h4>
                        {% include 'Ventas/Cotiz/CotizEspSolicitud/FormSistCritUPS.html' %}
                    </div> <!-- SCUPS -->   

                    <!-- Formulario de BESS -->
                    <div class="section-FormBess" style="display: none;">
                        <h4 class="form-subtitle">6) Formulario de BESS
                            <span class="required-counter pending" id="bess-counter">0/0 completados</span>
                        </h4>
                        {% include 'Ventas/Cotiz/CotizEspSolicitud/FormBess.html' %}
                    </div> <!-- Step -->

                    <div class="section-FormSolar" style="display: none;">
                        <h4 class="form-subtitle">7) Formulario de Sistemas Solares
                            <span class="required-counter pending" id="solar-counter">0/0 completados</span>
                        </h4>
                        {% include 'Ventas/Cotiz/CotizEspSolicitud/FormSolar.html' %}
                    </div> <!-- SOLARR -->
                    
                    <div class="section-FormEneCog" style="display: none;">
                        <h4 class="form-subtitle">8) Formulario de Energía y Cogeneración (Turbina / Motores)
                            <span class="required-counter pending" id="enecog-counter">0/0 completados</span>
                        </h4>
                        {% include 'Ventas/Cotiz/CotizEspSolicitud/FormEneCog.html' %}
                    </div> <!-- ENECOG -->

                    <div class="section-FormImess" style="display: none;">
                        <h4 class="form-subtitle">9) Formulario de IMESS
                            <span class="required-counter pending" id="imess-counter">0/0 completados</span>
                        </h4>
                        {% include 'Ventas/Cotiz/CotizEspSolicitud/FormImess.html' %}
                    </div> <!-- IMESS -->

                    <div class="section-FormProyecEsp" style="display: none;">
                        <h4 class="form-subtitle">10) Formulario de Proyectos Especiales
                            <span class="required-counter pending" id="proyecesp-counter">0/0 completados</span>
                        </h4>
                        {% include 'Ventas/Cotiz/CotizEspSolicitud/FormProyecEsp.html' %}
                    </div> <!-- PROYESP -->

                </form>

                <!-- === BOTÓN DE ENVÍO === -->
                <div class="single-button-center">
                    <button type="submit" class="btn-custom btn-primary btn-large" id="btn-submit-request" disabled
                        aria-describedby="submit-help">
                        <span class="btn-text">Solicitar Cotización</span>
                        <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"
                            style="display: none;"></span>
                    </button>
                </div>
                <div class="text-center">
                    <small id="submit-help" class="help-text">
                        Complete todos los formularios requeridos para habilitar el envío
                    </small>
                </div>
            </div>
        </div>
    </section>
</main>

<!-- === SCRIPTS === -->
<script src="{{ url_for('static', filename='js/Ventas/Cotiz/CotizEspSolicitud.js') }}"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

{% endblock %}