@extends('layouts.master')

@section('title', 'Payment Checkout - HomesInKerala')

@section('content')
    <section class="bg-soft py-5 border-bottom">
        <div class="container">
            <h1 class="fw-bold">Payment Checkout</h1>
            <p class="text-muted mb-0">Complete your payment securely using Razorpay, Stripe, or PayPal.</p>
        </div>
    </section>

    <section class="py-5">
        <div class="container">
            <div class="row g-4 justify-content-center">
                <div class="col-lg-5">
                    <div class="property-detail-card">
                        <h2 class="h5 mb-3">Payment Summary</h2>
                        <p class="mb-2"><strong>Description:</strong> {{ $payment->description }}</p>
                        <p class="mb-2"><strong>Amount:</strong> {{ $payment->currency }} {{ number_format((float) $payment->amount, 2) }}</p>
                        <p class="mb-0"><strong>Status:</strong> <span class="badge text-bg-{{ $payment->status_badge }}">{{ Str::headline($payment->status) }}</span></p>
                    </div>
                </div>
                <div class="col-lg-7">
                    <div class="property-detail-card">
                        <h2 class="h5 mb-3">Choose Gateway</h2>
                        <div class="row g-3">
                            @foreach(['razorpay' => 'Razorpay', 'stripe' => 'Stripe', 'paypal' => 'PayPal'] as $gateway => $label)
                                @if($gateways->has($gateway))
                                    <div class="col-md-4">
                                        <form method="POST" action="{{ route('payments.checkout.gateway', $payment) }}">
                                            @csrf
                                            <input type="hidden" name="gateway" value="{{ $gateway }}">
                                            <button class="btn btn-outline-primary w-100 py-3">
                                                {{ $label }}
                                            </button>
                                        </form>
                                    </div>
                                @endif
                            @endforeach
                        </div>

                        @if(data_get($payment->gateway_payload, 'mode') === 'local_fallback')
                            <div class="alert alert-warning mt-4 mb-0">
                                Gateway credentials are not configured. For local development, you can simulate a successful payment.
                                <a class="alert-link" href="{{ route('payments.success', $payment) }}">Confirm local payment</a>.
                            </div>
                        @endif

                        @if($payment->gateway === 'razorpay' && $payment->gateway_order_id && data_get($payment->gateway_payload, 'key'))
                            <button id="razorpay-pay-button" class="btn btn-primary w-100 mt-4">Pay with Razorpay</button>
                            <script src="https://checkout.razorpay.com/v1/checkout.js"></script>
                            <script>
                                document.getElementById('razorpay-pay-button').addEventListener('click', function () {
                                    const checkout = new Razorpay({
                                        key: @json(data_get($payment->gateway_payload, 'key')),
                                        amount: @json((int) round(((float) $payment->amount) * 100)),
                                        currency: @json($payment->currency),
                                        name: 'HomesInKerala',
                                        description: @json($payment->description),
                                        order_id: @json($payment->gateway_order_id),
                                        handler: function (response) {
                                            const url = new URL(@json(route('payments.success', $payment)));
                                            url.searchParams.set('razorpay_payment_id', response.razorpay_payment_id);
                                            url.searchParams.set('razorpay_order_id', response.razorpay_order_id);
                                            url.searchParams.set('razorpay_signature', response.razorpay_signature);
                                            window.location.href = url.toString();
                                        }
                                    });
                                    checkout.open();
                                });
                            </script>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection