<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-300">Admin</p>
                <h2 class="text-2xl font-bold text-slate-950 dark:text-white">Subscription Plans</h2>
            </div>
            <a href="{{ route('admin.subscription-plans.create') }}" class="rounded-lg bg-blue-600 px-4 py-2 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">
                Create Plan
            </a>
        </div>
    </x-slot>

    <section class="grid gap-6 md:grid-cols-3">
        @foreach ([
            'monthly' => 'Monthly Price',
            'quarterly' => 'Quarterly Price',
            'yearly' => 'Yearly Price',
        ] as $period => $label)
            @php
                $periodPlan = $plans->firstWhere('billing_period', $period);
            @endphp
            <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-semibold uppercase tracking-wide text-blue-600 dark:text-blue-300">{{ $label }}</p>
                <p class="mt-3 text-3xl font-black text-slate-950 dark:text-white">
                    {{ $periodPlan ? $periodPlan->currency.' '.number_format((float) $periodPlan->price, 2) : 'Not set' }}
                </p>
                <p class="mt-2 text-sm text-slate-500 dark:text-slate-400">{{ $periodPlan?->name ?? 'Create a plan for this billing period.' }}</p>
            </div>
        @endforeach
    </section>

    <section class="mt-6 grid gap-6 lg:grid-cols-2 xl:grid-cols-3">
        @forelse ($plans as $plan)
            <article class="relative rounded-lg border border-blue-100 bg-white p-6 shadow-sm transition hover:-translate-y-1 hover:shadow-lg dark:border-blue-900/50 dark:bg-slate-900">
                @if ($plan->is_recommended)
                    <span class="absolute right-4 top-4 rounded-full bg-blue-600 px-3 py-1 text-xs font-black uppercase tracking-wide text-white dark:bg-blue-500">Recommended</span>
                @endif

                <div class="pr-28">
                    <p class="text-sm font-semibold uppercase tracking-wide text-blue-600 dark:text-blue-300">{{ $plan->billing_period }}</p>
                    <h3 class="mt-2 text-xl font-bold text-slate-950 dark:text-white">{{ $plan->name }}</h3>
                </div>

                <p class="mt-5 text-4xl font-black text-slate-950 dark:text-white">
                    {{ $plan->currency }} {{ number_format((float) $plan->price, 2) }}
                </p>
                <p class="mt-2 text-sm text-slate-500 dark:text-slate-400">{{ $plan->duration_days }} days access</p>

                <div class="mt-4">
                    <span class="rounded-full px-3 py-1 text-xs font-bold {{ $plan->is_active ? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-950 dark:text-emerald-200' : 'bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-200' }}">
                        {{ $plan->is_active ? 'Active' : 'Inactive' }}
                    </span>
                </div>

                @if ($plan->features)
                    <ul class="mt-5 space-y-2">
                        @foreach (array_slice($plan->features, 0, 4) as $feature)
                            <li class="text-sm text-slate-600 dark:text-slate-300">{{ $feature }}</li>
                        @endforeach
                    </ul>
                @endif

                <div class="mt-6 flex flex-wrap gap-2">
                    <a href="{{ route('admin.subscription-plans.show', $plan) }}" class="rounded-lg border border-blue-100 px-3 py-2 text-sm font-bold text-blue-700 transition hover:bg-blue-50 dark:border-blue-900 dark:text-blue-300 dark:hover:bg-blue-950/60">View</a>
                    <a href="{{ route('admin.subscription-plans.edit', $plan) }}" class="rounded-lg border border-blue-100 px-3 py-2 text-sm font-bold text-slate-700 transition hover:bg-blue-50 dark:border-blue-900 dark:text-slate-300 dark:hover:bg-blue-950/60">Edit</a>
                    <form method="POST" action="{{ route('admin.subscription-plans.toggle-status', $plan) }}">
                        @csrf
                        @method('PATCH')
                        <button class="rounded-lg border border-blue-100 px-3 py-2 text-sm font-bold text-blue-700 transition hover:bg-blue-50 dark:border-blue-900 dark:text-blue-300 dark:hover:bg-blue-950/60">
                            {{ $plan->is_active ? 'Deactivate' : 'Activate' }}
                        </button>
                    </form>
                    @unless ($plan->is_recommended)
                        <form method="POST" action="{{ route('admin.subscription-plans.mark-recommended', $plan) }}">
                            @csrf
                            @method('PATCH')
                            <button class="rounded-lg border border-blue-100 px-3 py-2 text-sm font-bold text-blue-700 transition hover:bg-blue-50 dark:border-blue-900 dark:text-blue-300 dark:hover:bg-blue-950/60">Recommend</button>
                        </form>
                    @endunless
                </div>
            </article>
        @empty
            <div class="rounded-lg border border-blue-100 bg-white p-10 text-center text-slate-500 dark:border-blue-900/50 dark:bg-slate-900 dark:text-slate-400 xl:col-span-3">
                No subscription plans found.
            </div>
        @endforelse
    </section>

    <div class="mt-6">{{ $plans->links() }}</div>
</x-app-layout>
