@extends('layouts.app')

@section('title', 'Kelola Peserta')

@section('content')
<div class="space-y-4 md:space-y-6">
    <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3">
        <div>
            <h1 class="text-xl md:text-2xl font-bold text-gray-800">Kelola Peserta</h1>
            <p class="text-gray-500 text-sm">{{ $exam->title }}</p>
        </div>
        <a href="{{ route('dosen.exams.index') }}" class="text-gray-600 hover:text-gray-800 text-sm font-medium"><i class="fas fa-arrow-left mr-1"></i>Kembali</a>
    </div>

    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
        <div class="px-4 md:px-6 py-3 md:py-4 border-b border-gray-100">
            <h2 class="font-semibold text-sm md:text-base">Peserta Terdaftar ({{ $exam->participants->count() }})</h2>
        </div>
        <div class="divide-y divide-gray-100">
            @forelse($exam->participants as $p)
                <div class="px-4 md:px-6 py-3 md:py-4 flex justify-between items-center">
                    <div>
                        <p class="font-medium text-sm">{{ $p->user->name }} ({{ $p->user->identifier }})</p>
                        <p class="text-xs text-gray-500">Status: <span class="capitalize">{{ $p->status }}</span></p>
                    </div>
                </div>
            @empty
                <div class="px-4 md:px-6 py-8 text-center text-gray-500 text-sm">Belum ada peserta.</div>
            @endforelse
        </div>
    </div>

    @if($mahasiswas->count())
    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-4 md:p-6">
        <h2 class="font-semibold mb-3 md:mb-4 text-sm md:text-base">Tambah Peserta</h2>
        <form action="{{ route('dosen.exams.assignParticipants', $exam) }}" method="POST">
            @csrf
            <div class="space-y-2 max-h-80 md:max-h-96 overflow-y-auto mb-4">
                @foreach($mahasiswas as $m)
                <label class="flex items-center gap-3 p-3 border rounded-xl hover:bg-gray-50 cursor-pointer transition active:scale-[0.99]">
                    <input type="checkbox" name="user_ids[]" value="{{ $m->id }}" class="rounded text-blue-600 focus:ring-blue-500 w-4 h-4">
                    <span class="text-sm">{{ $m->name }} ({{ $m->identifier }})</span>
                </label>
                @endforeach
            </div>
            <button type="submit" class="bg-gradient-to-r from-blue-600 to-indigo-600 text-white px-6 py-2.5 rounded-xl hover:from-blue-700 hover:to-indigo-700 transition text-sm font-medium shadow-lg shadow-blue-200 active:scale-[0.98]">
                <i class="fas fa-plus mr-2"></i> Tambahkan Peserta
            </button>
        </form>
    </div>
    @endif
</div>
@endsection