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

{% block title %}Cadastro de Modelo - Allure{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/autocompletar.css' %}">
<style>
    .step-container {
        display: none;
    }
    
    .step-container.active {
        display: block;
    }
    
    .step-indicator {
        display: flex;
        justify-content: center;
        margin-bottom: 2rem;
    }
    
    .step {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: #e9ecef;
        color: #6c757d;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 0.5rem;
        font-weight: bold;
        transition: all 0.3s ease;
    }
    
    .step.active {
        background: var(--primary-color);
        color: white;
    }
    
    .step.completed {
        background: #28a745;
        color: white;
    }
    
    .progress-bar {
        width: 100%;
        height: 8px;
        background: #e9ecef;
        border-radius: 4px;
        margin-bottom: 2rem;
        overflow: hidden;
    }
    
    .progress-fill {
        height: 100%;
        background: var(--primary-color);
        transition: width 0.3s ease;
    }
    
    /* Debug styles */
    .text-center {
        position: relative;
        z-index: 999;
    }
    

    
    .form-card {
        background: white;
        border-radius: 12px;
        padding: 2rem;
        margin-bottom: 2rem;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    
    .form-section-title {
        color: var(--primary-color);
        font-size: 1.5rem;
        margin-bottom: 1.5rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    
    .service-options {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1.5rem;
        margin-top: 1.5rem;
    }
    
    .service-option {
        border: 2px solid #e9ecef;
        border-radius: 12px;
        padding: 2rem;
        cursor: pointer;
        transition: all 0.3s ease;
        text-align: center;
        background: white;
    }
    
    .service-option:hover {
        border-color: var(--primary-color);
        background: rgba(74, 144, 226, 0.05);
        transform: translateY(-2px);
    }
    
    .service-option.selected {
        border-color: var(--primary-color);
        background: rgba(74, 144, 226, 0.1);
        color: var(--primary-color);
    }
    
    .service-option.selected .service-icon {
        color: var(--primary-color);
    }
    
    .service-option.selected .service-title {
        color: var(--primary-color);
        font-weight: 700;
    }
    
    .service-option input[type="checkbox"] {
        display: none;
    }
    
    .service-option input[type="radio"] {
        display: none;
    }
    
    .service-icon {
        font-size: 3rem;
        margin-bottom: 1rem;
        color: var(--primary-color);
    }
    
    .service-title {
        font-size: 1.2rem;
        font-weight: 600;
        margin-bottom: 0.5rem;
    }
    
    .service-description {
        color: #6c757d;
        font-size: 0.9rem;
        line-height: 1.4;
    }
    
    .categories-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 1rem;
        margin-top: 1rem;
    }
    
    .category-item {
        border: 2px solid #e9ecef;
        border-radius: 8px;
        padding: 1rem;
        cursor: pointer;
        transition: all 0.3s ease;
        text-align: center;
    }
    
    .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;
    }
    
    .file-upload {
        position: relative;
        display: inline-block;
        width: 100%;
    }
    
    .file-upload input[type="file"] {
        position: absolute;
        opacity: 0;
        width: 100%;
        height: 100%;
        cursor: pointer;
    }
    
    .file-upload-label {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 2rem;
        border: 2px dashed #dee2e6;
        border-radius: 8px;
        background: #f8f9fa;
        cursor: pointer;
        transition: all 0.3s ease;
        min-height: 150px;
    }
    
    .file-upload-label:hover {
        border-color: var(--primary-color);
        background: rgba(74, 144, 226, 0.05);
    }
    
    .photos-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 1rem;
        margin-top: 1rem;
    }
    
    .photo-upload {
        border: 2px dashed #dee2e6;
        border-radius: 8px;
        padding: 1rem;
        text-align: center;
        cursor: pointer;
        transition: all 0.3s ease;
        min-height: 120px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .photo-upload:hover {
        border-color: var(--primary-color);
        background: rgba(74, 144, 226, 0.05);
    }
    
    .photo-upload input[type="file"] {
        display: none;
    }
    
    .photo-upload-icon {
        font-size: 2rem;
        color: #6c757d;
        margin-bottom: 0.5rem;
    }
    
    .alert {
        padding: 1rem;
        border-radius: 8px;
        margin-bottom: 1rem;
    }
    
    .alert-info {
        background: #d1ecf1;
        border: 1px solid #bee5eb;
        color: #0c5460;
    }
    
    .alert-warning {
        background: #fff3cd;
        border: 1px solid #ffeaa7;
        color: #856404;
    }
</style>
{% endblock %}

{% block content %}
<div class="form-container">
    <div class="container">
        <div class="form-header">
            <h1 class="form-title">Seja Nossa Modelo</h1>
            <p class="form-subtitle">
                Cadastre-se na plataforma mais exclusiva do Brasil e comece a divulgar seus serviços 
                para milhares de clientes em potencial.
            </p>
        </div>
        
        <div class="step-indicator">
            <div class="step active" data-step="1">1</div>
            <div class="step" data-step="2">2</div>
            <div class="step" data-step="3">3</div>
            <div class="step" data-step="4">4</div>
            <div class="step" data-step="5">5</div>
            <div class="step" data-step="6">6</div>
        </div>
        
        <div class="progress-bar">
            <div class="progress-fill" style="width: 20%;"></div>
        </div>
        
        <form method="post" action="{% url 'accounts:cadastro_modelo' %}" enctype="multipart/form-data" id="cadastroForm">
            {% csrf_token %}
            
            <!-- Etapa 1: Tipo de Serviço -->
            <div class="step-container active" id="step-1">
                <div class="form-card">
                    <h2 class="form-section-title">
                        <i class="fas fa-briefcase"></i>
                        Escolha seu Tipo de Serviço
                    </h2>
                    
                    <div class="alert alert-info">
                        <i class="fas fa-info-circle me-2"></i>
                        <strong>Importante:</strong> Você pode selecionar mais de um tipo de serviço se oferecer diferentes modalidades. 
                        Clique em cada opção para selecionar/desselecionar.
                    </div>
                    
                    <div class="service-options">
                        <div class="service-option" onclick="toggleService(this, 'JOB')">
                            <input type="checkbox" name="categoria_servico" value="JOB" id="service_job">
                            <div class="service-icon">
                                <i class="fas fa-user-friends"></i>
                            </div>
                            <div class="service-title">Anúncios (JOB)</div>
                            <div class="service-description">
                                Para modelos que oferecem acompanhamento presencial, encontros e serviços de acompanhante.
                            </div>
                        </div>
                        
                        <div class="service-option" onclick="toggleService(this, 'FAB')">
                            <input type="checkbox" name="categoria_servico" value="FAB" id="service_fab">
                            <div class="service-icon">
                                <i class="fas fa-shopping-cart"></i>
                            </div>
                            <div class="service-title">Venda de Conteúdos (FAB)</div>
                            <div class="service-description">
                                Para modelos que vendem fotos, vídeos e conteúdo digital personalizado.
                            </div>
                        </div>
                        
                        <div class="service-option" onclick="toggleService(this, 'CAM')">
                            <input type="checkbox" name="categoria_servico" value="CAM" id="service_cam">
                            <div class="service-icon">
                                <i class="fas fa-video"></i>
                            </div>
                            <div class="service-title">Câmera Privativa (CAM)</div>
                            <div class="service-description">
                                Para modelos que oferecem shows ao vivo e interação via webcam.
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="text-center">
                    <button type="button" class="btn btn-primary" onclick="nextStep()">
                        Próximo <i class="fas fa-arrow-right ms-2"></i>
                    </button>
                </div>
            </div>
            
            <!-- Etapa 2: Local de Atendimento -->
            <div class="step-container" id="step-2">
                <div class="form-card">
                    <h2 class="form-section-title">
                        <i class="fas fa-map-marker-alt"></i>
                        Locais de Atendimento
                    </h2>
                    
                    <div class="alert alert-info">
                        <i class="fas fa-info-circle me-2"></i>
                        <strong>Importante:</strong> Selecione todos os locais onde você atende. Você pode escolher múltiplas opções.
                    </div>
                    
                    <div class="service-options">
                        <div class="service-option" onclick="toggleLocalAtendimento(this, 'local_proprio')">
                            <input type="checkbox" name="local_atendimento" value="local_proprio" id="local_proprio">
                            <div class="service-icon">
                                <i class="fas fa-home"></i>
                            </div>
                            <div class="service-title">Local Próprio</div>
                            <div class="service-description">
                                Atendo em meu próprio local/apartamento.
                            </div>
                        </div>
                        
                        <div class="service-option" onclick="toggleLocalAtendimento(this, 'motel')">
                            <input type="checkbox" name="local_atendimento" value="motel" id="local_motel">
                            <div class="service-icon">
                                <i class="fas fa-bed"></i>
                            </div>
                            <div class="service-title">Motel</div>
                            <div class="service-description">
                                Atendo em motéis da região.
                            </div>
                        </div>
                        
                        <div class="service-option" onclick="toggleLocalAtendimento(this, 'hotel')">
                            <input type="checkbox" name="local_atendimento" value="hotel" id="local_hotel">
                            <div class="service-icon">
                                <i class="fas fa-hotel"></i>
                            </div>
                            <div class="service-title">Hotel</div>
                            <div class="service-description">
                                Atendo em hotéis da região.
                            </div>
                        </div>
                        
                        <div class="service-option" onclick="toggleLocalAtendimento(this, 'residencia_cliente')">
                            <input type="checkbox" name="local_atendimento" value="residencia_cliente" id="local_residencia">
                            <div class="service-icon">
                                <i class="fas fa-user-friends"></i>
                            </div>
                            <div class="service-title">Residência do Cliente</div>
                            <div class="service-description">
                                Vou até a residência do cliente.
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="text-center">
                    <button type="button" class="btn btn-secondary" onclick="prevStep()">
                        <i class="fas fa-arrow-left me-2"></i> Anterior
                    </button>
                    <button type="button" class="btn btn-primary" onclick="nextStep()">
                        Próximo <i class="fas fa-arrow-right ms-2"></i>
                    </button>
                </div>
            </div>
            
            <!-- Etapa 3: Dados Pessoais -->
            <div class="step-container" id="step-3">
                <div class="form-card">
                    <h2 class="form-section-title">
                        <i class="fas fa-user"></i>
                        Dados Pessoais
                    </h2>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="nome" class="form-label">Nome *</label>
                                <input type="text" class="form-control" id="nome" name="nome" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="sobrenome" class="form-label">Sobrenome *</label>
                                <input type="text" class="form-control" id="sobrenome" name="sobrenome" required>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="cpf" class="form-label">CPF *</label>
                                <input type="text" class="form-control" id="cpf" name="cpf" 
                                       placeholder="000.000.000-00" maxlength="14" required>
                                <div class="feedback-validacao" id="feedback-cpf"></div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="data_nascimento" class="form-label">Data de Nascimento *</label>
                                <input type="date" class="form-control" id="data_nascimento" name="data_nascimento" required>
                                <div class="feedback-validacao" id="feedback-data-nascimento"></div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="estado" class="form-label">Estado *</label>
                                <select class="form-control" id="estado" name="estado" required>
                                    <option value="">Selecione o estado</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="cidade" class="form-label">Cidade *</label>
                                <input type="text" class="form-control" id="cidade" name="cidade" 
                                       placeholder="Digite para buscar..." required>
                                <div class="feedback-validacao" id="feedback-cidade"></div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="etnia" class="form-label">Etnia *</label>
                                <select class="form-control" id="etnia" name="etnia" required>
                                    <option value="">Selecione sua etnia</option>
                                    <option value="morena">Morena</option>
                                    <option value="ruiva">Ruiva</option>
                                    <option value="loira">Loira</option>
                                    <option value="negra">Negra</option>
                                    <option value="mulata">Mulata</option>
                                    <option value="mestica">Mestiça</option>
                                    <option value="oriental">Oriental</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    
                                    <div class="row">
                        <div class="col-md-6">
                        <div class="form-group">
                                <label for="email" class="form-label">E-mail *</label>
                                <input type="email" class="form-control" id="email" name="email" required>
                                <div class="feedback-validacao" id="feedback-email"></div>
                            </div>
                        </div>
                        <div class="col-md-6">
                        <div class="form-group">
                                <label for="telefone" class="form-label">Telefone *</label>
                                <input type="tel" class="form-control" id="telefone" name="telefone" 
                                       placeholder="(11) 99999-9999" required>
                    </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="username" class="form-label">Nome de Usuário *</label>
                                <input type="text" class="form-control" id="username" name="username" 
                                       placeholder="exemplo: maria.silva" required>
                                <div class="form-text">Escolha um nome de usuário único para fazer login</div>
                                <div class="feedback-validacao" id="feedback-username"></div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="text-center">
                    <button type="button" class="btn btn-secondary" onclick="prevStep()">
                        <i class="fas fa-arrow-left me-2"></i> Anterior
                    </button>
                    <button type="button" class="btn btn-primary" onclick="nextStep()">
                        Próximo <i class="fas fa-arrow-right ms-2"></i>
                    </button>
                </div>
            </div>
            
            <!-- Etapa 4: Dados do Anúncio -->
            <div class="step-container" id="step-4">
                <div class="form-card">
                    <h2 class="form-section-title">
                        <i class="fas fa-ad"></i>
                        Dados do Anúncio
                    </h2>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="nome_exibicao" class="form-label">Nome de Exibição *</label>
                                <input type="text" class="form-control" id="nome_exibicao" name="nome_exibicao" required>
                                <div class="form-text">Nome que aparecerá no seu perfil</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="idade" class="form-label">Idade *</label>
                                <input type="number" class="form-control" id="idade" name="idade" 
                                       min="18" max="99" required>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="whatsapp" class="form-label">WhatsApp</label>
                                <input type="tel" class="form-control" id="whatsapp" name="whatsapp" 
                                       placeholder="11999999999">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="telegram" class="form-label">Telegram</label>
                                <input type="text" class="form-control" id="telegram" name="telegram" 
                                       placeholder="@seuusuario">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <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" 
                                       placeholder="https://...">
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="text-center">
                    <button type="button" class="btn btn-secondary" onclick="prevStep()">
                        <i class="fas fa-arrow-left me-2"></i> Anterior
                    </button>
                    <button type="button" class="btn btn-primary" onclick="nextStep()">
                        Próximo <i class="fas fa-arrow-right ms-2"></i>
                    </button>
                </div>
            </div>
            
            <!-- Etapa 4: Categorias -->
            <div class="step-container" id="step-5">
                <div class="form-card">
                    <h2 class="form-section-title">
                        <i class="fas fa-tags"></i>
                        Categorias de Serviços
                    </h2>
                    
                    <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">
                        {% for categoria in categorias %}
                        <div class="category-item" onclick="toggleCategory(this, '{{ categoria.id }}')">
                            <input type="checkbox" name="categorias" value="{{ categoria.id }}" id="cat_{{ categoria.id }}">
                            <label for="cat_{{ categoria.id }}">{{ categoria.nome }}</label>
                        </div>
                        {% endfor %}
                    </div>
                </div>
                
                <div class="text-center">
                    <button type="button" class="btn btn-secondary" onclick="prevStep()">
                        <i class="fas fa-arrow-left me-2"></i> Anterior
                    </button>
                    <button type="button" class="btn btn-primary" onclick="nextStep()">
                        Próximo <i class="fas fa-arrow-right ms-2"></i>
                    </button>
                </div>
            </div>
            
            <!-- Etapa 6: Fotos -->
            <div class="step-container" id="step-6">
                <div class="form-card">
                    <h2 class="form-section-title">
                        <i class="fas fa-images"></i>
                        Galeria de Fotos
                    </h2>
                    
                    <div class="alert alert-warning">
                        <i class="fas fa-exclamation-triangle me-2"></i>
                        <strong>Atenção:</strong> Após o cadastro inicial, você poderá adicionar mais fotos e completar seu perfil.
                    </div>
                    
                    <div class="form-group">
                        <label for="foto_perfil" class="form-label">Foto de Perfil Principal *</label>
                        <input type="file" id="foto_perfil" name="foto_perfil" accept="image/*" required class="form-control">
                        <div class="form-text">Selecione uma foto para seu perfil</div>
                    </div>
                    
                    <div class="form-group">
                        <label class="form-label">Galeria de Fotos (Opcional)</label>
                        <input type="file" name="fotos_galeria" accept="image/*" multiple class="form-control" id="fotos_galeria">
                        <div class="form-text">Selecione múltiplas fotos para sua galeria (máximo 10 fotos)</div>
                        
                        <div id="galeria_preview" class="mt-3" style="display: none;">
                            <h6>Fotos Selecionadas:</h6>
                            <div id="preview_container" class="row"></div>
                        </div>
                    </div>
                </div>
                
                <div class="text-center">
                    <button type="button" class="btn btn-secondary" onclick="prevStep()">
                        <i class="fas fa-arrow-left me-2"></i> Anterior
                    </button>
                    <button type="submit" class="btn btn-success">
                        <i class="fas fa-check me-2"></i> Finalizar Cadastro
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="{% static 'js/municipios_completo.js' %}"></script>
<script>

    
    // Funções de validação
    function validarEmail(email) {
        const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        return regex.test(email);
    }
    
    // Função para verificar se email já existe
    async function verificarEmailExistente(email) {
        try {
            const response = await fetch('/accounts/verificar-email/', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
                },
                body: JSON.stringify({ email: email })
            });
            
            const data = await response.json();
            return data.email_existe;
        } catch (error) {
            console.error('Erro ao verificar email:', error);
            return false; // Em caso de erro, não bloquear o usuário
        }
    }
    
    // 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;
    }
    

    
    // REMOVIDA: função validarCidade duplicada - usando apenas a do sistema de municípios
    
    // Aguardar o sistema de municípios carregar
    function aguardarMunicipios() {
        if (typeof popularEstados === 'function' && typeof criarAutocompletarCidade === 'function') {
            // As validações principais já foram aplicadas, apenas inicializar municípios
            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)) { // Usar validarCPF para validação
                        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 email em tempo real
        const emailField = document.getElementById('email');
        if (emailField) {
            
            let timeoutId;
            
            emailField.addEventListener('input', function(e) {
                const email = e.target.value;
                const feedback = document.getElementById('feedback-email');
                
                // Limpar timeout anterior
                if (timeoutId) {
                    clearTimeout(timeoutId);
                }
                
                if (email.length > 0) {
                    if (validarEmail(email)) {
                        e.target.classList.remove('campo-invalido');
                        e.target.classList.add('campo-valido');
                        feedback.innerHTML = '<span class="feedback-valido"><i class="fas fa-check"></i> Email válido</span>';
                        
                        // Verificar se email já existe após 1 segundo de pausa na digitação
                        timeoutId = setTimeout(async () => {
                            const emailExiste = await verificarEmailExistente(email);
                            if (emailExiste) {
                                e.target.classList.remove('campo-valido');
                                e.target.classList.add('campo-invalido');
                                feedback.innerHTML = '<span class="feedback-invalido"><i class="fas fa-times"></i> Este email já está em uso</span>';
                            } else {
                                e.target.classList.remove('campo-invalido');
                                e.target.classList.add('campo-valido');
                                feedback.innerHTML = '<span class="feedback-valido"><i class="fas fa-check"></i> Email disponível</span>';
                            }
                        }, 1000);
                    } 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> Email inválido</span>';
                    }
                } else {
                    e.target.classList.remove('campo-valido', 'campo-invalido');
                    feedback.innerHTML = '';
                }
            });
            
            // Validar email se já tiver valor
            if (emailField.value) {
                setTimeout(() => {
                    const event = new Event('input');
                    emailField.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);
                }
            });
        }
        
        // Validação de username em tempo real (consistente com outros campos)
        const usernameField = document.getElementById('username');
        if (usernameField) {
            let usernameTimeoutId;
            
            usernameField.addEventListener('input', function(e) {
                const username = e.target.value.trim();
                const feedback = document.getElementById('feedback-username');
                
                // Limpar timeout anterior
                if (usernameTimeoutId) {
                    clearTimeout(usernameTimeoutId);
                }
                
                // Limpar feedback anterior
                if (feedback) feedback.innerHTML = '';
                
                const cleanUsername = username.replace(/[^a-zA-Z0-9._-]/g, '');
                if (username !== cleanUsername) {
                    e.target.value = cleanUsername;
                }
                
                if (username.length < 3) {
                    e.target.classList.remove('campo-valido', 'campo-invalido');
                    return;
                }
                
                // Verificar se username já existe após 1 segundo de pausa na digitação
                usernameTimeoutId = setTimeout(async () => {
                    try {
                        const response = await fetch(`/accounts/check-username/?username=${encodeURIComponent(username)}`);
                        const data = await response.json();
                        
                        if (data.available) {
                            e.target.classList.remove('campo-invalido');
                            e.target.classList.add('campo-valido');
                            feedback.innerHTML = '<span class="feedback-valido"><i class="fas fa-check"></i> Username disponível</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> Username já existe</span>';
                        }
                    } catch (error) {
                        console.error('Erro ao verificar username:', error);
                    }
                }, 1000);
            });
            
            // Validar username se já tiver valor
            if (usernameField.value) {
                setTimeout(() => {
                    const event = new Event('input');
                    usernameField.dispatchEvent(event);
                }, 200);
            }
        }
        
    }
    
    // Iniciar quando o DOM estiver carregado
    document.addEventListener('DOMContentLoaded', function() {
        
        // Aplicar validações principais imediatamente
        aplicarValidacoes();
        
        // Aguardar sistema de municípios para validação de cidade
        aguardarMunicipios();
    });
    
    // Variáveis globais para navegação
    let currentStep = 1;
    const totalSteps = 5;
    
    // Funções de navegação
    function updateProgress() {
        const progress = (currentStep / totalSteps) * 100;
        document.querySelector('.progress-fill').style.width = progress + '%';
        
        document.querySelectorAll('.step').forEach((step, index) => {
            const stepNumber = index + 1;
            step.classList.remove('active', 'completed');
            
            if (stepNumber === currentStep) {
                step.classList.add('active');
            } else if (stepNumber < currentStep) {
                step.classList.add('completed');
            }
        });
    }
    
    function showStep(stepNumber) {
        document.querySelectorAll('.step-container').forEach(container => {
            container.classList.remove('active');
        });
        
        const targetStep = document.getElementById(`step-${stepNumber}`);
        if (targetStep) {
            targetStep.classList.add('active');
            currentStep = stepNumber;
            updateProgress();
        }
    }
    
    async function nextStep() {
        if (await validateCurrentStep()) {
            if (currentStep < totalSteps) {
                showStep(currentStep + 1);
            }
        }
    }
    
    function prevStep() {
        if (currentStep > 1) {
            showStep(currentStep - 1);
        }
    }
    
    // Função de validação por etapa
    async function validateCurrentStep() {
        const currentContainer = document.getElementById(`step-${currentStep}`);
        const requiredFields = currentContainer.querySelectorAll('[required]');
        
        for (let field of requiredFields) {
            if (!field.value.trim()) {
                field.focus();
                alert('Por favor, preencha todos os campos obrigatórios.');
                return false;
            }
        }
        
        // Validações específicas por etapa
        if (currentStep === 1) {
            const servicesSelected = document.querySelectorAll('input[name="categoria_servico"]:checked');
            if (servicesSelected.length === 0) {
                alert('Por favor, selecione pelo menos um tipo de serviço.');
                return false;
            }
        }
        
        if (currentStep === 2) {
            // Validar username
            const username = document.getElementById('username').value.trim();
            if (username.length < 3) {
                alert('Nome de usuário deve ter pelo menos 3 caracteres.');
                document.getElementById('username').focus();
                return false;
            }
            
            const validUsername = /^[a-zA-Z0-9._-]+$/.test(username);
            if (!validUsername) {
                alert('Nome de usuário deve conter apenas letras, números, pontos, hífens e underscores.');
                document.getElementById('username').focus();
                return false;
            }
            
            // Validar CPF
            const cpf = document.getElementById('cpf').value;
            if (!validarCPF(cpf)) { // Usar validarCPF para validação
                alert('Por favor, insira um CPF válido.');
                document.getElementById('cpf').focus();
                return false;
            }
            
            // Validar email
            const email = document.getElementById('email').value;
            if (!validarEmail(email)) {
                alert('Por favor, insira um email válido.');
                document.getElementById('email').focus();
                return false;
            }
            
            // Verificar se email já existe
            try {
                const emailExiste = await verificarEmailExistente(email);
                if (emailExiste) {
                    alert('Este email já está em uso. Por favor, use outro email.');
                    document.getElementById('email').focus();
                    return false;
                }
            } catch (error) {
                console.error('Erro ao verificar email:', error);
                // Em caso de erro, não bloquear o usuário
            }
            
            // Validar estado
            const estado = document.getElementById('estado').value;
            if (!estado) {
                alert('Por favor, selecione um estado.');
                document.getElementById('estado').focus();
                return false;
            }
            
            // Validar cidade
            const cidade = document.getElementById('cidade').value;
            if (!cidade) {
                alert('Por favor, insira uma cidade.');
                document.getElementById('cidade').focus();
                return false;
            }
            
            // Usar a função validarCidade do sistema de municípios
            if (typeof validarCidade === 'function') {
                if (!validarCidade(cidade, estado)) {
                    alert('Por favor, insira uma cidade válida para o estado selecionado.');
                    document.getElementById('cidade').focus();
                    return false;
                }
                    }
            
            // Validar data de nascimento
            const dataNascimento = document.getElementById('data_nascimento').value;
            if (!dataNascimento) {
                alert('Por favor, insira sua data de nascimento.');
                document.getElementById('data_nascimento').focus();
                return false;
            }
            
            const dataNasc = new Date(dataNascimento);
            const hoje = new Date();
            const idade = hoje.getFullYear() - dataNasc.getFullYear();
            const mes = hoje.getMonth() - dataNasc.getMonth();
            
            if (mes < 0 || (mes === 0 && hoje.getDate() < dataNasc.getDate())) {
                idade--;
            }
            
            if (idade < 18) {
                alert('Você deve ter pelo menos 18 anos para se cadastrar.');
                document.getElementById('data_nascimento').focus();
                return false;
            }
        }
        
        if (currentStep === 2) {
            const locaisSelecionados = document.querySelectorAll('input[name="local_atendimento"]:checked');
            if (locaisSelecionados.length === 0) {
                alert('Por favor, selecione pelo menos um local de atendimento.');
                return false;
            }
        }
        
        if (currentStep === 4) {
            const categoriasSelecionadas = document.querySelectorAll('input[name="categorias"]:checked');
            if (categoriasSelecionadas.length === 0) {
                alert('Por favor, selecione pelo menos uma categoria de serviço.');
                return false;
            }
        }
        
        if (currentStep === 5) {
            const fotoPerfil = document.getElementById('foto_perfil');
            if (fotoPerfil.files.length === 0) {
                alert('Por favor, selecione uma foto de perfil.');
                fotoPerfil.focus();
                return false;
            }
        }
        
        return true;
    }
    
    // Funções de toggle
    function toggleService(element, serviceType) {
        const checkbox = element.querySelector('input[type="checkbox"]');
        checkbox.checked = !checkbox.checked;
        
        if (checkbox.checked) {
            element.classList.add('selected');
        } else {
            element.classList.remove('selected');
        }
    }
    
    function toggleLocalAtendimento(element, localType) {
        const checkbox = element.querySelector('input[type="checkbox"]');
        checkbox.checked = !checkbox.checked;
        
        if (checkbox.checked) {
            element.classList.add('selected');
        } else {
            element.classList.remove('selected');
        }
    }
    
    function toggleCategory(element, categoriaId) {
        const checkbox = element.querySelector('input[type="checkbox"]');
        checkbox.checked = !checkbox.checked;
        
        if (checkbox.checked) {
            element.classList.add('selected');
        } else {
            element.classList.remove('selected');
        }
    }
    
    // Máscaras e validações adicionais
    document.addEventListener('DOMContentLoaded', function() {
        // Máscara para telefone
        const telefoneField = document.getElementById('telefone');
        if (telefoneField) {
            telefoneField.addEventListener('input', function(e) {
                let value = e.target.value.replace(/\D/g, '');
                value = value.replace(/(\d{2})(\d)/, '($1) $2');
                value = value.replace(/(\d{5})(\d)/, '$1-$2');
                e.target.value = value;
            });
        }
        
        // Máscara para WhatsApp
        const whatsappField = document.getElementById('whatsapp');
        if (whatsappField) {
            whatsappField.addEventListener('input', function(e) {
                let value = e.target.value.replace(/\D/g, '');
                e.target.value = value;
            });
        }
        

        
        // 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);
            }
        }
        
        // File upload preview
        document.querySelectorAll('input[type="file"]').forEach(input => {
            input.addEventListener('change', function(e) {
                if (this.id === 'fotos_galeria') {
                    handleGaleriaPreview(this);
                } else {
                    const label = this.nextElementSibling;
                    if (this.files.length > 0) {
                        label.style.borderColor = 'var(--primary-color)';
                        label.style.background = 'rgba(74, 144, 226, 0.1)';
                        label.style.color = 'var(--primary-color)';
                    }
                }
            });
        });
        
        // Form validation on submit
        const cadastroForm = document.getElementById('cadastroForm');
        if (cadastroForm) {
            cadastroForm.addEventListener('submit', async function(e) {
                if (!(await validateCurrentStep())) {
                    e.preventDefault();
                    return false;
                }
                
                const submitBtn = document.querySelector('button[type="submit"]');
                submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Processando...';
                submitBtn.disabled = true;
            });
        }
    });
    
    // Preview da galeria de fotos
    function handleGaleriaPreview(input) {
        const previewContainer = document.getElementById('preview_container');
        const galeriaPreview = document.getElementById('galeria_preview');
        
        previewContainer.innerHTML = '';
        
        if (input.files.length > 0) {
            if (input.files.length > 10) {
                alert('Máximo de 10 fotos permitido. Apenas as primeiras 10 serão processadas.');
                const dt = new DataTransfer();
                for (let i = 0; i < 10; i++) {
                    dt.items.add(input.files[i]);
                }
                input.files = dt.files;
            }
            
            galeriaPreview.style.display = 'block';
            
            Array.from(input.files).forEach((file, index) => {
                const maxSize = 5 * 1024 * 1024;
                if (file.size > maxSize) {
                    alert(`Arquivo "${file.name}" é muito grande. Máximo permitido: 5MB`);
                    return;
                }
                
                const reader = new FileReader();
                reader.onload = function(e) {
                    const col = document.createElement('div');
                    col.className = 'col-md-3 col-sm-4 col-6 mb-2';
                    col.innerHTML = `
                        <div class="card">
                            <img src="${e.target.result}" class="card-img-top" style="height: 120px; object-fit: cover;">
                            <div class="card-body p-2">
                                <small class="text-muted">Foto ${index + 1}</small>
                                <br>
                                <small class="text-muted">${(file.size / 1024 / 1024).toFixed(1)} MB</small>
                            </div>
                        </div>
                    `;
                    previewContainer.appendChild(col);
                };
                reader.readAsDataURL(file);
            });
        } else {
            galeriaPreview.style.display = 'none';
        }
    }
</script>
{% endblock %}