@extends('layouts.dashboard')

@section('title', 'Progres Peserta')
@section('eyebrow', 'Evaluasi Kelas')

@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">{{ $trainer->name }}</p>
            <h2 class="mt-1 text-2xl font-black text-slate-950">Nilai skill peserta.</h2>
            <p class="mt-2 text-sm leading-6 text-slate-600">Progres yang disimpan akan masuk ke LMS peserta.</p>
        </div>
        <form method="POST" action="{{ route('trainer.progress.store') }}" class="grid gap-3 md:grid-cols-2 xl:grid-cols-4">
            @csrf
            <select name="class_id" id="classSelect" class="rounded-lg border border-slate-300 px-3 py-2 text-sm" required>
                @foreach($classes as $class)
                    <option value="{{ $class->id }}" data-level="{{ $class->level_id }}">{{ $class->class_name }}</option>
                @endforeach
            </select>
            <select name="user_id" class="rounded-lg border border-slate-300 px-3 py-2 text-sm" required>
                @foreach($classes as $class)
                    @foreach($class->students as $student)
                        <option value="{{ $student->user_id }}">{{ $student->user?->name }} - {{ $class->class_name }}</option>
                    @endforeach
                @endforeach
            </select>
            <input type="hidden" name="trainer_id" value="{{ $trainer->id }}">
            <input type="hidden" id="levelInput" name="level_id" value="{{ $classes->first()?->level_id }}">
            <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>
                Simpan 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-[760px] 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">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->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="6" class="p-8 text-center text-slate-500">Belum ada progres peserta.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
    {{ $progress->links() }}
</div>
<script>
document.getElementById('classSelect')?.addEventListener('change', function () {
    document.getElementById('levelInput').value = this.options[this.selectedIndex].dataset.level;
});
</script>
@endsection