@extends('layout.admin')
@section('title','Sessions: '.$course->title)

@section('content')
<div class="max-w-4xl mx-auto px-2 py-3">

  {{-- Top Bar --}}
  <div class="mb-3 flex items-center justify-between">
    <div class="flex items-center gap-3">
      <div class="inline-flex h-9 w-9 items-center justify-center rounded-xl border border-orange-200 bg-orange-50 text-orange-600">
        <i class="fa-solid fa-layer-group"></i>
      </div>
      <div>
        <h1 class="text-lg sm:text-xl font-extrabold tracking-tight text-slate-900">
          Sessions of: <span class="text-orange-600">{{ $course->title }}</span>
        </h1>
        <p class="text-xs text-slate-500">Manage, reorder & edit sessions.</p>
      </div>
    </div>

    <a href="{{ route('admin.courses.index') }}"
       class="inline-flex items-center gap-2 rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm font-semibold text-slate-700 hover:bg-slate-50">
      <i class="fa-solid fa-arrow-left-long"></i>
      Back
    </a>
  </div>

  {{-- Flash / Error --}}
  @if(session('success'))
    <div class="mb-3 rounded-xl border border-emerald-200 bg-emerald-50 px-3 py-2 text-emerald-700">
      <i class="fa-solid fa-check-circle mr-2"></i>{{ session('success') }}
    </div>
  @endif
  @if($errors->any())
    <div class="mb-3 rounded-xl border border-rose-200 bg-rose-50 px-3 py-2 text-rose-700">
      <i class="fa-solid fa-circle-exclamation mr-2"></i>{{ $errors->first() }}
    </div>
  @endif

  {{-- Create Session --}}
  <div class="mb-4 rounded-2xl border border-orange-200 bg-gradient-to-br from-orange-50 to-white p-4">
    <form method="POST" action="{{ route('admin.sessions.store',$course->id) }}">
      @csrf
      <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
        <div>
          <label class="mb-1 block text-xs font-bold tracking-wide text-slate-700">Title</label>
          <input name="title" class="w-full rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm focus:border-orange-400 focus:outline-none" required>
        </div>
        <div>
          <label class="mb-1 block text-xs font-bold tracking-wide text-slate-700">Order</label>
          <input name="order" type="number" min="1" class="w-full rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm focus:border-orange-400 focus:outline-none">
        </div>
        <div class="flex items-end justify-end">
          <button class="inline-flex items-center gap-2 rounded-lg bg-emerald-600 px-3 py-2 text-sm font-semibold text-white shadow hover:opacity-95">
            <i class="fa-solid fa-plus"></i> Add Session
          </button>
        </div>
      </div>
    </form>
  </div>

  {{-- Sessions List --}}
  <div class="overflow-hidden rounded-2xl border border-slate-200 bg-white">
    @forelse($sessions as $s)
      <div class="border-b last:border-0">
        <div class="flex flex-col gap-3 px-3 py-3 sm:flex-row sm:items-center sm:justify-between">

          {{-- Left: title + meta + manage videos --}}
          <div class="min-w-0">
            <div class="flex items-center gap-2">
              <span class="inline-flex h-6 min-w-6 items-center justify-center rounded-md border border-orange-200 bg-orange-50 px-2 text-xs font-extrabold text-orange-600">
                #{{ $s->order }}
              </span>
              <div class="truncate font-semibold text-slate-900">{{ $s->title }}</div>
            </div>

            <div class="mt-1 flex flex-wrap items-center gap-2 text-xs">
              <span class="inline-flex items-center gap-1 rounded-md border border-slate-200 bg-slate-50 px-2 py-0.5 text-slate-600">
                <i class="fa-regular fa-circle-play"></i> {{ $s->videos_count }} videos
              </span>

              <a href="{{ route('admin.videos.index',$s->id) }}"
                 class="inline-flex items-center gap-1 rounded-md border border-blue-200 bg-blue-50 px-2 py-0.5 font-semibold text-blue-700 hover:bg-blue-100">
                <i class="fa-solid fa-film"></i> Manage Videos
              </a>
            </div>
          </div>

          {{-- Right: inline edit + save/delete side by side --}}
          <div class="flex flex-col sm:flex-row sm:items-center gap-2">
            <form method="POST" action="{{ route('admin.sessions.update',$s->id) }}" class="flex flex-wrap items-center gap-2">
              @csrf @method('PUT')
              <input name="title" value="{{ $s->title }}"
                     class="w-48 rounded-md border border-slate-200 bg-white px-2 py-1 text-sm focus:border-orange-400 focus:outline-none">
              <input name="order" value="{{ $s->order }}" type="number" min="1"
                     class="w-20 rounded-md border border-slate-200 bg-white px-2 py-1 text-sm focus:border-orange-400 focus:outline-none">

              <div class="flex gap-2">
                <button class="inline-flex items-center gap-1 rounded-md bg-blue-600 px-3 py-1.5 text-sm font-semibold text-white hover:opacity-95">
                  <i class="fa-solid fa-floppy-disk"></i> Save
                </button>
            </form>

            <form method="POST" action="{{ route('admin.sessions.destroy',$s->id) }}" onsubmit="return confirm('Delete session?')">
              @csrf @method('DELETE')
              <button class="inline-flex items-center gap-1 rounded-md bg-rose-600 px-3 py-1.5 text-sm font-semibold text-white hover:opacity-95">
                <i class="fa-solid fa-trash-can"></i> Delete
              </button>
            </form>
              </div>
          </div>

        </div>
      </div>
    @empty
      <div class="p-6 text-center text-slate-500">
        <i class="fa-regular fa-folder-open mr-1"></i> No sessions
      </div>
    @endforelse
  </div>
</div>
@endsection
