<div>
    @if($toast)
        <div x-data="{show: true}" x-show="show" x-init="setTimeout(() => show = false, 3000)"
             class="mb-3 flex items-center gap-2 bg-emerald-50 border border-emerald-200 text-emerald-700 rounded-xl px-4 py-2.5 text-sm font-semibold">
            ✓ {{ $toast }}
        </div>
    @endif

    <div class="bg-white rounded-2xl p-5 shadow-sm space-y-3">
        <select wire:model="quiz_id" class="w-full rounded-xl border border-gray-200 px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-red-400/30 transition">
            <option value="">Select Quiz…</option>
            @foreach($quizzes as $quiz)
                <option value="{{ $quiz->id }}">{{ $quiz->title }} ({{ $quiz->quiz_date->format('M j') }})</option>
            @endforeach
        </select>

        <select wire:model="student_id" class="w-full rounded-xl border border-gray-200 px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-red-400/30 transition">
            <option value="">Select Student…</option>
            @foreach($students as $student)
                <option value="{{ $student->id }}">{{ $student->name }}</option>
            @endforeach
        </select>

        <div class="grid grid-cols-2 gap-3">
            <input wire:model="score" type="number" min="0" max="100" placeholder="Score /100"
                   class="rounded-xl border border-gray-200 px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-red-400/30 transition">
            <input wire:model="remarks" type="text" placeholder="Remarks (optional)"
                   class="rounded-xl border border-gray-200 px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-red-400/30 transition">
        </div>

        @foreach(['quiz_id','student_id','score'] as $field)
            @error($field) <p class="text-red-500 text-xs">{{ $message }}</p> @enderror
        @endforeach

        <button wire:click="save" wire:loading.attr="disabled"
                class="w-full bg-[#ED1C24] text-white rounded-xl py-3 font-bold text-sm hover:bg-red-700 transition disabled:opacity-60">
            <span wire:loading.remove>Save & Enter Next ↵</span>
            <span wire:loading>Saving…</span>
        </button>
    </div>
</div>
