@extends('layouts.siswa')

@section('title', 'Verifikasi Token')
@section('header', 'Verifikasi Token Ujian')

@section('content')
<div class="bg-white rounded-lg shadow max-w-md mx-auto">
    <div class="p-6 border-b text-center">
        <i class="fas fa-key text-4xl text-purple-600 mb-2"></i>
        <h2 class="text-xl font-semibold">Masukkan Token Ujian</h2>
        <p class="text-gray-500 text-sm">Masukkan token yang diberikan oleh guru</p>
    </div>
    
    <form action="{{ route('siswa.ujian.verifikasi-token') }}" method="POST" class="p-6">
        @csrf
        <input type="hidden" name="paket_id" value="{{ $paket->id ?? '' }}">
        
        <div class="mb-4">
            <label class="block text-gray-700 font-semibold mb-2">Token Ujian</label>
            <input type="text" name="token" required 
                class="w-full border rounded-lg p-3 text-center text-2xl font-mono tracking-wider focus:outline-none focus:border-purple-500"
                placeholder="XXXXXX"
                autocomplete="off">
            @error('token')
                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
            @enderror
        </div>
        
        <button type="submit" class="w-full bg-purple-600 text-white py-3 rounded-lg hover:bg-purple-700 transition">
            <i class="fas fa-check mr-2"></i> Verifikasi & Lanjutkan
        </button>
    </form>
    
    <div class="p-6 border-t bg-gray-50">
        <p class="text-sm text-gray-500 text-center">
            <i class="fas fa-info-circle mr-1"></i> 
            Token ujian didapatkan dari guru pengawas
        </p>
    </div>
</div>
@endsection