@extends('frontend.scan')

@section('content')
<section class="section">
    <div class="container">
        <h3>Scan a Partner QR Code</h3>
        <p>Point your camera at a partner's QR code to collect rewards or discounts.</p>

        <div id="qr-reader" style="width: 100%; max-width: 400px; margin: auto;"></div>
        <div id="qr-result" class="scan-result"></div>
    </div>
</section>
@endsection

@push('head')
<script src="https://unpkg.com/html5-qrcode@2.3.9/html5-qrcode.min.js"></script>
@endpush

@push('scripts')
<script>
function onScanSuccess(decodedText, decodedResult) {
    document.getElementById('qr-result').innerHTML = `<strong>Scanned Code:</strong> ${decodedText}`;

    // Example: Send to your server for processing
    fetch('/api/scan', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify({
                qr_code: decodedText
            })
        })
        .then(response => response.json())
        .then(data => {
            // You could display success or error messages here
            alert(data.message || 'Scan processed successfully');
        })
        .catch(error => {
            console.error('Error:', error);
            alert('An error occurred while processing the QR code.');
        });
}

const qrCodeScanner = new Html5QrcodeScanner("qr-reader", {
    fps: 10,
    qrbox: 250
});
qrCodeScanner.render(onScanSuccess);
</script>
@endpush