<!--
Archivo: FormPTTransNac.html
Ruta: src\templates\Ventas\Cotiz\CotizEspSolicitud\FormPTTransNac.html
Descripción: Formulario específico para solicitudes de cotización de Plantas, Tableros y Transformadores Nacionales.
Autor: Equipo de Desarrollo IGSA
Fecha: 2025
-->
<!--
<h3 class="form-title">Solicitud de Cotización - Plantas, Tableros y Transformadores Nacionales</h3>
-->
<!-- ============================================================================ -->
<!-- SECCIÓN DE CAMPOS PERSONALIZADOS -->
<!-- ============================================================================ -->

<!-- SECCIÓN 1: PLANTAS -->
<div class="row-1col">
    <div class="form-group">
        <label for="pttransnac_incluye_planta" class="required">Incluye Planta:</label>
        <select id="pttransnac_incluye_planta" class="form-select" data-conditional-toggle="seccion-planta-PENAC" data-show-when="si" required>
            <option value="" selected disabled>-- Selecciona --</option>
            <option value="si">Sí</option>
            <option value="no">No</option>
        </select>
    </div>
</div>

<div id="seccion-planta-PENAC" class="conditional-section" style="display: none;">

    <h5 style="margin-top: 25px; margin-bottom: 15px; color: #495057; font-weight: 600;">⚡ Planta Electrica</h5>

    <div class="row-3col" style="margin-top: 20px;">
        <div class="form-group">
            <label for="pttransnac_planta_capacidad" class="required">Capacidad (en KW):</label>
            <input type="number" id="pttransnac_planta_capacidad" class="form-control" 
                placeholder="Escriba un número mayor que 0" min="1" required disabled>
        </div>
        <div class="form-group">
            <label for="pttransnac_planta_voltaje" class="required">Voltaje:</label>
            <select id="pttransnac_planta_voltaje" class="form-select" required disabled>
                <option value="" selected disabled>-- Selecciona --</option>
                <option value="220">220V</option>
                <option value="440">440V</option>
                <option value="480">480V</option>
                <option value="4160">4160V</option>
                <option value="13200">13200V</option>
                <option value="13800">13800V</option>
                <option value="otro">Otro (especifique en comentarios)</option>
            </select>
        </div>
        <div class="form-group">
            <label for="pttransnac_planta_modo_operacion" class="required">Modo de Operación:</label>
            <select id="pttransnac_planta_modo_operacion" class="form-select" required disabled>
                <option value="" selected disabled>-- Selecciona --</option>
                <option value="emergencia">Emergencia</option>
                <option value="continuo">Continuo</option>
                <option value="prime">Prime</option>
            </select>
        </div>
    </div>

    <div class="row-3col">
        <div class="form-group">
            <label for="pttransnac_planta_caseta" class="required">Requiere Caseta Acústica:</label>
            <select id="pttransnac_planta_caseta" class="form-select" required disabled>
                <option value="" selected disabled>-- Selecciona --</option>
                <option value="si_modular">Sí, caseta acústica modular</option>
                <option value="si_contenedor">Sí, caseta acústica tipo contenedor</option>
                <option value="sin_caseta">Sin caseta</option>
            </select>
        </div>
        <div class="form-group">
            <label for="pttransnac_planta_potencia_efectiva" class="required">Potencia Efectiva:</label>
            <select id="pttransnac_planta_potencia_efectiva" class="form-select" required disabled>
                <option value="" selected disabled>-- Selecciona --</option>
                <option value="si">Sí</option>
                <option value="no">No</option>
            </select>
        </div>
        <div class="form-group">
            <label for="pttransnac_planta_subcategoria" class="required">SubCategoría Plantas:</label>
            <select id="pttransnac_planta_subcategoria" class="form-select" required disabled>
                <option value="" selected disabled>-- Selecciona --</option>
                <option value="gas_natural">Gas Natural</option>
                <option value="diesel">Diesel</option>
            </select>
        </div>
    </div>

    <div class="row-3col">
        <div class="form-group">
            <label for="pttransnac_planta_control" class="required">Control Requerido:</label>
            <select id="pttransnac_planta_control" class="form-select" required disabled>
                <option value="" selected disabled>-- Selecciona --</option>
                <option value="dse_estandar">DSE (Estándar)</option>
                <option value="deif">Deif</option>
                <option value="woodward">Woodward</option>
                <option value="comap">Comap</option>
                <option value="otro">Otro (especifique en comentarios)</option>
            </select>
        </div>
        <div class="form-group">
            <label for="pttransnac_planta_tipo_tanque" class="required">Tipo de Tanque:</label>
            <select id="pttransnac_planta_tipo_tanque" class="form-select" required disabled>
                <option value="" selected disabled>-- Selecciona --</option>
                <option value="tanque_base_pared_sencilla">Tanque base pared sencilla (estándar)</option>
                <option value="tanque_base_doble_pared">Tanque base doble pared</option>
                <option value="certificado_ul_142">Certificado UL 142</option>
            </select>
        </div>
        <div class="form-group">
            <label for="pttransnac_planta_capacidad_tanque" class="required">Capacidad del Tanque Base:</label>
            <select id="pttransnac_planta_capacidad_tanque" class="form-select" required disabled>
                <option value="" selected disabled>-- Selecciona --</option>
                <option value="estandar">Estándar</option>
                <option value="12_horas">12 horas de autonomía</option>
                <option value="24_horas">24 horas de autonomía</option>
                <option value="otro">Otro (Especifique en comentarios)</option>
            </select>
        </div>
    </div>

    <div class="row-2col">
        <div class="form-group">
            <label for="pttransnac_planta_tanque_externo" class="required">Requiere tanque externo:</label>
            <select id="pttransnac_planta_tanque_externo" class="form-select" required disabled>
                <option value="" selected disabled>-- Selecciona --</option>
                <option value="no">No</option>
                <option value="250_l">250 L</option>
                <option value="500_l">500 L</option>
                <option value="1000_l">1000 L</option>
                <option value="1500_l">1500 L</option>
                <option value="2000_l">2000 L</option>
                <option value="2500_l">2500 L</option>
                <option value="3000_l">3000 L</option>
                <option value="5000_l">5000 L</option>
                <option value="10000_l">10000 L</option>
                <option value="15000_l">15000 L</option>
                <option value="otro">Otro (Especificar en comentarios)</option>
            </select>
        </div>
    </div>

    <h5 style="margin-top: 25px; margin-bottom: 15px; color: #495057; font-weight: 600;">⚡ Transformadores</h5>

    <div class="row-3col">
        <div class="form-group">
            <label for="pttransnac_trans_tipo">Tipo de Transformador:</label>
            <select id="pttransnac_trans_tipo" class="form-select" >
                <option value="" selected disabled>-- Selecciona --</option>
                <option value="pedestal">Pedestal</option>
                <option value="subestacion">Subestación</option>
                <option value="subestacion_compacta">Subestación compacta</option>
                <option value="encapsulado">Encapsulado</option>
            </select>
        </div>
        <div class="form-group">
            <label for="pttransnac_trans_capacidad">Capacidad - Transformador:</label>
            <select id="pttransnac_trans_capacidad" class="form-select" >
                <option value="" selected disabled>-- Selecciona --</option>
                <option value="10_kva">10 KVA</option>
                <option value="15_kva">15 KVA</option>
                <option value="30_kva">30 KVA</option>
                <option value="45_kva">45 KVA</option>
                <option value="75_kva">75 KVA</option>
                <option value="112.5_kva">112.5 KVA</option>
                <option value="150_kva">150 KVA</option>
                <option value="225_kva">225 KVA</option>
                <option value="300_kva">300 KVA</option>
                <option value="500_kva">500 KVA</option>
                <option value="750_kva">750 KVA</option>
                <option value="1000_kva">1000 KVA</option>
                <option value="1250_kva">1250 KVA</option>
                <option value="1500_kva">1500 KVA</option>
                <option value="2000_kva">2000 KVA</option>
                <option value="2500_kva">2500 KVA</option>
                <option value="3000_kva">3000 KVA</option>
                <option value="4000_kva">4000 KVA</option>
            </select>
        </div>
        <div class="form-group">
            <label for="pttransnac_trans_conexion">Conexión:</label>
            <select id="pttransnac_trans_conexion" class="form-select" >
                <option value="" selected disabled>-- Selecciona conexión --</option>
                <option value="delta_estrella">Delta-Estrella</option>
                <option value="estrella_estrella">Estrella-Estrella</option>
                <option value="estrella_delta">Estrella-Delta</option>
            </select>
        </div>
    </div>

    <div class="row-3col">
        <div class="form-group">
            <label for="pttransnac_trans_voltaje_primario">Voltaje Primario:</label>
            <select id="pttransnac_trans_voltaje_primario" class="form-select" >
                <option value="" selected disabled>-- Selecciona --</option>
                <option value="220/127_v">220/127 V</option>
                <option value="440/254_v">440/254 V</option>
                <option value="460/266_v">460/266 V</option>
                <option value="480/277_v">480/277 V</option>
                <option value="4160_v">4160 V</option>
                <option value="13200_v">13200 V</option>
                <option value="13800_v">13800 V</option>
                <option value="22860_v">22860 V</option>
                <option value="23000_v">23000 V</option>
                <option value="33000_v">33000 V</option>
                <option value="34500_v">34500 V</option>
            </select>
        </div>
        <div class="form-group">
            <label for="pttransnac_trans_voltaje_secundario">Voltaje Secundario:</label>
            <select id="pttransnac_trans_voltaje_secundario" class="form-select" >
                <option value="" selected disabled>-- Selecciona --</option>
                <option value="220/127_v">220/127 V</option>
                <option value="440/254_v">440/254 V</option>
                <option value="460/266_v">460/266 V</option>
                <option value="480/277_v">480/277 V</option>
                <option value="4160_v">4160 V</option>
                <option value="13200_v">13200 V</option>
                <option value="13800_v">13800 V</option>
                <option value="22860_v">22860 V</option>
                <option value="23000_v">23000 V</option>
                <option value="33000_v">33000 V</option>
                <option value="34500_v">34500 V</option>
            </select>
        </div>
        <div class="form-group">
            <label for="pttransnac_trans_material">Material de Construcción:</label>
            <select id="pttransnac_trans_material" class="form-select" >
                <option value="" selected disabled>-- Selecciona --</option>
                <option value="cobre">Cobre</option>
                <option value="aluminio">Aluminio</option>
            </select>
        </div>
    </div>

    <div class="row-1col">
        <div class="field-group">
            <label for="pttransnac_trans_comentarios">Comentarios Adicionales Transformador:</label>
            <textarea id="pttransnac_trans_comentarios" class="form-control" rows="3" 
                    placeholder="Comentarios adicionales transformador"></textarea>
        </div>
    </div>

    <div class="row-1col">
        <div class="field-group">
            <label for="pttransnac_planta_comentarios">Comentarios Adicionales Plantas:</label>
            <textarea id="pttransnac_planta_comentarios" class="form-control" rows="3" 
                    placeholder="Comentarios adicionales plantas" disabled></textarea>
        </div>
    </div>

