@extends('layouts.dashboard')

@section('title', 'Data Progres Peserta')
@section('eyebrow', 'Evaluasi LMS')

@section('content')
<div class="space-y-6">
    <section class="rounded-lg border border-slate-200 bg-white p-5 shadow-sm">
        <div class="mb-4">
            <p class="text-sm font-black uppercase text-sky-700">Evaluasi skill</p>
            <h2 class="mt-1 text-2xl font-black text-slate-950">Tambah progres peserta.</h2>
            <p class="mt-2 text-sm leading-6 text-slate-600">Nilai ini akan tampil di LMS peserta sebagai riwayat perkembangan belajar.</p>
        </div>
        <form method="POST" action="{{ route('admin.student-progress.store') }}" class="grid gap-3 md:grid-cols-2 xl:grid-cols-4">
            @csrf
            <select name="user_id" class="rounded-lg border border-slate-300 px-3 py-2 text-sm" required>
                <option value="">Peserta</option>
                @foreach($users as $user)
                    <option value="{{ $user->id }}">{{ $user->name }}</option>
                @endforeach
            </select>
            <select name="class_id" class="rounded-lg border border-slate-300 px-3 py-2 text-sm" required>
                <option value="">Kelas</option>
                @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 text-sm">
                <option value="">Pelatih</option>
                @foreach($trainers as $trainer)
                    <option value="{{ $trainer->id }}">{{ $trainer->name }}</option>
                @endforeach
            </select>
            <select name="level_id" class="rounded-lg border border-slate-300 px-3 py-2 text-sm" required>
                <option value="">Level</option>
                @foreach($levels as $level)
                    <option value="{{ $level->id }}">{{ $level->name }}</option>
                @endforeach
            </select>
            <input name="skill_name" placeholder="Skill" class="rounded-lg border border-slate-300 px-3 py-2 text-sm" required>
            <input name="score" type="number" min="0" max="100" value="80" class="rounded-lg border border-slate-300 px-3 py-2 text-sm" required>
            <select name="progress_status" class="rounded-lg border border-slate-300 px-3 py-2 text-sm">
                @foreach(['belum_mulai', 'proses', 'cukup', 'baik', 'lulus'] as $status)
                    <option value="{{ $status }}">{{ str($status)->replace('_', ' ')->title() }}</option>
                @endforeach
            </select>
            <input name="trainer_feedback" placeholder="Feedback" class="rounded-lg border border-slate-300 px-3 py-2 text-sm">
            <button class="inline-flex 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 md:col-span-2 xl:col-span-4">
                <i data-lucide="save" class="h-4 w-4"></i>
                Tambah Progres
            </button>
        </form>
    </section>

    <div class="overflow-x-auto rounded-lg border border-slate-200 bg-white shadow-sm">
        <table class="w-full min-w-[820px] text-left text-sm">
            <thead class="bg-slate-50 text-xs font-black uppercase text-slate-500">
                <tr>
                    <th class="p-4">Peserta</th>
                    <th class="p-4">Kelas</th>
                    <th class="p-4">Level</th>
                    <th class="p-4">Skill</th>
                    <th class="p-4">Nilai</th>
                    <th class="p-4">Status</th>
                    <th class="p-4">Feedback</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-100">
                @forelse($progress as $item)
                    <tr>
                        <td class="p-4 font-bold text-slate-950">{{ $item->user?->name }}</td>
                        <td class="p-4 text-slate-600">{{ $item->swimmingClass?->class_name }}</td>
                        <td class="p-4 text-slate-600">{{ $item->level?->name }}</td>
                        <td class="p-4 text-slate-600">{{ $item->skill_name }}</td>
                        <td class="p-4 font-black text-slate-950">{{ $item->score }}</td>
                        <td class="p-4"><x-status-badge :status="$item->progress_status" /></td>
                        <td class="p-4 text-slate-600">{{ $item->trainer_feedback ?: '-' }}</td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="7" class="p-8 text-center text-slate-500">Belum ada progres peserta.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
    {{ $progress->links() }}
</div>
@endsection