{% extends 'components/layout.html' %}
{% load static %}

{% block styles %}

      <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet">
      <!-- Prism CSS -->
      <link rel="stylesheet" href="{% static 'assets/libs/prismjs/themes/prism-coy.min.css'%}">

        <!-- Tabulator Css -->
        <link rel="stylesheet" href="{% static 'assets/libs/tabulator-tables/css/tabulator.min.css'%}">

        <!-- Choices Css -->
        <link rel="stylesheet" href="{% static 'assets/libs/choices.js/public/assets/styles/choices.min.css'%}">

        <link rel="stylesheet" href="{% static 'assets/libs/prismjs/themes/prism-coy.min.css'%}">

        <style>



.accordion-transition {
  overflow: hidden;
  transition: max-height 0.5s ease, opacity 0.5s ease;
  max-height: 0;
  opacity: 0;
  display: none; /* cerrado realmente */
}

.accordion-open {
  display: block;   /* mostrar el contenido */
  max-height: 1000px; /* ajusta según lo que necesite tu tabla */
  opacity: 1;
}



        
          /* Fondo que cubre toda la pantalla */
          .spinner-overlay-22 {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(255, 255, 255, 0.8);
            z-index: 1050;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        
          /* Contenedor del spinner */
          .spinner-container-22 {
            padding-top: 200px;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        
          /* Spinner circular */
          .spinner-border-22 {
            border-radius: 50%;
            margin: 2px;
            border: 6px solid rgb(var(--primary) / 0.85);
            border-bottom-color: transparent;
            height: 100px;
            width: 100px;
            background: none;
            display: inline-block;
            animation: rotate 1.5s linear infinite;
          }
        
          /* Texto "Gigot" en el centro */
          .spinner-text-22 {
            position: absolute;
            font-size: 20px;
            font-weight: bold;
            color: rgb(var(--primary) / 0.85);
            text-align: center;
          }
         
          /* Animación de rotación */
          @keyframes rotate {
            0% {
              transform: rotate(0deg);
            }
        
            100% {
              transform: rotate(360deg);
            }
          }
        </style>
        
{% endblock %}

{% block content %}



<div style="padding: 10px; margin: 0px;">

  <!-- Page Header -->

<!-- Page Header Close -->





  <style>
    .btntable {
      padding: 5px 10px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      color: white;
  }
  
  .tabulator-loader {
      display: none !important;
  }
  .tabulator-header-filter input {
      font-size: 14px; /* Tamaño de fuente más pequeño */
      color: gray; /* Texto en color gris */
      background-color: transparent; /* Fondo transparente */
      border: 1px solid gray; /* Borde gris */
      border-radius: 4px; /* Bordes redondeados (opcional) */
      padding: 3px; /* Espaciado interno */
  }
  
  .tabulator-header-filter input::placeholder {
      color: lightgray; /* Color del placeholder */
      font-style: italic; /* Estilo del texto del placeholder (opcional) */
  }
  
  /* Columna custom */
  .action-column {
      border-left: 1px solid #ccc; /* Color y estilo del borde */
  }
  
  .tabulator-col[tabulator-field="actions"] {
      border-left: 1px solid #ccc; /* Para el encabezado de la columna */
  }

  .inputhigh{
    height: 50% !important;
    border-color: #ccc !important;
    
  }



  

#descripFox,
#descripFox2,
#divisionFox,
#subdFox,
#categoriaFox,
#sublineaFox,
#tsublFox,
#caractFox,
#segmentoFox,
#conceptoFox,
#packagingFox,
#env2Fox,
#elaboracFox,
#fabricFox,
#coddivisionFox,
#codsubDFox,
#codcategoriaFox,
#codsublineaFox,
#codtsublFox,
#codcaractFox,
#codsegmentoFox,
#codconceptoFox,
#codpackagingFox,
#codenv2Fox,
#codelaboracFox,
#codfabricFox,
#codcolencFox,
#colencFox,
#talleFox,
#idespFox,
#codtalleFox,
#codcondcomFox,
#condcomFox,
#codcuotasFox,
#codmatFox,
#descripMatFox,
#codcolorFox,
#colorFox,
#codlineaFox,
#lineaFox,
#apFox,
#cabFox,
#provFox,
#codapFox,
#codcabFox,
#codprovFox,
#codsexoFox,
#sexoFox,
#codtargetFox,
#targetFox,
#codpuntoprecFox,
#puntoprecFox,
#codprocdFox,
#procdFox,
#codorigenFox,
#origenFox,
#formaptFox,
#codformaptFox,
#codidespFox,
#bolsaestFox,
#pesoFox,
#altoFox,
#largoFox,
#anchoFox,
#volumenFox,
#camplanzFox,
#campbajaFox,
#marcacombFox,
#marcadobleFox,
#consigFox,
#estadoFox,
#codcanalFox,
#canalFox,
#fechaAltaFox,
#codEmpFox,
#empFox,
#codMKEmpFox,
#codeFox,

#inputfox
 {
  font-size: 0.875rem !important;
  border: 1px solid #ccc !important;
  border-radius: 5px !important;
  border-color: rgb(209, 208, 208)!important;
}

#codeFox{
 padding: 2px 6px !important;
  height: 28px !important; 
  font-size: 0.875rem !important;
}



#codeFox,
#coddivisionFox,
#codsubDFox,
#descripFox,
#descripFox2,
#codcategoriaFox,
#codsublineaFox,
#codtsublFox,
#codcaractFox,
#codsegmentoFox,
#codconceptoFox,
#codpackagingFox,
#codenv2Fox,
#codelaboracFox,
#codfabricFox,
#codcolencFox,
#codtalleFox,
#codidespFox,
#codcondcomFox,
#codcuotasFox,
#codmatFox,
#codcolorFox,
#codlineaFox,
#codapFox,
#codprovFox,
#codsexoFox,
#codtargetFox,
#codpuntoprecFox,
#codprocdFox,
#codorigenFox,
#codformaptFox,
#pesoFox,
#altoFox,
#largoFox,
#anchoFox,
#volumenFox,
#camplanzFox,
#campbajaFox,
#marcacombFox,
#marcadobleFox,
#consigFox,
#estadoFox,
#codcanalFox,
#fechaAltaFox
{
  background:rgb(232 228 228);
}

  </style>
<div class="main-content">
  <!-- Selector de modelos con imágenes -->
  
  <div class="grid grid-cols-12 gap-6">
    <div class="col-span-12">

      <div class="box">
        <div class="box-header">
          <h5 class="box-title">Actualiza MONO</h5>
        </div>

        
        <div class="grid grid-cols-12 gap-4 mb-6" style="margin-bottom: 0px;">
          <div class="col-span-12 sm:col-span-6 md:col-span-3 lg:col-span-2 xl:col-span-1 flex flex-col items-center" style="padding: 10px;">
            <label class="cursor-pointer">
              <img src="{% static 'public/images/mod1.png' %}" >
            </label>
          </div>
          <div class="col-span-12 sm:col-span-6 md:col-span-3 lg:col-span-2 xl:col-span-1 flex flex-col items-center" style="padding: 10px;">
            <label class="cursor-pointer">
              <img src="{% static 'public/images/mod2.png' %}" >
            </label>
          </div>
          <div class="col-span-12 sm:col-span-6 md:col-span-3 lg:col-span-2 xl:col-span-1 flex flex-col items-center" style="padding: 10px;">
            <label class="cursor-pointer">
              <img src="{% static 'public/images/mod3.png' %}" >
            </label>
          </div>
          <div class="col-span-12 sm:col-span-6 md:col-span-3 lg:col-span-2 xl:col-span-1 flex flex-col items-center" style="padding: 10px;">
            <label class="cursor-pointer">
              <img src="{% static 'public/images/mod4.png' %}" >
            </label>
          </div>
          <div class="col-span-12 sm:col-span-6 md:col-span-3 lg:col-span-2 xl:col-span-1 flex flex-col items-center" style="padding: 10px;">
            <label class="cursor-pointer">
              <img src="{% static 'public/images/mod5.png' %}" >
            </label>
          </div>
          
          <div class="col-span-12 sm:col-span-6 md:col-span-3 lg:col-span-2 xl:col-span-1 flex flex-col items-center" style="padding: 10px;">
            <label class="cursor-pointer">
              <img src="{% static 'public/images/mod6.png' %}" >
            </label>
          </div>
          <div class="col-span-12 sm:col-span-6 md:col-span-3 lg:col-span-2 xl:col-span-1 flex flex-col items-center" style="padding: 10px;">
            <label class="cursor-pointer">
              <img src="{% static 'public/images/mod7.png' %}" >
            </label>
          </div>
          <div class="col-span-12 sm:col-span-6 md:col-span-3 lg:col-span-2 xl:col-span-1 flex flex-col items-center" style="padding: 10px;">
            <label class="cursor-pointer">
              <img src="{% static 'public/images/mod8.png' %}" >
            </label>
          </div>
          <div class="col-span-12 sm:col-span-6 md:col-span-3 lg:col-span-2 xl:col-span-1 flex flex-col items-center" style="padding: 10px;">
            <label class="cursor-pointer">
              <img src="{% static 'public/images/mod9.png' %}" >
            </label>
          </div>
          <div class="col-span-12 sm:col-span-6 md:col-span-3 lg:col-span-2 xl:col-span-1 flex flex-col items-center" style="padding: 10px;">
            <label class="cursor-pointer">
              <img src="{% static 'public/images/mod10.png' %}" >
            </label>
          </div>
          <div class="col-span-12 sm:col-span-6 md:col-span-3 lg:col-span-2 xl:col-span-1 flex flex-col items-center" style="padding: 10px;">
            <label class="cursor-pointer">
              <img src="{% static 'public/images/mod11.png' %}" >
            </label>
          </div>
          <div class="col-span-12 sm:col-span-6 md:col-span-3 lg:col-span-2 xl:col-span-1 flex flex-col items-center" style="padding: 10px;">
            <label class="cursor-pointer">
              
            </label>
          </div>
          <div class="col-span-12 sm:col-span-6 md:col-span-3 lg:col-span-2 xl:col-span-1 flex flex-col items-center" style="padding: 10px;">
            <label class="cursor-pointer">
              <img src="{% static 'public/images/mod12.png' %}" >
            </label>
          </div>
          <div class="col-span-12 sm:col-span-6 md:col-span-3 lg:col-span-2 xl:col-span-2 flex flex-col items-center" style="padding: 10px;">
            <label class="cursor-pointer">
              <img style="width: 100%;padding-left: 20PX;padding-right: 20PX;" src="{% static 'public/images/mod13.png' %}" >
            </label>
          </div>
          <div class="col-span-12 sm:col-span-6 md:col-span-3 lg:col-span-2 xl:col-span-2 flex flex-col items-center" style="padding: 10px;">
            <label class="cursor-pointer">
              <img style="width: 100%;padding-left: 20PX;padding-right: 20PX;" src="{% static 'public/images/mod14.png' %}" >
            </label>
          </div>
          <div class="col-span-12 sm:col-span-6 md:col-span-3 lg:col-span-2 xl:col-span-1 flex flex-col items-center" style="padding: 10px;">
            <label class="cursor-pointer">
              <img src="{% static 'public/images/mod15.png' %}" >
            </label>
          </div>
          
        </div>


  

        <hr style="border-color: black;">

              
              
        
        <div class="grid grid-cols-12 sm:col-span-12 md:col-span-12 lg:col-span-12 xl:col-span-12 gap-6 mb-6 p-8 ">
          
            <div class="col-span-12 sm:col-span-6 md:col-span-2 lg:col-span-2 xl:col-span-2">
              <div class="flex items-center gap-4">
                <label style="padding-left: 0px;text-align: right;">AÑO</label>
                <input id="inputAno" maxlength="4" inputmode="numeric" pattern="\d{4}" style="width:50%;" type="text"
                  class="text-center text-sm py-1 px-2 h-7 border rounded" />
              </div>
            </div>          
            <div class="col-span-12 sm:col-span-6 md:col-span-2 lg:col-span-2 xl:col-span-2">
              <div class="flex items-center gap-4">
                <label style="padding-left: 0px;text-align: right;">CAMPAÑA</label>
               <input id="inputCampania" maxlength="2" inputmode="numeric" pattern="\d{1,2}" style="width:30%;" type="text"
                class="text-center text-sm py-1 px-2 h-7 border rounded"/>
              </div>
            </div>
            <div class="col-span-12 sm:col-span-6 md:col-span-2 lg:col-span-2 xl:col-span-2">
              <div class="flex items-center gap-4">
                <label style="padding-left: 0px;text-align: right;" >PÁGINA</label>
                <input id="inputPagina" maxlength="3" inputmode="numeric" pattern="\d{1,3}" style="width:30%;" type="text"
                    class="text-center text-sm py-1 px-2 h-7 border rounded" />
              </div>
            </div>
            <div class="col-span-12 sm:col-span-6 md:col-span-2 lg:col-span-2 xl:col-span-2">
              <div class="flex items-center gap-4">
                <label style="padding-left: 0px;text-align: right;" >MODELO</label>
                <input type="text"  style="width: 30%;" id="codeFox" class="col-span-12 sm:col-span-3 md:col-span-2 form-control w-24 text-center text-sm py-1 px-2 h-7" />
              </div>
            </div>

            <div class="col-span-12 sm:col-span-6 md:col-span-2 lg:col-span-2 xl:col-span-2">
              <div class="flex items-center gap-4">
                <div class="prism-toggle">
                  <button class="col-span-3 ti-btn bg-primary text-white w-full py-1" id="btn-act-model">ACTUALIZA MODELO</button> 
                </div>
              </div>
            </div>
            <div class="col-span-12 sm:col-span-6 md:col-span-2 lg:col-span-2 xl:col-span-2">
              <div class="flex items-center gap-4">
                <button class="col-span-3 ti-btn bg-primary text-white w-full py-1">MUESTRA MODELO</button>   
              </div>
            </div>
             <div class="col-span-12 sm:col-span-12 md:col-span-10 lg:col-span-10 xl:col-span-10">
              
            </div> 
            
            <div class="col-span-12 sm:col-span-6 md:col-span-2 lg:col-span-2 xl:col-span-2">
                <button class="col-span-3 ti-btn bg-primary text-white w-full py-1">IMPRIME MODELO</button>              
            </div>          
        

            
            

            <div id="hs-basic-with-arrow-collapse-one"  class="accordion-transition box-body col-span-12 sm:col-span-12 md:col-span-12 lg:col-span-12 xl:col-span-12 hs-accordion accordion-item overflow-hidden !border-b-0">
                                        <div class="table-responsive">
                                            <table id="tabla-modelo" class="table whitespace-nowrap min-w-full table-bordered table-bordered-primary border-primary/10">
                                                <thead>
                                                    <tr class="border-b border-defaultborder">
                                                        <th scope="col" class="text-start">Código</th>
                                                        <th scope="col" class="text-start">Descripción</th>
                                                        <th scope="col" class="text-start">Of.</th>
                                                        <th scope="col" class="text-start">Uxp</th>
                                                        <th scope="col" class="text-start">Unid.E</th>

                                                        <th scope="col" class="text-start">Pr_Oferta</th>
                                                        <th scope="col" class="text-start">Pr.Norm</th>
                                                        <th scope="col" class="text-start">M</th>
                                                        <th scope="col" class="text-start">Pag</th>
                                                        <th scope="col" class="text-start">Mod.</th>
                                                        <th scope="col" class="text-start">Ubi.</th>
                                                        
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    
                                                    <tr class="table-primary border-b border-defaultborder">
                                                        <th scope="row" class="text-start">36584</th>
                                                        <td>DIVA ESMALTE P/UÑAS INTENSE BLACK 8.5</td>
                                                        <td>9</td>
                                                        <td>0,0000</td>
                                                        <td>0</td>
                                                        <td>2800</td>
                                                        <td>4390</td>
                                                        <td>*</td>
                                                       <td><input value="18" style="width: 50%;" type="text"  class="text-center text-sm py-1 px-2 h-7 border rounded" /></td>
                                                        <td><input style="width: 50%;" type="text"  class="text-center text-sm py-1 px-2 h-7 border rounded" /></td>
                                                        <td><input style="width: 50%;" type="text"  class="text-center text-sm py-1 px-2 h-7 border rounded" /></td>
                                                    </tr>

                                                    <tr class="border-b border-defaultborder">
                                                        <th scope="row" class="text-start">36596</th>
                                                        <td>DIVA ESMALTE P/UÑAS RED 8.5</td>
                                                        <td></td>
                                                        <td>0,0360</td>
                                                        <td>1063</td>
                                                        <td>2800</td>
                                                        <td>4390</td>
                                                        <td>*</td>
                                                        <td><input value="18" style="width: 50%;" type="text"  class="text-center text-sm py-1 px-2 h-7 border rounded" /></td>
                                                        <td><input style="width: 50%;" type="text"  class="text-center text-sm py-1 px-2 h-7 border rounded" /></td>
                                                        <td><input style="width: 50%;" type="text"  class="text-center text-sm py-1 px-2 h-7 border rounded" /></td>
                                                    </tr>
                                                    <tr class="border-b border-defaultborder">
                                                        <th scope="row" class="text-start">36596</th>
                                                        <td>DIVA ESMALTE P/UÑAS RED 8.5</td>
                                                        <td></td>
                                                        <td>0,0360</td>
                                                        <td>1063</td>
                                                        <td>2800</td>
                                                        <td>4390</td>
                                                        <td>*</td>
                                                       <td><input value="18" style="width: 50%;" type="text"  class="text-center text-sm py-1 px-2 h-7 border rounded" /></td>
                                                        <td><input style="width: 50%;" type="text"  class="text-center text-sm py-1 px-2 h-7 border rounded" /></td>
                                                        <td><input style="width: 50%;" type="text"  class="text-center text-sm py-1 px-2 h-7 border rounded" /></td>
                                                    </tr>
                                                    <tr class="border-b border-defaultborder">
                                                        <th scope="row" class="text-start">36596</th>
                                                        <td>DIVA ESMALTE P/UÑAS RED 8.5</td>
                                                        <td></td>
                                                        <td>0,0360</td>
                                                        <td>1063</td>
                                                        <td>2800</td>
                                                        <td>4390</td>
                                                        <td>*</td>
                                                      <td><input value="18" style="width: 50%;" type="text"  class="text-center text-sm py-1 px-2 h-7 border rounded" /></td>
                                                        <td><input style="width: 50%;" type="text"  class="text-center text-sm py-1 px-2 h-7 border rounded" /></td>
                                                        <td><input style="width: 50%;" type="text"  class="text-center text-sm py-1 px-2 h-7 border rounded" /></td>
                                                    </tr>
                                                    <tr class="border-b border-defaultborder">
                                                        <th scope="row" class="text-start">36596</th>
                                                        <td>DIVA ESMALTE P/UÑAS RED 8.5</td>
                                                        <td></td>
                                                        <td>0,0360</td>
                                                        <td>1063</td>
                                                        <td>2800</td>
                                                        <td>4390</td>
                                                        <td>*</td>
                                                      <td><input value="18" style="width: 50%;" type="text"  class="text-center text-sm py-1 px-2 h-7 border rounded" /></td>
                                                        <td><input style="width: 50%;" type="text"  class="text-center text-sm py-1 px-2 h-7 border rounded" /></td>
                                                        <td><input style="width: 50%;" type="text"  class="text-center text-sm py-1 px-2 h-7 border rounded" /></td>
                                                    </tr>



                                                    <tr class="table-primary border-b border-defaultborder">
                                                        <th scope="row" class="text-start">36584</th>
                                                        <td>DIVA ESMALTE P/UÑAS INTENSE BLACK 8.5</td>
                                                        <td>9</td>
                                                        <td>0,0000</td>
                                                        <td>0</td>
                                                        <td>2800</td>
                                                        <td>4390</td>
                                                        <td>*</td>
                                                       <td><input value="18" style="width: 50%;" type="text"  class="text-center text-sm py-1 px-2 h-7 border rounded" /></td>
                                                        <td><input style="width: 50%;" type="text"  class="text-center text-sm py-1 px-2 h-7 border rounded" /></td>
                                                        <td><input style="width: 50%;" type="text"  class="text-center text-sm py-1 px-2 h-7 border rounded" /></td>
                                                    </tr>

                                                    <tr class="border-b border-defaultborder">
                                                        <th scope="row" class="text-start">36596</th>
                                                        <td>DIVA ESMALTE P/UÑAS RED 8.5</td>
                                                        <td></td>
                                                        <td>0,0360</td>
                                                        <td>1063</td>
                                                        <td>2800</td>
                                                        <td>4390</td>
                                                        <td>*</td>
                                                        <td><input value="18" style="width: 50%;" type="text"  class="text-center text-sm py-1 px-2 h-7 border rounded" /></td>
                                                        <td><input style="width: 50%;" type="text"  class="text-center text-sm py-1 px-2 h-7 border rounded" /></td>
                                                        <td><input style="width: 50%;" type="text"  class="text-center text-sm py-1 px-2 h-7 border rounded" /></td>
                                                    </tr>
                                                    <tr class="border-b border-defaultborder">
                                                        <th scope="row" class="text-start">36596</th>
                                                        <td>DIVA ESMALTE P/UÑAS RED 8.5</td>
                                                        <td></td>
                                                        <td>0,0360</td>
                                                        <td>1063</td>
                                                        <td>2800</td>
                                                        <td>4390</td>
                                                        <td>*</td>
                                                        <td><input value="18" style="width: 50%;" type="text"  class="text-center text-sm py-1 px-2 h-7 border rounded" /></td>
                                                        <td><input style="width: 50%;" type="text"  class="text-center text-sm py-1 px-2 h-7 border rounded" /></td>
                                                        <td><input style="width: 50%;" type="text"  class="text-center text-sm py-1 px-2 h-7 border rounded" /></td>
                                                    </tr>




                                                    <tr class="table-primary border-b border-defaultborder">
                                                        <th scope="row" class="text-start">36584</th>
                                                        <td>DIVA ESMALTE P/UÑAS INTENSE BLACK 8.5</td>
                                                        <td>9</td>
                                                        <td>0,0000</td>
                                                        <td>0</td>
                                                        <td>2800</td>
                                                        <td>4390</td>
                                                        <td>*</td>
                                                       <td><input value="18" style="width: 50%;" type="text"  class="text-center text-sm py-1 px-2 h-7 border rounded" /></td>
                                                        <td><input style="width: 50%;" type="text"  class="text-center text-sm py-1 px-2 h-7 border rounded" /></td>
                                                        <td><input style="width: 50%;" type="text"  class="text-center text-sm py-1 px-2 h-7 border rounded" /></td>
                                                    </tr>

                                                    <tr class="border-b border-defaultborder">
                                                        <th scope="row" class="text-start">36596</th>
                                                        <td>DIVA ESMALTE P/UÑAS RED 8.5</td>
                                                        <td></td>
                                                        <td>0,0360</td>
                                                        <td>1063</td>
                                                        <td>2800</td>
                                                        <td>4390</td>
                                                        <td>*</td>
                                                        <td><input value="18" style="width: 50%;" type="text"  class="text-center text-sm py-1 px-2 h-7 border rounded" /></td>
                                                        <td><input style="width: 50%;" type="text"  class="text-center text-sm py-1 px-2 h-7 border rounded" /></td>
                                                        <td><input style="width: 50%;" type="text"  class="text-center text-sm py-1 px-2 h-7 border rounded" /></td>
                                                    </tr>
                                                    <tr class="border-b border-defaultborder">
                                                        <th scope="row" class="text-start">36596</th>
                                                        <td>DIVA ESMALTE P/UÑAS RED 8.5</td>
                                                        <td></td>
                                                        <td>0,0360</td>
                                                        <td>1063</td>
                                                        <td>2800</td>
                                                        <td>4390</td>
                                                        <td>*</td>
                                                       <td><input value="18" style="width: 50%;" type="text"  class="text-center text-sm py-1 px-2 h-7 border rounded" /></td>
                                                        <td><input style="width: 50%;" type="text"  class="text-center text-sm py-1 px-2 h-7 border rounded" /></td>
                                                        <td><input style="width: 50%;" type="text"  class="text-center text-sm py-1 px-2 h-7 border rounded" /></td>
                                                    </tr>
                                                    <tr class="border-b border-defaultborder">
                                                        <th scope="row" class="text-start">36596</th>
                                                        <td>DIVA ESMALTE P/UÑAS RED 8.5</td>
                                                        <td></td>
                                                        <td>0,0360</td>
                                                        <td>1063</td>
                                                        <td>2800</td>
                                                        <td>4390</td>
                                                        <td>*</td>
                                                      <td><input value="18" style="width: 50%;" type="text"  class="text-center text-sm py-1 px-2 h-7 border rounded" /></td>
                                                        <td><input style="width: 50%;" type="text"  class="text-center text-sm py-1 px-2 h-7 border rounded" /></td>
                                                        <td><input style="width: 50%;" type="text"  class="text-center text-sm py-1 px-2 h-7 border rounded" /></td>
                                                    </tr>
                                                    <tr class="border-b border-defaultborder">
                                                        <th scope="row" class="text-start">36596</th>
                                                        <td>DIVA ESMALTE P/UÑAS RED 8.5</td>
                                                        <td></td>
                                                        <td>0,0360</td>
                                                        <td>1063</td>
                                                        <td>2800</td>
                                                        <td>4390</td>
                                                        <td>*</td>
                                                      <td><input value="18" style="width: 50%;" type="text"  class="text-center text-sm py-1 px-2 h-7 border rounded" /></td>
                                                        <td><input style="width: 50%;" type="text"  class="text-center text-sm py-1 px-2 h-7 border rounded" /></td>
                                                        <td><input style="width: 50%;" type="text"  class="text-center text-sm py-1 px-2 h-7 border rounded" /></td>
                                                    </tr>
                                                   
                                                    
                                                   
                                                </tbody>
                                            </table>
                                        </div>
            </div>
          <div class="grid grid-cols-12 sm:col-span-12 md:col-span-12 lg:col-span-12 xl:col-span-12 gap-6 mb-6 p-8 ">


          <!-- Encabezado -->
          <div class="col-span-12 sm:col-span-12 md:col-span-12 lg:col-span-12 xl:col-span-12">
            <label class="block text-sm mb-1 mt-4">ENCABEZADO</label>
            <input type="text" id="codeFox" maxlength="12" value="LOS PRECIOS CON ALGUN DETALLE NAVIDEÑO"
                class="col-span-12 sm:col-span-3 md:col-span-2 form-control w-24 text-center text-sm py-1 px-2 h-7" />
            
          </div>

          <!-- Pie -->
          <div class="col-span-12 sm:col-span-12 md:col-span-12 lg:col-span-12 xl:col-span-12">
            <label class="block text-sm mb-1 mt-2">PIE</label>
            <input type="text" id="codeFox" maxlength="12" value="LOS PRECIOS CON ALGUN DETALLE NAVIDEÑO"
                class="col-span-12 sm:col-span-3 md:col-span-2 form-control w-24 text-center text-sm py-1 px-2 h-7" />
          </div>

          <!-- Segunda sección: Página + Modelo --> 
          <div class="grid grid-cols-12 gap-4 items-center mt-6">

            <label class="col-span-1 text-sm">PÁGINA</label>
            <input type="text" value="35" class="col-span-1 form-control text-center text-sm py-1 px-2 h-7 border rounded" />

            <label class="col-span-12 sm:col-span-3 md:col-span-2 form-control w-24 text-center text-sm py-1 px-2 h-7">MODELO</label>
            <input codeFox type="text" value="2" class="col-span-1 form-control text-center text-sm py-1 px-2 h-7 border rounded" />
          </div>

          <!-- Encabezado 2 -->
          <div class="col-span-12 sm:col-span-12 md:col-span-12 lg:col-span-12 xl:col-span-12">
            <label class="block text-sm mb-1 mt-4">ENCABEZADO</label>
            <input type="text" id="codeFox" maxlength="12" value="LINEA DIVA"
                class="col-span-12 sm:col-span-3 md:col-span-2 form-control w-24 text-center text-sm py-1 px-2 h-7" />
          </div>

          <!-- Pie 2 -->
          <div class="col-span-12 sm:col-span-12 md:col-span-12 lg:col-span-12 xl:col-span-12">
            <label class="block text-sm mb-1 mt-2">PIE</label>
            <input type="text" id="codeFox" maxlength="12" value="LOS PRECIOS CON ALGUN DETALLE NAVIDEÑO"
                class="col-span-12 sm:col-span-3 md:col-span-2 form-control w-24 text-center text-sm py-1 px-2 h-7" />
              
          </div>

     





        
      </div>
    </div>
  </div>
</div>
<!-- End::row-3 -->

<!-- Start::main-content -->












<!--modal-->

<style>
  .modal-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
  }