</div>

<!-- SECCIÓN 2: TABLEROS DE TRANSFERENCIA -->

<div class="row-1col">
    <div class="form-group">
        <label for="pttransnac_incluye_tablero" class="required">Incluye Tablero de Transferencia:</label>
        <select id="pttransnac_incluye_tablero" class="form-select" data-conditional-toggle="seccion-transfer-PENAC" data-show-when="si" required>
            <option value="" selected disabled>-- Selecciona --</option>
            <option value="si">Sí</option>
            <option value="no">No</option>
        </select>
    </div>
</div>

<div id="seccion-transfer-PENAC" class="conditional-section" style="display: none;">

    <h5 style="margin-top: 25px; margin-bottom: 15px; color: #495057; font-weight: 600;">⚡ Tablero de Transferencia</h5>

    <div class="row-2col">
        <div class="form-group">
            <label for="pttransnac_tablero_tipo_transferencia" class="required">Tipo de Transferencia:</label>
            <select id="pttransnac_tablero_tipo_transferencia" class="form-select" required disabled>
                <option value="" selected disabled>-- Selecciona --</option>
                <option value="transicion_abierta_estandar">Transición Abierta (Estándar)</option>
                <option value="transicion_abierta_igsa">Transición Abierta (IGSA)</option>
                <option value="transicion_cerrada">Transición Cerrada</option>
            </select>
        </div>
        <div class="form-group">
            <label for="pttransnac_tablero_voltaje" class="required">Voltaje de Operación - Tablero Transferencia:</label>
            <input type="text" id="pttransnac_tablero_voltaje" class="form-control" placeholder="Escriba el voltaje" required disabled>
        </div>
    </div>

    <div class="row-2col">
        <div class="form-group">
            <label for="pttransnac_tablero_capacidad" class="required">Capacidad - Tablero Transferencia:</label>
            <select id="pttransnac_tablero_capacidad" class="form-select" required disabled>
                <option value="" selected disabled>-- Selecciona --</option>
                <option value="planta">De acuerdo a la capacidad de la Planta</option>
                <option value="100a">100 A</option>
                <option value="260a">260 A</option>
                <option value="400a">400 A</option>
                <option value="600a">600 A</option>
                <option value="800a">800 A</option>
                <option value="1000a">1000 A</option>
                <option value="1200a">1200 A</option>
                <option value="1600a">1600 A</option>
                <option value="2000a">2000 A</option>
                <option value="2500a">2500 A</option>
                <option value="3200a">3200 A</option>
                <option value="4000a">4000 A</option>
                <option value="5000a">5000 A</option>
                <option value="otro">Otro (Especifique en comentarios)</option>
            </select>
        </div>
        <div class="form-group">
            <label for="pttransnac_tablero_caseta" class="required">¿Se requiere tablero dentro de caseta acústica?</label>
            <select id="pttransnac_tablero_caseta" class="form-select" required disabled>
                <option value="" selected disabled>-- Selecciona --</option>
                <option value="si">Sí</option>
                <option value="no">No</option>
            </select>
        </div>
    </div>

    <div class="row-1col">
        <div class="field-group">
            <label for="pttransnac_tablero_comentarios">Comentarios Adicionales Tablero de Transferencia:</label>
            <textarea id="pttransnac_tablero_comentarios" class="form-control" rows="3" 
                    placeholder="Comentarios adicionales tableros" disabled></textarea>
        </div>
    </div>          

