@extends('layouts.app')

@section('title', 'Banco de Talentos - Angra dos Reis')
@section('meta_description', 'Acesse o Banco de Talentos de Angra dos Reis. Encontre vagas de emprego e oportunidades profissionais.')
@section('content')

    <main class="bg-fundo">
        <section class="hero-section bg-fundo tb-home-hero">
            <img src="{{ asset('images/images/home_image.png') }}" class="w-100"
             alt="Imagem do banner do Banco de Talentos de Angra dos Reis">
        </section>

        <section class="vagas-section p-80 bg-fundo">
            <div class="container">
                <div class="row">
                    <div class="col-3 d-flex flex-column justify-content-center">
                        <h2 class="section-title text-end px-5">Últimas vagas<br>cadastradas</h2>
                        <div class="mt-5 text-end px-4">
                            <a href="{{ route('vagas') }}" class="bg-primary-purple rounded-pill px-5 py-3 text-decoration-none text-white">
                            Ver todas
                            </a>
                        </div>
                    </div>
                    <div class="position-relative col-9 d-flex align-items-center">
                        <button class="vagas-nav-btn vagas-nav-prev" type="button" aria-label="Anterior">
                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
                                <polyline points="15 18 9 12 15 6"></polyline>
                            </svg>
                        </button>

                        <div class="cards-container d-flex overflow-auto py-4 px-2">
                            @forelse($dashJobs as $job)
                            <div class="vaga-card text-center p-4 mx-2 flex-shrink-0">
                                <div class="vaga-icon mb-3"><i class="bi bi-briefcase-fill"></i></div>
                                <span class="vaga-local">{{ optional($job->neighbourhood)->name ?? 'Sem localização' }}</span>
                                <h5 class="vaga-titulo mt-2">{{ optional($job->occupation)->name ?? 'Vaga' }}</h5>
                                <span class="vaga-tipo badge text-purple mb-3">{{ optional($job->contractType)->name ?? '' }}</span>
                                <p class="vaga-descricao">{{ \Illuminate\Support\Str::limit($job->description, 80) }}</p>
                                <a href="{{ route('vagas.show', $job->id ?? '') }}"
                               class="bg-primary-purple rounded-pill px-3 py-2 text-decoration-none text-white">Detalhes
                                da vaga</a>
                            </div>
                            @empty
                            <div class="vaga-card text-center p-4 mx-2 flex-shrink-0">
                                <div class="vaga-icon mb-3"><i class="bi bi-briefcase-fill"></i></div>
                                <p class="text-muted">Nenhuma vaga no momento.</p>
                            </div>
                            @endforelse
                        </div>
                        <button class="vagas-nav-btn vagas-nav-next" type="button" aria-label="Próximo">
                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
                                <polyline points="9 18 15 12 9 6"></polyline>
                            </svg>
                        </button>
                    </div>
                </div>
            </div>
        </section>

        <section class="p-80" id="cadastro-candidato">
            <div class="container">
                <div class="row">
                    <div class="col-6">
                        <img src="{{ asset('images/images/woman.png') }}" alt="Foto de Mulher Sorrindo"
                         class="img-fluid w-100">
                    </div>

                    <div class="col-6 d-flex flex-column justify-content-center">
                        <h1 class="primary-purple">
                            As melhores <br> oportunidades <br> profissionais em Angra <br> dos Reis.
                        </h1>
                        <div class="mt-5">
                            <a href="{{ route('entrar', ['from_home' => 1]) }}" class="btn-home-cta px-5 py-3 text-decoration-none">
                                Cadastrar meu currículo
                            </a>
                        </div>
                    </div>
                </div>

                <div class="row home-overlap-section">
                    <div class="col-6 d-flex flex-column justify-content-center">
                        <h1 class="primary-purple text-end">
                            Cadastre sua empresa e <br> fomente o mercado com <br> suas vagas!
                        </h1>
                        <div class="mt-5 text-end">
                            <a href="{{ route('entrar', ['from_home' => 1]) }}" class="btn-home-cta px-5 py-3 text-decoration-none">
                                Cadastrar minha empresa
                            </a>
                        </div>
                    </div>
                    <div class="col-6 p-80">
                        <img src="{{ asset('images/images/man.png') }}" alt="Foto de Mulher Sorrindo"
                         class="img-fluid w-100">
                    </div>
                </div>

            </div>
        </section>

       <section class="p-80" id="tb-news-section">
            <div class="container">
                <div class="row">
                    <div class="col-3 d-flex flex-column justify-content-center align-items-start ps-4">
                        <h2 class="section-title primary-purple mb-1 tb-news-section__title">NOTÍCIAS</h2>
                        <p class="text-muted mb-4 tb-news-section__subtitle">Fique por dentro das novidades</p>
                        <a href="{{ route('noticias') }}" class="btn-home-cta px-4 py-2 text-decoration-none">Ver todas</a>
                    </div>

                    <div class="position-relative col-9 align-items-center">
                        <div class="tb-news-loading js-news-loading">Carregando notícias...</div>
                        <button class="carousel-btn carousel-btn-prev" type="button" aria-label="Notícia anterior">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <polyline points="15 18 9 12 15 6"></polyline>
                            </svg>
                        </button>

                        <!-- Container dos cards -->
                        <div class="carousel-wrapper">
                            <div class="carousel-track">
                                
                                @forelse($noticias as $noticia)
                                <a href="{{ route('noticias.show', $noticia['slug']) }}" class="noticia-card text-decoration-none">
                                    
                                    <div class="noticia-card-image">
                                        <img src="{{ $noticia['imagem'] !== '' ? $noticia['imagem'] : asset('images/images/home_image.png') }}" 
                                            alt="{{ $noticia['titulo'] }}"
                                            onerror="this.src='https://angra.rj.gov.br/pmar/assets/img/angra-default.png'">
                                        <div class="noticia-card-overlay"></div>
                                    </div>
                                    <div class="noticia-card-content">
                                        <span class="tb-news-date">{{ $noticia['data'] }}</span>
                                        <h5 class="noticia-card-title">{{ $noticia['titulo'] }}</h5>
                                        <p class="tb-news-summary">{{ \Illuminate\Support\Str::limit(strip_tags($noticia['resumo']), 95) }}</p>
                                    </div>
                                </a>
                                @empty
                                <div class="tb-news-empty">Nenhuma notícia disponível no momento.</div>
                                @endforelse 
                            </div>
                        </div>

                        <!-- Botão próximo -->
                        <button class="carousel-btn carousel-btn-next" type="button" aria-label="Próxima notícia">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <polyline points="9 18 15 12 9 6"></polyline>
                            </svg>
                        </button>
                    </div>
                </div>
            </div>
        </section>

        <section class="p-80">
            <div class="container">
                <h1 class="primary-purple text-center">A sua dúvida pode estar aqui <br> veja as perguntas frequentes.</h1>
                <div class="row mt-5 pt-5">
                    <div class="col-6">
                        <h3 class="text-secondary mb-3">Perguntas frequentes</h3>
                        <div class="accordion accordion-flush" id="accordionFlushExample" data-aos="fade-up"
                         data-aos-delay="200" data-aos-duration="1000">

                            <div class="accordion-item">
                                <h2 class="accordion-header">
                                    <button class="accordion-button collapsed fs-8 fw-bold px-3" type="button"
                                        data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false"
                                        aria-controls="flush-collapseOne">
                                    O que colocar em meu currículo?
                                    </button>
                                </h2>
                                <div id="flush-collapseOne" class="accordion-collapse collapse"
                                 data-bs-parent="#accordionFlushExample">
                                    <div class="accordion-body text-dark p-4">
                                    Seu currículo deve conter todas as suas informações pessoais e profissionais, de
                                    forma
                                    sucinta, a fim de que o sistema faça o cruzamento entre ele e as vagas disponíveis
                                    no
                                    Banco de Talentos. Essas informações deverão ser preenchidas nos campos que a
                                    própria
                                    plataforma disponibiliza no momento de seu cadastro.
                                    </div>
                                </div>
                            </div>

                            <div class="accordion-item">
                                <h2 class="accordion-header">
                                    <button class="accordion-button collapsed fs-8 fw-bold px-3" type="button"
                                        data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false"
                                        aria-controls="flush-collapseTwo">
                                    As empresas entrarão em contato comigo?
                                    </button>
                                </h2>
                                <div id="flush-collapseTwo" class="accordion-collapse collapse"
                                 data-bs-parent="#accordionFlushExample">
                                    <div class="accordion-body text-dark p-4">
                                    Caso seu currículo seja selecionado por alguma empresa participante do Banco de
                                    Talentos, ela entrará sim em contato com você para agendamento de entrevista e/ou
                                    seleção.
                                    </div>
                                </div>
                            </div>

                            <div class="accordion-item">
                                <h2 class="accordion-header">
                                    <button class="accordion-button collapsed fs-8 fw-bold px-3" type="button"
                                        data-bs-toggle="collapse" data-bs-target="#flush-collapseThree"
                                        aria-expanded="false" aria-controls="flush-collapseThree">
                                    Preciso pagar para registar meu currículo?
                                    </button>
                                </h2>
                                <div id="flush-collapseThree" class="accordion-collapse collapse"
                                 data-bs-parent="#accordionFlushExample">
                                    <div class="accordion-body text-dark p-4">
                                    Não. O cadastro dos currículos e das vagas no Banco de Talentos é totalmente
                                    gratuito.
                                    </div>
                                </div>
                            </div>

                            <div class="accordion-item">
                                <h2 class="accordion-header">
                                    <button class="accordion-button collapsed fs-8 fw-bold px-3" type="button"
                                        data-bs-toggle="collapse" data-bs-target="#flush-collapseFour" aria-expanded="false"
                                        aria-controls="flush-collapseFour">
                                    Posso alterar meus dados cadastrais?
                                    </button>
                                </h2>
                                <div id="flush-collapseFour" class="accordion-collapse collapse"
                                 data-bs-parent="#accordionFlushExample">
                                    <div class="accordion-body text-dark p-4">
                                    Sim. Acesse o endereço bancodetalentos.angra.rj.gov.br, insira seu "Login" e
                                    "Senha". Na
                                    página do Banco de Talentos você já poderá promover a alteração necessária.
                                    </div>
                                </div>
                            </div>

                            <div class="accordion-item">
                                <h2 class="accordion-header">
                                    <button class="accordion-button collapsed fs-8 fw-bold px-3" type="button"
                                        data-bs-toggle="collapse" data-bs-target="#flush-collapseFive" aria-expanded="false"
                                        aria-controls="flush-collapseFive">
                                    Depois de cadastrado, posso mudar meu currículo?
                                    </button>
                                </h2>
                                <div id="flush-collapseFive" class="accordion-collapse collapse"
                                 data-bs-parent="#accordionFlushExample">
                                    <div class="accordion-body text-dark p-4">
                                    Sim. Acesse a sua conta cadastro no Banco de Talentos com seu login e senha atuais,
                                    em
                                    seguida promova a alteração desejada e salve.
                                    </div>
                                </div>
                            </div>

                            <div class="accordion-item">
                                <h2 class="accordion-header">
                                    <button class="accordion-button collapsed fs-8 fw-bold px-3" type="button"
                                        data-bs-toggle="collapse" data-bs-target="#flush-collapseSix" aria-expanded="false"
                                        aria-controls="flush-collapseSix">
                                    Posso acessar o Banco de talentos do Meu celular?
                                    </button>
                                </h2>
                                <div id="flush-collapseSix" class="accordion-collapse collapse"
                                 data-bs-parent="#accordionFlushExample">
                                    <div class="accordion-body text-dark p-4">
                                    O acesso ao Banco de Talentos está disponível com o sistema operacional Android ou
                                    IOS.
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="col-6 d-flex justify-content-end align-items-center">
                        <img src="{{ asset('images/images/faq_image.png') }}" class="w-75" alt="">
                    </div>
                </div>
            </div>
        </section>

        <section class="bg-teal-section">
            <div class="container py-5">
                <div class="row text-center p-80">
                    <div class="col-3 text-white d-flex flex-column align-items-center justify-content-center">
                        <img src="{{ asset('images/icons/users.svg') }}" alt="ícone de pessoas">
                        <p class="fw-bold my-3 fs-5">{{ number_format($counters['candidates'] ?? 0, 0, ',', '.') }}</p>
                        <p>Currículos cadastrados</p>
                    </div>
                    <div class="col-3 text-white d-flex flex-column align-items-center justify-content-center">
                        <img src="{{ asset('images/icons/apartment.svg') }}" alt="ícone de prédio">
                        <p class="fw-bold my-3 fs-5">{{ number_format($counters['companies'] ?? 0, 0, ',', '.') }}</p>
                        <p>Empresas Cadastradas</p>
                    </div>
                    <div class="col-3 text-white d-flex flex-column align-items-center justify-content-center">
                        <img src="{{ asset('images/icons/check.svg') }}" alt="ícone de check">
                        <p class="fw-bold my-3 fs-5">{{ number_format($counters['jobs'] ?? 0, 0, ',', '.') }}</p>
                        <p>Oportunidades Geradas</p>
                    </div>
                    <div class="col-3 text-white d-flex flex-column align-items-center justify-content-center">
                        <img src="{{ asset('images/icons/star.svg') }}" alt="ícone de estrela">
                        <p class="fw-bold my-3 fs-5">{{ number_format($counters['applications'] ?? 0, 0, ',', '.') }}</p>
                        <p>Candidaturas Realizadas</p>
                    </div>
                </div>
            </div>
        </section>
    </main>

@push('scripts')
<script src="{{ asset('js/home.js') }}"></script>
<script src="{{ asset('js/talent-bank/news-loading.js') }}"></script>
@endpush

@endsection