@extends('layouts.app')

@section('content')
    <div class="space-y-6">
        <div class="rounded-2xl bg-[#4b1a22] p-6 text-amber-50 shadow-lg">
            <div class="flex flex-wrap items-center justify-between gap-4">
                <div>
                    <p class="text-xs uppercase tracking-[0.2em] text-amber-200">Fingerprint Control</p>
                    <h2 class="mt-2 text-3xl font-semibold">User Mesin Fingerprint</h2>
                    <p class="mt-1 text-sm text-amber-100/80">Tambah, update, dan monitor user yang tersimpan di mesin.</p>
                </div>
                <x-button href="{{ route('attendance.index') }}" variant="secondary">Lihat Log Absensi</x-button>
            </div>
        </div>

        <div class="grid gap-6 lg:grid-cols-2">
            <x-card class="border border-amber-100">
                <div class="flex items-start justify-between">
                    <div>
                        <h3 class="text-lg font-semibold text-slate-900">Tambah User Mesin</h3>
                        <p class="mt-1 text-sm text-slate-500">Request akan diproses oleh PC standby.</p>
                    </div>
                    <span class="inline-flex items-center rounded-full bg-emerald-100 px-2.5 py-1 text-xs font-semibold text-emerald-700">Add</span>
                </div>
                <form method="post" action="{{ route('attendance.users.store') }}" class="mt-5 grid gap-4 md:grid-cols-3">
                    @csrf
                    <input type="hidden" name="action" value="add">
                    <x-input name="pin" label="PIN" required />
                    <x-input name="name" label="Nama" required />
                    <div class="flex items-end">
                        <x-button type="submit" class="w-full">Kirim</x-button>
                    </div>
                </form>
            </x-card>
            <x-card class="border border-amber-100">
                <div class="flex items-start justify-between">
                    <div>
                        <h3 class="text-lg font-semibold text-slate-900">Update User Mesin</h3>
                        <p class="mt-1 text-sm text-slate-500">Gunakan tombol update pada daftar user.</p>
                    </div>
                    <span class="inline-flex items-center rounded-full bg-amber-100 px-2.5 py-1 text-xs font-semibold text-amber-700">Update</span>
                </div>
                <div class="mt-6 rounded-xl border border-dashed border-amber-200 bg-amber-50/60 p-5 text-sm text-amber-800">
                    Pilih user pada tabel, lalu klik <span class="font-semibold">Update</span> untuk mengubah nama langsung melalui modal.
                </div>
            </x-card>
        </div>

        <x-card>
            <div class="flex flex-wrap items-center justify-between gap-3">
                <div>
                    <h3 class="text-lg font-semibold text-slate-900">Daftar User</h3>
                    <p class="text-xs text-slate-500">Data user yang sudah tersimpan di server.</p>
                </div>
                <form method="get" class="flex w-full max-w-xs items-center gap-2">
                    <input type="text" name="q" value="{{ $search }}" class="w-full rounded-lg border border-slate-200 px-3 py-2 text-sm" placeholder="Cari PIN / Nama...">
                    <x-button type="submit" variant="secondary">Cari</x-button>
                </form>
            </div>
            <x-table class="mt-4">
                <thead class="bg-slate-50 text-xs uppercase text-slate-500">
                    <tr>
                        <th class="px-4 py-3">PIN</th>
                        <th class="px-4 py-3">Nama</th>
                        <th class="px-4 py-3">Card</th>
                        <th class="px-4 py-3">Privilege</th>
                        <th class="px-4 py-3">Group</th>
                        <th class="px-4 py-3 text-right">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($users as $user)
                        <tr class="border-b border-slate-100">
                            <td class="px-4 py-3 font-semibold text-slate-800">{{ $user->pin }}</td>
                            <td class="px-4 py-3">{{ $user->name ?? '-' }}</td>
                            <td class="px-4 py-3">{{ $user->card ?? '-' }}</td>
                            <td class="px-4 py-3">{{ $user->privilege ?? '-' }}</td>
                            <td class="px-4 py-3">{{ $user->group ?? '-' }}</td>
                            <td class="px-4 py-3 text-right">
                                <button type="button"
                                    class="inline-flex items-center gap-2 rounded-lg border border-amber-200 bg-amber-50 px-3 py-1.5 text-xs font-semibold text-amber-700 hover:bg-amber-100"
                                    data-update-pin="{{ $user->pin }}"
                                    data-update-name="{{ $user->name }}"
                                >
                                    Update
                                </button>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td class="px-4 py-6 text-center text-slate-500" colspan="6">Belum ada user.</td>
                        </tr>
                    @endforelse
                </tbody>
            </x-table>
            <div class="mt-4">{{ $users->links() }}</div>
        </x-card>

        <x-card>
            <div class="flex items-center justify-between">
                <div>
                    <h3 class="text-lg font-semibold text-slate-900">Riwayat Request</h3>
                    <p class="text-xs text-slate-500">Pantau status pengiriman ke mesin.</p>
                </div>
            </div>
            <x-table class="mt-4">
                <thead class="bg-slate-50 text-xs uppercase text-slate-500">
                    <tr>
                        <th class="px-4 py-3">PIN</th>
                        <th class="px-4 py-3">Nama</th>
                        <th class="px-4 py-3">Aksi</th>
                        <th class="px-4 py-3">Status</th>
                        <th class="px-4 py-3">Pesan</th>
                        <th class="px-4 py-3">Waktu</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($requests as $req)
                        <tr class="border-b border-slate-100">
                            <td class="px-4 py-3 font-semibold text-slate-800">{{ $req->pin }}</td>
                            <td class="px-4 py-3">{{ $req->name }}</td>
                            <td class="px-4 py-3">{{ ucfirst($req->action ?? 'add') }}</td>
                            <td class="px-4 py-3">
                                <x-badge :color="$req->status === 'success' ? 'green' : ($req->status === 'failed' ? 'red' : 'yellow')">
                                    {{ ucfirst($req->status) }}
                                </x-badge>
                            </td>
                            <td class="px-4 py-3">{{ $req->message ?? '-' }}</td>
                            <td class="px-4 py-3">{{ $req->created_at?->format('d-m-Y H:i') }}</td>
                        </tr>
                    @empty
                        <tr>
                            <td class="px-4 py-6 text-center text-slate-500" colspan="6">Belum ada request.</td>
                        </tr>
                    @endforelse
                </tbody>
            </x-table>
            <div class="mt-4">{{ $requests->links() }}</div>
        </x-card>
    </div>

    <div id="update-user-modal" class="fixed inset-0 z-50 hidden items-center justify-center bg-slate-900/60 p-4">
        <div class="w-full max-w-lg rounded-2xl bg-white p-6 shadow-xl">
            <div class="flex items-center justify-between">
                <h3 class="text-lg font-semibold text-slate-900">Update User Mesin</h3>
                <button type="button" id="close-update-user" class="text-slate-400 hover:text-slate-600">&times;</button>
            </div>
            <p class="mt-2 text-sm text-slate-500">Perbarui nama sesuai PIN user yang dipilih.</p>
            <form method="post" action="{{ route('attendance.users.store') }}" class="mt-5 grid gap-4">
                @csrf
                <input type="hidden" name="action" value="update">
                <x-input name="pin" label="PIN" required id="update-user-pin" />
                <x-input name="name" label="Nama Baru" required id="update-user-name" />
                <div class="flex justify-end gap-3">
                    <x-button type="button" variant="secondary" id="cancel-update-user">Batal</x-button>
                    <x-button type="submit">Simpan</x-button>
                </div>
            </form>
        </div>
    </div>

    <script>
        const updateModal = document.getElementById('update-user-modal');
        const updatePin = document.getElementById('update-user-pin');
        const updateName = document.getElementById('update-user-name');
        const closeUpdate = document.getElementById('close-update-user');
        const cancelUpdate = document.getElementById('cancel-update-user');

        document.querySelectorAll('[data-update-pin]').forEach((btn) => {
            btn.addEventListener('click', () => {
                updatePin.value = btn.dataset.updatePin || '';
                updateName.value = btn.dataset.updateName || '';
                updateModal.classList.remove('hidden');
                updateModal.classList.add('flex');
                setTimeout(() => updateName.focus(), 50);
            });
        });

        function closeUpdateModal() {
            updateModal.classList.add('hidden');
            updateModal.classList.remove('flex');
        }

        closeUpdate?.addEventListener('click', closeUpdateModal);
        cancelUpdate?.addEventListener('click', closeUpdateModal);
        updateModal?.addEventListener('click', (event) => {
            if (event.target === updateModal) {
                closeUpdateModal();
            }
        });
    </script>
@endsection
