@extends('layouts.app')
@section('title', 'Course Library')
@section('content')

  @include('partials.flash')

  {{-- Toolbar --}}
  <div class="flex flex-col md:flex-row md:items-center gap-3 mb-stack-lg">
    <form method="GET" action="{{ route('admin.courses.index') }}" class="flex flex-wrap items-center gap-2 flex-1">
      <div class="relative flex-1 min-w-[200px]">
        <span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-outline text-[20px]">search</span>
        <input type="text" name="q" value="{{ request('q') }}" placeholder="Search title or code…"
          class="w-full pl-10 pr-4 py-2.5 bg-surface-container rounded-lg border-none focus:ring-2 focus:ring-primary/20 text-body-md outline-none">
      </div>
      <select name="category" class="py-2.5 px-3 bg-surface-container rounded-lg border-none focus:ring-2 focus:ring-primary/20 text-body-md outline-none">
        <option value="">All categories</option>
        @foreach(['mandatory' => 'Mandatory', 'externally_provided' => 'Externally Provided', 'service_specific' => 'Service Specific'] as $val => $label)
          <option value="{{ $val }}" @selected(request('category') === $val)>{{ $label }}</option>
        @endforeach
      </select>
      <select name="status" class="py-2.5 px-3 bg-surface-container rounded-lg border-none focus:ring-2 focus:ring-primary/20 text-body-md outline-none">
        <option value="">All statuses</option>
        @foreach(['draft' => 'Draft', 'published' => 'Published', 'archived' => 'Archived'] as $val => $label)
          <option value="{{ $val }}" @selected(request('status') === $val)>{{ $label }}</option>
        @endforeach
      </select>
      <button type="submit" class="px-4 py-2.5 rounded-lg bg-surface-container-high text-on-surface-variant text-label-md font-label-md hover:bg-surface-container-highest">Filter</button>
    </form>
    <div class="flex items-center gap-2">
      <a href="{{ route('admin.courses.excel.sample') }}"
         class="inline-flex items-center justify-center gap-1.5 bg-surface-container-high text-on-surface-variant px-4 py-2.5 rounded-lg text-label-md font-label-md hover:bg-surface-container-highest whitespace-nowrap">
        <span class="material-symbols-outlined text-[20px]">download</span> Sample
      </a>
      <button type="button" onclick="document.getElementById('courseImport').classList.toggle('hidden')"
         class="inline-flex items-center justify-center gap-1.5 bg-surface-container-high text-on-surface-variant px-4 py-2.5 rounded-lg text-label-md font-label-md hover:bg-surface-container-highest whitespace-nowrap">
        <span class="material-symbols-outlined text-[20px]">upload_file</span> Import Excel
      </button>
      <a href="{{ route('admin.courses.create') }}"
         class="inline-flex items-center justify-center gap-1.5 bg-primary text-on-primary px-5 py-2.5 rounded-lg text-label-md font-label-md hover:opacity-90 transition-opacity whitespace-nowrap">
        <span class="material-symbols-outlined text-[20px]">add</span> New Course
      </a>
    </div>
  </div>

  {{-- Excel/CSV course importer --}}
  <div id="courseImport" class="surface-card rounded-xl p-6 mb-stack-lg hidden">
    <div class="flex items-start gap-3 mb-4">
      <span class="material-symbols-outlined text-primary">upload_file</span>
      <div>
        <h4 class="text-headline-md font-headline-md text-on-surface">Import courses from a spreadsheet</h4>
        <p class="text-label-md font-label-md text-outline mt-1">Upload an Excel (.xlsx) or CSV file — one row per module, grouped into courses by course code. Content becomes a trackable module screen. <a href="{{ route('admin.courses.excel.sample') }}" class="text-primary font-bold hover:underline">Download the sample</a> for the exact columns.</p>
      </div>
    </div>
    <form method="POST" action="{{ route('admin.courses.excel.import') }}" enctype="multipart/form-data" class="flex flex-col sm:flex-row items-stretch sm:items-end gap-3">
      @csrf
      <div class="flex-1">
        <label class="block text-label-md font-label-md text-outline uppercase tracking-wide mb-1.5">File (.xlsx / .csv)</label>
        <input type="file" name="file" accept=".xlsx,.csv,text/csv" required class="w-full px-3 py-2.5 bg-surface-container rounded-lg border-none text-body-md outline-none">
      </div>
      <button type="submit" class="bg-primary text-on-primary px-5 py-2.5 rounded-lg text-label-md font-label-md hover:opacity-90">Upload &amp; create</button>
    </form>
  </div>

  <div class="surface-card rounded-xl overflow-hidden">
    <div class="overflow-x-auto">
      <table class="w-full text-left min-w-[760px]">
        <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">Course</th>
            <th class="px-5 py-3">Category</th>
            <th class="px-5 py-3">Duration</th>
            <th class="px-5 py-3">Enrolled</th>
            <th class="px-5 py-3">Status</th>
            <th class="px-5 py-3 text-right">Actions</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-outline-variant">
          @forelse($courses as $course)
            @php
              $statusBadge = match($course->status) {
                'published' => 'bg-secondary-container text-on-secondary-container',
                'archived'  => 'bg-surface-container-high text-outline',
                default     => 'bg-primary/10 text-primary',
              };
              $categoryLabel = \Illuminate\Support\Str::headline($course->category);
            @endphp
            <tr class="text-body-md font-body-md text-on-surface">
              <td class="px-5 py-4">
                <div class="flex items-center gap-3">
                  <div class="w-12 h-12 rounded-lg bg-surface-container-high overflow-hidden shrink-0 flex items-center justify-center">
                    @if($course->thumbnail)
                      <img src="{{ asset('storage/' . $course->thumbnail) }}" alt="" class="w-full h-full object-cover">
                    @else
                      <span class="material-symbols-outlined text-outline">school</span>
                    @endif
                  </div>
                  <div class="min-w-0">
                    <p class="font-semibold truncate max-w-[280px]">{{ $course->title }}</p>
                    <p class="text-label-md font-label-md text-outline">{{ $course->course_id }}</p>
                  </div>
                </div>
              </td>
              <td class="px-5 py-4 text-on-surface-variant">{{ $categoryLabel }}</td>
              <td class="px-5 py-4 text-on-surface-variant whitespace-nowrap">{{ $course->duration_minutes }} min</td>
              <td class="px-5 py-4 text-on-surface-variant">{{ $course->enrollments_count }}</td>
              <td class="px-5 py-4">
                <span class="inline-block text-label-md font-label-md px-2.5 py-1 rounded-full {{ $statusBadge }}">{{ ucfirst($course->status) }}</span>
              </td>
              <td class="px-5 py-4">
                <div class="flex items-center justify-end gap-1">
                  <a href="{{ route('admin.courses.builder', $course) }}" title="Course builder"
                     class="w-9 h-9 flex items-center justify-center rounded-lg text-outline hover:text-primary hover:bg-surface-container-high transition-colors">
                    <span class="material-symbols-outlined text-[20px]">construction</span>
                  </a>
                  <a href="{{ route('admin.courses.tracking', $course) }}" title="Training tracking"
                     class="w-9 h-9 flex items-center justify-center rounded-lg text-outline hover:text-primary hover:bg-surface-container-high transition-colors">
                    <span class="material-symbols-outlined text-[20px]">insights</span>
                  </a>
                  <a href="{{ route('admin.courses.assign', $course) }}" title="Assign to employees"
                     class="w-9 h-9 flex items-center justify-center rounded-lg text-outline hover:text-primary hover:bg-surface-container-high transition-colors">
                    <span class="material-symbols-outlined text-[20px]">person_add</span>
                  </a>
                  <a href="{{ route('admin.courses.edit', $course) }}" title="Edit"
                     class="w-9 h-9 flex items-center justify-center rounded-lg text-outline hover:text-primary hover:bg-surface-container-high transition-colors">
                    <span class="material-symbols-outlined text-[20px]">edit</span>
                  </a>
                  <form method="POST" action="{{ route('admin.courses.destroy', $course) }}" class="m-0"
                        onsubmit="return confirm('Delete “{{ $course->title }}”? This cannot be undone.');">
                    @csrf @method('DELETE')
                    <button type="submit" title="Delete"
                      class="w-9 h-9 flex items-center justify-center rounded-lg text-outline hover:text-error hover:bg-error-container transition-colors">
                      <span class="material-symbols-outlined text-[20px]">delete</span>
                    </button>
                  </form>
                </div>
              </td>
            </tr>
          @empty
            <tr>
              <td colspan="6" class="px-5 py-12 text-center text-body-md font-body-md text-outline">
                No courses found. <a href="{{ route('admin.courses.create') }}" class="text-primary font-bold hover:underline">Create one</a>.
              </td>
            </tr>
          @endforelse
        </tbody>
      </table>
    </div>
  </div>

  <div class="mt-stack-lg">{{ $courses->links() }}</div>

@endsection