@extends('layouts.employer')

@section('content')
<div class="employer-access-requests-index">
  <!-- Header -->
  <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; flex-wrap: wrap; gap: 1rem;">
    <div>
      <h1 style="font-size: 1.75rem; font-family: var(--font-heading); margin-bottom: 0.25rem;">Talent Access Grants & Sourcing Log</h1>
      <p style="color: var(--text-muted); font-size: 0.95rem; margin: 0;">
        Track candidate authorization status, access validity windows, and stream confidential verified resumes.
      </p>
    </div>

    <div>
      <a href="{{ route('employer.candidates.index') }}" class="btn btn-primary" style="display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.88rem;">
        <i class="fas fa-search"></i>
        <span>Discover Candidates</span>
      </a>
    </div>
  </div>

  @if(session('info'))
    <div style="background: rgba(56, 189, 248, 0.1); border: 1px solid rgba(56, 189, 248, 0.3); color: #38BDF8; padding: 1rem 1.25rem; border-radius: var(--radius-md); margin-bottom: 1.5rem; font-size: 0.92rem; display: flex; align-items: center; gap: 0.75rem;">
      <i class="fas fa-info-circle" style="font-size: 1.1rem;"></i>
      <span>{{ session('info') }}</span>
    </div>
  @endif

  <!-- KPI Metrics -->
  <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.25rem; margin-bottom: 2rem;">
    <div style="background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 1.25rem; border-left: 4px solid #10B981;">
      <div style="font-size: 0.85rem; color: var(--text-muted); margin-bottom: 0.35rem;">Active Grants</div>
      <div style="font-size: 1.75rem; font-weight: 700; color: #10B981; font-family: var(--font-heading);">
        {{ $stats['active'] }}
      </div>
    </div>

    <div style="background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 1.25rem; border-left: 4px solid #F59E0B;">
      <div style="font-size: 0.85rem; color: var(--text-muted); margin-bottom: 0.35rem;">Pending Consent</div>
      <div style="font-size: 1.75rem; font-weight: 700; color: #F59E0B; font-family: var(--font-heading);">
        {{ $stats['pending'] }}
      </div>
    </div>

    <div style="background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 1.25rem; border-left: 4px solid #EF4444;">
      <div style="font-size: 0.85rem; color: var(--text-muted); margin-bottom: 0.35rem;">Declined</div>
      <div style="font-size: 1.75rem; font-weight: 700; color: #EF4444; font-family: var(--font-heading);">
        {{ $stats['rejected'] }}
      </div>
    </div>

    <div style="background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 1.25rem; border-left: 4px solid #38BDF8;">
      <div style="font-size: 0.85rem; color: var(--text-muted); margin-bottom: 0.35rem;">Total Requests Submitted</div>
      <div style="font-size: 1.75rem; font-weight: 700; color: #38BDF8; font-family: var(--font-heading);">
        {{ $stats['total'] }}
      </div>
    </div>
  </div>

  <!-- Requests Table -->
  <div style="background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius-lg); overflow: hidden;">
    @if($requests->isEmpty())
      <div style="padding: 3rem; text-align: center;">
        <i class="fas fa-folder-open" style="font-size: 2.5rem; color: var(--text-muted); margin-bottom: 1rem; display: block;"></i>
        <h3 style="font-size: 1.15rem; font-family: var(--font-heading); margin-bottom: 0.5rem; color: var(--text-primary);">
          No Candidate Access Requests Found
        </h3>
        <p style="color: var(--text-muted); font-size: 0.9rem; margin-bottom: 1.5rem;">
          You haven't requested access to any candidate resumes yet. Browse our verified talent pool to get started.
        </p>
        <a href="{{ route('employer.candidates.index') }}" class="btn btn-primary">
          <i class="fas fa-search"></i> Browse Candidate Pool
        </a>
      </div>
    @else
      <div style="overflow-x: auto;">
        <table class="table" style="width: 100%; border-collapse: collapse; font-size: 0.9rem;">
          <thead>
            <tr style="background: var(--bg-surface); border-bottom: 2px solid var(--border-light); text-align: left; font-size: 0.82rem; text-transform: uppercase; color: var(--text-muted);">
              <th style="padding: 1rem;">Candidate</th>
              <th style="padding: 1rem;">Hiring Purpose</th>
              <th style="padding: 1rem;">Status</th>
              <th style="padding: 1rem;">Requested At</th>
              <th style="padding: 1rem;">Expires At</th>
              <th style="padding: 1rem;">Views</th>
              <th style="padding: 1rem; text-align: right;">Action</th>
            </tr>
          </thead>
          <tbody>
            @foreach($requests as $req)
              @php
                $candidate = $req->candidate;
                $candidateRef = $candidate->registration_id ?: "Candidate #{$candidate->id}";
              @endphp

              <tr style="border-bottom: 1px solid var(--border-light);">
                <td style="padding: 1rem; vertical-align: middle;">
                  <strong style="color: var(--text-primary); display: block;">
                    {{ $req->isActive() ? $candidate->name : $candidateRef }}
                  </strong>
                  <span style="font-family: var(--font-mono, monospace); font-size: 0.8rem; color: #38BDF8;">
                    #{{ $candidateRef }}
                  </span>
                </td>

                <td style="padding: 1rem; vertical-align: middle; max-width: 250px;">
                  <div style="font-size: 0.88rem; color: var(--text-primary); line-height: 1.4;">
                    {{ Str::limit($req->hiring_reason, 70) }}
                  </div>
                  @if($req->vacancy)
                    <span style="font-size: 0.78rem; color: var(--text-muted); display: block; margin-top: 0.25rem;">
                      <i class="fas fa-briefcase"></i> {{ $req->vacancy->title }}
                    </span>
                  @endif
                </td>

                <td style="padding: 1rem; vertical-align: middle;">
                  @if($req->isPending())
                    <span class="badge" style="background: rgba(245, 158, 11, 0.15); color: #F59E0B; border: 1px solid rgba(245, 158, 11, 0.3);">
                      <i class="fas fa-clock"></i> Pending
                    </span>
                  @elseif($req->isActive())
                    <span class="badge" style="background: rgba(16, 185, 129, 0.15); color: #10B981; border: 1px solid rgba(16, 185, 129, 0.3);">
                      <i class="fas fa-check"></i> Approved
                    </span>
                  @elseif($req->isRejected())
                    <span class="badge" style="background: rgba(239, 68, 68, 0.15); color: #EF4444; border: 1px solid rgba(239, 68, 68, 0.3);">
                      <i class="fas fa-times"></i> Declined
                    </span>
                  @elseif($req->isExpired())
                    <span class="badge" style="background: rgba(148, 163, 184, 0.15); color: #94A3B8; border: 1px solid rgba(148, 163, 184, 0.3);">
                      <i class="fas fa-hourglass-end"></i> Expired
                    </span>
                  @else
                    <span class="badge" style="background: rgba(148, 163, 184, 0.15); color: #94A3B8;">
                      {{ ucfirst($req->status) }}
                    </span>
                  @endif
                </td>

                <td style="padding: 1rem; vertical-align: middle; color: var(--text-muted); font-size: 0.85rem;">
                  {{ $req->requested_at?->format('d M Y') }}
                </td>

                <td style="padding: 1rem; vertical-align: middle; font-size: 0.85rem;">
                  @if($req->expires_at)
                    <span style="{{ $req->isExpired() ? 'color: #EF4444;' : 'color: #10B981; font-weight: 600;' }}">
                      {{ $req->expires_at->format('d M Y') }}
                    </span>
                  @else
                    <span style="color: var(--text-muted);">—</span>
                  @endif
                </td>

                <td style="padding: 1rem; vertical-align: middle; font-size: 0.85rem; color: var(--text-muted);">
                  <i class="fas fa-eye"></i> {{ $req->views_count }}
                </td>

                <td style="padding: 1rem; vertical-align: middle; text-align: right;">
                  @if($req->isActive())
                    <a href="{{ route('employer.candidates.resume-stream', $candidate->id) }}" class="btn btn-primary btn-sm" style="display: inline-flex; align-items: center; gap: 0.35rem;">
                      <i class="fas fa-eye"></i> Stream Resume
                    </a>
                  @else
                    <a href="{{ route('employer.candidates.show', $candidate->id) }}" class="btn btn-outline btn-sm">
                      View Profile
                    </a>
                  @endif
                </td>
              </tr>
            @endforeach
          </tbody>
        </table>
      </div>

      <div style="padding: 1.25rem;">
        {{ $requests->links() }}
      </div>
    @endif
  </div>
</div>
@endsection