@extends('layouts.app')

@section('title', 'Absensi Karyawan')

@section('content')
<div class="mx-auto max-w-3xl space-y-6">
    <x-card title="Absensi Karyawan" subtitle="Scan barcode/QR guru atau admin. Sistem otomatis absen saat Enter tanpa perlu klik tombol.">
        <form id="scan-form" class="space-y-3">
            @csrf
            <div>
                <label for="identifier" class="mb-1 block text-sm font-semibold text-slate-700">Scan Barcode atau Input NIG</label>
                <input
                    type="text"
                    id="identifier"
                    name="identifier"
                    autocomplete="off"
                    autocapitalize="off"
                    spellcheck="false"
                    required
                    class="w-full rounded-xl border border-slate-200 bg-white px-3 py-2.5 text-sm shadow-sm outline-none transition focus:border-brand-400 focus:ring-4 focus:ring-brand-200"
                    placeholder="Arahkan scanner ke sini..."
                >
                <p class="mt-2 text-xs text-slate-500">Scan pertama = absen masuk, scan berikutnya = absen pulang. Jam selalu mengikuti waktu server terakhir.</p>
            </div>
        </form>
    </x-card>

    <x-card title="Hasil Terakhir" subtitle="Informasi absensi setelah scan berhasil.">
        <div id="empty-state" class="rounded-xl border border-dashed border-slate-300 bg-slate-50 px-4 py-3 text-sm text-slate-600">
            Silakan scan barcode atau input NIG terlebih dahulu.
        </div>

        <div id="result-panel" class="hidden space-y-4">
            <dl class="grid grid-cols-1 gap-3 md:grid-cols-2">
                <div class="rounded-xl border border-slate-200 bg-white p-3">
                    <dt class="text-xs font-bold uppercase tracking-wide text-slate-500">Nama</dt>
                    <dd id="result-nama" class="mt-1 text-sm font-semibold text-slate-900">-</dd>
                </div>
                <div class="rounded-xl border border-slate-200 bg-white p-3">
                    <dt class="text-xs font-bold uppercase tracking-wide text-slate-500">NIG</dt>
                    <dd id="result-nig" class="mt-1 text-sm font-semibold text-slate-900">-</dd>
                </div>
                <div class="rounded-xl border border-slate-200 bg-white p-3">
                    <dt class="text-xs font-bold uppercase tracking-wide text-slate-500">Jabatan</dt>
                    <dd id="result-jabatan" class="mt-1 text-sm font-semibold text-slate-900">-</dd>
                </div>
                <div class="rounded-xl border border-slate-200 bg-white p-3">
                    <dt class="text-xs font-bold uppercase tracking-wide text-slate-500">Status Absensi Hari Ini</dt>
                    <dd id="result-status" class="mt-1 text-sm font-semibold text-slate-900">-</dd>
                </div>
            </dl>

            <div class="rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-700">
                <div>Jam Masuk: <strong id="result-jam-masuk">-</strong></div>
                <div>Jam Pulang: <strong id="result-jam-keluar">-</strong></div>
            </div>
        </div>
    </x-card>
</div>

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
(() => {
    const form = document.getElementById('scan-form');
    const input = document.getElementById('identifier');
    const emptyState = document.getElementById('empty-state');
    const resultPanel = document.getElementById('result-panel');
    const scanUrl = "{{ route('absensi-karyawan.scan') }}";
    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') ?? '';
    let isProcessing = false;

    const setText = (id, value) => {
        const el = document.getElementById(id);
        if (el) {
            el.textContent = value ?? '-';
        }
    };

    const focusInput = () => input.focus();

    const renderResult = (data) => {
        setText('result-nama', data.nama);
        setText('result-nig', data.nig);
        setText('result-jabatan', data.jabatan);
        setText('result-status', data.status_label);
        setText('result-jam-masuk', data.jam_masuk ?? '-');
        setText('result-jam-keluar', data.jam_keluar ?? '-');
        emptyState.classList.add('hidden');
        resultPanel.classList.remove('hidden');
    };

    const submitScan = async () => {
        if (isProcessing) {
            return;
        }

        const identifier = input.value.trim();
        input.value = '';

        if (!identifier) {
            focusInput();
            return;
        }

        isProcessing = true;

        try {
            const response = await fetch(scanUrl, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json',
                    'X-CSRF-TOKEN': csrfToken,
                },
                credentials: 'same-origin',
                body: JSON.stringify({ identifier }),
            });

            const result = await response.json();

            if (!response.ok || !result.ok) {
                await Swal.fire({
                    icon: 'error',
                    title: 'Gagal',
                    text: result.message ?? 'Absensi gagal diproses.',
                });
                focusInput();
                return;
            }

            renderResult(result.data);

            await Swal.fire({
                icon: 'success',
                title: 'Berhasil',
                text: result.message ?? 'Absensi berhasil dicatat.',
                timer: 1500,
                showConfirmButton: false,
            });
        } catch (error) {
            await Swal.fire({
                icon: 'error',
                title: 'Gagal',
                text: 'Terjadi kesalahan saat memproses scan.',
            });
        } finally {
            isProcessing = false;
            focusInput();
        }
    };

    form.addEventListener('submit', async (event) => {
        event.preventDefault();
        await submitScan();
    });

    focusInput();
})();
</script>
@endsection