{% extends "layout.html" %}
{% block title %}
Gestión de Breakers - 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 ">Flujo de Contratos</h2>
        <p >Flujo de contratos.</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>

      </div>
      
      <!-- Tabla principal -->
      <table  class="table table-striped dm-table " style="width:100%" id="Table1">
        <thead>
          <tr>
            <th class="dm-table">ContractNum</th>
                <th class="dm-table">EntryDate</th>
                <th class="dm-table">EntryPerson</th>
                <th class="dm-table">Folio</th>
                <th class="dm-table">ContractCode</th>
                <th class="dm-table">Division</th>
                <th class="dm-table">Departamento</th>
                <th class="dm-table">ContractDescription</th>
                <th class="dm-table">CustNum</th>
                <th class="dm-table">CustID</th>
                <th class="dm-table">Cliente</th>
                <th class="dm-table">Importe</th>
                <th class="dm-table">ImporteMXN</th>
                <th class="dm-table">CurrencyCode</th>
                <th class="dm-table">ExchangeRate</th>
                <th class="dm-table">Duration</th>
                <th class="dm-table">Modifier</th>
                <th class="dm-table">ActiveDate</th>
                <th class="dm-table">ExpireDate</th>
                <th class="dm-table">ContractComment</th>
                <th class="dm-table">InvoiceComment</th>
                <th class="dm-table">TipoDeContrato</th>
                <th class="dm-table">Facturado</th>
                <th class="dm-table">FacturadoIVA</th>
                <th class="dm-table">FacturadoMXN</th>
                <th class="dm-table">FacturadoIVAMXN</th>
                <th class="dm-table">ListaDeFacturas</th>
                <th class="dm-table">PorFacturar</th>
                <th class="dm-table">Revisión</th>
                <th class="dm-table">RevisiónRenovacion</th>
                <th class="dm-table">Renovación(si/no)</th>
                <th class="dm-table">Consideración</th>
                <th class="dm-table">Comentario</th>
                <th class="dm-table">Pronostico</th>
                <th class="dm-table">FechadeCobro</th>
            </tr>
          <tr class="dm-btn-text">
            <th class="dm-table"><input type="text" class="form-control column-filter" data-column="0" placeholder="ContractNum"></th>
            <th class="dm-table"><input type="text" class="form-control column-filter" data-column="1" placeholder="EntryDate"></th>
            <th class="dm-table"><input type="text" class="form-control column-filter" data-column="2" placeholder="EntryPerson"></th>
            <th class="dm-table"><input type="text" class="form-control column-filter" data-column="3" placeholder="Folio"></th>
            <th class="dm-table"><input type="text" class="form-control column-filter" data-column="4" placeholder="ContractCode"></th>
            <th class="dm-table"><input type="text" class="form-control column-filter" data-column="5" placeholder="Division"></th>
            <th class="dm-table"><input type="text" class="form-control column-filter" data-column="6" placeholder="Departamento"></th>
            <th class="dm-table"><input type="text" class="form-control column-filter" data-column="7" placeholder="ContractDescription"></th>
            <th class="dm-table"><input type="text" class="form-control column-filter" data-column="8" placeholder="CustNum"></th>
            <th class="dm-table"><input type="text" class="form-control column-filter" data-column="9" placeholder="CustID"></th>
            <th class="dm-table"><input type="text" class="form-control column-filter" data-column="10" placeholder="Cliente"></th>
            <th class="dm-table"><input type="text" class="form-control column-filter" data-column="11" placeholder="Importe"></th>
            <th class="dm-table"><input type="text" class="form-control column-filter" data-column="12" placeholder="ImporteMXN"></th>
            <th class="dm-table"><input type="text" class="form-control column-filter" data-column="13" placeholder="CurrencyCode"></th>
            <th class="dm-table"><input type="text" class="form-control column-filter" data-column="14" placeholder="ExchangeRate"></th>
            <th class="dm-table"><input type="text" class="form-control column-filter" data-column="15" placeholder="Duration"></th>
            <th class="dm-table"><input type="text" class="form-control column-filter" data-column="16" placeholder="Modifier"></th>
            <th class="dm-table"><input type="text" class="form-control column-filter" data-column="17" placeholder="ActiveDate"></th>
            <th class="dm-table"><input type="text" class="form-control column-filter" data-column="18" placeholder="ExpireDate"></th>
            <th class="dm-table"><input type="text" class="form-control column-filter" data-column="19" placeholder="ContractComment"></th>
            <th class="dm-table"><input type="text" class="form-control column-filter" data-column="20" placeholder="InvoiceComment"></th>
            <th class="dm-table"><input type="text" class="form-control column-filter" data-column="21" placeholder="TipoDeContrato"></th>
            <th class="dm-table"><input type="text" class="form-control column-filter" data-column="22" placeholder="Facturado"></th>
            <th class="dm-table"><input type="text" class="form-control column-filter" data-column="23" placeholder="FacturadoIVA"></th>
            <th class="dm-table"><input type="text" class="form-control column-filter" data-column="24" placeholder="FacturadoMXN"></th>
            <th class="dm-table"><input type="text" class="form-control column-filter" data-column="25" placeholder="FacturadoIVAMXN"></th>
            <th class="dm-table"><input type="text" class="form-control column-filter" data-column="26" placeholder="ListaDeFacturas"></th>
            <th class="dm-table"><input type="text" class="form-control column-filter" data-column="27" placeholder="PorFacturar"></th>
            <th class="dm-table"><input type="text" class="form-control column-filter" data-column="28" placeholder="Revisión"></th>
            <th class="dm-table"><input type="text" class="form-control column-filter" data-column="29" placeholder="RevisiónRenovacion"></th>
            <th class="dm-table"><input type="text" class="form-control column-filter" data-column="30" placeholder="Renovación(si/no)"></th>
            <th class="dm-table"><input type="text" class="form-control column-filter" data-column="31" placeholder="Consideración"></th>
            <th class="dm-table"><input type="text" class="form-control column-filter" data-column="32" placeholder="Comentario"></th>
            <th class="dm-table"><input type="text" class="form-control column-filter" data-column="33" placeholder="Pronostico"></th>
            <th class="dm-table"><input type="text" class="form-control column-filter" data-column="34" placeholder="FechadeCobro"></th>  
          </tr>
        </thead>
        <tbody id="TableBody">
        </tbody>
      </table>

    </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/SupYCtrol/DataMaster/GSYC/Flujo_Contratos.js') }}"></script>

{% endblock %}