{% 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);
}

  </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">Consulta 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>
              <div class="col-span-12 sm:col-span-2 w-12 h-7 px-2 py-1 border rounded text-center text-sm"
                id="codEmpFox"></div>
              <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"></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>
                <div class="flex-1 border px-2 py-2 sm:py-1 rounded text-sm" id="descripFox"></div>
              </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>
                <div class="flex-1 border px-2 py-2 sm:py-1 rounded text-sm" id="descripFox2"></div>
              </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>
                  <div class="border px-2 py-1 rounded" id="coddivisionFox"></div>
                  <div class="flex-1 border px-2 py-1 rounded " id="divisionFox"></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">Sub_D</label>
                  <div class="border px-2 py-1 rounded min-w-[50px]" id="codsubDFox"></div>
                  <div class="flex-1 border px-2 py-1 rounded" id="subdFox"></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">Categoría</label>
                  <div class="border px-2 py-1 rounded" id="codcategoriaFox"></div>
                  <div class="flex-1 border px-2 py-1 rounded" id="categoriaFox"></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">Sublínea</label>
                  <div class="border px-2 py-1 rounded" id="codsublineaFox"></div>
                  <div class="flex-1 border px-2 py-1 rounded" id="sublineaFox"></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">T. Subl</label>
                  <div class="border px-2 py-1 rounded" id="codtsublFox"></div>
                  <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>
                  <div class="border px-2 py-1 rounded" id="codcaractFox"></div>
                  <div class="flex-1 border px-2 py-1 rounded" id="caractFox"></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">Segmto</label>
                  <div class="border px-2 py-1 rounded" id="codsegmentoFox"></div>
                  <div class="flex-1 border px-2 py-1 rounded" id="segmentoFox"></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">Concpto</label>
                  <div class="border px-2 py-1 rounded" id="codconceptoFox"></div>
                  <div class="flex-1 border px-2 py-1 rounded" id="conceptoFox"></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">Packaging</label>
                  <div class="border px-2 py-1 rounded" id="codpackagingFox"></div>
                  <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>
                  <div class="border px-2 py-1 rounded" id="codenv2Fox"></div>
                  <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>
                  <div class="border px-2 py-1 rounded" id="codelaboracFox"></div>
                  <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>
                  <div class="border px-2 py-1 rounded" id="codfabricFox"></div>
                  <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>
                <div class="col-span-12 sm:col-span-2 md:col-span-1 border px-2 py-2 sm:py-1 rounded" id="codcolencFox">
                </div>
                <div class="col-span-12 sm:col-span-2 md:col-span-2 border px-2 py-2 sm:py-1 rounded" id="colencFox">
                </div>

                <label class="col-span-12 sm:col-span-2 md:col-span-1 text-sm self-center">Talle/Tam</label>
                <div class="col-span-12 sm:col-span-2 md:col-span-2 borderpx-2 py-2 sm:py-1 rounded" id="codtalleFox">
                </div>


                <label class="col-span-12 sm:col-span-2 md:col-span-1 text-sm self-center">ID. Esp</label>
                <div class="col-span-12 sm:col-span-2 md:col-span-1 border px-2 py-2 sm:py-1 rounded" id="codidespFox">
                </div>
                <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>
                <div class="col-span-12 sm:col-span-2 md:col-span-1 border px-2 py-2 sm:py-1 rounded text-sm"
                  id="codcondcomFox"></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="condcomFox"></div>


                <label class="col-span-12 sm:col-span-2 md:col-span-1 text-sm self-center">Cuotas</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="codcuotasFox"></div>


                <label class="col-span-12 sm:col-span-2 md:col-span-1 text-sm self-center">Mat/Tela</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="codmatFox"></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="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>
                <div class="col-span-6 sm:col-span-1 border px-2 py-2 sm:py-1 rounded text-sm" id="codcolorFox"></div>
                <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>
                <div class="col-span-6 sm:col-span-1 border px-2 py-2 sm:py-1 rounded text-sm" id="codlineaFox"></div>
                <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>
                <div class="col-span-12 sm:col-span-2 md:col-span-1 border px-2 py-2 sm:py-1 rounded text-sm"
                  id="codapFox"></div>


                <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>
                <div class="col-span-12 sm:col-span-2 md:col-span-1 border px-2 py-2 sm:py-1 rounded text-sm"
                  id="codprovFox"></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="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>
                <div class="col-span-12 sm:col-span-2 md:col-span-1 border px-2 py-2 sm:py-1 rounded text-sm"
                  id="codsexoFox"></div>
                <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>
                <div class="col-span-12 sm:col-span-2 md:col-span-1 border px-2 py-2 sm:py-1 rounded text-sm"
                  id="codtargetFox"></div>
                <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>
                <div class="col-span-12 sm:col-span-2 md:col-span-1 border px-2 py-2 sm:py-1 rounded text-sm"
                  id="codpuntoprecFox"></div>
                <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>
                <div class="col-span-12 sm:col-span-2 md:col-span-1 border px-2 py-2 sm:py-1 rounded text-sm"
                  id="codprocdFox"></div>
                <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>
                <div class="col-span-12 sm:col-span-2 md:col-span-1 border px-2 py-2 sm:py-1 rounded text-sm"
                  id="codorigenFox"></div>
                <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>
                <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="codformaptFox"></div>
                <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>
                <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="pesoFox"></div>


                <label class="col-span-12 sm:col-span-2 md:col-span-1 text-sm text-right self-center">Alto(cm)</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="altoFox"></div>


                <label class="col-span-12 sm:col-span-2 md:col-span-1 text-sm text-right self-center">Largo(cm)</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="largoFox"></div>


                <label class="col-span-12 sm:col-span-2 md:col-span-1 text-sm text-right self-center">Ancho(cm)</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="anchoFox"></div>


                <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>
                <div
                  class="col-span-12 sm:col-span-2 md:col-span-2 px-2 py-2 sm:py-1 border rounded text-sm text-center"
                  id="camplanzFox"></div>


                <label
                  class="col-span-12 sm:col-span-2 md:col-span-1 text-sm text-right whitespace-nowrap self-center">Camp.
                  Baja.</label>
                <div
                  class="col-span-12 sm:col-span-2 md:col-span-2 px-2 py-2 sm:py-1 border rounded text-sm text-center"
                  id="campbajaFox"></div>


                <label
                  class="col-span-12 sm:col-span-2 md:col-span-1 text-sm text-right whitespace-nowrap self-center">Marca
                  Comb</label>
                <div
                  class="col-span-12 sm:col-span-2 md:col-span-2 px-2 py-2 sm:py-1 border rounded text-sm text-center"
                  id="marcacombFox"></div>


                <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>
                <div
                  class="col-span-12 sm:col-span-2 md:col-span-2 px-2 py-2 sm:py-1 border rounded text-sm text-center"
                  id="marcadobleFox"></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">Consig.</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="consigFox"></div>


                <label class="col-span-12 sm:col-span-2 md:col-span-1 text-sm text-right self-center">Estado</label>
                <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="estadoFox"></div>


                <label class="col-span-12 sm:col-span-2 md:col-span-1 text-sm text-right self-center">Canal</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="codcanalFox"></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"
                  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 -->

