@extends('layouts.app')

@section('title', 'Processing Online Payment - Saba Remedies')

@section('content')
<section class="py-20 bg-slate-50 min-h-[60vh] flex items-center justify-center">
    <div class="max-w-md w-full mx-auto px-4 text-center">
        <div class="bg-white rounded-3xl border border-slate-200 p-8 shadow-sm space-y-6">
            <div class="w-16 h-16 rounded-full bg-emerald-50 text-emerald-600 flex items-center justify-center text-3xl mx-auto animate-pulse">
                <i class="fa-solid fa-credit-card"></i>
            </div>
            <div>
                <h2 class="text-xl font-bold text-slate-800">Processing Online Payment</h2>
                <p class="text-xs text-slate-500 mt-1">Order #{{ $order->order_id }}</p>
                <div class="text-2xl font-extrabold text-emerald-700 mt-2">₹{{ number_format((float)$order->total_price, 2) }}</div>
            </div>

            <p class="text-xs text-slate-600">
                Please complete your payment via Razorpay secure checkout window.
            </p>

            <button id="rzp-button" type="button" class="w-full bg-emerald-600 hover:bg-emerald-700 text-white font-bold py-3.5 px-6 rounded-2xl text-xs shadow transition-all">
                Pay Now with Razorpay
            </button>

            <!-- Hidden Verification Form -->
            <form id="razorpay-form" action="{{ route('payment.razorpay.verify') }}" method="POST" class="hidden">
                @csrf
                <input type="hidden" name="order_id" value="{{ $order->order_id }}">
                <input type="hidden" name="razorpay_order_id" id="razorpay_order_id" value="{{ $razorpayOrderId }}">
                <input type="hidden" name="razorpay_payment_id" id="razorpay_payment_id">
                <input type="hidden" name="razorpay_signature" id="razorpay_signature">
            </form>
        </div>
    </div>
</section>
@endsection

@push('scripts')
<script src="https://checkout.razorpay.com/v1/checkout.js"></script>
<script>
    const options = {
        "key": "{{ $keyId }}",
        "amount": "{{ $amountInPaise }}",
        "currency": "INR",
        "name": "Saba Remedies",
        "description": "Syedsons Enterprises",
        "image": "{{ asset('img/logo.png') }}",
        @if(!empty($razorpayOrderId))
        "order_id": "{{ $razorpayOrderId }}",
        @endif
        "handler": function (response) {
            document.getElementById('razorpay_payment_id').value = response.razorpay_payment_id;
            if (response.razorpay_order_id) {
                document.getElementById('razorpay_order_id').value = response.razorpay_order_id;
            }
            document.getElementById('razorpay_signature').value = response.razorpay_signature || '';
            document.getElementById('razorpay-form').submit();
        },
        "prefill": {
            "name": "{{ $order->name }}",
            "email": "{{ $user ? $user->email : '' }}",
            "contact": "{{ $order->phone }}"
        },
        "theme": {
            "color": "#059669"
        },
        "modal": {
            "escape": true,
            "backdropclose": false,
            "ondismiss": function() {
                console.log("Payment popup closed by user");
            }
        }
    };

    const rzp = new Razorpay(options);

    document.getElementById('rzp-button').onclick = function(e){
        rzp.open();
        e.preventDefault();
    };

    // Auto open on load
    window.addEventListener('DOMContentLoaded', function() {
        rzp.open();
    });
</script>
@endpush