@extends('member.layouts.default')

@section('page_title', 'Explore Membership Tiers' . config('default.page_title_delimiter') . config('default.app_name'))

@section('content')
<div class="relative">
    <div class="max-w-7xl mx-auto px-4 md:px-8 py-8 md:py-12 space-y-10">
        
        {{-- Header Section --}}
        <div class="flex flex-col md:flex-row md:items-center justify-between gap-6 animate-fade-in-up">
            <div>
                <h1 class="text-3xl md:text-5xl font-extrabold text-secondary-900 dark:text-white tracking-tight mb-3">
                    Premium <span class="text-primary-600 dark:text-primary-400">Tiers</span> 🏆
                </h1>
                <p class="text-base md:text-lg text-secondary-500 dark:text-secondary-400 max-w-2xl">
                    Discover exclusive membership clubs. Join a tier to unlock better multipliers, unique rewards, and special benefits.
                </p>
            </div>

            {{-- Back to Dashboard Action --}}
            <a href="{{ route('member.cards') }}" 
               class="inline-flex items-center justify-center px-6 py-3 bg-white dark:bg-secondary-900 text-secondary-700 dark:text-secondary-200 font-bold rounded-2xl border border-secondary-200 dark:border-secondary-800 shadow-sm transition-all duration-200 hover:bg-secondary-50 dark:hover:bg-secondary-800">
                <x-ui.icon icon="arrow-left" class="w-5 h-5 mr-2" />
                Return Home
            </a>
        </div>
@if(session('success'))
    <div class="mb-6 p-4 bg-emerald-50 border border-emerald-200 text-emerald-700 rounded-2xl flex items-center gap-3 animate-fade-in">
        <x-ui.icon icon="check-circle" class="w-5 h-5" />
        <span class="font-bold">{{ session('success') }}</span>
    </div>
@endif

@if(session('error'))
    <div class="mb-6 p-4 bg-red-50 border border-red-200 text-red-700 rounded-2xl flex items-center gap-3 animate-fade-in">
        <x-ui.icon icon="alert-circle" class="w-5 h-5" />
        <span class="font-bold">{{ session('error') }}</span>
    </div>
