@extends('layouts.app')

@section('title', 'Check-in Tamu')

@section('content')
    <x-section.card
        title="Cari Tamu"
        subtitle="Masukkan NIK atau arahkan barcode scanner ke kolom input untuk otomatis mengisi."
    >
        <form action="{{ route('guests.search') }}" method="POST" class="space-y-4" id="guest-find-form">
            @csrf
            <x-form.input-text name="nik" id="nik" label="Nomor Induk Kependudukan (NIK)" placeholder="Masukkan atau scan NIK" autofocus />

            <div class="flex items-center gap-3">
                <button type="submit" class="inline-flex items-center text-white justify-center rounded-md glass-effect hover:bg-white hover:text-gray-800 transition-all-smooth px-4 py-2 text-sm font-medium">
                    Cari Tamu
                </button>
                <button type="button" id="clearNik" class="inline-flex items-center text-white justify-center rounded-md glass-effect hover:bg-red-500 hover:text-white transition-all-smooth px-4 py-2 text-sm font-medium">Bersihkan</button>
            </div>
        </form>

        @if (session('success'))
            <div class="mt-4 text-white-400 text-sm">Success: {{ session('success') }}</div>
        @endif
        @if ($errors->any())
            <div class="mt-4 text-white-400 text-sm">Fail: {{ $errors->first() }}</div>
        @endif

        <script>
            document.addEventListener('DOMContentLoaded', () => {
                const nikInput = document.getElementById('nik');
                const clearBtn = document.getElementById('clearNik');

                if (nikInput) {
                    nikInput.addEventListener('keydown', (e) => {
                        // Many USB barcode scanners end input with Enter
                        if (e.key === 'Enter') {
                            e.preventDefault();
                            e.target.form?.submit();
                        }
                    });
                }

                clearBtn?.addEventListener('click', () => {
                    nikInput.value = '';
                    nikInput.focus();
                });
            });
        </script>
    </x-section.card>
@endsection