
<!--
  DMPrjWarWarranty.html
  Ruta: src\templates\Ventas\VentasEUA\DataMaster\DMPrjWarWarranty.html
 -->
{% extends "layout.html" %}
{% block title %}
Catálogo de garantías - 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 garantías  </h2>
        <p>Administre el Catálogo de garantías 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 Agregar (abre modal) -->
              <button 
                  type="button" 
                  class="btn btn-success dm-btn-Guardar" 
                  data-bs-toggle="modal" 
                  data-bs-target="#agregarCatalogo_de_garantiasCatalog">
                  Agregar <i class="fas fa-plus"></i>
              </button>
          </div>
      </div>
      
      <!-- Tabla principal -->
      <table class="table table-striped dm-table" style="width:100%" id="Catalogo_de_garantiasTable">
        <thead>
          <tr>
            <th class="dm-table">Item</th>
            <th class="dm-table">Descripción</th>
            <th class="dm-table">Porcentage</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 Porcentage"></th>
            <th></th>  
          </tr>
        </thead>
        <tbody id="TableBody">
        </tbody>
      </table>

      <!-- Modal Editar -->
      <div 
        class="modal fade dm-custom-modal" 
        id="editarCatalogo_de_garantiasCatalog" 
        tabindex="-1"
        aria-labelledby="editarCatalogo_de_garantiasCatalogLabel" 
        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="editarCatalogo_de_garantiasCatalogLabel">
                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="formEditarCatalogo_de_garantias" 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="PercentageEdit" class="form-label">Percentage</label>
                      <input type="number" class="form-control dm-input-style" step="0.01" id="PercentageEdit"/>
                    </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="formEditarCatalogo_de_garantias">
                Actualizar <i class="fas fa-sync-alt"></i>
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- Modal Agregar -->
      <div 
        class="modal fade dm-custom-modal" 
        id="agregarCatalogo_de_garantiasCatalog" 
        tabindex="-1" 
        aria-labelledby="agregarCatalogo_de_garantiasCatalogLabel"
        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="agregarCatalogo_de_garantiasCatalogLabel">
                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="formAgregarCatalogo_de_garantias" 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="Percentage" class="form-label">Percentage</label>
                    <input type="number" class="form-control dm-input-style" step="0.01" id="Percentage" required />
                  </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/DMPrjWarWarranty.js') }}"></script>

{% endblock %}