</style>

<div id="confirm-modal" style="display: none;" class="modal-container">
  <div class="xxl:col-span-3 xl:col-span-6 lg:col-span-6 md:col-span-6 sm:col-span-6 col-span-12">
    <div class="box !bg-white dark:!bg-bodybg !border-0">
      <div class="alert custom-alert1 alert-warning">
        <button type="button" class="btn-close ms-auto" onclick="hideConfirmModal()" aria-label="Close"><i
            class="bi bi-x"></i></button>
        <div class="text-center px-[3rem] pb-0">
          <i style="font-size: 80px;color: rgb(var(--warning));" class="bi bi-info-circle-fill"></i>
          <h5 class="text-[1.25rem] !font-medium">Confirmación</h5>
          <p id="confirm-message">¿Estás seguro de Desactivar el usuario?</p>
          <div class="">
            <button type="button" onclick="hideConfirmModal()"
              class="ti-btn !py-1 !px-2 !text-[1.00rem] !font-medium text-white m-1"
              style="background-color: #dc3545;">Cancelar</button>
            <button type="button" id="confirm-accept-btn"
              class="ti-btn !py-1 !px-2 !text-[1.00rem] !font-medium text-white m-1"
              style="background-color: #28a745;">Aceptar</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>



<!--toast-->
<div id="toast-container" style="position: fixed; top: 20px; right: 20px; z-index: 1050;"></div>