</div>


<!-- SECCIÓN 3: TABLEROS DE SINCRINIA -->
<div class="row-1col">
    <div class="form-group">
        <label for="pttransnac_incluye_tablero_SINC" class="required">Incluye Tablero de sincronía:</label>
        <select id="pttransnac_incluye_tablero_SINC" class="form-select" data-conditional-toggle="seccion-sincronia-PENAC" data-show-when="si" required>
            <option value="" selected disabled>-- Selecciona --</option>
            <option value="si">Sí</option>
            <option value="no">No</option>
        </select>
    </div>
</div>

<div id="seccion-sincronia-PENAC" class="conditional-section" style="display: none;">    

    <h5 style="margin-top: 25px; margin-bottom: 15px; color: #495057; font-weight: 600;">⚡ Tablero de Sincronía</h5>

    <div class="row-2col">
        <div class="form-group">
            <label for="pttransnac_tablero_SINC_cantidad_equipos" class="required">Cantidad de equipos a sincronizar:</label>
            <input type="number" id="pttransnac_tablero_SINC_cantidad_equipos" class="form-control" 
                placeholder="Escriba un número mayor que 0" min="1" required disabled>
        </div>
        <div class="form-group">
            <label for="pttransnac_tablero_SINC_capacidad_equipos" class="required">Capacidad de equipos:</label>
            <input type="number" id="pttransnac_tablero_SINC_capacidad_equipos" class="form-control" 
                placeholder="Entre 20 y 3300" min="20" max="3300" required disabled>
        </div>
    </div>

    <div class="row-2col">
        <div class="form-group">
            <label for="pttransnac_tablero_SINC_voltaje_operacion" class="required">Voltaje de Operación - Tablero Sincronía:</label>
            <input type="text" id="pttransnac_tablero_SINC_voltaje_operacion" class="form-control" 
                placeholder="Escriba su respuesta" required disabled>
        </div>        
        <div class="form-group">
            <label for="pttransnac_tablero_SINC_unidad_proteccion" class="required">Unidad de Protección - Tableros:</label>
            <select id="pttransnac_tablero_SINC_unidad_proteccion" class="form-select" required disabled>
                <option value="" selected disabled>-- Selecciona --</option>
                <option value="li">LI (estándar)</option>
                <option value="lsi">LSI</option>
                <option value="lsig">LSIG</option>
            </select>
        </div>
    </div>

    <div class="row-1col">
        <div class="field-group">
            <label for="pttransnac_tablero_SINC_comentarios">Comentarios Adicionales Tablero de Sincronía:</label>
            <textarea id="pttransnac_tablero_SINC_comentarios" class="form-control" rows="3" 
                    placeholder="Comentarios adicionales tableros" disabled></textarea>
        </div>
    </div>    

