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

{% block styles %}


<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>



    <!-- Dropzone File Upload  Css -->
    <link rel="stylesheet" href="{% static 'assets/libs/dropzone/dropzone.css'%}">
    <!-- filepond File Upload  Css -->
    <link rel="stylesheet" href="{% static 'assets/libs/filepond/filepond.min.css'%}">
    <link rel="stylesheet" href="{% static 'assets/libs/filepond-plugin-image-preview/filepond-plugin-image-preview.min.css'%}">
    <link rel="stylesheet" href="{% static 'assets/libs/filepond-plugin-image-edit/filepond-plugin-image-edit.min.css'%}">
    <link rel="stylesheet" href="{% static 'assets/libs/filepond-plugin-image-preview/filepond-plugin-image-preview.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">Editar Usuario</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
               <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">
                Editar Usuario
             </li>
        </ol>
    </div>
    <!-- Page Header Close -->

 <!-- Start::row-1 -->
 <div class="grid grid-cols-12 gap-x-6">
    <div class="xxl:col-span-4 xl:col-span-12 col-span-12">
        <div class="box overflow-hidden">
            <div class="box-body !p-0">
                <div class="sm:flex items-start p-6      main-profile-cover">
                    <div>
                        <span class="avatar avatar-xxl avatar-rounded me-4">
                            <img id="imgprofile" src="{% static profileimg %}" alt="">
  
                        </span>
                    </div>
                    <div class="flex-grow main-profile-info">
                        <div class="flex items-center !justify-between">
                            <h6 class="font-semibold mb-1 text-white text-[1rem]">{{vfirstnames}} {{vlastnames}}</h6>
                            <a type="button" data-hs-overlay="#modal-dropzone" href="javascript:void(0);" class="hs-dropdown-toggle ti-btn ti-btn-light !font-medium !gap-0"><i class="ri-add-line me-1 align-middle inline-block"></i>Foto</a>
                        </div>
                        <p style="padding-top: 10px;" class="mb-0 !text-white">Acceso: <span class="!text-white opacity-[0.7]">{% if vacceso != none %}{{vacceso}}{% else %}Nunca{% endif %}</span></p>
                        <p class="mb-0 !text-white">Alta: <span class="!text-white opacity-[0.7]">{{vcreado}}</span></p>
                    </div>
                </div>
                <div class="p-6 border-b border-dashed dark:border-defaultborder/10">
                    <div class="mb-6">
                        <p class="text-[.9375rem] mb-2 font-semibold">Referencia | Observaciones:</p>
                        <p class="text-[0.75rem] text-[#8c9097] dark:text-white/50 opacity-[0.7] mb-0">
                            {{vobservation}}
                        </p>
                    </div>
                </div>
                <div class="p-6 border-b border-dashed dark:border-defaultborder/10">
                    <p class="text-[.9375rem] mb-2 me-6 font-semibold">Information de Contacto:</p>
                    <div class="text-[#8c9097] dark:text-white/50">
                        <p class="mb-2">
                            <span class="avatar avatar-sm avatar-rounded me-2 bg-light text-[#8c9097] dark:text-white/50">
                                <i class="ri-mail-line align-middle text-[.875rem] text-[#8c9097] dark:text-white/50"></i>
                            </span>                                
                            <a class="hs-dropdown-toggle ti-btn" style="color: lightskyblue" href="mailto:{{vemail}}">{{vemail}}</a>
                        </p>
                    </div>
                </div>
                
               
            </div>
        </div>
        
    </div>
    <div class="xxl:col-span-8 xl:col-span-12 col-span-12">
        <div class="grid grid-cols-12 gap-x-6">
            <div class="xl:col-span-12 col-span-12">
                <div class="box">
                    <div class="box-body !p-0">
                        <div class="!p-4 border-b dark:border-defaultborder/10 border-dashed md:flex items-center justify-between">
                            <nav class="-mb-0.5 sm:flex md:space-x-6 rtl:space-x-reverse pb-2">
                                <a class="w-full sm:w-auto flex active hs-tab-active:font-semibold  hs-tab-active:text-white hs-tab-active:bg-primary rounded-md py-2 px-4 text-primary text-sm" href="javascript:void(0);" id="activity-tab" data-hs-tab="#activity-tab-pane" aria-controls="activity-tab-pane">
                                    <i style="padding-right: 5px;" class="ri-user-add-line"></i> Datos Básicos
                                </a>
                              </nav>
                        </div>
                        <div class="!p-4">
                            <div class="tab-content" id="myTabContent">
                                <div class="tab-pane show active fade !p-0 !border-0" id="activity-tab-pane"
                                    role="tabpanel" aria-labelledby="activity-tab" tabindex="0">
                                    <form id="topass1" action="" method="post">
                                        {% csrf_token %}
                                        <div data-mdb-animation-initialized="true" style="animation-duration: 500ms;" data-mdb-animation-init="" 
                                             data-mdb-toggle="animation" data-mdb-animation-start="onHover" data-mdb-animation="fade-in-left" 
                                             data-mdb-animation-reset="true" id="icon-1"  role="tabpanel" aria-labelledby="icon-item-1" >
                                            <div class="grid grid-cols-12 gap-4">
                                                <div class="xl:col-span-4 col-span-12">
                                                    <label for="input-label" class="form-label">Apellidos *</label>
                                                    <input value="{{vlastnames}}" type="text" class="form-control" id="lastnames" name="lastnames" required>
                                                </div>
                                                <div class="xl:col-span-4 col-span-12">
                                                    <label for="input-label" class="form-label">Nombres *</label>
                                                    <input value="{{vfirstnames}}" type="text" class="form-control" id="firstnames" name="firstnames" required>
                                                </div>
                                                <div class="xl:col-span-4 col-span-12">
                                                    <label for="input-label" class="form-label">Email *</label>
                                                    <input value="{{vemail}}" type="email" class="form-control" id="email" name="email" required>
                                                    {% if messages and email != '' %}
                                                        {% for message in messages %}
                                                            {% if "Email ya existe" in message %}
                                                                <p style="color: red;text-align: center;">Error: Email ya existe</p>
                                                            {% endif %}
                                                        {% endfor %}
                                                    {% endif %}

                                                    
                                                        
                                                      
                                                </div>
                                               
                                                <div class="xl:col-span-6 col-span-12">
                                                    <label for="input-label" class="form-label">Contraseña *</label>
                                                    <div class="input-group">
                                                        <input value="{{vpassword}}" type="password" 
                                                            class="form-control form-control-lg !rounded-e-none"
                                                            id="password" name="password">
                                                        <button aria-label="button" type="button" class="ti-btn ti-btn-light !rounded-s-none !mb-0"
                                                            onclick="createpassword('password',this)" 
                                                            id="button-addon2"><i class="ri-eye-off-line align-middle"></i></button>
                                                    </div>
                                                </div>
                                                <div class="xl:col-span-6 col-span-12">
                                                    <label style="padding-bottom: 10px;" for="selectrol">Rol</label>
                                                    <select class="form-select !py-[0.59rem]" id="selectrol" name="selectrol">
                                                        <option {% if rolid == "0" %} selected {% endif %} value="0">Seleccione el Rol</option>
                                                        {% for rol in rols %}
                                                            <option {% if rolid == rol.id %} selected {% endif %} value="{{ rol.id }}">{{ rol.role_name }}</option>
                                                        {% endfor %}
                                                    </select>
                                                </div>
                                                <div class="xl:col-span-12 col-span-12">
                                                    <label for="input-label" class="form-label">Referencia | Observaciones</label>
                                                    <input {% if vobservation != None %} value="{{vobservation}}" {% endif %}  type="text" class="form-control" id="observation" name="observation" placeholder="Ej: Gerencia de Sistemas - Analista">
                                                </div>
                                                
                                                
                                                
                                            </div>
                                        </div>
                                        <div style="text-align: right;">
                                            <button style="margin: 15px;" type="submit" class="ti-btn ti-btn-primary btn-wave ms-auto float-right">Ediatr y Guardar</button>
                                        </div>
                                        
                                    </form>
                                </div>
                                
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
        </div>
    </div>