<!-- Start:spinner -->
<div style="display: none;" class="spinner-overlay-22" id="spinnerOverlay">
  <div class="spinner-container-22">
    <div class="spinner-border-22"></div>
    <div class="spinner-text-22">Gigot</div>
  </div>
</div>
<!-- End:spinner -->






{% endblock %}

{% block scripts %}


  <!-- Tabulator JS -->
  <script src="{% static 'assets/libs/tabulator-tables/js/tabulator.min.js'%}"></script>

  <!-- Choices JS -->
  <script src="{% static 'assets/libs/choices.js/public/assets/scripts/choices.min.js'%}"></script>

  <!-- XLXS JS -->
  <script src="{% static 'assets/libs/xlsx/xlsx.full.min.js'%}"></script>

  <!-- JSPDF JS -->
  <script src="{% static 'assets/libs/jspdf/jspdf.umd.min.js'%}"></script>
  <script src="{% static 'assets/libs/jspdf-autotable/jspdf.plugin.autotable.min.js'%}"></script>

  

    <!-- Prism JS -->
  <script src="{% static 'assets/libs/prismjs/prism.js'%}"></script>
  <script src="{% static 'assets/js/prism-custom.js'%}"></script>

  <!-- Jquery Cdn -->
  <script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>

  <!-- Select2 Cdn -->
  <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

  <!-- Internal Select-2.js -->
  <script src="{% static 'assets/js/select2.js'%}"></script>


  


  <style>
    .toast {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: opacity 0.3s ease;
    opacity: 1;
}
.toast.bg-teal-50 {
    background-color: #e6fffa;
    color: #319795;
}
.toast.bg-red-50 {
    background-color: #ffe5e5;
    color: #e53e3e;
}
  </style>

