@extends('member.layouts.app')

@section('content')
<div class="container mx-auto py-8">
    <div class="text-center mb-10">
        <h1 class="text-3xl font-bold text-gray-800">اختر باقة العضوية المناسبة لك 🎖️</h1>
        <p class="text-gray-600 mt-2">انضم الآن واستمتع بمميزات حصرية ونقاط مضاعفة مع كل عملية شراء.</p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        @foreach($tiers as $tier)
            <div class="bg-white border-2 border-gray-100 rounded-2xl shadow-sm hover:shadow-xl transition-shadow duration-300 overflow-hidden">
                <div class="p-6 text-center" style="background-color: {{ $tier->color }}20;">
                    <div class="text-4xl mb-2">{{ $tier->icon ?? '⭐' }}</div>
                    <h2 class="text-2xl font-bold" style="color: {{ $tier->color }};">{{ $tier->display_name['en_US'] ?? $tier->name }}</h2>
                </div>

                <div class="p-6">
                    <ul class="space-y-4 mb-8">
                        <li class="flex items-center text-gray-700">
                            <span class="bg-green-100 text-green-600 rounded-full p-1 mr-3">✓</span>
                            نقاط مضاعفة: <b>{{ $tier->points_multiplier }}x</b>
                        </li>
                        <li class="flex items-center text-gray-700">
                            <span class="bg-green-100 text-green-600 rounded-full p-1 mr-3">✓</span>
                            خصم عند الاستبدال: <b>{{ $tier->redemption_discount }}%</b>
                        </li>
                        <li class="flex items-center text-gray-700">
                            <span class="bg-blue-100 text-blue-600 rounded-full p-1 mr-3">i</span>
                            حد النقاط المطلوب: <b>{{ number_format($tier->points_threshold) }}</b>
                        </li>
                    </ul>

                    <form action="{{ route('member.tier.apply', ['tier_id' => $tier->id]) }}" method="POST">
                        @csrf
                        <button type="submit" 
                                class="w-full py-3 rounded-xl font-bold text-white transition-transform hover:scale-105"
                                style="background-color: {{ $tier->color }};">
                            اشتراك الآن
                        </button>
                    </form>
                </div>
            </div>
        @endforeach
    </div>
</div>
@endsection