{% extends "layout.html" %}
{% block title %}
Gestión de Catálogo de tipos de protección de interruptores  - Data Master
{% endblock %}

{% block content %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/DatamastersGral.css') }}">
<!-- css/Ventas/VentasEUA/datamaster/DMBreakers.css -->

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/2.4.2/css/buttons.dataTables.min.css" />

<main class="page">
  <section class="clean-block clean-form dark">
    <div class="container">
      <div class="block-heading">
        <h2 class="text-info ">Catálogo de tipos de protección de interruptores </h2>
        <p>Administre los tipos de protección de interruptores registrados en el sistema.</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>
      
              <!-- Botón Agregar (abre modal) -->
              <button 
                  type="button" 
                  class="btn btn-success dm-btn-Guardar" 
                  data-bs-toggle="modal" 
                  data-bs-target="#agregarBreakerProtectionTypeCatalog">
                  Agregar <i class="fas fa-plus"></i>
              </button>
          </div>
      </div>
      
      <!-- Tabla principal -->
      <table class="table table-striped dm-table" style="width:100%" id="BreakerProtectionTypeTable">
        <thead>
          <tr>
            <th class="dm-table">Item</th>
            <th class="dm-table">Descripción</th>
            <th class="dm-table">Precio</th>
            <th class="dm-table">Tipo</th>
            <th class="dm-table">Ficha Tecnica</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 Item"></th>
            <th class="dm-table"><input type="text" class="form-control column-filter" data-column="1" placeholder="Buscar Descripción"></th>
            <th class="dm-table"><input type="text" class="form-control column-filter" data-column="2" placeholder="Buscar Precio"></th>
            <th class="dm-table"><input type="text" class="form-control column-filter" data-column="3" placeholder="Buscar Tipo"></th>
            <th></th> 
            <th></th>  
          </tr>
        </thead>
        <tbody id="TableBody">
        </tbody>
      </table>

      <!-- Modal Editar -->
      <div 
        class="modal fade dm-custom-modal" 
        id="editarBreakerProtectionTypeCatalog" 
        tabindex="-1"
        aria-labelledby="editarBreakerProtectionTypeCatalogLabel" 
        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="editarBreakerProtectionTypeCatalogLabel">
                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="formEditarBreakerProtectionType" class="p-3">
                <div class="row">
                  <div class="col-md-4">
                    <div class="form-group">
                      <label for="ItemEdit" class="form-label">Item</label>
                      <input type="text" class="form-control dm-input-style" id="ItemEdit" disabled />
                    </div>
                  </div>
                </div>

                <div class="form-group">
                  <label for="DescriptionEdit" class="form-label">Description</label>
                  <textarea class="form-control dm-input-style" id="DescriptionEdit"></textarea>
                </div>

                <div class="row">
                  <div class="col-md-5">
                    <div class="form-group">
                      <label for="PriceEdit" class="form-label">Price</label>
                      <input type="number" class="form-control dm-input-style" step="0.01" id="PriceEdit"/>
                    </div>
                  </div>
                  <div class="col-md-7">
                    <div class="form-group">
                      <label for="TipoEdit" class="form-label">Tipo</label>
                      <select class="form-select dm-input-style" id="TipoEdit">
                        <option value="">Elige una opción</option>
                        <option value="THERMOMAGNETIC">THERMOMAGNETIC</option>
                        <option value="ELECTROMAGNETIC">ELECTROMAGNETIC</option>
                      </select>
                      <br>
                    </div>
                  </div>
                </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="formEditarBreakerProtectionType">
                Actualizar <i class="fas fa-sync-alt"></i>
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- Modal Agregar -->
      <div 
        class="modal fade dm-custom-modal" 
        id="agregarBreakerProtectionTypeCatalog" 
        tabindex="-1" 
        aria-labelledby="agregarBreakerProtectionTypeCatalogLabel"
        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="agregarBreakerProtectionTypeCatalogLabel">
                Agregar Elementos
              </h1>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" onclick="limpiaritems();"></button>
            </div>
            <!-- Cuerpo del modal -->
           
            <div class="dm-modal-body">
              <form id="formAgregarBreakerProtectionType" class="p-3" enctype="multipart/form-data">
                <div>
                  <label for="Item" class="form-label">Item</label>
                  <input type="text" class="form-control dm-input-style" id="Item" required/>
                </div>
                <div>
                  <label for="Description" class="form-label">
                    Descripción
                  </label>
                  <textarea class="form-control dm-input-style" id="Description" required></textarea>
                </div>
                <div class="row">
                  <div class="col-md-5 mb-1">
                    <label for="Price" class="form-label">Precio</label>
                    <input type="number" class="form-control dm-input-style" step="0.01" id="Price" required />
                  </div>

                  <div class="col-md-7 mb-1">
                    <label for="Tipo" class="form-label">Tipo</label>
                    <select id="Tipo" class="form-select dm-input-style" aria-label="Default select example" required>
                      <option value="">Elige una opción</option>
                      <option value="THERMOMAGNETIC">THERMOMAGNETIC</option>
                      <option value="ELECTROMAGNETIC">ELECTROMAGNETIC</option>
                    </select>
                  </div>
                </div>

                <div class="row">
                  <div class="col-md-12 mb-1">
                    <label for="TechnicalSheet" class="form-label">Ficha Tecnica</label>
                    <input type="file" class="form-control dm-input-style" id="TechnicalSheet" accept=".pdf" />
                  </div>
                </div>
            </div>
            <!-- Footer del modal -->
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary dm-btn-Secundario" data-bs-dismiss="modal" onclick="limpiaritems();">
                Cerrar <i class="fas fa-times"></i>
              </button>
              <button type="submit" class="btn btn-success dm-btn-Guardar">
                Guardar <i class="fas fa-save"></i>
              </button>
            </form>
            </div>
          </div>
        </div>
      </div>

    </div> <!-- Fin container -->
  </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/DMBreakerProtectionType.js') }}"></script>
{% endblock %}