{% 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;">
</div>

  <!-- Page Header -->

<!-- Page Header Close -->





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

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



  

#descripFox,
#descripFox2,
#divisionFox,
#subdFox,
#categoriaFox,
#sublineaFox,
#tsublFox,
#caractFox,
#segmentoFox,
#conceptoFox,
#packagingFox,
#env2Fox,
#elaboracFox,
#fabricFox,
#coddivisionFox,
#codsubDFox,
#codcategoriaFox,
#codsublineaFox,
#codtsublFox,
#codcaractFox,
#codsegmentoFox,
#codconceptoFox,
#codpackagingFox,
#codenv2Fox,
#codelaboracFox,
#codfabricFox,
#codcolencFox,
#colencFox,
#talleFox,
#idespFox,
#codtalleFox,
#codcondcomFox,
#condcomFox,
#codcuotasFox,
#codmatFox,
#descripMatFox,
#codcolorFox,
#colorFox,
#codlineaFox,
#lineaFox,
#apFox,
#cabFox,
#provFox,
#codapFox,
#codcabFox,
#codprovFox,
#codsexoFox,
#sexoFox,
#codtargetFox,
#targetFox,
#codpuntoprecFox,
#puntoprecFox,
#codprocdFox,
#procdFox,
#codorigenFox,
#origenFox,
#formaptFox,
#codformaptFox,
#codidespFox,
#bolsaestFox,
#pesoFox,
#altoFox,
#largoFox,
#anchoFox,
#volumenFox,
#camplanzFox,
#campbajaFox,
#marcacombFox,
#marcadobleFox,
#consigFox,
#estadoFox,
#codcanalFox,
#canalFox,
#fechaAltaFox,
#codEmpFox,
#empFox,
#codMKEmpFox,
#codeFox
 {
  font-size: 0.875rem !important;
  border: 1px solid #ccc !important;
  border-radius: 5px !important;
  border-color: rgb(113, 112, 112)!important;
}

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



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

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

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

      <div class="box">
        <div class="box-header">
          <h5 class="box-title" style="text-align: center;">Exportación de Datos</h5>
        </div>

        <div class="box-body space-y-3">
            
            <div class="grid grid-cols-12 gap-2">
                

                </div>

            <div class="col-span-12 grid grid-cols-12 gap-2">
              <div class="col-span-12 sm:col-span-1 flex gap-2">
                    
              </div>  
              <div class="col-span-12 sm:col-span-7 flex gap-2">
                    <label class="whitespace-nowrap"><br><br>Elija los datos que necesita exportar...</label><br>
                </div>
                <div class="col-span-12 sm:col-span-4 flex items-center gap-2">
                    <label class="whitespace-nowrap">Ingrese Camp y Año Desde</label>
                    <input type="text" class="form-control" id="cam_from_day" name="cam_from_day" required placeholder="NN">
                    <input type="text" class="form-control" id="cam_from_year" name="cam_from_year" required placeholder="AAAA">
                </div>
            </div>
            <div class="col-span-12 grid grid-cols-12 gap-2">
                <div class="col-span-12 sm:col-span-2 flex gap-2">
                  
                </div>
                <div class="col-span-12 sm:col-span-6 flex gap-2">
                  
                </div>
                <div class="col-span-12 sm:col-span-4 flex items-center gap-2">
                    <label class="whitespace-nowrap">Ingrese Camp y Año Hasta</label>
                    <input type="text" class="form-control" id="cam_to_day" name="cam_to_day" required placeholder="NN">
                    <input type="text" class="form-control" id="cam_to_year" name="cam_to_year" required placeholder="AAAA">
                </div>
            </div>
            <div class="col-span-12 grid grid-cols-12 gap-2">
                <div class="col-span-12 sm:col-span-2 flex gap-2">
                  
                </div>
                <div class="col-span-12 sm:col-span-6 flex gap-2">
                  <input class="form-check-input ms-2" id="all_checkbox" name="all_checkbox" type="checkbox" value=""> Seleccionar Todos
                </div>
                <div class="col-span-12 sm:col-span-4 flex items-center gap-2">
                    
                </div>
            </div>

            <div class="col-span-12 grid grid-cols-12 gap-2">
              <div class="col-span-12 sm:col-span-1 flex gap-2">
                    
              </div>
              <div class="col-span-12 sm:col-span-2 flex gap-2">
                <input disabled class="form-check-input ms-2" type="checkbox" value="" checked id="inp_codigo" name="inp_codigo">
                Código
              </div>
            </div>

            <div class="col-span-12 grid grid-cols-12 gap-2">
              <div class="col-span-12 sm:col-span-1 flex gap-2">
              </div>
              <div class="col-span-12 sm:col-span-2 flex gap-2">
                <input class="form-check-input ms-2" type="checkbox" value="" checked id="inp_division" name="inp_division"> División
              </div>
              <div class="col-span-12 sm:col-span-2 flex gap-2">
                <input class="form-check-input ms-2" type="checkbox" value="" checked id="inp_sub_division" name="inp_sub_division"> Sub_División
              </div>
              <div class="col-span-12 sm:col-span-2 flex gap-2">
                <input class="form-check-input ms-2" type="checkbox" value="" checked id="inp_segmento" name="inp_segmento"> Segmento
              </div>
              <div class="col-span-12 sm:col-span-2 flex gap-2">
                <input class="form-check-input ms-2" type="checkbox" value="" checked id="inp_forma_pt" name="inp_forma_pt"> Forma PT
              </div>
              <div class="col-span-12 sm:col-span-2 flex gap-2">
                <input class="form-check-input ms-2" type="checkbox" value="" checked id="inp_target" name="inp_target"> Target
              </div>
            </div>

            <div class="col-span-12 grid grid-cols-12 gap-2">
              <div class="col-span-12 sm:col-span-1 flex gap-2">
              </div>
              <div class="col-span-12 sm:col-span-2 flex gap-2">
                <input class="form-check-input ms-2" type="checkbox" value="" checked id="inp_descripcion" name="inp_descripcion"> Descripción
              </div>
              <div class="col-span-12 sm:col-span-2 flex gap-2">
                <input class="form-check-input ms-2" type="checkbox" value="" checked id="inp_categoria" name="inp_categoria"> Categoría
              </div>
              <div class="col-span-12 sm:col-span-2 flex gap-2">
                <input class="form-check-input ms-2" type="checkbox" value="" checked id="inp_procedencia" name="inp_procedencia"> Procedencia
              </div>
              <div class="col-span-12 sm:col-span-2 flex gap-2">
                <input class="form-check-input ms-2" type="checkbox" value="" checked id="inp_cod_medida" name="inp_cod_medida"> Cod Medida
              </div>
              <div class="col-span-12 sm:col-span-2 flex gap-2">
                <input class="form-check-input ms-2" type="checkbox" value="" checked id="inp_cuotas" name="inp_cuotas"> Cuotas
              </div>
            </div>

            <div class="col-span-12 grid grid-cols-12 gap-2">
              <div class="col-span-12 sm:col-span-1 flex gap-2">
              </div>
              <div class="col-span-12 sm:col-span-2 flex gap-2">
                <input class="form-check-input ms-2" type="checkbox" value="" checked id="inp_linea" name="inp_linea"> Línea
              </div>
              <div class="col-span-12 sm:col-span-2 flex gap-2">
                <input class="form-check-input ms-2" type="checkbox" value="" checked id="inp_sub_linea" name="inp_sub_linea"> Sub Línea
              </div>
              <div class="col-span-12 sm:col-span-2 flex gap-2">
                <input class="form-check-input ms-2" type="checkbox" value="" checked id="inp_tipo_de_subl" name="inp_tipo_de_subl"> Tipo de Subl.
              </div>
              <div class="col-span-12 sm:col-span-2 flex gap-2">
                <input class="form-check-input ms-2" type="checkbox" value="" checked id="inp_peso" name="inp_peso"> Peso
              </div>
              <div class="col-span-12 sm:col-span-2 flex gap-2">
                <input class="form-check-input ms-2" type="checkbox" value="" checked id="inp_cond_compra" name="inp_cond_compra"> Cond. Compra
              </div>
            </div>

            <div class="col-span-12 grid grid-cols-12 gap-2">
              <div class="col-span-12 sm:col-span-1 flex gap-2">
              </div>
              <div class="col-span-12 sm:col-span-2 flex gap-2">
                <input class="form-check-input ms-2" type="checkbox" value="" checked id="inp_uxp_estimado" name="inp_uxp_estimado"> UxP Estimado
              </div>
              <div class="col-span-12 sm:col-span-2 flex gap-2">
                <input class="form-check-input ms-2" type="checkbox" value="" checked id="inp_uxp_real" name="inp_uxp_real"> UxP Real
              </div>
              <div class="col-span-12 sm:col-span-2 flex gap-2">
                <input class="form-check-input ms-2" type="checkbox" value="" checked id="inp_uxp_facturado" name="inp_uxp_facturado"> UxP Facturado
              </div>
              <div class="col-span-12 sm:col-span-2 flex gap-2">
                <input class="form-check-input ms-2" type="checkbox" value="" checked id="inp_alto" name="inp_alto"> Alto
              </div>
              <div class="col-span-12 sm:col-span-2 flex gap-2">
                <input class="form-check-input ms-2" type="checkbox" value="" checked id="inp_ord_media_est" name="inp_ord_media_est"> Ord.Media Est
              </div>
            </div>

            <div class="col-span-12 grid grid-cols-12 gap-2">
              <div class="col-span-12 sm:col-span-1 flex gap-2">
              </div>
              <div class="col-span-12 sm:col-span-2 flex gap-2">
                <input class="form-check-input ms-2" type="checkbox" value="" checked id="inp_unid_estim" name="inp_unid_estim"> Unid Estim
              </div>
              <div class="col-span-12 sm:col-span-2 flex gap-2">
                <input class="form-check-input ms-2" type="checkbox" value="" checked id="inp_unid_vendidas" name="inp_unid_vendidas"> Unid Vendidas
              </div>
              <div class="col-span-12 sm:col-span-2 flex gap-2">
                <input class="form-check-input ms-2" type="checkbox" value="" checked id="inp_unid_fact" name="inp_unid_fact"> Unid. Fact.
              </div>
              <div class="col-span-12 sm:col-span-2 flex gap-2">
                <input class="form-check-input ms-2" type="checkbox" value="" checked id="inp_largo" name="inp_largo"> Largo
              </div>
              <div class="col-span-12 sm:col-span-2 flex gap-2">
                <input class="form-check-input ms-2" type="checkbox" value="" checked id="inp_ord_media_real" name="inp_ord_media_real"> Ord.Media Real
              </div>
            </div>

            <div class="col-span-12 grid grid-cols-12 gap-2">
              <div class="col-span-12 sm:col-span-1 flex gap-2">
              </div>
              <div class="col-span-12 sm:col-span-2 flex gap-2">
                <input class="form-check-input ms-2" type="checkbox" value="" checked id="inp_tipo_de_oferta" name="inp_tipo_de_oferta"> Tipo de Oferta
              </div>
              <div class="col-span-12 sm:col-span-2 flex gap-2">
                <input class="form-check-input ms-2" type="checkbox" value="" checked id="inp_consignacion" name="inp_consignacion"> Consignación
              </div>
              <div class="col-span-12 sm:col-span-2 flex gap-2">
                <input class="form-check-input ms-2" type="checkbox" value="" checked id="inp_grupo_fabric" name="inp_grupo_fabric"> Grupo Fabric
              </div>
              <div class="col-span-12 sm:col-span-2 flex gap-2">
                <input class="form-check-input ms-2" type="checkbox" value="" checked id="inp_ancho" name="inp_ancho"> Ancho
              </div>
              <div class="col-span-12 sm:col-span-2 flex gap-2">
                <input class="form-check-input ms-2" type="checkbox" value="" checked id="inp_uxp_tag" name="inp_uxp_tag"> UxP Tag
              </div>
            </div>

            <div class="col-span-12 grid grid-cols-12 gap-2">
              <div class="col-span-12 sm:col-span-1 flex gap-2">
              </div>
              <div class="col-span-12 sm:col-span-2 flex gap-2">
                <input class="form-check-input ms-2" type="checkbox" value="" checked id="inp_precio_de_oferta" name="inp_precio_de_oferta"> Precio de Oferta
              </div>
              <div class="col-span-12 sm:col-span-2 flex gap-2">
                <input class="form-check-input ms-2" type="checkbox" value="" checked id="inp_cabecera" name="inp_cabecera"> Cabecera
              </div>
              <div class="col-span-12 sm:col-span-2 flex gap-2">
                <input class="form-check-input ms-2" type="checkbox" value="" checked id="inp_elaboracion" name="inp_elaboracion"> Elaboración
              </div>
              <div class="col-span-12 sm:col-span-2 flex gap-2">
                <input class="form-check-input ms-2" type="checkbox" value="" checked id="inp_volumen" name="inp_volumen"> Volumen
              </div>
              <div class="col-span-12 sm:col-span-2 flex gap-2">
                <input class="form-check-input ms-2" type="checkbox" value="" checked id="inp_unid_tag" name="inp_unid_tag"> Unid Tag
              </div>
            </div>

            <div class="col-span-12 grid grid-cols-12 gap-2">
              <div class="col-span-12 sm:col-span-1 flex gap-2">
              </div>
              <div class="col-span-12 sm:col-span-2 flex gap-2">
                <input class="form-check-input ms-2" type="checkbox" value="" checked id="inp_precio_normal" name="inp_precio_normal"> Precio Nacional
              </div>
              <div class="col-span-12 sm:col-span-2 flex gap-2">
                <input class="form-check-input ms-2" type="checkbox" value="" checked id="inp_coeficiente" name="inp_coeficiente"> Coeficiente
              </div>
              <div class="col-span-12 sm:col-span-2 flex gap-2">
                <input class="form-check-input ms-2" type="checkbox" value="" checked id="inp_packaging" name="inp_packaging"> Packaging
              </div>
              <div class="col-span-12 sm:col-span-2 flex gap-2">
                <input class="form-check-input ms-2" type="checkbox" value="" checked id="inp_talle_tamano" name="inp_talle_tamano"> Talle Tamaño
              </div>
              <div class="col-span-12 sm:col-span-2 flex gap-2">
                <input class="form-check-input ms-2" type="checkbox" value="" checked id="inp_pedidos_estm" name="inp_pedidos_estm"> Pedidos Estm
              </div>
            </div>

            <div class="col-span-12 grid grid-cols-12 gap-2">
              <div class="col-span-12 sm:col-span-1 flex gap-2">
              </div>
              <div class="col-span-12 sm:col-span-2 flex gap-2">
                <input class="form-check-input ms-2" type="checkbox" value="" checked id="inp_margen_estimado" name="inp_margen_estimado"> Margen Estimado
              </div>
              <div class="col-span-12 sm:col-span-2 flex gap-2">
                <input class="form-check-input ms-2" type="checkbox" value="" checked id="inp_margen_real" name="inp_margen_real"> Margen Real
              </div>
              <div class="col-span-12 sm:col-span-2 flex gap-2">
                <input class="form-check-input ms-2" type="checkbox" value="" checked id="inp_envase_do_crit" name="inp_envase_do_crit"> Envase 2do Crit
              </div>
              <div class="col-span-12 sm:col-span-2 flex gap-2">
                <input class="form-check-input ms-2" type="checkbox" value="" checked id="inp_color" name="inp_color"> Color
              </div>
              <div class="col-span-12 sm:col-span-2 flex gap-2">
                <input class="form-check-input ms-2" type="checkbox" value="" checked id="inp_pedidos_reales" name="inp_pedidos_reales"> Pedidos Reales
              </div>
            </div>

            <div class="col-span-12 grid grid-cols-12 gap-2">
              <div class="col-span-12 sm:col-span-1 flex gap-2">
              </div>
              <div class="col-span-12 sm:col-span-2 flex gap-2">
                <input class="form-check-input ms-2" type="checkbox" value="" checked id="inp_costo_estimado" name="inp_costo_estimado"> Costo Estimado
              </div>
              <div class="col-span-12 sm:col-span-2 flex gap-2">
                <input class="form-check-input ms-2" type="checkbox" value="" checked id="inp_costo_real" name="inp_costo_real"> Costo Real
              </div>
              <div class="col-span-12 sm:col-span-2 flex gap-2">
                <input class="form-check-input ms-2" type="checkbox" value="" checked id="inp_canal" name="inp_canal"> Canal
              </div>
              <div class="col-span-12 sm:col-span-2 flex gap-2">
                <input class="form-check-input ms-2" type="checkbox" value="" checked id="inp_material_tela" name="inp_material_tela"> Material/Tela
              </div>
              <div class="col-span-12 sm:col-span-2 flex gap-2">
              </div>
            </div>

            <div class="col-span-12 grid grid-cols-12 gap-2">
              <div class="col-span-12 sm:col-span-1 flex gap-2">
              </div>
              <div class="col-span-12 sm:col-span-2 flex gap-2">
                <input class="form-check-input ms-2" type="checkbox" value="" checked id="inp_fact_estimado" name="inp_fact_estimado"> Fact. Estimado
              </div>
              <div class="col-span-12 sm:col-span-2 flex gap-2">
                <input class="form-check-input ms-2" type="checkbox" value="" checked id="inp_fact_real" name="inp_fact_real"> Fact. Real
              </div>
              <div class="col-span-12 sm:col-span-2 flex gap-2">
                <input class="form-check-input ms-2" type="checkbox" value="" checked id="inp_fact_fact" name="inp_fact_fact"> Fact. Fact.
              </div>
              <div class="col-span-12 sm:col-span-2 flex gap-2">
                <input class="form-check-input ms-2" type="checkbox" value="" checked id="inp_caracterist" name="inp_caracterist"> Caracterist
              </div>
              <div class="col-span-12 sm:col-span-2 flex gap-2">
              </div>
            </div>

            <div class="col-span-12 grid grid-cols-12 gap-2">
              <div class="col-span-12 sm:col-span-1 flex gap-2">
              </div>
              <div class="col-span-12 sm:col-span-2 flex gap-2">
                <input class="form-check-input ms-2" type="checkbox" value="" checked id="inp_empresa" name="inp_empresa"> Empresa
              </div>
              <div class="col-span-12 sm:col-span-2 flex gap-2">
                <input class="form-check-input ms-2" type="checkbox" value="" checked id="inp_multi_empresa" name="inp_multi_empresa"> Multi-Empresa
              </div>
              <div class="col-span-12 sm:col-span-2 flex gap-2">
                <input class="form-check-input ms-2" type="checkbox" value="" checked id="inp_equivalencia_mk" name="inp_equivalencia_mk"> Equivalencia MK
              </div>
              <div class="col-span-12 sm:col-span-2 flex gap-2">
                <input class="form-check-input ms-2" type="checkbox" value="" checked id="inp_coleccion" name="inp_coleccion"> Colección
              </div>
              <div class="col-span-12 sm:col-span-2 flex gap-2">
              </div>
            </div>

            <div class="col-span-12 grid grid-cols-12 gap-2">
              <div class="col-span-12 sm:col-span-1 flex gap-2">
              </div>
              <div class="col-span-12 sm:col-span-2 flex gap-2">
                <input class="form-check-input ms-2" type="checkbox" value="" checked id="inp_nro_de_pagina" name="inp_nro_de_pagina"> Nro de Página
              </div>
              <div class="col-span-12 sm:col-span-2 flex gap-2">
                <input class="form-check-input ms-2" type="checkbox" value="" checked id="inp_estado" name="inp_estado"> Estado
              </div>
              <div class="col-span-12 sm:col-span-2 flex gap-2">
                <input class="form-check-input ms-2" type="checkbox" value="" checked id="inp_punto_de_precio" name="inp_punto_de_precio"> Punto de Precio
              </div>
              <div class="col-span-12 sm:col-span-2 flex gap-2">
                <input class="form-check-input ms-2" type="checkbox" value="" checked id="inp_sexo" name="inp_sexo"> Sexo
              </div>
              <div class="col-span-12 sm:col-span-2 flex gap-2">
              </div>
            </div>
            


            



          </div>
          <div style="text-align: center;">
                <button id ="buttondownload3" type="button" class="ti-btn ti-btn-primary-full" onclick="downloadParameters()">Exportar a Excel</button>
                <br><br>
          </div>
          

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

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














    





<!--modal-->

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


</style>

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



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



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






{% endblock %}

{% block scripts %}


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

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

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

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

  

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

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

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

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


  

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

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

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



    

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

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

</script>





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

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

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

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





<script>

function downloadParameters() {
    let camfromday = document.getElementById('cam_from_day').value;
    let camfromyear = document.getElementById('cam_from_year').value;
    let camtoday = document.getElementById('cam_to_day').value;
    let camtoyear = document.getElementById('cam_to_year').value;
    let inp_codigo = document.getElementById('inp_codigo').checked;
    
    let inp_division = document.getElementById('inp_division').checked;
    let inp_sub_division = document.getElementById('inp_sub_division').checked;
    let inp_segmento = document.getElementById('inp_segmento').checked;
    let inp_forma_pt = document.getElementById('inp_forma_pt').checked;
    let inp_target = document.getElementById('inp_target').checked;

    inp_descripcion = document.getElementById('inp_descripcion').checked;
    inp_categoria = document.getElementById('inp_categoria').checked;
    inp_procedencia = document.getElementById('inp_procedencia').checked;
    inp_cod_medida = document.getElementById('inp_cod_medida').checked;
    inp_cuotas = document.getElementById('inp_cuotas').checked;

    inp_linea = document.getElementById('inp_linea').checked;
    inp_sub_linea = document.getElementById('inp_sub_linea').checked;
    inp_tipo_de_subl = document.getElementById('inp_tipo_de_subl').checked;
    inp_peso = document.getElementById('inp_peso').checked;
    inp_cond_compra = document.getElementById('inp_cond_compra').checked;

    inp_uxp_estimado = document.getElementById('inp_uxp_estimado').checked;
    inp_uxp_real = document.getElementById('inp_uxp_real').checked;
    inp_uxp_facturado = document.getElementById('inp_uxp_facturado').checked;
    inp_alto = document.getElementById('inp_alto').checked;
    inp_ord_media_est = document.getElementById('inp_ord_media_est').checked;

    inp_unid_estim = document.getElementById('inp_unid_estim').checked;
    inp_unid_vendidas = document.getElementById('inp_unid_vendidas').checked;
    inp_unid_fact = document.getElementById('inp_unid_fact').checked;
    inp_largo = document.getElementById('inp_largo').checked;
    inp_ord_media_real = document.getElementById('inp_ord_media_real').checked;

    inp_tipo_de_oferta = document.getElementById('inp_tipo_de_oferta').checked;
    inp_consignacion = document.getElementById('inp_consignacion').checked;
    inp_grupo_fabric = document.getElementById('inp_grupo_fabric').checked;
    inp_ancho = document.getElementById('inp_ancho').checked;
    inp_uxp_tag = document.getElementById('inp_uxp_tag').checked;

    inp_precio_de_oferta = document.getElementById('inp_precio_de_oferta').checked;
    inp_cabecera = document.getElementById('inp_cabecera').checked;
    inp_elaboracion = document.getElementById('inp_elaboracion').checked;
    inp_volumen = document.getElementById('inp_volumen').checked;
    inp_unid_tag = document.getElementById('inp_unid_tag').checked;

    inp_precio_normal = document.getElementById('inp_precio_normal').checked;
    inp_coeficiente = document.getElementById('inp_coeficiente').checked;
    inp_packaging = document.getElementById('inp_packaging').checked;
    inp_talle_tamano = document.getElementById('inp_talle_tamano').checked;
    inp_pedidos_estm = document.getElementById('inp_pedidos_estm').checked;

    inp_margen_estimado = document.getElementById('inp_margen_estimado').checked;
    inp_margen_real = document.getElementById('inp_margen_real').checked;
    inp_envase_do_crit = document.getElementById('inp_envase_do_crit').checked;
    inp_color = document.getElementById('inp_color').checked;
    inp_pedidos_reales = document.getElementById('inp_pedidos_reales').checked;

    inp_costo_estimado = document.getElementById('inp_costo_estimado').checked;
    inp_costo_real = document.getElementById('inp_costo_real').checked;
    inp_canal = document.getElementById('inp_canal').checked;
    inp_material_tela = document.getElementById('inp_material_tela').checked;

    inp_fact_estimado = document.getElementById('inp_fact_estimado').checked;
    inp_fact_real = document.getElementById('inp_fact_real').checked;
    inp_fact_fact = document.getElementById('inp_fact_fact').checked;
    inp_caracterist = document.getElementById('inp_caracterist').checked;

    inp_empresa = document.getElementById('inp_empresa').checked;
    inp_multi_empresa = document.getElementById('inp_multi_empresa').checked;
    inp_equivalencia_mk = document.getElementById('inp_equivalencia_mk').checked;
    inp_coleccion = document.getElementById('inp_coleccion').checked;

    inp_nro_de_pagina = document.getElementById('inp_nro_de_pagina').checked;
    inp_estado = document.getElementById('inp_estado').checked;
    inp_punto_de_precio = document.getElementById('inp_punto_de_precio').checked;
    inp_sexo = document.getElementById('inp_sexo').checked;

    

    // Validación 1: campos no vacíos
    if (!camfromday || !camfromyear || !camtoday || !camtoyear) {
        showToast("Todos los campos de Campaña y Año deben estar completos.", "danger");
        return;
    }

    // Validación 2: que sean enteros
    let fromDay = parseInt(camfromday);
    let fromYear = parseInt(camfromyear);
    let toDay = parseInt(camtoday);
    let toYear = parseInt(camtoyear);

    if (isNaN(fromDay) || isNaN(fromYear) || isNaN(toDay) || isNaN(toYear)) {
        showToast("Los valores de campaña y año deben ser numéricos.", "danger");
        return;
    }

    // Validación 3: Año desde <= Año hasta
    if (fromYear > toYear) {
        showToast("Error en Campaña: el Año Desde no puede ser mayor al Año Hasta.", "danger");
        return;
    }

    // Validación 4: Si mismo año, comparar día
    if (fromYear === toYear && fromDay > toDay) {
        showToast("Error en Campaña: el Día Desde no puede ser mayor al Día Hasta.", "danger");
        return;
    }

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

    fetch('/download_exportdata/', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRFToken': '{{ csrf_token }}'
        },
        body: JSON.stringify({
            camfromday: camfromday,
            camfromyear: camfromyear,
            camtoday: camtoday,
            camtoyear: camtoyear,
            
            inp_codigo: inp_codigo,

            inp_division: inp_division,
            inp_sub_division: inp_sub_division,
            inp_segmento: inp_segmento,
            inp_forma_pt: inp_forma_pt,
            inp_target: inp_target,

            inp_descripcion: inp_descripcion,
            inp_categoria: inp_categoria,
            inp_procedencia: inp_procedencia,
            inp_cod_medida: inp_cod_medida,
            inp_cuotas: inp_cuotas,

            inp_linea: inp_linea,
            inp_sub_linea: inp_sub_linea,
            inp_tipo_de_subl: inp_tipo_de_subl,
            inp_peso: inp_peso,
            inp_cond_compra: inp_cond_compra,

            inp_uxp_estimado: inp_uxp_estimado,
            inp_uxp_real: inp_uxp_real,
            inp_uxp_facturado: inp_uxp_facturado,
            inp_alto: inp_alto,
            inp_ord_media_est: inp_ord_media_est,

            inp_unid_estim: inp_unid_estim,
            inp_unid_vendidas: inp_unid_vendidas,
            inp_unid_fact: inp_unid_fact,
            inp_largo: inp_largo,
            inp_ord_media_real: inp_ord_media_real,

            inp_tipo_de_oferta: inp_tipo_de_oferta,
            inp_consignacion: inp_consignacion,
            inp_grupo_fabric: inp_grupo_fabric,
            inp_ancho: inp_ancho,
            inp_uxp_tag: inp_uxp_tag,

            inp_precio_de_oferta: inp_precio_de_oferta,
            inp_cabecera: inp_cabecera,
            inp_elaboracion: inp_elaboracion,
            inp_volumen: inp_volumen,
            inp_unid_tag: inp_unid_tag,

            inp_precio_normal: inp_precio_normal,
            inp_coeficiente: inp_coeficiente,
            inp_packaging: inp_packaging,
            inp_talle_tamano: inp_talle_tamano,
            inp_pedidos_estm: inp_pedidos_estm,

            inp_margen_estimado: inp_margen_estimado,
            inp_margen_real: inp_margen_real,
            inp_envase_do_crit: inp_envase_do_crit,
            inp_color: inp_color,
            inp_pedidos_reales: inp_pedidos_reales,

            inp_costo_estimado: inp_costo_estimado,
            inp_costo_real: inp_costo_real,
            inp_canal: inp_canal,
            inp_material_tela: inp_material_tela,

            inp_fact_estimado: inp_fact_estimado,
            inp_fact_real: inp_fact_real,
            inp_fact_fact: inp_fact_fact,
            inp_caracterist: inp_caracterist,

            inp_empresa:inp_empresa,
            inp_multi_empresa: inp_multi_empresa,
            inp_equivalencia_mk: inp_equivalencia_mk,
            inp_coleccion: inp_coleccion,

            inp_nro_de_pagina: inp_nro_de_pagina,
            inp_estado: inp_estado,
            inp_punto_de_precio: inp_punto_de_precio,
            inp_sexo: inp_sexo,

        })
    })
    .then(response => {
        if (!response.ok) {
            return response.text().then(text => {
                throw new Error(`Error del servidor: ${response.status} - ${text}`);
            });
        }
        return response.blob();
    })
    .then(blob => {
        const url = window.URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.style.display = 'none';
        a.href = url;
        a.download = 'Datos_' + camfromday + '-' + camfromyear + '_a_' + camtoday + '-' + camtoyear + '.csv';
        document.body.appendChild(a);
        a.click();
        window.URL.revokeObjectURL(url);
        document.getElementById('spinnerOverlay').style.display = 'none';
    })
    .catch(error => {
        console.error('Error:', error);
        document.getElementById('spinnerOverlay').style.display = 'none';
        showToast("Error: " + error.message, "danger");
    });
}
</script>
  











{% endblock %}