<!-- Ruta : src\templates\Ventas\VentasEUA\DataMaster\Tank.html
  Archivo: Tank.html
-->
{% extends "layout.html" %}
{% block title %}Catálogo de componentes adicionales de tanque   - Data Master{% endblock %}

{% block content %}
<!-- CSS principal de la página -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/DatamastersGral.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">

<link rel="stylesheet" href="{{ url_for('static', filename='css/DatamastersGral.css') }}">



<main class="page">
  <section class="clean-block clean-form dark">
    <div class="container">
      <div class="block-heading">
        <h2 class="text-info ">Tanque</h2>
        <p >Catálogo de componentes adicionales de tanque</p>
      </div>

      <!-- Indicador de carga -->
      <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>
      <!-- Controles (Regresar y Agregar) -->
      <div class="d-flex justify-content-between mb-3">
          <!-- Botón Regresar -->
          <button 
              type="button" 
              class="btn btn-secondary dm-btn-Secundario" 
              onclick="history.back();">
              <i class="fas fa-arrow-left"></i> 
              Regresar
          </button>         
      
          <!-- Contenedor para los botones Actualizar y Agregar -->
          <div>
              <!-- Botón Actualizar -->
              <button 
                  type="button" 
                  class="btn btn-success dm-btn-Guardar" onclick="actualizarfichastecnicas();">
                  Actualizar <i class="fas fa-sync-alt"></i>
              </button>
          </div>
      </div>
      
      <!-- Tabla principal -->
      <table  class="table table-striped dm-table " style="width:100%" id="TankTable">
        <thead>
          <tr>
            <th class="dm-table">ConfigID</th>
            <th class="dm-table">KWOutput</th>
            <th class="dm-table">Item Tank Autonomy</th>
            <th class="dm-table">Item Tank Type</th>
            <th class="dm-table">CapacityGAL</th>
            <th class="dm-table">Cost</th>
            <th class="dm-table">Evaluator</th>
            <th class="dm-table">TechnicalSheet</th>
            <th class="dm-table">Acciones</th>
          </tr>
          <tr class="dm-btn-text">
            <th class="dm-table"><input type="text" class="form-control  column-filter" data-column="0" placeholder="Buscar ConfigID"></th>
            <th class="dm-table"><input type="text" class="form-control  column-filter" data-column="1" placeholder="Buscar KWOutput"></th>
            <th class="dm-table"><input type="text" class="form-control  column-filter" data-column="2" placeholder="Buscar Item Tank Autonomy"></th>  
            <th class="dm-table"><input type="text" class="form-control  column-filter" data-column="2" placeholder="Buscar Item Tank Type"></th>  
            <th class="dm-table"><input type="text" class="form-control  column-filter" data-column="2" placeholder="Buscar CapacityGAL"></th>  
            <th class="dm-table"><input type="text" class="form-control  column-filter" data-column="2" placeholder="Buscar Cost"></th>  
            <th class="dm-table"><input type="text" class="form-control  column-filter" data-column="2" placeholder="Buscar Evaluator"></th>  
            <th class="dm-table"><input type="text" class="form-control  column-filter" data-column="2" placeholder="Buscar TechnicalSheet"></th>  
            <th></th>  
          </tr>
        </thead>

        <tbody id="TableBody">
        </tbody>
      </table>

      <!-- MODAL Editar  editarTank_OptionsCatalog igual que en javascript-->
      <div 
        class="modal fade dm-custom-modal" 
        id="editarTank_OptionsCatalog" 
        tabindex="-1"
        aria-labelledby="editarTankOptionsCatalogLabel" 
        aria-hidden="true">

        <div class="modal-dialog">
          <div class="modal-content">
            <!-- Encabezado del modal -->
            <div class="modal-header">
              <h1 class="modal-title fs-5" id="editarTankOptionsCatalogLabel">
                Editar Elementos
              </h1>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" onclick="cerrarModalEditar();"></button>
            </div>
            <!-- Cuerpo del modal -->
            <div class="dm-modal-body">
                <form id="formEditarTank" class="p-3">
                    <div class="row">
                        <!-- ConfigID -->
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label for="ConfigID" class="form-label">ConfigID</label>
                                <input type="text" class="form-control dm-input-style" id="ConfigID" disabled>
                            </div>
                        </div>
                        
                        <!-- KWOutput -->
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label for="KWOutput" class="form-label">KW Output</label>
                                <input type="number" class="form-control dm-input-style" id="KWOutput" step="0.01">
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <!-- Item Tank Autonomy -->
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label for="Item_Tank_Autonomy" class="form-label">Item Tank Autonomy</label>
                                <input type="text" class="form-control dm-input-style" id="Item_Tank_Autonomy">
                            </div>
                        </div>
                        
                        <!-- Item Tank Type -->
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label for="Item_Tank_Type" class="form-label">Item Tank Type</label>
                                <input type="text" class="form-control dm-input-style" id="Item_Tank_Type">
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <!-- CapacityGAL -->
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label for="CapacityGAL" class="form-label">Capacity (GAL)</label>
                                <input type="number" class="form-control dm-input-style" id="CapacityGAL" step="0.01">
                            </div>
                        </div>
                        
                        <!-- Cost -->
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label for="Cost" class="form-label">Costo</label>
                                <div class="input-group">
                                    <span class="input-group-text">$</span>
                                    <input type="number" class="form-control dm-input-style" id="Cost" step="0.01">
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Evaluator -->
                    <div class="form-group mb-3">
                        <label for="Evaluator" class="form-label">Evaluator</label>
                        <input type="text" class="form-control dm-input-style" id="Evaluator">
                    </div>
                    
                    <!-- TechnicalSheet -->
                    <div class="form-group mb-3">
                        <label for="TechnicalSheet" class="form-label">Ficha Técnica</label>
                        <input type="text" class="form-control dm-input-style" id="TechnicalSheet" disabled>
                        <small class="text-muted">La ficha técnica se actualiza automáticamente</small>
                    </div>
                </form>
            </div>
            <!-- Footer del modal -->
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary dm-btn-Secundario" data-bs-dismiss="modal" onclick="cerrarModalEditar();">
                Cerrar <i class="fas fa-times"></i>
              </button>
              <button type="submit" class="btn btn-success dm-btn-Guardar" form="formEditarTankOptions">
                Actualizar <i class="fas fa-sync-alt"></i>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</main>

<!-- Scripts de jQuery y DataTables -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.flash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.print.min.js"></script>

<!-- Script principal de la página -->
<script src="{{ url_for('static', filename='js/Ventas/VentasEUA/DataMaster/Tank.js') }}"></script>
{% endblock %}