<script>
  function showToast(message, type) {//  danger
    // Crea el elemento del toast
    const toast = document.createElement('div');
    toast.className = `toast bg-50 text-500 p-4 rounded shadow-lg mb-2 flex justify-between items-center`;
    toast.style.minWidth = '250px';

    // Contenido del toast
    if (type == 'danger'){
      toast.innerHTML = `
<div>
    <svg class="fill-${type} me-1" xmlns="http://www.w3.org/2000/svg" height="1.5rem"
        viewBox="0 0 24 24" width="1.5rem" fill="#000000">
        <path d="M0 0h24v24H0z" fill="none" />
        <path
            d="M15.73 3H8.27L3 8.27v7.46L8.27 21h7.46L21 15.73V8.27L15.73 3zM12 17.3c-.72 0-1.3-.58-1.3-1.3 0-.72.58-1.3 1.3-1.3.72 0 1.3.58 1.3 1.3 0 .72-.58 1.3-1.3 1.3zm1-4.3h-2V7h2v6z" />
    </svg>
</div>
<div style="color: black" >${message}</div>
    `;
    } else {
      toast.innerHTML = `
<div>
    <svg class="fill-${type} me-1" xmlns="http://www.w3.org/2000/svg"
        height="1.5rem" viewBox="0 0 24 24" width="1.5rem" fill="#000000">
        <path d="M0 0h24v24H0z" fill="none" />
        <path
            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" />
    </svg>
</div>
<div style="color: black" >${message}</div>
    `;
    }
    



    

    // Agregar el toast al contenedor
    const container = document.getElementById('toast-container');
    container.appendChild(toast);

    // Remover el toast automáticamente después de 5 segundos
    setTimeout(() => {
        toast.remove();
    }, 5000);
}

