<x-app-layout>
    <x-slot name="header">
        <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
            <div>
                <p class="text-sm font-semibold uppercase tracking-wide text-blue-600 dark:text-blue-400">Subscription</p>
                <h2 class="mt-1 text-2xl font-bold text-slate-950 dark:text-white">My Subscription</h2>
            </div>

            <a href="{{ route('pricing') }}" class="rounded-lg bg-blue-600 px-4 py-2 text-sm font-semibold text-white transition hover:-translate-y-0.5 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400">
                View Pricing
            </a>
        </div>
    </x-slot>

    <div class="space-y-8">
        @if ($activeSubscription)
            <section class="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
                <div class="rounded-lg border border-blue-100 bg-white p-5 shadow-sm dark:border-blue-900/50 dark:bg-slate-900">
                    <p class="text-sm font-medium text-slate-500 dark:text-slate-400">Current Plan</p>
                    <p class="mt-3 text-2xl font-black text-slate-950 dark:text-white">{{ $activeSubscription->plan?->name ?? 'Plan removed' }}</p>
                </div>
                <div class="rounded-lg border border-blue-100 bg-white p-5 shadow-sm dark:border-blue-900/50 dark:bg-slate-900">
                    <p class="text-sm font-medium text-slate-500 dark:text-slate-400">Status</p>
                    <p class="mt-3 text-2xl font-black capitalize text-emerald-600 dark:text-emerald-400">{{ $activeSubscription->status }}</p>
                </div>
                <div class="rounded-lg border border-blue-100 bg-white p-5 shadow-sm dark:border-blue-900/50 dark:bg-slate-900">
                    <p class="text-sm font-medium text-slate-500 dark:text-slate-400">Started</p>
                    <p class="mt-3 text-2xl font-black text-slate-950 dark:text-white">{{ $activeSubscription->starts_at?->format('M d, Y') ?? 'Not set' }}</p>
                </div>
                <div class="rounded-lg border border-blue-100 bg-white p-5 shadow-sm dark:border-blue-900/50 dark:bg-slate-900">
                    <p class="text-sm font-medium text-slate-500 dark:text-slate-400">Expires</p>
                    <p class="mt-3 text-2xl font-black text-slate-950 dark:text-white">{{ $activeSubscription->ends_at?->format('M d, Y') ?? 'No expiry' }}</p>
                </div>
            </section>

            <section class="rounded-lg border border-blue-100 bg-white p-6 shadow-sm dark:border-blue-900/50 dark:bg-slate-900">
                <div class="grid gap-6 lg:grid-cols-[1fr_20rem] lg:items-center">
                    <div>
                        <p class="text-sm font-bold uppercase tracking-wide text-blue-600 dark:text-blue-300">Billing Cycle</p>
                        <h3 class="mt-2 text-xl font-black capitalize text-slate-950 dark:text-white">
                            {{ $activeSubscription->plan?->billing_period ?? 'Unknown' }}
                        </h3>
                        <p class="mt-3 text-sm leading-6 text-slate-600 dark:text-slate-300">
                            Your access remains active until the expiry date. Upgrade and renew actions send you back to the pricing page so you can choose a new plan.
                        </p>
                    </div>

                    <div class="grid gap-3">
                        <a href="{{ route('pricing') }}" class="rounded-lg bg-blue-600 px-4 py-3 text-center text-sm font-bold text-white transition hover:-translate-y-0.5 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400">
                            Upgrade
                        </a>
                        <a href="{{ route('pricing') }}" class="rounded-lg border border-blue-100 px-4 py-3 text-center text-sm font-bold text-blue-700 transition hover:-translate-y-0.5 hover:bg-blue-50 dark:border-blue-900 dark:text-blue-300 dark:hover:bg-blue-950/60">
                            Renew
                        </a>
                        <form method="POST" action="{{ route('subscriptions.cancel') }}">
                            @csrf
                            <button type="submit" class="w-full rounded-lg border border-red-200 px-4 py-3 text-sm font-bold text-red-600 transition hover:-translate-y-0.5 hover:bg-red-50 dark:border-red-900/60 dark:text-red-300 dark:hover:bg-red-950/40">
                                Cancel Subscription
                            </button>
                        </form>
                    </div>
                </div>
            </section>
        @else
            <section class="rounded-lg border border-blue-100 bg-white p-8 text-center shadow-sm dark:border-blue-900/50 dark:bg-slate-900">
                <p class="text-sm font-bold uppercase tracking-wide text-blue-600 dark:text-blue-300">No Active Plan</p>
                <h3 class="mt-3 text-2xl font-black text-slate-950 dark:text-white">You do not have an active subscription yet.</h3>
                <p class="mx-auto mt-3 max-w-2xl text-sm leading-6 text-slate-600 dark:text-slate-300">
                    Choose a plan from the pricing page when payment mode is active. If payment mode is off, you can continue using ViZuTrade normally.
                </p>
                <a href="{{ route('pricing') }}" class="mt-6 inline-flex rounded-lg bg-blue-600 px-5 py-3 text-sm font-bold text-white transition hover:-translate-y-0.5 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400">
                    Go to Pricing
                </a>
            </section>
        @endif

        @if ($latestSubscription && ! $activeSubscription)
            <section class="rounded-lg border border-blue-100 bg-white p-6 shadow-sm dark:border-blue-900/50 dark:bg-slate-900">
                <p class="text-sm font-bold uppercase tracking-wide text-blue-600 dark:text-blue-300">Latest Subscription</p>
                <div class="mt-4 grid gap-4 sm:grid-cols-3">
                    <div>
                        <p class="text-xs font-bold uppercase text-slate-500 dark:text-slate-400">Plan</p>
                        <p class="mt-1 text-sm font-black text-slate-950 dark:text-white">{{ $latestSubscription->plan?->name ?? 'Plan removed' }}</p>
                    </div>
                    <div>
                        <p class="text-xs font-bold uppercase text-slate-500 dark:text-slate-400">Status</p>
                        <p class="mt-1 text-sm font-black capitalize text-slate-950 dark:text-white">{{ $latestSubscription->status }}</p>
                    </div>
                    <div>
                        <p class="text-xs font-bold uppercase text-slate-500 dark:text-slate-400">Expired</p>
                        <p class="mt-1 text-sm font-black text-slate-950 dark:text-white">{{ $latestSubscription->ends_at?->format('M d, Y') ?? 'Not set' }}</p>
                    </div>
                </div>
            </section>
        @endif

        <section class="rounded-lg border border-blue-100 bg-white shadow-sm dark:border-blue-900/50 dark:bg-slate-900">
            <div class="border-b border-blue-100 p-6 dark:border-blue-900/50">
                <h3 class="text-lg font-bold text-slate-950 dark:text-white">Payment History</h3>
                <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">All subscription payment attempts for your account.</p>
            </div>

            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-blue-100 dark:divide-blue-900/50">
                    <thead class="bg-blue-50 dark:bg-blue-950/40">
                        <tr>
                            <th class="px-4 py-3 text-left text-xs font-bold uppercase tracking-wide text-blue-700 dark:text-blue-300">Date</th>
                            <th class="px-4 py-3 text-left text-xs font-bold uppercase tracking-wide text-blue-700 dark:text-blue-300">Plan</th>
                            <th class="px-4 py-3 text-left text-xs font-bold uppercase tracking-wide text-blue-700 dark:text-blue-300">Gateway</th>
                            <th class="px-4 py-3 text-left text-xs font-bold uppercase tracking-wide text-blue-700 dark:text-blue-300">Amount</th>
                            <th class="px-4 py-3 text-left text-xs font-bold uppercase tracking-wide text-blue-700 dark:text-blue-300">Status</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-blue-50 bg-white dark:divide-blue-900/40 dark:bg-slate-900">
                        @forelse ($payments as $payment)
                            <tr>
                                <td class="px-4 py-4 text-sm text-slate-600 dark:text-slate-300">{{ $payment->created_at->format('M d, Y') }}</td>
                                <td class="px-4 py-4 text-sm font-semibold text-slate-950 dark:text-white">{{ $payment->plan?->name ?? 'Plan removed' }}</td>
                                <td class="px-4 py-4 text-sm text-slate-600 dark:text-slate-300">{{ $payment->gateway?->name ?? 'Gateway removed' }}</td>
                                <td class="px-4 py-4 text-sm font-semibold text-slate-950 dark:text-white">{{ $payment->currency }} {{ number_format((float) $payment->amount, 2) }}</td>
                                <td class="px-4 py-4 text-sm font-bold capitalize {{ $payment->status === 'successful' ? 'text-emerald-600 dark:text-emerald-400' : ($payment->status === 'failed' ? 'text-red-600 dark:text-red-400' : 'text-blue-600 dark:text-blue-400') }}">
                                    {{ $payment->status }}
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="5" class="px-4 py-10 text-center text-sm text-slate-500 dark:text-slate-400">
                                    No payment history yet.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <div class="border-t border-blue-100 px-4 py-3 dark:border-blue-900/50">
                {{ $payments->links() }}
            </div>
        </section>
    </div>
</x-app-layout>
