@extends('frontend.layouts.master')

@section('content')
    <div class="container">
        <h3 class="mt-3">Razorpay Payment</h3>

        <!-- Define the Razorpay container -->
        <div id="razorpay-container">
            <!-- Razorpay container will be rendered here -->
        </div>

        <!-- Include the Razorpay script -->
        <script src="https://checkout.razorpay.com/v1/checkout.js"></script>

        <!-- Push the script to initialize Razorpay -->
        @section('scripts')
            <script>
                var price = {{ $order->amount / 100 }};
                var userId = {{ Auth::id() }};
                var projects = @json($cart);

                // Initialize Razorpay modal
                var options = {
                    key: 'rzp_test_Gv0qLVksZ9wItG',
                    amount: {{ $order->amount }},
                    currency: 'INR',
                    name: 'Your Company',
                    description: 'Project Payment',
                    image: '{{ asset('frontend/assets/image/web_logo.png') }}',
                    prefill: {
                        name: 'Your Name',
                        email: 'your@email.com'
                    },
                    handler: function(response) {
                        // Handle Razorpay success callback (you can make an AJAX call to your server to confirm the payment)
                        console.log(response);

                        // Add the price and payment status to the redirect URL
                        var paymentStatus = response.razorpay_payment_id ? 'success' : 'failed';
                        window.location.href = '{{ route('frontend.payment.confirmRazorpay') }}?payment_id=' + response.razorpay_payment_id + '&user_id=' + userId + '&projects=' + encodeURIComponent(JSON.stringify(projects)) + '&total_price=' + price + '&order_status=' + paymentStatus;
                    },
                    theme: {
                        color: '#F37254'
                    }
                };

                var rzp = new Razorpay(options);
                rzp.open();
            </script>
        @endsection
    </div>
@endsection