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

{% block title %}Cadastro de Modelo - Etapa 1 - 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;
    }
    
    .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-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;
    }
    
    .file-upload-area {
        position: relative;
        border: 2px dashed #dee2e6;
        border-radius: 12px;
        padding: 2rem;
        text-align: center;
        background: #f8f9fa;
        transition: all 0.3s ease;
        margin-top: 1rem;
        min-height: 150px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .file-upload-area:hover {
        border-color: var(--primary-color);
        background: rgba(74, 144, 226, 0.05);
    }
    
    .file-upload-area input[type="file"] {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
        z-index: 2;
    }
    
    .upload-hint {
        pointer-events: none;
        z-index: 1;
    }
    
    .upload-hint i {
        font-size: 3rem;
        color: var(--primary-color);
        margin-bottom: 1rem;
    }
    
    .upload-hint p {
        font-size: 1.1rem;
        margin-bottom: 0.5rem;
        color: #495057;
    }
    
    .photos-grid {
        display: grid;
        grid-template-columns: repeat(4, 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;
        flex-direction: column;
    }
    
    .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 - Etapa 1</h1>
            <p class="form-subtitle">
                Cadastro inicial - Após aprovação, você completará seu perfil na Etapa 2.
            </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>
        
        <div class="progress-bar">
            <div class="progress-fill" style="width: 25%;"></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 class="mt-4">
                        <h5 class="text-muted mb-3">
                            Cadastro de anúncios com dupla, trio e quarteto
                        </h5>
                        <p class="text-muted">
                            O cadastro será feito em nome de apenas uma anunciante, que deverá preencher seus dados pessoais. Nos casos de anúncios em dupla, trio ou quarteto, o perfil continuará vinculado a essa única anunciante. As informações sobre as demais participantes devem ser incluídas livremente na descrição do perfil, no campo de serviços, preferências, observações ou links.
                        </p>
                    </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: Dados Pessoais -->
            <div class="step-container" id="step-2">
                <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="telefone" class="form-label">Telefone *</label>
                                <input type="tel" class="form-control" id="telefone" name="telefone" 
                                       placeholder="(11) 99999-9999" required>
                            </div>
                        </div>
                        <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 3: Dados do Anúncio e Fotos -->
            <div class="step-container" id="step-3">
                <div class="form-card">
                    <h2 class="form-section-title">
                        <i class="fas fa-ad"></i>
                        Dados do Anúncio e Galeria
                    </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 class="form-group">
                        <label class="form-label">Galeria de Fotos *</label>
                        <div class="alert alert-warning">
                            <i class="fas fa-exclamation-triangle me-2"></i>
                            <strong>Importante:</strong> Você deve selecionar exatamente 8 fotos para a galeria.
                        </div>
                        
                        <div class="file-upload-area">
                            <input type="file" name="fotos_galeria" accept="image/*" multiple id="fotos_galeria" onchange="handleMultiplePhotos(this)" class="form-control" style="position: absolute; opacity: 0; width: 100%; height: 100%; cursor: pointer; z-index: 2;">
                            <div class="upload-hint">
                                <i class="fas fa-cloud-upload-alt"></i>
                                <p>Clique aqui ou arraste as fotos para selecionar</p>
                                <small class="text-muted">Selecione exatamente 8 fotos de uma vez</small>
                            </div>
                        </div>
                        

                        
                        <div id="photos_preview" class="mt-3" style="display: none;">
                            <h6>Fotos Selecionadas (<span id="photo_count">0</span>/8):</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="button" class="btn btn-primary" onclick="nextStep()">
                        Próximo <i class="fas fa-arrow-right ms-2"></i>
                    </button>
                </div>
            </div>
            
            <!-- Etapa 4: Credenciais e Termos -->
            <div class="step-container" id="step-4">
                <div class="form-card">
                    <h2 class="form-section-title">
                        <i class="fas fa-user-lock"></i>
                        Credenciais de Acesso e Termos
                    </h2>
                    
                    <div class="alert alert-info mb-4">
                        <h5 class="alert-heading">
                            <i class="fas fa-info-circle me-2"></i>
                            Informações Importantes
                        </h5>
                        <p class="mb-0">
                            Agradecemos o seu interesse em se cadastrar em nossa plataforma.<br>
                            Nesta primeira etapa, pedimos que você nos envie até 8 fotos recentes para avaliação do nosso casting.<br>
                            Após a análise, você receberá uma mensagem com as instruções para dar continuidade ao cadastro.
                        </p>
                    </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="password" class="form-label">Senha *</label>
                                <input type="password" class="form-control" id="password" name="password" 
                                       minlength="6" required>
                                <div class="form-text">Mínimo 6 caracteres</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="confirm_password" class="form-label">Confirmar Senha *</label>
                                <input type="password" class="form-control" id="confirm_password" name="confirm_password" 
                                       minlength="6" required>
                                <div class="feedback-validacao" id="feedback-confirm-password"></div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="form-group mt-4">
                        <h5 class="mb-3">Termos e Condições</h5>
                        
                        <div class="form-check mb-3">
                            <input class="form-check-input" type="checkbox" id="termo_idade" name="termo_idade" required>
                            <label class="form-check-label" for="termo_idade">
                                Declaro ser maior de 18 anos e ter plena certeza e ciência do cadastro que estou realizando
                            </label>
                        </div>
                        
                        <div class="form-check mb-3">
                            <input class="form-check-input" type="checkbox" id="termo_privacidade" name="termo_privacidade" required>
                            <label class="form-check-label" for="termo_privacidade">
                                Declaro ter lido e aceito a <a href="{% url 'core:politica_privacidade' %}" target="_blank">Política de Privacidade</a>
                            </label>
                        </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 Inicial
                    </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);
    }
    
    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;
        }
    }
    
    function validarCPF(cpf) {
        const cpfLimpo = cpf.replace(/\D/g, '');
        
        if (cpfLimpo.length !== 11) {
            return false;
        }
        
        const digitos = cpfLimpo.split('').map(d => parseInt(d));
        
        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);
        
        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);
        
        return digitos[9] === digito1 && digitos[10] === digito2;
    }
    
    function aguardarMunicipios() {
        if (typeof popularEstados === 'function' && typeof criarAutocompletarCidade === 'function') {
            popularEstados();
            setTimeout(() => {
                criarAutocompletarCidade();
            }, 100);
        } else {
            setTimeout(aguardarMunicipios, 100);
        }
    }
    
    function aplicarValidacoes() {
        // Validação de CPF
        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 = '';
                }
            });
        }
        
        // Validação de email
        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');
                
                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>';
                        
                        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 = '';
                }
            });
        }
        
        // Validação de cidade
        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) {
                    let cidadeValida = false;
                    if (typeof validarCidade === 'function') {
                        cidadeValida = validarCidade(cidade, estado);
                    } else {
                        cidadeValida = true;
                    }
                    
                    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 = '';
                }
            });
        }
        
        // Validação de username
        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');
                
                if (usernameTimeoutId) {
                    clearTimeout(usernameTimeoutId);
                }
                
                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;
                }
                
                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);
            });
        }
    }
    
    // Variáveis globais para navegação
    let currentStep = 1;
    const totalSteps = 3;
    
    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 < 4) {
                showStep(currentStep + 1);
            }
        }
    }
    
    function prevStep() {
        if (currentStep > 1) {
            showStep(currentStep - 1);
        }
    }
    
    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;
            }
        }
        
        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) {
            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;
            }
            
            const cpf = document.getElementById('cpf').value;
            if (!validarCPF(cpf)) {
                alert('Por favor, insira um CPF válido.');
                document.getElementById('cpf').focus();
                return false;
            }
            

            
            const estado = document.getElementById('estado').value;
            if (!estado) {
                alert('Por favor, selecione um estado.');
                document.getElementById('estado').focus();
                return false;
            }
            
            const cidade = document.getElementById('cidade').value;
            if (!cidade) {
                alert('Por favor, insira uma cidade.');
                document.getElementById('cidade').focus();
                return false;
            }
            
            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;
                }
            }
            
            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 === 3) {
                    console.log('Validando etapa 3 - Fotos selecionadas:', window.selectedPhotos.length);
                    if (window.selectedPhotos.length !== 8) {
                        alert(`Você deve selecionar exatamente 8 fotos para a galeria. Atualmente selecionou: ${window.selectedPhotos.length} foto(s).`);
                        return false;
                    }
                }
                
                if (currentStep === 4) {
                    const email = document.getElementById('email').value;
                    if (!validarEmail(email)) {
                        alert('Por favor, insira um email válido.');
                        document.getElementById('email').focus();
                        return false;
                    }
                    
                    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);
                    }
                    
                    const password = document.getElementById('password').value;
                    const confirmPassword = document.getElementById('confirm_password').value;
                    
                    if (password.length < 6) {
                        alert('A senha deve ter pelo menos 6 caracteres.');
                        document.getElementById('password').focus();
                        return false;
                    }
                    
                    if (password !== confirmPassword) {
                        alert('As senhas não coincidem.');
                        document.getElementById('confirm_password').focus();
                        return false;
                    }
                    
                    const termoIdade = document.getElementById('termo_idade');
                    const termoPrivacidade = document.getElementById('termo_privacidade');
                    
                    if (!termoIdade.checked) {
                        alert('Você deve confirmar que é maior de 18 anos.');
                        termoIdade.focus();
                        return false;
                    }
                    
                    if (!termoPrivacidade.checked) {
                        alert('Você deve aceitar a Política de Privacidade.');
                        termoPrivacidade.focus();
                        return false;
                    }
                }
        
        return true;
    }
    
    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 handleMultiplePhotos(input) {
        const files = Array.from(input.files);
        const previewContainer = document.getElementById('preview_container');
        const photoCount = document.getElementById('photo_count');
        const photosPreview = document.getElementById('photos_preview');
        
        if (files.length === 0) {
            window.selectedPhotos = [];
            updatePhotoPreview();
            updateUploadAreaFeedback();
            return;
        }
        
        // Validar número de fotos
        if (files.length !== 8) {
            alert(`Você deve selecionar exatamente 8 fotos. Atualmente selecionou: ${files.length} foto(s).`);
            input.value = '';
            window.selectedPhotos = [];
            updatePhotoPreview();
            updateUploadAreaFeedback();
            return;
        }
        
        // Validar tamanho de cada arquivo
        for (let i = 0; i < files.length; i++) {
            if (files[i].size > 5 * 1024 * 1024) {
                alert(`Arquivo "${files[i].name}" muito grande. Tamanho máximo: 5MB`);
                input.value = '';
                window.selectedPhotos = [];
                updatePhotoPreview();
                updateUploadAreaFeedback();
                return;
            }
        }
        
        // Armazenar fotos selecionadas
        window.selectedPhotos = files;
        
        // Atualizar preview
        updatePhotoPreview();
        
        // Atualizar feedback visual
        updateUploadAreaFeedback();
    }
    
    function updatePhotoPreview() {
        const previewContainer = document.getElementById('preview_container');
        const photoCount = document.getElementById('photo_count');
        const photosPreview = document.getElementById('photos_preview');
        
        // Limpar preview anterior
        previewContainer.innerHTML = '';
        
        if (selectedPhotos.length === 0) {
            photosPreview.style.display = 'none';
            return;
        }
        
        // Mostrar preview
        photosPreview.style.display = 'block';
        photoCount.textContent = selectedPhotos.length;
        
        // Criar preview das fotos
        selectedPhotos.forEach((file, index) => {
            const reader = new FileReader();
            reader.onload = function(e) {
                const col = document.createElement('div');
                col.className = 'col-md-3 col-sm-6 mb-3';
                
                col.innerHTML = `
                    <div class="card position-relative">
                        <img src="${e.target.result}" class="card-img-top" style="height: 150px; object-fit: cover;">
                        <div class="card-body p-2">
                            <small class="text-muted">Foto ${index + 1}</small>
                        </div>
                        <button type="button" class="btn btn-danger btn-sm position-absolute top-0 end-0 m-1" 
                                onclick="removePhoto(${index})" title="Remover foto">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                `;
                
                previewContainer.appendChild(col);
            };
            reader.readAsDataURL(file);
        });
    }
    
    function removePhoto(index) {
        window.selectedPhotos.splice(index, 1);
        updatePhotoPreview();
        updateUploadAreaFeedback();
    }
    
    function updateUploadAreaFeedback() {
        const uploadArea = document.querySelector('.file-upload-area');
        const hint = uploadArea.querySelector('.upload-hint');
        
        if (selectedPhotos.length === 8) {
            uploadArea.style.borderColor = '#28a745';
            uploadArea.style.background = 'rgba(40, 167, 69, 0.1)';
            hint.innerHTML = `
                <i class="fas fa-check-circle" style="color: #28a745;"></i>
                <p style="color: #28a745;">8 fotos selecionadas com sucesso!</p>
                <small class="text-muted">Clique para adicionar mais fotos ou remover individualmente</small>
            `;
        } else if (selectedPhotos.length > 0) {
            uploadArea.style.borderColor = '#ffc107';
            uploadArea.style.background = 'rgba(255, 193, 7, 0.1)';
            hint.innerHTML = `
                <i class="fas fa-info-circle" style="color: #ffc107;"></i>
                <p style="color: #ffc107;">${selectedPhotos.length} foto(s) selecionada(s)</p>
                <small class="text-muted">Selecione mais ${8 - selectedPhotos.length} foto(s) para completar</small>
            `;
        } else {
            uploadArea.style.borderColor = '#dee2e6';
            uploadArea.style.background = '#f8f9fa';
            hint.innerHTML = `
                <i class="fas fa-cloud-upload-alt"></i>
                <p>Clique aqui ou arraste as fotos para selecionar</p>
                <small class="text-muted">Selecione até 8 fotos (pode adicionar gradualmente)</small>
            `;
        }
    }
    
    document.addEventListener('DOMContentLoaded', function() {
        // Inicializar variável global para fotos selecionadas
        window.selectedPhotos = [];
        
        aplicarValidacoes();
        aguardarMunicipios();
        
        // Máscaras
        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;
            });
        }
        
        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) {
                    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>';
                    
                    const idadeField = document.getElementById('idade');
                    if (idadeField) {
                        idadeField.value = idade;
                    }
                } 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> Você deve ter pelo menos 18 anos para se cadastrar</span>';
                    
                    const idadeField = document.getElementById('idade');
                    if (idadeField) {
                        idadeField.value = '';
                    }
                }
            });
        }
        
        // Form validation on submit
        const cadastroForm = document.getElementById('cadastroForm');
        if (cadastroForm) {
            cadastroForm.addEventListener('submit', async function(e) {
                if (!(await validateCurrentStep())) {
                    e.preventDefault();
                    return false;
                }
                
                // Debug: verificar se as fotos foram preparadas
                console.log('Fotos selecionadas:', window.selectedPhotos.length);
                console.log('Input original files length:', document.getElementById('fotos_galeria').files.length);
                
                const submitBtn = document.querySelector('button[type="submit"]');
                submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Processando...';
                submitBtn.disabled = true;
            });
        }
    });
</script>



{% endblock %}