@extends('layouts.dashboard')

@section('title', 'Kelas Berenang')

@section('content')
<div class="rounded-lg bg-white p-5 shadow-sm">
    <form method="POST" action="{{ route('admin.swimming-classes.store') }}" class="grid gap-3 md:grid-cols-3">
        @csrf
        <input name="class_name" placeholder="Nama kelas" class="rounded-lg border border-slate-300 px-3 py-2" required>
        <select name="level_id" class="rounded-lg border border-slate-300 px-3 py-2" required>@foreach($levels as $level)<option value="{{ $level->id }}">{{ $level->name }}</option>@endforeach</select>
        <select name="trainer_id" class="rounded-lg border border-slate-300 px-3 py-2"><option value="">Tanpa pelatih</option>@foreach($trainers as $trainer)<option value="{{ $trainer->id }}">{{ $trainer->name }}</option>@endforeach</select>
        <input name="max_participants" type="number" value="20" min="1" 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="active">active</option><option value="inactive">inactive</option></select>
        <input name="description" placeholder="Deskripsi" class="rounded-lg border border-slate-300 px-3 py-2">
        <button class="rounded-lg bg-sky-700 px-4 py-2 font-bold text-white md:col-span-3">Tambah Kelas</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>Level</th><th>Pelatih</th><th>Peserta</th><th>Kapasitas</th><th>Status</th></tr></thead>
        <tbody>
        @foreach($classes as $class)
            <tr class="border-t"><td class="p-3 font-bold">{{ $class->class_name }}</td><td>{{ $class->level?->name }}</td><td>{{ $class->trainer?->name }}</td><td>{{ $class->students_count }}</td><td>{{ $class->max_participants }}</td><td><x-status-badge :status="$class->status" /></td></tr>
        @endforeach
        </tbody>
    </table>
</div>
<div class="mt-4">{{ $classes->links() }}</div>
@endsection