{% 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 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">Usuarios</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">
            Seguridad
            <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">
          Usuarios del Sistema
        </li>
    </ol>
</div>
<!-- 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 */
  }
  </style>



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

        <div class="box-body space-y-3">
          <div class="download-data">
              <div class="grid grid-cols-12">
                <div class="xl:col-span-6 sm:col-span-6 col-span-12">
                  <button type="button" class="ti-btn ti-btn-primary" id="download-csv">Página CSV</button>
                  <button type="button" class="ti-btn ti-btn-primary" id="download-xlsx">Página XLSX</button>
                  <button type="button" class="ti-btn ti-btn-primary" id="download-pdf">Página PDF</button>
                  <button type="button" class="ti-btn ti-btn-secondary" id="download-pdf">Listado XLSX</button>
                </div>
                <div class="xl:col-span-6 sm:col-span-6 col-span-12" class="right">
                  <a href="{% url 'newuser' %}" class="ti-btn ti-btn-primary right">
                    Nuevo Usuario
                  </a>
                </div>   
                           
                
              </div>
          </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 -->






    





<!--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>
//  let tabledata = JSON.parse('{{ data2_json|safe }}');  
var table = new Tabulator("#download-table", {
    ajaxURL: "/listusers/", // 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", //fitColumns, 
    reactiveData: false, //turn on data reactivity
    paginationSize: 50, // Tamaño de página inicial
    paginationSizeSelector: [1,50,100,1000,5000], // Opciones de tamaño de página
    movableColumns: true,
    locale: "es", // Establecer el idioma activo a español
    search: true,
    langs: {
          "es": { // Configuración de idioma español
              "pagination": {
                  "first": "primera",
                  "first_title": "primera página",
                  "last": "Última",
                  "last_title": "Última página",
                  "prev": "anterior",
                  "prev_title": "página anterior",
                  "next": "siguiente",
                  "next_title": "página siguiente",
                  "counter": {
                    "showing": "Mostrando",
                    "of": "de",
                    "rows": "filas",
                    "pages": "páginas"
                  },
                  page_title: "Mostrando página", // Aquí agregas el texto deseado
                  page_size: "Número de Filas" // Traducción de Page Size
                },
            }
          },
    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: "#", field: "id", sorter: "number", hozAlign: "center", widthShrink: 1,headerFilter: "input",},
        {
            title: "Nombre y Apellido",
            field: "first_name",
            hozAlign: "center",
            widthShrink: 1,
            sorter: "string",
            accessor: function (value, data) {
              // Calcula el valor de fullname dinámicamente
              return `${data.first_name || ""} ${data.last_name || ""}`.trim();
            },
            formatter: function (cell, formatterParams) {
                const data = cell.getRow().getData();
                const fullName = `${data.first_name || ""} ${data.last_name || ""}`.trim();
                const username = data.username || "Sin Usuario";
                const rawDate = data.last_login?.trim();
                const isActive = data.is_active; // Verifica el valor de is_active
                if(isActive) {
                return `
                    <div style="text-align: center;">
                        <div>${fullName}</div>
                        <div style="color: gray; font-size: 12px;">(${username})</div>
                    </div>
                `;
                } else {
                  return `
                  <div style="text-align: center;" title="Desactivado">
                        <div><span style="color: #E6533C;"><i class="las la-lock"></i> ${fullName}</span> </div>
                        <div style="color: gray; font-size: 12px;">(${username})</div>
                    </div>
                `;
                }
            },
            headerFilter: "input",
            headerFilterFunc: function(headerValue, rowValue, rowData) {
                // Convierte el valor del filtro y los campos relevantes a minúsculas
                const filterValue = headerValue.toLowerCase();
                const fullName = `${rowData.first_name || ""} ${rowData.last_name || ""}`.toLowerCase();
                const username = (rowData.username || "").toLowerCase();

                // Verifica si el valor del filtro está contenido en cualquiera de los campos
                return (
                    fullName.includes(filterValue) || 
                    username.includes(filterValue)
                );
            },
        },
        {
          title: "Email",
          field: "email",
          sorter: "string",
          hozAlign: "center",
          widthShrink: 1,
          formatter: function (cell, formatterParams) {
              const data = cell.getRow().getData();
              const emailcel = `${data.email}`.trim();

              const rawDate = data.last_login?.trim();
              let formattedDate = "";

              if (rawDate) {
                  const date = new Date(rawDate); // Convierte la fecha a un objeto Date
                  if (!isNaN(date.getTime())) { // Verifica que la fecha sea válida
                      formattedDate = date.toLocaleDateString("es-ES", {
                          day: "2-digit",
                          month: "2-digit",
                          year: "2-digit",
                      }) + " " + date.toLocaleTimeString("es-ES", {
                          hour: "2-digit",
                          minute: "2-digit",
                          hour12: false, // Formato 24 horas
                      });
                  } else {
                      formattedDate = "";
                  }
              }

              return `
                  <div style="text-align: center;">
                      <div>${emailcel}</div>
                      <div style="color: gray; font-size: 12px;">( <i style="color: green; font-size: 20px;margin-top: 5px;" class="las la-user-clock"></i> ${formattedDate})</div>
                  </div>
              `;
          },
          headerFilter: "input",
        },
        {
          title: "Tipo Usuario",
          field: "is_superuser",
          sorter: "string",
          hozAlign: "center",
          widthShrink: 1,
          headerFilter: "select", // Usa un filtro de tipo select
          headerFilterParams: {
              values: [
                  { value: "", label: "Todos" }, 
                  { value: "1", label: "Si" },  
                  { value: "0", label: "No" }, 
              ],
          },
          headerFilterFunc: function(headerValue, rowValue) {
              if (headerValue === "") return true; // Mostrar todas las filas si no se selecciona un filtro específico

              // Convertir el valor del filtro a número y comparar con el valor de la fila
              const filterValue = parseInt(headerValue, 10);
              return rowValue === filterValue;
          },
          formatter: function (cell, formatterParams) {
              const rowData = cell.getRow().getData(); // Obtén los datos de la fila
              const isSuperUser = rowData.is_superuser; // Verifica el valor de is_superuser
              if (isSuperUser === 1) { 
                  return `
                      <div style="text-align: center;">
                          <div>Si</div>
                      </div>
                  `;    
              } else {
                  return `
                      <div style="text-align: center;">
                          <div>No</div>
                      </div>
                  `; 
              }  
          },
        },
        { title: "Rol", field: "rol", sorter: "string", hozAlign: "center", widthShrink: 1, headerFilter: "input"},
        { 
          title: "Acciones", 
          field: "actions", 
          hozAlign: "center",
          headerSort: false, // Deshabilitar el botón de ordenar en el título 
          //width: 500, // Ajusta el ancho fijo de la columna
          cssClass: "action-column", // Clase personalizada para esta columna
          widthShrink: 1,
          formatter: function (cell, formatterParams) {
              const rowData = cell.getRow().getData(); // Obtén los datos de la fila
              const idrowdata = rowData.id; 
              const isActive = rowData.is_active; // Verifica el valor de is_active
              if(isActive) {
                 return `
                  <button onclick="window.location.href = '/edituser/${rowData.id}/';"  class="classtypebutt-edit btntable btntable-edit ti-btn ti-btn-info-full ti-btn-wave" title="Editar"><i class="classtypebutt-edit bi bi-pencil"></i></button>
                  <button onclick="funcionDesactivate(${idrowdata})" class="btntable btntable-desactivate ti-btn ti-btn-danger-full ti-btn-wave" title="Desactivar"><i class="classeditid-${idrowdata} classtypebutt-desactivate bi bi-dash-square"></i></button>
                `;    
              } else {
                return `
                  <button onclick="window.location.href = '/edituser/${rowData.id}/';"  class="classtypebutt-edit btntable btntable-edit ti-btn ti-btn-info-full ti-btn-wave" title="Editar"><i class="classtypebutt-edit bi bi-pencil"></i></button>
                  <button onclick="funcionActivate(${idrowdata})" class="btntable btntable-activate ti-btn ti-btn-success-full ti-btn-wave" title="Activar"><i class="classeditid-${idrowdata} classtypebutt-activate bi bi-check-square"></i></button>
                `; 
              }
          },
        },
    ],
});
    



