{% load css_tags %}{% block_css 'enap_designsystem/blocks/form_template.css' %}
{% load static %}

{% block content %}
<div class="form-container formulario-contato">
    <h2 class="form-title">{{ formulario.titulo }}</h2>
    <form id="contactForm" novalidate>
        <div class="form-group">
            <label for="name" class="form-label">Nome Completo</label>
            <input 
                type="text" 
                id="name" 
                name="name" 
                class="form-input" 
                required 
                minlength="2" 
                maxlength="100"
                pattern="^[A-Za-zÀ-ÿ\s]+$"
                placeholder="Digite seu nome completo"
            >
            <span class="error-message"><i class="fa-solid fa-circle-exclamation"></i> Por favor, insira um nome válido (apenas letras)</span>
        </div>

        <div class="form-group">
            <label for="email" class="form-label">Email</label>
            <input 
                type="email" 
                id="email" 
                name="email" 
                class="form-input" 
                required 
                placeholder="exemplo@email.com"
            >
            <span class="error-message"><i class="fa-solid fa-circle-exclamation"></i> Por favor, insira um email válido</span>
        </div>

        <div class="form-group">
            <label for="phone" class="form-label">Telefone</label>
            <input 
                type="tel" 
                id="phone" 
                name="phone" 
                class="form-input" 
                required 
                pattern="^\(\d{2}\)\s\d{4,5}-\d{4}$"
                placeholder="(00) 00000-0000"
            >
            <span class="error-message">Por favor, insira um telefone válido (formato: (00) 00000-0000)</span>
        </div>

        <div class="form-group">
            <label for="description" class="form-label">Descrição</label>
            <textarea 
                id="description" 
                name="description" 
                class="form-input form-textarea" 
                required 
                minlength="10" 
                maxlength="500" 
                placeholder="Digite sua mensagem aqui (mínimo 10 caracteres)"
            ></textarea>
            <span class="error-message">Por favor, insira uma descrição entre 10 e 500 caracteres</span>
        </div>

        <button type="submit" class="form-button" disabled>Enviar</button>
    </form>
</div>
{% endblock %}

{% block extra_css %}

{% endblock %}

{% block extra_js %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const form = document.getElementById('contactForm');
        const inputs = form.querySelectorAll('.form-input');
        const submitButton = form.querySelector('.form-button');

        // Máscara de telefone
        function phoneMask(value) {
            return value
                .replace(/\D/g, '')
                .replace(/^(\d{2})(\d)/g, '($1) $2')
                .replace(/(\d{4,5})(\d{4})$/, '$1-$2');
        }

        // Validação em tempo real
        inputs.forEach(input => {
            input.addEventListener('input', function() {
                // Máscara de telefone
                if (this.id === 'phone') {
                    this.value = phoneMask(this.value);
                }

                // Validação de campos
                validateInput(this);
                checkFormValidity();
            });

            // Mostrar erro apenas quando o campo perde o foco
            input.addEventListener('blur', function() {
                const errorMessage = this.nextElementSibling;
                if (this.value && !this.validity.valid) {
                    this.classList.add('invalid');
                    errorMessage.classList.add('show');
                } else {
                    this.classList.remove('invalid');
                    errorMessage.classList.remove('show');
                }
            });

            // Remover erro quando começa a digitar
            input.addEventListener('input', function() {
                const errorMessage = this.nextElementSibling;
                this.classList.remove('invalid');
                errorMessage.classList.remove('show');
            });
        });

        // Função para validar input individual
        function validateInput(input) {
            // Validação padrão
            return input.validity.valid;
        }

        // Verificar validade de todo o formulário
        function checkFormValidity() {
            const allValid = Array.from(inputs).every(input => input.validity.valid);
            submitButton.disabled = !allValid;
        }

        // Envio do formulário
        form.addEventListener('submit', function(e) {
            e.preventDefault();
            
            // Aqui você pode adicionar a lógica de envio do formulário
            alert('Formulário enviado com sucesso!');
            
            // Limpar formulário após envio
            form.reset();
            submitButton.disabled = true;
        });
    });
</script>
{% endblock %}