2@extends('layouts.app')

@section('title', 'Cadastre-se - Banco de Talentos')
@section('meta_description', 'Cadastre-se no Banco de Talentos de Angra dos Reis.')

@section('content')

<section class="py-5 pt-4 cadastre-page">
<div class="container py-4">
<div class="row justify-content-center">
<div class="col-12 col-lg-10">

    <h1 class="mb-4 fw-bold cad-vaga-titulo">Candidato, faça 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'] 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>

    <form id="registration-form" method="POST" action="{{ route('talent-bank.register.candidate.submit') }}" enctype="multipart/form-data">
        @csrf

        <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">Informe os dados para acesso. Você poderá atualizá-lo a qualquer momento utilizando o e-mail e a senha informados abaixo.</p>

            <div class="cad-vaga-card mb-4">
                <span class="badge cad-vaga-badge mb-3">Acesso</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" required>
                    </div>
                    <div class="col-md-6 mb-3">
                        <label class="form-label small fw-semibold">Repetir E-mail</label>
                        <input type="email" class="form-control" name="email_confirmation" required>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label class="form-label small fw-semibold">Senha</label>
                        <div class="position-relative">
                            <input type="password" class="form-control pe-5" name="password" id="password" required>
                            <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">Repetir Senha</label>
                        <div class="position-relative">
                            <input type="password" class="form-control pe-5" name="password_confirmation" id="password2" required>
                            <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">
                        <i class="bi bi-person"></i>
                    </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">A foto de perfil deve estar no formato JPG ou PNG e ter no máximo 2MB</p>
            </div>

            <div class="mb-4">
                <div class="form-check mb-2">
                    <input class="form-check-input" type="checkbox" id="terms" required>
                    <label class="form-check-label small" for="terms">
                        Estou de acordo com os <a href="#" class="text-decoration-none link-purple">Termos de Uso do Talentos</a>. Leia antes de finalizar.
                    </label>
                </div>
                <div class="form-check mb-2">
                    <input class="form-check-input" type="checkbox" id="privacy" required>
                    <label class="form-check-label small" for="privacy">
                        Estou de acordo com a <a href="#" class="text-decoration-none link-purple">Política de Privacidade</a>. Leia antes de finalizar.
                    </label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" id="lgpd" required>
                    <label class="form-check-label small" for="lgpd">
                        Autorizo o uso dos meus Dados Pessoais informados neste cadastro de acordo com a Lei 13.709/18 (LGPD)
                    </label>
                </div>
            </div>

            <div class="d-flex justify-content-end">
                <button type="button" class="btn px-4 py-2 fw-semibold cad-vaga-btn-salvar" onclick="nextStep(2)">Prosseguir</button>
            </div>
        </div>

        <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">Para avançar, todos os campos marcados com (*) são de preenchimento obrigatório e serão utilizados no momento de análise do seu currículo.</p>

            <div class="cad-vaga-card mb-4">
                <span class="badge cad-vaga-badge mb-3">Dados Pessoais</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" name="cpf" placeholder="000.000.000-00">
                    </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">
                    </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">
                    </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">
                            <option value="">Masculino</option>
                            <option>Feminino</option>
                            <option>Não binário</option>
                            <option>Prefiro não dizer</option>
                        </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">
                            <option value="">Selecione</option>
                            <option>Solteiro(a)</option>
                            <option>Casado(a)</option>
                            <option>Divorciado(a)</option>
                            <option>Viúvo(a)</option>
                        </select>
                    </div>
                    <div class="col-md-4 mb-3">
                        <label class="form-label small fw-semibold">Etnia</label>
                        <select class="form-select" name="ethnicity">
                            <option value="">Parda</option>
                            <option>Branca</option>
                            <option>Preta</option>
                            <option>Amarela</option>
                            <option>Indígena</option>
                        </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">
                                <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" 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</label>
                        <select class="form-select" name="desired_role">
                            <option value="">Assistente de Linha de Produção</option>
                        </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">
                    </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">
                    </div>
                    <div class="col-md-3 mb-3">
                        <label class="form-label small fw-semibold">Bairro</label>
                        <select class="form-select" name="neighborhood"><option>Selecione</option></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">
                    </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">
                    </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">Valor do Último Salário</label>
                        <input type="text" class="form-control" name="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">
                    </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"></textarea>
            </div>

            <div class="d-flex justify-content-between">
                <button type="button" class="btn px-4 py-2 fw-semibold cad-vaga-btn-voltar" onclick="prevStep(1)">Voltar</button>
                <button type="button" class="btn px-4 py-2 fw-semibold cad-vaga-btn-salvar" onclick="nextStep(3)">Prosseguir</button>
            </div>
        </div>

        <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">Onde você já trabalhou e/ou trabalha? Não se esqueça de selecionar no campo "Primeiro emprego" se você possui experiências anteriores ou não.</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" 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">
                        <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>
                            </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>
                            </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="5"></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">
                <button type="button" class="btn px-4 py-2 fw-semibold cad-vaga-btn-voltar" onclick="prevStep(2)">Voltar</button>
                <button type="button" class="btn px-4 py-2 fw-semibold cad-vaga-btn-salvar" onclick="nextStep(4)">Prosseguir</button>
            </div>
        </div>

        <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 nos campos abaixo. Você pode informar até 5 formações, basta clicar no botão ADICIONAR.</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">Formação</label>
                            <select class="form-select" name="education[0][type]">
                                <option value="">Selecione</option>
                                <option>Ensino Fundamental</option>
                                <option>Ensino Médio</option>
                                <option>Tecnólogo</option>
                                <option>Graduação</option>
                                <option>Pós-Graduação</option>
                                <option>Mestrado</option>
                                <option>Doutorado</option>
                            </select>
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label small fw-semibold">Grau</label>
                            <select class="form-select" name="education[0][degree]">
                                <option value="">Selecione</option>
                                <option>Completo</option>
                                <option>Incompleto</option>
                                <option>Em andamento</option>
                            </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">
                <button type="button" class="btn px-4 py-2 fw-semibold cad-vaga-btn-voltar" onclick="prevStep(3)">Voltar</button>
                <button type="button" class="btn px-4 py-2 fw-semibold cad-vaga-btn-salvar" onclick="nextStep(5)">Prosseguir</button>
            </div>
        </div>

        <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 os cursos e especializações que você tenha feito. Você pode adicionar 6 formações extracurriculares.</p>

            <div id="knowledge-entries">
                <div class="knowledge-entry cad-vaga-card mb-4">
                    <span class="badge cad-vaga-badge mb-3">Conhecimento</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">Idiomas</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>
                                <option>Inglês</option>
                                <option>Espanhol</option>
                                <option>Francês</option>
                                <option>Alemão</option>
                                <option>Italiano</option>
                                <option>Mandarim</option>
                                <option>Japonês</option>
                            </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>
                                <option>Básico</option>
                                <option>Intermediário</option>
                                <option>Avançado</option>
                                <option>Fluente</option>
                                <option>Nativo</option>
                            </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">
                <button type="button" class="btn px-4 py-2 fw-semibold cad-vaga-btn-voltar" onclick="prevStep(4)">Voltar</button>
                <button type="submit" class="btn px-4 py-2 fw-semibold cad-vaga-btn-salvar">Finalizar</button>
            </div>
        </div>

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

@push('scripts')
<script src="{{ asset('js/cadastre-se.js') }}"></script>
@endpush

@endsection