</div>

<!-- SECCION 4: TRANSFORMADORES-->

<!-- PIDIERON AGREGAR ESTA SECCION A LA SECCION DE PLANTAS Y QUE FUESE NO BLIGATORIO, DEJO EL CODIGO POR SI HAY QUE VOLVER A SEPARARLO 
<div class="row-1col">
    <div class="form-group">
        <label for="pttransnac_incluye_transformador" class="required">Incluye Transformador:</label>
        <select id="pttransnac_incluye_transformador" class="form-select" data-conditional-toggle="seccion-transformadores-PENAC" data-show-when="si" required>
            <option value="" selected disabled>-- Selecciona --</option>
            <option value="si">Sí</option>
            <option value="no">No</option>
        </select>
    </div>
</div>

<div id="seccion-transformadores-PENAC" class="conditional-section" style="display: none;">

    <h5 style="margin-top: 25px; margin-bottom: 15px; color: #495057; font-weight: 600;">⚡ Transformadores</h5>

    <div class="row-3col">
        <div class="form-group">
            <label for="pttransnac_trans_tipo" class="required">Tipo de Transformador:</label>
            <select id="pttransnac_trans_tipo" class="form-select" required>
                <option value="" selected disabled>-- Selecciona --</option>
                <option value="pedestal">Pedestal</option>
                <option value="subestacion">Subestación</option>
                <option value="subestacion_compacta">Subestación compacta</option>
                <option value="encapsulado">Encapsulado</option>
            </select>
        </div>
        <div class="form-group">
            <label for="pttransnac_trans_capacidad" class="required">Capacidad - Transformador:</label>
            <select id="pttransnac_trans_capacidad" class="form-select" required>
                <option value="" selected disabled>-- Selecciona --</option>
                <option value="10_kva">10 KVA</option>
                <option value="15_kva">15 KVA</option>
                <option value="30_kva">30 KVA</option>
                <option value="45_kva">45 KVA</option>
                <option value="75_kva">75 KVA</option>
                <option value="112.5_kva">112.5 KVA</option>
                <option value="150_kva">150 KVA</option>
                <option value="225_kva">225 KVA</option>
                <option value="300_kva">300 KVA</option>
                <option value="500_kva">500 KVA</option>
                <option value="750_kva">750 KVA</option>
                <option value="1000_kva">1000 KVA</option>
                <option value="1250_kva">1250 KVA</option>
                <option value="1500_kva">1500 KVA</option>
                <option value="2000_kva">2000 KVA</option>
                <option value="2500_kva">2500 KVA</option>
                <option value="3000_kva">3000 KVA</option>
                <option value="4000_kva">4000 KVA</option>
            </select>
        </div>
        <div class="form-group">
            <label for="pttransnac_trans_conexion" class="required">Conexión:</label>
            <select id="pttransnac_trans_conexion" class="form-select" required>
                <option value="" selected disabled>-- Selecciona conexión --</option>
                <option value="delta_estrella">Delta-Estrella</option>
                <option value="estrella_estrella">Estrella-Estrella</option>
                <option value="estrella_delta">Estrella-Delta</option>
            </select>
        </div>
    </div>

    <div class="row-3col">
        <div class="form-group">
            <label for="pttransnac_trans_voltaje_primario" class="required">Voltaje Primario:</label>
            <select id="pttransnac_trans_voltaje_primario" class="form-select" required>
                <option value="" selected disabled>-- Selecciona --</option>
                <option value="220/127_v">220/127 V</option>
                <option value="440/254_v">440/254 V</option>
                <option value="460/266_v">460/266 V</option>
                <option value="480/277_v">480/277 V</option>
                <option value="4160_v">4160 V</option>
                <option value="13200_v">13200 V</option>
                <option value="13800_v">13800 V</option>
                <option value="22860_v">22860 V</option>
                <option value="23000_v">23000 V</option>
                <option value="33000_v">33000 V</option>
                <option value="34500_v">34500 V</option>
            </select>
        </div>
        <div class="form-group">
            <label for="pttransnac_trans_voltaje_secundario" class="required">Voltaje Secundario:</label>
            <select id="pttransnac_trans_voltaje_secundario" class="form-select" required>
                <option value="" selected disabled>-- Selecciona --</option>
                <option value="220/127_v">220/127 V</option>
                <option value="440/254_v">440/254 V</option>
                <option value="460/266_v">460/266 V</option>
                <option value="480/277_v">480/277 V</option>
                <option value="4160_v">4160 V</option>
                <option value="13200_v">13200 V</option>
                <option value="13800_v">13800 V</option>
                <option value="22860_v">22860 V</option>
                <option value="23000_v">23000 V</option>
                <option value="33000_v">33000 V</option>
                <option value="34500_v">34500 V</option>
            </select>
        </div>
        <div class="form-group">
            <label for="pttransnac_trans_material" class="required">Material de Construcción:</label>
            <select id="pttransnac_trans_material" class="form-select" required>
                <option value="" selected disabled>-- Selecciona --</option>
                <option value="cobre">Cobre</option>
                <option value="aluminio">Aluminio</option>
            </select>
        </div>
    </div>

    <div class="row-1col">
        <div class="field-group">
            <label for="pttransnac_trans_comentarios">Comentarios Adicionales Transformador:</label>
            <textarea id="pttransnac_trans_comentarios" class="form-control" rows="3" 
                    placeholder="Comentarios adicionales transformador"></textarea>
        </div>
    </div>