</script>



<script>
  function showConfirmModal(message, onConfirm) {
    // Establecer el mensaje en el modal
    document.getElementById("confirm-message").innerText = message;

    // Mostrar el modal
    document.getElementById("confirm-modal").style.display = "flex";

    // Asignar la acción al botón "Aceptar"
    const confirmButton = document.getElementById("confirm-accept-btn");
    confirmButton.onclick = function () {
        hideConfirmModal(); // Ocultar el modal
        if (onConfirm) onConfirm(); // Ejecutar la función de confirmación
    };
}

function hideConfirmModal() {
    // Ocultar el modal
    document.getElementById("confirm-modal").style.display = "none";
}
</script>


  <script src="{% static 'assets/libs/prismjs/prism.js'%}"></script>
  <script src="{% static 'assets/js/prism-custom.js'%}"></script>








<script>
document.addEventListener("DOMContentLoaded", function () {
  const EDIT_COL_INDEXES = [9, 10, 11]; // 1-based: Pag, Mod., Ubi.
  const panel = document.getElementById("hs-basic-with-arrow-collapse-one");
  const table = (panel && panel.querySelector("#tabla-modelo")) || panel.querySelector("table");
  if (!table) return;

  // 1) Asegurar inputs en columnas editables y etiquetarlos
  const bodyRows = Array.from(table.querySelectorAll("tbody tr"));
  const grid = []; // grid[rowIdx][colIdxRel] -> input

  bodyRows.forEach((tr, r) => {
    const tds = Array.from(tr.children); // th/td
    const rowInputs = [];
    EDIT_COL_INDEXES.forEach((colIdxRel, c) => {
      const td = tds[colIdxRel - 1];
      if (!td) return;

      // si no hay input, lo creo
      let input = td.querySelector("input");
      if (!input) {
        input = document.createElement("input");
        input.type = "text";
        input.className = "grid-input text-center text-sm py-1 px-2 h-7 border rounded w-20"; // ajustá ancho
        td.appendChild(input);
      } else {
        // estandarizo clases
        input.classList.add("grid-input");
      }
      input.setAttribute("data-grid-row", r);
      input.setAttribute("data-grid-col", c); // 0,1,2 (Pag,Mod,Ubi)
      rowInputs.push(input);
    });
    grid.push(rowInputs);
  });

  // 2) Navegación con flechas / Enter / Tab
  function focusCell(r, c) {
    if (r < 0 || r >= grid.length) return;
    if (c < 0 || c >= EDIT_COL_INDEXES.length) return;
    const target = grid[r][c];
    if (target) {
      target.focus();
      // colocar el cursor al final
      const val = target.value;
      target.setSelectionRange(val.length, val.length);
    }
  }

  table.addEventListener("keydown", function (e) {
    const input = e.target.closest(".grid-input");
    if (!input) return;

    const r = parseInt(input.getAttribute("data-grid-row"), 10);
    const c = parseInt(input.getAttribute("data-grid-col"), 10);
    let handled = false;

    // Navegación tipo Excel
    switch (e.key) {
      case "ArrowUp":
        focusCell(r - 1, c);
        handled = true;
        break;
      case "ArrowDown":
        focusCell(r + 1, c);
        handled = true;
        break;
      case "ArrowLeft":
        // si hay selección al inicio, mover a celda izquierda; si no, dejar mover el cursor dentro del input
        if (input.selectionStart === 0 && input.selectionEnd === 0) {
          focusCell(r, c - 1);
          handled = true;
        }
        break;
      case "ArrowRight":
        // si el cursor está al final, mover a celda derecha
        if (input.selectionStart === input.value.length && input.selectionEnd === input.value.length) {
          focusCell(r, c + 1);
          handled = true;
        }
        break;
      case "Enter":
        // bajar (Shift+Enter sube)
        if (e.shiftKey) {
          focusCell(r - 1, c);
        } else {
          focusCell(r + 1, c);
        }
        handled = true;
        break;
      case "Tab":
        // Tab → derecha, Shift+Tab ← izquierda (mantengo el comportamiento pero limitado a las 3 columnas)
        if (e.shiftKey) {
          focusCell(r, c - 1);
        } else {
          focusCell(r, c + 1);
        }
        handled = true;
        break;
    }

    if (handled) {
      e.preventDefault();
      e.stopPropagation();
    }
  });

  // 3) Foco inicial (opcional): primera celda editable si el panel se muestra
  const first = grid[0] && grid[0][0];
  if (first && !panel.classList.contains("hidden")) {
    first.focus();
  }

  // 4) Integración con tu botón para abrir el acordeón (si usás #btn-act-model)
  const btn = document.getElementById("btn-act-model");
  if (btn) {
  btn.addEventListener("click", function () {
  if (panel.classList.contains("accordion-open")) {
    // Cerrar
    panel.classList.remove("accordion-open");

    // Esperamos al fin de la transición
    panel.addEventListener("transitionend", function handler(e) {
      if (!panel.classList.contains("accordion-open")) {
            panel.style.display = "none";
          }
          panel.removeEventListener("transitionend", handler);
        });
      } else {
        // Abrir
        panel.style.display = "block"; // lo volvemos a mostrar antes de la animación
        requestAnimationFrame(() => {
          panel.classList.add("accordion-open");
          const firstEditable = table.querySelector(".grid-input");
          if (firstEditable) firstEditable.focus();
        });
      }
    });



  }
});
</script>