<!-- 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>


  
<script>
  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';

          switch (data.status_code) {
            case 200:
              const p = data.productconsult;

              document.getElementById("descripFox").textContent = p.descrip ?? "";
              document.getElementById("descripFox2").textContent = p.descrip_2 ?? "";
              document.getElementById("coddivisionFox").textContent = p.coddivision ?? "";
              document.getElementById("divisionFox").textContent = p.division_leyenda ?? "";
              document.getElementById("codsubDFox").textContent = p.codsub_divi ?? "";
              document.getElementById("subdFox").textContent = p.subdivi_leyenda ?? "";
              document.getElementById("codcategoriaFox").textContent = p.codcategoria ?? "";
              document.getElementById("categoriaFox").textContent = p.categoria_leyenda ?? "";
              document.getElementById("codsublineaFox").textContent = p.codsub_linea ?? "";
              document.getElementById("sublineaFox").textContent = p.sublinea_leyenda ?? "";
              document.getElementById("codtsublFox").textContent = p.codtipo_subl ?? "";
              document.getElementById("tsublFox").textContent = p.tiposubl_leyenda ?? "";
              document.getElementById("codcaractFox").textContent = p.codcaracteris ?? "";
              document.getElementById("caractFox").textContent = p.caracteris_leyenda ?? "";
              document.getElementById("codsegmentoFox").textContent = p.codsegmento ?? "";
              document.getElementById("segmentoFox").textContent = p.segmento_leyenda ?? "";
              document.getElementById("codconceptoFox").textContent = p.codconcepto ?? "";
              document.getElementById("conceptoFox").textContent = p.concepto_leyenda ?? "";
              document.getElementById("codpackagingFox").textContent = p.codpackaging ?? "";
              document.getElementById("packagingFox").textContent = p.packaging_leyenda ?? "";
              document.getElementById("codenv2Fox").textContent = p.envase_2do ?? "";
              document.getElementById("env2Fox").textContent = p.envase2_leyenda ?? "";
              document.getElementById("codelaboracFox").textContent = p.elaborac ?? "";
              document.getElementById("elaboracFox").textContent = p.elaborac_leyenda ?? "";
              document.getElementById("codfabricFox").textContent = p.grupo_fabr ?? "";
              document.getElementById("fabricFox").textContent = p.grupofabr_leyenda ?? "";
              document.getElementById("codcolencFox").textContent = p.coleccion ?? "";
              document.getElementById("colencFox").textContent = p.coleccion_leyenda ?? "";
              document.getElementById("codtalleFox").textContent = p.codtalle ?? "";
              document.getElementById("codidespFox").textContent = p.id_espe ?? "";
              document.getElementById("idespFox").textContent = p.idespe_leyenda ?? "";
              document.getElementById("codcondcomFox").textContent = p.codcon_compra ?? "";
              document.getElementById("condcomFox").textContent = p.concompra_leyenda ?? "";
              document.getElementById("codcuotasFox").textContent = p.codcuotas ?? "";
              document.getElementById("codmatFox").textContent = p.codmaterial ?? "";
              document.getElementById("descripMatFox").textContent = p.material_leyenda ?? "";
              document.getElementById("codcolorFox").textContent = p.coddet_color ?? "";
              document.getElementById("colorFox").textContent = p.detcolor_leyenda ?? "";
              document.getElementById("codlineaFox").textContent = p.codlinea ?? "";
              document.getElementById("lineaFox").textContent = p.linea_leyenda ?? "";
              document.getElementById("codapFox").textContent = p.codapFox ?? "";
              document.getElementById("codcabFox").textContent = p.codcabFox ?? "";
              document.getElementById("cabFox").textContent = p.cabFox ?? "";
              document.getElementById("codprovFox").textContent = p.codprovedor ?? "";
              document.getElementById("provFox").textContent = p.provedor_leyenda ?? "";
              document.getElementById("codsexoFox").textContent = p.sexo ?? "";
              document.getElementById("sexoFox").textContent = p.sexo_leyenda ?? "";
              document.getElementById("codtargetFox").textContent = p.target ?? "";
              document.getElementById("targetFox").textContent = p.target_leyenda ?? "";
              document.getElementById("codpuntoprecFox").textContent = p.pto_precio ?? "";
              document.getElementById("puntoprecFox").textContent = p.ptoprecio_leyenda ?? "";
              document.getElementById("codprocdFox").textContent = p.proc ?? "";
              document.getElementById("procdFox").textContent = p.proc_leyenda ?? "";
              document.getElementById("codorigenFox").textContent = p.origen ?? "";
              document.getElementById("origenFox").textContent = p.origen_leyenda ?? "";
              document.getElementById("codformaptFox").textContent = p.forma_pt ?? "";
              document.getElementById("formaptFox").textContent = p.formapt_leyenda ?? "";
              document.getElementById("pesoFox").textContent = p.pesoFox ?? "";
              document.getElementById("altoFox").textContent = p.altoFox ?? "";
              document.getElementById("largoFox").textContent = p.largoFox ?? "";
              document.getElementById("anchoFox").textContent = p.anchoFox ?? "";
              document.getElementById("volumenFox").textContent = p.volumenFox ?? "";
              document.getElementById("camplanzFox").textContent = p.camplanzFox ?? "";
              document.getElementById("campbajaFox").textContent = p.campbajaFox ?? "";
              document.getElementById("marcacombFox").textContent = p.marcacombFox ?? "";
              document.getElementById("marcadobleFox").textContent = p.marcadobleFox ?? "";
              document.getElementById("consigFox").textContent = p.consigFox ?? "";
              document.getElementById("estadoFox").textContent = p.estadoFox ?? "";
              document.getElementById("codcanalFox").textContent = p.canal ?? "";
              document.getElementById("canalFox").textContent = p.canal_leyenda ?? "";
              document.getElementById("fechaAltaFox").textContent = p.fechaAltaFox ?? "";
              document.getElementById("codEmpFox").textContent = p.codempresa ?? "";
              document.getElementById("empFox").textContent = p.empresa_leyenda ?? "";

              showToast(data.message, 'success');
              break;

            case 413:
              showToast("Código no encontrado", "warning");
              break;

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

    input.addEventListener("input", function () {
      const value = input.value.trim();
      if (value.length === 5) {
        callGetFoxProduct(value);
      }
    });

    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) {//  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>










{% endblock %}