</div>
-->

<!-- SECCION 5: ACCESORIOS -->

<div class="row-1col">
    <div class="form-group">
        <label for="pttransnac_incluye_accesorios" class="required">Incluye Accesorios:</label>
        <select id="pttransnac_incluye_accesorios" class="form-select" data-conditional-toggle="seccion-accesorios-PENAC" data-show-when="si" required>
            <option value="" selected disabled>-- Selecciona --</option>
            <option value="si">Sí</option>
            <option value="no">No</option>
        </select>
    </div>
</div>

<div id="seccion-accesorios-PENAC" class="conditional-section" style="display: none;">

    <h5 style="margin-top: 25px; margin-bottom: 15px; color: #495057; font-weight: 600;">⚡ Accesorios</h5>

    <div class="row-2col">
        <div class="form-group">
            <label for="pttransnac_accesorios_subcategoria" class="required">SubCategoría Accesorios:</label>
            <select id="pttransnac_accesorios_subcategoria" class="form-select" required disabled>
                <option value="" selected disabled>-- Selecciona --</option>
                <option value="selector_voltaje">Selector de voltaje</option>
                <option value="conectores_rapidos">Conectores rápidos</option>
                <option value="remolque">Remolque</option>
                <option value="tanque_combustible">Tanque de combustible con especificación CFE</option>
                <option value="accesorios_cfe">Accesorios CFE</option>
                <option value="pintura_anticorrosiva">Pintura Anticorrosiva</option>
                <option value="modulos_comunicacion">Módulos de comunicación</option>
                <option value="sistema_contra_incendios">Sistemas Contra Incendios</option>
                <option value="persianas_automaticas">Persianas Automáticas</option>
                <option value="resistencia_puestas_tierra">Resistencias de puesta a tierra</option>
                <option value="proteccion_lsig">Protección LSIG para interruptor a pie de generador</option>
                <option value="controlador_especial">Controlador especial</option>
                <option value="interruptor_media_tension">Interruptor a pie de Generador para Media Tensión</option>
                <option value="doble_juego_baterias">Doble Juego de Baterías</option>
                <option value="iluminacion_interior">Iluminación interior</option>
                <option value="iluminacion_exterior">Iluminación Exterior</option>
                <option value="relevador_proteccion">Relevador de Protección</option>
                <option value="amortiguadores_antisismicos">Amortiguadores Antisísmicos</option>
                <option value="amortiguadores_resorte">Amortiguadores de resorte</option>
                <option value="resistencia_calefactores">Resistencias Calefactoras de Generador</option>
                <option value="rtds_generador">RTDs de Generador</option>
                <option value="accesorio_comunicacion_ats">Accesorio de Comunicación para ATS ASCO</option>
                <option value="otro">Otro o varios (Especificar en Comentarios)</option>
            </select>
        </div>
    </div>

    <div class="row-1col">
        <div class="field-group">
            <label for="pttransnac_accesorios_comentarios">Comentarios Adicionales Accesorios:</label>
            <textarea id="pttransnac_accesorios_comentarios" class="form-control" rows="3" 
                    placeholder="Comentarios adicionales accesorios" disabled></textarea>
        </div>
    </div>

