{{--
    Policies — read and digitally acknowledge company policies.
    From EmployeePolicyController@index:
      $policies     = Collection<Policy> each with ->is_acknowledged (bool) and ->acknowledged_at (Carbon|null)
      $pendingCount = int  // policies requiring acknowledgment that are still outstanding
--}}
@extends('layouts.app')
@section('title', 'Policies')
@section('content')

  @include('employee._flash')

  @if($pendingCount > 0)
    <div class="flex items-center gap-3 bg-secondary-container text-on-secondary-container rounded-lg px-5 py-3 mb-stack-lg">
      <span class="material-symbols-outlined">description</span>
      <p class="text-body-md font-body-md flex-1">
        You have <strong>{{ $pendingCount }} {{ Str::plural('policy', $pendingCount) }}</strong> awaiting your acknowledgment.
      </p>
    </div>
  @endif

  @if($policies->isEmpty())
    <div class="surface-card rounded-xl px-6 py-12 text-center">
      <span class="material-symbols-outlined text-[42px] text-outline mb-2">description</span>
      <p class="text-body-lg font-body-lg text-on-surface font-semibold">No policies published</p>
      <p class="text-body-md font-body-md text-outline">Company policies will appear here once published.</p>
    </div>
  @else
    <div class="surface-card rounded-xl overflow-hidden">
      <ul class="divide-y divide-outline-variant">
        @foreach($policies as $policy)
          <li class="flex flex-col md:flex-row md:items-center gap-4 px-6 py-5">
            <div class="flex items-start gap-4 flex-1 min-w-0">
              <span class="material-symbols-outlined text-[26px] text-primary shrink-0 mt-0.5">policy</span>
              <div class="min-w-0">
                <p class="text-body-lg font-body-lg text-on-surface font-semibold leading-snug">{{ $policy->title }}</p>
                <div class="flex flex-wrap items-center gap-x-3 gap-y-1 mt-1 text-label-md font-label-md text-outline">
                  <span>Version {{ $policy->version }}</span>
                  @if($policy->published_at)
                    <span>·</span>
                    <span>Published {{ $policy->published_at->format('j M Y') }}</span>
                  @endif
                  @if($policy->is_acknowledged && $policy->acknowledged_at)
                    <span>·</span>
                    <span class="text-primary font-bold">Acknowledged {{ $policy->acknowledged_at->format('j M Y') }}</span>
                  @endif
                </div>
              </div>
            </div>

            <div class="flex items-center gap-2 shrink-0">
              @if($policy->file_path)
                <a href="{{ asset('storage/' . $policy->file_path) }}" target="_blank" rel="noopener"
                   class="inline-flex items-center gap-1.5 px-4 py-2 rounded-lg border border-outline-variant text-label-md font-label-md text-on-surface-variant hover:bg-surface-container-high transition-colors">
                  <span class="material-symbols-outlined text-[18px]">visibility</span> View
                </a>
              @endif

              @if(! $policy->requires_acknowledgment)
                <span class="text-label-md font-label-md text-outline px-2">No action needed</span>
              @elseif($policy->is_acknowledged)
                <span class="inline-flex items-center gap-1 text-label-md font-label-md text-primary font-bold px-2">
                  <span class="material-symbols-outlined text-[18px]">check_circle</span> Acknowledged
                </span>
              @else
                <form method="POST" action="{{ auth()->user()->learnRoute('policy.acknowledge', $policy) }}" class="m-0">
                  @csrf
                  <button type="submit"
                    class="bg-primary text-on-primary px-4 py-2 rounded-lg text-label-md font-label-md hover:opacity-90 transition-opacity">
                    Acknowledge
                  </button>
                </form>
              @endif
            </div>
          </li>
        @endforeach
      </ul>
    </div>
  @endif

@endsection