{% 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'%}">
 
        
{% 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">FV Revendedora</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">
            FV
            <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">
           Revendedora
        </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 hidden 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">xxxx.</span>
            <form class="grid grid-cols-12  gap-x-4 gap-y-2 items-center mt-2">
            <div class="sm:col-span-3 col-span-12">
              <label class="hidden" for="specificSizeInputName">Name</label>
              <input type="text" class="form-control" id="specificSizeInputName" placeholder="DNI">
            </div>
            <div class="sm:col-span-3 col-span-12">
              <label class="hidden" for="specificSizeInputGroupUsername">Username</label>
              <div class="input-group">
                <div class="input-group-text">@</div>
                <input type="text" class="form-control" id="specificSizeInputGroupUsername" placeholder="email">
              </div>
            </div>
            <div class="sm:col-span-3 col-span-12">
              <label class="hidden"
              for="specificSizeSelect">Preference</label>
              <select class="form-select !py-[0.59rem]" id="specificSizeSelect">
              <option selected>Choose...</option>
              <option value="1">One</option>
              <option value="2">Two</option>
              <option value="3">Three</option>
            </select>
            </div>
            <div class="sm:col-span-3 col-span-12">
              <div class="form-check !my-auto">
              <input class="form-check-input" type="checkbox"
                  id="autoSizingCheck2">
              <label class="form-check-label" for="autoSizingCheck2">
                  Remember me
              </label>
              </div>
            </div>
            <div class="sm:col-span-3 col-span-12">
            <button type="submit" class="ti-btn ti-btn-primary-full">Submit</button>
            </div>
            </form>
           <!-- <form action="/filterusers/" method="post" class="mt-3">
            {% csrf_token %}
            <div class="grid grid-cols-12 sm:gap-6">
              <div class="xl:col-span-3 lg:col-span-6 md:col-span-6 sm:col-span-12 col-span-12">
                <button type="submit" class="ti-btn bg-primary text-white ms-3">Ejecutar Consulta</button>
              </div>
            </div>          
          </form> -->
        </div>
      </div>
    </div>
  </div>
  </div>

  <div class="grid grid-cols-12 gap-6">
    <div class="col-span-12">
      <div class="box">
        <div class="box-header">
          <h5 class="box-title">Revendedora</h5>
        </div>

        <div class="box-body space-y-3">
          <div class="download-data">
              <button type="button" class="ti-btn ti-btn-primary" id="download-csv">Download CSV</button>
              <button type="button" class="ti-btn ti-btn-primary" id="download-xlsx">Download XLSX</button>
              <button type="button" class="ti-btn ti-btn-primary" id="download-pdf">Download PDF</button>
          </div>
          <div class="overflow-hidden table-bordered">
            <div id="download-table" class="ti-custom-table ti-striped-table ti-custom-table-hover"></div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- End::row-3 -->
</div>
<!-- Start::main-content -->
{% endblock %}

{% block scripts %}


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

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

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

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

  <script src="{% static 'assets/js/datatable.js'%}"></script>

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

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

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

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


<script>
//  let tabledata = JSON.parse('{{ data2_json|safe }}');  
var table = new Tabulator("#download-table", {
    ajaxURL: "/getusers/", // URL del backend para obtener datos dinámicos
    ajaxConfig: "GET", // Método HTTP para las solicitudes
    ajaxContentType: "json", // Esperamos una respuesta JSON
    pagination: true,
    paginationMode: "remote", // Habilitar paginación remota
    layout: "fitDataStretch",
    paginationSize: 50, // Tamaño de página inicial
    paginationSizeSelector: [50,100,1000], // Opciones de tamaño de página
    movableColumns: true,
    locale: "es", // Establecer el idioma activo a español
    langs: {
        es: {
            pagination: {
                first: "Primera página",
                first_title: "Ir a la primera página",
                last: "Última página",
                last_title: "Ir a la última página",
                prev: "Página anterior",
                prev_title: "Ir a la página anterior",
                next: "Página siguiente",
                next_title: "Ir a la página siguiente",
                counter: {
                    showing: "Mostrando",
                    of: "de",
                    rows: "filas",
                    pages: "páginas",
                },
            },
        },
    },
    footerElement: `<div id="record-counter" style="padding: 5px; text-align: center;">Mostrando 0 - 0 de 0</div>`,
    ajaxResponse: function (url, params, response) {
        // Calcula el rango dinámico
        let totalRecords = response.total_records; // Obtén el total de registros del backend
        let pageSize = this.getPageSize(); // Tamaño de página actual
        let currentPage = this.getPage(); // Página actual
        let start = (currentPage - 1) * pageSize + 1;
        let end = Math.min(currentPage * pageSize, totalRecords);

        // Actualizar el contador personalizado
        document.getElementById("record-counter").innerText = `Mostrando ${start} - ${end} de ${totalRecords}`;
        return response; // Devuelve la respuesta para que Tabulator procese los datos
    },
    columns: [
        { title: "Cuenta", field: "UserName", sorter: "string" },
        { title: "Nombre", field: "FirstName", sorter: "string" },
        { title: "Apellido", field: "LastName", sorter: "string" },
        { title: "Email", field: "Email", sorter: "string" },
        { title: "DNI", field: "DocumentNumber", sorter: "string" },
        { title: "Nacionalidad", field: "Nationality", sorter: "string" },
        { title: "Estado", field: "ResellerStatus", sorter: "string" },
    ],
});
    

    //trigger download of data.csv file
    document.getElementById("download-csv").addEventListener("click", function () {
        table.download("csv", "data.csv");
    });


    //trigger download of data.xlsx file
    document.getElementById("download-xlsx").addEventListener("click", function () {
        table.download("xlsx", "data.xlsx", { sheetName: "My Data" });
    });

    //trigger download of data.pdf file
    document.getElementById("download-pdf").addEventListener("click", function () {
        table.download("pdf", "data.pdf", {
            orientation: "portrait", //set page orientation to portrait
            title: "Revendedoras", //add title to report
        });
    });

</script>
     
{% endblock %}