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



{% extends "layout.html" %}

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

{% block content %}
<!-- Conexion de CSS Casetas -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/Operaciones/Ingenieria/PE/PE_DM/Casetas.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">{{ _(' Casetas ') }}</h2>
                <p>{{ _(' Bienvenido a casetas 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 MODELO -->
                            <div class="form-row">
                                <!-- CAMPO No. DE 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 DESCRIPCION DEL PRODUCTO -->
                            <div class="form-row">                                                             
                                <!--  CAMPO DESCRIPCION DEL PRODUCTO -->
                                <div class="form-group">
                                    <label for="" class="required">{{ _(' Descripcion del producto ') }}</label>
                                    <textarea class="form-control" id=""></textarea>
                                </div>
                            </div>
                            
                            <!-- Sección: 3 CERTIFICACION -->
                            <div class="form-row">                                                             
                                <!-- CAMPO DESCRIPCION -->
                                <div class="form-group">
                                    <div class="section-interruptores"> 
                                        <h4 class="section-subtitle">{{ _(' Certificación ') }}</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>

                                <!-- CAMPO TIPO DE BASES -->
                                <div class="form-group">
                                    <div class="section-interruptores"> 
                                        <h4 class="section-subtitle">{{ _(' Material ') }}</h4>
                                        <div class="form-check-sec " style="display: flex; align-items: center; gap: 10px;"> 
                                            <!-- CAMPO REVISION -->
                                            <label for="" class="required" style="margin-bottom: 0;">{{ _(' Seleccionar ') }}</label>
                                            <select id="" name="" class="form-select" style="flex: 1;">
                                                <option selected disabled value="">{{ _(' Seleccione una opción ') }}</option>
                                                <option value="1">{{ _(' Acero ') }}</option>
                                                <option value="2">{{ _(' Aluminio ') }}</option>
                                                <option value="3">{{ _(' Acero inoxidable ') }}</option>
                                            </select>
                                        </div>   
                                    </div>
                                </div>
                            </div>

                            <!-- Sección: 4 UL -->
                            <div class="section-interruptores">
                                <h4 class="section-subtitle">{{ _(' UL ') }}</h4>
                                <div class="form-row">
                                    <!-- CAMPO PROTECCION -->
                                    <div class="form-group">
                                        <label for="radiatoroptions" class="required">{{ _(' Protección ') }}</label>
                                        <select id="radiatoroptions" name="radiatoroptions" class="form-select">
                                            <option selected disabled value="">{{ _(' Seleccione una opcion ') }}</option>
                                            <option value="1">{{ _(' Contra ruido ') }}</option>
                                            <option value="2">{{ _(' Contra incendio ') }}</option>
                                        </select>
                                    </div>

                                    <!-- CAMPO NIVEL -->
                                    <div class="form-group">
                                        <label for="eniginedbrandid" class="required">{{ _(' Nivel ') }}</label>
                                        <select id="eniginedbrandid" name="eniginedbrandid" class="form-select">
                                            <option selected disabled value="">{{ _(' Seleccione una opcion ') }}</option>
                                            <option value="1">{{ _(' 1 ') }}</option>
                                            <option value="2">{{ _(' 2 ') }}</option>
                                            <option value="3">{{ _(' 3 ') }}</option>
                                        </select>
                                    </div>
                                </div>                              
                            </div>
                            
                            <!-- Sección: 6 CASETA -->
                            <div class="section-interruptores">
                                <h4 class="section-subtitle">{{ _(' Bases compatibles con esta caseta ') }}</h4>  
                                <div class="form-row" style="margin-top: 20px;">  
                                    <!-- CAMPO DATATABLE -->
                                    <div class="form-group">                                    
                                        <div id="loading-indicator" style="display: none; text-align: center; margin-top: 10px;">
                                            <span class="spinner-border text-primary" role="status" aria-hidden="true"></span>
                                            <span>{{ _('Cargando...') }}</span>
                                        </div>
                                                
                                        <table id="CasetaTable" class="table table-striped">
                                            <thead>
                                                <tr>
                                                    <th>{{ _('No. de parte') }}</th>
                                                    <th>{{ _('Descripción') }}</th>
                                                    <th>{{ _('Eliminar') }}</th>
                                                </tr>
                                                <tr>
                                                    <th><input type="text" placeholder="{{ _('Buscar No. de parte') }}"></th>
                                                    <th><input type="text" placeholder="{{ _('Buscar Descripcion') }}"></th> 
                                                    <th></th> 
                                                </tr>
                                            </thead>
                                            <tbody id="Casetabody">
                                                <!-- Los datos se cargarán dinámicamente con JavaScript -->
                                            </tbody>
                                        </table>                                        

                                        <!-- Botón de Agregar -->
                                        <div class="form-actions" style="margin-top: 20px; text-align: left;">
                                            <button type="submit" class="btn btn-primary">
                                                {{ _(' Agregar ') }}
                                            </button>
                                        </div>
                                    </div>                                          
                                </div>  
                            </div>                            
                        
                            <!-- BOTON DE AGREGAR COSTO-->
                            <div class="form-actions" style="margin-top: 20px; text-align: center;">
                                <button type="submit" class="btn btn-primary">
                                    {{ _(' Calcular costo ') }}
                                </button>
                            </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 Casetas -->
<script src="{{ url_for('static', filename='js/Operaciones/Ingenieria/PE/PE_DM/Casetas.js') }}"></script>
{% endblock %}





