<x-layouts.superadmin pageTitle="Planes">
    <x-page-header title="Planes SaaS" subtitle="Configura precios, límites y módulos">
        <x-btn href="{{ route('superadmin.plans.create') }}" variant="primary">+ Nuevo plan</x-btn>
    </x-page-header>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">
        @foreach ($plans as $plan)
            <div @class([
                'rounded-xl border bg-white shadow-sm overflow-hidden flex flex-col',
                'border-indigo-300 ring-2 ring-indigo-500/20' => $plan->is_featured,
                'border-gray-100' => !$plan->is_featured,
            ])>
                @if ($plan->is_featured)
                    <div class="bg-indigo-600 text-white text-xs font-semibold text-center py-1.5">★ Destacado</div>
                @endif
                <div class="p-5 flex-1">
                    <h3 class="text-lg font-bold text-gray-900">{{ $plan->name }}</h3>
                    <p class="text-xs text-gray-500 mt-1">{{ $plan->description }}</p>

                    <div class="mt-4">
                        <p class="text-3xl font-bold text-gray-900">$ {{ number_format($plan->effectivePriceMonthly(), 0, ',', '.') }}</p>
                        <p class="text-xs text-gray-500">/mes · {{ $plan->currency }}</p>
                    </div>

                    <ul class="mt-5 space-y-2 text-sm text-gray-700">
                        <li class="flex items-center gap-2">
                            <span class="w-4 h-4 text-emerald-500">✓</span>
                            {{ $plan->max_employees ?? '∞' }} empleados
                        </li>
                        <li class="flex items-center gap-2">
                            <span class="w-4 h-4 text-emerald-500">✓</span>
                            {{ $plan->max_services ?? '∞' }} servicios
                        </li>
                        <li class="flex items-center gap-2">
                            <span class="w-4 h-4 text-emerald-500">✓</span>
                            {{ $plan->max_bookings_month ? number_format($plan->max_bookings_month) : '∞' }} reservas/mes
                        </li>
                        <li class="flex items-center gap-2">
                            <span class="w-4 h-4 text-emerald-500">✓</span>
                            {{ $plan->max_branches ?? '∞' }} sedes
                        </li>
                        <li class="flex items-center gap-2 text-xs text-gray-500 pt-2 border-t border-gray-100 mt-3">
                            {{ $plan->modules()->count() }} módulos incluidos
                        </li>
                    </ul>
                </div>
                <div class="px-5 py-3 border-t border-gray-100 flex items-center justify-between">
                    <x-badge :color="$plan->is_active ? 'emerald' : 'gray'">{{ $plan->is_active ? 'Activo' : 'Inactivo' }}</x-badge>
                    <a href="{{ route('superadmin.plans.edit', $plan) }}" class="text-sm font-medium text-indigo-600 hover:text-indigo-700">Editar →</a>
                </div>
            </div>
        @endforeach
    </div>
</x-layouts.superadmin>
