@extends('layouts.app')
@section('title', 'Kiosk Token')
@section('content')
<div x-data="{
    showModal: false,
    formData: {},
    openCreate() {
        this.formData = {
            is_active: true,
        };
        this.showModal = true;
    },
    openEdit(data) { this.formData = data; this.showModal = true; },
}">
    <div class="flex items-center justify-between mb-6">
        <div>
            <h1 class="text-2xl font-semibold text-gray-900 dark:text-white">Kiosk Token</h1>
            <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Kelola token otorisasi browser kiosk.</p>
        </div>
        <button @click="openCreate()"
            class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-primary-700 rounded-lg hover:bg-primary-800">
            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd"
                    d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z"
                    clip-rule="evenodd" />
            </svg>
            Tambah Token Kiosk
        </button>
    </div>

    @if(session('success'))<x-alert type="success">{{ session('success') }}</x-alert>@endif
    @if ($errors->any())
    <x-alert type="danger">{{ $errors->first() }}</x-alert>
    @endif

    <x-filter-bar>
        <x-slot:fields>
            <div>
                <label class="block mb-1 text-xs font-medium text-gray-700 dark:text-gray-300">Status</label>
                <select name="status"
                    class="bg-gray-50 border border-gray-300 text-gray-900 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:text-white">
                    <option value="">Semua Status</option>
                    <option value="1" {{ request('status')==='1' ? 'selected' : '' }}>Aktif</option>
                    <option value="0" {{ request('status')==='0' ? 'selected' : '' }}>Non-aktif</option>
                </select>
            </div>
            <div>
                <label class="block mb-1 text-xs font-medium text-gray-700 dark:text-gray-300">Cari</label>
                <input type="text" name="search" value="{{ request('search') }}"
                    placeholder="Nama kiosk, device, atau token..."
                    class="bg-gray-50 border border-gray-300 text-gray-900 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:text-white">
            </div>
        </x-slot:fields>
    </x-filter-bar>

    <div class="bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700 mt-4">
        <x-data-table>
            <x-slot:heading>
                <th class="px-4 py-3">Kiosk</th>
                <th class="px-4 py-3">Device Identifier</th>
                <th class="px-4 py-3">Token</th>
                <th class="px-4 py-3">Expired</th>
                <th class="px-4 py-3">Status</th>
                <th class="px-4 py-3">Dibuat Oleh</th>
                <th class="px-4 py-3 text-right">Aksi</th>
            </x-slot:heading>
            <x-slot:body>
                @forelse($tokens ?? [] as $token)
                <tr class="hover:bg-gray-50 dark:hover:bg-gray-700">
                    <td class="px-4 py-3 font-medium text-gray-900 dark:text-white">{{ $token->kiosk_name }}</td>
                    <td class="px-4 py-3 text-gray-600 dark:text-gray-300">{{ $token->device_identifier }}</td>
                    <td class="px-4 py-3">
                        <div class="flex items-center gap-2">
                            <code
                                class="text-xs text-gray-500 dark:text-gray-400 truncate max-w-45">{{ $token->token }}</code>
                            <button type="button" onclick="navigator.clipboard.writeText('{{ $token->token }}')"
                                class="text-xs text-primary-600 hover:underline dark:text-primary-400">Salin</button>
                        </div>
                    </td>
                    <td class="px-4 py-3 text-gray-600 dark:text-gray-300">{{ optional($token->expires_at)?->format('d M
                        Y H:i') ?? '-' }}</td>
                    <td class="px-4 py-3">
                        <x-badge :color="$token->is_active ? 'green' : 'red'">{{ $token->is_active ? 'Aktif' :
                            'Non-aktif' }}</x-badge>
                    </td>
                    <td class="px-4 py-3 text-gray-600 dark:text-gray-300">{{ $token->creator?->name ?? '-' }}</td>
                    <td class="px-4 py-3 text-right">
                        <div class="flex items-center justify-end gap-2">
                            <a href="{{ route('kiosk.scanner.options', $token->token) }}" target="_blank"
                                class="text-xs font-medium text-emerald-600 hover:underline dark:text-emerald-400">Buka
                                Kiosk</a>
                            <button @click="openEdit({{ json_encode([
                                'id' => $token->id,
                                'kiosk_name' => $token->kiosk_name,
                                'device_identifier' => $token->device_identifier,
                                'expires_at' => optional($token->expires_at)->format('Y-m-d\\TH:i'),
                                'is_active' => $token->is_active,
                            ]) }})"
                                class="text-xs font-medium text-primary-600 hover:underline dark:text-primary-400">Edit</button>
                            <form action="{{ route('admin.kiosk-tokens.toggle', $token) }}" method="POST"
                                class="inline">
                                @csrf
                                @method('PATCH')
                                <button type="submit"
                                    class="text-xs font-medium text-yellow-600 hover:underline dark:text-yellow-400">{{
                                    $token->is_active ? 'Nonaktifkan' : 'Aktifkan' }}</button>
                            </form>
                            <form action="{{ route('admin.kiosk-tokens.destroy', $token) }}" method="POST"
                                class="inline" onsubmit="return confirm('Hapus token kiosk ini?')">
                                @csrf
                                @method('DELETE')
                                <button type="submit"
                                    class="text-xs font-medium text-red-600 hover:underline dark:text-red-400">Hapus</button>
                            </form>
                        </div>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="7" class="px-4 py-8 text-center text-gray-400">Belum ada token kiosk</td>
                </tr>
                @endforelse
            </x-slot:body>
            @if(isset($tokens) && $tokens->hasPages())
            <x-slot:pagination>{{ $tokens->withQueryString()->links() }}</x-slot:pagination>
            @endif
        </x-data-table>
    </div>

    <x-modal :show="'showModal'" title="Token Kiosk" size="md">
        <form id="kiosk-token-form"
            :action="formData.id ? '{{ url('admin/kiosk-tokens') }}/' + formData.id : '{{ route('admin.kiosk-tokens.store') }}'"
            method="POST" class="space-y-4">
            @csrf
            <template x-if="formData.id">
                <input type="hidden" name="_method" value="PUT">
            </template>
            <div>
                <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Nama Kiosk</label>
                <input type="text" name="kiosk_name" x-model="formData.kiosk_name" required
                    class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
            </div>
            <div>
                <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Device Identifier</label>
                <input type="text" name="device_identifier" x-model="formData.device_identifier" required
                    class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
            </div>
            <div>
                <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Kadaluarsa</label>
                <input type="datetime-local" name="expires_at" x-model="formData.expires_at" required
                    class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
            </div>
            <label class="inline-flex items-center gap-2 cursor-pointer">
                <input type="checkbox" name="is_active" value="1" x-model="formData.is_active"
                    class="rounded border-gray-300 text-primary-600 focus:ring-primary-500">
                <span class="text-sm text-gray-700 dark:text-gray-300">Token aktif</span>
            </label>
            <x-slot:footer>
                <button type="button" @click="showModal = false"
                    class="px-5 py-2.5 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600">Batal</button>
                <button type="submit" form="kiosk-token-form"
                    class="px-5 py-2.5 text-sm font-medium text-white bg-primary-700 rounded-lg hover:bg-primary-800">Simpan</button>
            </x-slot:footer>
        </form>
    </x-modal>
</div>
@endsection