@extends($layout)
@section('title', 'Scan QR Bukti Transaksi')

@section('content')
<div class="card mb-3">
    <div class="card-body">
        <p class="mb-2">Arahkan kamera ke <strong>QR code</strong> pada kwitansi / bukti transaksi / SPR. Hasil pengecekan akan tampil otomatis.</p>

        <div id="reader" class="mx-auto border rounded overflow-hidden bg-dark" style="max-width: 420px; min-height: 60px"></div>

        <div id="pesan" class="alert d-none mt-3 mb-0" role="alert"></div>

        <div class="d-flex flex-wrap gap-2 justify-content-center mt-3">
            <button type="button" id="btnKamera" class="btn btn-primary"><i class="bi bi-camera"></i> Mulai Scan Kamera</button>
            <button type="button" id="btnStop" class="btn btn-outline-secondary d-none"><i class="bi bi-stop-circle"></i> Berhenti</button>
            <label class="btn btn-outline-primary mb-0">
                <i class="bi bi-image"></i> Pilih Foto QR
                <input type="file" id="fileQr" accept="image/*" class="d-none">
            </label>
            <a href="{{ route('verifikasi') }}" class="btn btn-link"><i class="bi bi-keyboard"></i> Ketik kode manual</a>
        </div>
    </div>
</div>

<div class="small text-muted">
    <i class="bi bi-info-circle"></i> Tips: QR juga bisa dipindai langsung dengan aplikasi kamera HP — link pengecekan akan terbuka otomatis.
    Kamera di browser hanya bisa dipakai pada alamat <strong>https://</strong> atau localhost; bila kamera tidak bisa dibuka, gunakan <em>Pilih Foto QR</em>.
</div>
@endsection

@push('scripts')
<script src="https://unpkg.com/html5-qrcode@2.3.8/html5-qrcode.min.js"></script>
<script>
(function () {
    const urlCek = @json(route('verifikasi'));
    const pesan = document.getElementById('pesan');
    const btnKamera = document.getElementById('btnKamera');
    const btnStop = document.getElementById('btnStop');
    let scanner = null, berjalan = false, selesai = false;

    function tampil(teks, jenis) {
        pesan.className = 'alert mt-3 mb-0 alert-' + jenis;
        pesan.textContent = teks;
    }

    // Ambil kode verifikasi dari isi QR. Hanya kode yang dipakai — link lain di QR tidak pernah dibuka,
    // sehingga QR palsu tidak bisa mengarahkan ke situs lain.
    function ambilKode(isi) {
        let kandidat = (isi || '').trim();
        try {
            const u = new URL(kandidat);
            kandidat = u.searchParams.get('kode') || '';
        } catch (e) { /* bukan URL: anggap kode langsung */ }
        const kode = kandidat.toUpperCase().replace(/[^A-Z0-9]/g, '');
        return /^[2-9A-HJ-NP-Z]{12}$/.test(kode) ? kode.match(/.{4}/g).join('-') : null;
    }

    function proses(isi) {
        if (selesai) return;
        const kode = ambilKode(isi);
        if (!kode) {
            tampil('QR terbaca, tetapi bukan QR bukti transaksi ' + @json(config('app.name')) + '. Bukti mungkin tidak asli.', 'danger');
            return;
        }
        selesai = true;
        tampil('Kode ' + kode + ' terbaca. Membuka hasil pengecekan…', 'success');
        hentikan().finally(() => { window.location.href = urlCek + '?kode=' + encodeURIComponent(kode); });
    }

    function hentikan() {
        if (scanner && berjalan) {
            berjalan = false;
            btnStop.classList.add('d-none');
            btnKamera.classList.remove('d-none');
            return scanner.stop().catch(() => {});
        }
        return Promise.resolve();
    }

    function siapkan() {
        if (typeof Html5Qrcode === 'undefined') {
            tampil('Komponen pemindai gagal dimuat. Periksa koneksi internet lalu muat ulang halaman.', 'danger');
            return false;
        }
        scanner = scanner || new Html5Qrcode('reader');
        return true;
    }

    btnKamera.addEventListener('click', function () {
        if (!siapkan()) return;
        if (!window.isSecureContext || !navigator.mediaDevices) {
            tampil('Kamera tidak bisa dibuka di alamat ini (butuh https://). Gunakan "Pilih Foto QR" atau aplikasi kamera HP.', 'warning');
            return;
        }
        selesai = false;
        tampil('Mencari QR code…', 'info');
        scanner.start({ facingMode: 'environment' }, { fps: 10, qrbox: { width: 240, height: 240 } }, proses, () => {})
            .then(() => {
                berjalan = true;
                btnKamera.classList.add('d-none');
                btnStop.classList.remove('d-none');
            })
            .catch(err => tampil('Kamera tidak dapat diakses: ' + err + '. Izinkan akses kamera atau gunakan "Pilih Foto QR".', 'warning'));
    });

    btnStop.addEventListener('click', () => { hentikan(); pesan.classList.add('d-none'); });

    document.getElementById('fileQr').addEventListener('change', function (e) {
        const file = e.target.files[0];
        e.target.value = '';
        if (!file || !siapkan()) return;
        selesai = false;
        hentikan().then(() => scanner.scanFile(file, true))
            .then(proses)
            .catch(() => tampil('QR code tidak terdeteksi pada foto. Pastikan QR terlihat jelas, tidak buram, dan tidak terpotong.', 'warning'));
    });

    // Langsung coba buka kamera bila diizinkan
    if (window.isSecureContext && navigator.mediaDevices) btnKamera.click();
})();
</script>
@endpush