{% extends 'components/layout.html' %}
{% load static %}
{% load l10n %}
{% 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 class="main-content">

  <!-- Page Header -->
  <div class="block justify-between page-header md:flex">
    <div>
        <h3 class="!text-defaulttextcolor dark:!text-defaulttextcolor/70 dark:text-white dark:hover:text-white text-[1.125rem] font-semibold">Query Fox</h3>
    </div>
    <ol class="flex items-center whitespace-nowrap min-w-0">
        <li class="text-[0.813rem] ps-[0.5rem]">
          <a class="flex items-center text-primary hover:text-primary dark:text-primary truncate">
            Procesos
            <i class="ti ti-chevrons-right flex-shrink-0 text-[#8c9097] dark:text-white/50 px-[0.5rem] overflow-visible rtl:rotate-180"></i>
          </a>
        </li>
        <li class="text-[0.813rem] text-defaulttextcolor font-semibold hover:text-primary dark:text-[#8c9097] dark:text-white/50 " aria-current="page">
            Unid. Reales
            <i class="ti ti-chevrons-right flex-shrink-0 text-[#8c9097] dark:text-white/50 px-[0.5rem] overflow-visible rtl:rotate-180"></i>
          </li>
        <li class="text-[0.813rem] text-defaulttextcolor font-semibold hover:text-primary dark:text-[#8c9097] dark:text-white/50 " aria-current="page">
          Exportar query Fox
        </li>
    </ol>
</div>
<!-- Page Header Close -->

<div class="hs-accordion-group" style="margin-top: 15px; margin-bottom: 15px;">
  <div style="border-radius: 10px;" class="hs-accordion accordion-item  overflow-hidden !border-b-0" id="hs-basic-with-arrow-heading-one">
    <button
      class="hs-accordion-toggle accordion-button hs-accordion-active:text-primary hs-accordion-active:pb-3 group py-0 inline-flex items-center gap-x-3 w-full font-semibold text-start text-gray-800 transition hover:text-gray-500 dark:hs-accordion-active:text-primary dark:text-gray-200 dark:hover:text-white/80"
      aria-controls="hs-basic-with-arrow-collapse-one" type="button" style="border-radius: 5px;background-color: rgb(var(--primary) / 0.85); color: white;">
      <svg
        class="hs-accordion-active:hidden hs-accordion-active:text-primary hs-accordion-active:group-hover:text-primary block w-3 h-3 text-gray-600 group-hover:text-gray-500 dark:text-[#8c9097] dark:text-white/50"
        width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M2 5L8.16086 10.6869C8.35239 10.8637 8.64761 10.8637 8.83914 10.6869L15 5"
          stroke="currentColor" stroke-width="2" stroke-linecap="round" style="color:white" />
      </svg>
      <svg
        class="hs-accordion-active:block hs-accordion-active:text-primary hs-accordion-active:group-hover:text-primary hidden w-3 h-3 text-gray-600 group-hover:text-gray-500 dark:text-[#8c9097] dark:text-white/50"
        width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M2 11L8.16086 5.31305C8.35239 5.13625 8.64761 5.13625 8.83914 5.31305L15 11"
          stroke="currentColor" stroke-width="2" stroke-linecap="round" style="color:white"/>
      </svg>
      Filtros
    </button>
    <div id="hs-basic-with-arrow-collapse-one" class="hs-accordion-content w-full overflow-hidden transition-[height] duration-300" aria-labelledby="hs-basic-with-arrow-heading-one">
      <div class="accordion-body">
        <div class="box-body space-y-3">

          <span class="font-semibold text-[#8c9097] dark:text-white/50">
    <br>
    Este proceso generará el exportador de la query fox con los datos en tiempo real del sistema de Facturación.
    <br>
    La información reflejada tiene las siguientes consideraciones:
    <ul class="list-disc ml-6 mt-2">
        <li>Pedidos facturados</li>
        <li>se exceptuan cuotas 2 y 3</li>
        <li>Sin devoluciones registradas (CyR).</li>
        <li>Excluye zonas Personales (997, 998, 999).</li>
        <li>Excluye productos guardados de la campaña anterior</li>
        <li>Excluye productos no computables.</li>
    </ul>

    <ul class="list-disc ml-6 mt-2">
        <li>las gráficas incluyen productos no computables. </li>   
    </ul>
    <br>
</span>
              
            <form id="topass1" class="grid grid-cols-12  gap-x-4 gap-y-2 items-center mt-2" action="" method="post">
                {% csrf_token %}
                <div class="xl:col-span-2 lg:col-span-6 md:col-span-6 sm:col-span-12 col-span-12">
                    <select id="campaign_number" name="campaign_number" required class="form-control">
                        <option value="0" {% if filterCampaignId == 0 %} selected {% endif %}>Campaña </option>
                        {% for list in numeros_campana %}
                        <option value="{{ list.id }}" {% if filterCampaignId == list.id %} selected {% endif %}>{{ list.Number }}</option>
                        {% endfor %}
                    </select>
                </div>
            
                <div class="sm:col-span-3 col-span-12">
                  <button id="btnGenerarQueryFox" type="submit" class="ti-btn ti-btn-primary-full">
                      Generar Query Fox
                  </button>
              </div>

                {% if showButtonDownloadExcel == 1 and filterCampaignId != 0 %}
                <div class="sm:col-span-6 col-span-12">
                  
                  <a id="btnDownloadFox" class="ti-btn ti-btn-primary-full" href="{{ file_url }}" target="_blank">Descargar Query Fox</a>
                </div>
                {% endif %}
            </form>

            
            
           
        </div>
      </div>
    </div>

    
  </div>
  </div>
      <!-- <div class="col-span-12">
      <h3 class="text-lg font-bold mb-4">
        Campaña {{ campaign_number|default_if_none:"" }}
      </h3>
    </div> -->

    <!-- <div class="grid grid-cols-12 gap-x-6">

      <div class="xl:col-span-2 sm:col-span-6 col-span-12">
        <div class="box">
          <div class="box-body">
            <div class="flex gap-3 flex-wrap items-start justify-between">
              <div class="flex-grow flex items-start sm:mb-0">
                <div class="me-4">
                  <span class="avatar avatar-rounded" style="background-color: #e9cbc4;">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                      stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                      <path d="M12 20V10" />
                      <path d="M18 20V4" />
                      <path d="M6 20V16" />
                    </svg>
                  </span>
                </div>
                <div>
                  <span class="block text-[#8c9097] dark:text-white/50">Pedidos Estimados</span>
                  <span class="text-[1rem] font-semibold">{{ estimated_orders|default_if_none:"" }}</span>
                </div>

              </div>
              <div>
                <div id="total-investments"></div>
              </div>
            </div>
          </div>
        </div>
      </div>


      <div class="xl:col-span-2 sm:col-span-6 col-span-12">
        <div class="box">
          <div class="box-body">
            <div class="flex gap-3 flex-wrap items-start justify-between">
              <div class="flex-grow flex items-start sm:mb-0">
                <div class="me-4">
                  <span class="avatar avatar-rounded" style="background-color: #c1a29d;">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                      stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                      <path d="M12 20V10" />
                      <path d="M18 20V4" />
                      <path d="M6 20V16" />
                    </svg>
                  </span>
                </div>
                <div>
                  <span class="block text-[#8c9097] dark:text-white/50">Pedidos Acumulados</span>
                  <span class="text-[1rem] font-semibold">{{ accumulated_orders|default_if_none:"" }}</span>
                </div>
              </div>
              <div></div>
            </div>
          </div>
        </div>
      </div>





      <div class="xl:col-span-2 sm:col-span-6 col-span-12">
        <div class="box">
          <div class="box-body">
            <div class="flex gap-3 flex-wrap items-start justify-between">
              <div class="flex-grow flex items-start sm:mb-0">
                <div class="me-4">
                  <span class="avatar avatar-rounded" style="background-color: #9A716D;">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                      stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                      <path d="M12 20V10" />
                      <path d="M18 20V4" />
                      <path d="M6 20V16" />
                    </svg>
                  </span>

                </div>
                <div>
                  <span class="block text-[#8c9097] dark:text-white/50">Pedidos Proyectados</span>
                  <span class="text-[1rem] font-semibold">{{ projected_orders|default_if_none:"" }}</span>
                </div>
              </div>
              <div></div>
            </div>
          </div>
        </div>
      </div>



      <div class="xl:col-span-2 sm:col-span-6 col-span-12">
        <div class="box">
          <div class="box-body">
            <div class="flex gap-3 flex-wrap items-start justify-between">
              <div class="flex-grow flex items-start sm:mb-0">
                <div class="me-4">
                  <span class="avatar avatar-rounded" style="background-color: #f8bc54">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                      stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                      <path d="M10 20c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-8c-1.1 0-2 .9-2 2v4z" />
                      <path d="M7 16V12c0-1.1.9-2 2-2h8" />
                      <path d="M4 12V8c0-1.1.9-2 2-2h8" />
                      <path d="M1 8V4c0-1.1.9-2 2-2h8" />
                    </svg>
                  </span>
                </div>
                <div>
                  <span class="block text-[#8c9097] dark:text-white/50">Unidades acumuladas</span>
                  <span class="text-[1rem] font-semibold">{{ units_accumulated_n|default_if_none:""  }}</span>
                </div>
              </div>
              <div></div>
            </div>
          </div>
        </div>
      </div>


      <div class="xl:col-span-2 sm:col-span-6 col-span-12">
        <div class="box">
          <div class="box-body">
            <div class="flex gap-3 flex-wrap items-start justify-between">
              <div class="flex-grow flex items-start sm:mb-0">
                <div class="me-4">
                  <span class="avatar avatar-rounded" style="background-color: #81b350;">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                      stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                      <path d="M6 10v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-9a2 2 0 0 0-2-2h-12a2 2 0 0 0-2 2z" />
                      <path d="M12 17a3 3 0 1 0 0-6 3 3 0 0 0 0 6z" />
                      <path
                        d="M4 8v11a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-11a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2h-12a2 2 0 0 1-2-2z" />
                    </svg>
                  </span>
                </div>
                <div>
                  <span class="block text-[#8c9097] dark:text-white/50">Facturación acumulada</span>
                  <span
                    class="text-[1rem] font-semibold">{% localize on %}{{cumulative_invoicing|default_if_none:""|floatformat:0 }}{% endlocalize %}</span>
                </div>

              </div>
              <div>
                <div id="total-investments"></div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="xl:col-span-2 sm:col-span-6 col-span-12">
        <div class="box">
          <div class="box-body">
            <div class="flex gap-3 flex-wrap items-start justify-between">
              <div class="flex-grow flex items-start sm:mb-0">
                <div class="me-4">
                  <span class="avatar avatar-rounded bg-success">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                      stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                      <path d="M6 10v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-9a2 2 0 0 0-2-2h-12a2 2 0 0 0-2 2z" />
                      <path d="M12 17a3 3 0 1 0 0-6 3 3 0 0 0 0 6z" />
                      <path
                        d="M4 8v11a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-11a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2h-12a2 2 0 0 1-2-2z" />
                    </svg>
                  </span>
                </div>
                <div>
                  <span class="block text-[#8c9097] dark:text-white/50">Facturación Proyectada</span>
                  <span
                    class="text-[1rem] font-semibold">{% localize on %}{{projected_invoicing|default_if_none:""|floatformat:0 }}{% endlocalize %}</span>
                </div>

              </div>
              <div>
                <div id="total-investments"></div>
              </div>
            </div>
          </div>
        </div>
      </div>



    </div> -->

          <!-- Indicadores principales -->
<!-- Indicadores principales -->
<!-- Indicadores principales -->

{% if has_data %}
<div class="grid grid-cols-12 gap-6 mt-6">

  <!-- CARD 1: Pedidos -->
  <div class="xl:col-span-4 sm:col-span-6 col-span-12">
    <div class="box rounded-2xl shadow-md hover:shadow-lg transition-all duration-300">
      <div class="box-body">
        <h4 class="text-xl font-bold text-gray-800 dark:text-white mb-4 text-center">Pedidos {{ campaign_number|default_if_none:"" }}</h4>

        <div class="flex items-center gap-4">
          <span class="avatar avatar-rounded inline-flex items-center justify-center flex-shrink-0" style="background-color: #e9cbc4;">
            <svg  xmlns="http://www.w3.org/2000/svg"  width="50"  height="50"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-shopping-bag">
              <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
              <path d="M6.331 8h11.339a2 2 0 0 1 1.977 2.304l-1.255 8.152a3 3 0 0 1 -2.966 2.544h-6.852a3 3 0 0 1 -2.965 -2.544l-1.255 -8.152a2 2 0 0 1 1.977 -2.304z" />
              <path d="M9 11v-5a3 3 0 0 1 6 0v5" /></svg>
          </span>

          <div class="text-[0.95rem] space-y-1.5 leading-relaxed w-full">
            
            <p><span class="font-semibold text-[#8c9097] dark:text-white/50 text-[1rem]">Estimados:</span> <span class="font-bold text-gray-900 dark:text-white ml-2">{{ estimated_orders|default_if_none:"" }}</span></p>
            <p><span class="font-semibold text-[#8c9097] dark:text-white/50 text-[1rem]">Del día:</span> <span class="font-bold text-gray-900 dark:text-white ml-2">{{ orders_of_day|default_if_none:"" }}</span></p>
            <p><span class="font-semibold text-[#8c9097] dark:text-white/50 text-[1rem]">Acumulados:</span> <span class="font-bold text-gray-900 dark:text-white ml-2">{{ accumulated_orders|default_if_none:"" }}</span></p>
            <p><span class="font-semibold text-[#8c9097] dark:text-white/50 text-[1rem]">Proyectados:</span> <span class="font-bold text-gray-900 dark:text-white ml-2">{{ projected_orders|default_if_none:"" }}</span></p>
           <div class="flex items-center justify-between mt-1">
             <div>
               <p>
                 <span class="font-semibold text-[#8c9097] dark:text-white/50 text-[1rem]">Desvío:</span>
               </p>
             </div>
             <div class="text-end flex items-center justify-end">
               {% if desv_ped > 0 %}
               <p class="mb-0 text-success font-semibold flex items-center" style="font-size: 20px;">
                 <i class="ti ti-arrow-narrow-up text-success me-1 font-semibold"></i>
                 {{ desv_ped|default_if_none:"" }} %
               </p>
               {% elif desv_ped < 0 %}
               <p class="mb-0 text-danger font-semibold flex items-center" style="font-size: 20px;">
                 <i class="ti ti-arrow-narrow-down text-danger me-1 font-semibold"></i>
                 {{ desv_ped|default_if_none:"" }} %
               </p>
               {% else %}
               <p class="mb-0 text-gray-500 font-semibold flex items-center" style="font-size: 20px;">
                 <i class="ti ti-arrow-narrow-right text-gray-500 me-1 font-semibold"></i>
                 {{ desv_ped|default_if_none:"" }} %
               </p>
               {% endif %}
             </div>
           </div>

          </div>

        </div>
      </div>
    </div>
  </div>

  <!-- CARD 2: Unidades -->
  <div class="xl:col-span-4 sm:col-span-6 col-span-12">
    <div class="box rounded-2xl shadow-md hover:shadow-lg transition-all duration-300">
      <div class="box-body">
        <h4 class="text-xl font-bold text-gray-800 dark:text-white mb-4 text-center">Unidades {{ campaign_number|default_if_none:"" }}</h4>

        <div class="flex items-center gap-4">
          <span class="avatar avatar-rounded inline-flex items-center justify-center flex-shrink-0 mt-4" style="background-color: #f8bc54;">
            <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M10 20c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-8c-1.1 0-2 .9-2 2v4z" />
              <path d="M7 16V12c0-1.1.9-2 2-2h8" />
              <path d="M4 12V8c0-1.1.9-2 2-2h8" />
              <path d="M1 8V4c0-1.1.9-2 2-2h8" />
            </svg>
          </span>

          <div class="text-[0.95rem] space-y-1.5 leading-relaxed w-full">
            <p class="opacity-0 select-none"><span class="font-semibold text-[#8c9097] dark:text-white/50 text-[1rem]"></span></p><p><span class="font-semibold text-[#8c9097] dark:text-white/50 text-[1rem]"></span> <span class="font-bold text-gray-900 dark:text-white ml-2"></span></p>
            <p><span class="font-semibold text-[#8c9097] dark:text-white/50 text-[1rem]">Del día:</span> <span class="font-bold text-gray-900 dark:text-white ml-2">{{ units_of_day|default_if_none:"" }}</span></p>
            <p><span class="font-semibold text-[#8c9097] dark:text-white/50 text-[1rem]">Acumuladas:</span> <span class="font-bold text-gray-900 dark:text-white ml-2">{{ units_accumulated_n|default_if_none:"" }}</span></p>
            <p><span class="font-semibold text-[#8c9097] dark:text-white/50 text-[1rem]">Proyectadas:</span> <span class="font-bold text-gray-900 dark:text-white ml-2">{{ projected_units|default_if_none:"" }}</span></p>
            <div class="flex items-center justify-between mt-1">
              <div>
                <p>
                  <span class="font-semibold text-[#8c9097] dark:text-white/50 text-[1rem]">Desvío:</span>
                </p>
              </div>
              <div class="text-end flex items-center justify-end">
                {% if desv_unids > 0 %}
                <p class="mb-0 text-success font-semibold flex items-center" style="font-size: 20px;">
                  <i class="ti ti-arrow-narrow-up text-success me-1 font-semibold"></i>
                  {{ desv_unids|default_if_none:"" }} %
                </p>
                {% elif desv_unids < 0 %}
                <p class="mb-0 text-danger font-semibold flex items-center" style="font-size: 20px;">
                  <i class="ti ti-arrow-narrow-down text-danger me-1 font-semibold"></i>
                  {{ desv_unids|default_if_none:"" }} %
                </p>
                {% else %}
                <p class="mb-0 text-gray-500 font-semibold flex items-center" style="font-size: 20px;">
                  <i class="ti ti-arrow-narrow-right text-gray-500 me-1 font-semibold"></i>
                  {{ desv_unids|default_if_none:"" }} %
                </p>
                {% endif %}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- CARD 3: Facturación -->
  <div class="xl:col-span-4 sm:col-span-6 col-span-12">
    <div class="box rounded-2xl shadow-md hover:shadow-lg transition-all duration-300">
      <div class="box-body">
        <h4 class="text-xl font-bold text-gray-800 dark:text-white mb-4 text-center">Facturación {{ campaign_number|default_if_none:"" }}</h4>

        <div class="flex items-center gap-4">
          <span class="avatar avatar-rounded inline-flex items-center justify-center flex-shrink-0 bg-success mt-4">
            <svg  xmlns="http://www.w3.org/2000/svg"  width="50"  height="50"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-currency-dollar">
              <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
              <path d="M16.7 8a3 3 0 0 0 -2.7 -2h-4a3 3 0 0 0 0 6h4a3 3 0 0 1 0 6h-4a3 3 0 0 1 -2.7 -2" />
              <path d="M12 3v3m0 12v3" /></svg>
          </span>
          

          <div class="text-[0.95rem] space-y-1.5 leading-relaxed w-full">
            <p class="opacity-0 select-none"><span class="font-semibold text-[#8c9097] dark:text-white/50 text-[1rem]"></span></p><p><span class="font-semibold text-[#8c9097] dark:text-white/50 text-[1rem]"></span> <span class="font-bold text-gray-900 dark:text-white ml-2"></span></p>
            <p><span class="font-semibold text-[#8c9097] dark:text-white/50 text-[1rem]">Del día:</span> <span class="font-bold text-gray-900 dark:text-white ml-2">{% localize on %}{{ invoicing_day|default_if_none:""|floatformat:0 }}{% endlocalize %}</span></p>
            <p><span class="font-semibold text-[#8c9097] dark:text-white/50 text-[1rem]">Acumulada:</span> <span class="font-bold text-gray-900 dark:text-white ml-2">{% localize on %}{{ cumulative_invoicing|default_if_none:""|floatformat:0 }}{% endlocalize %}</span></p>
            <p><span class="font-semibold text-[#8c9097] dark:text-white/50 text-[1rem]">Proyectada:</span> <span class="font-bold text-gray-900 dark:text-white ml-2">{% localize on %}{{ projected_invoicing|default_if_none:""|floatformat:0 }}{% endlocalize %}</span></p>
            
            <div class="flex items-center justify-between mt-1">
  <div>
    <p>
      <span class="font-semibold text-[#8c9097] dark:text-white/50 text-[1rem]">Desvío:</span>
    </p>
  </div>
  <div class="text-end flex items-center justify-end">
    {% if desv_invoicing > 0 %}
      <p class="mb-0 text-success font-semibold flex items-center" style="font-size: 20px;">
        <i class="ti ti-arrow-narrow-up text-success me-1 font-semibold"></i>
        {{ desv_invoicing|default_if_none:"" }} %
      </p>
    {% elif desv_invoicing < 0 %}
      <p class="mb-0 text-danger font-semibold flex items-center" style="font-size: 20px;">
        <i class="ti ti-arrow-narrow-down text-danger me-1 font-semibold"></i>
        {{ desv_invoicing|default_if_none:"" }} %
      </p>
    {% else %}
      <p class="mb-0 text-gray-500 font-semibold flex items-center" style="font-size: 20px;">
        <i class="ti ti-arrow-narrow-right text-gray-500 me-1 font-semibold"></i>
        {{ desv_invoicing|default_if_none:"" }} %
      </p>
    {% endif %}
  </div>
</div>
          </div>
        </div>
      </div>
    </div>
  </div>

</div>

<!--N-1 -->
<div class="grid grid-cols-12 gap-6 mt-6">

  <!-- CARD 1: Pedidos -->
  <div class="xl:col-span-4 sm:col-span-6 col-span-12">
    <div class="box rounded-2xl shadow-md hover:shadow-lg transition-all duration-300">
      <div class="box-body">
        <h4 class="text-xl font-bold text-gray-800 dark:text-white mb-4 text-center">Pedidos {{ previous_campaign_number|default_if_none:"" }}</h4>

        <div class="flex items-center gap-4">
          <span class="avatar avatar-rounded inline-flex items-center justify-center flex-shrink-0" style="background-color: #e9cbc4;">
            <svg  xmlns="http://www.w3.org/2000/svg"  width="50"  height="50"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-shopping-bag">
              <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
              <path d="M6.331 8h11.339a2 2 0 0 1 1.977 2.304l-1.255 8.152a3 3 0 0 1 -2.966 2.544h-6.852a3 3 0 0 1 -2.965 -2.544l-1.255 -8.152a2 2 0 0 1 1.977 -2.304z" />
              <path d="M9 11v-5a3 3 0 0 1 6 0v5" /></svg>
          </span>

          <div class="text-[0.95rem] space-y-1.5 leading-relaxed">
            <p><span class="font-semibold text-[#8c9097] dark:text-white/50 text-[1rem]">Estimados:</span> <span class="font-bold text-gray-900 dark:text-white ml-2">{{ estimated_orders_n1|default_if_none:"" }}</span></p>
            <p><span class="font-semibold text-[#8c9097] dark:text-white/50 text-[1rem]">Del día:</span> <span class="font-bold text-gray-900 dark:text-white ml-2">{{ orders_of_day_n1|default_if_none:"" }}</span></p>
            <p><span class="font-semibold text-[#8c9097] dark:text-white/50 text-[1rem]">Acumulados:</span> <span class="font-bold text-gray-900 dark:text-white ml-2">{{ accumulated_orders_n1|default_if_none:"" }}</span></p>
            <p><span class="font-semibold text-[#8c9097] dark:text-white/50 text-[1rem]">Totales:</span> <span class="font-bold text-gray-900 dark:text-white ml-2">{{ total_orders_n1|default_if_none:"" }}</span></p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- CARD 2: Unidades -->
  <div class="xl:col-span-4 sm:col-span-6 col-span-12">
    <div class="box rounded-2xl shadow-md hover:shadow-lg transition-all duration-300">
      <div class="box-body">
        <h4 class="text-xl font-bold text-gray-800 dark:text-white mb-4 text-center">Unidades {{ previous_campaign_number|default_if_none:"" }}</h4>

        <div class="flex items-center gap-4">
          <span class="avatar avatar-rounded inline-flex items-center justify-center flex-shrink-0 mt-4" style="background-color: #f8bc54;">
            <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M10 20c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2h-8c-1.1 0-2 .9-2 2v4z" />
              <path d="M7 16V12c0-1.1.9-2 2-2h8" />
              <path d="M4 12V8c0-1.1.9-2 2-2h8" />
              <path d="M1 8V4c0-1.1.9-2 2-2h8" />
            </svg>
          </span>

          <div class="text-[0.95rem] space-y-1.5 leading-relaxed">
            <p class="opacity-0 select-none"><span class="font-semibold text-[#8c9097] dark:text-white/50 text-[1rem]"></span></p><p><span class="font-semibold text-[#8c9097] dark:text-white/50 text-[1rem]"></span> <span class="font-bold text-gray-900 dark:text-white ml-2"></span></p>
            <p><span class="font-semibold text-[#8c9097] dark:text-white/50 text-[1rem]">Del día:</span> <span class="font-bold text-gray-900 dark:text-white ml-2">{{ units_of_day_n1|default_if_none:"" }}</span></p>
            <p><span class="font-semibold text-[#8c9097] dark:text-white/50 text-[1rem]">Acumuladas:</span> <span class="font-bold text-gray-900 dark:text-white ml-2">{{ units_accumulated_n1|default_if_none:"" }}</span></p>
            <p><span class="font-semibold text-[#8c9097] dark:text-white/50 text-[1rem]">Totales:</span> <span class="font-bold text-gray-900 dark:text-white ml-2">{{ units_totals_n1|default_if_none:"" }}</span></p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- CARD 3: Facturación -->
  <div class="xl:col-span-4 sm:col-span-6 col-span-12">
    <div class="box rounded-2xl shadow-md hover:shadow-lg transition-all duration-300">
      <div class="box-body">
        <h4 class="text-xl font-bold text-gray-800 dark:text-white mb-4 text-center">Facturación {{ previous_campaign_number|default_if_none:"" }}</h4>

        <div class="flex items-center gap-4">
          <span class="avatar avatar-rounded inline-flex items-center justify-center flex-shrink-0 bg-success mt-4">
            <svg  xmlns="http://www.w3.org/2000/svg"  width="50"  height="50"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-currency-dollar">
              <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
              <path d="M16.7 8a3 3 0 0 0 -2.7 -2h-4a3 3 0 0 0 0 6h4a3 3 0 0 1 0 6h-4a3 3 0 0 1 -2.7 -2" />
              <path d="M12 3v3m0 12v3" /></svg>
          </span>
          

          <div class="text-[0.95rem] space-y-1.5 leading-relaxed">
            <p class="opacity-0 select-none"><span class="font-semibold text-[#8c9097] dark:text-white/50 text-[1rem]"></span></p><p><span class="font-semibold text-[#8c9097] dark:text-white/50 text-[1rem]"></span> <span class="font-bold text-gray-900 dark:text-white ml-2"></span></p>
            <p><span class="font-semibold text-[#8c9097] dark:text-white/50 text-[1rem]">Del día:</span> <span class="font-bold text-gray-900 dark:text-white ml-2">{% localize on %}{{ invoicing_day_n1|default_if_none:""|floatformat:0 }}{% endlocalize %}</span></p>
            <p><span class="font-semibold text-[#8c9097] dark:text-white/50 text-[1rem]">Acumulada:</span> <span class="font-bold text-gray-900 dark:text-white ml-2">{% localize on %}{{ cumulative_invoicing_n1|default_if_none:""|floatformat:0 }}{% endlocalize %}</span></p>
            <p><span class="font-semibold text-[#8c9097] dark:text-white/50 text-[1rem]">totales:</span> <span class="font-bold text-gray-900 dark:text-white ml-2">{% localize on %}{{ total_invoicing_n1|default_if_none:""|floatformat:0 }}{% endlocalize %}</span></p>
          </div>
        </div>
      </div>
    </div>
  </div>

</div>


<!-- grafico -->

<div class="relative rounded-sm overflow-x-auto overflow-y-hidden mb-12 pb-8">
  <div class="grid sm:grid-cols-3 grid-cols-1 gap-4 font-mono text-defaulttextcolor text-sm text-center font-bold rounded-sm min-w-[900px]">

    <!-- Gráfico 1 -->
    <div class="box col-span-1 p-4 rounded-sm bg-light flex-shrink-0 min-w-[300px]" style="height: 450px;">
      <h4 class="text-xl font-bold text-gray-800 dark:text-white mb-4 text-center">
        Unidades Por Día {{ campaign_number|default_if_none:"" }}
      </h4>
      <div id="units-per-day-chart" class="min-h-[350px] w-full"></div>
    </div>

    <!-- Gráfico 2 -->
    <div class="box col-span-1 p-4 rounded-sm bg-light flex-shrink-0 min-w-[300px]" style="height: 450px;">
      <h4 class="text-xl font-bold text-gray-800 dark:text-white mb-4 text-center">
        Unidades por Tipo producto {{ campaign_number|default_if_none:"" }}
      </h4>
      <div id="units-per-product-type-chart" class="min-h-[350px] w-full"></div>
    </div>

    <!-- Gráfico 3 -->
    <div class="box col-span-1 p-4 rounded-sm bg-light flex-shrink-0 min-w-[300px]" style="height: 450px;">
      <h4 class="text-xl font-bold text-gray-800 dark:text-white mb-4 text-center">
        Unidades por División {{ campaign_number|default_if_none:"" }}
      </h4>
      <div id="units-per-division-chart" class="min-h-[350px] w-full"></div>
    </div>

  </div>
</div>





{% endif %}

  <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 */
  }
  </style>



  

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


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






    





