@extends('layouts.guru')
@section('title', 'Absensi Siswa')
@section('page-title', 'Absensi Siswa')
@section('guru-content')
<div class="mb-6 flex flex-wrap items-center justify-between gap-3">
    <div>
        <div class="text-xs font-bold uppercase tracking-wide text-slate-500">Kelas</div>
        <div class="text-xl font-black text-slate-900">{{ $kelas->tingkat }} {{ $kelas->nama_kelas }}</div>
    </div>
    <div class="flex items-start gap-2">
        <div class="text-right">
            <div class="text-xs font-bold uppercase tracking-wide text-slate-500">Tanggal</div>
            <div class="text-sm font-semibold text-slate-900">{{ \Illuminate\Support\Carbon::parse($tanggal, config('app.timezone'))->translatedFormat('d F Y') }}</div>
            @if(!empty($jamMasukHariIni))
            <div class="mt-1 text-xs font-bold uppercase tracking-wide text-slate-500">Jam masuk</div>
            <div class="text-sm font-semibold text-brand-700">{{ $jamMasukHariIni }}</div>
            @endif
        </div>
        <a href="{{ route('guru.absensi.alpha-whatsapp') }}" class="inline-flex items-center rounded-xl border border-slate-200 bg-white px-3 py-2 text-xs font-semibold text-slate-700 hover:bg-slate-50">
            Notifikasi WA Alpha
        </a>
    </div>
</div>

@if($isLibur)
<div class="mb-6 rounded-2xl border border-amber-200 bg-amber-50 px-4 py-3 shadow-sm">
    <strong>Hari ini libur:</strong> {{ $keteranganLibur ?? 'Libur sekolah' }}. Absensi otomatis tercatat dan tidak dapat diubah.
</div>
<x-table title="Daftar Siswa" subtitle="Status otomatis: libur.">
    <table class="min-w-full divide-y divide-slate-200">
        <thead class="bg-slate-50"><tr><th class="px-5 py-3 text-left text-xs font-bold uppercase tracking-wide text-slate-500">No</th><th class="px-5 py-3 text-left text-xs font-bold uppercase tracking-wide text-slate-500">NIS</th><th class="px-5 py-3 text-left text-xs font-bold uppercase tracking-wide text-slate-500">Nama</th><th class="px-5 py-3 text-left text-xs font-bold uppercase tracking-wide text-slate-500">Status</th></tr></thead>
        <tbody class="divide-y divide-slate-200">
            @foreach($siswas as $i => $s)
            <tr class="hover:bg-slate-50/70">
                <td class="px-5 py-3 text-sm text-slate-600">{{ $i+1 }}</td>
                <td class="px-5 py-3 text-sm font-semibold text-slate-900">{{ $s->nis }}</td>
                <td class="px-5 py-3 text-sm text-slate-800">{{ $s->nama_lengkap }}</td>
                <td class="px-5 py-3 text-sm"><x-badge-status status="libur" /></td>
            </tr>
            @endforeach
        </tbody>
    </table>
</x-table>
@else
<x-card title="Input Cepat (NIS / Barcode)" subtitle="Tombol Barcode hanya mengisi field NIS, tidak langsung menyimpan.">
    <form action="{{ route('guru.absensi.store-nis') }}" method="POST" class="space-y-4" id="form-nis">
        @csrf
        
        <!-- Baris 1: NIS dan Keterangan sejajar -->
        <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
            <div>
                <label class="mb-1 block text-xs font-bold uppercase tracking-wide text-slate-500">NIS</label>
                <input type="text" name="nis" id="input-nis" placeholder="Masukkan NIS" 
                       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" required>
            </div>
            <div>
                <label class="mb-1 block text-xs font-bold uppercase tracking-wide text-slate-500">
                    Keterangan <span class="text-rose-500">(wajib untuk Sakit/Izin)</span>
                </label>
                <input type="text" name="keterangan" id="keterangan-nis" 
                       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="Contoh: Demam, Izin keluarga">
            </div>
        </div>

        <!-- Baris 2: Tombol aksi -->
        <div class="flex flex-wrap gap-2">
            <x-button type="submit" name="status" value="hadir" variant="secondary" size="sm">Hadir</x-button>
            <x-button type="submit" name="status" value="sakit" variant="ghost" size="sm" class="border-amber-200 text-amber-800 hover:bg-amber-50 focus:ring-amber-200">Sakit</x-button>
            <x-button type="submit" name="status" value="izin" variant="ghost" size="sm" class="border-sky-200 text-sky-800 hover:bg-sky-50 focus:ring-sky-200">Izin</x-button>
            <x-button type="submit" name="status" value="alpha" variant="ghost" size="sm" class="border-rose-200 text-rose-800 hover:bg-rose-50 focus:ring-rose-200">Alpha</x-button>
            
        </div>
    </form>
</x-card>