</div>

<!-- ============================================================================ -->
<!-- SECCIÓN DE ARCHIVOS - COPIAR ESTRUCTURA COMPLETA -->
<!-- ============================================================================ -->
<div class="file-upload-section">
    <h5 class="file-section-title">📎 Documentos Técnicos</h5>
    <p class="file-section-description">
        Adjunte documentos de soporte, especificaciones técnicas, diagramas unifilares y cualquier documentación que apoye la cotización.
        <strong>Formatos permitidos:</strong> PDF, DOC, DOCX, JPG, PNG, XLSX, XLS (máx. 2MB por archivo)
    </p>
    
    <div class="file-input-container">
        <input type="file"
            id="files_PTTransNac"
            name="files_PTTransNac[]"
            multiple
            accept=".pdf,.doc,.docx,.jpg,.jpeg,.png,.xlsx,.xls"
            class="file-input"
            style="display: none;"> <!-- Step: id="files_[FILE_TYPE]" name="files_[FILE_TYPE][]" -->
        <button type="button" class="file-input-label" onclick="FormPTTransNac.openFileSelector()"> <!-- Step: onclick="[MODULE_NAME].openFileSelector()" -->
            <i class="fas fa-cloud-upload-alt"></i>
            <span>Seleccionar Archivos</span>
        </button>
    </div>
    
    <div id="preview_PTTransNac" class="file-preview-container" style="display: none;"> <!-- Step: id="preview_[FILE_TYPE]" -->
        <div class="preview-header">
            <h6 class="preview-title">Archivos Seleccionados:</h6>
            <div class="file-counter">
                <span id="file-count-PTTransNac">0</span> archivo(s) | <!-- Step: id="file-count-[FILE_TYPE]" -->
                <span id="file-size-PTTransNac">0</span> KB total <!-- Step: id="file-size-[FILE_TYPE]" -->
            </div>
        </div>
        <div class="file-preview-list"></div>
        <div class="preview-actions">
            <button type="button" class="btn-add-more" onclick="FormPTTransNac.openFileSelector()"> <!-- Step: onclick="[MODULE_NAME].openFileSelector()" -->
                <i class="fas fa-plus"></i> Agregar Más
            </button>
            <button type="button" class="btn-remove-all" onclick="FormPTTransNac.clearAllFiles()"> <!-- Step: onclick="[MODULE_NAME].clearAllFiles()" -->
                <i class="fas fa-trash"></i> Quitar Todos
            </button>
        </div>
    </div>
</div>

<!-- ============================================================================ -->
<!-- JAVASCRIPT - COPIADO DE PLANTILLA (Solo CONFIG modificado) -->
<!-- ============================================================================ -->

