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

{% block styles %}

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

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

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

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

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

{% block content %}



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

  <!-- Page Header -->

<!-- Page Header Close -->





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

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



  

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

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



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

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

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

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

        <div class="box-body space-y-3">
          <h2>Estadísticas</h2>

          <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-8 flex gap-2">
              <label class="whitespace-nowrap"><br><br>Elija los datos que necesita consultar...</label>
            </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-8 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="xl:col-span-9 sm:col-span-12 col-span-12">
            <div class="box">
              <div class="box-header justify-between">
                <div class="box-title"> titulo</div>
              </div>
              <div class="box-body">
                <div id="mixed-multiple-y"></div>
              </div>
            </div>
          </div>

          <div class="col-span-12 grid grid-cols-12 gap-4 mt-4">
  <div class="col-span-12 sm:col-span-3">
    <div class="box p-4 shadow bg-white rounded-lg">
      <div class="text-sm text-gray-500 mb-1">Total Unidades</div>
      <div id="card-unidades" class="text-xl font-bold text-gray-900">-</div>
    </div>
  </div>
  <div class="col-span-12 sm:col-span-3">
    <div class="box p-4 shadow bg-white rounded-lg">
      <div class="text-sm text-gray-500 mb-1">Total Estimadas</div>
      <div id="card-estimadas" class="text-xl font-bold text-gray-900">-</div>
    </div>
  </div>
  <div class="col-span-12 sm:col-span-3">
    <div class="box p-4 shadow bg-white rounded-lg">
      <div class="text-sm text-gray-500 mb-1">Promedio Unidades</div>
      <div id="card-prom-unidades" class="text-xl font-bold text-gray-900">-</div>
    </div>
  </div>
  <div class="col-span-12 sm:col-span-3">
    <div class="box p-4 shadow bg-white rounded-lg">
      <div class="text-sm text-gray-500 mb-1">Promedio Estimadas</div>
      <div id="card-prom-estimadas" class="text-xl font-bold text-gray-900">-</div>
    </div>
  </div>
</div>


        </div>

        <div style="text-align: center;">
          <button id="btn-consultar" type="submit" class="ti-btn bg-primary text-white w-full sm:w-auto py-2">
            Consultar
          </button>
        </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>


  <!-- Apex Charts JS -->
  <script src="{% static 'assets/libs/apexcharts/apexcharts.min.js'%}"></script>
  
  <!-- HRM Dashboard JS -->
  <script src="{% static 'assets/js/stocks-dashboard.js'%}"></script>
  

 <script>
  document.addEventListener('DOMContentLoaded', function () {
    // Botón de consulta
    document.getElementById("btn-consultar").addEventListener("click", function () {
      const camFrom = document.getElementById("cam_from_day").value;
      const yearFrom = document.getElementById("cam_from_year").value;
      const camTo = document.getElementById("cam_to_day").value;
      const yearTo = document.getElementById("cam_to_year").value;

      // Validación mínima
      if (!camFrom || !yearFrom || !camTo || !yearTo) {
        alert("Por favor completá todos los campos.");
        return;
      }

      // Construir query string
      const queryParams = new URLSearchParams({
        cam_from_day: camFrom,
        cam_from_year: yearFrom,
        cam_to_day: camTo,
        cam_to_year: yearTo
      });

      // Fetch al endpoint
      fetch(`/gettestingdata/?${queryParams.toString()}`)
        .then(response => {
          if (!response.ok) throw new Error("Error consultando los datos");
          return response.json();
        })
        .then(chartData => {
          renderChart(chartData.categories, chartData.series, chartData.max_axis);
          document.getElementById("card-unidades").textContent = chartData.total_unidades ?? "-";
          document.getElementById("card-estimadas").textContent = chartData.total_estimadas ?? "-";
          document.getElementById("card-prom-unidades").textContent = chartData.promedio_unidades ?? "-";
          document.getElementById("card-prom-estimadas").textContent = chartData.promedio_estimadas ?? "-";
        })
        .catch(error => {
          console.error("Error al obtener datos:", error);
          alert("Hubo un error al consultar los datos.");
        });
    });
  });

  // Función para renderizar el gráfico
  function renderChart(categories, series, max_axis) {
    const container = document.querySelector("#mixed-multiple-y");
    container.innerHTML = ""; // Reiniciar gráfico

    var options = {
      series: series,
      chart: {
        height: 320,
        type: 'bar',
        stacked: false
      },
      colors: ["#23b7e5", "#f5b849"],
      xaxis: {
        categories: categories,
        title: { text: 'Campaña' },
        labels: {
          style: {
            fontSize: '10px',
            fontWeight: 600
          }
        }
      },
      yaxis: {
        min: 0,
        max: max_axis,
        title: { text: 'Cantidad' }
      },
      legend: {
        position: 'top'
      },
      tooltip: {
        shared: true,
        intersect: false
      }
    };

    var chart = new ApexCharts(container, options);
    chart.render();
  }
</script>




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

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

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



    

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

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

</script>



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

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

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

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










{% endblock %}