<x-card title="Absensi Barcode Scanner" subtitle="Arahkan kursor ke halaman ini, lalu scan barcode. Sistem akan otomatis simpan status hadir.">
    <div class="space-y-3">
        <div id="scanner-feedback" class="hidden rounded-xl border px-4 py-3 text-sm font-semibold"></div>

        <div class="rounded-xl border border-dashed border-slate-300 bg-slate-50 px-4 py-3">
            <p class="text-xs font-bold uppercase tracking-wide text-slate-500">Scanner Input</p>
            <p class="mt-1 text-sm text-slate-600">Field ini sengaja fokus otomatis untuk menangkap input dari scanner HID.</p>

            <input
                type="text"
                id="scanner-input"
                class="mt-3 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="Scan barcode siswa di sini..."
                autocomplete="off"
                autocapitalize="off"
                spellcheck="false"
            >
        </div>
    </div>
</x-card>

<form action="{{ route('guru.absensi.store-bulk') }}" method="POST" id="form-bulk">
    @csrf
    <x-table title="Absensi Manual" subtitle="Centang salah satu status. Keterangan aktif hanya untuk Sakit/Izin. Untuk Hadir, jam tiba & keterlambatan dihitung saat Anda menyimpan." class="mt-6">
        <table class="min-w-full divide-y divide-slate-200">
            <thead class="bg-slate-50">
                <tr>
                    <th class="px-5 py-3 text-left text-xs font-bold uppercase tracking-wide text-slate-500">No</th>
                    <th class="px-5 py-3 text-left text-xs font-bold uppercase tracking-wide text-slate-500">NIS</th>
                    <th class="px-5 py-3 text-left text-xs font-bold uppercase tracking-wide text-slate-500">Nama</th>
                    <th class="px-5 py-3 text-left text-xs font-bold uppercase tracking-wide text-slate-500">H</th>
                    <th class="px-5 py-3 text-left text-xs font-bold uppercase tracking-wide text-slate-500">S</th>
                    <th class="px-5 py-3 text-left text-xs font-bold uppercase tracking-wide text-slate-500">I</th>
                    <th class="px-5 py-3 text-left text-xs font-bold uppercase tracking-wide text-slate-500">A</th>
                    @if(!empty($absensiCatatWaktu))
                    <th class="px-5 py-3 text-left text-xs font-bold uppercase tracking-wide text-slate-500">Jam tiba</th>
                    @endif
                    <th class="px-5 py-3 text-left text-xs font-bold uppercase tracking-wide text-slate-500">Keterangan</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-200">
                @foreach($siswas as $i => $s)
                @php $abs = $absensiMap->get($s->nis); @endphp
                <tr class="hover:bg-slate-50/70">
                    <td class="px-5 py-3 text-sm text-slate-600">{{ $i+1 }}</td>
                    <td class="px-5 py-3 text-sm font-semibold text-slate-900">{{ $s->nis }}</td>
                    <td class="px-5 py-3 text-sm text-slate-800">{{ $s->nama_lengkap }}</td>
                    <td class="px-5 py-3"><input type="radio" name="absensi[{{ $i }}][status]" value="hadir" class="status-radio h-4 w-4 text-ink-700 focus:ring-4 focus:ring-brand-200" {{ ($abs && $abs->status=='hadir') ? 'checked' : '' }}></td>
                    <td class="px-5 py-3"><input type="radio" name="absensi[{{ $i }}][status]" value="sakit" class="status-radio h-4 w-4 text-ink-700 focus:ring-4 focus:ring-brand-200" {{ ($abs && $abs->status=='sakit') ? 'checked' : '' }}></td>
                    <td class="px-5 py-3"><input type="radio" name="absensi[{{ $i }}][status]" value="izin" class="status-radio h-4 w-4 text-ink-700 focus:ring-4 focus:ring-brand-200" {{ ($abs && $abs->status=='izin') ? 'checked' : '' }}></td>
                    <td class="px-5 py-3"><input type="radio" name="absensi[{{ $i }}][status]" value="alpha" class="status-radio h-4 w-4 text-ink-700 focus:ring-4 focus:ring-brand-200" {{ ($abs && $abs->status=='alpha') ? 'checked' : '' }}></td>
                    @if(!empty($absensiCatatWaktu))
                    <td class="px-5 py-3 text-sm text-slate-600">
                        @if($abs && $abs->waktu_catat)
                            <span class="font-semibold text-slate-800">{{ $abs->waktu_catat->timezone(config('app.timezone'))->format('H:i') }}</span>
                            @if((int) ($abs->menit_telat ?? 0) > 0)
                                <span class="ml-1 text-xs font-bold text-amber-700">Telat {{ (int) $abs->menit_telat }}m</span>
                            @endif
                        @else
                            <span class="text-slate-400">-</span>
                        @endif
                    </td>
                    @endif
                    <td class="px-5 py-3">
                        <input type="text" name="absensi[{{ $i }}][keterangan]" value="{{ $abs?->keterangan }}" class="keterangan-input w-40 rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm shadow-sm outline-none transition focus:border-brand-400 focus:ring-4 focus:ring-brand-200" placeholder="-" disabled>
                    </td>
                </tr>
                <input type="hidden" name="absensi[{{ $i }}][siswa_id]" value="{{ $s->nis }}">
                @endforeach
            </tbody>
        </table>
    </x-table>
    <div class="mt-4">
        <x-button type="submit" variant="secondary">Simpan Absensi</x-button>
    </div>
