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



{% extends "layout.html" %}

{% block title %}{{ _('Caja de interruptor') }}{% endblock %}

{% block content %}
<!-- Conexion de CSS Switch_Box -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/Operaciones/Ingenieria/PE/PE_DM/Switch_Box.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">{{ _(' Caja de Interruptor ') }}</h2>
                <p>{{ _(' Bienvenido a caja de interruptor 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 INICIALES -->
                            <div class="form-row">   
                                <!-- CAMPO No. PARTE -->
                                <div class="form-group">
                                    <label for="part-number" class="required">{{ _(' No. parte ') }}</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>

                                <!-- CAMPO REVISION -->
                                <div class="form-group">
                                    <label for="" class="required">{{ _(' Revisión ') }}</label>
                                    <select id="" name="" class="form-select">
                                        <option selected disabled value="">{{ _(' Seleccione una opcion ') }}</option>
                                        <option value="1">{{ _('  ') }}</option>
                                    </select>
                                </div>
                            </div>
                            
                        
                            <!-- Sección: 2 -->
                            <div class="form-row">                                                             
                                <!-- CAMPO DESCRIPCION -->
                                <div class="form-group">
                                    <label for="" class="required">{{ _(' Descripción ') }}</label>
                                    <textarea class="form-control" id="" rows="8"></textarea>
                                </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>


                            <!-- Sección: 3 ARREGLO DE INGENIERIA PLANOS -->
                            <div class="form-row">
                                <div class="form-group">
                                    <div class="section-interruptores"> 
                                        <h4 class="section-subtitle">{{ _(' Arreglo de ingenieria (Planos) Opcional * ') }}</h4>
                                        <div class="form-row">                                                
                                            <!-- CAMPO FICHA TECNICA -->
                                            <div class="form-group">
                                                <label for="technicalsheet" class="">{{ _(' Arreglo ') }}</label>
                                                <div class="input-group">
                                                    <input type="file" 
                                                        class="form-control" 
                                                        id="technicalsheet" 
                                                        name="technicalsheet"
                                                        aria-describedby="inputGroupFileAddon">
                                                </div>
                                                <small class="form-text text-muted">{{ _('Seleccione Plano') }}</small>
                                            </div>
                                        </div>
                                                                                          
                                        <!-- CAMPO FAMILIA DE PLANOS -->
                                        <div class="form-row">  
                                            <div class="form-group">
                                                <label for="" class="">{{ _(' Familia de planos ') }}</label>
                                                <select id="" name="" class="form-select">
                                                    <option selected disabled value="">{{ _(' Seleccione una opcion ') }}</option>
                                                    <option value="1">{{ _(' Arreglo general ') }}</option>
                                                    <option value="2">{{ _(' Corte y soldado ') }}</option>
                                                    <option value="3">{{ _(' Doblez ') }}</option>
                                                </select>
                                            </div>                                               
                                                                                                                                  
                                            <!-- CAMPO -->  
                                            <div class="form-group">
                                            </div>
                                        </div>
                                            
                                                
                                        <!-- CAMPO BOTON AGREGAR -->
                                        <div class="form-actions" style="margin-top: 20px; text-align: center;">
                                            <button type="submit" class="btn btn-primary">
                                                {{ _(' Agregar ') }}
                                            </button>
                                        </div>


                                        <!-- CAMPO DATATABLE -->
                                        <div class="form-group">
                                            <div class="section-interruptores">  
                                                <div class="form-group">                                    
                                                    <div id="loading-indicator" style="display: none; text-align: center;">
                                                        <span class="spinner-border text-primary" role="status" aria-hidden="true"></span>
                                                        <span>{{ _('Cargando...') }}</span>
                                                    </div>
                                                    <table id="PlanosTable" class="table table-striped">
                                                        <thead>
                                                            <tr>
                                                                <th>{{ _('Nombre') }}</th>
                                                                <th>{{ _('Familia') }}</th>
                                                                <th>{{ _('Acciones') }}</th>
                                                            </tr>
                                                            <tr>
                                                                <th><input type="text" placeholder="{{ _('Buscar Nombre') }}"></th>
                                                                <th><input type="text" placeholder="{{ _('Buscar Familia') }}"></th> 
                                                                <th></th> 
                                                            </tr>
                                                        </thead>
                                                        <tbody id="Planosbody" style="margin-bottom: 10px;">
                                                            <!-- Los datos se cargarán dinámicamente con JavaScript -->
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                        
                                    </div>
                                </div>
                            </div>


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

                            <!-- Sección: 5 APARTADO DE COSTO -->
                            <div class="form-actions" style="margin-top: 20px; text-align: center;">
                                <label class="form-check-label check" for="certificationid">
                                    {{ _(' AQUI IRA EL COSTO ') }}
                                </label>
                            </div>

                            <!-- Sección: 6 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>

<!-- Después de cargar jQuery y DataTables -->
<script src="//cdn.rawgit.com/ashl1/datatables-rowsgroup/v1.0.0/dataTables.rowsGroup.js"></script>
<!-- Conexion de JS Switch_Box -->
<script src="{{ url_for('static', filename='js/Operaciones/Ingenieria/PE/PE_DM/Switch_Box.js') }}"></script>
{% endblock %}





