@assets
<script src="https://checkout.razorpay.com/v1/checkout.js"></script>
@endassets

<div class="space-y-6">
    <div class="flex items-center justify-between">
        <h1 class="text-xl font-semibold">Subscription</h1>
        <a href="{{ route('partner.subscription.transactions') }}" wire:navigate class="text-sm font-medium underline underline-offset-2">
            Transaction history
        </a>
    </div>

    @if ($current && $current->status === 'pending')
        <div wire:poll.4000ms>
            <x-partner.card class="flex items-center gap-3">
                <svg class="h-5 w-5 animate-spin text-neutral-400" viewBox="0 0 24 24" fill="none"><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-8v4a4 4 0 00-4 4H4z"></path></svg>
                <div>
                    <p class="font-medium">Confirming your payment&hellip;</p>
                    <p class="text-sm text-neutral-500 dark:text-neutral-400">This updates automatically once Razorpay confirms it.</p>
                </div>
            </x-partner.card>
        </div>
    @elseif ($current && $current->status === 'active')
        <x-partner.card>
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-neutral-500 dark:text-neutral-400">Current plan</p>
                    <p class="text-lg font-semibold">{{ $current->plan->name }}</p>
                </div>
                <x-partner.badge tone="success">Active</x-partner.badge>
            </div>
            <p class="mt-3 text-sm text-neutral-500 dark:text-neutral-400">
                &#8377;{{ number_format($current->plan->price, 2) }} &middot; expires {{ $current->ends_at->format('d M Y') }}
            </p>
        </x-partner.card>
    @else
        <x-partner.card class="text-sm text-neutral-500 dark:text-neutral-400">
            You don't have an active plan yet. Subscribe below so customers can find your shop.
        </x-partner.card>
    @endif

    <div>
        <p class="text-sm font-medium text-neutral-500 dark:text-neutral-400">{{ $current && $current->status === 'active' ? 'Switch or renew' : 'Available plans' }}</p>
        <div class="mt-3 grid grid-cols-1 gap-4 sm:grid-cols-2">
            @foreach ($plans as $plan)
                <x-partner.card>
                    <p class="font-semibold">{{ $plan->name }}</p>
                    @if ($plan->description)
                        <p class="mt-1 text-sm text-neutral-500 dark:text-neutral-400">{{ $plan->description }}</p>
                    @endif
                    <p class="mt-3 text-2xl font-semibold">&#8377;{{ number_format($plan->price, 2) }}</p>
                    <p class="text-sm text-neutral-500 dark:text-neutral-400">{{ $plan->duration_days }} days</p>

                    <x-partner.button
                        type="button"
                        wire:click="subscribe({{ $plan->id }})"
                        wire:loading.attr="disabled"
                        wire:target="subscribe({{ $plan->id }})"
                        class="mt-4 w-full"
                        :disabled="$current && $current->status === 'pending'"
                    >
                        <span wire:loading.remove wire:target="subscribe({{ $plan->id }})">Subscribe</span>
                        <span wire:loading wire:target="subscribe({{ $plan->id }})">Preparing checkout...</span>
                    </x-partner.button>
                </x-partner.card>
            @endforeach
        </div>
    </div>
</div>

@script
<script>
    $wire.on('razorpay-checkout-open', (event) => {
        const options = {
            key: event.key,
            amount: event.amount,
            currency: event.currency,
            order_id: event.orderId,
            name: event.businessName,
            description: event.planName + ' plan',
            prefill: { contact: event.phone ?? '' },
            theme: { color: '#171717' },
            handler: function () {
                // Payment popup succeeded client-side; the subscription only
                // flips to active once the webhook confirms it (see polling above).
            },
        };

        const checkout = new Razorpay(options);
        checkout.open();
    });
</script>
@endscript