@extends('layouts.app')

@section('title', 'Processing Payment')

@section('content')
<div class="min-h-screen bg-[#101F36] flex items-center justify-center px-4 py-16">
    <div class="w-full max-w-md bg-white rounded-3xl border border-slate-200 shadow-2xl p-8 sm:p-12 text-center space-y-6">
        <div class="w-16 h-16 mx-auto rounded-full bg-[#1769AA]/10 text-[#1769AA] flex items-center justify-center border border-[#0E5588]/20">
            <svg class="animate-spin w-8 h-8" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
            </svg>
        </div>

        <div>
            <h1 class="font-display text-2xl font-black uppercase tracking-wide text-slate-900">Redirecting to Secure Razorpay...</h1>
            <p class="text-xs text-slate-500 mt-2">Processing order <span class="font-bold text-slate-800">#{{ $order->order_number }}</span></p>
            @if($splitPct)
                <p class="text-xs text-[#1769AA] font-bold mt-1">Split payment: {{ $splitPct }}% deposit of ₹{{ number_format($chargeAmount, 2) }} now — balance ({{ 100 - $splitPct }}%) payable on delivery.</p>
            @endif
        </div>

        <div class="p-3 rounded-xl bg-slate-50 border border-slate-200 text-xs text-slate-600 flex items-center justify-center gap-2">
            <x-icon name="shield-check" class="w-4 h-4 text-[#1769AA]" />
            <span>256-bit encrypted payment gateway. Do not close this window.</span>
        </div>

        <div id="razorpay-error" class="hidden p-4 rounded-xl bg-red-50 border border-red-200 text-red-600 text-xs font-semibold">
            <p class="mb-3">Razorpay failed to load. Please check your internet connection or try again.</p>
            <a href="{{ route('store.checkout') }}" class="inline-block px-5 py-2.5 rounded-xl bg-[#1769AA] hover:bg-[#0E5588] text-white text-xs font-bold uppercase tracking-wider">Back to Checkout</a>
        </div>

        <div id="razorpay-back" class="hidden">
            <a href="{{ route('store.checkout') }}" class="inline-flex items-center gap-2 px-5 py-2.5 rounded-xl bg-slate-100 hover:bg-slate-200 border border-slate-300 text-slate-700 text-xs font-bold uppercase tracking-wider">
                <x-icon name="arrow-left" class="w-4 h-4" />
                <span>Back to Checkout</span>
            </a>
        </div>
    </div>
</div>

<meta name="razorpay-token" content="{{ csrf_token() }}">

@push('scripts')
<script>
    const orderId = @json($order->id);
    const razorpayOrderId = @json($razorpayOrder['id']);
    const keyId = @json($keyId);
    const userEmail = @json($userEmail);
    const userName = @json($userName);
    const logoUrl = @json($siteSettings->logo_url ?? '');
    const csrfToken = document.querySelector('meta[name="razorpay-token"]').content;

    function loadRazorpayScript() {
        return new Promise((resolve) => {
            if (window.Razorpay) { resolve(true); return; }
            const script = document.createElement('script');
            script.src = 'https://checkout.razorpay.com/v1/checkout.js';
            script.onload = () => resolve(true);
            script.onerror = () => {
                document.getElementById('razorpay-error').classList.remove('hidden');
                document.getElementById('razorpay-back').classList.remove('hidden');
                resolve(false);
            };
            document.body.appendChild(script);
        });
    }

    function handlePaymentSuccess(response) {
        const formData = new FormData();
        formData.append('_token', csrfToken);
        formData.append('order_id', orderId);
        formData.append('razorpay_order_id', response.razorpay_order_id);
        formData.append('razorpay_payment_id', response.razorpay_payment_id);
        formData.append('razorpay_signature', response.razorpay_signature || '');

        fetch(@json(route('store.checkout.verify')), {
            method: 'POST',
            body: formData,
            headers: { 'Accept': 'application/json' },
        }).then(() => {
            window.location = @json(route('store.checkout.success', $order->id));
        }).catch(() => {
            window.location = @json(route('store.checkout'));
        });
    }

    async function initRazorpay() {
        const loaded = await loadRazorpayScript();
        if (!loaded) return;

        const options = {
            key: keyId,
            amount: Math.round({{ $chargeAmount ?? $order->total }} * 100),
            currency: 'INR',
            name: 'Gymnex',
            description: 'Order #{{ $order->order_number }}{{ $splitPct ? ' (Deposit ' . $splitPct . '%)' : '' }}',
            image: logoUrl,
            order_id: razorpayOrderId,
            prefill: {
                name: userName,
                email: userEmail,
            },
            theme: { color: '#1769AA' },
            handler: handlePaymentSuccess,
            modal: {
                ondismiss: function () {
                    window.location = @json(route('store.checkout'));
                },
            },
        };

        try {
            const rzp = new window.Razorpay(options);
            rzp.on('payment.failed', function () {
                window.location = @json(route('store.checkout'));
            });
            rzp.open();
        } catch (e) {
            document.getElementById('razorpay-error').classList.remove('hidden');
            document.getElementById('razorpay-back').classList.remove('hidden');
        }
    }

    initRazorpay();
</script>
@endpush
@endsection