</form>

<script>
document.querySelectorAll('.status-radio').forEach((r) => {
    r.addEventListener('change', function () {
        const row = this.closest('tr');
        const keteranganInput = row.querySelector('.keterangan-input');
        const status = this.value;
        keteranganInput.disabled = !['sakit', 'izin'].includes(status);
        if (keteranganInput.disabled) keteranganInput.value = '';
    });
});

document.querySelector('#form-nis').addEventListener('submit', function (e) {
    const btn = e.submitter;
    if (btn && btn.name === 'status' && ['sakit', 'izin'].includes(btn.value)) {
        const ket = document.querySelector('#keterangan-nis');
        if (!ket || !ket.value.trim()) {
            e.preventDefault();
            alert('Keterangan wajib untuk Sakit/Izin');
            return false;
        }
    }
});

document.querySelector('#btn-barcode').addEventListener('click', function () {
    const nis = prompt('Scan barcode / Masukkan NIS:');
    if (nis) document.querySelector('#input-nis').value = nis;
});

document.querySelectorAll('#form-nis [type=submit][name=status]').forEach((btn) => {
    btn.addEventListener('click', function () {
        const ketWrap = document.getElementById('keterangan-wrap');
        if (['sakit', 'izin'].includes(this.value)) {
            ketWrap.classList.remove('hidden');
        } else {
            ketWrap.classList.add('hidden');
            document.getElementById('keterangan-nis').value = '';
        }
    });
});

(() => {
    const scannerInput = document.getElementById('scanner-input');
    const feedbackEl = document.getElementById('scanner-feedback');
    const scannerRoute = "{{ route('guru.absensi.scanner') }}";
    const getCsrfToken = () => window.HarvestSession?.getToken?.() ?? '';
    const cooldownMs = 3000;
    const localLastScanAt = new Map();

    if (!scannerInput || !feedbackEl) {
        return;
    }

    // Pastikan fokus kembali ke scanner input agar scan berikutnya tetap tertangkap.
    const focusScanner = () => {
        scannerInput.focus();
    };

    const showFeedback = (ok, message) => {
        feedbackEl.classList.remove('hidden', 'border-emerald-200', 'bg-emerald-50', 'text-emerald-700', 'border-rose-200', 'bg-rose-50', 'text-rose-700');
        if (ok) {
            feedbackEl.classList.add('border-emerald-200', 'bg-emerald-50', 'text-emerald-700');
        } else {
            feedbackEl.classList.add('border-rose-200', 'bg-rose-50', 'text-rose-700');
        }
        feedbackEl.textContent = message;
    };

    // Beep sederhana via Web Audio API sebagai feedback suara.
    const beep = (isSuccess) => {
        const AudioContextRef = window.AudioContext || window.webkitAudioContext;
        if (!AudioContextRef) {
            return;
        }

        const context = new AudioContextRef();
        const oscillator = context.createOscillator();
        const gainNode = context.createGain();
        oscillator.type = 'sine';
        oscillator.frequency.value = isSuccess ? 880 : 220;
        gainNode.gain.value = 0.04;
        oscillator.connect(gainNode);
        gainNode.connect(context.destination);
        oscillator.start();
        oscillator.stop(context.currentTime + 0.12);
    };

    const sendScan = async (scannerId) => {
        const now = Date.now();
        const previousAt = localLastScanAt.get(scannerId) ?? 0;
        if (now - previousAt < cooldownMs) {
            showFeedback(false, 'Scan duplikat terlalu cepat. Tunggu 3 detik.');
            beep(false);
            return;
        }
        localLastScanAt.set(scannerId, now);

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

            if (response.status === 419) {
                showFeedback(false, 'Sesi habis. Halaman dimuat ulang…');
                beep(false);
                window.setTimeout(() => window.location.reload(), 1500);
                return;
            }

            const result = await response.json();
            if (response.ok && result.ok) {
                const nama = result?.data?.nama ?? '-';
                const msg = result?.message ?? `Berhasil: ${nama} tercatat hadir.`;
                showFeedback(true, msg);
                beep(true);
                return;
            }

            showFeedback(false, result?.message ?? 'Gagal memproses barcode.');
            beep(false);
        } catch (error) {
            showFeedback(false, 'Terjadi gangguan koneksi saat memproses scan.');
            beep(false);
        }
    };

    scannerInput.addEventListener('keydown', async (event) => {
        if (event.key !== 'Enter') {
            return;
        }

        event.preventDefault();
        const scannerId = scannerInput.value.trim();
        scannerInput.value = '';

        if (!scannerId) {
            showFeedback(false, 'Barcode kosong. Silakan scan ulang.');
            beep(false);
            focusScanner();
            return;
        }

        await sendScan(scannerId);
        focusScanner();
    });

    focusScanner();
})();
</script>
@endif
@endsection