{% 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'%}">
 
        <link rel="stylesheet" href="{% static 'assets/libs/dragula/dragula.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">Roles y Permisos</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">
          Roles y Permisos
        </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">Roles y Permisos</h5>
        </div>

        <div class="box-body space-y-3">
          <div class="download-data">
              <div class="grid grid-cols-12">
                <div class="xl:col-span-3 sm:col-span-3 col-span-12">
                  <div class="sm:col-span-3 col-span-12">
                    <label style="padding-bottom: 10px;" for="selectrol">Rol</label>
                    
                    <select class="form-select !py-[0.59rem]" id="selectrol">
                      <option selected value="0">Seleccione el Rol</option>
                      {% for rol in rols %}
                        <option value="{{ rol.id }}">{{ rol.role_name }}</option>
                      {% endfor %}
                  </select>
                  </div>
                </div>   
                           
                
              </div>
          </div>
        </div>


        <div class="box-body space-y-3">

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


            <div class="xl:col-span-6 col-span-12">
              <div style="border-color: rgb(241 102 106);border-style: dashed;border-width: 2px; background-color: rgba(241, 102, 106, 0.1) ;border-radius: 0.5rem;" class="border">
                <h6 id="h6titlerolnoasig" style="font-size: 14px;padding-top: 15px;text-align: center;" >Permisos NO Asignados</h6>
                <br>
              </div>
              <br>
              <div style="border-color: rgb(241 102 106);border-style: dashed;border-width: 2px; background-color: rgba(241, 102, 106, 0.1) ;border-radius: 0.5rem;" class="border" id="draggable-left1">
              <!-- draggable-left1 -->    
              <br>
              <!-- end draggable-left1 -->     
              </div>
            </div>
            
            <div class="xl:col-span-6 col-span-12">
              <div style="border-color: hsl(134, 61%, 41%);border-style: dashed;border-width: 2px;background-color: rgba(131, 151, 104, 0.1);border-radius: 0.5rem;">
                <h6  id="h6titlerolasig" style="font-size: 14px; padding-top: 15px;text-align: center;">Permisos SI Asignados</h6>
                <br>
              </div>
              <br>
              <div style="border-color: hsl(134, 61%, 41%);border-style: dashed;border-width: 2px;background-color: rgba(131, 151, 104, 0.1);border-radius: 0.5rem;" id="draggable-right1">
              <!-- draggable-right1 -->  
              <br>
                <!-- end draggable-right1 -->  
              </div>
            </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>
  




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





<!-- <script src=" static 'assets/js/draggable-cards.js'"></script> 
code local in this part:  -->
<script>
  (function () {
    "use strict";

    let DIV_Box = ".draggable-box";

    /* Función para manejar la pantalla completa */
    let boxFullscreenBtn = document.querySelectorAll(".terms-fullscreen");
    boxFullscreenBtn.forEach((ele) => {
        ele.addEventListener("click", function (e) {
            let $this = this;
            let box = $this.closest(DIV_Box);
            box.classList.toggle("box-fullscreen");
            box.classList.remove("box-collapsed");
            e.preventDefault();
            return false;
        });
    });

    /* Inicializar Dragula con los contenedores */
    let drake = dragula([
        document.querySelector('#draggable-left1'), 
        document.querySelector('#draggable-right1')
    ]);

    // Evento cuando un elemento es soltado en un nuevo contenedor
    drake.on('drop', function (el, target, source) {
        if (el.id.startsWith("roldrag")) {
            // Verificar si el elemento cambió de contenedor
            if (target !== source) {
                // Obtener el nombre del rol seleccionado en el momento del drop
                const selectElement = document.getElementById("selectrol");
                const roleName = selectElement.options[selectElement.selectedIndex].text;

                // Obtener el nombre del módulo desde el elemento movido
                let moduleName = el.querySelector(".box-title")?.innerText || "Módulo Desconocido";

                // Mensajes de los toasts con el rol dinámico
                let roleRevMs = `Permisos del "${moduleName}" Revocados al Rol ${roleName}`;
                let roleAsigMs = `Permisos del "${moduleName}" Asignados al Rol ${roleName}`;

                // Mostrar el toast solo si realmente se cambió de contenedor
                if (target.id === "draggable-left1") {
                    //permiso revodaco
                    showToast(roleRevMs, 'danger');
                } else {
                    //permiso asignado
                    showToast(roleAsigMs, 'success');
                }
            }
        }
    });

})();

</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>
  document.addEventListener("DOMContentLoaded", function () {
    //cargarPermisos();
    document.getElementById("draggable-right1").addEventListener("change", handlePermissionChange);
    document.getElementById("draggable-left1").addEventListener("change", handlePermissionChange);
  });
  
  document.getElementById("selectrol").addEventListener("change", function () {
    cargarPermisos();
  });
  
  function actualizarTitulosRol() {
    const selectRol = document.getElementById("selectrol");
    if (!selectRol) return; // Si el select no existe, salimos de la función

    const selectedOption = selectRol.options[selectRol.selectedIndex];
    const roleName = selectedOption.text;

    const h6Element = document.getElementById("h6titlerolnoasig");
    const h6siElement = document.getElementById("h6titlerolasig");

    if (h6Element) {
        h6Element.innerHTML = `Permisos NO Asignados${selectRol.selectedIndex === 0 ? "" : "<br> Rol <strong>" + roleName + "</strong>"}`;
    }
    
    if (h6siElement) {
        h6siElement.innerHTML = `Permisos SI Asignados${selectRol.selectedIndex === 0 ? "" : "<br> Rol <strong>" + roleName + "</strong>"}`;
    }
}

  
  // Cargar permisos desde el backend
  function cargarPermisos() {
    const selectRol = document.getElementById("selectrol");
    if (!selectRol) return;
    const id_Rol_find = selectRol.value;

      fetch("/get__permissions_drag/", {
          method: "POST",
          headers: {
              "Content-Type": "application/json",
              "X-CSRFToken": "{{ csrf_token }}"
          },
          body: JSON.stringify({id_Rol: id_Rol_find})
      })
      .then(response => response.json())
      .then(data => {
          fillColumnAsig("draggable-right1", data.assigned);  // P Asig
          fillColumn("draggable-left1", data.revocados);  // P Rev
          actualizarTitulosRol();  // Actualizar títulos del rol seleccionado
      })
      .catch(error => console.error("Error al obtener los permisos:", error));
  }
  
  // Renderizar categorías, subcategorías y permisos en las columnas
  function fillColumnAsig(columnaId, categorias) {
      let columna = document.getElementById(columnaId);
      columna.innerHTML = "<br>"; // Limpiar antes de agregar nuevos elementos
  
      categorias.forEach(categoria => {
          let categoriaHTML = `
          <div style="margin: 15px;" class="box draggable-box custom-box border border-primary">
              <div class="box-header flex justify-between">
                  <div class="flex items-center">
                      <div>
                          <p style="margin-left: 5px;" class="box-title box-text text-info mb-1 text-[.875rem] font-semibold">${categoria.category_name}</p>
                          <div class="!text-[0.75rem] mb-1 !font-normal">${categoria.category_description}</div>
                      </div>
                  </div>
              </div>
              <div class="box-body">
                  ${categoria.permission_sub_category.map(subcategoria => `
                      <div class="subcategory-section">
                          <h4 style="margin-top: 10px;" class="text-md font-semibold">${subcategoria.subcategory_name}</h4>
                          <ul class="ti-list-group">
                              ${subcategoria.permisos.map(permiso => `
                                  <li class="ti-list-group-item">
                                      <input class="form-check-input me-1 font-semibold" type="checkbox" ${permiso.checked ? "checked" : ""}>
                                      <span title="${permiso.permission_description}">${permiso.permission_name}</span>
                                  </li>
                              `).join('')}
                          </ul>
                      </div>
                  `).join('')}
              </div>
          </div>`;
          
          columna.innerHTML += categoriaHTML;
      });
  }

  function fillColumn(columnaId, categorias) {
      let columna = document.getElementById(columnaId);
      columna.innerHTML = "<br>"; // Limpiar antes de agregar nuevos elementos
  
      categorias.forEach(categoria => {
          let categoriaHTML = `
          <div style="margin: 15px;" class="box draggable-box custom-box border border-primary">
              <div class="box-header flex justify-between">
                  <div class="flex items-center">
                      <div>
                          <p style="margin-left: 5px;" class="box-title box-text text-info mb-1 text-[.875rem] font-semibold">${categoria.category_name}</p>
                          <div class="!text-[0.75rem] mb-1 !font-normal">${categoria.category_description}</div>
                      </div>
                  </div>
              </div>
              <div class="box-body">
                  ${categoria.permission_sub_category.map(subcategoria => `
                      <div class="subcategory-section">
                          <h4 style="margin-top: 10px;" class="text-md font-semibold">${subcategoria.subcategory_name}</h4>
                          <ul class="ti-list-group">
                              ${subcategoria.permisos.map(permiso => `
                                  <li class="ti-list-group-item">
                                      <input class="form-check-input me-1 font-semibold" type="checkbox" ${permiso.checked ? "checked" : ""}>
                                      <span title="${permiso.permission_description}">${permiso.permission_name}</span>
                                  </li>
                              `).join('')}
                          </ul>
                      </div>
                  `).join('')}
              </div>
          </div>`;
          
          columna.innerHTML += categoriaHTML;
      });
  }


  function handlePermissionChange(event) {
  if (!event.target.matches("input[type='checkbox']")) return; // Verifica que el evento provenga de un checkbox

  const checkbox = event.target;
  const selectRol = document.getElementById("selectrol");
  const id_Rol_find = selectRol.value;
  const permisoNombre = checkbox.nextElementSibling.textContent.trim(); // Nombre del permiso
  const checked = checkbox.checked; // Estado del checkbox
  console.log("Rol Id:",id_Rol_find," permiso nombre: ",permisoNombre," check true o false: ",checked)
  const checked_add_remove = checked ? "add" : "remove"

  fetch("/update_permission_role/", {
          method: "POST",
          headers: {
              "Content-Type": "application/json",
              "X-CSRFToken": "{{ csrf_token }}"
          },
          body: JSON.stringify({ id_Rol: id_Rol_find,
            permission_name: permisoNombre,
            action: checked_add_remove
          })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
          if(checked_add_remove == "remove"){
            showToast(data.message, 'warning');
          }else
          {
            showToast(data.message, 'success');
          }
          
          cargarPermisos();
        } else {
          showToast(data.message, 'danger');  
            checkbox.checked = !checked; // Revertimos el cambio en caso de error
        }
    })
    .catch(error => {
        showToast(error, 'danger'); 
        checkbox.checked = !checked; // Revertimos el cambio en caso de error
    });
}

  </script>
  


{% endblock %}