{% 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,
#codconsigFox,
#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;
}


  /* Para mostrar scroll siempre */
  #listaItemsCombi::-webkit-scrollbar {
    width: 6px;
  }

  #listaItemsCombi::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 3px;
  }

  
  </style>

<style>
  #tablaDobles .tabulator-cell {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #tablaDobles .tabulator {
    font-size: 13px !important;
  }

  #tablaDobles .tabulator-col-title {
    white-space: nowrap !important;
  }
</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-empfox"
                id="codEmpFox" disabled/>
                <datalist id="datalist-empfox"></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>
              <input class="col-span-12 sm:col-span-2 w-16 h-7 px-2 py-1 border rounded text-center text-sm" disabled id="codMKEmpFox" list="datalist-mkempfox"/>
              <datalist id="datalist-mkempfox"></datalist>
            </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-divisionfox" />
                  <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-divisionfox"></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-subdfox">  
                  <div class="flex-1 border px-2 py-1 rounded" id="subdFox"></div>
                </div>
                <datalist id="datalist-subdfox"></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" disabled list="datalist-categoriafox" />

                  <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-categoriafox">
              
                </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-sublineafox">
                  <div class="flex-1 border px-2 py-1 rounded" id="sublineaFox"></div>
                </div>

                <datalist id="datalist-sublineafox"></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-tsublfox" >
                  <datalist id="datalist-tsublfox"></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-caractfox">
                  <div class="flex-1 border px-2 py-1 rounded" id="caractFox"></div>
                  <datalist id="datalist-caractfox"></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-segmentofox">
                  <div class="flex-1 border px-2 py-1 rounded" id="segmentoFox"></div>
                   <datalist id="datalist-segmentofox"></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-conceptofox">
                  <div class="flex-1 border px-2 py-1 rounded" id="conceptoFox"></div>
                  <datalist id="datalist-conceptofox"></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" list="datalist-packagingfox">
                  <div class="flex-1 border px-2 py-1 rounded" id="packagingFox"></div>
                  <datalist id="datalist-packagingfox"></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">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" list="datalist-env2fox">
                  <div class="flex-1 border px-2 py-1 rounded" id="env2Fox"></div>
                   <datalist id="datalist-env2fox"></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">Elaborac</label>
                  <input class="border px-1 py-0 sm:py-1 h-auto rounded w-12 text-sm leading-none" disabled id="codelaboracFox" list="datalist-elaboracfox">
                  <div class="flex-1 border px-2 py-1 rounded" id="elaboracFox"></div>
                  <datalist id="datalist-elaboracfox"></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">Fabric</label>
                   <input class="border px-1 py-0 sm:py-1 h-auto rounded w-12 text-sm leading-none" disabled id="codfabricFox" list="datalist-fabricfox">
                  <div class="flex-1 border px-2 py-1 rounded" id="fabricFox"></div>
                  <datalist id="datalist-fabricfox"></datalist>
                </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" list="datalist-colencfox">
                <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>
                <datalist id="datalist-colencfox"></datalist>
                
                <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" list="datalist-tallefox">
                <div hidden class="col-span-12 sm:col-span-2 md:col-span-2 border px-2 py-2 sm:py-1 rounded" id="talleFox">
                </div>
                <datalist id="datalist-tallefox"></datalist>

                <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" list="datalist-idespfox">
                <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>
                  <datalist id="datalist-idespfox"></datalist>
              </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" list="datalist-condcomfox">
                <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>
                  <datalist id="datalist-condcomfox"></datalist>
                

                <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" list="datalist-cuotasfox">
                <datalist id="datalist-cuotasfox"></datalist>
 
                <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" list="datalist-matfox">
                <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>
                <datalist id="datalist-matfox"></datalist>

              </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" list="datalist-colorfox">

               <div id="colorFoxContainer" class="col-span-6 sm:col-span-4">
                 <div id="colorFox" style="text-transform: uppercase" class="border px-2 py-2 sm:py-1 rounded text-sm"></div>
               </div>
             </div>
             <datalist id="datalist-colorfox"></datalist>


              <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" list="datalist-lineafox">
                <div class="col-span-6 sm:col-span-4 border px-2 py-2 sm:py-1 rounded text-sm" id="lineaFox"></div>
              </div>
              <datalist id="datalist-lineafox"></datalist>


              <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" list="datalist-apfox">
                <datalist id="datalist-apfox"></datalist>

                <label class="col-span-12 sm:col-span-2 md:col-span-1 text-sm self-center">cab</label>
                <input class="col-span-12 sm:col-span-2 md:col-span-2 border px-2 py-2 sm:py-1 rounded text-sm  h-auto rounded text-sm leading-none" disabled id="codcabFox" list="datalist-cabfox">
                <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>
                <datalist id="datalist-cabfox"></datalist>

                <label class="col-span-12 sm:col-span-2 md:col-span-1 text-sm self-center">Prov</label>
                <input 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="codprovFox" list="datalist-provfox">
                <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>
                  <datalist id="datalist-provfox"></datalist>

              </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" disabled id="codsexoFox" list="datalist-sexofox">
                <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>
                <datalist id="datalist-sexofox"></datalist>
                
                <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" disabled id="codtargetFox" list="datalist-targetfox">
                <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>
                <datalist id="datalist-targetfox"></datalist>
              </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" list="datalist-puntoprecfox">
                <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>
                  <datalist id="datalist-puntoprecfox"></datalist>

                <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" list="datalist-procdfox">
                <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>
                <datalist id="datalist-procdfox"></datalist>
              </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" list="datalist-origenfox">
                <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>
                  <datalist id="datalist-origenfox"></datalist>


                <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" list="datalist-formaptfox">
                <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>
                  <datalist id="datalist-formaptfox"></datalist>


                <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">0</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="number"step="0.01" min="0" max="9999999.99" 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="number"step="0.01" min="0" max="99999.99" 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="number"step="0.01" min="0" max="99999.99" 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="number"step="0.01" min="0" max="99999.99" 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>
                <input hidden style="display: none;" type="number"step="0.01" min="0" max="99999.99" 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="volumenForm" name="volumenFox">
              </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" list="datalist-marcacombfox">
                <datalist id="datalist-marcacombfox"></datalist>

                <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" list="datalist-marcadoblefox">
                <datalist id="datalist-marcadoblefox"></datalist>
              </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="codconsigFox" list="datalist-consigfox">
                <datalist id="datalist-consigfox"></datalist>

                <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" list="datalist-estadofox">
                <datalist id="datalist-estadofox"></datalist>

                <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" disabled id="codcanalFox" list="datalist-canalfox">
                <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>
                <datalist id="datalist-canalfox"></datalist>

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


<!--Nuevo modal para cargar color -->

<div id="alta-color-modal" style="display: none;" class="modal-container">
  <div style="width: 30%; min-width: 300px; max-width: 500px;">
    <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="hideAltaColorModal()" 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-pencil-fill"></i>
          <h5 class="text-[1.25rem] !font-medium">Nuevo Color</h5>
          <div id="alta-color-message">Ingresá el nombre del nuevo color:</div>
          <input type="text" id="nuevoColorInput" style="text-transform: uppercase" class="w-full border rounded px-2 py-1 mt-2 mb-4 text-sm" placeholder="Ej: Rojo Coral">
          <div>
            <button type="button" id="alta-color-cancel-btn" 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="alta-color-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>


<!-- modal para combinadas -->

