{% 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>
        
{% endblock %}

{% block content %}



<div class="main-content">
    
                        
    <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">Nuevo 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">
                Nuevo Usuario
             </li>
        </ol>
    </div>




    <div class="col-span-12 md:col-span-6 xxl:!col-span-4">
        <div class="box">
            <div class="box-body" style="padding-top: 0px;">
                <div class="sm:border-b-2 border-gray-200 dark:border-white/10">
                    <nav class="-mb-0.5 sm:flex sm:space-x-6 rtl:space-x-reverse">
                        <a class="w-full sm:w-auto hs-tab-active:font-semibold hs-tab-active:border-primary hs-tab-active:text-primary py-4 px-1 inline-flex items-center gap-2 border-b-[3px] border-transparent text-sm whitespace-nowrap text-defaulttextcolor dark:text-[#8c9097] dark:text-white/50 hover:text-primary active" href="javascript:void(0);" id="icon-item-1" data-hs-tab="#icon-1" aria-controls="icon-1">
                            <i class="ri-user-add-line"></i>
                        Datos Básicos
                        </a>
                    </nav>
                </div>

                <div class="mt-3">
                    <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-3 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-3 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-3 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 != '' %}
                                    <p style="color: red;text-align: center;">Error: Email ya Existente</p>
                                    {% endif %}
                                </div>
                               
                                <div class="xl:col-span-3 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" required>
                                        <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-3 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 selectrol == "0" %} selected {% endif %} value="0">Seleccione el Rol</option>
                                        {% for rol in rols %}
                                            <option value="{{ rol.id }}">{{ rol.role_name }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                                <div class="xl:col-span-9 col-span-12">
                                    <label for="input-label" class="form-label">Referencia | Observaciones</label>
                                    <input value="{{vobservation}}" type="text" class="form-control" id="observation" name="observation" placeholder="Ej: Gerencia de Sistemas - Analista">
                                </div>

                                <br><br>
                            </div>
                        </div>
                        <div style="text-align: right;">
                            <button type="submit" class="ti-btn ti-btn-primary btn-wave ms-auto float-right">Guardar</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</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>

<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>
    
{% endblock %}