{% extends "layout.html" %}
{% block title %}Catálogo de componentes adicionales de Casetas - Data Master{% endblock %}

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

<!-- DataTables CSS -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.3.6/css/buttons.dataTables.min.css">

<!-- FontAwesome -->
<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>Catálogo de componentes adicionales de Casetas.</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 -->
      <div class="d-flex justify-content-between mb-3">
        <button type="button" class="btn btn-secondary dm-btn-Secundario" onclick="history.back();">
          <i class="fas fa-arrow-left"></i> Regresar
        </button>
        <button type="button" class="btn btn-success dm-btn-Guardar" onclick="actualizarfichastecnicas();">
          Actualizar <i class="fas fa-sync-alt"></i>
        </button>
      </div>
      
      <!-- Tabla principal con todas las columnas -->
      <div class="table-responsive">
        <table class="table table-striped dm-table" style="width:100%" id="EnclosureTable">
          <thead>
            <tr>
              <th>ConfigID</th>
              <th>CertificationID</th>
              <th>Fueltype</th>
              <th>Item_Enclosure_type</th>
              <th>Item_Enclosure_Mat</th>
              <th>KWOutput</th>
              <th>Costo</th>
              <th>Evaluator</th>
              <th>TechnicalSheet</th>
              <th>Acciones</th>
            </tr>
            <tr class="dm-btn-text">
              <th><input type="text" class="form-control column-filter" data-column="0" placeholder="Buscar ConfigID"></th>
              <th><input type="text" class="form-control column-filter" data-column="1" placeholder="Buscar CertificationID"></th>
              <th><input type="text" class="form-control column-filter" data-column="2" placeholder="Buscar Fueltype"></th>
              <th><input type="text" class="form-control column-filter" data-column="3" placeholder="Buscar Item_Enclosure_type"></th>
              <th><input type="text" class="form-control column-filter" data-column="4" placeholder="Buscar Item_Enclosure_Mat"></th>
              <th><input type="text" class="form-control column-filter" data-column="5" placeholder="Buscar KWOutput"></th>
              <th><input type="text" class="form-control column-filter" data-column="6" placeholder="Buscar Cost"></th>
              <th><input type="text" class="form-control column-filter" data-column="7" placeholder="Buscar Evaluator"></th>
              <th></th>
              <th></th>
            </tr>
          </thead>
          <tbody id="TableBody"></tbody>
        </table>
      </div>

      <!-- Modal para editar -->
      <div class="modal fade dm-custom-modal" id="editarEnclosureCatalog" tabindex="-1"
           aria-labelledby="editarEnclosureCatalogLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
          <div class="modal-content">
            <div class="modal-header">
              <h1 class="modal-title fs-5" id="editarEnclosureCatalogLabel">Editar Componente de Casetas</h1>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" onclick="cerrarModalEditar();"></button>
            </div>
            
            <div class="modal-body">
              <form id="formEditarEnclosure" class="row g-3 p-3">
                  <div class="row g-3">
                    <!-- Primera fila -->
                    <div class="col-md-6">
                      <div class="form-group">
                        <label for="ConfigID" class="form-label">ConfigID</label>
                        <input type="text" class="form-control dm-input-style" id="ConfigID" disabled>
                      </div>
                    </div>
                    
                    <div class="col-md-6">
                      <div class="form-group">
                        <label for="CertificationID" class="form-label">CertificationID*</label>
                        <input type="text" class="form-control dm-input-style" id="CertificationID" disabled>
                      </div>
                    </div>
                    
                    <!-- Segunda fila -->
                    <div class="col-md-6">
                      <div class="form-group">
                        <label for="Fueltype" class="form-label">Fueltype*</label>
                        <input type="text" class="form-control dm-input-style" id="Fueltype" disabled>
                      </div>
                    </div>
                    
                    <div class="col-md-6">
                      <div class="form-group">
                        <label for="Item_Enclosure_type" class="form-label">Enclosuretype*</label>
                        <input type="text" class="form-control dm-input-style" id="Item_Enclosure_type" disabled>
                      </div>
                    </div>
                    
                    <!-- Tercera fila -->
                    <div class="col-md-6">
                      <div class="form-group">
                        <label for="Item_Enclosure_Mat" class="form-label">EnclosureMat*</label>
                        <input type="text" class="form-control dm-input-style" id="Item_Enclosure_Mat" disabled>
                      </div>
                    </div>
                    
                    <div class="col-md-6">
                      <div class="form-group">
                        <label for="KWOutput" class="form-label">KWOutput*</label>
                        <input type="text" class="form-control dm-input-style" id="KWOutput" disabled>
                      </div>
                    </div>
                    
                    <!-- Cuarta fila -->
                    <div class="col-md-6">
                      <div class="form-group">
                        <label for="Cost" class="form-label">Cost*</label>
                        <input type="number" class="form-control dm-input-style" step="0.01" id="Cost" required>
                      </div>
                    </div>
                    
                    <div class="col-md-6">
                      <div class="form-group">
                        <label for="Evaluator" class="form-label">Evaluator*</label>
                        <input type="text" class="form-control dm-input-style" id="Evaluator" disabled>
                      </div>
                    </div>
                  </div>
              </form>
          </div>
            
            <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="formEditarEnclosure">
                Actualizar <i class="fas fa-sync-alt"></i>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</main>

<!-- Scripts requeridos -->
<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.html5.min.js"></script>

<!-- Script específico para Casetas -->
<script src="{{ url_for('static', filename='js/Ventas/VentasEUA/DataMaster/Enclosure.js') }}"></script>

{% endblock %}