<div id="abm-combinadas-modal" style="display: none;" class="modal-container">
  <div style="width: 40%; min-width: 350px; max-width: 600px; max-height: 90vh; overflow-y: auto;">
    <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" id="cerrarAbmCombinadasModal" aria-label="Close" style="pointer-events: auto;">
          <span>&times;</span> <!-- Usamos símbolo directo en lugar del <i> -->
        </button>

        <div class="text-center px-[3rem] pb-0">
          <i style="font-size: 80px; color: rgb(var(--warning));" class="bi bi-collection-fill"></i>
          <h5 class="text-[1.25rem] !font-medium mb-4">ACTUALIZACIÓN DE COMBINADAS</h5>

          <div class="mb-2 text-start font-semibold">Código de Combinada</div>
          <input type="text" id="codigoCombinadaInput"
            class="w-full border rounded px-2 py-1 mb-2 text-sm bg-gray-100 text-gray-500 cursor-not-allowed"
            placeholder="Ej: 12345">


          <!-- NUEVO: reemplaza "Código de Producto" -->
          <div class="mb-2 text-start font-semibold">Agregar Producto a la Combinada</div>
          
          <!-- Campo de código -->
        <input type="number" id="addProductoInput"
          class="w-full border rounded px-2 py-1 text-sm mb-2"
          placeholder="codigo integrante" >

        <!-- Campo de cantidad y botón al lado -->
        <div class="flex gap-2 mb-4">
          <input type="number" id="cantidadInput"
            class="flex-grow border rounded px-2 py-1 text-sm"
            placeholder="cantidad" min="1" max="999">
          <button type="button" id="btnAgregarItemComb"
            class="ti-btn !py-1 !px-3 !text-[1.00rem] !font-medium text-white"
            style="background-color:#6c757d;" disabled>
            Agregar
          </button>
        </div>

          <!-- Lista visual de productos agregados -->
          <div id="listaItemsCombi" class="relative w-full border rounded px-2 py-2 text-sm min-h-[48px] overflow-y-auto shadow-inner"
              style="background:#f9fafb; max-height: 200px;">
            <span class="text-gray-500">Sin productos agregados.</span>
          </div>

          <div class="flex justify-center flex-wrap gap-2 mt-3">
            <button type="button" id="btnGrabarComb" class="ti-btn !py-1 !px-3 !text-[1.00rem] !font-medium text-white"
              style="background-color: #28a745;" disabled>
              Grabar
            </button>
            <!-- <button type="button" id="btnEliminarComb"
              class="ti-btn !py-1 !px-3 !text-[1.00rem] !font-medium text-white" style="background-color: #dc3545;">
              Eliminar
            </button>
            <button type="button" id="btnConsultarComb"
              class="ti-btn !py-1 !px-3 !text-[1.00rem] !font-medium text-white" style="background-color: #17a2b8;">
              Consultar
            </button> -->
          </div>

          <!-- Campos ocultos auxiliares -->
          <input type="hidden" id="s_codigoc" value="">
          <input type="hidden" id="s_codigo" value="">
        </div>
      </div>
    </div>
  </div>
</div>


<!-- modal para dobles xxxxx-->

<div id="abm-dobles-modal" style="display: none;" class="modal-container text-sm">
  <div style="width: 95%; min-width: 900px; max-width: 1400px; max-height: 90vh; overflow-y: auto;">
    <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" id="cerrarAbmDoblesModal" aria-label="Close" style="pointer-events: auto;">
          <span>&times;</span>
        </button>

        <div class="text-center px-[3rem] pb-0">
          <i style="font-size: 32px; color: rgb(var(--warning)); margin-top: 0;" class="bi bi-collection-fill"></i>
          <h5 class="text-[1rem] !font-medium mb-2">ACTUALIZACIÓN CODIGOS DOBLES</h5>

          <div class="mb-2 text-start font-semibold">Código Doble</div>
          <input type="text" id="codigoDobleInput"
            class="w-full border rounded px-2 py-1 mb-2 text-sm bg-gray-100 text-gray-500 cursor-not-allowed"
            placeholder="">

          <!-- Agregar producto al doble -->
          <div class="mb-2 text-start font-semibold">Agregar Codigo Original</div>
          
          <!-- Campo de código -->
          <input type="number" id="addProductoInputDoble"
            class="w-full border rounded px-2 py-1 text-sm mb-2"
            placeholder="código original">

          <!-- Campo de cantidad y botón al lado -->
          <div class="flex gap-2 mb-4">
            <button type="button" id="btnAgregarItemDoble"
              class="ti-btn !py-1 !px-3 !text-[1.00rem] !font-medium text-white"
              style="background-color:#6c757d; " disabled>
              Agregar
            </button>
          </div>

          <!-- Lista visual del producto original PT agregado  -->
          <div id="ItemOriginal" class="relative w-full border rounded px-2 py-2 text-sm min-h-[48px] overflow-y-auto shadow-inner"
              style="background:#f9fafb; max-height: 200px;">
            <span class="text-gray-500">falta agregar producto original.</span>
          </div>

          <!-- Lista visual codigos dobles ya asignados al PT   -->
          <!-- <div hidden id="listaItemDobles" class="relative w-full border rounded px-2 py-2 text-sm min-h-[48px] overflow-y-auto shadow-inner"
            style="background:#f9fafb; max-height: 160px;">
          <div id="avisoDobles" class="text-[0.85rem] text-gray-500 font-semibold mb-1"></div>
          <span class="text-gray-500"></span>
        </div> -->
        <div class="box-body space-y-3" id="contenedorTablaDobles" style="display: none;">
          <h5 class="box-title mt-2 mb-2">Ya existen códigos asignados para el PT <span id="codigoOriginalTexto" class="text-blue-600 font-semibold"></span></h5>
          <div class="download-data flex gap-2">
            <button type="button" class="ti-btn ti-btn-primary" id="download-csv">Download CSV</button>
            <button type="button" class="ti-btn ti-btn-primary" id="download-xlsx">Download XLSX</button>
            <button type="button" class="ti-btn ti-btn-primary" id="download-pdf">Download PDF</button>
          </div>

          <div class="overflow-hidden table-bordered mt-2">
            <div id="tablaDobles" class="w-full"></div>
          </div>
        </div>

          <div class="flex justify-center flex-wrap gap-2 mt-3">
            <button type="button" id="btnGrabarDoble" class="ti-btn !py-1 !px-3 !text-[1.00rem] !font-medium text-white"
              style="background-color: #28a745;" disabled>
              Grabar
            </button>
            <!-- <button type="button" id="btnEliminarDoble"
              class="ti-btn !py-1 !px-3 !text-[1.00rem] !font-medium text-white" style="background-color: #dc3545;">
              Eliminar
            </button>
            <button type="button" id="btnConsultarDoble"
              class="ti-btn !py-1 !px-3 !text-[1.00rem] !font-medium text-white" style="background-color: #17a2b8;">
              Consultar
            </button> -->
          </div>

          <!-- Campos ocultos auxiliares -->
          <input type="hidden" id="s_codigoc_doble" value="">
          <input type="hidden" id="s_codigo_doble" value="">
        </div>
      </div>
    </div>
  </div>
</div>



<!--toast-->
<div id="toast-container" style="position: fixed; top: 20px; right: 20px; z-index: 99999;"></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>

  
  <script src="{% static 'assets/js/datatable.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>

