@extends('layouts.app')
@section('title','My Job Applications')
@section('content')
<div class="page-header">
  <h1>My Applications</h1>
  <p>Track all your job applications</p>
</div>

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

@php
  $hired      = $applications->getCollection()->where('status','hired');
  $shortlisted= $applications->getCollection()->where('status','shortlisted');
  $others     = $applications->getCollection()->whereNotIn('status',['hired','shortlisted']);
@endphp

{{-- Hired jobs — prominent section --}}
@if($hired->count())
<div style="margin-bottom:1.5rem;">
  <div style="font-size:.78rem;font-weight:800;color:#34d399;text-transform:uppercase;letter-spacing:.5px;margin-bottom:.75rem;"><i class="fas fa-trophy"></i> Hired Positions</div>
  @foreach($hired as $app)
  <div style="background:linear-gradient(135deg,rgba(52,211,153,.1),rgba(16,185,129,.04));border:2px solid rgba(52,211,153,.35);border-radius:16px;padding:1.5rem;margin-bottom:.85rem;">
    <div style="display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:1rem;margin-bottom:1rem;">
      <div>
        <div style="font-size:.68rem;color:#34d399;font-weight:800;text-transform:uppercase;letter-spacing:.5px;margin-bottom:.3rem;">Hired</div>
        <div style="font-weight:900;font-size:1.1rem;color:#fff;">{{ $app->job->title }}</div>
        <div style="font-size:.82rem;color:rgba(255,255,255,.5);margin-top:.25rem;">
          <i class="fas fa-map-marker-alt" style="color:#34d399;"></i> {{ $app->job->location }}
          &nbsp;·&nbsp; {{ \App\Models\JobListing::typeLabel($app->job->type) }}
          @if($app->job->salary_range) &nbsp;·&nbsp; <strong style="color:#fbbf24;">{{ $app->job->salary_range }}</strong>@endif
        </div>
      </div>
      <span style="background:rgba(52,211,153,.15);color:#34d399;border:1px solid rgba(52,211,153,.3);border-radius:20px;padding:.3rem .85rem;font-size:.78rem;font-weight:800;">Hired</span>
    </div>
    @if($app->admin_notes)
    <div style="background:rgba(52,211,153,.06);border:1px solid rgba(52,211,153,.15);border-radius:10px;padding:.75rem 1rem;margin-bottom:1rem;font-size:.82rem;color:rgba(255,255,255,.7);">
      <i class="fas fa-comment" style="color:#34d399;"></i> <strong>Message from employer:</strong> {{ $app->admin_notes }}
    </div>
    @endif
    <div style="background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:10px;padding:.85rem 1rem;margin-bottom:1rem;">
      <div style="font-size:.75rem;font-weight:700;color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:.5px;margin-bottom:.5rem;">Next Steps</div>
      <div style="font-size:.82rem;color:rgba(255,255,255,.65);line-height:1.8;">
        <div><i class="fas fa-check" style="color:#34d399;width:16px;"></i> Check your email for onboarding details</div>
        <div><i class="fas fa-check" style="color:#34d399;width:16px;"></i> Contact the employer to confirm your start date</div>
        @if($app->job->is_nabola_internal)
        <div><i class="fas fa-check" style="color:#34d399;width:16px;"></i> Complete your Nabola profile if not done</div>
        @endif
      </div>
    </div>
    <div style="display:flex;gap:.65rem;flex-wrap:wrap;">
      @if($app->job->apply_email)
      <a href="mailto:{{ $app->job->apply_email }}" class="btn btn-green btn-sm"><i class="fas fa-envelope"></i> Email Employer</a>
      @endif
      <a href="{{ route('jobs.show', $app->job) }}" class="btn btn-outline btn-sm"><i class="fas fa-eye"></i> View Job</a>
    </div>
  </div>
  @endforeach
</div>
@endif

