@extends('layouts.dashboard')

@section('title', __('lms.sessions_title'))
@section('eyebrow', __('lms.college'))

@section('content')
<div class="space-y-6">
    <section class="rounded-lg border border-slate-200 bg-white p-5 shadow-sm">
        <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
            <div>
                <p class="text-sm font-black uppercase text-sky-700">{{ __('lms.sessions_title') }}</p>
                <h2 class="mt-1 text-2xl font-black text-slate-950">{{ __('lms.sessions_heading') }}</h2>
                <p class="mt-2 text-sm leading-6 text-slate-600">{{ __('lms.sessions_intro') }}</p>
            </div>
            <div class="rounded-lg bg-slate-950 px-4 py-3 text-white">
                <p class="text-2xl font-black">{{ $sessions->count() }}</p>
                <p class="text-xs font-bold text-slate-300">{{ __('lms.available_sessions') }}</p>
            </div>
        </div>
    </section>

    <div class="grid gap-4 lg:grid-cols-2">
        @forelse($sessions as $session)
            @php($booked = $myBookings->contains($session->id))
            <article class="rounded-lg border border-slate-200 bg-white p-5 shadow-sm">
                <div class="flex flex-wrap items-start justify-between gap-3">
                    <div>
                        <div class="flex flex-wrap gap-2">
                            <x-status-badge :status="$booked ? 'booked' : $session->computed_status" />
                            <span class="rounded-full bg-slate-100 px-2.5 py-1 text-xs font-black text-slate-600">{{ __('lms.remaining') }} {{ $session->remaining_quota }}</span>
                        </div>
                        <h3 class="mt-3 text-lg font-black text-slate-950">{{ $session->swimmingClass?->class_name }}</h3>
                        <p class="mt-1 text-sm font-bold text-slate-500">{{ $session->trainer?->name ?? 'Pelatih belum ditentukan' }}</p>
                    </div>
                    <div class="rounded-lg bg-slate-50 px-4 py-3 text-right">
                        <p class="text-sm font-black text-slate-950">{{ \App\Support\LocaleFormat::date($session->session_date, 'd M Y') }}</p>
                        <p class="text-xs font-bold text-slate-500">{{ $session->start_time }} - {{ $session->end_time }}</p>
                    </div>
                </div>
                <form method="POST" action="{{ route('user.lms.sessions.booking', $session) }}" class="mt-5">
                    @csrf
                    <button @disabled($session->remaining_quota <= 0 || $booked) class="inline-flex w-full items-center justify-center gap-2 rounded-lg bg-sky-700 px-4 py-2.5 text-sm font-black text-white hover:bg-slate-950 disabled:bg-slate-300 sm:w-auto">
                        <i data-lucide="{{ $booked ? 'check-circle-2' : 'calendar-plus' }}" class="h-4 w-4"></i>
                        {{ $booked ? __('lms.already_booked') : __('lms.book_session') }}
                    </button>
                </form>
            </article>
        @empty
            <div class="rounded-lg border border-dashed border-slate-300 bg-white p-8 text-center lg:col-span-2">
                <p class="text-lg font-black text-slate-950">Belum ada sesi yang bisa dibooking.</p>
                <p class="mt-1 text-sm text-slate-500">Sesi hanya tampil untuk kelas aktif yang sudah Anda ikuti.</p>
                <a href="{{ route('user.school-registration.index') }}" class="mt-4 inline-flex items-center gap-2 rounded-lg bg-sky-700 px-4 py-2 text-sm font-black text-white hover:bg-slate-950">
                    <i data-lucide="waves" class="h-4 w-4"></i>
                    Daftar Sekolah Renang
                </a>
            </div>
        @endforelse
    </div>
</div>
@endsection