@use('App\Support\Img')
@php $pill = ['approved' => 'bg-emerald-100 text-emerald-700', 'pending' => 'bg-amber-100 text-amber-700', 'rejected' => 'bg-red-100 text-red-700']; @endphp
<x-layouts.dashboard title="My dashboard">
    <h1 class="mb-6 text-2xl font-bold text-slate-900 dark:text-white">Welcome, {{ auth()->user()->name }}</h1>

    @if(! $member)
        <div class="card p-8 text-slate-500">No member profile is linked to this account yet.</div>
    @else
        <div class="grid gap-6 lg:grid-cols-3">
            <div class="card p-6 text-center">
                <img src="{{ Img::avatar($member->photo, $member->name) }}" alt="" class="mx-auto h-28 w-28 rounded-full object-cover ring-4 ring-blue-500/20">
                <h2 class="mt-4 text-lg font-bold text-slate-900 dark:text-white">{{ $member->name }}</h2>
                <p class="text-sm text-slate-500">{{ $member->student_id }}</p>
                <span class="badge mt-3 {{ $pill[$member->status] ?? '' }}">Membership: {{ ucfirst($member->status) }}</span>
                <a href="{{ route('member.profile.edit') }}" class="btn btn-ghost btn-sm mt-5 w-full">Edit profile</a>
            </div>

            <div class="card p-6 lg:col-span-2">
                <h2 class="font-bold text-slate-900 dark:text-white">Profile details</h2>
                <dl class="mt-4 grid gap-x-6 gap-y-3 text-sm sm:grid-cols-2">
                    @foreach(['Department' => $member->department?->name, 'Batch' => $member->batch, 'Section' => $member->section, 'Email' => $member->email, 'Phone' => $member->phone, 'Blood group' => $member->blood_group] as $label => $value)
                        <div><dt class="text-slate-500">{{ $label }}</dt><dd class="font-medium text-slate-900 dark:text-slate-100">{{ $value }}</dd></div>
                    @endforeach
                </dl>
                <h2 class="mt-6 font-bold text-slate-900 dark:text-white">Payment</h2>
                @if($member->latestPayment)
                    <p class="mt-2 text-sm">{{ $member->latestPayment->amount }} BDT via {{ ucfirst($member->latestPayment->method) }}
                        @if($member->latestPayment->transaction_id) (TrxID {{ $member->latestPayment->transaction_id }}) @endif
                        <span class="badge ml-2 {{ $pill[$member->latestPayment->status] ?? '' }}">{{ ucfirst($member->latestPayment->status) }}</span></p>
                @else
                    <p class="mt-2 text-sm text-slate-500">No payment recorded.</p>
                @endif
            </div>
        </div>
    @endif

    <div class="card mt-6 p-6">
        <h2 class="font-bold text-slate-900 dark:text-white">Events I joined</h2>
        @forelse($upcoming->concat($past) as $event)
            <a href="{{ route('events.show', $event) }}" class="mt-3 flex items-center justify-between rounded-xl border border-slate-200 p-3 text-sm hover:border-blue-400 dark:border-slate-800">
                <span class="font-medium text-slate-900 dark:text-slate-100">{{ $event->title }}</span>
                <span class="text-slate-500">{{ $event->starts_at->format('d M Y') }} · <span class="{{ $event->isUpcoming() ? 'text-emerald-600' : '' }}">{{ $event->isUpcoming() ? 'Upcoming' : 'Attended' }}</span>@if($event->pivot->status !== 'approved') · <span class="text-amber-600">Payment {{ $event->pivot->status }}</span>@endif</span>
            </a>
        @empty
            <p class="mt-2 text-sm text-slate-500">You have not registered for any event yet. <a href="{{ route('events.index') }}" class="text-blue-600 hover:underline">Browse events</a></p>
        @endforelse
    </div>
</x-layouts.dashboard>