@extends('layouts.app')

@section('title', 'Cadastro de Empresa - Banco de Talentos')
@section('meta_description', 'Cadastre sua empresa no Banco de Talentos de Angra dos Reis.')

@section('content')
<section class="cad-empresa-page py-5">
<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">Empresa, faça seu cadastro!</h1>

    {{-- ===================== STEPPER ===================== --}}
    <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=>'Dados de acesso', 2=>'Dados da empresa', 3=>'Vagas'] as $num => $label)
            <div class="text-center stepper-item" id="stepper-item-{{ $num }}" onclick="goToStepEmp({{ $num }})" style="cursor:pointer; user-select:none;">
                <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>

    {{-- ===================== FORMULÁRIO ===================== --}}
    @php
        $startStep = 1;
        if ($errors->hasAny(['email', 'email_confirmation', 'password', 'password_confirmation'])) {
            $startStep = 1;
        } elseif ($errors->hasAny(['document', 'name'])) {
            $startStep = 2;
        } elseif ($errors->any()) {
            $startStep = 3;
        }
    @endphp
    <form id="registration-form" method="POST" action="{{ route('talent-bank.register.company.submit') }}" enctype="multipart/form-data" data-start-step="{{ $startStep }}">
        @csrf

        {{-- ===== STEP 1: DADOS DE ACESSO ===== --}}
        <div class="step-content" id="step-1">

            <h2 class="cad-vaga-section-title fw-bold mb-1">Dados de acesso</h2>
            <p class="text-muted mb-3 cad-vaga-subtitulo">Informe os dados para acesso. Você poderá atualizá-lo a qualquer momento utilizando o e-mail e a senha informados abaixo.</p>

            {{-- Acesso --}}
            <div class="cad-vaga-card p-4 mb-4">
                <span class="badge mb-3 cad-vaga-badge">Acesso</span>
                @if ($errors->any())
                    <div class="alert alert-danger mb-3">
                        <ul class="mb-0">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif
                <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 @error('email') is-invalid @enderror" name="email" id="emp_email" value="{{ old('email') }}" required>
                        @error('email')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </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 @error('email_confirmation') is-invalid @enderror" name="email_confirmation" id="emp_email2" value="{{ old('email_confirmation') }}" required>
                        @error('email_confirmation')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label class="form-label small fw-semibold">Senha</label>
                        <div class="pwd-field-group">
                            <div class="pwd-input-wrap">
                                <input type="password" class="form-control pe-5 @error('password') is-invalid @enderror" name="password" id="emp_password" required>
                                <span onclick="togglePwdEmp('emp_password', this)" class="pwd-toggle-icon">
                                    <i class="bi bi-eye-slash"></i>
                                </span>
                            </div>
                            @error('password')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                    </div>
                    <div class="col-md-6 mb-3">
                        <label class="form-label small fw-semibold">Repetir Senha</label>
                        <div class="pwd-input-wrap">
                            <input type="password" class="form-control pe-5 @error('password_confirmation') is-invalid @enderror" name="password_confirmation" id="emp_password2" required>
                            <span onclick="togglePwdEmp('emp_password2', this)" class="pwd-toggle-icon">
                                <i class="bi bi-eye-slash"></i>
                            </span>
                        </div>
                        @error('password_confirmation')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                </div>
            </div>

            {{-- Foto da empresa --}}
            <div class="cad-vaga-card p-4 mb-4">
                <span class="badge mb-3 cad-vaga-badge">Foto de perfil</span>
                <div class="d-flex align-items-center gap-3 flex-wrap">
                    <div id="emp-photo-preview" class="rounded-circle d-flex align-items-center justify-content-center flex-shrink-0 photo-preview-circle">
                        <i class="bi bi-building"></i>
                    </div>
                    <div class="p-3 text-center flex-grow-1 photo-upload-click-area" onclick="document.getElementById('empPhotoInput').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="empPhotoInput" name="logo" class="d-none" accept="image/*">
                </div>
                <p class="text-muted mt-2 mb-0 photo-upload-hint">A foto deve estar no formato JPG ou PNG e ter no máximo 2MB</p>
            </div>

            {{-- Termos --}}
            <div class="mb-4">
                <div class="form-check mb-2">
                    <input class="form-check-input" type="checkbox" id="emp_terms" required>
                    <label class="form-check-label small" for="emp_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="emp_privacy" required>
                    <label class="form-check-label small" for="emp_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="emp_lgpd" required>
                    <label class="form-check-label small" for="emp_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="nextStepEmp(2)">Prosseguir</button>
            </div>
        </div>

        {{-- ===== STEP 2: DADOS DA EMPRESA ===== --}}
        <div class="step-content d-none" id="step-2">

            <h2 class="cad-vaga-section-title fw-bold mb-1">Dados da empresa</h2>
            <p class="text-muted mb-3 cad-vaga-subtitulo">Fique tranquilo, todos os seus dados estão protegidos.</p>

            {{-- Dados Gerais --}}
            <div class="cad-vaga-card p-4 mb-4">
                <span class="badge mb-3 cad-vaga-badge">Dados da empresa</span>
                <div class="row">
                    <div class="col-md-4 mb-3">
                        <label class="form-label small fw-semibold">CNPJ</label>
                        <input type="text" class="form-control @error('document') is-invalid @enderror" name="document" id="emp_cnpj" placeholder="00.000.000/0000-00" value="{{ old('document') }}" required>
                        @error('document')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                    <div class="col-md-4 mb-3">
                        <label class="form-label small fw-semibold">Nome</label>
                        <input type="text" class="form-control @error('name') is-invalid @enderror" name="name" id="emp_name" value="{{ old('name') }}" required>
                        @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                    <div class="col-md-4 mb-3">
                        <label class="form-label small fw-semibold">Área de ocupação</label>
                        <input type="text" class="form-control" name="occupation_area" value="{{ old('occupation_area') }}">
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4 mb-3">
                        <label class="form-label small fw-semibold">Município</label>
                        <input type="text" class="form-control" name="county" value="{{ old('county') }}">
                    </div>
                    <div class="col-md-4 mb-3">
                        <label class="form-label small fw-semibold">Nome comercial</label>
                        <input type="text" class="form-control" name="trading_name" value="{{ old('trading_name') }}">
                    </div>
                    <div class="col-md-4 mb-3">
                        <label class="form-label small fw-semibold">Descrição</label>
                        <input type="text" class="form-control" name="description" value="{{ old('description') }}">
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4 mb-3">
                        <label class="form-label small fw-semibold">Segmento</label>
                        <input type="text" class="form-control" name="segment" value="{{ old('segment') }}">
                    </div>
                    <div class="col-md-4 mb-3">
                        <label class="form-label small fw-semibold">Nome de contato</label>
                        <input type="text" class="form-control" name="contact_name" value="{{ old('contact_name') }}">
                    </div>
                    <div class="col-md-4 mb-3">
                        <label class="form-label small fw-semibold">Ativo</label>
                        <div class="d-flex gap-4 mt-1">
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="active" id="ativo_sim" value="1" checked>
                                <label class="form-check-label small" for="ativo_sim">Sim</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="active" id="ativo_nao" value="0">
                                <label class="form-check-label small" for="ativo_nao">Não</label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Endereço --}}
            <div class="cad-vaga-card p-4 mb-4">
                <span class="badge mb-3 cad-vaga-badge">Endereço</span>
                <div class="row">
                    <div class="col-md-4 mb-3">
                        <label class="form-label small fw-semibold">CEP</label>
                        <input type="text" class="form-control" name="zip_code" id="emp_cep" placeholder="00000-000" value="{{ old('zip_code') }}">
                    </div>
                    <div class="col-md-4 mb-3">
                        <label class="form-label small fw-semibold">Endereço</label>
                        <input type="text" class="form-control" name="address" id="emp_address" value="{{ old('address') }}">
                    </div>
                    <div class="col-md-4 mb-3">
                        <label class="form-label small fw-semibold">Bairro</label>
                        <select class="form-select" name="neighbourhood_id">
                            <option value="">Selecione</option>
                            @foreach(\App\Models\TalentBank\Neighbourhood::orderBy('name')->get() as $nb)
                            <option value="{{ $nb->id }}" {{ old('neighbourhood_id') == $nb->id ? 'selected' : '' }}>{{ $nb->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>

            {{-- Telefone --}}
            <div class="cad-vaga-card p-4 mb-4">
                <span class="badge mb-3 cad-vaga-badge">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 emp-phone" name="telephone" value="{{ old('telephone') }}">
                    </div>
                    <div class="col-md-4 mb-3">
                        <label class="form-label small fw-semibold">Celular</label>
                        <input type="tel" class="form-control emp-phone" name="cellphone" value="{{ old('cellphone') }}">
                    </div>
                </div>
            </div>

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

        {{-- ===== STEP 3: VAGAS ===== --}}
        <div class="step-content d-none" id="step-3">

            <h2 class="cad-vaga-section-title fw-bold mb-1">Vagas</h2>
            <p class="text-muted mb-3 cad-vaga-subtitulo">Fique tranquilo, todos os seus dados estão protegidos.</p>

            {{-- Cadastrar vaga? --}}
            <div class="cad-vaga-card p-4 mb-4">
                <span class="badge mb-3 cad-vaga-badge">Cadastrar vaga?</span>
                <div class="d-flex gap-4">
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="has_vacancies" id="vaga_sim" value="1" onchange="toggleVagas(true)">
                        <label class="form-check-label small" for="vaga_sim">Sim</label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="has_vacancies" id="vaga_nao" value="0" checked onchange="toggleVagas(false)">
                        <label class="form-check-label small" for="vaga_nao">Não</label>
                    </div>
                </div>
            </div>

            {{-- Container de vagas --}}
            <div id="vagas-container" class="d-none">

                <div id="vaga-entries">
                    @php
                        $oldVacancies = old('vacancies');
                        if (! is_array($oldVacancies) || $oldVacancies === []) {
                            $oldVacancies = [0 => []];
                        }
                    @endphp
                    @foreach ($oldVacancies as $vacancyIndex => $vagaData)
                        @include('pages.partials.form-dados-vaga', [
                            'vacancyIndex' => (int) $vacancyIndex,
                            'vaga' => is_array($vagaData) ? $vagaData : [],
                            'formOptions' => $formOptions ?? [],
                        ])
                    @endforeach
                </div>

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

            <div class="d-flex justify-content-between">
                <button type="button" class="btn px-4 py-2 fw-semibold cad-vaga-btn-voltar" onclick="prevStepEmp(2)">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/cadastro-empresa.js') }}"></script>
@endpush
@endsection