<!-- limpiarCamposProducto -->
<!-- <script>
  function limpiarCamposProducto() {
  const ids = [
  "codEmpFox", "codMKEmpFox", "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", "codconsigFox", "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> -->


  
<script>
  
  function enableAllFields(excludeIds = []) {
  document.querySelectorAll("input, select, textarea").forEach(el => {
    if (!excludeIds.includes(el.id)) {
      el.removeAttribute("disabled");
     
    } else {
      el.setAttribute("disabled", true);
      el.style.backgroundColor = "#ffffff"; // fondo blanco para campos excluidos
    }
  });
}

function getFechaAltaLocal() {
  const d = new Date();
  const pad = n => String(n).padStart(2, "0");
  return `${pad(d.getDate())}/${pad(d.getMonth() + 1)}/${d.getFullYear()}`;
}

  let codigoIngresado = null;
  const camposSecuencia = [ 
  "codEmpFox",
  "codMKEmpFox",
  "descripFox",
  "descripFox2",
  "coddivisionFox",
  "codsubDFox",
  "codcategoriaFox",
  "codsublineaFox",
  "codtsublFox",
  "codcaractFox",
  "codsegmentoFox",
  "codconceptoFox",
  "codpackagingFox",
  "codenv2Fox",
  "codelaboracFox",
  "codfabricFox",
  "codcolencFox",
  "codtalleFox",
  'codidespFox',
  'codcondcomFox',
  'codcuotasFox',
  'codmatFox',
  'codcolorFox',
  'codlineaFox',
  'codapFox',
  'codcabFox',
  'codprovFox',
  'codsexoFox',
  'codtargetFox',
  'codpuntoprecFox',
  'codprocdFox',
  'codorigenFox',
  'codformaptFox',
  'pesoFox',
  'altoFox',
  'largoFox',
  'anchoFox',
  'camplanzFox',
  'campbajaFox',
  'marcacombFox',
  'marcadobleFox',
  'codconsigFox',
  'estadoFox',
  'codcanalFox',
  'colorFox'
];


const leyendasAsociadas = {
  codEmpFox: "empFox",
  descripFox: null,
  descripFox2: null,
  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: "talleFox",       
  codidespFox: "idespFox",
  codcondcomFox: "condcomFox",
  codmatFox: "descripMatFox",
  codcolorFox: "colorFox",
  codlineaFox: "lineaFox",
  codapFox: "codapFox",
  codcabFox: "cabFox",
  codprovFox: "provFox",
  codsexoFox: "sexoFox",
  codtargetFox: "targetFox",
  codpuntoprecFox: "puntoprecFox",
  codprocdFox: "procdFox",
  codorigenFox: "origenFox",
  codformaptFox: "formaptFox",
  codcanalFox: "canalFox"

};

const idsDatalistPersonalizados = {
  codEmpFox: "datalist-empfox",
  codMKEmpFox: "datalist-mkempfox",
  coddivisionFox: "datalist-divisionfox",
  codsubDFox: "datalist-subdfox",
  codcategoriaFox: "datalist-categoriafox",
  codsublineaFox: "datalist-sublineafox",
  codtsublFox: "datalist-tsublfox",
  codcaractFox: "datalist-caractfox",
  codsegmentoFox: "datalist-segmentofox",
  codconceptoFox: "datalist-conceptofox",
  codpackagingFox: "datalist-packagingfox",
  codenv2Fox: "datalist-env2fox",
  codelaboracFox: "datalist-elaboracfox",
  codfabricFox: "datalist-fabricfox",
  codcolencFox: "datalist-colencfox",
  codtalleFox: "datalist-tallefox",       
  codidespFox: "datalist-idespfox",
  codcondcomFox: "datalist-condcomfox",
  codcuotasFox: "datalist-cuotasfox",
  codmatFox: "datalist-matfox",
  codcolorFox: "datalist-colorfox",
  codlineaFox: "datalist-lineafox",
  codapFox: "datalist-apfox",
  codcabFox: "datalist-cabfox",
  codprovFox: "datalist-provfox",
  codsexoFox: "datalist-sexofox",
  codtargetFox: "datalist-targetfox",
  codpuntoprecFox: "datalist-puntoprecfox",
  codprocdFox: "datalist-procdfox",
  codorigenFox: "datalist-origenfox",
  codformaptFox: "datalist-formaptfox",
  marcacombFox: 'datalist-marcacombfox',
  marcadobleFox: 'datalist-marcadoblefox',
  codconsigFox: 'datalist-consigfox',
  estadoFox:'datalist-estadofox',
  codcanalFox: 'datalist-canalfox',

};


   // Arma SIEMPRE el payload a enviar (dinámico y save)
  function buildDatosEnvio(campoIdParaOpciones) {
  const datosEnvio = {};

  // codeFox
  const codeFoxEl = document.getElementById("codeFox");
  datosEnvio.codeFox = codeFoxEl ? (codeFoxEl.value || "").trim() || 0 : null;

  // fechaAltaFox (si el div está vacío, genero una ahora)
  const fechaDiv = document.getElementById("fechaAltaFox");
  const fechaAlta = (fechaDiv?.textContent || "").trim() || getFechaAltaLocal();
  datosEnvio.fechaAltaFox = fechaAlta;
  if (fechaDiv && !fechaDiv.textContent.trim()) {
    fechaDiv.textContent = fechaAlta;
  }

  // volumenFox ya calculado en el DOM (está en un div, no input)
  const volEl = document.getElementById("volumenFox");
  let volTxt = (volEl?.textContent || "").trim();
  // normalizo por si viene con coma decimal
  volTxt = volTxt.replace(",", ".");
  const volNum = parseFloat(volTxt);
  datosEnvio.volumenFox = Number.isFinite(volNum) ? volNum : 0;

  // resto de campos declarados en camposSecuencia
  camposSecuencia.forEach(idCampo => {
    const el = document.getElementById(idCampo);
    if (el && "value" in el) {
      const v = (el.value || "").trim();
      datosEnvio[idCampo] = v !== "" ? v : 0;
    } else {
      datosEnvio[idCampo] = null;
    }
  });

  // el campo que está pidiendo opciones
  datosEnvio.campoActual = campoIdParaOpciones;

  return datosEnvio;
}


  document.addEventListener("DOMContentLoaded", function () {
  const camposNumericos = ["pesoFox", "altoFox", "largoFox", "anchoFox"];
    // validacion para campos pesoFox,altoFox,largoFox,anchoFox
    


    const campoVolumen = document.getElementById("volumenFox");
if (campoVolumen) campoVolumen.setAttribute("disabled", true);

camposNumericos.forEach(id => {
  const campo = document.getElementById(id);
  if (campo) {
    campo.addEventListener("input", calcularVolumen);
  }
});

function calcularVolumen() {
  const idforma = parseInt(document.getElementById("codformaptFox")?.value || 0);
  const alto = parseFloat(document.getElementById("altoFox")?.value || 0);
  const largo = parseFloat(document.getElementById("largoFox")?.value || 0);
  const ancho = parseFloat(document.getElementById("anchoFox")?.value || 0);

  let volumen = 0;

  if (idforma === 780) {
    volumen = alto * largo * ancho;
  } else if (idforma === 781) {
    volumen = alto * Math.PI * Math.pow(ancho / 2, 2);
  } else if (idforma === 782) {
    volumen = alto * largo * ancho * 0.85;
  }

  volumen = Math.round(volumen * 100) / 100;
  console.log("volumen",volumen)
  const campoVolumen = document.getElementById("volumenFox");
  if (campoVolumen) {
    campoVolumen.textContent = volumen.toFixed(2);
  }
  
}


    // Forzar carga de opciones para Empresa apenas inicia la vista
    const input_codfox = document.getElementById("codeFox");

    // funcion de buscar producto

    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 => {
        console.log("Respuesta completa del backend:", data); // <-- AGREGÁ ESTO   
        document.getElementById('spinnerOverlay').style.display = 'none'; 
        fetchGetDynamicOptions("codEmpFox");
        if (data.success) {
          switch (data.status_code) {
            case 200:

            enableAllFields(["marcadobleFox", "marcacombFox"]);
            codigoIngresado = code;
                  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.codenvase_2do ?? "";
                  document.getElementById("env2Fox").textContent = data.productconsult.envase2_leyenda ?? "";  
                  document.getElementById("codelaboracFox").value = data.productconsult.codelaborac ?? "";
                  document.getElementById("elaboracFox").textContent = data.productconsult.elaborac_leyenda ?? "";  
                  document.getElementById("codfabricFox").value = data.productconsult.codgrupo_fabr ?? "";
                  document.getElementById("fabricFox").textContent = data.productconsult.grupofabr_leyenda ?? "";
                  document.getElementById("codcolencFox").value = data.productconsult.codcoleccion ?? "";
                  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").value = data.productconsult.codprovedor ?? "";
                  document.getElementById("provFox").textContent = data.productconsult.provedor_leyenda ?? "";
                  document.getElementById("codsexoFox").value = data.productconsult.codsexo ?? "";
                  document.getElementById("sexoFox").textContent = data.productconsult.sexo_leyenda ?? "";
                  document.getElementById("codtargetFox").value = data.productconsult.codtarget ?? "";
                  document.getElementById("targetFox").textContent = data.productconsult.target_leyenda ?? "";
                  document.getElementById("codpuntoprecFox").value = data.productconsult.codpto_precio ?? "";
                  document.getElementById("puntoprecFox").textContent = data.productconsult.ptoprecio_leyenda ?? "";
                  document.getElementById("codprocdFox").value = data.productconsult.codproc ?? "";
                  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.codforma_pt ?? "";
                  document.getElementById("formaptFox").textContent = data.productconsult.formapt_leyenda ?? "";
                  document.getElementById("pesoFox").value = data.productconsult.pesoFox ?? "";
                  document.getElementById("altoFox").value = data.productconsult.altoFox ?? "";
                  document.getElementById("largoFox").value = data.productconsult.largoFox ?? "";
                  document.getElementById("anchoFox").value = data.productconsult.anchoFox ?? "";
                  document.getElementById("volumenFox").textContent = data.productconsult.volumenFox ?? "";
                  document.getElementById("camplanzFox").value = data.productconsult.camplanzFox ?? "";
                  document.getElementById("campbajaFox").value = data.productconsult.campbajaFox ?? "";
                  document.getElementById("marcacombFox").textContent = data.productconsult.marcacombFox ?? "";
                  document.getElementById("marcadobleFox").textContent = data.productconsult.marcadobleFox ?? "";
                  document.getElementById("codconsigFox").value = data.productconsult.codconsigFox ?? "";
                  document.getElementById("estadoFox").value = data.productconsult.estadoFox ?? "";
                  document.getElementById("codcanalFox").value = data.productconsult.codcanal ?? "";
                  document.getElementById("canalFox").textContent = data.productconsult.canal_leyenda ?? "";
                  document.getElementById("fechaAltaFox").textContent = data.productconsult.fechaAltaFox ?? "";
                  showToast(data.message, 'success');
                break;
            }
          }  else {
          switch (data.status_code) {
            case 204:
              showToast(data.message || "Código inexistente. Continuar con alta manual.", "warning");
              enableAllFields();
  
              // Arrancar flujo de opciones dinámicas desde codEmpFox
              
              const primerCampo = document.getElementById("codEmpFox");
              if (primerCampo) primerCampo.focus();
              fetchGetDynamicOptions("codEmpFox");
              return; // ⬅️ en vez de break

            case 400:
              showToast(data.message, "warning");
              return; 

            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 () {
                if (codigoIngresado) {
                  callGetFoxProduct(codigoIngresado);
                } else {
                  showToast("No hay código válido anterior para repetir.", "warning");
                }
              }, function () {
                limpiarCamposProducto();
                const primerCampo = document.getElementById(camposSecuencia[0]);
                if (primerCampo && primerCampo.disabled) {
                  primerCampo.removeAttribute("disabled");
                  primerCampo.focus();
                }
              });
              return;

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

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

    // fin funcion de buscar producto

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


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

    // fin funciones escucha input_codfox

    


    // === Escucha cada campo de la lista ===
  
  camposSecuencia.forEach((campoId, index) => {
  const campo = document.getElementById(campoId);
  if (!campo) return;

  // Evento CHANGE
  campo.addEventListener("change", async function () {
  const valor = campo.value ?? "";
  const fueBorrado = campo.dataset.valorBorrado === "1";
  const valorPrevio = campo.dataset.lastInputProcessed;

  // ✅ Permitir vacío si está en datalist
  const datalistId = campo.getAttribute("list");
  const opciones = datalistId ? Array.from(document.querySelectorAll(`#${datalistId} option`)).map(o => o.value) : [];
  const vacioValido = (valor === "" && opciones.includes(""));

  delete campo.dataset.valorBorrado;

  if (!fueBorrado && valorPrevio === valor && !vacioValido) {
    console.log("🛑 Valor ya procesado previamente, no se dispara change.");
    return;
  }

  await procesarValorCampo(campoId, valor, index);
});

  // Evento INPUT (para marcar borrado)
  campo.addEventListener("input", async function () {
  const valor = campo.value ?? "";                   // no trim acá
  campo.dataset.touched = "1";                       // ← NUEVO: se tocó el campo
  if (valor.trim() === "") {                         // si de verdad quedó vacío
    campo.dataset.valorBorrado = "1";                // ← lo marcamos como borrado
    delete campo.dataset.lastInputProcessed;         // ← olvidamos el último procesado
    await fetchGetDynamicOptions(campoId);
  }
  });

  // Evento KEYDOWN (Enter fuerza el cambio aunque se repita)
 campo.addEventListener("keydown", async function (e) {
  if (e.key === "Enter") {
    const valor = campo.value ?? "";
    const fueBorrado = campo.dataset.valorBorrado === "1";
    const valorPrevio = campo.dataset.lastInputProcessed;

    const datalistId = campo.getAttribute("list");
    const opciones = datalistId ? Array.from(document.querySelectorAll(`#${datalistId} option`)).map(o => o.value) : [];
    const vacioValido = (valor === "" && opciones.includes(""));

    delete campo.dataset.valorBorrado;

    if (!fueBorrado && valorPrevio === valor && !vacioValido) {
      console.log("⏩ Enter ignorado: mismo valor que antes y no fue borrado.");
      return;
    }

    await procesarValorCampo(campoId, valor, index);
  }
});
});

// 🧩 Función auxiliar para reutilizar lógica
async function procesarValorCampo(campoId, valor, index) {
  const campo = document.getElementById(campoId);
  if (!campo) return;

  // ⚠️ Validación numérica (equivalente a validarLongitud)
  if (campo.type === "number") {
  let val = parseFloat(valor);
  const max = parseFloat(campo.max);
  const min = parseFloat(campo.min) || 0;

  const campoOpcional = campoId === "pesoFox";

  if (isNaN(val)) {
    val = campoOpcional ? 0 : min;
  }

  if (val < 0) {
    // ❌ Ningún campo puede ser negativo
    val = 0;
  }

  // Si es obligatorio (alto/largo/ancho) y ≤ 0 → error
  if (!campoOpcional && val <= 0) {
    showToast("⚠️ Campo obligatorio", "danger");
    campo.value = "";
    campo.focus();
    return;
  }

  if (!isNaN(max) && val > max) {
    val = max;
  }
    campo.value = val.toFixed(2);
    valor = campo.value; 
  }
  
  // validacion campo campaña lanzamiento
  if (campoId === "camplanzFox") {
    if (!valor && valor !== "0") {
      showToast("⚠️ Campo Obligatorio. Debe ingresar campaña_año (CCAAAA) de lanzamiento del producto", "danger");
      campo.value = "";
      campo.focus();
      return;
    }
  }

  campo.dataset.lastInputProcessed = valor;

  const datalistId = idsDatalistPersonalizados[campoId];
  if (datalistId) {
    const datalist = document.getElementById(datalistId);
    const opciones = Array.from(datalist?.options || []);
    const esOpcionValida = opciones.some(opt => opt.value === valor);
    const es0Permitido = valor === "0" && opciones.length === 0;

    if (valor && !esOpcionValida && !es0Permitido) {
      showToast(`⚠️ El valor "${valor}" no es una opción válida`, 'danger');
      campo.value = "";
      campo.focus();
      return;
    }
  }

  await fetchGetDynamicOptions(campoId, valor);
   
  // condicion especial para codapfox - codprovfox 

  if (campoId === 'codapFox') {
  const codcab = document.getElementById("codcabFox");
  const codprov = document.getElementById("codprovFox");
  const cabFox = document.getElementById("cabFox");
    if (valor === "N") {
      
      // solo N → activar codprov, desactivar codcab
      if (codcab) {
        codcab.value = "";
        codcab.setAttribute("disabled", true);
      }
      if (codprov) {
        cabFox.innerText = "";
        codprov.removeAttribute("disabled");
        codprov.focus();
        await fetchGetDynamicOptions("codprovFox");
      }
    } else if (valor === "S") {
      // solo S → activar codcab, desactivar codprov
      if (codprov) {
        codprov.value = "";
        codprov.setAttribute("disabled", true);
      }
      if (codcab) {
        codcab.removeAttribute("disabled");
        codcab.focus();
        await fetchGetDynamicOptions("codcabFox");
      }
    } else {
      // ⚠️ Valor inválido: ni S ni N → desactivar ambos
      if (codprov) {
        codprov.value = "";
        codprov.setAttribute("disabled", true);
      }
      if (codcab) {
        codcab.value = "";
        codcab.setAttribute("disabled", true);
      }
    }
    return; // cancelamos lógica general igual
  }


  // condicion especial para marca combi - marca c.doble
  
  if (campoId === 'marcacombFox') {
    const marcadoble = document.getElementById("marcadobleFox");
    const codconsig  = document.getElementById("codconsigFox");

    if (valor === "S") {
      // S → mantener marcadoble deshabilitado, focus en codconsig
      if (marcadoble) {
        marcadoble.value = "";
        marcadoble.setAttribute("disabled", true);
      }
      if (codconsig) {
        codconsig.removeAttribute("disabled");
        codconsig.focus();
        await fetchGetDynamicOptions("codconsigFox");
      }
    } else if (valor === "N") {
      // N → habilitar marcadoble, deshabilitar codconsig
      if (codconsig) {
        codconsig.value = "";
        codconsig.setAttribute("disabled", true);
      }
      if (marcadoble) {
        marcadoble.removeAttribute("disabled");
        marcadoble.focus();
        await fetchGetDynamicOptions("marcadobleFox");
      }
    } else {
      // ⚠️ Valor inválido → desactivar ambos
      if (codconsig) {
        codconsig.value = "";
        codconsig.setAttribute("disabled", true);
      }
      if (marcadoble) {
        marcadoble.value = "";
        marcadoble.setAttribute("disabled", true);
      }
    }
    return; // cancelamos lógica general igual
  }

  


  // fincondicion especial para codapfox - codprovfox 

  if (valor && index + 1 < camposSecuencia.length) {
    const siguienteId = camposSecuencia[index + 1];
    const siguienteCampo = document.getElementById(siguienteId);

    if (siguienteCampo) {
    siguienteCampo.removeAttribute("disabled");

    fetchGetDynamicOptions(siguienteId);
    siguienteCampo.focus();
  }

    // Actualizar leyenda para el siguiente campo
    const leyendaSiguiente = leyendasAsociadas[siguienteId];
    if (leyendaSiguiente) {
      const leyendaElement = document.getElementById(leyendaSiguiente);
      if (leyendaElement) leyendaElement.textContent = "";
    }

    // Desactivar los campos siguientes en la secuencia
    for (let i = index + 2; i < camposSecuencia.length; i++) {
      const idCampoPosterior = camposSecuencia[i];
      const campoPosterior = document.getElementById(idCampoPosterior);
      // if (campoPosterior) {
      //   //campoPosterior.value = "";
      //   //campoPosterior.setAttribute("disabled", true);
      // }

      const idLeyenda = leyendasAsociadas[idCampoPosterior];
      if (idLeyenda) {
        const leyendaElement = document.getElementById(idLeyenda);
        //if (leyendaElement) leyendaElement.textContent = "";
      }

      const datalistId = idsDatalistPersonalizados[idCampoPosterior];
      const datalist = document.getElementById(datalistId);
      //if (datalist) datalist.innerHTML = "";
    }
  }

}



async function fetchGetDynamicOptions(campoIdParaOpciones) {
  function showAltaColorModal(messageHtml, onConfirm, onCancel) {
    document.getElementById("alta-color-message").innerHTML = messageHtml || "Ingresá el nombre del nuevo color:";
    const input = document.getElementById("nuevoColorInput");
    input.value = "";
    input.focus();

    document.getElementById("alta-color-modal").style.display = "flex";
    setTimeout(() => {
    input.focus();
    }, 50);
    const btnAceptar = document.getElementById("alta-color-accept-btn");
    const btnCancelar = document.getElementById("alta-color-cancel-btn");

    btnAceptar.onclick = function () {
      const valor = input.value.trim();
      hideAltaColorModal();

      if (onConfirm) {
        onConfirm(valor);

        // Esperá un momento antes de aplicar el focus en el próximo campo
        setTimeout(() => {
          //  Detectar el siguiente input después de codcolorFox
          const currentInput = document.getElementById("codcolorFox");
          if (currentInput) {
            const focusables = Array.from(document.querySelectorAll("input, select, textarea"))
              .filter(el => !el.disabled && el.offsetParent !== null); // visibles y habilitados

            const index = focusables.indexOf(currentInput);
            if (index !== -1 && index + 1 < focusables.length) {
              focusables[index + 1].focus();
            }
          }
        }, 100); 
      }
    };

    btnCancelar.onclick = function () {
      hideAltaColorModal();
      
      // 🔁 Volver a enfocar el input de código de color
      const inputColorCode = document.getElementById("codcolorFox");
      if (inputColorCode) {
        inputColorCode.focus();

        // ⚠️ Esto reactiva el datalist si se había perdido al abrir el modal
        setTimeout(() => {
          const event = new Event("input", { bubbles: true });
          inputColorCode.dispatchEvent(event);
        }, 100);
      }

      if (onCancel) onCancel();
    };
  }

  function hideAltaColorModal() {
    document.getElementById("alta-color-modal").style.display = "none";
  }

  if (camposNumericos.includes(campoIdParaOpciones)) {
    console.log(`⏭️ Campo numérico ignorado: ${campoIdParaOpciones}`);
    return;
  }


      document.getElementById('spinnerOverlay').style.display = 'block';

      const datosEnvio = buildDatosEnvio(campoIdParaOpciones);
      //console.log("📤 Datos a enviar en el body:", datosEnvio);
            fetch("/get_dynamic_options/", {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
              'X-CSRFToken': '{{ csrf_token }}'
            },
            body: JSON.stringify(datosEnvio)
          })
          .then(response => response.json())
          .then(data => {
            document.getElementById('spinnerOverlay').style.display = 'none';
            console.log(`📥 Datos recibidos para ${campoIdParaOpciones}:`, data);
            
            if (data.success === false) {
              const msg = data.error || data.message || "Error al cargar opciones";
              showToast(msg, "danger");
              const campo = document.getElementById(campoIdParaOpciones);
              if (campo) {
                campo.setAttribute("disabled", true);  // Deshabilita el campo
                campo.focus();
              }
              return;
              switch (data.status_code) {
                case 401:
                  showToast(msg, "danger");
                  break;
                case 404:
                  showToast(msg, "danger");
                  break;
                default:
                  showToast(msg, "danger");
              }
              return;
            }

            const datalistId = `datalist-${campoIdParaOpciones.replace("cod", "").toLowerCase()}`;
            const datalist = document.getElementById(datalistId);
            if (!datalist) return;

            datalist.innerHTML = "";

            const opciones = Array.isArray(data.opciones) ? data.opciones : [];
            opciones.forEach(op => {
              const opt = document.createElement("option");
              opt.value = op.value;
              opt.textContent = `${op.value} - ${op.label}`;
              datalist.appendChild(opt);
            });

            /////////////////////////////////
            // CASO ESPECIAL PARA COLOR //
            /////////////////////////////////
            if (campoIdParaOpciones === "codcolorFox") {
              const codcategoria = document.getElementById("codcategoriaFox")?.value?.trim();
              const inputElement = document.getElementById(campoIdParaOpciones);
              let valorSeleccionado = inputElement?.value?.trim();

              // 🛠️ Si el usuario seleccionó "ALTA", usá "000000" como valor por defecto
                if (valorSeleccionado === "ALTA") {
                  inputElement.value = "000000"; 
                  valorSeleccionado = "000000";
                  
                  // Mostrar el modal personalizado
                  showAltaColorModal(
                    `<span style="font-size: 22px;">¿Deseás ingresar un nuevo color?</span><br>
                    <span style="font-size: 22px;">Ingrese el color manualmente:</span><br>`,
                    function (nuevoColor) {
                      if (!nuevoColor) {
                        inputElement.value = "";
                        inputElement.focus();
                        const inputColor = document.getElementById("colorFox");
                        if (inputColor) inputColor.value = "";
                        showToast("Debe ingresar un nombre de color o seleccionar una opción válida.", "warning");
                        return;
                      }

                      //  Mostrar como si fuera una leyenda elegida
                      const inputColor = document.getElementById("colorFox");
                      if (inputColor) inputColor.value = nuevoColor;

                      //  También actualizamos el elemento de leyenda asociado
                      const leyendaId = leyendasAsociadas["codcolorFox"];
                      const leyendaElement = document.getElementById(leyendaId);
                      if (leyendaElement) {
                        leyendaElement.textContent = nuevoColor.toUpperCase();
                      }
                    },
                    function () {
                      // Al cancelar: se limpia el valor
                      inputElement.value = "";
                      const inputColor = document.getElementById("colorFox");
                      if (inputColor) inputColor.value = "";
                    }
                  );

                  return;
                }

              // Mostrar leyenda normalmente
              const opcionSeleccionada = data.opciones.find(op => op.value === valorSeleccionado);
              if (codcategoria === "17") {
                const inputColor = document.getElementById("colorFox");
                if (inputColor) inputColor.value = opcionSeleccionada?.label || "";
              } else {
                const divColor = document.getElementById("colorFox");
                if (divColor) divColor.textContent = opcionSeleccionada?.label || "";
              }
            }
            


            // 🆕 ACTUALIZAR LEYENDA SI CORRESPONDE
            const leyendaId = leyendasAsociadas[campoIdParaOpciones];
            if (leyendaId) {
              const inputElement = document.getElementById(campoIdParaOpciones);
              const leyendaElement = document.getElementById(leyendaId);
              if (inputElement && leyendaElement) {
              
                const valorSeleccionado = inputElement.value?.trim();
                const opcionSeleccionada = data.opciones.find(op => op.value === valorSeleccionado);
                //console.log("Valor input xxx:", valorSeleccionado);
                //console.log("Opciones recibidas xxx :", data.opciones.map(o => o.value));
                leyendaElement.textContent = opcionSeleccionada ? opcionSeleccionada.label : "";
              }
            }
            
          })
          .catch(error => {
            console.error("❌ Error en get_dynamic_options:", error);
            showToast("Error inesperado al obtener opciones dinámicas", "danger");
            document.getElementById('spinnerOverlay').style.display = 'none';
          });
        }
        // === Guardar producto ===
    const saveBtn = document.getElementById("savebtn");
    if (saveBtn) {
      saveBtn.addEventListener("click", function (e) {
        e.preventDefault();
        const payload = buildDatosEnvio(); // sin campoActual
        console.log("📦 Datos a guardar:", payload);
        fetch("/product/save/", {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
            "X-CSRFToken": "{{ csrf_token }}"
          },
          body: JSON.stringify(payload)
        })
        .then(r => r.json())
        .then(data => {
          console.log("💾 Respuesta del backend:", data);
          if (data.status_code && data.msg) {
            switch (data.status_code) {
              // estructura de case
              case 200:
                showToast(data.msg, "success");

                // Verificamos si es una combinada o doble 
                const inputMarcaComb = document.getElementById("marcacombFox");
                const inputMarcaDoble = document.getElementById("marcadobleFox");

                const valorMarcaComb  = inputMarcaComb?.value?.trim().toUpperCase();
                const valorMarcaDoble = inputMarcaDoble?.value?.trim().toUpperCase();

                // combinada 
                if (valorMarcaComb === "S") {
                  showAbmCombinadasModal(
                    function onConfirm(dataCombi) {
                      const s_codigoc = document.getElementById("s_codigoc");
                      const s_codigo = document.getElementById("s_codigo");

                      if (s_codigoc) s_codigoc.value = dataCombi.codComb;
                      if (s_codigo) s_codigo.value = dataCombi.codProd;

                      //showToast("Combinada ingresada correctamente.", "success");

                      // Opcional: pasar al siguiente campo
                      setTimeout(() => {
                        const focusables = Array.from(document.querySelectorAll("input, select, textarea"))
                          .filter(el => !el.disabled && el.offsetParent !== null);
                        const index = focusables.indexOf(inputMarcaComb);
                        if (index !== -1 && index + 1 < focusables.length) {
                          focusables[index + 1].focus();
                        }
                      }, 100);
                    },
                    function onCancel(accion) {
                      showToast("Acción cancelada o no completada.", "info");
                      setTimeout(() => {
                        inputMarcaComb.focus();
                        const event = new Event("input", { bubbles: true });
                        inputMarcaComb.dispatchEvent(event);
                      }, 100);
                    }
                  );

                  return; // ⚠️ Detener flujo posterior si ya mostramos el modal
                }

                // dobles
                if (valorMarcaDoble === "S") {
                  showAbmDoblesModal(
                    function onConfirm(dataDoble) {
                      const s_codigoc_doble = document.getElementById("s_codigoc_doble");
                      const s_codigo_doble  = document.getElementById("s_codigo_doble");

                      if (s_codigoc_doble) s_codigoc_doble.value = dataDoble.codDoble;
                      if (s_codigo_doble)  s_codigo_doble.value  = dataDoble.original?.codigo || "";

                      setTimeout(() => {
                        const focusables = Array.from(document.querySelectorAll("input, select, textarea"))
                          .filter(el => !el.disabled && el.offsetParent !== null);
                        const index = focusables.indexOf(inputMarcaDoble);
                        if (index !== -1 && index + 1 < focusables.length) {
                          focusables[index + 1].focus();
                        }
                      }, 100);
                    },
                    function onCancel(accion) {
                      showToast("Acción cancelada o no completada.", "info");
                      setTimeout(() => {
                        inputMarcaDoble.focus();
                        const event = new Event("input", { bubbles: true });
                        inputMarcaDoble.dispatchEvent(event);
                      }, 100);
                    }
                  );
                  return; // ⚠️ Detener flujo posterior
                }


                limpiarCamposProducto();
                document.getElementById("codeFox").value = "";
                document.getElementById("codeFox")?.focus();
                break;
              case 400:
                showToast(data.msg, "danger");
                break;
              case 401:
                showToast(data.msg, "warning");
                break;
              case 500:
                showToast(data.msg, "danger");
                break;
              default:
                showToast(data.msg, "info");
            }
            return; // salir aquí para no ejecutar el flujo normal
          }
          if (data.success) {
            showToast("Producto guardado correctamente", "success");
          } else {
            showToast(data.message || "Error al guardar el producto", "danger");
          }
        })
        .catch(err => {
          console.error("❌ Error al guardar:", err);
          showToast("Error de conexión", "danger");
        });
      });
    }
  });


/**** manejo del modal codigos de combinadas  ****/ 
  
function showAbmCombinadasModal(onConfirm, onCancel) {
  const modo = 1; 
  const codigoCombinadaInput = document.getElementById("codigoCombinadaInput");
  const cantidadInput        = document.getElementById("cantidadInput");
  const addProductoInput     = document.getElementById("addProductoInput");
  const btnAgregarItemComb   = document.getElementById("btnAgregarItemComb");
  const listaItemsCombi      = document.getElementById("listaItemsCombi");

  const btnGrabar    = document.getElementById("btnGrabarComb");
  const btnEliminar  = document.getElementById("btnEliminarComb");
  const btnConsultar = document.getElementById("btnConsultarComb");
  const btnCerrar    = document.getElementById("cerrarAbmCombinadasModal");

  // Estado local solo para render; el backend mantiene la lista real en sesión
  let items = [];

  // Setea código combinada (desde codeFox) y bloquea
  const codigoActual = document.getElementById("codeFox")?.value?.trim();
  if (codigoCombinadaInput) {
    codigoCombinadaInput.value = codigoActual || "";
    codigoCombinadaInput.setAttribute("disabled", true);
  }

  // Mostrar modal
  document.getElementById("abm-combinadas-modal").style.display = "flex";
  setTimeout(() => { addProductoInput.focus(); }, 50);

  // Render de la lista
  function renderItems() {
    listaItemsCombi.innerHTML = "";
    if (!items.length) {
      const span = document.createElement("span");
      span.className = "text-gray-500";
      span.textContent = "Sin productos agregados.";
      listaItemsCombi.appendChild(span);
      return;
    }
    items.forEach((it, idx) => {
      const chip = document.createElement("div");
      chip.className =
        "inline-flex items-center gap-2 px-2 py-1 mr-2 mb-2 rounded border";

      // Código y descripción (igual que hoy)
      chip.innerHTML = `
        <strong>${it.codigo}</strong>
        <span style="margin-left:8px;">${it.descrip || ""}</span>
      `;

      // Cantidad editable
      const qty = document.createElement("input");
      qty.type = "number";
      qty.value = it.cantidad ?? 0;
      qty.min = 1;
      qty.style.width = "40px";
      qty.style.height = "22px";
      qty.style.marginLeft = "16px";
      qty.style.fontWeight = "bold";
      qty.style.fontSize = "0.85rem";
      qty.style.padding = "0 2px";

      qty.onchange = (e) => {
        items[idx].cantidad = parseInt(e.target.value, 10) || 0;
      };
      chip.appendChild(qty);

      // Botón eliminar
      const x = document.createElement("span");
      x.className = "bi bi-trash-fill text-danger cursor-pointer ml-2";
      x.title = "Eliminar";
      x.style.fontSize = "1rem";
      x.onclick = () => {
        items.splice(idx, 1);
        renderItems();
        //btnGrabar.setAttribute("disabled", true);
        if (items.length === 0) {
          btnGrabar.setAttribute("disabled", true);
        } else {
          btnGrabar.removeAttribute("disabled");
        }
      };
      chip.appendChild(x);

      listaItemsCombi.appendChild(chip);
    });
  }

  // Habilitar botón Agregar si hay input válido
  function toggleAgregarButton() {
    const v = addProductoInput.value.trim();
    if (v.length > 0) btnAgregarItemComb.removeAttribute("disabled");
    else btnAgregarItemComb.setAttribute("disabled", true);
  }
  addProductoInput.addEventListener("input", toggleAgregarButton);
  toggleAgregarButton();

  // Enviar un código al backend para acumular en sesión y obtener descrip
  // Nueva versión reducida
function sendCodeFromAbmComb() {

  const codComb  = codigoCombinadaInput.value.trim();
  const codProd  = addProductoInput.value.trim();
  const cantidad = parseInt(cantidadInput.value.trim(), 10) || 0;

  if (!codComb)        return showToast("Falta el código de combinada", "warning");
  if (!codProd)        return showToast("Ingresá un código", "warning");
  if (cantidad <= 0)   return showToast("Cantidad inválida", "warning");

  // Verificar que no esté repetido
  if (items.some(i => i.codigo === codProd)) {
    showToast("Ese producto ya fue agregado.", "warning");
    return;
  }

  fetch("/product/abm_combinadas/", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      "X-CSRFToken": "{{ csrf_token }}"
    },
    body: JSON.stringify({
      w_consul: "X",
      w_modo: 1,
      cod_comb: codComb,
      w_paramcod: codProd
    }),
  })
  .then(r => r.json())
  .then(data => {
    if (data.status_code === 200 && data.success) {
      const descrip = (data.items && data.items[0]?.descrip) || "";
      items.push({ codigo: codProd, descrip, cantidad });
      renderItems();
      showToast("Código agregado", "success");
      addProductoInput.value = "";
      cantidadInput.value = "";
      toggleAgregarButton();
      btnGrabar.removeAttribute("disabled");
      addProductoInput.focus();
    } else {
      showToast(data.msg || "Código no válido", "danger");
    }
  })
  .catch(err => {
    console.error("❌ Error al buscar código:", err);
    showToast("Error de conexión", "danger");
  });
}

  // Click en Agregar
  btnAgregarItemComb.onclick = () => {
    sendCodeFromAbmComb();
  };

  // Enter en campo de código → pasa a cantidad
  addProductoInput.addEventListener("keydown", (e) => {
    if (e.key === "Enter") {
      e.preventDefault();
      cantidadInput.focus();
    }
  });

  // Enter en cantidad → pasa a botón Agregar
  cantidadInput.addEventListener("keydown", (e) => {
    if (e.key === "Enter") {
      e.preventDefault();
      btnAgregarItemComb.focus();
    }
  });

  // Enter en el botón → agregar y volver a input de código
  btnAgregarItemComb.addEventListener("keydown", (e) => {
    if (e.key === "Enter") {
      e.preventDefault();
      sendCodeFromAbmComb();
    }
  });

  // Grabar final: pide validación definitiva al backend
  btnGrabar.onclick = function () {
  const codComb = codigoCombinadaInput.value.trim();

  if (!codComb) return showToast("Falta el código", "warning");

  // Validar que haya al menos un producto
  if (!items.length) return showToast("Debe agregar al menos un producto", "warning");

  // Validar que todos los productos tengan cantidad válida (mínimo 1)
  const productoConCantidadInvalida = items.find(i => !i.cantidad || i.cantidad <= 0);
  if (productoConCantidadInvalida) {
    return showToast(`Cantidad inválida para el producto ${productoConCantidadInvalida.codigo}`, "warning");
  }

  // Enviar al backend
  fetch("/product/abm_combinadas/", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      "X-CSRFToken": "{{ csrf_token }}"
    },
    body: JSON.stringify({
      w_consul: "X",
      w_modo: 1,
      cod_comb: codComb,
      validar: true,
      items: items  // ← Enviamos toda la lista con códigos y cantidades
    }),
  })
  .then(r => r.json())
  .then(data => {
    if (data.status_code === 200 && data.success) {
      hideAbmCombinadasModal();
      showToast(data.msg || "Combinada validada correctamente", "success");
      const confirmedItems = Array.isArray(data.items) ? data.items : items;
      if (onConfirm) onConfirm({ codComb, items: confirmedItems });
      limpiarCamposProducto();
      document.getElementById("codeFox").value = "";
      document.getElementById("codeFox")?.focus();
      
    } else {
      // Error en validación final del backend
      showToast(data.msg || "Error en validación final de combinada.", "danger");
    }
  })
  .catch(err => {
    console.error("❌ Error al grabar/validar definitivamente:", err);
    showToast("Error de conexión con el servidor", "danger");
  });
};

  // Otros botones
  // btnEliminar.onclick  = () => { if (onCancel) onCancel("eliminar"); };
  // btnConsultar.onclick = () => { if (onCancel) onCancel("consultar"); };
  if (btnCerrar) {
  btnCerrar.onclick = () => {
  const codComb = codigoCombinadaInput?.value?.trim();
  
  if (modo === 1 && codComb && items.length === 0) {
    // Cancelación de combinada nueva → limpiar marca
    fetch("/product/abm_combinadas/", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "X-CSRFToken": "{{ csrf_token }}"
      },
      body: JSON.stringify({
        w_consul: "X",
        w_modo: 1,
        cod_comb: codComb,
        cancelar: true  // ← nuevo flag que detectás en backend
      })
    })
    .then(res => res.json())
    .then(data => {
      if (data && data.msg) {
        showToast(data.msg, data.success === false ? "warning" : "success");
      }
      hideAbmCombinadasModal();
    })
    .catch(err => {
      console.error("❌ Error al cancelar combinada:", err);
      hideAbmCombinadasModal();
    });
  } else {
    hideAbmCombinadasModal();
  }
};
}

  // Inicial
  renderItems();
  btnGrabar.setAttribute("disabled", true);
}

