@extends('layouts.app')
@section('title', 'Complete Payment')
@section('page-title', 'Complete Your Upgrade')

@section('content')
<div class="max-w-lg mx-auto">
    <div class="card">
        <div class="text-center mb-6">
            <div class="w-16 h-16 bg-brand-50 rounded-2xl flex items-center justify-center mx-auto mb-3">
                <svg class="w-8 h-8 text-brand-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
            </div>
            <h2 class="text-xl font-bold text-slate-800">Upgrade to {{ $plan->name }}</h2>
            <p class="text-slate-500 text-sm mt-1">{{ ucfirst($billing) }} subscription</p>
        </div>

        <div class="bg-slate-50 rounded-xl p-4 mb-5 space-y-2 text-sm">
            <div class="flex justify-between"><span class="text-slate-500">Plan</span><span class="font-semibold">{{ $plan->name }}</span></div>
            <div class="flex justify-between"><span class="text-slate-500">Billing</span><span class="font-semibold capitalize">{{ $billing }}</span></div>
            <div class="flex justify-between"><span class="text-slate-500">Business</span><span class="font-semibold">{{ $profile->business_name }}</span></div>
            <div class="border-t border-slate-200 pt-2 flex justify-between text-base font-bold">
                <span>Total Amount</span>
                <span class="text-brand-600">₹{{ number_format($amount, 2) }}</span>
            </div>
        </div>

        {{-- Razorpay checkout trigger --}}
        <button id="rzp-button" class="btn-primary w-full justify-center text-base py-3">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg>
            Pay ₹{{ number_format($amount, 2) }} Securely
        </button>

        {{-- Hidden form for verification --}}
        <form id="rzp-form" method="POST" action="{{ route('upgrade.razorpay.verify') }}">
            @csrf
            <input type="hidden" id="rzp_payment_id" name="razorpay_payment_id">
            <input type="hidden" id="rzp_order_id" name="razorpay_order_id" value="{{ $orderId }}">
            <input type="hidden" id="rzp_signature" name="razorpay_signature">
        </form>

        <p class="text-center text-xs text-slate-400 mt-3">
            🔒 Secured by Razorpay · 256-bit SSL encryption
        </p>

        <div class="mt-4 pt-4 border-t border-slate-100 text-center">
            <a href="{{ route('upgrade.index') }}" class="text-sm text-slate-400 hover:text-slate-600">← Back to plans</a>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://checkout.razorpay.com/v1/checkout.js"></script>
<script>
var options = {
    key: '{{ $razorpayKey }}',
    amount: {{ (int)($amount * 100) }},
    currency: 'INR',
    name: '{{ config("app.name") }}',
    description: '{{ $plan->name }} Plan - ' + '{{ ucfirst($billing) }}',
    order_id: '{{ $orderId }}',
    handler: function(response) {
        document.getElementById('rzp_payment_id').value = response.razorpay_payment_id;
        document.getElementById('rzp_order_id').value   = response.razorpay_order_id;
        document.getElementById('rzp_signature').value  = response.razorpay_signature;
        document.getElementById('rzp-form').submit();
    },
    prefill: {
        name:  '{{ auth()->user()->name }}',
        email: '{{ auth()->user()->email }}',
        contact: '{{ $profile->phone ?? "" }}'
    },
    theme: { color: '{{ $profile->primary_color ?? "#4F46E5" }}' },
    modal: { ondismiss: function() {} }
};

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