<!--modal-->

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


</style>

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




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



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






{% endblock %}

{% block scripts %}


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

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

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

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

  

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

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

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

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


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

    const selectCampaign = document.getElementById("campaign_number");
    const btnGenerar = document.getElementById("btnGenerarQueryFox");
    const btnDownload = document.getElementById("btnDownloadFox");

    
    // Ocultamos Generar al cargar
    btnGenerar.style.display = "none";

    selectCampaign.addEventListener("change", function () {

        const value = parseInt(this.value);

        if (value && value !== 0) {
            // Mostrar Generar Query
            btnGenerar.style.display = "inline-block";

            // Ocultar Descargar Query Fox (si existe)
            if (btnDownload) {
                btnDownload.style.display = "none";
            }

        } else {
            // Ocultar Generar Query
            btnGenerar.style.display = "none";

            // Ocultar también Descargar (por seguridad)
            if (btnDownload) {
                btnDownload.style.display = "none";
            }
        }
    });
});
</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(route_to_download) {
        window.open('http://127.0.0.1:8081/static/public/fox/08-10-2025_11_53-fox-query.xlsx', '_blank');
    }
       

    
    
</script>



<script>
  document.addEventListener("DOMContentLoaded", function() {
      // Asegurar que el spinner esté oculto al cargar
      let spinner = document.getElementById('spinnerOverlay');
      if (spinner) {
          spinner.style.display = 'none';
      }
  
      let form = document.getElementById("topass1");
      if (form) {
          form.addEventListener("submit", function(event) {
              event.preventDefault(); // Detiene el envío por defecto
  
              let button = document.getElementById("buttondownload3");
              if (button) {
                  button.style.display = "none";
              }
              
              if (spinner) {
                  spinner.style.display = 'block';
              }
  
              // Llamar a una función antes del envío
              if (validarFormulario()) {
                  this.submit(); // Envía el formulario si pasa la validación
              } 
          });
      }
  });
  
  function validarFormulario() {
      setTimeout(function() {
          console.log("Preparando el post de zonas");
      }, 3000);
      
      return true;
  }

    // Obtener los datos enviados desde Django
    const unitsPerDay = JSON.parse('{{ total_units_per_day|escapejs }}');
    const unitsPerProductType = JSON.parse('{{ total_units_per_product_type|escapejs }}');
    const unitsPerDivision = JSON.parse('{{ total_units_per_division|escapejs }}');

    
        // 2. Crear los gráficos de ApexCharts

        // Gráfico de Unidades Totales por Día (gráfico lineal)
        var optionsDay = {
            chart: {
                height: 350,
                type: 'line',
                toolbar: {
                    show: false // Esto elimina los iconos de zoom, pan y reset
                  },
            },
            series: [{
                name: 'Unidades por Día',
                data: unitsPerDay.map(item => item[1])  // extraemos los valores de unidades
            }],
            xaxis: {
                categories: unitsPerDay.map(item => item[0]), // extraemos las fechas (DIA_CALENDARIO_FACT)
            }
        };

        var chartDay = new ApexCharts(document.querySelector("#units-per-day-chart"), optionsDay);
        chartDay.render();

        // Gráfico de Unidades por ProductType (gráfico de barras)
        var optionsProductType = {
    chart: {
        height: 350,
        type: 'bar',
        toolbar: {
            show: false
        }
    },
    series: [{
        name: 'Unidades por Tipo Producto',
        data: unitsPerProductType.map(item => item[1])  // extraemos los valores de unidades
    }],
    dataLabels: {
        enabled: true, // Activamos la visualización de las etiquetas dentro de las barras
        style: {
            colors: ['#000'], // Color de las etiquetas (negro)
            fontSize: '14px', // Ajusta el tamaño de la fuente
            fontWeight: 'bold',
            dropShadow: {
                enabled: true, // Añadir sombra al texto para mejorar la visibilidad
                top: 1,
                left: 1,
                blur: 2,
                opacity: 0.6
            }
        },
        offsetY: -10, // Desplaza las etiquetas hacia arriba si es necesario
        background: {
            enabled: true, // Fondo para hacer las etiquetas legibles
            borderRadius: 4,
            padding: 6,
            opacity: 0.7, // Ajusta la opacidad del fondo
            dropShadow: {
                enabled: true,
                top: 2,
                left: 2,
                blur: 3,
                opacity: 0.3
            }
        }
    },
    xaxis: {
        categories: unitsPerProductType.map(item => item[0]),
        labels: {
            style: {
                fontSize: '12px', 
                fontWeight: 600,
                colors: "#8c9097"
            }
        }
    },
    yaxis: {
        labels: {
            formatter: function(val) {
                return Math.round(val); 
            },
            style: {
                colors: "#8c9097",
                fontSize: '14px',
                fontWeight: 'bold'
            }
        }
    },
    tooltip: {
        y: {
            formatter: function(val) {
                return Math.round(val); 
            }
        }
    },
    colors: ['#3B82F6'],
};

var chartProductType = new ApexCharts(document.querySelector("#units-per-product-type-chart"), optionsProductType);
chartProductType.render();

        
        var optionsDivision = {
          chart: {
            height: 400,
            type: 'pie'
          },
          series: unitsPerDivision.map(item => item[1]),
          labels: unitsPerDivision.map(item => item[0]),
          responsive: [{
            breakpoint: 768,
            options: {
              chart: {
                height: 500,
              },
              legend: {
                position: 'bottom',
                fontSize: '14px',
              }
            }
          }]
        };

        var chartDivision = new ApexCharts(document.querySelector("#units-per-division-chart"), optionsDivision);
        chartDivision.render();
    

  </script>




{% endblock %}