<!-- Archivo: Switches.html -->
<!-- Ruta: src\templates\Operaciones\Ingenieria\PE\PE_DM\Switches.html -->
<!-- Lenguaje: HTML -->



{% extends "layout.html" %}

{% block title %}{{ _('Interruptores') }}{% endblock %}

{% block content %}
<!-- Conexion de CSS Switches -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/Operaciones/Ingenieria/PE/PE_DM/Switches.css') }}">

<!-- DataTables CSS (Última versión estable) -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">

<!-- Botones de DataTables (Última versión estable) -->
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.3.6/css/buttons.dataTables.min.css">

<!-- FontAwesome (para iconos) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">



<main class="page">
    <section class="clean-block clean-form dark">
        <div class="container">
            <div class="block-heading">
                <h2 class="text-info">{{ _(' Interruptores ') }}</h2>
                <p>{{ _(' Bienvenido a Interruptores de IGSA ') }}</p>
            </div>

            <!-- Contenedor principal del formulario -->
            <div class="multi-step-container">
                
                <!-- SECCIONES -->
                <form id="cotizadorForm" class="form-multipaso">
                    <!-- TEXTO PRINCIPAL FORMULARIO -->
                        <div class="form-step active">
                            <h3 class="form-step-title">{{ _(' DATOS GENERALES ') }}</h3>
                            
                            <!-- Sección: 1 DATOS -->
                            <div class="form-row">  
                                <div class="form-group">                                     
                                    <!-- CAMPO MARCA -->
                                    <label for="" class="required">{{ _(' Marca ') }}</label>
                                    <select id="" name="" class="form-select">
                                        <option selected disabled value="">{{ _(' Seleccione una opcion ') }}</option>
                                        <option value="1">{{ _('  ') }}</option>
                                    </select>

                                    <!-- CAMPO MODELO -->
                                    <label for="" class="required"  style="margin-top: 30px; margin-bottom: 5px;">{{ _(' Modelo ') }}</label>
                                    <input  type="text" 
                                            id="gensetmodel"
                                            name="gensetmodel"
                                            class="form-control"
                                            placeholder=""                                        
                                            required
                                    >
                                </div>

                                <!-- CAMPO CERTIFICACION -->
                                <div class="form-group">
                                    <div class="section-interruptores"> 
                                        <h4 class="section-subtitle">{{ _(' Certificacion ') }}</h4>
                                        <div class="form-check-sec"> 
                                            <!-- CAMPO UL -->
                                            <div class="form-check">
                                                <input class="form-check-input" type="radio" name="flexRadioDefault" id="certificationid">
                                                <label class="form-check-label check" for="certificationid">
                                                    {{ _(' UL ') }}
                                                </label>
                                            </div>

                                            <!-- CAMPO NO UL -->
                                            <div class="form-check">
                                                <input class="form-check-input" type="radio" name="flexRadioDefault" id="certificationid" checked>
                                                <label class="form-check-label check" for="certificationid">
                                                    {{ _(' NO UL ') }}
                                                </label>
                                            </div>
                                        </div>   
                                    </div>
                                </div>
                            </div>                            
                            

                            <!-- CAMPO DATOS -->             
                            <div class="form-row">                                   
                                <!-- CAMPO FAMILIA -->
                                <div class="form-group">
                                    <label for="" class="required">{{ _(' Familia ') }}</label>
                                    <select id="" name="" class="form-select">
                                        <option selected disabled value="">{{ _(' Seleccione una opcion ') }}</option>
                                        <option value="1">{{ _('  ') }}</option>
                                    </select>
                                </div>

                                <!-- CAMPO CAPACIDAD -->
                                <div class="form-group">
                                    <label for="" class="required" style="margin-top: 20px;">{{ _(' Capacidad ') }}</label>
                                    <input  type="text" 
                                            id="gensetmodel"
                                            name="gensetmodel"
                                            class="form-control"
                                            placeholder=""                                        
                                            required
                                    >
                                </div>

                                <!-- CAMPO CAJA DE INTERRUPTOR -->
                                <div class="form-group">
                                    <label for="part-number" class="required">{{ _(' Caja de Interruptor ') }}</label>
                                    <div class="d-flex">
                                        <select id="part-number" name="part-number" class="form-select me-2">
                                            <option selected disabled value="">{{ _(' Seleccione una opcion ') }}</option>
                                            <option value="1">{{ _('  ') }}</option>
                                        </select>
                                        <button class="btn btn-light" type="button" title="Buscar número de parte">
                                            <i class="fas fa-search"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>


                            <!-- CAMPO DATOS -->
                            <div class="form-row">       
                                <!-- CAMPO ITEM IGSA -->
                                 <div class="form-group">
                                    <label for="part-number" class="required">{{ _(' ITEM IGSA ') }}</label>
                                    <div class="d-flex">
                                        <select id="part-number" name="part-number" class="form-select me-2">
                                            <option selected disabled value="">{{ _(' Seleccione una opcion ') }}</option>
                                            <option value="1">{{ _('  ') }}</option>
                                        </select>
                                        <button class="btn btn-light" type="button" title="Buscar número de parte">
                                            <i class="fas fa-search"></i>
                                        </button>
                                    </div>
                                </div>                              

                        
                                <!-- BOTON DE CALCULAR COSTO -->
                                <div class="form-actions" style="margin-top: 20px; text-align: center;">
                                    <button type="submit" class="btn btn-primary">
                                        {{ _(' Calcular ') }}
                                    </button>
                                </div>
                            </div>

                            <!-- CAMPO DATOS -->
                            <div class="form-row"> 
                                <!-- CAMPO PRECIO -->
                                <div class="form-group">
                                    <label for="" class="required">{{ _(' Precio ') }}</label>
                                    <input  type="text" 
                                            id="gensetmodel"
                                            name="gensetmodel"
                                            class="form-control"
                                            placeholder=""                                        
                                            required
                                    >
                                </div>
                                
                                <!-- CAMPO -->
                                <div class="form-group">
                                </div>

                                <!-- CAMPO -->
                                <div class="form-group">
                                </div>
                            </div>
                            
                            <!-- BOTON DE GUARDAR -->
                            <div class="form-actions" style="margin-top: 20px; text-align: right;">
                                <button type="submit" class="btn btn-primary">
                                    {{ _(' Guardar ') }}
                                </button>
                            </div>
                        </div>
                </form>
            </div>
        </div>       
    </section>
</main>


<!-- jQuery (Debe ir antes de cualquier otro script de DataTables) -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- DataTables -->
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>

<!-- Botones de DataTables (Última versión estable) -->
<!-- <script src="https://cdn.datatables.net/buttons/2.3.6/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.print.min.js"></script> -->

<!-- Dependencias para exportar a Excel/PDF -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>


<!-- Conexion de JS Switches -->
<script src="{{ url_for('static', filename='js/Operaciones/Ingenieria/PE/PE_DM/Switches.js') }}"></script>
{% endblock %}





