@extends('layouts.app')

@section('content')
    <h1>Checkout</h1>

    <!-- Display cart items -->
    <ul>
        @foreach($cart as $item)
            <li>
                Ground: {{ $item['ground_name'] }}<br>
                Date: {{ $item['date'] }}<br>
                Time: {{ $item['start_time'] }} - {{ $item['end_time'] }}<br>
                Price: ₹{{ $item['price'] }} /hr
            </li>
        @endforeach
    </ul>

    <h3>Total Amount: ₹{{ $totalAmount / 100 }}</h3>

    <!-- Razorpay payment button -->
    <button id="rzp-button">Pay with Razorpay</button>

    <script src="https://checkout.razorpay.com/v1/checkout.js"></script>
    <script>
        var options = {
            "key": "{{ config('services.razorpay.key') }}", // Razorpay API Key
            "amount": "{{ $totalAmount }}", // Total amount in paise
            "currency": "INR",
            "name": "Ground Booking",
            "description": "Booking Payment",
            "order_id": "{{ $orderID }}", // Razorpay Order ID
            "handler": function (response) {
                // On successful payment
                alert('Payment successful! Payment ID: ' + response.razorpay_payment_id);

                // Send payment details to backend for verification and order completion
                $.post("{{ route('checkout.complete') }}", {
                    _token: "{{ csrf_token() }}",
                    razorpay_payment_id: response.razorpay_payment_id,
                    razorpay_order_id: response.razorpay_order_id,
                    razorpay_signature: response.razorpay_signature
                }).done(function(result) {
                    window.location.href = "{{ route('dashboard') }}";
                });
            },
            "prefill": {
                "name": "{{ auth()->user()->name }}",
                "email": "{{ auth()->user()->email }}",
                "contact": "{{ auth()->user()->phone }}"
            },
            "theme": {
                "color": "#3399cc"
            }
        };

        var rzp1 = new Razorpay(options);
        document.getElementById('rzp-button').onclick = function(e) {
            rzp1.open();
            e.preventDefault();
        }
    </script>
@endsection