<!-- INICIO js para flujo de input y focus de año campaña pagina y boton de actualiza mono: -->

<script>
/* ===== Datos inyectados desde Django =====
   En tu controller ya haces json.dumps(...).
   Acá los usamos directo con |safe para que sean JSON válidos.
*/
const ALL_ANOS_CAMPANAS = {{ all_anos_campanas|safe }};
const ANO_CAMP_PAIRS   = {{ ano_camp_pairs|safe }};

/* ===== Estructuras de validación ===== */
const anosCtrlMap = new Map();   // ano(string) -> maxcmp(number)
ALL_ANOS_CAMPANAS.forEach(({ano, maxcmp}) => {
  anosCtrlMap.set(String(ano), Number(maxcmp));
});

const anoCampSet = new Set();    // "ano-intcamp" para lookup rápido
ANO_CAMP_PAIRS.forEach(({ano, camp}) => {
  anoCampSet.add(`${Number(ano)}-${Number(camp)}`);
});

function notifyError(msg){
  if (typeof showToast === 'function') showToast(msg, 'danger');
  else alert(msg);
}

/**
 * Motor de flujo genérico para inputs/botones con validación y auto-avance.
 * Reglas por paso:
 *  - minEnterTab: mínimo de caracteres para poder salir hacia ADELANTE (Enter/Tab/→)
 *  - maxAuto: al alcanzar este largo y ser válido, avanza automáticamente
 *  - required: si true, no permite dejarlo vacío
 *  - pattern: regex para sanitizar (acá, dígitos)
 *  - type: "input" (default) o "button"
 *  - customValidateForward(value): validación extra para poder avanzar hacia adelante
 *
 * Navegación:
 *  - Enter / Tab         → adelante (Shift+Tab: atrás)
 *  - Flecha Derecha (→)  → adelante (si válido)
 *  - Flecha Izquierda (←)→ atrás (siempre permitido)
 */
