{{--
    My Vault — earned certificates + past session history.
    From EmployeeVaultController@index: $certificates, $sessionHistory
--}}
@extends('layouts.app')
@section('title', 'My Vault')
@section('content')

  @include('employee._flash')

  {{-- Due for renewal --}}
  @if($renewals->isNotEmpty())
    <div class="rounded-xl border border-gold/40 bg-gold/10 p-5 mb-stack-lg">
      <div class="flex items-center gap-2 mb-3">
        <span class="material-symbols-outlined text-[#8a6d3b]">event_repeat</span>
        <h3 class="text-headline-md font-headline-md text-on-surface">Due for Renewal</h3>
        <span class="text-label-md font-label-md px-2.5 py-1 rounded-full bg-gold/20 text-on-surface font-bold">{{ $renewals->count() }}</span>
      </div>
      <p class="text-label-md font-label-md text-outline mb-4">These certificates have expired or expire within {{ $renewalWindowDays }} days. Retake the training to renew.</p>
      <div class="space-y-2">
        @foreach($renewals as $cert)
          @php $expired = $cert->expires_at->isPast(); $days = (int) round(now()->diffInDays($cert->expires_at, false)); @endphp
          <div class="flex flex-col sm:flex-row sm:items-center gap-3 bg-surface rounded-lg px-4 py-3">
            <div class="flex-1 min-w-0">
              <p class="text-body-md font-body-md text-on-surface font-semibold truncate">{{ $cert->course->title }}</p>
              <p class="text-label-md font-label-md {{ $expired ? 'text-error' : 'text-[#8a6d3b]' }}">
                @if($expired)
                  Expired {{ $cert->expires_at->format('j M Y') }}
                @else
                  Expires {{ $cert->expires_at->format('j M Y') }} · in {{ $days }} {{ Str::plural('day', $days) }}
                @endif
              </p>
            </div>
            <div class="flex items-center gap-2 shrink-0">
              <a href="{{ auth()->user()->learnRoute('course.show', $cert->course->slug) }}" class="px-3 py-2 rounded-lg text-label-md font-label-md text-on-surface-variant hover:bg-surface-container-high">View</a>
              <form method="POST" action="{{ auth()->user()->learnRoute('course.retake', $cert->course->slug) }}" onsubmit="return confirm('Start a renewal? Your progress resets so you can take the training again.');">
                @csrf
                <button type="submit" class="inline-flex items-center gap-1.5 bg-gold text-on-primary px-4 py-2 rounded-lg text-label-md font-label-md hover:opacity-90">
                  <span class="material-symbols-outlined text-[18px]">refresh</span> Retake
                </button>
              </form>
            </div>
          </div>
        @endforeach
      </div>
    </div>
  @endif

  {{-- Certificates --}}
  <div class="flex items-center gap-2 mb-4">
    <span class="material-symbols-outlined text-primary">workspace_premium</span>
    <h3 class="text-headline-md font-headline-md text-on-surface">Certificates</h3>
    <span class="ml-1 text-label-md font-label-md text-outline">({{ $certificates->count() }})</span>
  </div>

  @if($certificates->isEmpty())
    <div class="surface-card rounded-xl px-6 py-12 text-center mb-stack-lg">
      <span class="material-symbols-outlined text-[42px] text-outline mb-2">workspace_premium</span>
      <p class="text-body-lg font-body-lg text-on-surface font-semibold">No certificates yet</p>
      <p class="text-body-md font-body-md text-outline">Complete a course to earn your first certificate — it'll appear here.</p>
    </div>
  @else
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5 mb-stack-lg">
      @foreach($certificates as $certificate)
        @php
          $expired = $certificate->expires_at && $certificate->expires_at->isPast();
          $soon = $certificate->expires_at && ! $expired && $certificate->expires_at->lt(now()->addDays($renewalWindowDays));
        @endphp
        <div class="surface-card rounded-xl overflow-hidden flex flex-col">
          <div class="bg-primary px-5 py-4 flex items-center justify-between">
            <span class="material-symbols-outlined text-on-primary text-[28px]" style="font-variation-settings: 'FILL' 1;">verified</span>
            @if($expired)
              <span class="text-[11px] font-bold bg-error-container text-error px-2.5 py-1 rounded-full">Expired</span>
            @elseif($soon)
              <span class="text-[11px] font-bold bg-white text-[#8a6d3b] px-2.5 py-1 rounded-full">Expiring soon</span>
            @else
              <span class="text-[11px] font-bold bg-white/20 text-on-primary px-2.5 py-1 rounded-full">Valid</span>
            @endif
          </div>
          <div class="p-5 flex-1 flex flex-col">
            <p class="text-body-lg font-body-lg text-on-surface font-semibold leading-snug mb-1 line-clamp-2">
              {{ $certificate->course?->title ?? 'Course' }}
            </p>
            <p class="text-label-md font-label-md text-outline mb-4">{{ $certificate->certificate_number }}</p>

            <dl class="grid grid-cols-2 gap-y-2 text-body-md font-body-md mb-5">
              <dt class="text-outline">Issued</dt>
              <dd class="text-on-surface text-right">{{ $certificate->issued_at?->format('j M Y') ?? '—' }}</dd>
              <dt class="text-outline">Expires</dt>
              <dd class="text-on-surface text-right">{{ $certificate->expires_at?->format('j M Y') ?? 'No expiry' }}</dd>
              @if($certificate->score_percent !== null)
                <dt class="text-outline">Score</dt>
                <dd class="text-on-surface text-right font-semibold">{{ $certificate->score_percent }}%</dd>
              @endif
            </dl>

            <div class="mt-auto space-y-2">
              @if($certificate->course)
                <a href="{{ auth()->user()->learnRoute('course.certificate', $certificate->course->slug) }}" target="_blank" rel="noopener"
                   class="w-full inline-flex items-center justify-center gap-1.5 bg-primary text-on-primary px-4 py-2.5 rounded-lg text-label-md font-label-md hover:opacity-90 transition-opacity">
                  <span class="material-symbols-outlined text-[18px]">visibility</span> View / Download
                </a>
                @if($expired || $soon)
                  <form method="POST" action="{{ auth()->user()->learnRoute('course.retake', $certificate->course->slug) }}" onsubmit="return confirm('Start a renewal? Your progress resets so you can take the training again.');">
                    @csrf
                    <button type="submit" class="w-full inline-flex items-center justify-center gap-1.5 border border-gold text-[#8a6d3b] px-4 py-2.5 rounded-lg text-label-md font-label-md hover:bg-gold/10">
                      <span class="material-symbols-outlined text-[18px]">refresh</span> Retake to renew
                    </button>
                  </form>
                @endif
              @else
                <span class="w-full inline-flex items-center justify-center gap-1.5 bg-surface-container-high text-outline px-4 py-2.5 rounded-lg text-label-md font-label-md">
                  <span class="material-symbols-outlined text-[18px]">block</span> Course removed
                </span>
              @endif
            </div>
          </div>
        </div>
      @endforeach
    </div>
  @endif

  {{-- Session History --}}
  <div class="flex items-center gap-2 mb-4">
    <span class="material-symbols-outlined text-primary">history</span>
    <h3 class="text-headline-md font-headline-md text-on-surface">Session History</h3>
    <span class="ml-1 text-label-md font-label-md text-outline">({{ $sessionHistory->count() }})</span>
  </div>

  <div class="surface-card rounded-xl overflow-hidden">
    <div class="overflow-x-auto">
      <table class="w-full text-left min-w-[640px]">
        <thead class="bg-surface-container-high">
          <tr class="text-label-md font-label-md text-outline uppercase tracking-wide">
            <th class="px-5 py-3">Session</th>
            <th class="px-5 py-3">Date</th>
            <th class="px-5 py-3">Time</th>
            <th class="px-5 py-3">Format</th>
            <th class="px-5 py-3 text-right">Outcome</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-outline-variant">
          @forelse($sessionHistory as $session)
            @php
              $badge = match($session['status']) {
                'attended'  => ['label' => 'Attended', 'class' => 'bg-secondary-container text-on-secondary-container', 'icon' => 'check_circle'],
                'no_show'   => ['label' => 'Missed', 'class' => 'bg-error-container text-error', 'icon' => 'cancel'],
                'cancelled' => ['label' => 'Cancelled', 'class' => 'bg-surface-container-high text-outline', 'icon' => 'block'],
                default     => ['label' => 'Registered', 'class' => 'bg-surface-container-high text-secondary', 'icon' => 'event_available'],
              };
            @endphp
            <tr class="text-body-md font-body-md text-on-surface {{ !empty($session['notes']) ? 'border-b-0' : '' }}">
              <td class="px-5 py-4 font-semibold">{{ $session['title'] }}</td>
              <td class="px-5 py-4 text-on-surface-variant whitespace-nowrap">{{ $session['date'] }}</td>
              <td class="px-5 py-4 text-on-surface-variant">{{ $session['time'] }}</td>
              <td class="px-5 py-4 text-on-surface-variant">{{ $session['format'] }}</td>
              <td class="px-5 py-4 text-right">
                <span class="inline-flex items-center gap-1 text-label-md font-label-md px-2.5 py-1 rounded-full {{ $badge['class'] }}">
                  <span class="material-symbols-outlined text-[16px]">{{ $badge['icon'] }}</span> {{ $badge['label'] }}
                </span>
              </td>
            </tr>
            @if(!empty($session['notes']))
              <tr class="text-body-md font-body-md">
                <td colspan="5" class="px-5 pb-4 pt-0">
                  <div class="bg-surface-container-low rounded-lg px-4 py-3">
                    <p class="flex items-center gap-1.5 text-label-md font-label-md text-primary font-bold mb-1"><span class="material-symbols-outlined text-[16px]">edit_note</span> Trainer's notes</p>
                    <p class="text-on-surface-variant whitespace-pre-line">{{ $session['notes'] }}</p>
                  </div>
                </td>
              </tr>
            @endif
          @empty
            <tr>
              <td colspan="5" class="px-5 py-12 text-center text-body-md font-body-md text-outline">
                No past sessions on record yet.
              </td>
            </tr>
          @endforelse
        </tbody>
      </table>
    </div>
  </div>

@endsection