@extends('layouts.jobseeker')

@section('title', 'My Internships & Skill Credentials | Candidate Portal')

@section('content')
<div class="jobseeker-internships-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;">Internships & Skill Credentials</h1>
      <p style="color: var(--text-muted); font-size: 0.95rem; margin: 0;">Download official appointment letters and verifiable skill development completion certificates.</p>
    </div>
  </div>

  @if($internships->isEmpty())
    <div style="background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 4rem 2rem; text-align: center;">
      <div style="width: 64px; height: 64px; border-radius: 50%; background: var(--bg-surface); color: var(--text-muted); display: inline-flex; align-items: center; justify-content: center; font-size: 1.75rem; margin-bottom: 1rem;">
        <i class="fas fa-certificate"></i>
      </div>
      <h3 style="font-size: 1.25rem; margin-bottom: 0.5rem;">No internship records issued yet</h3>
      <p style="color: var(--text-muted); font-size: 0.9rem; max-width: 480px; margin: 0 auto 1.5rem;">As you participate in government apprenticeship schemes and Zhelhire skill development cohorts, your verified credentials will appear here.</p>
      <a href="{{ route('jobseeker.matching-jobs') }}" class="btn btn-primary btn-sm">
        <i class="fas fa-bolt"></i> Explore Matched Apprenticeships
      </a>
    </div>
  @else
    <div style="display: flex; flex-direction: column; gap: 1.5rem;">
      @foreach($internships as $item)
        <div style="background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 2rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1.5rem;">
          <div style="flex: 1; min-width: 300px;">
            <div style="display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem;">
              <span class="badge" style="background: rgba(16, 185, 129, 0.15); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.3); font-size: 0.78rem;">
                <i class="fas fa-check-circle"></i> {{ ucfirst($item->status) }}
              </span>
              <span style="font-family: var(--font-mono, monospace); font-size: 0.82rem; color: #38bdf8; font-weight: 700;">
                #{{ $item->certificate_number }}
              </span>
            </div>

            <h3 style="font-size: 1.35rem; font-family: var(--font-heading); margin: 0 0 0.5rem 0;">
              {{ $item->title }}
            </h3>

            <div style="font-size: 0.88rem; color: var(--text-muted); display: flex; flex-direction: column; gap: 0.25rem;">
              <span><i class="fas fa-building" style="width: 16px;"></i> {{ $item->organization }}</span>
              <span><i class="fas fa-calendar" style="width: 16px;"></i> {{ $item->start_date->format('d M Y') }} – {{ $item->end_date->format('d M Y') }} ({{ $item->durationFormatted() }})</span>
              <span><i class="fas fa-user-tie" style="width: 16px;"></i> Mentor / Director: {{ $item->mentor_name }}</span>
              <span><i class="fas fa-award" style="width: 16px; color: #f59e0b;"></i> Performance: <strong>{{ $item->performance_rating }}</strong></span>
            </div>
          </div>

          <!-- Download Action Buttons -->
          <div style="display: flex; flex-direction: column; gap: 0.5rem; min-width: 220px;">
            <a href="{{ route('jobseeker.internships.certificate', $item->id) }}" class="btn btn-primary" style="display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-size: 0.88rem;">
              <i class="fas fa-award"></i> Download Certificate (PDF)
            </a>
            <a href="{{ route('jobseeker.internships.letter', $item->id) }}" class="btn btn-outline" style="display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-size: 0.88rem;">
              <i class="fas fa-file-contract"></i> Appointment Letter (PDF)
            </a>
            <a href="{{ route('internship.verify', $item->certificate_number) }}" target="_blank" class="btn btn-outline btn-sm" style="display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; font-size: 0.8rem; color: var(--text-muted);">
              <i class="fas fa-qrcode"></i> Public QR Verification
            </a>
          </div>
        </div>
      @endforeach
    </div>
  @endif
</div>
@endsection