@extends('layouts.app')

@section('content')
<main id="mainContent">
  <!-- Header Banner -->
  <header class="page-header" style="padding: 3rem 0 2rem; background: var(--bg-surface); border-bottom: 1px solid var(--border-light);">
    <div class="container">
      <div style="display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 1.5rem;" class="reveal">
        <div>
          <nav class="breadcrumbs" aria-label="Breadcrumb" style="margin-bottom: 0.5rem;">
            <a href="{{ route('home') }}">Home</a>
            <i class="fas fa-chevron-right" style="font-size: 0.7rem;"></i>
            <a href="{{ route('jobseeker.dashboard') }}">Candidate Portal</a>
            <i class="fas fa-chevron-right" style="font-size: 0.7rem;"></i>
            <span>My Applications</span>
          </nav>
          <h1 style="font-size: 2rem; font-family: var(--font-heading); font-weight: 700; color: var(--text-heading); margin-bottom: 0.35rem;">
            My Recruitment Applications
          </h1>
          <p style="color: var(--text-light); font-size: 0.95rem; margin: 0;">
            Track real-time candidate screening, shortlist notifications, and scheduled interview appointments.
          </p>
        </div>

        <div style="display: flex; gap: 0.75rem; align-items: center;">
          <a href="{{ route('jobs.index') }}" class="btn btn-primary">
            <i class="fas fa-search"></i> Search More Vacancies
          </a>
          <a href="{{ route('jobseeker.dashboard') }}" class="btn btn-outline">
            <i class="fas fa-arrow-left"></i> Dashboard
          </a>
        </div>
      </div>
    </div>
  </header>

  <!-- Applications List Table Section -->
  <section class="section" style="padding: 2.5rem 0;">
    <div class="container">
      @if(session('success'))
        <div style="background: rgba(16, 185, 129, 0.1); border: 1px solid var(--success); color: var(--success); padding: 1rem 1.25rem; border-radius: var(--radius-md); margin-bottom: 2rem;">
          <i class="fas fa-check-circle"></i> {{ session('success') }}
        </div>
      @endif

      @if(session('error'))
        <div style="background: rgba(239, 68, 68, 0.1); border: 1px solid #ef4444; color: #ef4444; padding: 1rem 1.25rem; border-radius: var(--radius-md); margin-bottom: 2rem;">
          <i class="fas fa-exclamation-circle"></i> {{ session('error') }}
        </div>
      @endif

      <div class="card reveal" style="background: var(--bg-surface); border: 1px solid var(--border-light); border-radius: var(--radius-xl); overflow: hidden; padding: 0;">
        <div style="overflow-x: auto;">
          <table style="width: 100%; border-collapse: collapse; text-align: left; font-size: 0.92rem;">
            <thead>
              <tr style="background: var(--bg-card); border-bottom: 1px solid var(--border-light); color: var(--text-muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.5px;">
                <th style="padding: 1rem 1.25rem;">Reference</th>
                <th style="padding: 1rem 1.25rem;">Role &amp; Organization</th>
                <th style="padding: 1rem 1.25rem;">District / Location</th>
                <th style="padding: 1rem 1.25rem;">Submitted Date</th>
                <th style="padding: 1rem 1.25rem;">Recruitment Status</th>
                <th style="padding: 1rem 1.25rem; text-align: right;">Action</th>
              </tr>
            </thead>
            <tbody>
              @forelse($applications as $app)
                <tr style="border-bottom: 1px solid var(--border-light); transition: background 0.2s ease;">
                  <td style="padding: 1rem 1.25rem; font-family: monospace; font-weight: 600; color: var(--accent);">
                    #ZH-APP-{{ $app->id }}
                  </td>
                  <td style="padding: 1rem 1.25rem;">
                    <strong style="color: var(--text-heading); display: block; font-size: 0.95rem;">
                      {{ $app->applied_role }}
                    </strong>
                    <span style="color: var(--text-light); font-size: 0.82rem;">
                      {{ $app->job?->employer?->name ?? 'Zhelhire Corporate Client' }}
                    </span>
                  </td>
                  <td style="padding: 1rem 1.25rem; color: var(--text-body);">
                    <i class="fas fa-map-marker-alt" style="color: var(--text-light); font-size: 0.85rem;"></i>
                    {{ $app->current_location ?: ($app->job?->district ?: 'Maharashtra') }}
                  </td>
                  <td style="padding: 1rem 1.25rem; color: var(--text-light); font-size: 0.88rem;">
                    {{ $app->created_at->format('d M Y, h:i A') }}
                  </td>
                  <td style="padding: 1rem 1.25rem;">
                    <span class="badge {{ $app->statusBadgeClass() }}" style="font-size: 0.82rem; padding: 0.35rem 0.75rem;">
                      {{ $app->statusLabel() }}
                    </span>
                    @if($app->status === 'interview_scheduled' && $app->interview_scheduled_at)
                      <span style="display: block; font-size: 0.78rem; color: var(--accent); margin-top: 0.25rem;">
                        <i class="fas fa-calendar-alt"></i> {{ $app->interview_scheduled_at->format('d M, h:i A') }}
                      </span>
                    @endif
                  </td>
                  <td style="padding: 1rem 1.25rem; text-align: right;">
                    <div style="display: flex; gap: 0.5rem; justify-content: flex-end;">
                      <a href="{{ route('jobseeker.applications.show', $app->id) }}" class="btn btn-outline btn-sm" style="font-size: 0.8rem; padding: 0.35rem 0.75rem;">
                        <i class="fas fa-stream"></i> Timeline
                      </a>
                    </div>
                  </td>
                </tr>
              @empty
                <tr>
                  <td colspan="6" style="padding: 3.5rem 1rem; text-align: center; color: var(--text-light);">
                    <i class="fas fa-file-invoice" style="font-size: 3rem; color: var(--border-light); margin-bottom: 1rem; display: block;"></i>
                    <h3 style="font-size: 1.2rem; color: var(--text-heading); margin-bottom: 0.5rem;">No Applications Submitted Yet</h3>
                    <p style="font-size: 0.9rem; max-width: 450px; margin: 0 auto 1.5rem auto;">
                      Browse our verified openings and apply in 1-click using your verified candidate profile.
                    </p>
                    <a href="{{ route('jobs.index') }}" class="btn btn-primary btn-sm">
                      <i class="fas fa-search"></i> Explore Open Vacancies
                    </a>
                  </td>
                </tr>
              @endforelse
            </tbody>
          </table>
        </div>
      </div>

      <!-- Pagination -->
      <div style="margin-top: 2rem; display: flex; justify-content: center;">
        {{ $applications->links() }}
      </div>
    </div>
  </section>
</main>
@endsection