// nombres para archivos
const now = new Date();
const todayF = `${now.getDate()}-${now.getMonth() + 1}-${now.getFullYear()}`;
        
const nombreArchivoCSV = `data-${todayF}.csv`;
const nombreArchivoXLSX = `data-${todayF}.xlsx`;
const nombreArchivoPDF = `data-${todayF}.pdf`;


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


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

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








table.on("dataLoading", function(){
  document.getElementById("download-csv").disabled = true;
 document.getElementById("download-xlsx").disabled = true;
  document.getElementById("download-pdf").disabled = true;
});

table.on("dataLoaded", function(){
  document.getElementById("download-csv").disabled = false;
  document.getElementById("download-xlsx").disabled = false;
  document.getElementById("download-pdf").disabled = false;
});

</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 funcionDesactivate(idrowdata) { 
    showConfirmModal(`¿Estás seguro de Desactivar el usuario con ID ${idrowdata}?`, function () {
      document.getElementById('spinnerOverlay').style.display = 'block';
        fetch(`/deactivateuser/${idrowdata}/`, {
            method: "GET",
            headers: {
                'X-Requested-With': 'XMLHttpRequest', 
            },
        })
        .then(response => {
            if (response.ok) {
                return response.json();
            } else {
                document.getElementById('spinnerOverlay').style.display = 'none';
                throw new Error("Error al procesar la solicitud.");
            }
        })
        .then(data => {
            document.getElementById('spinnerOverlay').style.display = 'none';
            if (data.success) {
                showToast(data.message,'success'); // Muestra el toast con un mensaje exitoso
            } else {
                showToast(data.message, 'danger'); // Muestra el toast con un mensaje de error
            }
        })
        .catch(error => {
            document.getElementById('spinnerOverlay').style.display = 'none';
            console.error("Error al desactivar el usuario:", error);
            showToast("Ocurrió un error inesperado.", 'danger'); // Muestra un mensaje de error genérico
        });
    });
}

 
function funcionActivate(idrowdata) {
    
    // Mostrar confirmación al usuario
    showConfirmModal(`¿Estás seguro de Activar el usuario con ID ${idrowdata}?`, function () {
        document.getElementById('spinnerOverlay').style.display = 'block';
        fetch(`/activateuser/${idrowdata}/`, {
            method: "GET",
            headers: {
              'X-Requested-With': 'XMLHttpRequest', 
            },
        })
        .then(response => {
          if (response.ok) {
                return response.json(); 
            } else {
              document.getElementById('spinnerOverlay').style.display = 'none';
              showToast("Error al Activar el Usuario", 'danger')
            }
        })
        .then(data => {
            document.getElementById('spinnerOverlay').style.display = 'none';
            if (data.success) {
              showToast(data.message,'success')
            } else {
              showToast(data.message, 'danger')
            }
        })
        .catch(error => {
            document.getElementById('spinnerOverlay').style.display = 'none';
            //console.error("Error al Activar el Usuario:", error);
            showToast("Ocurrió un error inesperado.", 'danger')
        });
    });
}
</script>







{% endblock %}