{% extends 'layouts/base.html' %}

{% block title %}Cadastrar Novo Funcionário - {{ block.super }}{% endblock %}

{% block content %}

    <form method="POST" enctype="multipart/form-data" novalidate>
        {% csrf_token %}

        <div class="mb-6 flex items-center justify-between">
            <div>
                <h1 class="text-3xl font-bold text-gray-800">
                    Cadastrar Novo Funcionário
                </h1>
                <p class="text-gray-500">Preencha os dados da conta e do perfil profissional.</p>
            </div>
            <div>
                <a href="{% url 'home' %}" class="bg-gray-200 text-gray-700 px-4 py-2 rounded-md text-sm font-medium hover:bg-gray-300 transition-colors">
                    Cancelar
                </a>
                <button type="submit" class="bg-green-600 text-white px-6 py-2 rounded-md text-sm font-medium hover:bg-green-700 transition-colors shadow-md">
                    Salvar Funcionário
                </button>
            </div>
        </div>

        {% if user_form.non_field_errors %}
            <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded-md mb-4" role="alert">
                {% for error in user_form.non_field_errors %}
                    <p>{{ error }}</p>
                {% endfor %}
            </div>
        {% endif %}

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            
            <div class="lg:col-span-2 space-y-6">

                <div class="bg-white p-6 rounded-lg shadow-md">
                    <h2 class="text-lg font-semibold text-gray-700 border-b pb-2 mb-4">Dados da Conta (Login)</h2>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        
                        {% for field in user_form %}
                            {% if field.name != 'groups' %} <div class="space-y-1 {% if field.name == 'password' or field.name == 'password_confirm' %} relative {% endif %}">
                                    
                                    <label for="{{ field.id_for_label }}" class="text-sm font-medium text-gray-600">{{ field.label }}</label>
                                    
                                    {{ field }}

                                    {% if field.name == 'password' or field.name == 'password_confirm' %}
                                    <span class="absolute inset-y-0 right-0 pr-3 flex items-center cursor-pointer top-6" onclick="togglePasswordVisibility('{{ field.id_for_label }}', this)">
                                        <svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-.006.012-.01.024-.015.036a10.99 10.99 0 01-1.12 1.964M15 12a3 3 0 11-6 0 3 3 0 016 0zm-3 5c-4.478 0-8.268-2.943-9.542-7 .006-.012.01-.024.015-.036a10.99 10.99 0 011.12-1.964"></path>
                                        </svg>
                                    </span>
                                    {% endif %}
                                    {% if field.errors %}
                                        <div class="text-red-500 text-sm">{{ field.errors|first }}</div>
                                    {% endif %}

                                    {% if field.name == 'password' %}
                                    <ul id="password-requirements" class="text-xs text-gray-500 mt-1 space-y-0.5">
                                        <li id="req-length"><span class="text-red-500 mr-1">✘</span> Mínimo 8 caracteres</li>
                                        <li id="req-uppercase"><span class="text-red-500 mr-1">✘</span> Letra maiúscula</li>
                                        <li id="req-lowercase"><span class="text-red-500 mr-1">✘</span> Letra minúscula</li>
                                        <li id="req-number"><span class="text-red-500 mr-1">✘</span> Número</li>
                                        <li id="req-special"><span class="text-red-500 mr-1">✘</span> Caractere especial</li>
                                    </ul>
                                    {% endif %}
                                    </div>
                            {% endif %}
                        {% endfor %}
                    </div>
                </div> <div class="bg-white p-6 rounded-lg shadow-md">
                    <h2 class="text-lg font-semibold text-gray-700 border-b pb-2 mb-4">Perfil Profissional (RH)</h2>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        {% for field in profile_form %}
                            <div class="space-y-1">
                                <label for="{{ field.id_for_label }}" class="text-sm font-medium text-gray-600">{{ field.label }}</label>
                                {{ field }}
                                {% if field.errors %}
                                    <div class="text-red-500 text-sm">{{ field.errors|first }}</div>
                                {% endif %}
                            </div>
                        {% endfor %}
                    </div>
                </div> </div> <div class="lg:col-span-1">
                <div class="bg-white p-6 rounded-lg shadow-md">
                    <h2 class="text-lg font-semibold text-gray-700 border-b pb-2 mb-4">Grupos de Permissão (Segurança)</h2>
                    <div class="space-y-2">
                        <label class="text-sm font-medium text-gray-600">{{ user_form.groups.label }}</label>
                        <div class="max-h-60 overflow-y-auto border rounded-md p-2 bg-gray-50">
                            {{ user_form.groups }}
                        </div>
                        {% if user_form.groups.errors %}
                            <div class="text-red-500 text-sm">{{ user_form.groups.errors|first }}</div>
                        {% endif %}
                        <p class="text-xs text-gray-500">Define o que este utilizador pode ver e fazer no sistema.</p>
                    </div>
                </div>
            </div> </div> </form>

    <script>
        // --- Função para alternar visibilidade da senha ---
        function togglePasswordVisibility(fieldId, iconElement) {
            const passwordInput = document.getElementById(fieldId);
            const iconSvg = iconElement.querySelector('svg');
            const iconPathOpen = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-.006.012-.01.024-.015.036a10.99 10.99 0 01-1.12 1.964M15 12a3 3 0 11-6 0 3 3 0 016 0zm-3 5c-4.478 0-8.268-2.943-9.542-7 .006-.012.01-.024.015-.036a10.99 10.99 0 011.12-1.964"></path>';
            const iconPathClosed = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a10.99 10.99 0 011.12-1.964M9.88 9.88l.344-.343m3.96 3.96l.343-.343M3 3l18 18"></path>'; // Ícone de olho riscado

            if (passwordInput.type === "password") {
                passwordInput.type = "text";
                iconSvg.innerHTML = iconPathClosed;
            } else {
                passwordInput.type = "password";
                iconSvg.innerHTML = iconPathOpen;
            }
        }

        // --- Função para validar senha em tempo real ---
        // Pega o ID correto do campo de senha a partir do formulário Django
        const passwordInput = document.getElementById('{{ user_form.password.id_for_label }}'); 
        const requirementsList = document.getElementById('password-requirements');

        // Garante que ambos os elementos existem antes de adicionar o listener
        if (passwordInput && requirementsList) { 
            const reqLength = document.getElementById('req-length');
            const reqUppercase = document.getElementById('req-uppercase');
            const reqLowercase = document.getElementById('req-lowercase');
            const reqNumber = document.getElementById('req-number');
            const reqSpecial = document.getElementById('req-special');

            // Adiciona um listener que dispara a cada vez que o utilizador digita no campo senha
            passwordInput.addEventListener('input', function() {
                const password = passwordInput.value;

                // Função auxiliar para atualizar o estilo de um item da lista de requisitos
                function updateRequirement(element, conditionMet) {
                    const icon = element.querySelector('span');
                    if (conditionMet) { // Se o requisito foi cumprido
                        element.classList.remove('text-gray-500'); // Remove cor cinza
                        element.classList.add('text-green-600');    // Adiciona cor verde
                        icon.textContent = '✔';                     // Muda o ícone para check
                        icon.classList.remove('text-red-500');      // Remove cor vermelha do ícone
                        icon.classList.add('text-green-600');       // Adiciona cor verde ao ícone
                    } else { // Se o requisito NÃO foi cumprido
                        element.classList.remove('text-green-600'); // Remove cor verde
                        element.classList.add('text-gray-500');     // Adiciona cor cinza
                        icon.textContent = '✘';                      // Muda o ícone para X
                        icon.classList.remove('text-green-600');     // Remove cor verde do ícone
                        icon.classList.add('text-red-500');        // Adiciona cor vermelha ao ícone
                    }
                }

                // Verifica cada requisito usando Regex e atualiza o visual
                updateRequirement(reqLength, password.length >= 8); // Ajuste aqui se tiver comprimento máximo também
                updateRequirement(reqUppercase, /[A-Z]/.test(password));
                updateRequirement(reqLowercase, /[a-z]/.test(password));
                updateRequirement(reqNumber, /[0-9]/.test(password));
                updateRequirement(reqSpecial, /[!@#$%^&*(),.?":{}|<>_\-+=]/.test(password)); // Regex do validador
            });
        }
    </script>
    {% endblock %}