const FLOW_STEPS = [
  {
    id: 'inputAno',
    minEnterTab: 4,
    maxAuto: 4,
    required: true,
    pattern: /^\d{0,4}$/,
    customValidateForward: (value) => {
      if (value.length < 4) return false;
      if (!anosCtrlMap.has(value)) {
        notifyError(`AÑO ${value} no es válido.`);
        return false;
      }
      return true;
    }
  },
  {
    id: 'inputCampania',
    minEnterTab: 1,     // con 1 dígito puede salir con Enter/Tab/→
    maxAuto: 2,         // si llega a 2 y es válido, auto-avanza
    required: true,
    pattern: /^\d{0,2}$/,
    customValidateForward: (value) => {
      const anoStr = document.getElementById('inputAno')?.value || '';
      if (!anosCtrlMap.has(anoStr)) {
        notifyError('Seleccione un AÑO válido antes de la CAMPAÑA.');
        return false;
      }
      if (value.length === 0) return false;

      const anoInt  = Number(anoStr);
      const campInt = Number(value);
      if (!Number.isInteger(anoInt) || !Number.isInteger(campInt)) return false;

      const key = `${anoInt}-${campInt}`;
      if (!anoCampSet.has(key)) {
        const maxcmp = anosCtrlMap.get(anoStr);
        notifyError(`La CAMPAÑA ${campInt} no existe para el AÑO ${anoInt}. (Máx. publicado: ${maxcmp})`);
        return false;
      }
      return true;
    }
  },
  {
    id: 'inputPagina',
    minEnterTab: 1,
    maxAuto: 3,
    required: true,
    pattern: /^\d{0,3}$/
  },
  { id: 'btn-act-model', type: 'button' }
];

