@extends('layouts.app')
@section('title','Jobs in Africa — Nabola')
@push('styles')
<style>
.job-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:1.25rem;transition:.3s;cursor:pointer;text-decoration:none;display:block;color:inherit;}
.job-card:hover{border-color:rgba(76,175,80,.3);background:rgba(76,175,80,.03);transform:translateY(-2px);}
.job-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1rem;}
.type-badge{display:inline-block;padding:.2rem .65rem;border-radius:20px;font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.3px;}
.filter-bar{display:flex;gap:.65rem;flex-wrap:wrap;margin-bottom:1.5rem;align-items:center;}
.filter-bar input,.filter-bar select{background:rgba(255,255,255,.05);border:1px solid var(--border);border-radius:10px;padding:.5rem .85rem;color:var(--text);font-size:.82rem;outline:none;}
.filter-bar input:focus,.filter-bar select:focus{border-color:var(--gl);}
.filter-bar select option{background:#0d1520;}
</style>
@endpush
@section('content')
<div class="page-header">
  <h1>💼 Jobs in Africa</h1>
  <p>Find recycling, tech, and field opportunities — powered by Nabola</p>
</div>

{{-- Hero banner --}}
<div style="background:linear-gradient(135deg,#071a0d,#0f2318,#1a3a22);border:1px solid rgba(76,175,80,.2);border-radius:20px;padding:2rem;margin-bottom:1.75rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;">
  <div>
    <div style="font-size:1.3rem;font-weight:900;margin-bottom:.35rem;">Turn Recycling Into a Career 🌍</div>
    <div style="font-size:.875rem;color:rgba(255,255,255,.5);max-width:500px;">Nabola connects unemployed Africans with jobs in the green economy — from field collectors to tech roles. Some jobs even pay in Nabola Coins.</div>
  </div>
  @auth
  <a href="{{ route('jobs.my-applications') }}" class="btn btn-outline btn-sm"><i class="fas fa-file-alt"></i> My Applications</a>
  @endauth
</div>

{{-- Filters --}}
<form method="GET" class="filter-bar">
  <input type="text" name="search" value="{{ request('search') }}" placeholder="Search jobs..." style="flex:1;min-width:180px;">
  <select name="category">
    <option value="">All Categories</option>
    @foreach(['recycling','tech','operations','marketing','field','support','finance'] as $cat)
    <option value="{{ $cat }}" {{ request('category') === $cat ? 'selected' : '' }}>{{ \App\Models\JobListing::categoryLabel($cat) }}</option>
    @endforeach
  </select>
  <select name="type">
    <option value="">All Types</option>
    @foreach(['full_time','part_time','contract','volunteer','internship'] as $t)
    <option value="{{ $t }}" {{ request('type') === $t ? 'selected' : '' }}>{{ \App\Models\JobListing::typeLabel($t) }}</option>
    @endforeach
  </select>
  <input type="text" name="location" value="{{ request('location') }}" placeholder="City or state...">
  <button type="submit" class="btn btn-green btn-sm"><i class="fas fa-search"></i> Search</button>
  @if(request()->hasAny(['search','category','type','location']))
  <a href="{{ route('jobs.index') }}" class="btn btn-outline btn-sm"><i class="fas fa-times"></i> Clear</a>
  @endif
</form>

@if(session('success'))<div class="alert alert-success"><i class="fas fa-check-circle"></i> {{ session('success') }}</div>@endif
@if(session('error'))<div class="alert alert-error"><i class="fas fa-exclamation-circle"></i> {{ session('error') }}</div>@endif

<div class="job-grid">
  @forelse($jobs as $job)
  <a href="{{ route('jobs.show', $job) }}" class="job-card">
    <div style="display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:.75rem;flex-wrap:wrap;gap:.5rem;">
      <div>
        @if($job->is_nabola_internal)
        <span style="background:rgba(76,175,80,.15);color:var(--gl);border:1px solid rgba(76,175,80,.25);border-radius:20px;padding:.15rem .55rem;font-size:.65rem;font-weight:800;margin-bottom:.35rem;display:inline-block;">🌿 Nabola</span>
        @endif
        <div style="font-weight:800;font-size:.95rem;line-height:1.3;">{{ $job->title }}</div>
      </div>
      @if(in_array($job->id, $myApps))
      <span style="background:rgba(52,211,153,.1);color:#34d399;border-radius:20px;padding:.15rem .55rem;font-size:.65rem;font-weight:800;">✓ Applied</span>
      @endif
    </div>
    <div style="display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.75rem;">
      @php
        $typeColors = ['full_time'=>'#34d399','part_time'=>'#60a5fa','contract'=>'#fbbf24','volunteer'=>'#a78bfa','internship'=>'#f472b6'];
        $tc = $typeColors[$job->type] ?? '#9ca3af';
      @endphp
      <span class="type-badge" style="background:{{ $tc }}22;color:{{ $tc }};border:1px solid {{ $tc }}44;">{{ \App\Models\JobListing::typeLabel($job->type) }}</span>
      <span class="type-badge" style="background:rgba(99,102,241,.1);color:#a5b4fc;border:1px solid rgba(99,102,241,.2);">{{ \App\Models\JobListing::categoryLabel($job->category) }}</span>
      @if($job->pays_in_nc)
      <span class="type-badge" style="background:rgba(251,191,36,.1);color:#fbbf24;border:1px solid rgba(251,191,36,.2);">🪙 Pays in NC</span>
      @endif
    </div>
    <div style="font-size:.82rem;color:rgba(255,255,255,.6);margin-bottom:.75rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;">
      {{ strip_tags($job->description) }}
    </div>
    <div style="display:flex;justify-content:space-between;align-items:center;font-size:.75rem;color:var(--muted);">
      <span><i class="fas fa-map-marker-alt" style="color:var(--gl);"></i> {{ $job->location }}{{ $job->state ? ', '.$job->state : '' }}</span>
      <span>
        @if($job->salary_range)<strong style="color:#fbbf24;">{{ $job->salary_range }}</strong>@endif
        · {{ $job->applications_count }} applied
      </span>
    </div>
  </a>
  @empty
  <div style="grid-column:1/-1;text-align:center;padding:3rem;color:var(--muted);">
    <div style="font-size:3rem;margin-bottom:1rem;">💼</div>
    <div style="font-size:1rem;font-weight:700;margin-bottom:.5rem;">No jobs found</div>
    <div style="font-size:.875rem;">Try different filters or check back soon.</div>
  </div>
  @endforelse
</div>

<div style="margin-top:1.5rem;">{{ $jobs->links() }}</div>
@endsection