@extends('landlord.public-section.layouts.modern')
@section('content')
<section class="pp-section"><div class="pp-container"><div class="pp-form-card mx-auto" style="max-width:600px"><h2>{{ __('Continue with Razorpay.') }}</h2><p>{{ $checkout->currency }} {{ number_format($checkout->amount, 2) }} · Your PeoplePro plan</p><button class="pp-button pp-button-full" id="razorpay-pay" type="button">{{ __('Open secure payment ↗') }}</button><p role="status" id="razorpay-status"></p><form id="razorpay-confirm" method="post" action="{{ route('checkout.callback', ['gateway' => 'razorpay', 'checkout' => $checkout->id]) }}"><input type="hidden" name="razorpay_payment_id"><input type="hidden" name="razorpay_signature"></form></div></div></section>
@endsection
@push('scripts')
<script src="https://checkout.razorpay.com/v1/checkout.js"></script>
<script>
document.getElementById('razorpay-pay').addEventListener('click', () => { const payment = new Razorpay({key:@json($key),order_id:@json($checkout->provider_reference),currency:@json($checkout->currency),name:'PeoplePro',description:'PeoplePro subscription',prefill:{name:@json($customer->name),email:@json($customer->email),contact:@json($customer->phone_number)},handler:response=>{const form=document.getElementById('razorpay-confirm');form.elements.razorpay_payment_id.value=response.razorpay_payment_id;form.elements.razorpay_signature.value=response.razorpay_signature;form.submit();}});payment.on('payment.failed',()=>{document.getElementById('razorpay-status').textContent='Payment was not completed. Please try again.';});payment.open();});
</script>
@endpush