function hideAbmCombinadasModal() {
  document.getElementById("abm-combinadas-modal").style.display = "none";
}

/**** fin manejo del modal de combinadas  ****/



/**** manejo del modal codigos dobles   ****/

function showAbmDoblesModal(onConfirm, onCancel) {
  const modo = 1;
  const codigoDobleInput   = document.getElementById("codigoDobleInput");
  const addProductoInput   = document.getElementById("addProductoInputDoble");
  const btnAgregarItem     = document.getElementById("btnAgregarItemDoble");
  const itemOriginalDiv    = document.getElementById("ItemOriginal");
  const listaItemDoblesDiv = document.getElementById("listaItemDobles");

  const btnGrabar = document.getElementById("btnGrabarDoble");
  const btnCerrar = document.getElementById("cerrarAbmDoblesModal");

  // Estado local: un único código original
  let original = null;

  // Setea código doble (desde codeFox) y bloquea
  const codigoActual = document.getElementById("codeFox")?.value?.trim();
  if (codigoDobleInput) {
    codigoDobleInput.value = codigoActual || "";
    codigoDobleInput.setAttribute("disabled", true);
  }

  // Mostrar modal
  document.getElementById("abm-dobles-modal").style.display = "flex";
  setTimeout(() => { addProductoInput.focus(); }, 50);

  // Render producto original
  function renderOriginal() {
    itemOriginalDiv.innerHTML = "";
    if (!original) {
      const span = document.createElement("span");
      span.className = "text-gray-500";
      span.textContent = "Falta agregar producto original.";
      itemOriginalDiv.appendChild(span);
      btnGrabar.setAttribute("disabled", true);
      return;
    }

    const chip = document.createElement("div");
    chip.className = "inline-flex items-center gap-2 px-2 py-1 mr-2 mb-2 rounded border";
    chip.innerHTML = `
      <strong>${original.codigo}</strong>
      <span style="margin-left:8px;">${original.descrip || ""}</span>
    `;

    // Botón eliminar (para permitir reingresar otro original)
    const x = document.createElement("span");
    x.className = "bi bi-trash-fill text-danger cursor-pointer ml-2";
    x.title = "Eliminar";
    x.style.fontSize = "1rem";
    x.onclick = () => {
      original = null;
      renderOriginal();
      listaItemDoblesDiv.innerHTML = "<span class='text-gray-500'></span>";
      listaItemDoblesDiv.hidden = true;
    };
    chip.appendChild(x);

    itemOriginalDiv.appendChild(chip);
    btnGrabar.removeAttribute("disabled");
  }

  // Render lista de dobles asignados
  function renderDobles(lista) {
  const divTabla = document.getElementById("contenedorTablaDobles");
  const spanPT = document.getElementById("codigoOriginalTexto");

  if (!lista || lista.length === 0) {
    divTabla.style.display = "none";
    return;
  }

  divTabla.style.display = "block";
  spanPT.textContent = original?.codigo || "";

  const table = new Tabulator("#tablaDobles", {
    layout: "fitDataStretch",
    // pagination: "local",
    // paginationSize: 5,
    // paginationSizeSelector: [5, 10, 20],
    // paginationCounter: "rows",
    movableColumns: true,
    reactiveData: true,
    locale: true,
    data: lista,
    columns: [
  {
    title: "Código",
    field: "codigo",
    hozAlign: "center",
    sorter: "string",
    minWidth: 100,
    formatter: cell => `<span style="font-size: 13px !important;">${cell.getValue()}</span>`
  },
  {
    title: "Descripción",
    field: "descrip",
    hozAlign: "left",
    sorter: "string",
    minWidth: 300,
    formatter: cell => `<span style="font-size: 13px !important;">${cell.getValue()}</span>`
  },
  {
    title: "Categoría",
    field: "categoria",
    hozAlign: "center",
    sorter: "number",
    minWidth: 100,
    formatter: cell => `<span style="font-size: 13px !important;">${cell.getValue()}</span>`
  },
  {
    title: "Especial",
    field: "especial",
    hozAlign: "center",
    sorter: "string",
    minWidth: 100,
    formatter: cell => `<span style="font-size: 13px !important;">${cell.getValue() || ''}</span>`
  },
  {
    title: "Observación",
    field: "observ_dob",
    hozAlign: "center",
    sorter: "string",
    minWidth: 150,
    formatter: cell => `<span style="font-size: 13px !important;">${cell.getValue() || ''}</span>`
  }
],
    
langs: {
      // es: {
       // pagination: {
       //   first: "Primera",
       //   first_title: "Primera página",
       //   last: "Última",
       //   last_title: "Última página",
       //   prev: "Anterior",
       //   prev_title: "Página anterior",
       //   next: "Siguiente",
       //   next_title: "Página siguiente",
       //   counter: {
       //     showing: "Mostrando",
       //     of: "de",
       //     rows: "filas",
       //     pages: "páginas"
       //   }
       // }
      // }
    }
  });

  // Exportadores
  document.getElementById("download-csv").onclick = () => table.download("csv", "dobles.csv");
  document.getElementById("download-xlsx").onclick = () => table.download("xlsx", "dobles.xlsx", { sheetName: "Dobles" });
  document.getElementById("download-pdf").onclick = () =>
    table.download("pdf", "dobles.pdf", {
      orientation: "portrait",
      title: "Códigos Dobles Asociados",
    });
}

  // Validar input y habilitar botón agregar
  function toggleAgregarButton() {
    const v = addProductoInput.value.trim();
    if (v.length > 0) btnAgregarItem.removeAttribute("disabled");
    else btnAgregarItem.setAttribute("disabled", true);
  }
  addProductoInput.addEventListener("input", toggleAgregarButton);
  toggleAgregarButton();

  // Enviar código original al backend
  function sendCodeFromAbmDouble() {
    const codDoble = codigoDobleInput.value.trim();
    const codOriginal = addProductoInput.value.trim();

    if (!codDoble) return showToast("Falta el código de doble", "warning");
    if (!codOriginal) return showToast("Ingresá un código original", "warning");

    fetch("/product/abm_dobles/", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "X-CSRFToken": "{{ csrf_token }}"
      },
      body: JSON.stringify({
        w_consul: "X",
        w_modo: 1,
        cod_doble: codDoble,
        cod_original: codOriginal
      }),
    })
    .then(r => r.json())
    .then(data => {
      if (data.status_code === 200 && data.success) {
        const descrip = data.original?.descrip || "";
        original = { codigo: codOriginal, descrip };
        renderOriginal();
        renderDobles(data.dobles || []); // ← lista de dobles ya asignados
        showToast("Código original agregado", "success");
        addProductoInput.value = "";
        toggleAgregarButton();
      } else {
        showToast(data.msg || "Código no válido", "danger");
      }
    })
    .catch(err => {
      console.error("❌ Error al buscar código original:", err);
      showToast("Error de conexión", "danger");
    });
  }

  // Click en Agregar
  btnAgregarItem.onclick = () => sendCodeFromAbmDouble();

  // Enter en input → ejecutar agregar
  addProductoInput.addEventListener("keydown", (e) => {
    if (e.key === "Enter") {
      e.preventDefault();
      sendCodeFromAbmDouble();
    }
  });

  // Grabar final
  btnGrabar.onclick = function () {
    const codDoble = codigoDobleInput.value.trim();
    if (!codDoble) return showToast("Falta el código de doble", "warning");
    if (!original) return showToast("Debe agregar un producto original", "warning");

    // Enviar al backend validación definitiva
    fetch("/product/abm_dobles/", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "X-CSRFToken": "{{ csrf_token }}"
      },
      body: JSON.stringify({
        w_consul: "X",
        w_modo: 1,
        cod_doble: codDoble,
        validar: true,
        original: original
      }),
    })
    .then(r => r.json())
    .then(data => {
      if (data.status_code === 200 && data.success) {
        hideAbmDoblesModal();
        showToast(data.msg || "Doble validado correctamente", "success");
        if (onConfirm) onConfirm({ codDoble, original });
        limpiarCamposProducto();
        document.getElementById("codeFox").value = "";
        document.getElementById("codeFox")?.focus();
      } else {
        showToast(data.msg || "Error en validación final de doble.", "danger");
      }
    })
    .catch(err => {
      console.error("❌ Error al grabar doble:", err);
      showToast("Error de conexión con el servidor", "danger");
    });
  };

  // Cerrar modal
  if (btnCerrar) {
    btnCerrar.onclick = () => {
      hideAbmDoblesModal();
    };
  }

  // Inicial
  renderOriginal();
  btnGrabar.setAttribute("disabled", true);
}

function hideAbmDoblesModal() {
  document.getElementById("abm-dobles-modal").style.display = "none";
}


/****  fin manejo del modal codigos dobles   ****/



function limpiarCamposProducto() {
  const campos = camposSecuencia;

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

    // También limpiamos la leyenda asociada si existe
    const leyendaId = leyendasAsociadas[id];
    if (leyendaId) {
      const leyendaEl = document.getElementById(leyendaId);
      if (leyendaEl) {
        leyendaEl.textContent = "";
      }
    }
  });

  // Limpiar adicionales que no están en camposSecuencia
  const extras = ["empFox", "descripMatFox", "colorFox", "cabFox", "provFox", "sexoFox", "targetFox", "puntoprecFox", "procdFox", "origenFox", "formaptFox", "canalFox", "fechaAltaFox", "volumenFox"];
  extras.forEach(id => {
    const el = document.getElementById(id);
    if (el) {
      if (["INPUT", "TEXTAREA", "SELECT"].includes(el.tagName)) {
        el.value = "";
      } else {
        el.textContent = "";
      }
    }
  });
}



</script>

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


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

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









{% endblock %}