@extends('layouts.kiosk')

@section('title', 'Pilih Mode Scanner — ' . ($kioskToken?->kiosk_name ?? 'Kiosk'))

@section('content')
<main class="bg-gray-50 dark:bg-gray-900 min-h-screen"
      x-data="{
          clock: '',
          init() {
              this.updateClock();
              setInterval(() => this.updateClock(), 1000);
          },
          updateClock() {
              const now = new Date();
              this.clock = now.toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
          }
      }"
      x-init="init()">
    
    <div class="flex flex-col items-center justify-center px-6 pt-8 mx-auto md:h-screen dark:bg-gray-900">

        {{-- Brand & Clock --}}
        <div class="text-center mb-8">
            <div class="flex items-center justify-center mb-4 text-2xl font-semibold dark:text-white text-gray-900">
                <div class="w-10 h-10 bg-primary-700 rounded-full flex items-center justify-center mr-3">
                    <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M10.394 2.08a1 1 0 00-.788 0l-7 3a1 1 0 000 1.84L5.25 8.051a.999.999 0 01.356-.257l4-1.714a1 1 0 11.788 1.838L7.667 9.088l1.94.831a1 1 0 00.787 0l7-3a1 1 0 000-1.838l-7-3z"/>
                        <path d="M3.31 9.397L5 10.12v4.102a8.969 8.969 0 00-1.05-.174 1 1 0 01-.89-.89 11.115 11.115 0 01.25-3.762zM9.3 16.573A9.026 9.026 0 007 14.935v-3.957l1.818.78a3 3 0 002.364 0l5.508-2.361a11.026 11.026 0 01.25 3.762 1 1 0 01-.89.89 8.968 8.968 0 00-5.35 2.524 1 1 0 01-1.4 0zM6 18a1 1 0 001-1v-2.065a8.935 8.935 0 00-2-.712V17a1 1 0 001 1z"/>
                    </svg>
                </div>
                <span>{{ config('app.name', 'Sistem Absensi Digital') }}</span>
            </div>
            
            <div class="text-3xl font-mono font-bold text-gray-900 dark:text-white tabular-nums tracking-tight" x-text="clock">--:--:--</div>
            <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">{{ now()->translatedFormat('d F Y') }}</p>
        </div>

        {{-- Card Mode --}}
        <div class="w-full max-w-2xl p-6 sm:p-8 bg-white rounded-xl shadow-lg dark:bg-gray-800 border border-gray-100 dark:border-gray-700">
            
            <div class="text-center mb-6">
                <h2 class="text-2xl font-bold text-gray-900 dark:text-white">Pilih Mode Scanner</h2>
                <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                    Kiosk <strong class="dark:text-gray-300">{{ $kioskToken?->kiosk_name ?? 'Kiosk' }}</strong> siap digunakan. Pilih akses:
                </p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                {{-- Check-In --}}
                <a href="{{ route('kiosk.scanner.checkin', $token) }}"
                   class="flex flex-col items-center justify-center p-6 bg-gray-50 border border-gray-200 rounded-lg hover:bg-gray-100 dark:bg-gray-700 dark:border-gray-600 dark:hover:bg-gray-600 transition-colors focus:ring-4 focus:outline-none focus:ring-gray-100 dark:focus:ring-gray-800">
                    <span class="mb-3 inline-flex items-center justify-center w-12 h-12 rounded-full bg-green-100 text-green-600 dark:bg-green-900/50 dark:text-green-400">
                        <svg class="w-6 h-6" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 12H4m12 0-4 4m4-4-4-4m3-4h2a3 3 0 0 1 3 3v10a3 3 0 0 1-3 3h-2"/>
                        </svg>
                    </span>
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Check-In</h3>
                    <p class="text-sm mt-1 text-gray-500 dark:text-gray-400 text-center">Catat kehadiran masuk</p>
                </a>

                {{-- Check-Out --}}
                <a href="{{ route('kiosk.scanner.checkout', $token) }}"
                   class="flex flex-col items-center justify-center p-6 bg-gray-50 border border-gray-200 rounded-lg hover:bg-gray-100 dark:bg-gray-700 dark:border-gray-600 dark:hover:bg-gray-600 transition-colors focus:ring-4 focus:outline-none focus:ring-gray-100 dark:focus:ring-gray-800">
                    <span class="mb-3 inline-flex items-center justify-center w-12 h-12 rounded-full bg-blue-100 text-blue-600 dark:bg-blue-900/50 dark:text-blue-400">
                        <svg class="w-6 h-6" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H8m12 0-4 4m4-4-4-4M9 4H7a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h2"/>
                        </svg>
                    </span>
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Check-Out</h3>
                    <p class="text-sm mt-1 text-gray-500 dark:text-gray-400 text-center">Catat kehadiran pulang</p>
                </a>
            </div>

            <div class="mt-6 flex p-4 text-sm text-gray-800 border border-gray-300 rounded-lg bg-gray-50 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-600">
                <svg class="flex-shrink-0 inline w-4 h-4 mr-3 mt-0.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                    <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
                </svg>
                <div>
                    <span class="font-medium">Mengingatkan:</span> Mode Check-In hanya berlaku bagi siswa dan guru di awal sesi. Sedangkan Mode Check-Out hanya berlaku apabila Check-In sudah tercatat.
                </div>
            </div>

        </div>

        <p class="mt-6 text-sm text-gray-500 dark:text-gray-400 flex items-center gap-2">
            Token: <span class="font-mono bg-gray-200 dark:bg-gray-800 px-2 py-0.5 rounded text-xs">{{ Str::limit($token, 16, '...') }}</span>
        </p>
    </div>
</main>
@endsection