@extends('member.layouts.app')

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

@section('content')
    @php $hasMembership = request()->boolean('membership', true); $memberName = auth()->user()?->name ?? 'Kasun Perera'; $initials = collect(explode(' ', trim($memberName)))->map(fn($w) => strtoupper(substr($w, 0, 1)))->take(2)->implode(''); @endphp

    <div class="space-y-6">
        <div><h1 class="text-2xl font-bold text-gray-900">My Profile</h1><p class="text-gray-600">Manage your account settings and preferences.</p></div>
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
            <div class="lg:col-span-1 space-y-6">
                <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100 text-center"><div class="w-24 h-24 bg-[#0d4a4a] rounded-full flex items-center justify-center text-white text-3xl font-bold mx-auto mb-4">{{ $initials }}</div><h2 class="text-xl font-bold text-gray-900">{{ $memberName }}</h2><p class="text-gray-500 text-sm mb-4">Member since Jan 2024</p>@if($hasMembership)<div class="inline-flex items-center px-3 py-1 rounded-full bg-[#F5A623]/10 text-[#F5A623] text-sm font-bold"><i data-lucide="crown" class="w-3 h-3 mr-1"></i>Premium Member</div>@else<div class="inline-flex items-center px-3 py-1 rounded-full bg-gray-100 text-gray-600 text-sm font-bold">Free User</div>@endif</div>
                <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100"><h3 class="font-bold text-gray-900 mb-4">Membership Details</h3><div class="space-y-4"><div class="flex justify-between py-2 border-b border-gray-50"><span class="text-gray-500 text-sm">Plan</span><span class="font-medium text-gray-900 text-sm">{{ $hasMembership ? 'Annual Premium' : 'Free Tier' }}</span></div><div class="flex justify-between py-2 border-b border-gray-50"><span class="text-gray-500 text-sm">Status</span><span class="font-medium text-sm {{ $hasMembership ? 'text-green-600' : 'text-gray-500' }}">{{ $hasMembership ? 'Active' : 'Inactive' }}</span></div>@if($hasMembership)<div class="flex justify-between py-2 border-b border-gray-50"><span class="text-gray-500 text-sm">Expires On</span><span class="font-medium text-gray-900 text-sm">Dec 31, 2026</span></div>@endif<button class="w-full mt-2 py-2 text-sm font-medium border rounded-lg {{ $hasMembership ? 'text-[#0d4a4a] border-[#0d4a4a]' : 'bg-[#F5A623] text-[#0d4a4a] border-[#F5A623]' }}">{{ $hasMembership ? 'Renew Membership' : 'Upgrade to Premium' }}</button></div></div>
            </div>
            <div class="lg:col-span-2 space-y-6">
                <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100"><h3 class="font-bold text-gray-900 mb-6">Personal Information</h3><div class="grid grid-cols-1 md:grid-cols-2 gap-6"><input type="text" value="Kasun" class="w-full px-4 py-2 rounded-lg border border-gray-200"><input type="text" value="Perera" class="w-full px-4 py-2 rounded-lg border border-gray-200"><input type="email" value="kasun@example.com" class="w-full px-4 py-2 rounded-lg border border-gray-200"><input type="tel" value="+94 77 123 4567" class="w-full px-4 py-2 rounded-lg border border-gray-200"><input type="text" value="123, Galle Road, Colombo 03" class="w-full px-4 py-2 rounded-lg border border-gray-200 md:col-span-2"></div><div class="mt-6 flex justify-end"><button class="px-6 py-2 bg-[#0d4a4a] text-white rounded-lg font-medium">Save Changes</button></div></div>
                <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100"><h3 class="font-bold text-gray-900 mb-6">Security</h3><div class="space-y-4"><div class="flex items-center justify-between p-4 border border-gray-100 rounded-lg"><div><p class="font-medium text-gray-900">Password</p><p class="text-sm text-gray-500">Last changed 3 months ago</p></div><button class="text-sm font-medium text-[#0d4a4a]">Change</button></div><div class="flex items-center justify-between p-4 border border-gray-100 rounded-lg"><div><p class="font-medium text-gray-900">Two-Factor Authentication</p><p class="text-sm text-gray-500">Add an extra layer of security</p></div><button class="text-sm font-medium text-[#0d4a4a]">Enable</button></div></div></div>
            </div>
        </div>
    </div>
@endsection