{{-- Shortlisted --}}
@if($shortlisted->count())
<div style="margin-bottom:1.5rem;">
  <div style="font-size:.78rem;font-weight:800;color:#fbbf24;text-transform:uppercase;letter-spacing:.5px;margin-bottom:.75rem;"><i class="fas fa-star"></i> Shortlisted</div>
  @foreach($shortlisted as $app)
  <div style="background:rgba(251,191,36,.06);border:1px solid rgba(251,191,36,.25);border-radius:14px;padding:1.1rem 1.25rem;margin-bottom:.65rem;display:flex;align-items:center;gap:1rem;flex-wrap:wrap;">
    <div style="flex:1;min-width:180px;">
      <div style="font-weight:700;font-size:.9rem;">{{ $app->job->title }}</div>
      <div style="font-size:.75rem;color:rgba(255,255,255,.4);margin-top:.15rem;">{{ $app->job->location }} · Applied {{ $app->created_at->diffForHumans() }}</div>
      @if($app->admin_notes)<div style="font-size:.75rem;color:#fbbf24;margin-top:.25rem;"><i class="fas fa-comment"></i> {{ $app->admin_notes }}</div>@endif
    </div>
    <span style="background:rgba(251,191,36,.15);color:#fbbf24;border:1px solid rgba(251,191,36,.3);border-radius:20px;padding:.25rem .75rem;font-size:.72rem;font-weight:800;white-space:nowrap;">Shortlisted</span>
  </div>
  @endforeach
</div>
@endif

{{-- All other applications --}}
@if($others->count())
<div style="font-size:.78rem;font-weight:800;color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:.5px;margin-bottom:.75rem;"><i class="fas fa-list"></i> All Applications</div>
@endif

<div class="card">
  @forelse($others as $app)
  <div style="display:flex;align-items:center;gap:1rem;padding:.85rem 0;border-bottom:1px solid rgba(255,255,255,.04);flex-wrap:wrap;">
    <div style="flex:1;min-width:200px;">
      <a href="{{ route('jobs.show', $app->job) }}" style="font-weight:700;font-size:.9rem;color:#fff;text-decoration:none;">{{ $app->job->title }}</a>
      <div style="font-size:.75rem;color:var(--muted);margin-top:.15rem;">
        <i class="fas fa-map-marker-alt" style="color:var(--gl);"></i> {{ $app->job->location }}
        &nbsp;·&nbsp; Applied {{ $app->created_at->diffForHumans() }}
      </div>
      @if($app->admin_notes)<div style="font-size:.72rem;color:rgba(255,255,255,.4);margin-top:.2rem;font-style:italic;">{{ $app->admin_notes }}</div>@endif
    </div>
    @php
      $statusStyles = [
        'pending'  => ['bg'=>'rgba(96,165,250,.15)','color'=>'#60a5fa','icon'=>'clock','label'=>'Pending Review'],
        'reviewed' => ['bg'=>'rgba(165,180,252,.15)','color'=>'#a5b4fc','icon'=>'eye','label'=>'Reviewed'],
        'rejected' => ['bg'=>'rgba(239,68,68,.12)','color'=>'#f87171','icon'=>'times-circle','label'=>'Not Selected'],
      ];
      $s = $statusStyles[$app->status] ?? ['bg'=>'rgba(255,255,255,.08)','color'=>'rgba(255,255,255,.5)','icon'=>'circle','label'=>ucfirst($app->status)];
    @endphp
    <span style="background:{{ $s['bg'] }};color:{{ $s['color'] }};border-radius:20px;padding:.25rem .75rem;font-size:.72rem;font-weight:700;white-space:nowrap;">
      <i class="fas fa-{{ $s['icon'] }}"></i> {{ $s['label'] }}
    </span>
  </div>
  @empty
  @if(!$hired->count() && !$shortlisted->count())
  <div style="text-align:center;padding:3rem;color:var(--muted);">
    <div style="font-size:2.5rem;margin-bottom:1rem;">📋</div>
    <div style="font-weight:700;margin-bottom:.5rem;">No applications yet</div>
    <a href="{{ route('jobs.index') }}" class="btn btn-green btn-sm"><i class="fas fa-search"></i> Browse Jobs</a>
  </div>
  @endif
  @endforelse
</div>

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