{% extends 'base.html' %}
{% load static %}

{% block title %}Editar Perfil - Allure{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/autocompletar.css' %}">
<style>
    .checkbox-group {
        margin-top: 1rem;
    }
    
    .checkbox-item {
        display: flex;
        align-items: center;
        margin-bottom: 0.75rem;
        padding: 0.5rem;
        border-radius: 8px;
        transition: all 0.3s ease;
    }
    
    .checkbox-item:hover {
        background-color: rgba(74, 144, 226, 0.05);
    }
    
    .checkbox-item input[type="checkbox"] {
        margin-right: 0.75rem;
        width: 18px;
        height: 18px;
        accent-color: var(--primary-color);
    }
    
    .checkbox-item label {
        margin-bottom: 0;
        cursor: pointer;
        font-weight: 500;
    }
    
    .feedback-validacao {
        margin-top: 0.25rem;
        font-size: 0.875rem;
    }
    
    .feedback-valido {
        color: #28a745;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    
    .feedback-invalido {
        color: #dc3545;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    
    .campo-valido {
        border-color: #28a745 !important;
        box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
    }
    
    .campo-invalido {
        border-color: #dc3545 !important;
        box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
    }
    
    .form-control:focus {
        border-color: var(--primary-color);
        box-shadow: 0 0 0 0.2rem rgba(74, 144, 226, 0.25);
    }
    
    .form-control.is-valid {
        border-color: #28a745;
        box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
    }
    
    .form-control.is-invalid {
        border-color: #dc3545;
        box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
    }
    
    /* Corrigir aparência dos selects */
    select.form-control {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
        background-position: right 0.5rem center;
        background-repeat: no-repeat;
        background-size: 1.5em 1.5em;
        padding-right: 2.5rem;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background-color: white !important;
    }
    
    select.form-control:focus {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%234a90e2' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    }
    
    /* Remover qualquer imagem de fundo duplicada */
    select.form-control::-ms-expand {
        display: none;
    }
    
    /* Estilos para os checkboxes */
    .checkbox-group h4 {
        margin-bottom: 1rem;
        color: var(--primary-color);
        font-size: 1.1rem;
        font-weight: 600;
    }
    
    /* Grid de categorias */
    .categories-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 1rem;
        margin-top: 1rem;
        width: 100%;
    }
    
    .category-item {
        border: 2px solid #e9ecef;
        border-radius: 8px;
        padding: 1rem;
        cursor: pointer;
        transition: all 0.3s ease;
        text-align: center;
        width: 100%;
    }
    
    .category-item:hover {
        border-color: var(--primary-color);
        background: rgba(74, 144, 226, 0.05);
    }
    
    .category-item.selected {
        border-color: var(--primary-color);
        background: rgba(74, 144, 226, 0.1);
        color: var(--primary-color);
    }
    
    .category-item input[type="checkbox"] {
        display: none;
    }
    
    .category-item label {
        margin-bottom: 0;
        cursor: pointer;
        font-weight: 500;
        display: block;
    }
    
    /* Alertas */
    .alert {
        padding: 1rem;
        border-radius: 8px;
        margin-bottom: 1rem;
        width: 100%;
        display: block;
    }
    
    .alert-info {
        background: #d1ecf1;
        border: 1px solid #bee5eb;
        color: #0c5460;
    }
    
    /* Container das categorias */
    .checkbox-group {
        width: 100%;
        display: block;
        clear: both;
    }
    
    .checkbox-group h4 {
        margin-bottom: 1rem;
        color: var(--primary-color);
        font-size: 1.1rem;
        font-weight: 600;
        width: 100%;
        display: block;
        clear: both;
    }
    
    /* Forçar layout em coluna */
    .checkbox-group .alert {
        display: block !important;
        width: 100% !important;
        float: none !important;
        clear: both !important;
        margin-bottom: 1rem !important;
    }
    
    .checkbox-group .categories-grid {
        display: grid !important;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
        gap: 1rem !important;
        margin-top: 1rem !important;
        width: 100% !important;
        float: none !important;
        clear: both !important;
    }
    
    /* Garantir que não haja float ou inline-block */
    .checkbox-group * {
        float: none !important;
        display: block !important;
    }
    
    .checkbox-group .categories-grid {
        display: grid !important;
    }
    
    .checkbox-group .category-item {
        display: block !important;
        float: none !important;
    }
    
    /* Layout específico para categorias */
    .checkbox-group {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
    }
    
    .checkbox-group > * {
        width: 100% !important;
        margin-bottom: 1rem !important;
    }
    
    .checkbox-group .categories-grid {
        margin-bottom: 0 !important;
    }
</style>
{% endblock %}

{% block content %}
<div class="profile-edit-container">
    <div class="container">
        <!-- Header do Perfil -->
        <div class="profile-header">
            <h1 class="profile-title">
                <i class="fas fa-user-edit"></i>
                Editar Perfil
            </h1>
            <p class="profile-subtitle">
                Atualize suas informações pessoais, medidas e serviços oferecidos
            </p>
        </div>

        <!-- Formulário de Edição -->
        <form method="post" enctype="multipart/form-data" id="profileForm">
            {% csrf_token %}
            
            <!-- Seção: Informações Pessoais -->
            <div class="profile-form">
                <div class="form-section">
                    <h2 class="section-title">
                        <i class="fas fa-user"></i>
                        Informações Pessoais
                    </h2>
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label for="nome" class="form-label">
                                Nome <span class="required">*</span>
                            </label>
                            <input type="text" 
                                   class="form-control" 
                                   id="nome" 
                                   name="nome" 
                                   value="{{ modelo.nome|default:'' }}" 
                                   required>
                        </div>
                        
                        <div class="form-group">
                            <label for="sobrenome" class="form-label">
                                Sobrenome <span class="required">*</span>
                            </label>
                            <input type="text" 
                                   class="form-control" 
                                   id="sobrenome" 
                                   name="sobrenome" 
                                   value="{{ modelo.sobrenome|default:'' }}" 
                                   required>
                        </div>
                    </div>
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label for="cpf" class="form-label">
                                CPF <span class="required">*</span>
                            </label>
                            <input type="text" 
                                   class="form-control" 
                                   id="cpf" 
                                   name="cpf" 
                                   value="{{ modelo.cpf|default:'' }}" 
                                   placeholder="000.000.000-00" 
                                   maxlength="14" 
                                   required>
                            <div class="feedback-validacao" id="feedback-cpf"></div>
                        </div>
                        
                        <div class="form-group">
                            <label for="data_nascimento" class="form-label">
                                Data de Nascimento <span class="required">*</span>
                            </label>
                            <input type="date" 
                                   class="form-control" 
                                   id="data_nascimento" 
                                   name="data_nascimento" 
                                   value="{{ modelo.data_nascimento|date:'Y-m-d'|default:'' }}" 
                                   required>
                            <div class="feedback-validacao" id="feedback-data-nascimento"></div>
                        </div>
                    </div>
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label for="username" class="form-label">
                                Nome de Usuário <span class="required">*</span>
                            </label>
                            <input type="text" 
                                   class="form-control" 
                                   id="username" 
                                   name="username" 
                                   value="{{ modelo.user.username|default:'' }}" 
                                   placeholder="exemplo: maria.silva" 
                                   required>
                            <div class="form-text">Escolha um nome de usuário único para fazer login</div>
                        </div>
                    </div>
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label for="nome_exibicao" class="form-label">
                                Nome de Exibição <span class="required">*</span>
                            </label>
                            <input type="text" 
                                   class="form-control" 
                                   id="nome_exibicao" 
                                   name="nome_exibicao" 
                                   value="{{ modelo.nome_exibicao|default:'' }}" 
                                   required>
                            <div class="form-text">Nome que aparecerá no seu perfil</div>
                        </div>
                        
                        <div class="form-group">
                            <label for="idade" class="form-label">
                                Idade <span class="required">*</span>
                            </label>
                            <input type="number" 
                                   class="form-control" 
                                   id="idade" 
                                   name="idade" 
                                   value="{{ modelo.idade|default:'' }}" 
                                   min="18" 
                                   max="99" 
                                   required>
                        </div>
                    </div>
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label for="email" class="form-label">
                                E-mail <span class="required">*</span>
                            </label>
                            <input type="email" 
                                   class="form-control" 
                                   id="email" 
                                   name="email" 
                                   value="{{ modelo.user.email|default:'' }}" 
                                   required>
                        </div>
                        
                        <div class="form-group">
                            <label for="telefone" class="form-label">
                                Telefone <span class="required">*</span>
                            </label>
                            <input type="tel" 
                                   class="form-control" 
                                   id="telefone" 
                                   name="telefone" 
                                   value="{{ modelo.telefone|default:'' }}" 
                                   required>
                        </div>
                    </div>
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label for="whatsapp" class="form-label">
                                WhatsApp
                            </label>
                            <input type="tel" 
                                   class="form-control" 
                                   id="whatsapp" 
                                   name="whatsapp" 
                                   value="{{ modelo.whatsapp|default:'' }}">
                        </div>
                        
                        <div class="form-group">
                            <label for="telegram" class="form-label">
                                Telegram
                            </label>
                            <input type="text" 
                                   class="form-control" 
                                   id="telegram" 
                                   name="telegram" 
                                   value="{{ modelo.telegram|default:'' }}">
                        </div>
                    </div>
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label for="link_contato" class="form-label">
                                Link para Contato
                            </label>
                            <input type="url" 
                                   class="form-control" 
                                   id="link_contato" 
                                   name="link_contato" 
                                   value="{{ modelo.link_contato|default:'' }}">
                        </div>
                        
                        <div class="form-group">
                            <label for="email_contato" class="form-label">
                                E-mail de Contato
                            </label>
                            <input type="email" 
                                   class="form-control" 
                                   id="email_contato" 
                                   name="email_contato" 
                                   value="{{ modelo.email_contato|default:'' }}">
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label for="biografia" class="form-label">
                            Biografia
                        </label>
                        <textarea class="form-control" 
                                  id="biografia" 
                                  name="biografia" 
                                  rows="4" 
                                  maxlength="500"
                                  placeholder="Conte um pouco sobre você, seus interesses e o que você oferece...">{{ modelo.biografia|default:'' }}</textarea>
                        <div class="form-text">
                            Máximo 500 caracteres
                        </div>
                        <div class="character-counter">
                            <span class="current-count">0</span>/500
                        </div>
                    </div>
                </div>
                
                <!-- Seção: Localização -->
                <div class="form-section">
                    <h2 class="section-title">
                        <i class="fas fa-map-marker-alt"></i>
                        Localização
                    </h2>
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label for="estado" class="form-label">
                                Estado <span class="required">*</span>
                            </label>
                            <select class="form-control" id="estado" name="estado" required>
                                <option value="">Selecione o estado</option>
                                <option value="AC" {% if modelo.estado == 'AC' %}selected{% endif %}>Acre</option>
                                <option value="AL" {% if modelo.estado == 'AL' %}selected{% endif %}>Alagoas</option>
                                <option value="AP" {% if modelo.estado == 'AP' %}selected{% endif %}>Amapá</option>
                                <option value="AM" {% if modelo.estado == 'AM' %}selected{% endif %}>Amazonas</option>
                                <option value="BA" {% if modelo.estado == 'BA' %}selected{% endif %}>Bahia</option>
                                <option value="CE" {% if modelo.estado == 'CE' %}selected{% endif %}>Ceará</option>
                                <option value="DF" {% if modelo.estado == 'DF' %}selected{% endif %}>Distrito Federal</option>
                                <option value="ES" {% if modelo.estado == 'ES' %}selected{% endif %}>Espírito Santo</option>
                                <option value="GO" {% if modelo.estado == 'GO' %}selected{% endif %}>Goiás</option>
                                <option value="MA" {% if modelo.estado == 'MA' %}selected{% endif %}>Maranhão</option>
                                <option value="MT" {% if modelo.estado == 'MT' %}selected{% endif %}>Mato Grosso</option>
                                <option value="MS" {% if modelo.estado == 'MS' %}selected{% endif %}>Mato Grosso do Sul</option>
                                <option value="MG" {% if modelo.estado == 'MG' %}selected{% endif %}>Minas Gerais</option>
                                <option value="PA" {% if modelo.estado == 'PA' %}selected{% endif %}>Pará</option>
                                <option value="PB" {% if modelo.estado == 'PB' %}selected{% endif %}>Paraíba</option>
                                <option value="PR" {% if modelo.estado == 'PR' %}selected{% endif %}>Paraná</option>
                                <option value="PE" {% if modelo.estado == 'PE' %}selected{% endif %}>Pernambuco</option>
                                <option value="PI" {% if modelo.estado == 'PI' %}selected{% endif %}>Piauí</option>
                                <option value="RJ" {% if modelo.estado == 'RJ' %}selected{% endif %}>Rio de Janeiro</option>
                                <option value="RN" {% if modelo.estado == 'RN' %}selected{% endif %}>Rio Grande do Norte</option>
                                <option value="RS" {% if modelo.estado == 'RS' %}selected{% endif %}>Rio Grande do Sul</option>
                                <option value="RO" {% if modelo.estado == 'RO' %}selected{% endif %}>Rondônia</option>
                                <option value="RR" {% if modelo.estado == 'RR' %}selected{% endif %}>Roraima</option>
                                <option value="SC" {% if modelo.estado == 'SC' %}selected{% endif %}>Santa Catarina</option>
                                <option value="SP" {% if modelo.estado == 'SP' %}selected{% endif %}>São Paulo</option>
                                <option value="SE" {% if modelo.estado == 'SE' %}selected{% endif %}>Sergipe</option>
                                <option value="TO" {% if modelo.estado == 'TO' %}selected{% endif %}>Tocantins</option>
                            </select>
                        </div>
                        
                        <div class="form-group">
                            <label for="cidade" class="form-label">
                                Cidade <span class="required">*</span>
                            </label>
                            <input type="text" 
                                   class="form-control" 
                                   id="cidade" 
                                   name="cidade" 
                                   value="{{ modelo.cidade|default:'' }}"
                                   placeholder="Digite para buscar..."
                                   required>
                            <div class="feedback-validacao" id="feedback-cidade"></div>
                        </div>
                    </div>
                </div>
                
                <!-- Seção: Características Físicas -->
                <div class="form-section">
                    <h2 class="section-title">
                        <i class="fas fa-user-circle"></i>
                        Características Físicas
                    </h2>
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label for="etnia" class="form-label">
                                Etnia <span class="required">*</span>
                            </label>
                            <select class="form-control" id="etnia" name="etnia" required>
                                <option value="">Selecione sua etnia</option>
                                <option value="morena" {% if modelo.etnia == 'morena' %}selected{% endif %}>Morena</option>
                                <option value="ruiva" {% if modelo.etnia == 'ruiva' %}selected{% endif %}>Ruiva</option>
                                <option value="loira" {% if modelo.etnia == 'loira' %}selected{% endif %}>Loira</option>
                                <option value="negra" {% if modelo.etnia == 'negra' %}selected{% endif %}>Negra</option>
                                <option value="mulata" {% if modelo.etnia == 'mulata' %}selected{% endif %}>Mulata</option>
                                <option value="mestica" {% if modelo.etnia == 'mestica' %}selected{% endif %}>Mestiça</option>
                                <option value="oriental" {% if modelo.etnia == 'oriental' %}selected{% endif %}>Oriental</option>
                            </select>
                        </div>
                    </div>
                </div>
                
                <!-- Seção: Medidas -->
                <div class="form-section">
                    <h2 class="section-title">
                        <i class="fas fa-ruler"></i>
                        Medidas
                    </h2>
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label for="altura" class="form-label">
                                Altura (cm)
                            </label>
                            <input type="number" 
                                   class="form-control" 
                                   id="altura" 
                                   name="altura" 
                                   value="{{ modelo.altura|default:'' }}" 
                                   min="100" 
                                   max="250">
                        </div>
                        
                        <div class="form-group">
                            <label for="peso" class="form-label">
                                Peso (kg)
                            </label>
                            <input type="number" 
                                   class="form-control" 
                                   id="peso" 
                                   name="peso" 
                                   value="{{ modelo.peso|default:'' }}" 
                                   min="30" 
                                   max="200">
                        </div>
                    </div>
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label for="busto" class="form-label">
                                Busto (cm)
                            </label>
                            <input type="number" 
                                   class="form-control" 
                                   id="busto" 
                                   name="busto" 
                                   value="{{ modelo.busto|default:'' }}" 
                                   min="60" 
                                   max="150">
                        </div>
                        
                        <div class="form-group">
                            <label for="cintura" class="form-label">
                                Cintura (cm)
                            </label>
                            <input type="number" 
                                   class="form-control" 
                                   id="cintura" 
                                   name="cintura" 
                                   value="{{ modelo.cintura|default:'' }}" 
                                   min="50" 
                                   max="150">
                        </div>
                    </div>
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label for="quadril" class="form-label">
                                Quadril (cm)
                            </label>
                            <input type="number" 
                                   class="form-control" 
                                   id="quadril" 
                                   name="quadril" 
                                   value="{{ modelo.quadril|default:'' }}" 
                                   min="60" 
                                   max="150">
                        </div>
                        
                        <div class="form-group">
                            <label for="calcado" class="form-label">
                                Calçado
                            </label>
                            <input type="number" 
                                   class="form-control" 
                                   id="calcado" 
                                   name="calcado" 
                                   value="{{ modelo.calcado|default:'' }}" 
                                   min="30" 
                                   max="50">
                        </div>
                    </div>
                </div>
                
                <!-- Seção: Serviços -->
                <div class="form-section">
                    <h2 class="section-title">
                        <i class="fas fa-briefcase"></i>
                        Informações Profissionais
                    </h2>
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label class="form-label">
                                Tipo de Serviço <span class="required">*</span>
                            </label>
                            <div class="checkbox-group">
                                <div class="checkbox-item">
                                    <input type="checkbox" id="service_job" name="categoria_servico" value="JOB" 
                                           {% if 'JOB' in modelo.get_categorias_servico_list %}checked{% endif %}>
                                    <label for="service_job">Anúncios (JOB)</label>
                                </div>
                                
                                <div class="checkbox-item">
                                    <input type="checkbox" id="service_fab" name="categoria_servico" value="FAB" 
                                           {% if 'FAB' in modelo.get_categorias_servico_list %}checked{% endif %}>
                                    <label for="service_fab">Venda de Conteúdos (FAB)</label>
                                </div>
                                
                                <div class="checkbox-item">
                                    <input type="checkbox" id="service_cam" name="categoria_servico" value="CAM" 
                                           {% if 'CAM' in modelo.get_categorias_servico_list %}checked{% endif %}>
                                    <label for="service_cam">Câmera Privativa (CAM)</label>
                                </div>
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label for="tipo_ensaio" class="form-label">
                                Tipo de Ensaio <span class="required">*</span>
                            </label>
                            <select class="form-control" id="tipo_ensaio" name="tipo_ensaio" required>
                                <option value="">Selecione o tipo de ensaio</option>
                                <option value="solo" {% if modelo.tipo_ensaio == 'solo' %}selected{% endif %}>Anúncio Só</option>
                                <option value="dupla" {% if modelo.tipo_ensaio == 'dupla' %}selected{% endif %}>Anúncio com Dupla</option>
                                <option value="trio" {% if modelo.tipo_ensaio == 'trio' %}selected{% endif %}>Anúncio com Trio</option>
                                <option value="quarteto" {% if modelo.tipo_ensaio == 'quarteto' %}selected{% endif %}>Anúncio com Quarteto</option>
                            </select>
                        </div>
                    </div>
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label class="form-label">
                                Local de Atendimento <span class="required">*</span>
                            </label>
                            <div class="checkbox-group">
                                <div class="checkbox-item">
                                    <input type="checkbox" id="local_proprio" name="local_atendimento" value="local_proprio" 
                                           {% if 'local_proprio' in modelo.get_locais_atendimento_list %}checked{% endif %}>
                                    <label for="local_proprio">Local Próprio</label>
                                </div>
                                
                                <div class="checkbox-item">
                                    <input type="checkbox" id="motel" name="local_atendimento" value="motel" 
                                           {% if 'motel' in modelo.get_locais_atendimento_list %}checked{% endif %}>
                                    <label for="motel">Motel</label>
                                </div>
                                
                                <div class="checkbox-item">
                                    <input type="checkbox" id="hotel" name="local_atendimento" value="hotel" 
                                           {% if 'hotel' in modelo.get_locais_atendimento_list %}checked{% endif %}>
                                    <label for="hotel">Hotel</label>
                                </div>
                                
                                <div class="checkbox-item">
                                    <input type="checkbox" id="residencia_cliente" name="local_atendimento" value="residencia_cliente" 
                                           {% if 'residencia_cliente' in modelo.get_locais_atendimento_list %}checked{% endif %}>
                                    <label for="residencia_cliente">Residência do Cliente</label>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label for="sobre_mim" class="form-label">
                            Sobre Mim
                        </label>
                        <textarea class="form-control" 
                                  id="sobre_mim" 
                                  name="sobre_mim" 
                                  rows="4" 
                                  maxlength="1000"
                                  placeholder="Descreva seus serviços, especialidades e o que você oferece...">{{ modelo.sobre_mim|default:'' }}</textarea>
                        <div class="form-text">
                            Máximo 1000 caracteres
                        </div>
                    </div>
                    
                    <div class="checkbox-group">
                        <h4>Categorias de Serviços</h4>
                        <div class="alert alert-info">
                            <i class="fas fa-info-circle me-2"></i>
                            Selecione todas as categorias que você oferece:
                        </div>
                        <div class="categories-grid">
                            <div class="category-item">
                                <input type="checkbox" id="massagens" name="categorias" value="1" 
                                       {% if modelo.categorias.all|length > 0 %}{% for cat in modelo.categorias.all %}{% if cat.id == 1 %}checked{% endif %}{% endfor %}{% endif %}>
                                <label for="massagens">Massagens</label>
                            </div>
                            
                            <div class="category-item">
                                <input type="checkbox" id="videochamadas" name="categorias" value="2" 
                                       {% if modelo.categorias.all|length > 0 %}{% for cat in modelo.categorias.all %}{% if cat.id == 2 %}checked{% endif %}{% endfor %}{% endif %}>
                                <label for="videochamadas">Videochamadas</label>
                            </div>
                            
                            <div class="category-item">
                                <input type="checkbox" id="sexting" name="categorias" value="3" 
                                       {% if modelo.categorias.all|length > 0 %}{% for cat in modelo.categorias.all %}{% if cat.id == 3 %}checked{% endif %}{% endfor %}{% endif %}>
                                <label for="sexting">Sexting</label>
                            </div>
                            
                            <div class="category-item">
                                <input type="checkbox" id="dominatrix" name="categorias" value="4" 
                                       {% if modelo.categorias.all|length > 0 %}{% for cat in modelo.categorias.all %}{% if cat.id == 4 %}checked{% endif %}{% endfor %}{% endif %}>
                                <label for="dominatrix">Dominatrix</label>
                            </div>
                            
                            <div class="category-item">
                                <input type="checkbox" id="sado" name="categorias" value="5" 
                                       {% if modelo.categorias.all|length > 0 %}{% for cat in modelo.categorias.all %}{% if cat.id == 5 %}checked{% endif %}{% endfor %}{% endif %}>
                                <label for="sado">Sado</label>
                            </div>
                            
                            <div class="category-item">
                                <input type="checkbox" id="despedida_solteiro" name="categorias" value="6" 
                                       {% if modelo.categorias.all|length > 0 %}{% for cat in modelo.categorias.all %}{% if cat.id == 6 %}checked{% endif %}{% endfor %}{% endif %}>
                                <label for="despedida_solteiro">Despedida Solteiro</label>
                            </div>
                            
                            <div class="category-item">
                                <input type="checkbox" id="sugar_baby" name="categorias" value="7" 
                                       {% if modelo.categorias.all|length > 0 %}{% for cat in modelo.categorias.all %}{% if cat.id == 7 %}checked{% endif %}{% endfor %}{% endif %}>
                                <label for="sugar_baby">Sugar Baby</label>
                            </div>
                            
                            <div class="category-item">
                                <input type="checkbox" id="almoco" name="categorias" value="8" 
                                       {% if modelo.categorias.all|length > 0 %}{% for cat in modelo.categorias.all %}{% if cat.id == 8 %}checked{% endif %}{% endfor %}{% endif %}>
                                <label for="almoco">Almoço</label>
                            </div>
                            
                            <div class="category-item">
                                <input type="checkbox" id="jantar" name="categorias" value="9" 
                                       {% if modelo.categorias.all|length > 0 %}{% for cat in modelo.categorias.all %}{% if cat.id == 9 %}checked{% endif %}{% endfor %}{% endif %}>
                                <label for="jantar">Jantar</label>
                            </div>
                            
                            <div class="category-item">
                                <input type="checkbox" id="viagens" name="categorias" value="10" 
                                       {% if modelo.categorias.all|length > 0 %}{% for cat in modelo.categorias.all %}{% if cat.id == 10 %}checked{% endif %}{% endfor %}{% endif %}>
                                <label for="viagens">Viagens</label>
                            </div>
                            
                            <div class="category-item">
                                <input type="checkbox" id="festas_eventos" name="categorias" value="11" 
                                       {% if modelo.categorias.all|length > 0 %}{% for cat in modelo.categorias.all %}{% if cat.id == 11 %}checked{% endif %}{% endfor %}{% endif %}>
                                <label for="festas_eventos">Festas e Eventos</label>
                            </div>
                            
                            <div class="category-item">
                                <input type="checkbox" id="fetiches" name="categorias" value="12" 
                                       {% if modelo.categorias.all|length > 0 %}{% for cat in modelo.categorias.all %}{% if cat.id == 12 %}checked{% endif %}{% endfor %}{% endif %}>
                                <label for="fetiches">Fetiches</label>
                            </div>
                            
                            <div class="category-item">
                                <input type="checkbox" id="clube_swing" name="categorias" value="13" 
                                       {% if modelo.categorias.all|length > 0 %}{% for cat in modelo.categorias.all %}{% if cat.id == 13 %}checked{% endif %}{% endfor %}{% endif %}>
                                <label for="clube_swing">Clube de Swing</label>
                            </div>
                            
                            <div class="category-item">
                                <input type="checkbox" id="beijos_boca" name="categorias" value="14" 
                                       {% if modelo.categorias.all|length > 0 %}{% for cat in modelo.categorias.all %}{% if cat.id == 14 %}checked{% endif %}{% endfor %}{% endif %}>
                                <label for="beijos_boca">Beijos na Boca</label>
                            </div>
                            
                            <div class="category-item">
                                <input type="checkbox" id="oral_fim" name="categorias" value="15" 
                                       {% if modelo.categorias.all|length > 0 %}{% for cat in modelo.categorias.all %}{% if cat.id == 15 %}checked{% endif %}{% endfor %}{% endif %}>
                                <label for="oral_fim">Oral até o fim</label>
                            </div>
                            
                            <div class="category-item">
                                <input type="checkbox" id="sexo_anal" name="categorias" value="16" 
                                       {% if modelo.categorias.all|length > 0 %}{% for cat in modelo.categorias.all %}{% if cat.id == 16 %}checked{% endif %}{% endfor %}{% endif %}>
                                <label for="sexo_anal">Sexo Anal</label>
                            </div>
                            
                            <div class="category-item">
                                <input type="checkbox" id="facesitting_passiva" name="categorias" value="17" 
                                       {% if modelo.categorias.all|length > 0 %}{% for cat in modelo.categorias.all %}{% if cat.id == 17 %}checked{% endif %}{% endfor %}{% endif %}>
                                <label for="facesitting_passiva">Facesitting Passiva</label>
                            </div>
                            
                            <div class="category-item">
                                <input type="checkbox" id="facesitting_ativa" name="categorias" value="18" 
                                       {% if modelo.categorias.all|length > 0 %}{% for cat in modelo.categorias.all %}{% if cat.id == 18 %}checked{% endif %}{% endfor %}{% endif %}>
                                <label for="facesitting_ativa">Facesitting Ativa</label>
                            </div>
                            
                            <div class="category-item">
                                <input type="checkbox" id="asslicking_passiva" name="categorias" value="19" 
                                       {% if modelo.categorias.all|length > 0 %}{% for cat in modelo.categorias.all %}{% if cat.id == 19 %}checked{% endif %}{% endfor %}{% endif %}>
                                <label for="asslicking_passiva">Asslicking Passiva</label>
                            </div>
                            
                            <div class="category-item">
                                <input type="checkbox" id="asslicking_ativa" name="categorias" value="20" 
                                       {% if modelo.categorias.all|length > 0 %}{% for cat in modelo.categorias.all %}{% if cat.id == 20 %}checked{% endif %}{% endfor %}{% endif %}>
                                <label for="asslicking_ativa">Asslicking Ativa</label>
                            </div>
                            
                            <div class="category-item">
                                <input type="checkbox" id="squirting" name="categorias" value="21" 
                                       {% if modelo.categorias.all|length > 0 %}{% for cat in modelo.categorias.all %}{% if cat.id == 21 %}checked{% endif %}{% endfor %}{% endif %}>
                                <label for="squirting">Squirting</label>
                            </div>
                            
                            <div class="category-item">
                                <input type="checkbox" id="garganta_profunda" name="categorias" value="22" 
                                       {% if modelo.categorias.all|length > 0 %}{% for cat in modelo.categorias.all %}{% if cat.id == 22 %}checked{% endif %}{% endfor %}{% endif %}>
                                <label for="garganta_profunda">Garganta Profunda</label>
                            </div>
                            
                            <div class="category-item">
                                <input type="checkbox" id="oral_preservativo" name="categorias" value="23" 
                                       {% if modelo.categorias.all|length > 0 %}{% for cat in modelo.categorias.all %}{% if cat.id == 23 %}checked{% endif %}{% endfor %}{% endif %}>
                                <label for="oral_preservativo">Oral com preservativo</label>
                            </div>
                            
                            <div class="category-item">
                                <input type="checkbox" id="brinquedos" name="categorias" value="24" 
                                       {% if modelo.categorias.all|length > 0 %}{% for cat in modelo.categorias.all %}{% if cat.id == 24 %}checked{% endif %}{% endfor %}{% endif %}>
                                <label for="brinquedos">Brinquedos</label>
                            </div>
                            
                            <div class="category-item">
                                <input type="checkbox" id="menage_trois" name="categorias" value="25" 
                                       {% if modelo.categorias.all|length > 0 %}{% for cat in modelo.categorias.all %}{% if cat.id == 25 %}checked{% endif %}{% endfor %}{% endif %}>
                                <label for="menage_trois">Ménage à Trois</label>
                            </div>
                            
                            <div class="category-item">
                                <input type="checkbox" id="lesbica" name="categorias" value="26" 
                                       {% if modelo.categorias.all|length > 0 %}{% for cat in modelo.categorias.all %}{% if cat.id == 26 %}checked{% endif %}{% endfor %}{% endif %}>
                                <label for="lesbica">Lésbica</label>
                            </div>
                            
                            <div class="category-item">
                                <input type="checkbox" id="bissexual" name="categorias" value="27" 
                                       {% if modelo.categorias.all|length > 0 %}{% for cat in modelo.categorias.all %}{% if cat.id == 27 %}checked{% endif %}{% endfor %}{% endif %}>
                                <label for="bissexual">Bissexual</label>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Seção: Local de Trabalho -->
                <div class="form-section">
                    <h2 class="section-title">
                        <i class="fas fa-map-marker-alt"></i>
                        Local de Trabalho
                    </h2>
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label for="estado_trabalho" class="form-label">
                                Estado de Trabalho
                            </label>
                            <select class="form-control" id="estado_trabalho" name="estado_trabalho">
                                <option value="">Selecione o estado</option>
                                <option value="AC" {% if modelo.estado_trabalho == 'AC' %}selected{% endif %}>AC - Acre</option>
                                <option value="AL" {% if modelo.estado_trabalho == 'AL' %}selected{% endif %}>AL - Alagoas</option>
                                <option value="AP" {% if modelo.estado_trabalho == 'AP' %}selected{% endif %}>AP - Amapá</option>
                                <option value="AM" {% if modelo.estado_trabalho == 'AM' %}selected{% endif %}>AM - Amazonas</option>
                                <option value="BA" {% if modelo.estado_trabalho == 'BA' %}selected{% endif %}>BA - Bahia</option>
                                <option value="CE" {% if modelo.estado_trabalho == 'CE' %}selected{% endif %}>CE - Ceará</option>
                                <option value="DF" {% if modelo.estado_trabalho == 'DF' %}selected{% endif %}>DF - Distrito Federal</option>
                                <option value="ES" {% if modelo.estado_trabalho == 'ES' %}selected{% endif %}>ES - Espírito Santo</option>
                                <option value="GO" {% if modelo.estado_trabalho == 'GO' %}selected{% endif %}>GO - Goiás</option>
                                <option value="MA" {% if modelo.estado_trabalho == 'MA' %}selected{% endif %}>MA - Maranhão</option>
                                <option value="MT" {% if modelo.estado_trabalho == 'MT' %}selected{% endif %}>MT - Mato Grosso</option>
                                <option value="MS" {% if modelo.estado_trabalho == 'MS' %}selected{% endif %}>MS - Mato Grosso do Sul</option>
                                <option value="MG" {% if modelo.estado_trabalho == 'MG' %}selected{% endif %}>MG - Minas Gerais</option>
                                <option value="PA" {% if modelo.estado_trabalho == 'PA' %}selected{% endif %}>PA - Pará</option>
                                <option value="PB" {% if modelo.estado_trabalho == 'PB' %}selected{% endif %}>PB - Paraíba</option>
                                <option value="PR" {% if modelo.estado_trabalho == 'PR' %}selected{% endif %}>PR - Paraná</option>
                                <option value="PE" {% if modelo.estado_trabalho == 'PE' %}selected{% endif %}>PE - Pernambuco</option>
                                <option value="PI" {% if modelo.estado_trabalho == 'PI' %}selected{% endif %}>PI - Piauí</option>
                                <option value="RJ" {% if modelo.estado_trabalho == 'RJ' %}selected{% endif %}>RJ - Rio de Janeiro</option>
                                <option value="RN" {% if modelo.estado_trabalho == 'RN' %}selected{% endif %}>RN - Rio Grande do Norte</option>
                                <option value="RS" {% if modelo.estado_trabalho == 'RS' %}selected{% endif %}>RS - Rio Grande do Sul</option>
                                <option value="RO" {% if modelo.estado_trabalho == 'RO' %}selected{% endif %}>RO - Rondônia</option>
                                <option value="RR" {% if modelo.estado_trabalho == 'RR' %}selected{% endif %}>RR - Roraima</option>
                                <option value="SC" {% if modelo.estado_trabalho == 'SC' %}selected{% endif %}>SC - Santa Catarina</option>
                                <option value="SP" {% if modelo.estado_trabalho == 'SP' %}selected{% endif %}>SP - São Paulo</option>
                                <option value="SE" {% if modelo.estado_trabalho == 'SE' %}selected{% endif %}>SE - Sergipe</option>
                                <option value="TO" {% if modelo.estado_trabalho == 'TO' %}selected{% endif %}>TO - Tocantins</option>
                            </select>
                        </div>
                        
                        <div class="form-group">
                            <label for="cidade_trabalho" class="form-label">
                                Cidade de Trabalho
                            </label>
                            <input type="text" class="form-control" id="cidade_trabalho" name="cidade_trabalho" 
                                   value="{{ modelo.cidade_trabalho }}" placeholder="Digite a cidade">
                        </div>
                    </div>
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label for="endereco_trabalho" class="form-label">
                                Endereço de Trabalho
                            </label>
                            <textarea class="form-control" id="endereco_trabalho" name="endereco_trabalho" 
                                      rows="3" placeholder="Rua, Avenida, Bairro">{{ modelo.endereco_trabalho }}</textarea>
                        </div>
                    </div>
                </div>
                
                <!-- Seção: Horário de Trabalho -->
                <div class="form-section">
                    <h2 class="section-title">
                        <i class="fas fa-clock"></i>
                        Horário de Trabalho
                    </h2>
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label for="horario_inicio" class="form-label">
                                Horário de Início
                            </label>
                            <input type="time" class="form-control" id="horario_inicio" name="horario_inicio" 
                                   value="{% if modelo.horario_inicio %}{{ modelo.horario_inicio|time:'H:i' }}{% endif %}">
                        </div>
                        
                        <div class="form-group">
                            <label for="horario_termino" class="form-label">
                                Horário de Término
                            </label>
                            <input type="time" class="form-control" id="horario_termino" name="horario_termino" 
                                   value="{% if modelo.horario_termino %}{{ modelo.horario_termino|time:'H:i' }}{% endif %}">
                        </div>
                    </div>
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label class="form-label">
                                Dias da Semana
                            </label>
                            <div class="checkbox-group">
                                <div class="checkbox-item">
                                    <input type="checkbox" id="segunda" name="dias_trabalho" value="segunda"
                                           {% if 'segunda' in modelo.get_dias_trabalho_list %}checked{% endif %}>
                                    <label for="segunda">Segunda-feira</label>
                                </div>
                                
                                <div class="checkbox-item">
                                    <input type="checkbox" id="terca" name="dias_trabalho" value="terca"
                                           {% if 'terca' in modelo.get_dias_trabalho_list %}checked{% endif %}>
                                    <label for="terca">Terça-feira</label>
                                </div>
                                
                                <div class="checkbox-item">
                                    <input type="checkbox" id="quarta" name="dias_trabalho" value="quarta"
                                           {% if 'quarta' in modelo.get_dias_trabalho_list %}checked{% endif %}>
                                    <label for="quarta">Quarta-feira</label>
                                </div>
                                
                                <div class="checkbox-item">
                                    <input type="checkbox" id="quinta" name="dias_trabalho" value="quinta"
                                           {% if 'quinta' in modelo.get_dias_trabalho_list %}checked{% endif %}>
                                    <label for="quinta">Quinta-feira</label>
                                </div>
                                
                                <div class="checkbox-item">
                                    <input type="checkbox" id="sexta" name="dias_trabalho" value="sexta"
                                           {% if 'sexta' in modelo.get_dias_trabalho_list %}checked{% endif %}>
                                    <label for="sexta">Sexta-feira</label>
                                </div>
                                
                                <div class="checkbox-item">
                                    <input type="checkbox" id="sabado" name="dias_trabalho" value="sabado"
                                           {% if 'sabado' in modelo.get_dias_trabalho_list %}checked{% endif %}>
                                    <label for="sabado">Sábado</label>
                                </div>
                                
                                <div class="checkbox-item">
                                    <input type="checkbox" id="domingo" name="dias_trabalho" value="domingo"
                                           {% if 'domingo' in modelo.get_dias_trabalho_list %}checked{% endif %}>
                                    <label for="domingo">Domingo</label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Ações do Formulário -->
                <div class="form-actions">
                    <button type="button" class="btn-cancel" onclick="history.back()">
                        <i class="fas fa-times"></i>
                        <span class="btn-text">Cancelar</span>
                    </button>
                    
                    <button type="submit" class="btn-save" id="saveButton">
                        <i class="fas fa-save"></i>
                        <span class="btn-text">Salvar Alterações</span>
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- Container para alertas -->
<div id="alertContainer"></div>
{% endblock %}

{% block extra_js %}
<script src="{% static 'js/municipios_completo.js' %}"></script>
<script>
// Inicialização quando o DOM estiver pronto
document.addEventListener('DOMContentLoaded', function() {
    initializeFormValidation();
    initializeAnimations();
    initializeCharacterCounters();
    initializeTooltips();
    aplicarValidacoes();
    aguardarMunicipios();
    initializeCategoryCheckboxes();
});

// Funções de validação
function validarEmail(email) {
    const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return regex.test(email);
}

// Função de validação CPF (versão limpa)
function validarCPF(cpf) {
    const cpfLimpo = cpf.replace(/\D/g, '');
    
    if (cpfLimpo.length !== 11) {
        return false;
    }
    
    // Extrair dígitos
    const digitos = cpfLimpo.split('').map(d => parseInt(d));
    
    // Primeiro dígito verificador
    let soma1 = 0;
    for (let i = 0; i < 9; i++) {
        soma1 += digitos[i] * (10 - i);
    }
    
    let resto1 = soma1 % 11;
    let digito1 = resto1 < 2 ? 0 : (11 - resto1);
    
    // Segundo dígito verificador
    let soma2 = 0;
    for (let i = 0; i < 10; i++) {
        soma2 += digitos[i] * (11 - i);
    }
    
    let resto2 = soma2 % 11;
    let digito2 = resto2 < 2 ? 0 : (11 - resto2);
    
    // Verificar
    return digitos[9] === digito1 && digitos[10] === digito2;
}

// Aguardar o sistema de municípios carregar
function aguardarMunicipios() {
    if (typeof popularEstados === 'function' && typeof criarAutocompletarCidade === 'function') {
        popularEstados();
        setTimeout(() => {
            criarAutocompletarCidade();
        }, 100);
    } else {
        setTimeout(aguardarMunicipios, 100);
    }
}

// Função para aplicar todas as validações
function aplicarValidacoes() {
    // Validação de CPF em tempo real
    const cpfField = document.getElementById('cpf');
    if (cpfField) {
        cpfField.addEventListener('input', function(e) {
            let value = e.target.value.replace(/\D/g, '');
            value = value.replace(/(\d{3})(\d)/, '$1.$2');
            value = value.replace(/(\d{3})(\d)/, '$1.$2');
            value = value.replace(/(\d{3})(\d{1,2})$/, '$1-$2');
            e.target.value = value;
            
            const feedback = document.getElementById('feedback-cpf');
            if (value.length === 14) {
                if (validarCPF(value)) {
                    e.target.classList.remove('campo-invalido');
                    e.target.classList.add('campo-valido');
                    feedback.innerHTML = '<span class="feedback-valido"><i class="fas fa-check"></i> CPF válido</span>';
                } else {
                    e.target.classList.remove('campo-valido');
                    e.target.classList.add('campo-invalido');
                    feedback.innerHTML = '<span class="feedback-invalido"><i class="fas fa-times"></i> CPF inválido</span>';
                }
            } else {
                e.target.classList.remove('campo-valido', 'campo-invalido');
                feedback.innerHTML = '';
            }
        });
        
        // Validar CPF se já tiver valor
        if (cpfField.value) {
            setTimeout(() => {
                const event = new Event('input');
                cpfField.dispatchEvent(event);
            }, 200);
        }
    }
    
    // Validação de cidade em tempo real
    const cidadeField = document.getElementById('cidade');
    if (cidadeField) {
        cidadeField.addEventListener('input', function(e) {
            const cidade = e.target.value;
            const estado = document.getElementById('estado').value;
            const feedback = document.getElementById('feedback-cidade');
            
            if (cidade.length > 0 && estado) {
                // Usar a função validarCidade do sistema de municípios
                let cidadeValida = false;
                if (typeof validarCidade === 'function') {
                    cidadeValida = validarCidade(cidade, estado);
                } else {
                    cidadeValida = true; // Fallback
                }
                
                if (cidadeValida) {
                    e.target.classList.remove('campo-invalido');
                    e.target.classList.add('campo-valido');
                    feedback.innerHTML = '<span class="feedback-valido"><i class="fas fa-check"></i> Cidade válida</span>';
                } else {
                    e.target.classList.remove('campo-valido');
                    e.target.classList.add('campo-invalido');
                    feedback.innerHTML = '<span class="feedback-invalido"><i class="fas fa-times"></i> Cidade não encontrada</span>';
                }
            } else {
                e.target.classList.remove('campo-valido', 'campo-invalido');
                feedback.innerHTML = '';
            }
        });
        
        // Validar cidade se já tiver valor
        if (cidadeField.value) {
            setTimeout(() => {
                const event = new Event('input');
                cidadeField.dispatchEvent(event);
            }, 500);
        }
    }
    
    // Evento para validar cidade quando estado muda
    const estadoField = document.getElementById('estado');
    if (estadoField) {
        estadoField.addEventListener('change', function() {
            const cidade = document.getElementById('cidade').value;
            if (cidade) {
                setTimeout(() => {
                    const event = new Event('input');
                    document.getElementById('cidade').dispatchEvent(event);
                }, 100);
            }
        });
    }
    
    // Calcular idade automaticamente
    const dataNascimentoField = document.getElementById('data_nascimento');
    if (dataNascimentoField) {
        dataNascimentoField.addEventListener('change', function(e) {
            const dataNascimento = new Date(e.target.value);
            const hoje = new Date();
            const idade = hoje.getFullYear() - dataNascimento.getFullYear();
            const mes = hoje.getMonth() - dataNascimento.getMonth();
            
            if (mes < 0 || (mes === 0 && hoje.getDate() < dataNascimento.getDate())) {
                idade--;
            }
            
            const feedback = document.getElementById('feedback-data-nascimento');
            
            if (idade >= 18) {
                // Maior de idade - campo válido
                e.target.classList.remove('campo-invalido');
                e.target.classList.add('campo-valido');
                feedback.innerHTML = '<span class="feedback-valido"><i class="fas fa-check"></i> Idade válida (' + idade + ' anos)</span>';
                
                // Preencher campo de idade automaticamente
                const idadeField = document.getElementById('idade');
                if (idadeField) {
                    idadeField.value = idade;
                }
            } else {
                // Menor de idade - campo inválido
                e.target.classList.remove('campo-valido');
                e.target.classList.add('campo-invalido');
                feedback.innerHTML = '<span class="feedback-invalido"><i class="fas fa-times"></i> Você deve ter pelo menos 18 anos para se cadastrar</span>';
                
                // Limpar campo de idade
                const idadeField = document.getElementById('idade');
                if (idadeField) {
                    idadeField.value = '';
                }
            }
        });
        
        // Validar data de nascimento se já tiver valor
        if (dataNascimentoField.value) {
            setTimeout(() => {
                const event = new Event('change');
                dataNascimentoField.dispatchEvent(event);
            }, 200);
        }
    }
}

// Validação do formulário
function initializeFormValidation() {
    const form = document.getElementById('profileForm');
    const saveButton = document.getElementById('saveButton');
    
    form.addEventListener('submit', function(e) {
        if (validateForm()) {
            // Mostrar loading
            saveButton.classList.add('loading');
            saveButton.disabled = true;
            
            // Permitir envio do formulário
            // O formulário será enviado normalmente para o servidor
        } else {
            e.preventDefault();
        }
    });
    
    // Validação em tempo real
    const inputs = form.querySelectorAll('input, textarea, select');
    inputs.forEach(input => {
        input.addEventListener('blur', () => validateField(input));
        input.addEventListener('input', () => validateField(input));
    });
}

// Validar campo individual
function validateField(field) {
    const value = field.value.trim();
    let isValid = true;
    let errorMessage = '';
    
    // Remover estados anteriores
    field.classList.remove('is-valid', 'is-invalid');
    const feedback = field.parentNode.querySelector('.invalid-feedback, .valid-feedback');
    if (feedback) feedback.style.display = 'none';
    
    // Validações específicas
    if (field.hasAttribute('required') && !value) {
        isValid = false;
        errorMessage = 'Este campo é obrigatório';
    } else if (field.type === 'email' && value && !isValidEmail(value)) {
        isValid = false;
        errorMessage = 'E-mail inválido';
    } else if (field.type === 'tel' && value && !isValidPhone(value)) {
        isValid = false;
        errorMessage = 'Telefone inválido';
    }
    
    // Aplicar estado
    if (isValid && value) {
        field.classList.add('is-valid');
        showValidFeedback(field);
    } else if (!isValid) {
        field.classList.add('is-invalid');
        showInvalidFeedback(field, errorMessage);
    }
    
    return isValid;
}

// Validar formulário completo
function validateForm() {
    const form = document.getElementById('profileForm');
    const requiredFields = form.querySelectorAll('[required]');
    let isValid = true;
    
    requiredFields.forEach(field => {
        if (!validateField(field)) {
            isValid = false;
            if (isValid) {
                field.scrollIntoView({ behavior: 'smooth', block: 'center' });
            }
        }
    });
    
    return isValid;
}

// Mostrar feedback de erro
function showInvalidFeedback(field, message) {
    const feedback = field.parentNode.querySelector('.invalid-feedback');
    if (feedback) {
        feedback.textContent = message;
        feedback.style.display = 'flex';
    }
}

// Mostrar feedback de sucesso
function showValidFeedback(field) {
    const feedback = field.parentNode.querySelector('.valid-feedback');
    if (feedback) {
        feedback.style.display = 'flex';
    }
}

// Validadores auxiliares
function isValidEmail(email) {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return emailRegex.test(email);
}

function isValidPhone(phone) {
    const phoneRegex = /^[\d\s\(\)\-\+]+$/;
    return phoneRegex.test(phone) && phone.replace(/\D/g, '').length >= 10;
}

// Contadores de caracteres
function initializeCharacterCounters() {
    const textareas = document.querySelectorAll('textarea[maxlength]');
    
    textareas.forEach(textarea => {
        const counter = textarea.parentNode.querySelector('.character-counter');
        if (counter) {
            const currentCount = counter.querySelector('.current-count');
            
            function updateCounter() {
                const length = textarea.value.length;
                const maxLength = parseInt(textarea.getAttribute('maxlength'));
                const remaining = maxLength - length;
                
                currentCount.textContent = length;
                
                // Aplicar classes de aviso
                counter.classList.remove('warning', 'danger');
                if (remaining <= 50 && remaining > 20) {
                    counter.classList.add('warning');
                } else if (remaining <= 20) {
                    counter.classList.add('danger');
                }
            }
            
            textarea.addEventListener('input', updateCounter);
            updateCounter(); // Contador inicial
        }
    });
}

// Animações de entrada
function initializeAnimations() {
    const observerOptions = {
        threshold: 0.1,
        rootMargin: '0px 0px -50px 0px'
    };
    
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.style.opacity = '1';
                entry.target.style.transform = 'translateY(0)';
            }
        });
    }, observerOptions);
    
    // Observar elementos para animação
    const animatedElements = document.querySelectorAll('.profile-header, .profile-form, .photo-upload-section');
    animatedElements.forEach(el => {
        el.style.opacity = '0';
        el.style.transform = 'translateY(30px)';
        el.style.transition = 'all 0.6s ease';
        observer.observe(el);
    });
}