</div>
<!--End::row-1 -->

</div>











    
    
            
    
    
<div hidden data-single="true" action="/file-upload" class="dropzone"></div>
    
    










<div id="modal-dropzone" class="hs-overlay hidden ti-modal">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out">
    <div class="ti-modal-content">
        <div class="ti-modal-header">
            <h6 class="modal-title text-[1rem] font-semibold" id="mail-ComposeLabel">Foto de Perfil</h6>
                <button type="button" class="hs-dropdown-toggle !text-[1rem] !font-semibold !text-defaulttextcolor" data-hs-overlay="#modal-dropzone">
                <span class="sr-only">Cerrar</span>
                <i class="ri-close-line"></i>
                </button>
        </div>
        <div class="ti-modal-body px-4">
            <div class="box" style="border: none;">
                <div class="box-body">
                    <input id="img_profile" type="file" class="filepond circular-filepond" accept="image/png, image/jpeg, image/gif">
                </div>
            </div>
        </div>
        <div class="ti-modal-footer">
            <button id="close_modal_btn" type="button"
            class="hs-dropdown-toggle ti-btn  ti-btn-secondary-full align-middle"
            data-hs-overlay="#modal-dropzone">
            Cerrar
            </button>
            <button id="button_save_dropzone" type="button" class="ti-btn bg-primary text-white !font-medium">Guardar</button>
        </div>
        <div class="box-footer hidden border-t-0">
        </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 %}