<script>
window.FormPTTransNac = (function() { // Step window.[MODULE_NAME]
    'use strict';
    
    // CONFIGURACIÓN - ÚNICA SECCIÓN MODIFICADA
    const CONFIG = { // Step
        MODULE_NAME: 'FormPTTransNac',
        FILE_TYPE: 'PTTransNac',
        DISPLAY_NAME: 'Plantas, Tableros y Transformadores Nacionales'
    };
    
    // Variables para gestión de archivos - NO MODIFICAR
    let selectedFiles = new Map();
    let fileCounter = 0;
    const MAX_FILE_SIZE = 2 * 1024 * 1024; // 2MB
    const ALLOWED_EXTENSIONS = ['.pdf', '.doc', '.docx', '.jpg', '.jpeg', '.png', '.xlsx', '.xls'];
    
    // Elementos DOM cacheados
    let elements = {};
    
    // Inicialización
    function init() {
        console.log(`${CONFIG.MODULE_NAME}: Módulo inicializado con gestión de archivos`);
        cacheElements();
        setupFileSystem();
        updateUI();
        // ✅ AÑADIR ESTA LÍNEA
        if (window.ConditionalFieldsManager) {
            ConditionalFieldsManager.autoInit('.section-FormPTTransNac');
        }
    }
    
    function cacheElements() {
        elements = {
            fileInput: document.getElementById(`files_${CONFIG.FILE_TYPE}`),
            previewContainer: document.getElementById(`preview_${CONFIG.FILE_TYPE}`),
            previewList: document.querySelector(`#preview_${CONFIG.FILE_TYPE} .file-preview-list`),
            fileCounter: document.getElementById(`file-count-${CONFIG.FILE_TYPE}`),
            fileSizeCounter: document.getElementById(`file-size-${CONFIG.FILE_TYPE}`),
            btnSelectFiles: document.querySelector('.file-input-label'),
            btnAddMore: document.querySelector('.btn-add-more')
        };
    }
    
    // Configurar sistema de archivos
    function setupFileSystem() {
        if (!elements.fileInput) {
            console.warn(`${CONFIG.MODULE_NAME}: Input de archivos no encontrado`);
            return;
        }
        elements.fileInput.addEventListener('change', handleFileSelection);
    }
    
    // Abrir selector de archivos
    function openFileSelector() {
        if (elements.fileInput) {
            console.log(`${CONFIG.MODULE_NAME}: Abriendo selector de archivos de forma controlada`);
            elements.fileInput.click();
        }
    }
    
    // Manejar selección de archivos
    function handleFileSelection(event) {
        const files = Array.from(event.target.files);
        console.log(`${CONFIG.MODULE_NAME}: Procesando ${files.length} archivo(s) seleccionado(s)`);
        
        if (files.length === 0) {
            console.log(`${CONFIG.MODULE_NAME}: No se seleccionaron archivos - manteniendo archivos existentes`);
            return;
        }
        
        const validFiles = [];
        const errors = [];
        
        files.forEach(file => {
            const validation = validateFile(file);
            if (validation.valid) {
                const isDuplicate = Array.from(selectedFiles.values()).some(existingFile => 
                    existingFile.file.name === file.name && 
                    existingFile.file.size === file.size
                );
                
                if (!isDuplicate) {
                    validFiles.push(file);
                } else {
                    errors.push(`${file.name}: Archivo ya seleccionado`);
                }
            } else {
                errors.push(`${file.name}: ${validation.error}`);
            }
        });
        
        if (errors.length > 0) {
            showFileErrors(errors);
        }
        
        if (validFiles.length > 0) {
            validFiles.forEach(file => {
                fileCounter++;
                selectedFiles.set(fileCounter, {
                    id: fileCounter,
                    file: file,
                    addedAt: new Date().toISOString()
                });
            });
            
            updateFilePreview();
            showSuccessMessage(`${validFiles.length} archivo(s) agregado(s)`);
            console.log(`${CONFIG.MODULE_NAME}: Total de archivos: ${selectedFiles.size}`);
        }
        
        event.target.value = '';
    }
    
    // Validar archivo individual
    function validateFile(file) {
        if (file.size > MAX_FILE_SIZE) {
            return {
                valid: false,
                error: `Archivo muy grande (${(file.size / 1024 / 1024).toFixed(1)}MB). Máximo 2MB.`
            };
        }
        
        const extension = '.' + file.name.split('.').pop().toLowerCase();
        if (!ALLOWED_EXTENSIONS.includes(extension)) {
            return {
                valid: false,
                error: `Tipo de archivo no permitido (${extension})`
            };
        }
        
        return { valid: true };
    }
    
    // Actualizar vista previa
    function updateFilePreview() {
        if (selectedFiles.size === 0) {
            elements.previewContainer.style.display = 'none';
            updateUI();
            return;
        }
        
        elements.previewContainer.style.display = 'block';
        elements.previewList.innerHTML = '';
        
        let totalSize = 0;
        Array.from(selectedFiles.values()).forEach(fileData => {
            totalSize += fileData.file.size;
            const fileItem = createFilePreviewItem(fileData.file, fileData.id);
            elements.previewList.appendChild(fileItem);
        });
        
        if (elements.fileCounter) elements.fileCounter.textContent = selectedFiles.size;
        if (elements.fileSizeCounter) elements.fileSizeCounter.textContent = (totalSize / 1024).toFixed(1);
        
        updateUI();
    }
    
    // Actualizar UI
    function updateUI() {
        const hasFiles = selectedFiles.size > 0;
        if (elements.btnSelectFiles) {
            elements.btnSelectFiles.style.display = hasFiles ? 'none' : 'inline-flex';
        }
    }
    
    // Crear elemento de vista previa
    function createFilePreviewItem(file, fileId) {
        const item = document.createElement('div');
        item.className = 'file-preview-item';
        item.setAttribute('data-file-id', fileId);
        
        const fileSize = (file.size / 1024).toFixed(1);
        const fileIcon = getFileIcon(file.name);
        
        item.innerHTML = `
            <div class="file-info">
                <i class="${fileIcon}"></i>
                <div class="file-details">
                    <span class="file-name" title="${file.name}">${file.name}</span>
                    <span class="file-size">${fileSize} KB</span>
                </div>
            </div>
            <button type="button" class="btn-remove-file" onclick="${CONFIG.MODULE_NAME}.removeFile(${fileId})" title="Quitar archivo">
                <i class="fas fa-times"></i>
            </button>
        `;
        
        return item;
    }
    
    // Obtener icono por tipo de archivo
    function getFileIcon(filename) {
        const extension = filename.split('.').pop().toLowerCase();
        
        const iconMap = {
            'pdf': 'fas fa-file-pdf text-danger',
            'doc': 'fas fa-file-word text-primary',
            'docx': 'fas fa-file-word text-primary',
            'xlsx': 'fas fa-file-excel text-success',
            'xls': 'fas fa-file-excel text-success',
            'jpg': 'fas fa-file-image text-warning',
            'jpeg': 'fas fa-file-image text-warning',
            'png': 'fas fa-file-image text-warning'
        };
        
        return iconMap[extension] || 'fas fa-file text-secondary';
    }
    
    // Remover archivo específico
    function removeFile(fileId) {
        if (selectedFiles.has(fileId)) {
            const fileData = selectedFiles.get(fileId);
            selectedFiles.delete(fileId);
            updateFilePreview();
            showSuccessMessage(`Archivo "${fileData.file.name}" removido`);
            console.log(`${CONFIG.MODULE_NAME}: Archivo removido. Total: ${selectedFiles.size}`);
        }
    }
    
    // Limpiar todos los archivos
    function clearAllFiles() {
        const fileCount = selectedFiles.size;
        selectedFiles.clear();
        fileCounter = 0;
        updateFilePreview();
        showSuccessMessage(`${fileCount} archivo(s) removido(s)`);
        console.log(`${CONFIG.MODULE_NAME}: Todos los archivos removidos`);
    }
    
    // Obtener archivos como array
    function getFiles() {
        const filesArray = Array.from(selectedFiles.values()).map(fileData => fileData.file);
        console.log(`${CONFIG.MODULE_NAME}: Retornando ${filesArray.length} archivo(s)`);
        return filesArray;
    }
    
    // Obtener estadísticas
    function getFileStats() {
        const files = Array.from(selectedFiles.values());
        const totalSize = files.reduce((sum, fileData) => sum + fileData.file.size, 0);
        
        return {
            count: selectedFiles.size,
            totalSize: totalSize,
            totalSizeMB: (totalSize / 1024 / 1024).toFixed(2),
            files: files.map(fileData => ({
                name: fileData.file.name,
                size: fileData.file.size,
                type: fileData.file.type,
                addedAt: fileData.addedAt
            }))
        };
    }
    
    // Mostrar mensajes
    function showSuccessMessage(message) {
        if (window.mostrarNotificacionToast) {
            window.mostrarNotificacionToast(message, 'success');
        } else {
            console.log(`${CONFIG.MODULE_NAME}:`, message);
        }
    }
    
    function showFileErrors(errors) {
        const errorMessage = `Algunos archivos no pudieron agregarse:\n${errors.join('\n')}`;
        
        if (window.mostrarAlerta) {
            window.mostrarAlerta(errorMessage, 'warning');
        } else {
            alert(errorMessage);
        }
    }
    
    // Callback cuando el formulario se vuelve visible (REQUERIDO POR EL PADRE)
    function onBecomeVisible() {
        console.log(`${CONFIG.MODULE_NAME}: Formulario visible, inicializando...`);
        init();
    }
    
    // API PÚBLICA - REQUERIDA POR EL SISTEMA PADRE
    return {
        init: init,
        openFileSelector: openFileSelector,
        removeFile: removeFile,
        clearAllFiles: clearAllFiles,
        getFiles: getFiles,
        getFileStats: getFileStats,
        onBecomeVisible: onBecomeVisible
    };
    
})();

