{% 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>
          /* 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
 {
  font-size: 0.875rem !important;
  border: 1px solid #ccc !important;
  border-radius: 5px !important;
  border-color: rgb(113, 112, 112)!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);
}
input::-webkit-calendar-picker-indicator {
  display: none !important;
  -webkit-appearance: none;
}

  </style>
  
<div class="main-content">

  <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 PT</h5>
        </div>

        <div class="box-body space-y-3">

          <div class="grid grid-cols-12 gap-4 ">




            <div class="col-span-12 grid grid-cols-12 gap-4">


              <label class="col-span-1 text-sm ">Código</label>
              <input type="text" id="codeFox" maxlength="5"
                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" />



              <label class="col-span-1 text-sm self-center ">Empresa</label>
              <input class="col-span-12 sm:col-span-2 w-12 h-7 px-2 py-1 border rounded text-center text-sm" list="datalist-empresas"
                id="codEmpFox" disabled/>
                <datalist id="datalist-empresas"></datalist>
              <div class="col-span-12 sm:col-span-3 md:col-span-2 w-24 h-7 px-2 py-1 border rounded text-center text-sm"
                id="empFox"></div>

              <label class="col-span-1 text-sm self-center">M.Emp(mk)</label>
              <div class="col-span-12 sm:col-span-2 w-16 h-7 px-2 py-1 border rounded text-center text-sm"
                id="codMKEmpFox" disabled></div>

            </div>


            <div class="col-span-12 grid grid-cols-12 gap-2">

              <div class="col-span-12 sm:col-span-6 flex gap-2">
                <label class="text-sm w-24 flex-shrink-0 self-center">Descrip</label>
                <input type="text" id="descripFox" disabled class="flex-1 appearance-none border px-2 py-0 sm:py-1 h-auto rounded w-8 text-sm bg-[#ece7e7] leading-none"/>
              </div>


              <div class="col-span-12 sm:col-span-6 flex gap-2">
                <label class="text-sm w-24 flex-shrink-0 self-center">Desc 2</label>
                <input type="text" id="descripFox2" disabled class="flex-1 appearance-none border px-2 py-0 sm:py-1 h-auto rounded w-8 text-sm bg-[#ece7e7] leading-none"/>
              </div>

              <div class="col-span-12 grid grid-cols-12 gap-2">


                <div
                  class="col-span-12 sm:col-span-6 md:col-span-6 lg:col-span-6 xl:col-span-6 2xl:col-span-6 flex gap-2">
                  <label class="text-sm w-28 self-center">División</label>

                  <input class="border px-1 py-0 sm:py-1 h-auto rounded w-12 text-sm leading-none" id="coddivisionFox"
                    name="coddivisionFox" disabled list="datalist-division" />

                  <div class="flex-1 border px-2 py-1 rounded text-sm bg-[#f3f4f6]"
                    style="font-size: 0.875rem !important" id="divisionFox"></div>
                </div>
                <datalist id="datalist-division">
                  {% for division in id_division_abrev %}
                  <option value="{{ division.clave }}" data-leyenda="{{ division.leyenda }}">{{ division.clave }} -
                    {{ division.leyenda }}</option>
                  {% endfor %}
                </datalist>
                <div
                  class="col-span-12 sm:col-span-6 md:col-span-6 lg:col-span-6 xl:col-span-6 2xl:col-span-6 flex gap-2">
                  <label class="text-sm w-28 self-center">Sub_D</label>
                   <input class="border px-1 py-0 sm:py-1 h-auto rounded w-12 text-sm leading-none" disabled id="codsubDFox" list="datalist-subdivi">  
                  <div class="flex-1 border px-2 py-1 rounded" id="subdFox"></div>
                </div>
                <datalist id="datalist-subdivi"></datalist>

                <div
                  class="col-span-12 sm:col-span-6 md:col-span-6 lg:col-span-6 xl:col-span-6 2xl:col-span-6 flex gap-2">
                  <label class="text-sm w-28 self-center">Categoría</label>

                  <input class="border px-1 py-0 sm:py-1 h-auto rounded w-12 text-sm leading-none" id="codcategoriaFox"
                    name="codcategoriaFox" list="datalist-categoria" />

                  <div class="flex-1 border px-2 py-1 rounded text-sm bg-[#f3f4f6]"
                    style="font-size: 0.875rem !important" id="categoriaFox"></div>
                </div>

                <datalist id="datalist-categoria">
              
                </datalist>


                <div
                  class="col-span-12 sm:col-span-6 md:col-span-6 lg:col-span-6 xl:col-span-6 2xl:col-span-6 flex gap-2">
                  <label class="text-sm w-28 self-center">Sublínea</label>
                  <input class="border px-1 py-0 sm:py-1 h-auto rounded w-12 text-sm leading-none" disabled id="codsublineaFox" list="datalist-sublinea">
                  <div class="flex-1 border px-2 py-1 rounded" id="sublineaFox"></div>
                </div>

                <datalist id="datalist-sublinea"></datalist>

                <div
                  class="col-span-12 sm:col-span-6 md:col-span-6 lg:col-span-6 xl:col-span-6 2xl:col-span-6 flex gap-2">
                  <label class="text-sm w-28 self-center">T. Subl</label>
                  <input class="border px-1 py-0 sm:py-1 h-auto rounded w-12 text-sm leading-none" disabled id="codtsublFox"list="datalist-tipo-subl" >
                  <datalist id="datalist-tipo-subl"></datalist>
                  <div class="flex-1 border px-2 py-1 rounded" id="tsublFox"></div>
                </div>
                <div
                  class="col-span-12 sm:col-span-6 md:col-span-6 lg:col-span-6 xl:col-span-6 2xl:col-span-6 flex gap-2">
                  <label class="text-sm w-28 self-center">Caract</label>
                  <input class="border px-1 py-0 sm:py-1 h-auto rounded w-12 text-sm leading-none" disabled id="codcaractFox" list="datalist-caract">
                  <div class="flex-1 border px-2 py-1 rounded" id="caractFox"></div>
                  <datalist id="datalist-caract"></datalist>
                </div>


                <div
                  class="col-span-12 sm:col-span-6 md:col-span-6 lg:col-span-6 xl:col-span-6 2xl:col-span-6 flex gap-2">
                  <label class="text-sm w-28 self-center">Segmto</label>
                  <input class="border px-1 py-0 sm:py-1 h-auto rounded w-12 text-sm leading-none" disabled id="codsegmentoFox" list="datalist-segmto">
                  <div class="flex-1 border px-2 py-1 rounded" id="segmentoFox"></div>
                   <datalist id="datalist-segmto"></datalist>
                </div>
                <div
                  class="col-span-12 sm:col-span-6 md:col-span-6 lg:col-span-6 xl:col-span-6 2xl:col-span-6 flex gap-2">
                  <label class="text-sm w-28 self-center">Concpto</label>
                  <input class="border px-1 py-0 sm:py-1 h-auto rounded w-12 text-sm leading-none" disabled id="codconceptoFox" list="datalist-concept">
                  <div class="flex-1 border px-2 py-1 rounded" id="conceptoFox"></div>
                  <datalist id="datalist-concept"></datalist>
                </div>


                <div
                  class="col-span-12 sm:col-span-6 md:col-span-6 lg:col-span-6 xl:col-span-6 2xl:col-span-6 flex gap-2">
                  <label class="text-sm w-28 self-center">Packaging</label>
                    <input class="border px-1 py-0 sm:py-1 h-auto rounded w-12 text-sm leading-none" disabled id="codpackagingFox">
                  <div class="flex-1 border px-2 py-1 rounded" id="packagingFox"></div>
                </div>
                <div
                  class="col-span-12 sm:col-span-6 md:col-span-6 lg:col-span-6 xl:col-span-6 2xl:col-span-6 flex gap-2">
                  <label class="text-sm w-28 self-center">Env. 2do</label>
                  <input class="border px-1 py-0 sm:py-1 h-auto rounded w-12 text-sm leading-none" disabled id="codenv2Fox">
                  <div class="flex-1 border px-2 py-1 rounded" id="env2Fox"></div>
                </div>


                <div
                  class="col-span-12 sm:col-span-6 md:col-span-6 lg:col-span-6 xl:col-span-6 2xl:col-span-6 flex gap-2">
                  <label class="text-sm w-28 self-center">Elaborac</label>
                  <input class="border px-1 py-0 sm:py-1 h-auto rounded w-12 text-sm leading-none" disabled id="codelaboracFox">
                  <div class="flex-1 border px-2 py-1 rounded" id="elaboracFox"></div>
                </div>
                <div
                  class="col-span-12 sm:col-span-6 md:col-span-6 lg:col-span-6 xl:col-span-6 2xl:col-span-6 flex gap-2">
                  <label class="text-sm w-28 self-center">Fabric</label>
                   <input class="border px-1 py-0 sm:py-1 h-auto rounded w-12 text-sm leading-none" disabled id="codfabricFox">
                  <div class="flex-1 border px-2 py-1 rounded" id="fabricFox"></div>
                </div>
              </div>

              <div class="col-span-12 grid grid-cols-12 gap-2">

                <label class="col-span-12 sm:col-span-2 md:col-span-1 text-sm self-center">Colección</label>
                <input type="text" class="col-span-12 sm:col-span-2 md:col-span-1 border px-2 py-0 sm:py-1 h-auto rounded text-sm leading-none" disabled id="codcolencFox">

                
                <div class="col-span-12 sm:col-span-2 md:col-span-2 border px-2 py-2 sm:py-1 rounded" disabled id="colencFox">
                </div>

                <label class="col-span-12 sm:col-span-2 md:col-span-1 text-sm self-center">Talle/Tam</label>
                <input type="text" class="col-span-12 sm:col-span-2 md:col-span-2 border px-2 py-0 sm:py-1 h-auto rounded text-sm leading-none" disabled id="codtalleFox">


                <label class="col-span-12 sm:col-span-2 md:col-span-1 text-sm self-center">ID. Esp</label>
                <input type="text" class="col-span-12 sm:col-span-2 md:col-span-1 border px-2 py-0 sm:py-1 h-auto rounded text-sm leading-none" disabled id="codidespFox">
                <div class="col-span-12 sm:col-span-2 md:col-span-2 border px-2 py-2 sm:py-1 rounded" id="idespFox">
                </div>

              </div>

              <div class="col-span-12 grid grid-cols-12 gap-2">

                <label class="col-span-12 sm:col-span-2 md:col-span-1 text-sm self-center">Cond. Com</label>
                <input type="text" class="col-span-12 sm:col-span-2 md:col-span-1 border px-2 py-0 sm:py-1 h-auto rounded text-sm leading-none" disabled id="codcondcomFox">
                <div class="col-span-12 sm:col-span-2 md:col-span-2 border px-2 py-2 sm:py-1 rounded text-sm"
                  id="condcomFox"></div>


                <label class="col-span-12 sm:col-span-2 md:col-span-1 text-sm self-center">Cuotas</label>
                <input type="text" class="col-span-12 sm:col-span-2 md:col-span-2 border px-2 py-0 sm:py-1 h-auto rounded text-sm leading-none" disabled id="codcuotasFox">


                <label class="col-span-12 sm:col-span-2 md:col-span-1 text-sm self-center">Mat/Tela</label>
                <input type="text" class="col-span-12 sm:col-span-2 md:col-span-2 border px-2 py-0 sm:py-1 h-auto rounded text-sm leading-none" disabled id="codmatFox">
                <div class="col-span-12 sm:col-span-2 md:col-span-2 border px-2 py-2 sm:py-1 rounded text-sm"
                  id="descripMatFox"></div>

              </div>

              <div class="col-span-12 sm:col-span-6 grid grid-cols-6 gap-2">
                <label class="col-span-6 sm:col-span-1 text-sm text-right self-center">Color</label>
                <input type="text" class="col-span-6 sm:col-span-1 border px-2 py-0 sm:py-1 h-auto rounded text-sm leading-none" disabled id="codcolorFox">
                <div class="col-span-6 sm:col-span-4 border px-2 py-2 sm:py-1 rounded text-sm" id="colorFox"></div>
              </div>

              <div class="col-span-12 sm:col-span-6 grid grid-cols-6 gap-2">
                <label for="lineaId" class="col-span-6 sm:col-span-1 text-sm text-right self-center">Línea</label>
                <input type="text" class="col-span-6 sm:col-span-1 border px-2 py-0 sm:py-1 h-auto rounded text-sm leading-none" disabled id="codlineaFox">
                <div class="col-span-6 sm:col-span-4 border px-2 py-2 sm:py-1 rounded text-sm" id="lineaFox"></div>
              </div>


              <div class="col-span-12 grid grid-cols-12 gap-2">

                <!-- AP -->
                <label class="col-span-12 sm:col-span-2 md:col-span-1 text-sm self-center">ap</label>
                <input type="text" class="col-span-12 sm:col-span-2 md:col-span-1 border px-2 py-0 sm:py-1 h-auto rounded text-sm leading-none" disabled id="codapFox">


                <label class="col-span-12 sm:col-span-2 md:col-span-1 text-sm self-center">cab</label>
                <div class="col-span-12 sm:col-span-2 md:col-span-2 border px-2 py-2 sm:py-1 rounded text-sm"
                  id="codcabFox"></div>
                <div class="col-span-12 sm:col-span-2 md:col-span-2 border px-2 py-2 sm:py-1 rounded text-sm"
                  id="cabFox"></div>


                <label class="col-span-12 sm:col-span-2 md:col-span-1 text-sm self-center">Prov</label>
                <input type="text" class="col-span-12 sm:col-span-2 md:col-span-1 border px-2 py-0 sm:py-1 h-auto rounded text-sm leading-none" id="codprovFox">
                <div class="col-span-12 sm:col-span-2 md:col-span-2 border px-2 py-2 sm:py-1 rounded text-sm"
                  id="provFox"></div>

              </div>

              <div class="col-span-12 grid grid-cols-12 gap-2">
                <label class="col-span-12 sm:col-span-2 md:col-span-1 text-sm text-right self-center">Sexo</label>
                <input type="text" class="col-span-12 sm:col-span-2 md:col-span-1 border px-2 py-0 sm:py-1 h-auto rounded text-sm leading-none" id="codsexoFox">
                <div class="col-span-12 sm:col-span-8 md:col-span-4 border px-2 py-2 sm:py-1 rounded text-sm"
                  id="sexoFox"></div>

                <label class="col-span-12 sm:col-span-2 md:col-span-1 text-sm text-right self-center">Target</label>
                <input type="text" class="col-span-12 sm:col-span-2 md:col-span-1 border px-2 py-0 sm:py-1 h-auto rounded text-sm leading-none" id="codtargetFox">
                <div class="col-span-12 sm:col-span-8 md:col-span-4 border px-2 py-2 sm:py-1 rounded text-sm"
                  id="targetFox"></div>

              </div>

              <div class="col-span-12 grid grid-cols-12 gap-2">
                <label class="col-span-12 sm:col-span-2 md:col-span-1 text-sm text-right self-center">Punto Prec</label>
                <input type="text" class="col-span-12 sm:col-span-2 md:col-span-1 border px-2 py-0 sm:py-1 h-auto rounded text-sm leading-none" disabled id="codpuntoprecFox">
                <div class="col-span-12 sm:col-span-8 md:col-span-4 border px-2 py-2 sm:py-1 rounded text-sm"
                  id="puntoprecFox"></div>

                <label class="col-span-1 text-sm text-right self-center">Procd</label>
               <input type="text" class="col-span-12 sm:col-span-2 md:col-span-1 border px-2 py-0 sm:py-1 h-auto rounded text-sm leading-none"  disabled id="codprocdFox">
                <div class="col-span-12 sm:col-span-8 md:col-span-4 border px-2 py-2 sm:py-1 rounded text-sm"
                  id="procdFox"></div>
              </div>

              <div class="col-span-12 grid grid-cols-12 gap-2">


                <label class="col-span-12 sm:col-span-2 md:col-span-1 text-sm text-right self-center">Origen</label>
                <input type="text" class="col-span-12 sm:col-span-2 md:col-span-1 border px-2 py-0 sm:py-1 h-auto rounded text-sm leading-none" disabled id="codorigenFox">
                <div class="col-span-12 sm:col-span-8 md:col-span-3 border px-2 py-2 sm:py-1 rounded text-sm"
                  id="origenFox"></div>


                <label class="col-span-12 sm:col-span-2 md:col-span-1 text-sm text-right self-center">Forma Pt</label>
                <input type="text" class="col-span-12 sm:col-span-2 md:col-span-1 border px-2 py-0 sm:py-1 h-auto rounded text-sm text-center leading-none" disabled id="codformaptFox">
                <div class="col-span-12 sm:col-span-8 md:col-span-3 border px-2 py-2 sm:py-1 rounded text-sm"
                  id="formaptFox"></div>


                <label class="col-span-12 sm:col-span-2 md:col-span-1 text-sm text-right self-center">Bolsa/Est</label>
                <div class="col-span-12 sm:col-span-10 md:col-span-1 border px-2 py-2 sm:py-1 rounded text-sm" 
                  id="bolsaestFox"></div>

              </div>

              <div class="col-span-12 grid grid-cols-12 gap-2">

                <label class="col-span-12 sm:col-span-2 md:col-span-1 text-sm text-right self-center">Peso(g)</label>
                <input type="text" class="col-span-12 sm:col-span-2 md:col-span-1 border px-2 py-0 sm:py-1 h-auto rounded text-sm text-center leading-none" disabled id="pesoFox">


                <label class="col-span-12 sm:col-span-2 md:col-span-1 text-sm text-right self-center">Alto(cm)</label>
                <input type="text" class="col-span-12 sm:col-span-2 md:col-span-1 border px-2 py-0 sm:py-1 h-auto rounded text-sm text-center leading-none" disabled id="altoFox">


                <label class="col-span-12 sm:col-span-2 md:col-span-1 text-sm text-right self-center">Largo(cm)</label>
                <input type="text" class="col-span-12 sm:col-span-2 md:col-span-1 border px-2 py-0 sm:py-1 h-auto rounded text-sm text-center leading-none" disabled id="largoFox">


                <label class="col-span-12 sm:col-span-2 md:col-span-1 text-sm text-right self-center">Ancho(cm)</label>
                <input type="text" class="col-span-12 sm:col-span-2 md:col-span-1 border px-2 py-0 sm:py-1 h-auto rounded text-sm text-center leading-none" disabled id="anchoFox">

                <label class="col-span-12 sm:col-span-2 md:col-span-1 text-sm text-right self-center">Volumen</label>
                <div class="col-span-12 sm:col-span-2 md:col-span-1 border px-2 py-2 sm:py-1 rounded text-sm text-center" id="volumenFox"></div>

              </div>


              <div class="col-span-12 grid grid-cols-12 gap-2">


                <label
                  class="col-span-12 sm:col-span-2 md:col-span-1 text-sm text-right whitespace-nowrap self-center">Camp.
                  Lanz</label>
                <input type="text" class="col-span-12 sm:col-span-2 md:col-span-2 px-2 py-0 sm:py-1 h-auto border rounded text-sm text-center leading-none" disabled id="camplanzFox">


                <label
                  class="col-span-12 sm:col-span-2 md:col-span-1 text-sm text-right whitespace-nowrap self-center">Camp.
                  Baja.</label>
                <input type="text" class="col-span-12 sm:col-span-2 md:col-span-2 px-2 py-0 sm:py-1 h-auto border rounded text-sm text-center leading-none" disabled id="campbajaFox">


                <label
                  class="col-span-12 sm:col-span-2 md:col-span-1 text-sm text-right whitespace-nowrap self-center">Marca
                  Comb</label>
                <input type="text" class="col-span-12 sm:col-span-2 md:col-span-2 px-2 py-0 sm:py-1 h-auto border rounded text-sm text-center leading-none" disabled id="marcacombFox">


                <label
                  class="col-span-12 sm:col-span-2 md:col-span-1 text-sm text-right whitespace-nowrap self-center">Marca
                  C.Doble</label>
                <input type="text" class="col-span-12 sm:col-span-2 md:col-span-2 px-2 py-0 sm:py-1 h-auto border rounded text-sm text-center leading-none" disabled id="marcadobleFox">

              </div>


              <div class="col-span-12 grid grid-cols-12 gap-2">

                <label class="col-span-12 sm:col-span-2 md:col-span-1 text-sm text-right self-center">Consig.</label>
                <input type="text" class="col-span-12 sm:col-span-2 md:col-span-1 border px-2 py-0 sm:py-1 h-auto rounded text-sm text-center leading-none" disabled id="consigFox">


                <label class="col-span-12 sm:col-span-2 md:col-span-1 text-sm text-right self-center">Estado</label>
                <input type="text" class="col-span-12 sm:col-span-6 md:col-span-2 border px-2 py-0 sm:py-1 h-auto rounded text-sm text-center leading-none" disabled id="estadoFox">


                <label class="col-span-12 sm:col-span-2 md:col-span-1 text-sm text-right self-center">Canal</label>
                <input type="text" class="col-span-12 sm:col-span-2 md:col-span-1 border px-2 py-0 sm:py-1 h-auto rounded text-sm text-center leading-none" id="codcanalFox">
                <div class="col-span-12 sm:col-span-6 md:col-span-2 border px-2 py-2 sm:py-1 rounded text-sm"
                  id="canalFox"></div>


                <div
                  class="col-span-12 sm:col-span-6 md:col-span-2 border px-2 py-2 sm:py-1 rounded text-sm text-center"
                  id="fechaAltaFox"></div>

              </div>

              <div class="col-span-12 grid grid-cols-1 sm:grid-cols-3 gap-4 ">


                <div class="flex justify-start">
                  <button id="savebtn" type="submit" class="ti-btn bg-primary text-white w-full sm:w-auto py-2">
                    Graba
                  </button>
                </div>


                <div class="flex justify-center">
                  <button id="deletebtn" type="submit" class="ti-btn bg-primary text-white w-full sm:w-auto py-2">
                    Elimina
                  </button>
                </div>

                <div class="flex justify-end">
                  <button id="saveendsizebtn" type="submit" class="ti-btn bg-primary text-white w-full sm:w-auto py-2">
                    GRABA Y FIN TALLE
                  </button>
                </div>

              </div>

              

            </div>
            
          </div>

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


<!-- <div class="col-span-12 sm:col-span-6 md:col-span-6 lg:col-span-6 xl:col-span-6 2xl:col-span-6 flex gap-2">

  <label class="text-sm w-28 self-center">División (prueba)</label>

  

  <select id="selectDivisionPrueba"
    class="form-select js-example-basic-single border px-1 py-0 sm:py-1 h-auto rounded w-24 text-sm leading-none">
    <option value="">Seleccione división</option>
    {% for division in id_division %}
      <option value="{{ division.clave }}">{{ division.clave }} - {{ division.leyenda }}</option>
    {% endfor %}
  </select>

  <div id="leyendaDivisionPrueba"
    class="flex-1 border px-2 py-1 rounded text-sm bg-[#f3f4f6] min-h-[30px] flex items-center">

  </div>
</div> -->




<!--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" id="confirm-cancel-btn" 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>

<script>
document.addEventListener("DOMContentLoaded", function () {

  // ------------------------------
  // Helper: Actualiza leyenda desde <datalist>
  function actualizarLeyenda(inputEl, leyendaEl, datalistId) {
    const valor = inputEl.value.trim();
    const opciones = document.querySelectorAll(`#${datalistId} option`);
    let leyenda = "";

    if (valor === "0") {
      leyendaEl.textContent = "";
      return;
    }

    opciones.forEach(opt => {
      if (opt.value === valor) {
        const ley = opt.getAttribute("data-leyenda");
        leyenda = ley !== "null" ? ley : "";
      }
    });

    leyendaEl.textContent = leyenda;
  }

  // ------------------------------
  // Helper: Carga un datalist con datos remotos
  function cargarDatalist({ url, datalistId, inputEl, leyendaEl }) {
    fetch(url)
      .then(res => res.json())
      .then(json => {
        const opciones = json.data || [];
        const datalist = document.getElementById(datalistId);

        datalist.innerHTML = "";
        inputEl.value = "";
        leyendaEl.textContent = "";

        opciones.forEach(op => {
          if (parseInt(op.clave) === 0) return;  // Ocultar opción 0

          const leyenda = op.leyenda || "";
          const optEl = document.createElement("option");
          optEl.value = op.clave;
          optEl.setAttribute("data-leyenda", leyenda);
          optEl.textContent = `${op.clave} - ${leyenda}`;
          datalist.appendChild(optEl);
        });
      });
  }

  // ------------------------------
  // Verifica si el valor ingresado está en el datalist
  function valorEnDatalist(inputEl) {
    const datalistId = inputEl.getAttribute("list");
    if (!datalistId) return true;

    const valor = inputEl.value.trim();
    const opciones = document.querySelectorAll(`#${datalistId} option`);
    const opcionesArray = Array.from(opciones);

    if (opcionesArray.length === 0) return valor === "0";

    return opcionesArray.some(opt => opt.value === valor);
  }

  // ------------------------------
  // Habilita avanzar con Enter solo si valor válido
  function permitirSaltoConEnter(inputEl) {
    inputEl.addEventListener("keydown", function (e) {
      if (e.key === "Enter") {
        const valido = valorEnDatalist(inputEl);
        if (!valido) {
          e.preventDefault();
          showToast("Campo obligatorio o valor inválido", "danger");
          return;
        }

        e.preventDefault();
        const formElements = Array.from(document.querySelectorAll("input, select, textarea"))
          .filter(el => !el.disabled && el.offsetParent !== null);
        const idx = formElements.indexOf(inputEl);
        if (idx > -1 && idx < formElements.length - 1) {
          formElements[idx + 1].focus();
        }
      }
    });
  }

  // ------------------------------
  // Variables de los campos

  const inputEmpresa = document.getElementById("codEmpFox");
  const leyendaEmpresa = document.getElementById("empFox");

  const inputDivision = document.getElementById("coddivisionFox");
  const leyendaDivision = document.getElementById("divisionFox");

  const inputCategoria = document.getElementById("codcategoriaFox");
  const leyendaCategoria = document.getElementById("categoriaFox");

  const inputSubdivi = document.getElementById("codsubDFox");
  const leyendaSubdivi = document.getElementById("subdFox");

  const inputSublinea = document.getElementById("codsublineaFox");
  const leyendaSublinea = document.getElementById("sublineaFox");

  const inputTipoSubl = document.getElementById("codtsublFox");
  const leyendaTipoSubl = document.getElementById("tsublFox");

  const inputCaract = document.getElementById("codcaractFox");
  const leyendaCaract = document.getElementById("caractFox");

  const inputSegmento = document.getElementById("codsegmentoFox");
  const leyendaSegmento = document.getElementById("segmentoFox");
  
  const inputConcepto = document.getElementById("codconceptoFox");
  const leyendaConcepto = document.getElementById("conceptoFox");
  // ------------------------------
  // Aplica salto con enter
  document.querySelectorAll("input").forEach(permitirSaltoConEnter);

  // ------------------------------
  
  // Empresas

  cargarDatalist({
  url: "/get_empresas/",
  datalistId: "datalist-empresas",
  inputEl: inputEmpresa,
  leyendaEl: leyendaEmpresa
  });

  inputEmpresa.addEventListener("input", function () {
  actualizarLeyenda(inputEmpresa, leyendaEmpresa, "datalist-empresas");
  });
  
  // División
  inputDivision.addEventListener("input", function () {
    const divisionID = inputDivision.value.trim();
    const subdivID = inputSubdivi.value.trim();
    if (!divisionID) return;

    actualizarLeyenda(inputDivision, leyendaDivision, "datalist-division");

    // Limpiar subdivisión y categoría
    inputSubdivi.value = "";
    leyendaSubdivi.textContent = "";

    inputCategoria.value = "";
    leyendaCategoria.textContent = "";

    inputConcepto.value = "";
    leyendaConcepto.textContent = "";

    


    cargarDatalist({
      url: `/get_subdivisiones/?division_id=${divisionID}`,
      datalistId: "datalist-subdivi",
      inputEl: inputSubdivi,
      leyendaEl: leyendaSubdivi
    });

    cargarDatalist({
      url: `/get_categorias/?division_id=${divisionID}&subdiv_id=${subdivID}`,
      datalistId: "datalist-categoria",
      inputEl: inputCategoria,
      leyendaEl: leyendaCategoria
    });

    cargarDatalist({
    url: `/get_concepto/?division_id=${divisionID}`,
    datalistId: "datalist-concept",
    inputEl: inputConcepto,
    leyendaEl: leyendaConcepto
  });

  
  });

  // Categoría
  inputCategoria.addEventListener("input", function () {
    actualizarLeyenda(inputCategoria, leyendaCategoria, "datalist-categoria");

    const categoriaID = inputCategoria.value.trim();
    if (!categoriaID) return;

    cargarDatalist({
      url: `/get_sublineas/?categoria_id=${categoriaID}`,
      datalistId: "datalist-sublinea",
      inputEl: inputSublinea,
      leyendaEl: leyendaSublinea
    });
  });

  // Subdivisión
  inputSubdivi.addEventListener("input", function () {
    actualizarLeyenda(inputSubdivi, leyendaSubdivi, "datalist-subdivi");
  });

  // Sublínea
  inputSublinea.addEventListener("input", function () {
    actualizarLeyenda(inputSublinea, leyendaSublinea, "datalist-sublinea");

    const categoriaID = inputCategoria.value.trim();
    const sublineaID = inputSublinea.value.trim();
    const divisionID = inputDivision.value.trim(); // <--- Agregamos esta línea

    if (!categoriaID || !sublineaID || !divisionID) return; // <--- Verificamos todos

    cargarDatalist({
      url: `/get_tipo_subl/?division_id=${divisionID}&categoria_id=${categoriaID}&sublinea_id=${sublineaID}`, // <--- Enviamos division_id
      datalistId: "datalist-tipo-subl",
      inputEl: inputTipoSubl,
      leyendaEl: leyendaTipoSubl
    });

    if (divisionID && categoriaID && sublineaID) {
      inputCaract.value = "";
      leyendaCaract.textContent = "";

      cargarDatalist({
        url: `/get_caract/?division_id=${divisionID}&categoria_id=${categoriaID}&sublinea_id=${sublineaID}`,
        datalistId: "datalist-caract",
        inputEl: inputCaract,
        leyendaEl: leyendaCaract
      });
    }
    
    if (divisionID && categoriaID) {
      inputSegmento.value = "";
      leyendaSegmento.textContent = "";

      cargarDatalist({
        url: `/get_segmento/?division_id=${divisionID}&categoria_id=${categoriaID}`,
        datalistId: "datalist-segmto",
        inputEl: inputSegmento,
        leyendaEl: leyendaSegmento
      });
    }
  });

  // Tipo Sublínea input
  inputTipoSubl.addEventListener("input", function () {
    actualizarLeyenda(inputTipoSubl, leyendaTipoSubl, "datalist-tipo-subl");
  });

  // Característica
  inputCaract.addEventListener("input", function () {
    actualizarLeyenda(inputCaract, leyendaCaract, "datalist-caract");
});

  inputConcepto.addEventListener("input", function () {
    actualizarLeyenda(inputConcepto, leyendaConcepto, "datalist-concept");
  });

});
</script>

  
<script>
  let codigoIngresado = null;

  document.addEventListener("DOMContentLoaded", function () {
    const input = document.getElementById("codeFox");

    function callGetFoxProduct(code) {
      document.getElementById('spinnerOverlay').style.display = 'block';

      fetch(`/getfoxproduct/${encodeURIComponent(code)}/`)
        .then(response => {
          if (!response.ok) throw new Error("Error al obtener producto");
          return response.json();
        })
        .then(data => {
          document.getElementById('spinnerOverlay').style.display = 'none';

          if (data.success) {
            document.querySelectorAll("input, select, textarea").forEach(el => {
              el.removeAttribute("disabled");
            });

            switch (data.status_code) {
              case 200:
                codigoIngresado = code;
                const p = data.productconsult;
                    // Llenar los inputs  // cambiar por ?? "" para mostrar "0"
                  document.getElementById("codEmpFox").value = data.productconsult.codempresa ?? "";
                  document.getElementById("empFox").textContent = data.productconsult.empresa_leyenda ?? "";
                  document.getElementById("descripFox").value = data.productconsult.descrip ?? "";
                  document.getElementById("descripFox2").value = data.productconsult.descrip_2 ?? "";
                  document.getElementById("coddivisionFox").value = data.productconsult.coddivision ?? "";
                  document.getElementById("divisionFox").textContent = data.productconsult.division_leyenda ?? "";
                  document.getElementById("codsubDFox").value = data.productconsult.codsub_divi ?? "";
                  document.getElementById("subdFox").textContent = data.productconsult.subdivi_leyenda ?? "";
                  
                  document.getElementById("codcategoriaFox").value = data.productconsult.codcategoria ?? "";
                  document.getElementById("categoriaFox").textContent = data.productconsult.categoria_leyenda ?? "";
                  document.getElementById("codsublineaFox").value = data.productconsult.codsub_linea ?? "";                
                  document.getElementById("sublineaFox").textContent = data.productconsult.sublinea_leyenda ?? ""; 
                  document.getElementById("codtsublFox").value = data.productconsult.codtipo_subl ?? "";
                  document.getElementById("tsublFox").textContent = data.productconsult.tiposubl_leyenda ?? "";
                  document.getElementById("codcaractFox").value = data.productconsult.codcaracteris ?? "";
                  document.getElementById("caractFox").textContent = data.productconsult.caracteris_leyenda ?? "";  
                  document.getElementById("codsegmentoFox").value = data.productconsult.codsegmento ?? "";
                  document.getElementById("segmentoFox").textContent = data.productconsult.segmento_leyenda ?? "";  
                  document.getElementById("codconceptoFox").value = data.productconsult.codconcepto ?? "";
                  document.getElementById("conceptoFox").textContent = data.productconsult.concepto_leyenda ?? ""; 
                  document.getElementById("codpackagingFox").value = data.productconsult.codpackaging ?? "";
                  document.getElementById("packagingFox").textContent = data.productconsult.packaging_leyenda ?? "";  
                  document.getElementById("codenv2Fox").value = data.productconsult.envase_2do ?? "";
                  document.getElementById("env2Fox").textContent = data.productconsult.envase2_leyenda ?? "";  
                  document.getElementById("codelaboracFox").value = data.productconsult.elaborac ?? "";
                  document.getElementById("elaboracFox").textContent = data.productconsult.elaborac_leyenda ?? "";  
                  document.getElementById("codfabricFox").value = data.productconsult.grupo_fabr ?? "";
                  document.getElementById("fabricFox").textContent = data.productconsult.grupofabr_leyenda ?? "";
                  document.getElementById("codcolencFox").value = data.productconsult.coleccion ?? "";
                  document.getElementById("colencFox").textContent = data.productconsult.coleccion_leyenda ?? "";
                  document.getElementById("codtalleFox").value = data.productconsult.codtalle ?? "";
                  document.getElementById("codidespFox").value = data.productconsult.id_espe ?? "";
                  document.getElementById("idespFox").textContent = data.productconsult.idespe_leyenda ?? "";
                  document.getElementById("codcondcomFox").value = data.productconsult.codcon_compra ?? "";
                  document.getElementById("condcomFox").textContent = data.productconsult.concompra_leyenda ?? "";
                  document.getElementById("codcuotasFox").value = data.productconsult.codcuotas ?? ""; 
                  document.getElementById("codmatFox").value = data.productconsult.codmaterial ?? "";
                  document.getElementById("descripMatFox").textContent = data.productconsult.material_leyenda ?? "";
                  document.getElementById("codcolorFox").value = data.productconsult.coddet_color ?? "";
                  document.getElementById("colorFox").textContent = data.productconsult.detcolor_leyenda ?? "";
                  document.getElementById("codlineaFox").value = data.productconsult.codlinea ?? "";
                  document.getElementById("lineaFox").textContent = data.productconsult.linea_leyenda ?? "";
                  document.getElementById("codapFox").value = data.productconsult.codapFox  ?? "";
                  document.getElementById("codcabFox").value = data.productconsult.codcabFox  ?? "";
                  document.getElementById("cabFox").textContent = data.productconsult.cabFox ?? "";
                  document.getElementById("codprovFox").valuet = data.productconsult.codprovedor ?? "";
                  document.getElementById("provFox").textContent = data.productconsult.provedor_leyenda ?? "";
                  document.getElementById("codsexoFox").value = data.productconsult.sexo ?? "";
                  document.getElementById("sexoFox").textContent = data.productconsult.sexo_leyenda ?? "";
                  document.getElementById("codtargetFox").value = data.productconsult.target ?? "";
                  document.getElementById("targetFox").textContent = data.productconsult.target_leyenda ?? "";
                  document.getElementById("codpuntoprecFox").valuet = data.productconsult.pto_precio ?? "";
                  document.getElementById("puntoprecFox").textContent = data.productconsult.ptoprecio_leyenda ?? "";
                  document.getElementById("codprocdFox").value = data.productconsult.proc ?? "";
                  document.getElementById("procdFox").textContent = data.productconsult.proc_leyenda ?? "";
                  document.getElementById("codorigenFox").value = data.productconsult.origen ?? "";
                  document.getElementById("origenFox").textContent = data.productconsult.origen_leyenda ?? "";
                  document.getElementById("codformaptFox").value = data.productconsult.forma_pt ?? "";
                  document.getElementById("formaptFox").textContent = data.productconsult.formapt_leyenda ?? "";
                  document.getElementById("pesoFox").textContent = data.productconsult.pesoFox ?? "";
                  document.getElementById("altoFox").textContent = data.productconsult.altoFox ?? "";
                  document.getElementById("largoFox").textContent = data.productconsult.largoFox ?? "";
                  document.getElementById("anchoFox").textContent = data.productconsult.anchoFox ?? "";
                  document.getElementById("volumenFox").textContent = data.productconsult.volumenFox ?? "";
                  
                  document.getElementById("camplanzFox").textContent = data.productconsult.camplanzFox ?? "";
                  document.getElementById("campbajaFox").textContent = data.productconsult.campbajaFox ?? "";
                  document.getElementById("marcacombFox").textContent = data.productconsult.marcacombFox ?? "";
                  document.getElementById("marcadobleFox").textContent = data.productconsult.marcadobleFox ?? "";
                  
                  document.getElementById("consigFox").textContent = data.productconsult.consigFox ?? "";
                  document.getElementById("estadoFox").textContent = data.productconsult.estadoFox ?? "";
                  document.getElementById("codcanalFox").textContent = data.productconsult.canal ?? "";
                  document.getElementById("canalFox").textContent = data.productconsult.canal_leyenda ?? "";
                  document.getElementById("fechaAltaFox").textContent = data.productconsult.fechaAltaFox ?? "";
                showToast(data.message, 'success');
                document.getElementById("codEmpFox").focus();
                break;
            }
          } else {
             document.querySelectorAll("input, select, textarea").forEach(el => {
              el.removeAttribute("disabled");
              document.getElementById("codEmpFox").focus();
            });
            switch (data.status_code) {
              case 413:
                showToast("Código no encontrado", "warning");
                showConfirmModal(`
                  <span style="font-size: 22px;">${data.message}</span><br>
                  <span style="font-size: 22px;">¿Repite el Anterior?</span><br>
                  <span style="font-size: 24px; font-weight: bold;">${codigoIngresado ?? ''}</span>
                `,
                function () {
                  // acceptar
                  if (codigoIngresado) {
                    callGetFoxProduct(codigoIngresado);
                  } else {
                    showToast("No hay código válido anterior para repetir.", "warning");
                  }
                },function () {
                  limpiarCamposProducto();
                  document.getElementById("codEmpFox").focus(); 
                });
                break;

              case 404:
                showToast(data.message, "danger");
                break;

              default:
                showToast("Error inesperado", "danger");
                break;
            }
          }
        })
        .catch(error => {
          console.error("❌ Error en la búsqueda:", error);
          document.getElementById('spinnerOverlay').style.display = 'none';
        });
    }

    // Dispara automáticamente cuando llega a 5 caracteres
    input.addEventListener("input", function () {
      const value = input.value.trim();
      if (value.length === 5) {
        callGetFoxProduct(value);
      }
    });

    // Dispara cuando se presiona Enter, sin importar la longitud
    input.addEventListener("keydown", function (e) {
      if (e.key === "Enter") {
        e.preventDefault();
        const value = input.value.trim();
        if (value.length >= 1) {
          callGetFoxProduct(value);
        } else {
          console.warn("⚠️ No se puede buscar un código vacío.");
        }
      }
    });
  });
</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) {
    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';

    let iconSVG = "";

    if (type === 'danger' || type === 'error') {
        iconSVG = `
            <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.3
                         c-.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>`;
    } else if (type === 'warning') {
        iconSVG = `
            <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="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" />
            </svg>`;
    } else if (type === 'info') {
        iconSVG = `
            <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="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10
                         10-4.48 10-10S17.52 2 12 2z" />
            </svg>`;
    } else {
        // Success por defecto
        iconSVG = `
            <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>`;
    }

    toast.innerHTML = `
        <div>${iconSVG}</div>
        <div style="color: black">${message}</div>
    `;
    document.getElementById('toast-container').appendChild(toast);
    setTimeout(() => {
        toast.remove();
    }, 10000);
}

</script>


<script>
  function showConfirmModal(message, onConfirm, onCancel) {
    // Establecer el mensaje en el modal
    document.getElementById("confirm-message").innerHTML = 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
    };
    const cancelButton = document.getElementById("confirm-cancel-btn");
    cancelButton.onclick = function () {
    hideConfirmModal();
    if (onCancel) onCancel();
  };
}

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

<script>
  function limpiarCamposProducto() {
  const ids = [
    "codEmpFox", "empFox", "descripFox", "descripFox2",
    "coddivisionFox", "divisionFox", "codsubDFox", "subdFox",
    "codcategoriaFox", "categoriaFox", "codsublineaFox", "sublineaFox",
    "codtsublFox", "tsublFox", "codcaractFox", "caractFox",
    "codsegmentoFox", "segmentoFox", "codconceptoFox", "conceptoFox",
    "codpackagingFox", "packagingFox", "codenv2Fox", "env2Fox",
    "codelaboracFox", "elaboracFox", "codfabricFox", "fabricFox",
    "codcolencFox", "colencFox", "codtalleFox", "codidespFox", "idespFox",
    "codcondcomFox", "condcomFox", "codcuotasFox", "codmatFox",
    "descripMatFox", "codcolorFox", "colorFox", "codlineaFox", "lineaFox",
    "codapFox", "codcabFox", "cabFox", "codprovFox", "provFox",
    "codsexoFox", "sexoFox", "codtargetFox", "targetFox", "codpuntoprecFox",
    "puntoprecFox", "codprocdFox", "procdFox", "codorigenFox", "origenFox",
    "codformaptFox", "formaptFox", "pesoFox", "altoFox", "largoFox",
    "anchoFox", "volumenFox", "camplanzFox", "campbajaFox",
    "marcacombFox", "marcadobleFox", "consigFox", "estadoFox",
    "codcanalFox", "canalFox", "fechaAltaFox"
  ];

  ids.forEach(id => {
    const el = document.getElementById(id);
    if (el) {
      if (["INPUT", "TEXTAREA", "SELECT"].includes(el.tagName)) {
        el.value = "";
      } else {
        el.textContent = "";
      }
    }
  });
}
</script>








{% endblock %}