@extends('layouts.dashboard')

@section('title', 'Data Sesi Latihan')

@section('content')
<div class="rounded-lg bg-white p-5 shadow-sm">
    <form method="POST" action="{{ route('admin.swimming-sessions.store') }}" class="grid gap-3 md:grid-cols-4">
        @csrf
        <select name="class_id" class="rounded-lg border border-slate-300 px-3 py-2" required>@foreach($classes as $class)<option value="{{ $class->id }}">{{ $class->class_name }}</option>@endforeach</select>
        <select name="trainer_id" class="rounded-lg border border-slate-300 px-3 py-2"><option value="">Pelatih dari kelas</option>@foreach($trainers as $trainer)<option value="{{ $trainer->id }}">{{ $trainer->name }}</option>@endforeach</select>
        <input name="session_date" type="date" class="rounded-lg border border-slate-300 px-3 py-2" required>
        <input name="quota_total" type="number" value="20" min="1" class="rounded-lg border border-slate-300 px-3 py-2" required>
        <input name="start_time" type="time" class="rounded-lg border border-slate-300 px-3 py-2" required>
        <input name="end_time" type="time" class="rounded-lg border border-slate-300 px-3 py-2" required>
        <select name="status" class="rounded-lg border border-slate-300 px-3 py-2"><option value="tersedia">tersedia</option><option value="berlangsung">berlangsung</option><option value="selesai">selesai</option><option value="dibatalkan">dibatalkan</option></select>
        <button class="rounded-lg bg-sky-700 px-4 py-2 font-bold text-white">Tambah Sesi</button>
    </form>
</div>
<div class="mt-6 overflow-x-auto rounded-lg bg-white shadow-sm">
    <table class="w-full text-left text-sm">
        <thead class="bg-slate-50 text-slate-500"><tr><th class="p-3">Kelas</th><th>Pelatih</th><th>Tanggal</th><th>Jam</th><th>Kuota</th><th>Status</th></tr></thead>
        <tbody>
        @foreach($sessions as $session)
            <tr class="border-t"><td class="p-3 font-bold">{{ $session->swimmingClass?->class_name }}</td><td>{{ $session->trainer?->name }}</td><td>{{ $session->session_date->format('d/m/Y') }}</td><td>{{ $session->start_time }}-{{ $session->end_time }}</td><td>{{ $session->quota_used }}/{{ $session->quota_total }}</td><td><x-status-badge :status="$session->status" /></td></tr>
        @endforeach
        </tbody>
    </table>
</div>
<div class="mt-4">{{ $sessions->links() }}</div>
@endsection