{% extends "layout.html" %}
{% block title %}Gestión de Catálogo de opciones del control  - 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 opciones del control</h2>
        <p >Administre las Opciones de Catálogo de opciones del control registradas 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>
          </div>
      </div>
      
      <!-- Tabla principal -->
      <table  class="table table-striped dm-table " style="width:100%" id="ControllerOptionsTable">
        <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">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></th> 
            <th></th>  
          </tr>
        </thead>
        <tbody id="TableBody">
        </tbody>
      </table>

     <!-- Modal Editar  editarController_OptionsCatalog igual que en javascript-->
<div 
class="modal fade dm-custom-modal" 
id="editarController_OptionsCatalog" 
tabindex="-1"
aria-labelledby="editarControllerOptionsCatalogLabel" 
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="editarControllerOptionsCatalogLabel">
        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="formEditarControllerOptions" class="p-3">
        <div class="row">
          <div class="col-md-4">
            <div class="form-group">
              <label for="Item" 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" disabled ></textarea>
        </div>

        <div class="row">
          <div class="col-md-5">
            <div class="form-group">
              <label for="Price" class="form-label">Price</label>
              <input type="number" class="form-control dm-input-style" step="0.01" id="PriceEdit"/>
            </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="formEditarControllerOptions">
        Actualizar <i class="fas fa-sync-alt"></i>
      </button>
    </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/DMControllerOptions.js') }}"></script>
{% endblock %}