<!-- Show Password JS -->
<script src="{% static 'assets/js/show-password.js'%}"></script>


<!-- DropZone File Upload JS -->
<script src="{% static 'assets/libs/dropzone/dropzone-min.js'%}"></script>
<!-- Filepond File Upload JS -->
<script src="{% static 'assets/libs/filepond-plugin-image-preview/filepond-plugin-image-preview.min.js'%}"></script>
<script src="{% static 'assets/libs/filepond-plugin-file-encode/filepond-plugin-file-encode.min.js'%}"></script>
<script src="{% static 'assets/libs/filepond-plugin-file-validate-size/filepond-plugin-file-validate-size.min.js'%}"></script>
<script src="{% static 'assets/libs/filepond-plugin-file-validate-type/filepond-plugin-file-validate-type.min.js'%}"></script>
<script src="{% static 'assets/libs/filepond-plugin-image-edit/filepond-plugin-image-edit.min.js'%}"></script>
<script src="{% static 'assets/libs/filepond-plugin-image-exif-orientation/filepond-plugin-image-exif-orientation.min.js'%}"></script>
<script src="{% static 'assets/libs/filepond-plugin-image-crop/filepond-plugin-image-crop.min.js'%}"></script>
<script src="{% static 'assets/libs/filepond-plugin-image-resize/filepond-plugin-image-resize.min.js'%}"></script>
<script src="{% static 'assets/libs/filepond-plugin-image-transform/filepond-plugin-image-transform.min.js'%}"></script>
<script src="{% static 'assets/libs/filepond/filepond.min.js'%}"></script>
<script src="{% static 'assets/js/fileupload.js'%}"></script>





<script>
document.addEventListener("DOMContentLoaded", function() {
    // Asegurar que el spinner esté oculto al cargar
    let spinner = document.getElementById('spinnerOverlay');

    let form = document.getElementById("topass1");
    if (form) {
        form.addEventListener("submit", function(event) {
            event.preventDefault();
            document.getElementById('spinnerOverlay').style.display = 'block';
            this.submit();

        });
        
    }
});
</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>
FilePond.registerPlugin(); 

const inputElement = document.querySelector('#img_profile');
const pond = FilePond.create(inputElement, {
    allowMultiple: false,
    acceptedFileTypes: ['image/png', 'image/jpeg', 'image/gif']
});
</script>



    

<script>
    const authenticatedUserId = "{{ request.user.id }}";
    const userId = "{{ userId }}";

    document.addEventListener("DOMContentLoaded", function () {
        const saveButton = document.getElementById("button_save_dropzone");
        
        if (saveButton) {
            saveButton.addEventListener("click", function () {
                // Accede al FilePond
                const pondInstance = FilePond.find(document.getElementById("img_profile"));
                const files = pondInstance.getFiles();

                if (!files || files.length === 0) {
                    showToast("Selecciona una imagen primero", "danger");
                    return;
                }

                const file = files[0].file;

                const formData = new FormData();
                formData.append("profile_image", file);
                formData.append("user_id", "{{userId}}"); 

                fetch("/upload_profile_image/", {
                    method: "POST",
                    body: formData,
                    headers: {
                        "X-CSRFToken": getCookie("csrftoken")
                    }
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        const img = document.getElementById('imgprofile');
                        const currentSrc = img.src.split('?')[0]; 
                        img.src = `/static/profile_img/${userId}/1.png?t=${new Date().getTime()}`;
                        
                        if(authenticatedUserId == userId){
                            const img2 = document.getElementById('imgprofileauth');
                            const currentSrc2 = img2.src.split('?')[0]; 
                            img2.src = `/static/profile_img/${userId}/1.png?t=${new Date().getTime()}`;
                        }    
                        
                        showToast("Imagen guardada correctamente", "success");
                        document.getElementById("close_modal_btn").click();
                    } else {
                        showToast("Error al guardar la imagen", "danger");
                    }
                })
                .catch(error => {
                    console.error("Error:", error);
                    showToast("Error de red", "danger");
                });

                function getCookie(name) {
                    let cookieValue = null;
                    if (document.cookie && document.cookie !== "") {
                        const cookies = document.cookie.split(";");
                        for (let i = 0; i < cookies.length; i++) {
                            const cookie = cookies[i].trim();
                            if (cookie.substring(0, name.length + 1) === name + "=") {
                                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                                break;
                            }
                        }
                    }
                    return cookieValue;
                }
            });
        }
    });
</script>




{% endblock %}