@extends('layouts.app')

@section('title', 'Vagas - Banco de Talentos')
@section('meta_description', 'Confira as vagas de emprego disponíveis no Banco de Talentos de Angra dos Reis.')

@section('content')
<section class="vagas-list">

  <div class="container py-4">

    <!-- Barra de pesquisa -->
    <form action="{{ route('vagas') }}" method="GET">

      {{-- Preserva o parâmetro todas_vagas dentro do form quando ativo --}}
      @if(request()->boolean('todas_vagas'))
        <input type="hidden" name="todas_vagas" value="1">
      @endif

      <div class="search-bar mb-4">
        <div class="row g-3 align-items-center">
          <div class="col-md-4">
            <input type="text" class="form-control" name="descricao" placeholder="Qual vaga você procura?" value="{{ request('descricao') }}">
          </div>
          <div class="col-md-3">
            <select class="form-select" name="occupation_id">
              <option value="">Ocupação</option>
              @foreach($filterOptions['occupations'] as $o)
                <option value="{{ $o->id }}" @selected((string) request('occupation_id') === (string) $o->id)>{{ $o->name }}</option>
              @endforeach
            </select>
          </div>
          <div class="col-md-3">
            <select class="form-select" name="neighbourhood_id">
              <option value="">Bairro</option>
              @foreach($filterOptions['neighbourhoods'] as $n)
                <option value="{{ $n->id }}" @selected((string) request('neighbourhood_id') === (string) $n->id)>{{ $n->name }}</option>
              @endforeach
            </select>
          </div>
          <div class="col-md-2">
            <select class="form-select" name="contract_type_id">
              <option value="">Tipo de contrato</option>
              @foreach($filterOptions['contract_types'] as $ct)
                <option value="{{ $ct->id }}" @selected((string) request('contract_type_id') === (string) $ct->id)>{{ $ct->name }}</option>
              @endforeach
            </select>
          </div>
          <div class="col-md-2">
            <select class="form-select" name="perPage">
              @foreach([12, 24, 48] as $pp)
                <option value="{{ $pp }}" @selected((int) request('perPage', 12) === $pp)>{{ $pp }} por página</option>
              @endforeach
            </select>
          </div>
          <div class="col-md-2 d-flex gap-2">
            <button type="submit" class="btn btn-search w-100">
              <i class="bi bi-search me-1"></i> Pesquisar
            </button>
            <a href="{{ route('vagas') }}" class="btn btn-search-clear w-100">
              <i class="bi bi-x-lg me-1"></i> Limpar
            </a>
          </div>
        </div>
      </div>

      <div class="row">
        <!-- Filtros -->
        <div class="col-lg-3 mb-4">
          <div class="filters">
            <h5 class="mb-3 primary-purple">Filtros:</h5>

            <h6>Modalidade</h6>
            @foreach($filterOptions['modalities'] as $m)
            <label><input type="checkbox" name="modality_id[]" value="{{ $m->id }}" @checked(in_array($m->id, (array) request('modality_id', [])))> {{ $m->name }}</label>
            @endforeach

            <hr>

            <h6>Nível de experiência</h6>
            @foreach($filterOptions['expertise_levels'] as $el)
            <label><input type="checkbox" name="expertise_level_id[]" value="{{ $el->id }}" @checked(in_array($el->id, (array) request('expertise_level_id', [])))> {{ $el->name }}</label>
            @endforeach

            <hr>

            <h6>Carga horária</h6>
            @foreach($filterOptions['workloads'] as $w)
            <label><input type="checkbox" name="workload_id[]" value="{{ $w->id }}" @checked(in_array($w->id, (array) request('workload_id', [])))> {{ $w->name }}</label>
            @endforeach

            <hr>

            <h6>Salário</h6>
            @foreach($filterOptions['salary_ranges'] as $sr)
            <label><input type="radio" name="salary_range_id" value="{{ $sr->id }}" @checked(request('salary_range_id') == $sr->id)> {{ $sr->name }}</label>
            @endforeach

            <hr>

            <h6>Contrato</h6>
            @foreach($filterOptions['contract_types'] as $ct)
            <label><input type="checkbox" name="contract_type_filter[]" value="{{ $ct->id }}" @checked(in_array($ct->id, (array) request('contract_type_filter', [])))> {{ $ct->name }}</label>
            @endforeach
          </div>
        </div>

        <!-- Lista de vagas -->
        <div class="col-lg-9">

          {{-- Banner de compatibilidade: filtro ativo --}}
          @if($compatibilityFilter ?? false)
            <div class="vagas-compatibility-banner vagas-compatibility-banner--active mb-3" role="status">
              <div class="vagas-compatibility-banner__info">
                <i class="bi bi-stars" aria-hidden="true"></i>
                <div>
                  <span class="vagas-compatibility-banner__label">Mostrando vagas compatíveis com sua área de interesse:</span>
                  <strong class="vagas-compatibility-banner__areas">{{ ($wantedOccupationNames ?? collect())->implode(', ') }}</strong>
                </div>
              </div>
              <a href="{{ route('vagas', array_merge(request()->except(['todas_vagas', 'page']), ['todas_vagas' => 1])) }}"
                 class="vagas-compatibility-banner__btn">
                <i class="bi bi-grid-3x3-gap me-1" aria-hidden="true"></i>Ver todas as vagas
              </a>
            </div>
          @endif

          {{-- Banner: exibindo todas as vagas (override do filtro de compatibilidade) --}}
          @if($showingAllOverride ?? false)
            <div class="vagas-compatibility-banner vagas-compatibility-banner--override mb-3" role="status">
              <div class="vagas-compatibility-banner__info">
                <i class="bi bi-grid-3x3-gap" aria-hidden="true"></i>
                <div>
                  <span class="vagas-compatibility-banner__label">Exibindo todas as vagas disponíveis.</span>
                  <strong class="vagas-compatibility-banner__areas">Sua área de interesse: {{ ($wantedOccupationNames ?? collect())->implode(', ') }}</strong>
                </div>
              </div>
              <a href="{{ route('vagas', request()->except(['todas_vagas', 'page'])) }}"
                 class="vagas-compatibility-banner__btn vagas-compatibility-banner__btn--override">
                <i class="bi bi-stars me-1" aria-hidden="true"></i>Ver vagas compatíveis
              </a>
            </div>
          @endif

          {{-- Aviso: candidato logado sem área de interesse cadastrada --}}
          @if($candidateHasNoInterests ?? false)
            <div class="vagas-compatibility-banner vagas-compatibility-banner--hint mb-3" role="status">
              <div class="vagas-compatibility-banner__info">
                <i class="bi bi-lightbulb" aria-hidden="true"></i>
                <span>Complete sua área de interesse para receber vagas mais compatíveis com seu perfil.</span>
              </div>
              <a href="{{ route('talent-bank.candidate.edit') }}" class="vagas-compatibility-banner__btn vagas-compatibility-banner__btn--hint">
                <i class="bi bi-pencil me-1" aria-hidden="true"></i>Completar perfil
              </a>
            </div>
          @endif

          <h5 class="mb-4 primary-purple">Vagas encontradas: {{ $jobs->total() }}</h5>

          @forelse($jobs as $job)
          @php
              $applicationStatuses = $applicationStatuses ?? [];
              $myApplicationStatus = $applicationStatuses[$job->id] ?? null;
              $enrolled = \App\Support\TalentBank\JobApplicationStatus::ENROLLED;
          @endphp
          <div class="job-card">
            <div class="d-flex align-items-center">
              <div class="job-icon"><i class="bi bi-briefcase"></i></div>
              <a href="{{ route('vagas.show', $job->id) }}" class="job-info job-info--link text-decoration-none text-reset">
                <h5>{{ optional($job->occupation)->name ?? 'Vaga' }}</h5>
                <p class="job-company-name">
                  <i class="bi bi-building" aria-hidden="true"></i>
                  @if($job->hide_company)
                    <em>Empresa confidencial</em>
                  @else
                    {{ optional($job->company)->trading_name ?? optional($job->company)->corporate_name ?? 'Empresa não informada' }}
                  @endif
                </p>
                @if($job->description)
                  <p class="mb-0">{{ \Illuminate\Support\Str::limit($job->description, 100) }}</p>
                @endif
              </a>
            </div>
            <div class="d-flex align-items-center gap-3 flex-wrap justify-content-end">
              @if($job->modality)
              <span class="tag">{{ $job->modality->name }}</span>
              @endif
              @if($myApplicationStatus !== null)
              <span
                  class="job-application-status {{ $myApplicationStatus === $enrolled ? 'job-application-status--enrolled' : 'job-application-status--pipeline' }}"
                  role="status">
                  @if($myApplicationStatus === $enrolled)
                      <i class="bi bi-check2-circle job-application-status__icon" aria-hidden="true"></i>
                  @else
                      <i class="bi bi-clipboard2-pulse job-application-status__icon" aria-hidden="true"></i>
                  @endif
                  <span class="job-application-status__label">{{ \App\Support\TalentBank\JobApplicationStatus::label($myApplicationStatus) }}</span>
              </span>
              @else
              <a class="btn btn-details text-white text-decoration-none" href="{{ route('vagas.show', $job->id) }}">
                Detalhes da vaga
              </a>
              @endif
            </div>
          </div>
          @empty

            {{-- Empty state --}}
            @if($compatibilityFilter ?? false)
              {{-- Sem vagas compatíveis com área de interesse --}}
              <div class="vagas-empty-state">
                <div class="vagas-empty-state__icon">
                  <i class="bi bi-search-heart" aria-hidden="true"></i>
                </div>
                <h5 class="vagas-empty-state__title">Nenhuma vaga compatível encontrada</h5>
                <p class="vagas-empty-state__text">
                  No momento não há vagas abertas para sua área de interesse.
                  Que tal explorar todas as oportunidades disponíveis?
                </p>
                <div class="vagas-empty-state__actions">
                  <a href="{{ route('vagas', array_merge(request()->except(['todas_vagas', 'page']), ['todas_vagas' => 1])) }}"
                     class="btn btn-manus-purple rounded-pill px-4">
                    <i class="bi bi-grid-3x3-gap me-2"></i>Ver todas as vagas
                  </a>
                  <a href="{{ route('talent-bank.candidate.edit') }}"
                     class="btn btn-outline-manus-purple rounded-pill px-4">
                    <i class="bi bi-pencil me-2"></i>Atualizar área de interesse
                  </a>
                </div>
              </div>
            @else
              <div class="vagas-empty-state">
                <div class="vagas-empty-state__icon">
                  <i class="bi bi-briefcase" aria-hidden="true"></i>
                </div>
                <h5 class="vagas-empty-state__title">Nenhuma vaga encontrada</h5>
                <p class="vagas-empty-state__text">Tente ajustar os filtros para encontrar mais oportunidades.</p>
                <a href="{{ route('vagas') }}" class="btn btn-manus-purple rounded-pill px-4">
                  <i class="bi bi-x-lg me-2"></i>Limpar filtros
                </a>
              </div>
            @endif

          @endforelse

          {{-- Paginação --}}
          @if($jobs->total() > 0)
          <div class="mt-4">
            <div class="pagination-summary">
              Mostrando {{ $jobs->firstItem() }}–{{ $jobs->lastItem() }} de {{ $jobs->total() }} vagas
            </div>
            {{ $jobs->links() }}
          </div>
          @endif

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

</section>
@endsection