<div x-data="{
    billingPeriod: 'monthly',
}">
    <x-slot:title>
        {{ t('my_subscription') }}
    </x-slot:title>
    <div class=" px-4 mx-auto lg:px-6 text-center">
        <!-- Billing Period Toggle -->
        <div class="flex justify-center mb-8">
            <div
                class="bg-gray-100 dark:bg-slate-800 dark:border-slate-700 p-1 rounded-lg inline-flex border border-gray-300">
                <button type="button" x-on:click="billingPeriod = 'monthly'"
                    :class="billingPeriod === 'monthly' ?
                        'bg-white dark:text-slate-200 dark:bg-slate-600 text-indigo-600 shadow-sm' :
                        'text-gray-600 hover:text-gray-900 dark:hover:text-slate-200'"
                    class="px-6 py-2 text-sm font-medium rounded-lg transition-all duration-200">
                    {{ t('monthly') }}
                </button>
                <button type="button" x-on:click="billingPeriod = 'yearly'"
                    :class="billingPeriod === 'yearly' ?
                        'bg-white dark:text-slate-200 dark:bg-slate-600 text-indigo-600 shadow-sm' :
                        'text-gray-600  hover:text-gray-900 dark:hover:text-slate-200'"
                    class="px-6 py-2 text-sm font-medium rounded-lg transition-all duration-200">
                    {{ t('yearly') }}
                </button>
            </div>
        </div>

        <!-- Plans Grid -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mx-auto">
            @forelse ($this->filteredPlans as $plan)
                @php
                    $user = auth()->user();
                    $isCurrentTenantUser = tenant_id() && $user && $user->tenant_id === tenant_id();
                    $isCurrentPlan = $plan->id == $currentPlanId;
                    $link = tenant_route('tenant.billing', ['plan_id' => $plan->id]);
                    $buttonText = $plan->price == 0 ? 'Start Free Trial' : 'Change';
                @endphp
                <div x-show="billingPeriod === '{{ strtolower($plan->billing_period) }}' || '{{ $plan->is_free ? 'true' : 'false' }}' === 'true'"
                    x-data="{ showFeatures: true }"
                    class="relative flex flex-col rounded-2xl border dark:border-slate-600 bg-white dark:bg-slate-700 @if ($isCurrentPlan) ring-2 ring-indigo-600 dark:ring-indigo-500 @endif p-6 shadow-sm transition hover:shadow-md cursor-pointer h-full"
                    x-cloak>
                    <!-- Most Popular Badge -->
                    @if ($plan['featured'] != 0)
                        <div class="absolute -top-4 left-1/2 transform -translate-x-1/2">
                            <span class="bg-indigo-600 text-white text-xs font-semibold px-3 py-1 rounded-full">
                                {{ t('most_popular') }}
                            </span>
                        </div>
                    @endif

                    <div class="flex flex-col h-full justify-between">
                        <!-- Top Content Section -->
                        <div>
                            <h3 class="text-xl font-bold text-gray-900 dark:text-slate-200">{{ $plan->name }}</h3>
                            <p class="mt-2 text-sm text-gray-500 dark:text-gray-400 truncate">{{ $plan->description }}
                            </p>

                            <div class="mt-6">
                                @if ($plan->is_free && $plan->trial_days)
                                    <div class="flex justify-between items-center gap-4">
                                        <span class="text-4xl font-bold text-gray-900 dark:text-slate-200">{{ t('free') }}</span>
                                        <p class="mt-2 text-sm text-green-600">
                                            {{ $plan->trial_days }} {{ t('days_free_trial') }}
                                        </p>
                                    </div>
                                @else
                                    <span
                                        class="text-4xl font-bold text-gray-900 dark:text-slate-200">{{ get_base_currency()->format($plan->price) }}</span>
                                    <span
                                        class="ml-1 text-sm text-gray-500 dark:text-gray-400">/{{ $plan->billing_period }}</span>
                                @endif
                            </div>

                            <!-- Features Toggle -->
                            <div class="mt-6">
                                <button @click="showFeatures = !showFeatures"
                                    class="text-sm text-indigo-600 dark:text-indigo-500 hover:text-indigo-700 flex items-center">
                                    <span x-text="showFeatures ? 'Hide Features' : 'Show Features'"></span>
                                    <svg class="w-4 h-4 ml-1 transition-transform duration-200"
                                        :class="{ 'rotate-180': showFeatures }" fill="none" stroke="currentColor"
                                        viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M19 9l-7 7-7-7"></path>
                                    </svg>
                                </button>
                            </div>

                            <!-- Features List -->
                            <div x-show="showFeatures" x-transition:enter="transition ease-out duration-200"
                                x-transition:enter-start="opacity-0 transform -translate-y-2"
                                x-transition:enter-end="opacity-100 transform translate-y-0" class="mt-4 space-y-3">
                                @foreach ($plan['planFeatures'] as $feature)
                                    @if ($feature['value'] != 0)
                                        <div class="flex items-center">
                                            <svg class="h-5 w-5 text-green-500 flex-shrink-0" fill="none"
                                                stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                    d="M5 13l4 4L19 7"></path>
                                            </svg>
                                            <span class="ml-3 text-sm text-gray-700 dark:text-slate-200 ">
                                                {{ $feature['name'] }}:
                                            </span>
                                            <span class="dark:text-slate-200 ml-2">
                                                {{ $feature['value'] == '-1' ? 'Unlimited' : number_format($feature['value']) }}</span>
                                        </div>
                                    @endif
                                @endforeach
                            </div>
                        </div>

                        <!-- CTA Button - Always at Bottom -->
                        <div class="mt-8">
                            @if ($isCurrentPlan)
                                <span
                                    class="inline-flex items-center justify-center w-full px-4 py-2 rounded-lg text-white bg-gray-400 cursor-not-allowed">
                                    {{ t('current_plan') }}
                                    <svg class="w-5 h-5 ml-2 -mr-1" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd"
                                            d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
                                            clip-rule="evenodd"></path>
                                    </svg>
                                </span>
                            @else
                                @if ($plan->price == 0)
                                    <button wire:click="startFreeTrial({{ $plan->id }})"
                                        class="inline-flex items-center justify-center w-full px-4 py-2 rounded-lg text-white bg-indigo-600 hover:bg-indigo-700 transition-all">
                                        {{ $buttonText }}
                                        <svg class="w-5 h-5 ml-2 -mr-1" fill="currentColor" viewBox="0 0 20 20">
                                            <path fill-rule="evenodd"
                                                d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
                                                clip-rule="evenodd"></path>
                                        </svg>
                                    </button>
                                @else
                                    <a href="{{ $link }}"
                                        class="inline-flex items-center justify-center w-full px-4 py-2 rounded-lg text-white bg-indigo-600 hover:bg-indigo-700 transition-all">
                                        {{ $buttonText }}
                                        <svg class="w-5 h-5 ml-2 -mr-1" fill="currentColor" viewBox="0 0 20 20">
                                            <path fill-rule="evenodd"
                                                d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
                                                clip-rule="evenodd"></path>
                                        </svg>
                                    </a>
                                @endif
                            @endif
                        </div>
                    </div>
                </div>
            @empty
                <div x-cloak class="text-center py-10 col-span-full">
                    <p class="text-gray-600 dark:text-gray-400">{{ t('no_plans_available') }}</p>
                </div>
            @endforelse
        </div>
    </div>
</div>
