@extends(auth()->check() ? 'layouts.dasht' : 'layouts.base')
@section('content')
<div class="max-w-7xl mx-auto">
    {{-- Page Header --}}
    <div class="mb-8 text-center">
        <h1 class="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white">VIP Card Memberships</h1>
        <p class="mt-3 text-lg text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">Unlock exclusive benefits and premium privileges with our VIP membership tiers.</p>
    </div>

    {{-- Cards Grid --}}
    @if($cards->count() > 0)
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
        @foreach($cards as $card)
        <div class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden hover:shadow-xl transition-all duration-300 group relative {{ $card->featured ? 'ring-2 ring-primary-500' : '' }}">
            @if($card->featured)
                <div class="absolute top-4 right-4 z-10 px-3 py-1 bg-primary-500 text-white text-xs font-bold rounded-full uppercase tracking-wide">Popular</div>
            @endif

            {{-- Card Image / Gradient Header --}}
            <div class="relative h-48 overflow-hidden" style="background: linear-gradient(135deg, {{ $card->color }} 0%, {{ $card->color }}dd 100%);">
                @if($card->card_image)
                    <img src="{{ asset('dash/' . $card->card_image) }}" alt="{{ $card->name }}"
                         class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500 opacity-90">
                @else
                    <div class="w-full h-full flex items-center justify-center">
                        <i data-lucide="crown" class="w-20 h-20 text-white/30"></i>
                    </div>
                @endif
                <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/60 to-transparent p-4">
                    <h3 class="text-xl font-bold text-white">{{ $card->name }}</h3>
                </div>
            </div>

            {{-- Content --}}
            <div class="p-6">
                @if($card->short_description)
                    <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">{{ $card->short_description }}</p>
                @endif

                {{-- Price --}}
                <div class="mb-5">
                    <div class="flex items-baseline gap-1">
                        <span class="text-3xl font-bold text-gray-900 dark:text-white">${{ number_format($card->price, 2) }}</span>
                        <span class="text-sm text-gray-500 dark:text-gray-400">/ {{ $card->duration_text }}</span>
                    </div>
                </div>

                {{-- Benefits --}}
                @if($card->benefits && count($card->benefits) > 0)
                <ul class="space-y-2.5 mb-6">
                    @foreach(array_slice($card->benefits, 0, 5) as $benefit)
                    <li class="flex items-start gap-2.5">
                        <i data-lucide="check-circle-2" class="w-5 h-5 text-green-500 mt-0.5 flex-shrink-0"></i>
                        <span class="text-sm text-gray-700 dark:text-gray-300">{{ $benefit }}</span>
                    </li>
                    @endforeach
                    @if(count($card->benefits) > 5)
                    <li class="text-xs text-gray-500 dark:text-gray-400 pl-7">+ {{ count($card->benefits) - 5 }} more benefits</li>
                    @endif
                </ul>
                @endif

                {{-- Action --}}
                @if(in_array($card->id, $activeMemberships))
                    <div class="w-full text-center px-4 py-3 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 text-green-700 dark:text-green-400 rounded-xl text-sm font-medium">
                        <i data-lucide="badge-check" class="w-4 h-4 inline mr-1"></i> Active Membership
                    </div>
                @else
                    <div class="flex gap-2">
                        <a href="{{ route('vip-cards.show', $card) }}"
                           class="flex-1 text-center px-4 py-2.5 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-xl hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors text-sm font-medium">
                            Details
                        </a>
                        @auth
                        <a href="{{ route('vip-cards.purchase', $card) }}"
                           class="flex-1 text-center px-4 py-2.5 bg-primary-500 hover:bg-primary-600 text-white rounded-xl transition-colors text-sm font-medium">
                            Get Card
                        </a>
                        @else
                        <a href="{{ route('login') }}"
                           class="flex-1 text-center px-4 py-2.5 bg-primary-500 hover:bg-primary-600 text-white rounded-xl transition-colors text-sm font-medium">
                            Login to Purchase
                        </a>
                        @endauth
                    </div>
                @endif
            </div>
        </div>
        @endforeach
    </div>
    @else
    <div class="text-center py-16">
        <i data-lucide="crown" class="w-16 h-16 text-gray-300 dark:text-gray-600 mx-auto mb-4"></i>
        <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">No VIP cards available</h3>
        <p class="text-gray-600 dark:text-gray-400">Premium memberships coming soon. Check back later.</p>
    </div>
    @endif
</div>
@endsection