/* ================== INFRA DE FLUJO ================== */
(function initFlowMotor(){
  whenDOMReady(setupFlow);

  function whenDOMReady(fn){
    if (document.readyState !== 'loading') fn();
    else document.addEventListener('DOMContentLoaded', fn);
  }

  function setupFlow(){
    // foco inicial
    const first = getFocusableTarget(FLOW_STEPS[0]?.id);
    if (first) first.focus();

    // enlazar cada paso
    FLOW_STEPS.forEach((step, idx) => {
      const el = document.getElementById(step.id);
      if (!el) return;

      if (step.type === 'button') {
        bindButton(el, idx);
      } else {
        bindInput(el, step, idx);
      }
    });
  }

  function bindButton(btn, idx){
    btn.addEventListener('keydown', (e) => {
      // ← / →
      if (e.key === 'ArrowRight') {
        e.preventDefault();
        focusNext(idx);
      } else if (e.key === 'ArrowLeft') {
        e.preventDefault();
        focusPrev(idx);
      } else if (e.key === 'Tab') {
        e.preventDefault();
        e.shiftKey ? focusPrev(idx) : focusNext(idx);
      }
      // Enter/Espacio: que haga click normalmente
    });
  }

  function bindInput(input, step, idx){
    input.setAttribute('autocomplete','off');

    // Sanitización + auto-avance si llega a max y es válido
    input.addEventListener('input', () => {
      sanitizeValue(input, step.pattern);
      if (typeof step.maxAuto === 'number' && input.value.length >= step.maxAuto) {
        if (canLeaveForward(input.value, step)) {
          focusNext(idx);
        }
      }
    });

    input.addEventListener('keydown', (e) => {
      // Enter / Tab: adelante (o atrás con Shift)
      if (e.key === 'Enter' || e.key === 'Tab') {
        const forward = !e.shiftKey;
        if (forward) {
          if (canLeaveForward(input.value, step)) {
            e.preventDefault();
            focusNext(idx);
          } else {
            e.preventDefault();
          }
        } else {
          e.preventDefault();
          focusPrev(idx);
        }
        return;
      }

      // Flechas: siempre cambian de campo
      if (e.key === 'ArrowRight') {
        if (canLeaveForward(input.value, step)) {
          e.preventDefault();
          focusNext(idx);
        } else {
          e.preventDefault();
        }
        return;
      }
      if (e.key === 'ArrowLeft') {
        e.preventDefault();
        focusPrev(idx);
        return;
      }
    });

    // Evitar perder foco hacia ADELANTE si no cumple;
    // permitir ir ATRÁS (mouse o teclado).
    input.addEventListener('blur', () => {
      setTimeout(() => {
        if (input.dataset.__advancing === '1') return; // blur programático

        const active = document.activeElement;
        const activeIdx = getStepIndexByElement(active);
        const thisIdx   = idx;
        const goingBack = (activeIdx > -1 && activeIdx < thisIdx);

        if (goingBack) return; // permitir ir atrás

        if (!canLeaveForward(input.value, step)) {
          input.focus();
        }
      }, 0);
    });
  }

  /* ===== utilidades de foco/validación ===== */
  function getStepIndexById(id){
    return FLOW_STEPS.findIndex(s => s.id === id);
  }

  function getStepIndexByElement(el){
    if (!el) return -1;
    let id = el.id;
    if (!id) {
      const anc = el.closest('[id]');
      if (anc) id = anc.id;
    }
    return getStepIndexById(id);
  }

  function getFocusableTarget(stepId){
    let el = document.getElementById(stepId);
    if (!el) return null;
    if (el.tagName === 'LABEL' || typeof el.focus !== 'function' || el.tabIndex === -1) {
      const sub = el.querySelector('input,button,select,textarea,[tabindex]:not([tabindex="-1"])');
      if (sub) el = sub;
    }
    return el;
  }

  function sanitizeValue(input, pattern){
    if (!pattern) return;
    const prev = input.value;
    // Para estos campos: números únicamente
    let filtered = prev.replace(/[^\d]/g, '');
    if (!pattern.test(filtered)) {
      while (filtered.length && !pattern.test(filtered)) {
        filtered = filtered.slice(0, -1);
      }
    }
    if (filtered !== prev) {
      const pos = input.selectionStart ?? filtered.length;
      input.value = filtered;
      const newPos = Math.min(filtered.length, pos - (prev.length - filtered.length));
      try { input.setSelectionRange(newPos, newPos); } catch(e){}
    }
  }

  function canLeaveForward(value, step){
    if (step.required && value.length === 0) return false;

    // mínimo de caracteres para avanzar
    if (typeof step.minEnterTab === 'number' && value.length < step.minEnterTab) {
      return false;
    }

    // validación custom (AÑO / CAMPAÑA)
    if (typeof step.customValidateForward === 'function') {
      try {
        return !!step.customValidateForward(value);
      } catch(e) {
        console.warn('customValidateForward error:', e);
        return false;
      }
    }
    return true;
  }

  function focusTo(idx){
    const step = FLOW_STEPS[idx];
    if (!step) return;
    const el = getFocusableTarget(step.id);
    if (!el) return;

    // marcar avance programático para que blur no recapture
    document.querySelectorAll('input,select,textarea,button').forEach(n => {
      if (n.dataset) n.dataset.__advancing = '1';
    });

    setTimeout(() => {
      el.focus();
      if (step.type !== 'button' && el.setSelectionRange) {
        const len = el.value?.length ?? 0;
        el.setSelectionRange(len, len); // cursor al final
      }
      // limpiar flags
      setTimeout(() => {
        document.querySelectorAll('input,select,textarea,button').forEach(n => {
          try { delete n.dataset.__advancing; } catch(e){}
        });
      }, 50);
    }, 0);
  }

  function focusNext(currentIdx){ focusTo(currentIdx + 1); }
  function focusPrev(currentIdx){ if (currentIdx > 0) focusTo(currentIdx - 1); }
})();
</script>


<!-- FIN js para flujo de input y focus de año campaña pagina y boton de actualiza mono: -->



{% endblock %}