@extends('layouts.kiosk')

@section('title', 'Masuk Kiosk Scanner')

@section('content')
<main class="bg-gray-50 dark:bg-gray-900 min-h-screen">
    <div class="flex flex-col items-center justify-center px-6 pt-8 mx-auto md:h-screen dark:bg-gray-900">

        {{-- Logo & Brand --}}
        <div class="flex items-center justify-center mb-8 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>

        {{-- Card Kiosk Token --}}
        <div class="w-full max-w-md p-6 space-y-6 sm:p-8 bg-white rounded-xl shadow-lg dark:bg-gray-800 border border-gray-100 dark:border-gray-700" 
             x-data="{ submitting: false }">

            <div>
                <h2 class="text-2xl font-bold text-gray-900 dark:text-white">Masuk ke Kiosk</h2>
                <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Masukkan token perangkat absensi.</p>
            </div>

            {{-- Errors --}}
            @if ($errors->any() || session('error'))
                <x-alert type="danger" :dismissible="false">
                    @if(session('error'))
                        <div>{{ session('error') }}</div>
                    @endif
                    @foreach($errors->all() as $error)
                        <div>{{ $error }}</div>
                    @endforeach
                </x-alert>
            @endif

            <form class="space-y-5" method="POST" action="{{ route('kiosk.submitToken') }}" @submit="submitting = true">
                @csrf

                <div x-data="{ tokenVal: @js(old('token', '')) }">
                    <label for="token" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Token Kiosk</label>
                    <textarea
                        id="token"
                        name="token"
                        rows="2"
                        x-model="tokenVal"
                        @input="tokenVal = $event.target.value"
                        placeholder="Scan / Tempel token di sini"
                        autocomplete="off"
                        autocorrect="off"
                        autocapitalize="off"
                        spellcheck="false"
                        required
                        :readonly="submitting"
                        class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500 @error('token') border-red-500 @enderror font-mono resize-none"></textarea>
                    
                    <div class="mt-2 text-xs text-gray-500 dark:text-gray-400 flex justify-between">
                        <span>Pastikan 64 karakter</span>
                        <span :class="tokenVal.trim().length === 64 ? 'text-green-600 dark:text-green-400 font-semibold' : ''" x-text="tokenVal.trim().length + '/64'"></span>
                    </div>
                </div>

                {{-- Submit --}}
                <button type="submit"
                    :disabled="submitting"
                    :class="submitting ? 'opacity-70 cursor-not-allowed' : ''"
                    class="w-full px-5 py-3 text-base font-medium text-center text-white bg-primary-700 rounded-lg hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800 transition-colors">
                    <span x-show="!submitting">Masuk</span>
                    <span x-show="submitting" class="flex items-center justify-center gap-2">
                        <svg class="animate-spin h-5 w-5" fill="none" viewBox="0 0 24 24">
                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
                        </svg>
                        Memverifikasi...
                    </span>
                </button>
            </form>
        </div>

        <p class="mt-6 text-sm text-gray-500 dark:text-gray-400">
            &copy; {{ date('Y') }} {{ config('app.name') }}. Kiosk Scanner.
        </p>
    </div>
</main>
@endsection