@extends('frontend.layouts.app')

@section('contents')
<div class="container mb-60 mt-65">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Scan QR Code to Pay</h4>
                </div>
                <div class="card-body text-center">
                    <div class="mb-4">
                        <h5>Amount: ₹{{ number_format($payableAmount / 100, 2) }}</h5>
                    </div>

                    @if(isset($qrData['image_url']))
                    <div class="qr-code-container mb-4">
                        <img src="{{ $qrData['image_url'] }}" alt="UPI QR Code" class="img-fluid"
                            style="max-width: 300px;">
                    </div>
                    @endif

                    <div class="mb-4">
                        <p class="text-muted">Scan this QR code with any UPI app (Google Pay, PhonePe, Paytm, etc.) to
                            complete your payment.</p>
                    </div>

                    <div class="alert alert-info">
                        <strong>UPI ID:</strong> {{ $qrData['upi_id'] ?? 'N/A' }}<br>
                        <strong>QR Code ID:</strong> {{ $qrData['id'] ?? 'N/A' }}
                    </div>

                    <div class="mt-4">
                        <a href="{{ route('payment.index') }}" class="btn btn-secondary">Back to Payment Options</a>
                    </div>
                </div>
            </div>

            <!-- Auto-refresh to check payment status -->
            <script>
                setInterval(function() {
                        fetch(window.location.href, {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': '{{ csrf_token() }}'
                            },
                            body: JSON.stringify({
                                check_status: true,
                                qr_id: '{{ $qrData['id'] ?? '' }}'
                            })
                        })
                        .then(response => response.json())
                        .then(data => {
                            if (data.status === 'paid') {
                                window.location.href = '{{ route('payment.success') }}';
                            }
                        })
                        .catch(error => console.log(error));
                    }, 5000); // Check every 5 seconds
            </script>
        </div>
    </div>
</div>
@endsection