@extends('member.layouts.app')

@section('title', 'My Card')

@section('content')
    @php
        $hasMembership = request()->boolean('membership', true);
        $plans = [
            ['name' => 'Monthly', 'price' => 'Rs. 999', 'period' => '/mo', 'features' => ['Digital Card', 'All Offers', 'Basic Support']],
            ['name' => 'Annual', 'price' => 'Rs. 8,999', 'period' => '/yr', 'features' => ['Digital Card', 'All Offers', 'Priority Support', '2 Months Free'], 'popular' => true],
        ];
    @endphp

    @if (!$hasMembership)
        <div class="max-w-4xl mx-auto py-8 text-center space-y-8">
            <div>
                <div class="w-20 h-20 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-6"><i data-lucide="lock" class="w-10 h-10 text-gray-400"></i></div>
                <h1 class="text-3xl font-bold text-gray-900 mb-4">Unlock Your Digital Card</h1>
                <p class="text-gray-600 max-w-lg mx-auto">Your digital membership card is locked. Subscribe to a plan to access exclusive discounts at over 500+ locations islandwide.</p>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-2xl mx-auto text-left">
                @foreach($plans as $plan)
                    <div class="relative bg-white p-8 rounded-2xl border-2 {{ !empty($plan['popular']) ? 'border-[#F5A623] shadow-lg' : 'border-gray-100 shadow-sm' }}">
                        @if(!empty($plan['popular']))<span class="absolute -top-3 left-1/2 -translate-x-1/2 bg-[#F5A623] text-[#0d4a4a] text-xs font-bold px-3 py-1 rounded-full">MOST POPULAR</span>@endif
                        <h3 class="text-lg font-bold text-gray-900">{{ $plan['name'] }}</h3>
                        <div class="flex items-baseline mt-2 mb-6"><span class="text-3xl font-bold text-[#0d4a4a]">{{ $plan['price'] }}</span><span class="text-gray-500 ml-1">{{ $plan['period'] }}</span></div>
                        <ul class="space-y-3 mb-8">@foreach($plan['features'] as $feature)<li class="flex items-center text-sm text-gray-600"><i data-lucide="shield-check" class="w-4 h-4 text-green-500 mr-2"></i>{{ $feature }}</li>@endforeach</ul>
                        <button class="w-full py-3 rounded-xl font-bold {{ !empty($plan['popular']) ? 'bg-[#0d4a4a] text-white' : 'bg-gray-100 text-gray-900' }}">Choose {{ $plan['name'] }}</button>
                    </div>
                @endforeach
            </div>
        </div>
    @else
        <div class="space-y-8">
            <div><h1 class="text-2xl font-bold text-gray-900">My Digital Card</h1><p class="text-gray-600">Show this card at partner locations to redeem offers.</p></div>
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-start">
                <div class="space-y-6">
                    <div class="relative w-full aspect-[1.586/1] rounded-2xl overflow-hidden shadow-2xl text-white p-8 flex flex-col justify-between bg-gradient-to-br from-[#0d4a4a] to-[#1a6b6b]">
                        <div class="flex justify-between items-start z-10"><span class="font-bold text-2xl tracking-tight">SaveSmart<span class="text-[#F5A623]">.lk</span></span><span class="bg-[#F5A623] text-[#0d4a4a] text-xs font-bold px-3 py-1.5 rounded">PREMIUM MEMBER</span></div>
                        <div class="w-14 h-10 bg-gradient-to-br from-[#F5A623] to-[#b87a15] rounded-md my-6 opacity-90"></div>
                        <div class="z-10 mt-auto"><p class="font-mono text-xl sm:text-2xl tracking-widest mb-6">SS-2024-8821-5234</p><div class="flex justify-between items-end"><div><p class="text-xs text-gray-300 uppercase tracking-wider mb-1">Member Name</p><p class="font-medium tracking-wide text-lg">{{ strtoupper(auth()->user()?->name ?? 'KASUN PERERA') }}</p></div><div class="text-right"><p class="text-xs text-gray-300 uppercase tracking-wider mb-1">Expires</p><p class="font-medium text-lg">12/2026</p></div></div></div>
                    </div>
                    <div class="flex gap-4"><button class="flex-1 flex items-center justify-center gap-2 py-3 bg-white border border-gray-200 rounded-xl font-medium text-gray-700"><i data-lucide="download" class="w-4 h-4"></i>Save to Phone</button><button class="flex-1 flex items-center justify-center gap-2 py-3 bg-white border border-gray-200 rounded-xl font-medium text-gray-700"><i data-lucide="share-2" class="w-4 h-4"></i>Share Details</button></div>
                </div>
                <div class="bg-white p-8 rounded-2xl shadow-sm border border-gray-100 space-y-6">
                    <div class="text-center"><h3 class="text-lg font-bold text-gray-900 mb-2">Scan for Verification</h3><p class="text-sm text-gray-500">Partners can scan this code to verify your membership status.</p></div>
                    <div class="flex justify-center py-4"><div class="p-4 bg-white border-2 border-gray-100 rounded-xl shadow-sm"><i data-lucide="qr-code" class="w-48 h-48 text-[#0d4a4a]"></i></div></div>
                    <div class="space-y-4 pt-4 border-t border-gray-100"><div class="flex justify-between"><span class="text-sm text-gray-600">Membership Plan</span><span class="font-medium text-gray-900">Annual Premium</span></div><div class="flex justify-between"><span class="text-sm text-gray-600">Status</span><span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">Active</span></div></div>
                </div>
            </div>
        </div>
    @endif
@endsection