// Auto-inicializar si el formulario ya está visible
document.addEventListener('DOMContentLoaded', function() {
    const formSection = document.querySelector('.section-FormPTTransNac'); // Step: clase .section-[MODULE_NAME]
    if (formSection && formSection.style.display !== 'none') {
        FormPTTransNac.init(); // Step [MODULE_NAME].init()
    } 
}); 
</script>

<!-- ============================================================================ -->
<!-- CSS - COPIADO COMPLETO DE PLANTILLA -->
<!-- ============================================================================ -->

<style>
.file-upload-section {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 20px;
    margin-top: 20px;
}

.file-section-title {
    color: #495057;
    margin-bottom: 8px;
    font-weight: 600;
}

.file-section-description {
    color: #6c757d;
    font-size: 0.9em;
    margin-bottom: 15px;
    line-height: 1.4;
}

.file-input-container {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
    flex-wrap: wrap;
}

.file-input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.file-input-label,
.btn-add-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s;
    font-weight: 500;
    text-decoration: none;
}

.file-input-label:hover,
.btn-add-more:hover {
    background: #0056b3;
}

.btn-add-more {
    background: #28a745;
}

.btn-add-more:hover {
    background: #218838;
}

.file-preview-container {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 15px;
    margin-top: 15px;
}

.preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e9ecef;
}

.preview-title {
    color: #495057;
    margin: 0;
    font-weight: 600;
}

.file-counter {
    color: #6c757d;
    font-size: 0.9em;
    font-weight: 500;
}

.file-preview-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    border: 1px solid #e9ecef;
    border-radius: 4px;
    margin-bottom: 8px;
    background: #f8f9fa;
    transition: background-color 0.2s;
}

.file-preview-item:hover {
    background: #e9ecef;
}

.file-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.file-details {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.file-name {
    font-weight: 500;
    color: #495057;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.file-size {
    font-size: 0.85em;
    color: #6c757d;
}

.btn-remove-file {
    background: #dc3545;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 8px 10px;
    cursor: pointer;
    transition: background-color 0.2s;
    font-size: 0.9em;
    flex-shrink: 0;
}

.btn-remove-file:hover {
    background: #c82333;
}

.preview-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-start;
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px solid #e9ecef;
}

.btn-remove-all {
    background: #dc3545;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 8px 16px;
    cursor: pointer;
    transition: background-color 0.2s;
    font-size: 0.9em;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-remove-all:hover {
    background: #c82333;
}

.file-info small {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
}

/* Responsive */
@media (max-width: 768px) {
    .file-input-container {
        flex-direction: column;
    }
    
    .preview-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
    
    .preview-actions {
        flex-direction: column;
    }
    
    .file-preview-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}
</style>