@extends('layouts.app')

@section('title', 'Alterar Cadastro - Banco de Talentos')
@section('meta_description', 'Página para alterar cadastro do usuário no Banco de Talentos. Atualize suas informações pessoais, preferências e dados de contato para manter seu perfil atualizado e aumentar suas chances de encontrar a vaga ideal.')

@section('content')

@php
    $pd = $profileData ?? [];
    $opts = $options ?? [];
@endphp

<section class="cad-vaga-page pt-4 pb-5">
<div class="container py-4">

    @if ($errors->any())
        <div class="alert alert-danger mb-4">Verifique os campos antes de salvar.</div>
    @endif
    @if (session('success'))
        <div class="alert alert-success mb-4">{{ session('success') }}</div>
    @endif

    <div class="d-flex justify-content-between align-items-center mb-4">
        <h4 class="fw-bold mb-0 text-dark fs-5"></h4>
        <a href="{{ route('talent-bank.candidate.profile') }}" class="text-decoration-none d-flex align-items-center fw-bold link-purple">
            <i class="bi bi-arrow-left me-2"></i> Voltar
        </a>
    </div>

<div class="row justify-content-center">
<div class="col-12 col-lg-10">

    <h1 class="mb-4 fw-bold cad-vaga-titulo">Candidato, altere seu cadastro!</h1>

    <div class="position-relative mb-5">
        <div class="stepper-bg-line"></div>
        <div id="progress-line" class="stepper-progress-line"></div>
        <div class="d-flex justify-content-between position-relative z-2">
            @foreach([1=>'Acesso', 2=>'Dados pessoais', 3=>'Experiência', 4=>'Formação', 5=>'Conhecimentos', 6=>'Áreas de interesse'] as $num => $label)
            <div class="text-center stepper-item">
                <div class="stepper-circle mx-auto d-flex align-items-center justify-content-center rounded-circle" id="circle-{{ $num }}">
                    <i class="bi bi-check d-none"></i>
                </div>
                <span class="d-block mt-2 small stepper-label" id="label-{{ $num }}">{{ $label }}</span>
            </div>
            @endforeach
        </div>
    </div>

    <div id="step-save-toast" class="position-fixed bottom-0 end-0 m-4 p-3 rounded shadow text-white fw-semibold" style="z-index:9999;display:none;min-width:220px;font-size:.9rem;"></div>

    <form id="registration-form" method="POST" action="{{ route('talent-bank.candidate.update') }}" enctype="multipart/form-data"
        data-route-update="{{ route('talent-bank.candidate.update') }}"
        data-route-photo="{{ route('talent-bank.candidate.photo.update') }}"
        data-route-experiences="{{ route('talent-bank.candidate.experiences.store') }}"
        data-route-educations="{{ route('talent-bank.candidate.educations.store') }}"
        data-route-courses="{{ route('talent-bank.candidate.courses.store') }}"
        data-route-languages="{{ route('talent-bank.candidate.languages.attach') }}"
        data-route-skills="{{ route('talent-bank.candidate.skills.store') }}"
        data-csrf="{{ csrf_token() }}">
        @method('PUT')

        {{-- ── STEP 1: Acesso ──────────────────────────────────────────────── --}}
        <div class="step-content" id="step-1">
            <h2 class="fw-bold mb-1 cad-vaga-section-title">Dados de acesso</h2>
            <p class="text-muted mb-3 small">Atualize seu e-mail e/ou senha. Deixe a senha em branco para não alterá-la.</p>

            <div class="cad-vaga-card mb-4">
                <span class="badge cad-vaga-badge mb-3">E-mail</span>
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label class="form-label small fw-semibold">E-mail</label>
                        <input type="email" class="form-control" name="email" value="{{ $candidate->email ?? '' }}">
                    </div>
                    <div class="col-md-6 mb-3">
                        <label class="form-label small fw-semibold">Confirmar E-mail</label>
                        <input type="email" class="form-control" name="email_confirmation" value="{{ $candidate->email ?? '' }}">
                    </div>
                </div>
            </div>

            <div class="cad-vaga-card mb-4">
                <span class="badge cad-vaga-badge mb-3">Senha</span>
                <p class="small text-muted mb-3">Deixe em branco para manter a senha atual.</p>
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label class="form-label small fw-semibold">Nova Senha</label>
                        <div class="position-relative">
                            <input type="password" class="form-control pe-5" name="password" id="password" autocomplete="new-password">
                            <span onclick="togglePwd('password', this)" class="position-absolute top-50 end-0 translate-middle-y me-3 pwd-toggle-icon"><i class="bi bi-eye-slash"></i></span>
                        </div>
                    </div>
                    <div class="col-md-6 mb-3">
                        <label class="form-label small fw-semibold">Confirmar Nova Senha</label>
                        <div class="position-relative">
                            <input type="password" class="form-control pe-5" name="password_confirmation" id="password2" autocomplete="new-password">
                            <span onclick="togglePwd('password2', this)" class="position-absolute top-50 end-0 translate-middle-y me-3 pwd-toggle-icon"><i class="bi bi-eye-slash"></i></span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="cad-vaga-card mb-4">
                <span class="badge cad-vaga-badge mb-3">Foto de perfil</span>
                <div class="d-flex align-items-center gap-3 flex-wrap">
                    <div id="photo-preview" class="rounded-circle d-flex align-items-center justify-content-center flex-shrink-0 photo-preview-circle">
                        @if (!empty($candidate->photo))
                            <img src="{{ asset('storage/' . $candidate->photo) }}" class="rounded-circle w-100 h-100 object-fit-cover" alt="Foto">
                        @else
                            <i class="bi bi-person"></i>
                        @endif
                    </div>
                    <div class="p-3 text-center flex-grow-1 photo-upload-click-area" onclick="document.getElementById('photoInput').click()">
                        <i class="bi bi-cloud-arrow-up text-primary fs-4"></i>
                        <p class="mb-0 mt-1 small fw-semibold">Clique ou arraste uma foto para essa área!</p>
                    </div>
                    <input type="file" id="photoInput" name="photo" class="d-none" accept="image/*">
                </div>
                <p class="text-muted mt-2 mb-0 small">JPG ou PNG, máximo 2MB</p>
            </div>

            <div class="d-flex justify-content-between align-items-center">
                <button type="button" class="btn px-4 py-2 fw-semibold btn-outline-secondary step-save-btn" data-step="1">
                    <span class="save-label"><i class="bi bi-floppy me-1"></i>Salvar</span>
                    <span class="save-spinner d-none"><span class="spinner-border spinner-border-sm me-1"></span>Salvando...</span>
                </button>
                <button type="button" class="btn px-4 py-2 fw-semibold cad-vaga-btn-salvar" onclick="nextStep(2)">Prosseguir</button>
            </div>
        </div>

        {{-- ── STEP 2: Dados Pessoais ──────────────────────────────────────── --}}
        <div class="step-content d-none" id="step-2">
            <h2 class="fw-bold mb-1 cad-vaga-section-title">Dados Pessoais</h2>
            <p class="text-muted mb-3 small">Mantenha seus dados pessoais atualizados para aumentar suas chances de ser encontrado por recrutadores.</p>

            <div class="cad-vaga-card mb-4">
                <span class="badge cad-vaga-badge mb-3">Identificação</span>
                <div class="row">
                    <div class="col-md-3 mb-3">
                        <label class="form-label small fw-semibold">CPF</label>
                        <input type="text" class="form-control" value="{{ $pd['cpf'] ?? '' }}" disabled>
                    </div>
                    <div class="col-md-5 mb-3">
                        <label class="form-label small fw-semibold">Nome Completo</label>
                        <input type="text" class="form-control" name="full_name" value="{{ $pd['full_name'] ?? '' }}">
                    </div>
                    <div class="col-md-4 mb-3">
                        <label class="form-label small fw-semibold">Data de Nascimento</label>
                        <input type="date" class="form-control" name="birth_date" value="{{ $pd['birth_date'] ?? '' }}">
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4 mb-3">
                        <label class="form-label small fw-semibold">Sexo</label>
                        <select class="form-select" name="gender_id">
                            <option value="">Selecione</option>
                            @foreach ($opts['gender'] ?? [] as $g)
                                <option value="{{ $g['id'] }}" {{ optional($candidate->gender)->name === $g['name'] ? 'selected' : '' }}>{{ $g['name'] }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4 mb-3">
                        <label class="form-label small fw-semibold">Estado Civil</label>
                        <select class="form-select" name="marital_status_id">
                            <option value="">Selecione</option>
                            @foreach ($opts['maritalStatus'] ?? [] as $m)
                                <option value="{{ $m['id'] }}" {{ optional($candidate->maritalStatus)->name === $m['name'] ? 'selected' : '' }}>{{ $m['name'] }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4 mb-3">
                        <label class="form-label small fw-semibold">Etnia</label>
                        <select class="form-select" name="ethnicity_id">
                            <option value="">Selecione</option>
                            @foreach ($opts['academicDiscipline'] ?? [] as $e)
                                {{-- ethnicity usa tabela própria, listada abaixo --}}
                            @endforeach
                            @php
                                $ethnicities = \App\Models\TalentBank\Ethnicity::orderBy('name')->get();
                            @endphp
                            @foreach ($ethnicities as $e)
                                <option value="{{ $e->id }}" {{ $candidate->ethnicity_id == $e->id ? 'selected' : '' }}>{{ $e->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-5 mb-3">
                        <label class="form-label small fw-semibold">Pessoa com Deficiência (PCD)</label>
                        <div class="d-flex gap-4 mt-1">
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="pcd" id="pcd_sim" value="1" {{ ($pd['pcd'] ?? 0) == 1 ? 'checked' : '' }}>
                                <label class="form-check-label small" for="pcd_sim">Sim</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="pcd" id="pcd_nao" value="0" {{ ($pd['pcd'] ?? 0) == 0 ? 'checked' : '' }}>
                                <label class="form-check-label small" for="pcd_nao">Não</label>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-7 mb-3">
                        <label class="form-label small fw-semibold">Cargo / Ocupação</label>
                        <select class="form-select" name="occupation_id">
                            <option value="">Selecione</option>
                            @foreach ($opts['occupation'] ?? [] as $o)
                                <option value="{{ $o['id'] }}" {{ $candidate->occupation_id == $o['id'] ? 'selected' : '' }}>{{ $o['name'] }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>

            <div class="cad-vaga-card mb-4">
                <span class="badge cad-vaga-badge mb-3">Endereço</span>
                <div class="row">
                    <div class="col-md-3 mb-3">
                        <label class="form-label small fw-semibold">CEP</label>
                        <input type="text" class="form-control" name="cep" value="{{ $pd['cep'] ?? '' }}">
                    </div>
                    <div class="col-md-6 mb-3">
                        <label class="form-label small fw-semibold">Endereço</label>
                        <input type="text" class="form-control" name="address" value="{{ $pd['address'] ?? '' }}">
                    </div>
                    <div class="col-md-3 mb-3">
                        <label class="form-label small fw-semibold">Bairro</label>
                        <select class="form-select" name="neighbourhood_id">
                            <option value="">Selecione</option>
                            @foreach ($opts['neighbourhood'] ?? [] as $n)
                                <option value="{{ $n['id'] }}" {{ $candidate->neighbourhood_id == $n['id'] ? 'selected' : '' }}>{{ $n['name'] }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>

            <div class="cad-vaga-card mb-4">
                <span class="badge cad-vaga-badge mb-3">Telefone</span>
                <div class="row">
                    <div class="col-md-4 mb-3">
                        <label class="form-label small fw-semibold">Residencial</label>
                        <input type="tel" class="form-control" name="phone_home" value="{{ $pd['phone_home'] ?? '' }}">
                    </div>
                    <div class="col-md-4 mb-3">
                        <label class="form-label small fw-semibold">Celular</label>
                        <input type="tel" class="form-control" name="phone_cell" value="{{ $pd['phone_cell'] ?? '' }}">
                    </div>
                </div>
            </div>

            <div class="cad-vaga-card mb-4">
                <span class="badge cad-vaga-badge mb-3">Salário</span>
                <div class="row">
                    <div class="col-md-4 mb-3">
                        <label class="form-label small fw-semibold">Último Salário</label>
                        <input type="text" class="form-control" name="last_salary" value="{{ $pd['last_salary'] ?? '' }}">
                    </div>
                    <div class="col-md-4 mb-3">
                        <label class="form-label small fw-semibold">Pretensão Salarial</label>
                        <input type="text" class="form-control" name="expected_salary" value="{{ $pd['expected_salary'] ?? '' }}">
                    </div>
                </div>
            </div>

            <div class="cad-vaga-card mb-4">
                <span class="badge cad-vaga-badge mb-3">Perfil Profissional</span>
                <label class="form-label small fw-semibold">Resumo</label>
                <textarea class="form-control" name="resume" rows="4">{{ $pd['resume'] ?? '' }}</textarea>
            </div>

            <div class="d-flex justify-content-between align-items-center">
                <button type="button" class="btn px-4 py-2 fw-semibold cad-vaga-btn-voltar" onclick="prevStep(1)">Voltar</button>
                <div class="d-flex gap-2">
                    <button type="button" class="btn px-4 py-2 fw-semibold btn-outline-secondary step-save-btn" data-step="2">
                        <span class="save-label"><i class="bi bi-floppy me-1"></i>Salvar</span>
                        <span class="save-spinner d-none"><span class="spinner-border spinner-border-sm me-1"></span>Salvando...</span>
                    </button>
                    <button type="button" class="btn px-4 py-2 fw-semibold cad-vaga-btn-salvar" onclick="nextStep(3)">Prosseguir</button>
                </div>
            </div>
        </div>

        {{-- ── STEP 3: Experiência ─────────────────────────────────────────── --}}
        <div class="step-content d-none" id="step-3">
            <h2 class="fw-bold mb-1 cad-vaga-section-title">Experiência</h2>
            <p class="text-muted mb-3 small">Adicione suas experiências profissionais. Clique em "Adicionar mais" para incluir novas entradas.</p>

            <div class="cad-vaga-card mb-4">
                <span class="badge cad-vaga-badge mb-3">Primeiro emprego</span>
                <div class="d-flex gap-4">
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="first_job" id="fj_sim" value="1" {{ ($candidate->is_first_job ?? false) ? 'checked' : '' }}>
                        <label class="form-check-label small" for="fj_sim">Sim</label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="first_job" id="fj_nao" value="0" {{ !($candidate->is_first_job ?? false) ? 'checked' : '' }}>
                        <label class="form-check-label small" for="fj_nao">Não</label>
                    </div>
                </div>
            </div>

            <div id="experience-entries">
                <div class="experience-entry cad-vaga-card mb-4">
                    <span class="badge cad-vaga-badge mb-3">Experiência</span>
                    <div class="row">
                        <div class="col-md-4 mb-3">
                            <label class="form-label small fw-semibold">Empresa</label>
                            <input type="text" class="form-control" name="experience[0][company]">
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label small fw-semibold">Data Início</label>
                            <input type="date" class="form-control" name="experience[0][start_date]">
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label small fw-semibold">Data Término</label>
                            <input type="date" class="form-control" name="experience[0][end_date]">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4 mb-3">
                            <label class="form-label small fw-semibold">Salário</label>
                            <input type="text" class="form-control" name="experience[0][salary]">
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label small fw-semibold">Área</label>
                            <select class="form-select" name="experience[0][area]">
                                <option value="">Selecione</option>
                                @foreach ($opts['businessLine'] ?? [] as $bl)
                                    <option value="{{ $bl['id'] }}">{{ $bl['name'] }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label small fw-semibold">Cargo</label>
                            <select class="form-select" name="experience[0][role]">
                                <option value="">Selecione</option>
                                @foreach ($opts['occupation'] ?? [] as $o)
                                    <option value="{{ $o['id'] }}">{{ $o['name'] }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label small fw-semibold">Emprego atual?</label>
                        <div class="d-flex gap-4">
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="experience[0][current]" value="1">
                                <label class="form-check-label small">Sim</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="experience[0][current]" value="0" checked>
                                <label class="form-check-label small">Não</label>
                            </div>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label small fw-semibold">Atividades desempenhadas</label>
                        <textarea class="form-control" name="experience[0][activities]" rows="4"></textarea>
                    </div>
                </div>
            </div>

            <div class="mb-4">
                <button type="button" class="btn px-4 py-2 fw-semibold cad-vaga-btn-salvar" onclick="addExperience()">Adicionar mais</button>
            </div>

            <div class="d-flex justify-content-between align-items-center">
                <button type="button" class="btn px-4 py-2 fw-semibold cad-vaga-btn-voltar" onclick="prevStep(2)">Voltar</button>
                <div class="d-flex gap-2">
                    <button type="button" class="btn px-4 py-2 fw-semibold btn-outline-secondary step-save-btn" data-step="3">
                        <span class="save-label"><i class="bi bi-floppy me-1"></i>Salvar</span>
                        <span class="save-spinner d-none"><span class="spinner-border spinner-border-sm me-1"></span>Salvando...</span>
                    </button>
                    <button type="button" class="btn px-4 py-2 fw-semibold cad-vaga-btn-salvar" onclick="nextStep(4)">Prosseguir</button>
                </div>
            </div>
        </div>

        {{-- ── STEP 4: Formação ────────────────────────────────────────────── --}}
        <div class="step-content d-none" id="step-4">
            <h2 class="fw-bold mb-1 cad-vaga-section-title">Formação</h2>
            <p class="text-muted mb-3 small">Informe suas formações acadêmicas. Clique em "Adicionar mais" para incluir novas entradas.</p>

            <div id="education-entries">
                <div class="education-entry cad-vaga-card mb-4">
                    <span class="badge cad-vaga-badge mb-3">Formação</span>
                    <div class="row">
                        <div class="col-md-4 mb-3">
                            <label class="form-label small fw-semibold">Nível</label>
                            <select class="form-select" name="education[0][type]">
                                <option value="">Selecione</option>
                                @foreach ($opts['educationLevel'] ?? [] as $el)
                                    <option value="{{ $el['id'] }}">{{ $el['name'] }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label small fw-semibold">Situação</label>
                            <select class="form-select" name="education[0][degree]">
                                <option value="">Selecione</option>
                                @foreach ($opts['academicDiscipline'] ?? [] as $ad)
                                    <option value="{{ $ad['id'] }}">{{ $ad['name'] }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label small fw-semibold">Instituição</label>
                            <input type="text" class="form-control" name="education[0][institution]">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4 mb-3">
                            <label class="form-label small fw-semibold">Especialização</label>
                            <input type="text" class="form-control" name="education[0][specialization]">
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label small fw-semibold">Data Início</label>
                            <input type="date" class="form-control" name="education[0][start_date]">
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label small fw-semibold">Data Término</label>
                            <input type="date" class="form-control" name="education[0][end_date]">
                        </div>
                    </div>
                </div>
            </div>

            <div class="mb-4">
                <button type="button" class="btn px-4 py-2 fw-semibold cad-vaga-btn-salvar" onclick="addEducation()">Adicionar mais</button>
            </div>

            <div class="d-flex justify-content-between align-items-center">
                <button type="button" class="btn px-4 py-2 fw-semibold cad-vaga-btn-voltar" onclick="prevStep(3)">Voltar</button>
                <div class="d-flex gap-2">
                    <button type="button" class="btn px-4 py-2 fw-semibold btn-outline-secondary step-save-btn" data-step="4">
                        <span class="save-label"><i class="bi bi-floppy me-1"></i>Salvar</span>
                        <span class="save-spinner d-none"><span class="spinner-border spinner-border-sm me-1"></span>Salvando...</span>
                    </button>
                    <button type="button" class="btn px-4 py-2 fw-semibold cad-vaga-btn-salvar" onclick="nextStep(5)">Prosseguir</button>
                </div>
            </div>
        </div>

        {{-- ── STEP 5: Conhecimentos ───────────────────────────────────────── --}}
        <div class="step-content d-none" id="step-5">
            <h2 class="fw-bold mb-1 cad-vaga-section-title">Conhecimentos</h2>
            <p class="text-muted mb-3 small">Informe cursos extracurriculares, idiomas e habilidades.</p>

            <div id="knowledge-entries">
                <div class="knowledge-entry cad-vaga-card mb-4">
                    <span class="badge cad-vaga-badge mb-3">Curso</span>
                    <div class="row">
                        <div class="col-md-4 mb-3">
                            <label class="form-label small fw-semibold">Curso</label>
                            <input type="text" class="form-control" name="knowledge[0][course]">
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label small fw-semibold">Instituição</label>
                            <input type="text" class="form-control" name="knowledge[0][institution]">
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label small fw-semibold">Data Início</label>
                            <input type="date" class="form-control" name="knowledge[0][start_date]">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4 mb-3">
                            <label class="form-label small fw-semibold">Data Término</label>
                            <input type="date" class="form-control" name="knowledge[0][end_date]">
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label small fw-semibold">Duração</label>
                            <input type="text" class="form-control" name="knowledge[0][duration]" placeholder="Ex: 40h">
                        </div>
                    </div>
                </div>
            </div>

            <div class="mb-4">
                <button type="button" class="btn px-4 py-2 fw-semibold cad-vaga-btn-salvar" onclick="addKnowledge()">Adicionar mais</button>
            </div>

            <div id="language-entries">
                <div class="language-entry cad-vaga-card mb-4">
                    <span class="badge cad-vaga-badge mb-3">Idioma</span>
                    <div class="row">
                        <div class="col-md-4 mb-3">
                            <label class="form-label small fw-semibold">Idioma</label>
                            <select class="form-select" name="languages[0][language]">
                                <option value="">Selecione</option>
                                @foreach ($opts['language'] ?? [] as $l)
                                    <option value="{{ $l['id'] }}">{{ $l['name'] }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label small fw-semibold">Proficiência</label>
                            <select class="form-select" name="languages[0][level]">
                                <option value="">Selecione</option>
                                @foreach ($opts['proficiency'] ?? [] as $p)
                                    <option value="{{ $p['id'] }}">{{ $p['name'] }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
            </div>

            <div class="mb-4">
                <button type="button" class="btn px-4 py-2 fw-semibold cad-vaga-btn-salvar" onclick="addLanguage()">Adicionar mais</button>
            </div>

            <div class="cad-vaga-card mb-4">
                <span class="badge cad-vaga-badge mb-3">Habilidades</span>
                <div id="skill-entries">
                    <div class="mb-3">
                        <input type="text" class="form-control" name="skills[]" placeholder="Ex: Liderança, Excel, Comunicação">
                    </div>
                </div>
            </div>

            <div class="mb-4">
                <button type="button" class="btn px-4 py-2 fw-semibold cad-vaga-btn-salvar" onclick="addSkill()">Adicionar mais</button>
            </div>

            <div class="d-flex justify-content-between align-items-center">
                <button type="button" class="btn px-4 py-2 fw-semibold cad-vaga-btn-voltar" onclick="prevStep(4)">Voltar</button>
                <div class="d-flex gap-2">
                    <button type="button" class="btn px-4 py-2 fw-semibold btn-outline-secondary step-save-btn" data-step="5">
                        <span class="save-label"><i class="bi bi-floppy me-1"></i>Salvar</span>
                        <span class="save-spinner d-none"><span class="spinner-border spinner-border-sm me-1"></span>Salvando...</span>
                    </button>
                    <button type="button" class="btn px-4 py-2 fw-semibold cad-vaga-btn-salvar" onclick="nextStep(6)">Prosseguir</button>
                </div>
            </div>
        </div>

    </form>

    {{-- ── STEP 6: Áreas de interesse — fora do form para evitar forms aninhados ── --}}
    <div class="step-content d-none" id="step-6">
        <h2 class="fw-bold mb-1 cad-vaga-section-title">Áreas de interesse</h2>
        <p class="text-muted mb-3 small">Selecione até <strong>3 áreas de interesse</strong>. Você será notificado quando vagas compatíveis forem publicadas.</p>

        <div class="cad-vaga-card mb-4">
            <span class="badge cad-vaga-badge mb-3">
                <i class="bi bi-bookmark-heart-fill me-1"></i><span id="ai-counter-text">Áreas selecionadas (0/3)</span>
            </span>

            <div class="d-flex flex-wrap gap-2 mb-3" id="ai-selected-tags">
                <span class="small text-muted" id="ai-empty-msg">Nenhuma área selecionada ainda.</span>
            </div>

            <div id="ai-add-form" class="row g-2 align-items-end">
                <div class="col-md-9">
                    <label class="form-label small fw-semibold">Adicionar área de interesse</label>
                    <select id="ai-select" class="form-select">
                        <option value="">Selecione...</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <button type="button" id="ai-add-btn" class="btn w-100 fw-semibold" style="background:#511282;color:#fff">
                        <i class="bi bi-plus-lg me-1"></i> Adicionar
                    </button>
                </div>
            </div>

            <div id="ai-limit-msg" class="alert alert-success border-0 py-2 px-3 mb-0 small d-none" style="background:#edf7ed">
                <i class="bi bi-check-circle-fill me-1 text-success"></i>
                Limite de 3 áreas atingido. Remova uma para adicionar outra.
            </div>
        </div>

        <div class="d-flex justify-content-between align-items-center">
            <button type="button" class="btn px-4 py-2 fw-semibold cad-vaga-btn-voltar" onclick="prevStep(5)">Voltar</button>
            <a href="{{ route('talent-bank.candidate.profile') }}" class="btn px-4 py-2 fw-semibold cad-vaga-btn-salvar">
                <i class="bi bi-check-lg me-1"></i> Concluir
            </a>
        </div>
    </div>

</div>
</div>
</div>
</section>

@push('scripts')
<script id="profile-data" type="application/json">@json($profileData ?? [])</script>
<script id="ai-occupations-data" type="application/json">@json(($allOccupations ?? collect())->map(fn($o) => ['id' => $o->id, 'name' => $o->name]))</script>
<script id="ai-selected-data" type="application/json">@json(($selectedOccupationIds ?? collect())->values())</script>
<script src="{{ asset('js/cadastre-se.js') }}"></script>
<script src="{{ asset('js/talent-bank/alterar-cadastro.js') }}"></script>
<script>
(function () {
    const ATTACH_URL = '{{ route('talent-bank.candidate.wanted-occupations.attach') }}';
    const DETACH_TPL = '{{ route('talent-bank.candidate.wanted-occupations.detach', ['occupationId' => 'OCCUPATION_ID']) }}';
    const CSRF       = '{{ csrf_token() }}';

    const allOccupations = JSON.parse(document.getElementById('ai-occupations-data').textContent);
    let selected = JSON.parse(document.getElementById('ai-selected-data').textContent).map(Number);

    const tagsEl    = document.getElementById('ai-selected-tags');
    const emptyMsg  = document.getElementById('ai-empty-msg');
    const selectEl  = document.getElementById('ai-select');
    const addBtn    = document.getElementById('ai-add-btn');
    const addForm   = document.getElementById('ai-add-form');
    const limitMsg  = document.getElementById('ai-limit-msg');
    const counterEl = document.getElementById('ai-counter-text');

    function render() {
        const count = selected.length;
        counterEl.textContent = 'Áreas selecionadas (' + count + '/3)';

        tagsEl.querySelectorAll('.ai-tag').forEach(function (t) { t.remove(); });

        if (count > 0) {
            emptyMsg.classList.add('d-none');
            selected.forEach(function (id) {
                const occ = allOccupations.find(function (o) { return o.id === id; });
                if (!occ) return;
                const span = document.createElement('span');
                span.className = 'badge rounded-pill d-flex align-items-center gap-1 ai-tag';
                span.style.cssText = 'background:#ede0ff;color:#511282;font-size:.9rem;padding:.5em 1em;font-weight:600';
                span.innerHTML = '<i class="bi bi-bookmark-check-fill"></i> ' + occ.name +
                    ' <button type="button" class="btn btn-link p-0 ms-1 lh-1" style="color:#511282" title="Remover">' +
                    '<i class="bi bi-x-lg" style="font-size:.75rem"></i></button>';
                span.querySelector('button').addEventListener('click', function () { detach(id); });
                tagsEl.appendChild(span);
            });
        } else {
            emptyMsg.classList.remove('d-none');
        }

        selectEl.innerHTML = '<option value="">Selecione...</option>';
        allOccupations.forEach(function (occ) {
            if (selected.indexOf(occ.id) !== -1) return;
            const opt = document.createElement('option');
            opt.value = occ.id;
            opt.textContent = occ.name;
            selectEl.appendChild(opt);
        });

        if (count >= 3) {
            addForm.classList.add('d-none');
            limitMsg.classList.remove('d-none');
        } else {
            addForm.classList.remove('d-none');
            limitMsg.classList.add('d-none');
        }
    }

    async function attach(id) {
        const fd = new FormData();
        fd.append('occupation_id', id);
        const res = await fetch(ATTACH_URL, {
            method: 'POST',
            headers: { 'X-CSRF-TOKEN': CSRF, 'Accept': 'application/json' },
            body: fd,
        });
        if (!res.ok) {
            const json = await res.json().catch(function () { return {}; });
            alert(json.message || 'Erro ao adicionar área.');
            return;
        }
        if (selected.indexOf(id) === -1) selected.push(id);
        render();
    }

    async function detach(id) {
        const url = DETACH_TPL.replace('OCCUPATION_ID', id);
        const res = await fetch(url, {
            method: 'DELETE',
            headers: { 'X-CSRF-TOKEN': CSRF, 'Accept': 'application/json' },
        });
        if (!res.ok) {
            const json = await res.json().catch(function () { return {}; });
            alert(json.message || 'Erro ao remover área.');
            return;
        }
        selected = selected.filter(function (x) { return x !== id; });
        render();
    }

    addBtn.addEventListener('click', function () {
        const id = parseInt(selectEl.value, 10);
        if (!id) return;
        attach(id);
    });

    render();
}());
</script>
@if(session('open_step'))
<script>document.addEventListener('DOMContentLoaded', function() { nextStep({{ (int) session('open_step') }}); });</script>
@endif
@endpush

@endsection