// Sistema de alertas
function showAlert(message, type = 'info') {
    const alertContainer = document.getElementById('alertContainer');
    const alert = document.createElement('div');
    
    const icons = {
        'success': 'fas fa-check-circle',
        'danger': 'fas fa-exclamation-circle',
        'warning': 'fas fa-exclamation-triangle',
        'info': 'fas fa-info-circle'
    };
    
    alert.className = `alert alert-${type}`;
    alert.innerHTML = `
        <i class="${icons[type]}"></i>
        <span>${message}</span>
    `;
    
    // Adicionar com animação
    alert.style.opacity = '0';
    alert.style.transform = 'translateY(-20px)';
    alertContainer.appendChild(alert);
    
    // Animar entrada
    setTimeout(() => {
        alert.style.transition = 'all 0.3s ease';
        alert.style.opacity = '1';
        alert.style.transform = 'translateY(0)';
    }, 10);
    
    // Auto-remover
    setTimeout(() => {
        alert.style.opacity = '0';
        alert.style.transform = 'translateY(-20px)';
        setTimeout(() => alert.remove(), 300);
    }, 5000);
}

// Inicializar tooltips (se necessário)
function initializeTooltips() {
    // Implementar tooltips se necessário
    console.log('Tooltips inicializados');
}

// Auto-save (opcional - implementar se necessário)
function autoSave() {
    // Implementar salvamento automático
    console.log('Auto-save implementado');
}

// Função para inicializar checkboxes de categoria
function initializeCategoryCheckboxes() {
    const categoryItems = document.querySelectorAll('.category-item');
    
    categoryItems.forEach(item => {
        const checkbox = item.querySelector('input[type="checkbox"]');
        
        // Marcar como selecionado se já estiver checked
        if (checkbox && checkbox.checked) {
            item.classList.add('selected');
        }
        
        item.addEventListener('click', function() {
            checkbox.checked = !checkbox.checked;
            
            if (checkbox.checked) {
                this.classList.add('selected');
            } else {
                this.classList.remove('selected');
            }
        });
    });
}
</script>
{% endblock %}