{% extends './manager.html' %}
{% block content %}
{% load static %}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">

<div class="container my-5">
    <div class="row justify-content-center">
        <div class="col-12 col-md-8 col-lg-6 bg-light p-4 shadow-lg rounded">
            <h3 class="mb-4 text-center">Crear Administrador</h3>

            {% if error %}
              <div class="alert alert-danger">{{ error }}</div>
            {% endif %}
            {% if success %}
              <div class="alert alert-success">{{ success }}</div>
            {% endif %}

            <form method="post" id="frm_nuevo_admin">
                {% csrf_token %}

                <label for="email">Email *</label>
                <input name="email" id="email" class="form-control mb-3" 
                       type="email" placeholder="ejemplo@gmail.com" required>
                <br>
                      

                <label for="username">Usuario *</label>
                <input name="username" id="username" class="form-control mb-3" 
                       type="text" placeholder="Nombre de usuario" required>
                <br>

                <label for="first_name">Nombres</label>
                <input name="first_name" id="first_name" class="form-control mb-3" 
                       type="text" placeholder="Ingrese nombres">
                <br>

                <label for="last_name">Apellidos</label>
                <input name="last_name" id="last_name" class="form-control mb-3" 
                       type="text" placeholder="Ingrese apellidos">
                <br>
                <label for="password">Contraseña *</label>
                <div class="position-relative mb-4">
                    <input name="password" id="password" class="form-control"
                           type="password" required placeholder="••••••••"
                           autocomplete="new-password"
                           autocorrect="off"
                           autocapitalize="off"
                           spellcheck="false">
                    
                    <!-- Botón icono ojo -->
                    <button type="button" 
                            id="togglePassword" 
                            class="btn btn-outline-secondary position-absolute top-50 end-0 translate-middle-y me-2"
                            style="padding: 4px 8px;">
                        <i class="bi bi-eye-fill" id="iconPassword"></i>
                    </button>
                </div>

                <div class="d-flex gap-2">
                    <button class="btn btn-success" type="submit">Crear Administrador</button>
                    <a class="btn btn-outline-danger" href="{% url 'manager' %}">Cancelar</a>
                </div>

            </form>

        </div>
    </div>
</div>
<script>
    $("#frm_nuevo_admin").validate({
        rules: {  
            email: { required: true },
            username: { required: true },
            first_name: { required: true },
            last_name: { required: true },
            password: { required: true }
        },
        messages: { 
            email: { required: "El nombre es obligatorio" },
            username: { required: "La usuario es obligatoria" },
            first_name: { required: "El nombre es obligatorio" },
            last_name: { required: "El apellido es obligatorio" },
            password: { required: "La contraseña  es obligatoria" }
        }
    });
</script>
<script>
document.addEventListener('DOMContentLoaded', function () {
    const creado = "{{ success|default:'' }}";  

    if (creado) {
        if (window.Swal) {
            Swal.fire({
                title: 'Administrador creado',
                text: '¿Deseas cambiar de cuenta ahora?',
                icon: 'success',
                showCancelButton: true,
                confirmButtonText: 'Sí, cambiar de cuenta',
                cancelButtonText: 'No, después'
            }).then(result => {
                if (result.isConfirmed) {
                    window.location.href = "/login"; 
                } else {
                    window.location.href = "/manager";
                }
            });
        } else {
            if (confirm("Administrador creado. ¿Cambiar de cuenta?")) {
                window.location.href = "/login";
            } else {
                window.location.href = "/manager";
            }
        }
    }
});
</script>


<script>
document.getElementById("togglePassword").addEventListener("click", function () {
    const input = document.getElementById("password");
    const icon = document.getElementById("iconPassword");

    if (input.type === "password") {
        input.type = "text";
        icon.classList.remove("bi-eye-fill");
        icon.classList.add("bi-eye-slash-fill");
    } else {
        input.type = "password";
        icon.classList.remove("bi-eye-slash-fill");
        icon.classList.add("bi-eye-fill");
    }
});
</script>

{% endblock %}