{{-- resources/views/voucher/preview_qr.blade.php --}}
<x-header></x-header>

<div class="container py-4">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <div>
            <h4 class="mb-0">Preview QR Voucher</h4>
            <small class="text-muted">Kode: <strong>{{ $voucher->qrcode }}</strong></small>
        </div>

        <div>
            <a href="{{ url()->previous() }}" class="btn btn-secondary me-2">Kembali</a>
            <button id="downloadBtn" class="btn btn-primary me-2">Download PNG</button>
            <button id="openNewTabBtn" class="btn btn-outline-primary">Buka di Tab Baru</button>
        </div>
    </div>

    <div class="text-center">
        <p class="text-muted">Screenshot QR ini lalu kirim ke bos (atau gunakan tombol download).</p>

        <div id="qrWrapper" style="display:inline-block; background:white; padding:18px; border-radius:8px; box-shadow:0 6px 18px rgba(0,0,0,0.08);">
            <img id="qrImage" src="{{ $qrImageUrl }}" alt="QR Voucher {{ $voucher->qrcode }}" style="max-width:90vw; width:600px; height:auto;">
        </div>

        <div class="mt-3">
            <button id="fullscreenBtn" class="btn btn-sm btn-outline-secondary me-1">Fullscreen</button>
            <button id="printBtn" class="btn btn-sm btn-outline-secondary me-1">Print</button>
            <button id="copyLinkBtn" class="btn btn-sm btn-outline-secondary">Copy QR Data</button>
        </div>

        <div class="mt-3 text-muted small">
            <p>QR encodes: <code id="qrDataText" style="user-select:all;">{{ $qrData }}</code></p>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const qrImage = document.getElementById('qrImage');
    const downloadBtn = document.getElementById('downloadBtn');
    const openNewTabBtn = document.getElementById('openNewTabBtn');
    const fullscreenBtn = document.getElementById('fullscreenBtn');
    const printBtn = document.getElementById('printBtn');
    const copyLinkBtn = document.getElementById('copyLinkBtn');
    const qrDataText = document.getElementById('qrDataText').innerText;

    // Buka image di tab baru
    openNewTabBtn.addEventListener('click', () => {
        window.open(qrImage.src, '_blank');
    });

    // Download image (fetch blob lalu save) — lebih reliable cross-origin
    downloadBtn.addEventListener('click', async () => {
        try {
            const res = await fetch(qrImage.src, {mode: 'cors'});
            if (!res.ok) throw new Error('Gagal ambil image');
            const blob = await res.blob();
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = `voucher-{{ $voucher->qrcode }}.png`;
            document.body.appendChild(a);
            a.click();
            a.remove();
            URL.revokeObjectURL(url);
        } catch (err) {
            alert('Download gagal — coba buka di tab baru lalu simpan secara manual.');
            console.error(err);
        }
    });

    // Fullscreen (buat QR jadi fullscreen buat screenshot)
    fullscreenBtn.addEventListener('click', () => {
        const el = document.getElementById('qrWrapper');
        if (el.requestFullscreen) {
            el.requestFullscreen();
        } else if (el.webkitRequestFullscreen) {
            el.webkitRequestFullscreen();
        } else {
            alert('Fullscreen tidak didukung di browser ini.');
        }
    });

    // Print: buka jendela baru dengan image dan panggil print()
    printBtn.addEventListener('click', () => {
        const w = window.open('', '_blank');
        w.document.write('<title>QR Voucher</title>');
        w.document.write('<img src="' + qrImage.src + '" style="max-width:100%;height:auto;">');
        w.document.close();
        w.focus();
        setTimeout(() => { w.print(); }, 250);
    });

    // Copy QR data (link/isi QR) ke clipboard
    copyLinkBtn.addEventListener('click', async () => {
        try {
            await navigator.clipboard.writeText(qrDataText);
            copyLinkBtn.innerText = 'Copied!';
            setTimeout(()=> copyLinkBtn.innerText = 'Copy QR Data', 1200);
        } catch (err) {
            alert('Gagal copy ke clipboard. Silakan copy manual.');
        }
    });
});
</script>

<style>
/* sedikit styling agar QR tampil rapih saat screenshot */
body { background: #f6f7fb; }
#qrWrapper { background: #ffffff; }
</style>