@endif
        {{-- Tiers Grid --}}
        @if(isset($tiers) && $tiers->isNotEmpty())
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                @foreach($tiers as $index => $tier)
                    <div class="group animate-slide-in-up" style="animation-delay: {{ $index * 100 }}ms;">
                        <div class="relative h-full bg-white dark:bg-secondary-900 rounded-[2.5rem] shadow-sm hover:shadow-2xl border border-secondary-100 dark:border-secondary-800 transition-all duration-500 overflow-hidden flex flex-col">
                            
                            {{-- Visual Card Header --}}
                            <div class="relative p-8 text-white overflow-hidden" style="background-color: {{ $tier->color ?? '#4f46e5' }};">
                                {{-- Background Pattern --}}
                                <div class="absolute inset-0 opacity-10 pointer-events-none">
                                    <svg class="h-full w-full" viewBox="0 0 100 100" preserveAspectRatio="none">
                                        <path d="M0 100 C 20 0 50 0 100 100 Z" fill="currentColor"></path>
                                    </svg>
                                </div>

                                <div class="relative flex justify-between items-start">
                                    <div class="space-y-1">
                                        <span class="px-3 py-1 bg-white/20 backdrop-blur-sm rounded-full text-[10px] font-bold uppercase tracking-widest">Available Tier</span>
                                        <h2 class="text-2xl font-black uppercase tracking-tight">{{ $tier->name }}</h2>
                                        <p class="text-white/80 text-sm font-medium flex items-center gap-1.5">
                                            <x-ui.icon icon="building" class="w-4 h-4" />
                                            {{ $tier->club->name ?? 'Premium Club' }}
                                        </p>
                                    </div>
                                    <div class="w-14 h-14 bg-white/20 backdrop-blur-xl rounded-2xl flex items-center justify-center shadow-inner">
                                        <x-ui.icon icon="award" class="w-7 h-7 text-white" />
                                    </div>
                                </div>
                            </div>

                            {{-- Card Perks Body --}}
                            <div class="p-8 flex-1 flex flex-col">
                                <div class="grid grid-cols-1 gap-4 mb-8">
                                    <!--div class="flex items-center justify-between p-4 rounded-2xl bg-secondary-50 dark:bg-secondary-800/40 border border-secondary-200/50 dark:border-secondary-700/30">
                                        <div class="flex items-center gap-3">
                                            <div class="p-2 bg-amber-500/10 rounded-lg">
                                                <x-ui.icon icon="trending-up" class="w-4 h-4 text-amber-600" />
                                            </div>
                                            <span class="text-sm text-secondary-600 dark:text-secondary-400 font-semibold">Multiplier</span>
                                        </div>
                                        <span class="text-xl font-black text-secondary-900 dark:text-white">{{ $tier->points_multiplier }}x</span>
                                    </div-->
									<div class="flex items-center justify-between p-4 rounded-2xl bg-secondary-50 dark:bg-secondary-800/40 border border-secondary-200/50 dark:border-secondary-700/30">
										<div class="flex items-center gap-3">
											<div class="p-2 bg-amber-500/10 rounded-lg">
												<x-ui.icon icon="wallet" class="w-4 h-4 text-amber-600" />
											</div>
											<span class="text-sm text-secondary-600 dark:text-secondary-400 font-semibold">
												{{ trans('common.points_threshold') }}
											</span>
										</div>
										<span class="text-xl font-black text-secondary-900 dark:text-white">
											{{ number_format($tier->points_threshold) }} EGP
										</span>
									</div>
                                    <div class="flex items-center justify-between p-4 rounded-2xl bg-secondary-50 dark:bg-secondary-800/40 border border-secondary-200/50 dark:border-secondary-700/30">
                                        <div class="flex items-center gap-3">
                                            <div class="p-2 bg-emerald-500/10 rounded-lg">
                                                <x-ui.icon icon="tag" class="w-4 h-4 text-emerald-600" />
                                            </div>
                                            <span class="text-sm text-secondary-600 dark:text-secondary-400 font-semibold">
											{{ trans('common.redemption_discount') }}
											</span>
                                        </div>
                                        <span class="text-xl font-black text-secondary-900 dark:text-white">
											{{ number_format(floatval($tier->redemption_discount) * 100, 0) }}%
										</span>
                                    </div>

                                    <div class="flex items-center justify-between p-4 rounded-2xl bg-primary-100/30 dark:bg-primary-900/10 border border-primary-200/50 dark:border-primary-800/30">
                                        <div class="flex items-center gap-3">
                                            <div class="p-2 bg-primary-500/10 rounded-lg">
                                                <x-ui.icon icon="coins" class="w-4 h-4 text-primary-600" />
                                            </div>
                                            <span class="text-sm text-primary-700 dark:text-primary-400 font-bold">
											{{ trans('common.card_price') }}
											</span>
                                        </div>
                                        <span class="text-xl font-black text-primary-600">
										{{ number_format($tier->price) }}
										 EGP
										</span>
                                    </div>
                                </div>

                                {{-- Subscription Form --}}
                                <div class="mt-auto">
                                    <form action="{{ route('member.tier.apply', ['tier_id' => $tier->id]) }}" method="POST">
                                        @csrf
                                        <button type="submit" class="group relative w-full overflow-hidden py-4 px-6 bg-secondary-900 dark:bg-white dark:text-secondary-900 text-white font-black rounded-2xl transition-all duration-300 hover:shadow-xl hover:scale-[1.02] active:scale-[0.98]">
                                            <span class="relative z-10">Get This Card</span>
                                            <div class="absolute inset-0 bg-primary-600 translate-y-full group-hover:translate-y-0 transition-transform duration-300"></div>
                                        </button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        @else
            {{-- Empty State --}}
            <div class="bg-white dark:bg-secondary-900 border-2 border-dashed border-secondary-200 dark:border-secondary-800 rounded-[3rem] p-20 text-center animate-fade-in-up">
                <div class="w-24 h-24 bg-secondary-50 dark:bg-secondary-800 rounded-full flex items-center justify-center mx-auto mb-6">
                    <x-ui.icon icon="search" class="w-10 h-10 text-secondary-300" />
                </div>
                <h3 class="text-2xl font-bold text-secondary-900 dark:text-white mb-2">No Tiers Found</h3>
                <p class="text-secondary-500 dark:text-secondary-400 max-w-sm mx-auto">
                    There are currently no membership tiers available to join. Please check back later.
                </p>
            </div>
        @endif

    </div>
</div>
@stop