@extends('layouts.admin')

@section('title', $user->name . ' - ' . ($user->club->name ?? config('app.name')))

@section('header')
    <div class="flex items-center gap-4">
        <a href="{{ route('members.index') }}" class="p-2 bg-white border border-gray-200 rounded-lg text-gray-400 hover:text-indigo-600 hover:border-indigo-100 hover:shadow-sm transition-all">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" /></svg>
        </a>
        <h1 class="text-2xl font-black text-gray-900 font-display tracking-tight">{{ $user->name }}</h1>
    </div>
@endsection

@section('content')
    <!-- Dashboard Header Area -->
    <div class="mb-8">
        <div class="relative">
            <div class="py-4 relative">
                <div class="flex flex-col md:flex-row gap-8 items-start md:items-center">
                    <!-- Photo -->
                    <div class="relative group">
                        <div class="w-40 h-40 rounded-lg overflow-hidden bg-gray-100 border-4 border-white shadow-xl flex-shrink-0 transition-transform group-hover:scale-105">
                            @if($user->photo_url_medium)
                                <img src="{{ $user->photo_url_medium }}" alt="{{ $user->name }}" class="w-full h-full object-cover">
                            @else
                                <div class="w-full h-full flex items-center justify-center text-gray-300">
                                    <svg class="w-20 h-20" fill="currentColor" viewBox="0 0 24 24">
                                        <path d="M24 20.993V24H0v-2.996A14.977 14.977 0 0112.004 15c4.904 0 9.26 2.354 11.996 5.993zM16.002 8.999a4 4 0 11-8 0 4 4 0 018 0z" />
                                    </svg>
                                </div>
                            @endif
                        </div>
                    </div>

                    <!-- Identity -->
                    <div class="flex-1">
                        <div class="flex items-center gap-3 mb-2">
                            @if($user->is_active)
                                <span class="px-3 py-1 bg-green-100 text-green-700 text-[10px] font-black uppercase tracking-widest rounded-full border border-green-200 shadow-sm flex items-center gap-1.5">
                                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7" /></svg>
                                    Active
                                </span>
                            @else
                                <span class="px-3 py-1 bg-red-100 text-red-700 text-[10px] font-black uppercase tracking-widest rounded-full border border-red-200 shadow-sm flex items-center gap-1.5">
                                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M6 18L18 6M6 6l12 12" /></svg>
                                    Inactive
                                </span>
                            @endif
                            <span class="px-3 py-1 bg-indigo-50 text-indigo-700 text-[10px] font-black uppercase tracking-widest rounded-full border border-indigo-100 shadow-sm">
                                {{ $user->club?->member_reference_description ? $user->club->member_reference_description . ': ' : '' }}{{ $user->reference_number ?? '#' . $user->id }}
                            </span>
                            @if($user->reference_number_2)
                                <span class="px-3 py-1 bg-purple-50 text-purple-700 text-[10px] font-black uppercase tracking-widest rounded-full border border-purple-100 shadow-sm">
                                    {{ $user->club?->member_reference_description_2 ? $user->club->member_reference_description_2 . ': ' : '' }}{{ $user->reference_number_2 }}
                                </span>
                            @endif
                            @if($user->no_photo_permission)
                                <span class="px-3 py-1 bg-yellow-100 text-yellow-800 text-[10px] font-black uppercase tracking-widest rounded-full border border-yellow-200 shadow-sm flex items-center gap-1.5">
                                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3l18 18" />
                                    </svg>
                                    No Photos
                                </span>
                            @endif
                        </div>
                        <h2 class="text-4xl font-black text-gray-900 font-display tracking-tight mb-2">{{ $user->name }}</h2>
                        <div class="flex flex-wrap items-center gap-y-2 gap-x-6 text-sm text-gray-500 font-medium">
                            <div class="flex items-center gap-2">
                                <svg class="w-4 h-4 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" /></svg>
                                <a href="mailto:{{ $user->email }}">{{ $user->email }}</a>
                            </div>
                            @if($user->telephone)
                            <div class="flex items-center gap-2">
                                <svg class="w-4 h-4 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" /></svg>
                                <a href="tel:{{ $user->telephone }}">{{ $user->telephone }}</a>
                            </div>
                            @endif
                        </div>
                    </div>

                    <!-- Actions -->
                    <div class="flex flex-col gap-3">
                        @if(auth()->user()->role === 'club_manager' || auth()->user()->role === 'admin')
                            <a href="{{ route('members.edit', $user) }}" class="inline-flex items-center justify-center px-6 py-3 bg-indigo-600 text-white text-sm font-black uppercase tracking-widest rounded-lg shadow-lg shadow-indigo-200 hover:bg-indigo-700 hover:-translate-y-0.5 transition-all">
                                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" /></svg>
                                Manage Member
                            </a>
                        @endif
                        @if(auth()->user()->role === 'admin')
                            <a href="{{ route('admin.impersonate', $user) }}" class="inline-flex items-center justify-center px-6 py-3 bg-white border-2 border-indigo-100 text-indigo-600 text-sm font-black uppercase tracking-widest rounded-lg hover:bg-indigo-50 hover:border-indigo-200 transition-all">
                                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1" /></svg>
                                Impersonate
                            </a>
                        @endif
                    </div>
                </div>
            </div>

            <!-- Dashboard Quick Stats -->
            <div class="grid grid-cols-2 md:grid-cols-4 bg-white rounded-lg border border-gray-100 shadow-sm divide-x divide-gray-100">
                <div class="p-6 text-center">
                    <p class="text-[10px] font-black text-gray-400 uppercase tracking-widest mb-1">Attendance</p>
                    <div class="flex items-center justify-center gap-2">
                        <span class="text-2xl font-black text-gray-900 font-display leading-none">{{ $stats['total_attendance'] }}</span>
                        <span class="text-[10px] font-bold text-indigo-500 bg-indigo-50 px-1.5 py-0.5 rounded-lg border border-indigo-100">+{{ $stats['attendance_this_month'] }} this month</span>
                    </div>
                </div>
                <div class="p-6 text-center">
                    <p class="text-[10px] font-black text-gray-400 uppercase tracking-widest mb-1">Current Rank</p>
                    <div class="flex items-center justify-center gap-2">
                        @if($user->rank)
                            <div class="w-6 h-6 rounded-md border border-gray-200 shadow-sm shrink-0" 
                                 style="@if($user->rank->css)background:{{ $user->rank->css }}@else background-color: {{ $user->rank->color ?? '#cccccc' }};@endif">
                            </div>
                        @endif
                        <span class="text-2xl font-black text-gray-900 font-display leading-none">{{ $user->rank?->name ?? 'None' }}</span>
                    </div>
                </div>
                <div class="p-6 text-center">
                    <p class="text-[10px] font-black text-gray-400 uppercase tracking-widest mb-1">Last Graded</p>
                    <div class="text-2xl font-black text-gray-900 font-display leading-none">
                        {{ $stats['last_grading'] ? $stats['last_grading']->graded_at->format('M Y') : 'Never' }}
                    </div>
                </div>
                <div class="p-6 text-center">
                    <p class="text-[10px] font-black text-gray-400 uppercase tracking-widest mb-1">Member for</p>
                    <div class="text-2xl font-black text-gray-900 font-display leading-none">
                        @php
                            $diff = $stats['joined_date']->diff(now());
                        @endphp
                        {{ $diff->y }} <span class="text-sm text-gray-400">Yrs</span>
                        {{ $diff->m }} <span class="text-sm text-gray-400">Mths</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 items-start">
        <!-- Main Column (History & Logs) -->
        <div class="lg:col-span-2 space-y-8">
            <!-- 0. Grading Countdown -->
            <div class="bg-indigo-600 rounded-lg shadow-xl shadow-indigo-100 p-8 text-white mb-8">
                <div class="flex items-center justify-between">
                    <div>
                        <h3 class="text-xs font-black uppercase tracking-widest opacity-60 mb-1">Grading Countdown</h3>
                        <p class="text-xl font-black font-display tracking-tight">Current grade for  
                            @if($stats['time_since_last_grading']->y > 0) {{ $stats['time_since_last_grading']->y }} years    @endif
                            @if($stats['time_since_last_grading']->m > 0) {{ $stats['time_since_last_grading']->m }} months @endif
                        </p>
                    </div>
                    <div class="text-center">
                        <span class="text-5xl font-black font-display leading-none leading-none tracking-tighter">{{ $stats['sessions_since_last_grading'] }}</span>
                        <p class="text-[10px] font-black uppercase tracking-widest opacity-60 mt-1">Sessions since grading</p>
                    </div>
                </div>
            </div>

            <!-- 1. Attendance Log (Expandable & Paginated) -->
            <div class="bg-white rounded-lg shadow-sm border border-gray-100 p-8" 
                 x-data="{ 
                    mode: 'compact', 
                    page: 1, 
                    perPage: 10, 
                    total: {{ $user->attendanceSessions->count() }},
                    get totalPages() { return Math.ceil(this.total / this.perPage) },
                    
                     // Session Notes Modal State
                    modalOpen: false,
                    modalTitle: '',
                    modalDetails: '',
                    modalDate: '',
                    modalLocation: '',
                    openModal(title, details, date, location) {
                        this.modalTitle = title;
                        this.modalDetails = details;
                        this.modalDate = date;
                        this.modalLocation = location;
                        this.modalOpen = true;
                    }
                 }">
                <div class="flex items-center justify-between mb-8">
                    <div>
                        <h3 class="text-xl font-black text-gray-900 font-display tracking-tight uppercase tracking-widest text-xs opacity-40 mb-1">Attendance History</h3>
                        @if($stats['last_attendance'])
                            <p class="text-sm text-gray-500 font-medium italic">Latest session recorded on {{ $stats['last_attendance']->format('jS M Y') }}</p>
                        @else
                            <p class="text-sm text-gray-500 font-medium italic">This member has never attended a session</p>
                        @endif
                    </div>
                    <div class="p-3 bg-indigo-50 rounded-lg">
                        <svg class="w-6 h-6 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /></svg>
                    </div>
                </div>

                @if($user->attendanceSessions->count() > 0)
                    <div class="space-y-3">
                        @foreach($user->attendanceSessions as $index => $session)
                            <div class="flex items-center justify-between p-4 rounded-lg bg-gray-50 hover:bg-white hover:shadow-md hover:scale-[1.01] border border-transparent hover:border-gray-100 transition-all group"
                                 x-show="mode === 'compact' ? {{ $index }} < 5 : ({{ $index }} >= (page - 1) * perPage && {{ $index }} < page * perPage)"
                                 x-cloak x-transition>
                                <div class="flex items-center gap-4">
                                    <div class="w-10 h-10 rounded-xl bg-white border border-gray-100 flex items-center justify-center shadow-sm text-gray-400 group-hover:text-indigo-600 transition-colors">
                                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
                                    </div>
                                    <div>
                                        <p class="text-sm font-bold text-gray-900">{{ $session->venue->name }}</p>
                                        <p class="text-[10px] font-bold text-gray-400 tracking-wider uppercase">{{ $session->date->format('l, jS F Y') }}</p>
                                    </div>
                                </div>
                                <div class="text-right flex items-center gap-2">
                                    @php
                                        $dateKey = $session->date->format('Y-m-d');
                                    @endphp
                                    @if(isset($sessionNotes[$dateKey]))
                                        <button @click="openModal({{ json_encode($sessionNotes[$dateKey]->title) }}, {{ json_encode($sessionNotes[$dateKey]->details) }}, '{{ $session->date->format('l, jS F Y') }}', '{{ $session->venue->name }}')" 
                                           class="inline-flex items-center gap-1 px-3 py-1 rounded-full text-[10px] font-black bg-indigo-50 text-indigo-700 border border-indigo-100 hover:bg-indigo-100 transition-colors">
                                           <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" /></svg>
                                           Session Notes
                                        </button>
                                    @endif
                                    <span class="inline-flex items-center px-3 py-1 rounded-full text-[10px] font-black bg-white text-gray-600 border border-gray-200 group-hover:border-indigo-100 group-hover:bg-indigo-50 group-hover:text-indigo-700 transition-all">
                                        {{ $session->created_at->format('H:i') }}
                                    </span>
                                </div>
                            </div>
                        @endforeach
                    </div>

                    <!-- Session Notes Modal -->
                    <div x-show="modalOpen" class="fixed inset-0 z-50 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true" style="display: none;">
                        <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
                            <div x-show="modalOpen" x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true" @click="modalOpen = false"></div>

                            <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>

                            <div x-show="modalOpen" x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100" x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg w-full">
                                <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                                    <div class="sm:flex sm:items-start">
                                        <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-indigo-100 sm:mx-0 sm:h-10 sm:w-10">
                                            <svg class="h-6 w-6 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" /></svg>
                                        </div>
                                        <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
                                            <div class="mb-2">
                                                <h3 class="text-sm font-bold text-gray-900" x-text="modalLocation"></h3>
                                                <p class="text-xs text-gray-500 font-medium uppercase tracking-wide" x-text="modalDate"></p>
                                            </div>
                                            <div class="mt-2">
                                                <p class="text-sm text-gray-800 whitespace-pre-wrap" x-text="modalDetails"></p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
                                    <button type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm" @click="modalOpen = false">
                                        Close
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Pagination Controls -->
                    <div x-show="mode === 'all'" x-cloak class="mt-6 flex items-center justify-between pt-4 border-t border-gray-100">
                        <div class="text-[10px] font-black uppercase tracking-widest text-gray-400">
                            Page <span x-text="page" class="text-indigo-600"></span> of <span x-text="totalPages"></span>
                        </div>
                        <div class="flex gap-2">
                            <button @click="page > 1 ? page-- : null" :disabled="page === 1" 
                                    class="p-2 rounded-lg bg-gray-50 text-gray-400 hover:text-indigo-600 disabled:opacity-30 disabled:hover:text-gray-400 transition-all border border-gray-100 shadow-sm">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" /></svg>
                            </button>
                            <button @click="page < totalPages ? page++ : null" :disabled="page === totalPages" 
                                    class="p-2 rounded-lg bg-gray-50 text-gray-400 hover:text-indigo-600 disabled:opacity-30 disabled:hover:text-gray-400 transition-all border border-gray-100 shadow-sm">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>
                            </button>
                        </div>
                    </div>

                    @if($user->attendanceSessions->count() > 5)
                        <div class="mt-6 text-center flex flex-col items-center gap-3">
                            <button x-show="mode === 'compact'" @click="mode = 'all'; page = 1" 
                                    class="inline-flex items-center gap-2 px-4 py-2 bg-gray-50 text-gray-500 text-[10px] font-black uppercase tracking-widest rounded-xl border border-gray-100 hover:bg-white hover:shadow-sm hover:text-indigo-600 transition-all">
                                <span>Show All Attendance ({{ $user->attendanceSessions->count() }})</span>
                                <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /></svg>
                            </button>
                            <button x-show="mode === 'all'" x-cloak @click="mode = 'compact'; page = 1" 
                                    class="text-[10px] font-black uppercase tracking-widest text-gray-400 hover:text-indigo-600 transition-colors">
                                Show Less (Back to Top 5)
                            </button>
                        </div>
                    @endif
                @else
                    <div class="text-center py-12 bg-gray-50/50 rounded-lg border border-dashed border-gray-200">
                        <svg class="w-12 h-12 text-gray-300 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
                        <p class="text-sm font-medium text-gray-400">No attendance data recorded yet.</p>
                    </div>
                @endif
            </div>

            <!-- 2. Grading History (Expandable) -->
            <div class="bg-white rounded-lg shadow-sm border border-gray-100 p-8" x-data="{ expanded: false }">
                <div class="flex items-center justify-between mb-8">
                    <div>
                        <h3 class="text-xl font-black text-gray-900 font-display tracking-tight uppercase tracking-widest text-xs opacity-40 mb-1">Grading History</h3>
                        <p class="text-sm text-gray-500 font-medium italic">Track student progress</p>
                    </div>
                    <div class="p-3 bg-green-50 rounded-lg">
                        <svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z" /></svg>
                    </div>
                </div>

                @if($user->gradings->count() > 0)
                    <div class="space-y-4">
                        @foreach($user->gradings as $index => $grading)
                            <div class="flex items-center gap-6 p-4 rounded-md bg-gray-50 border border-transparent hover:border-green-100 hover:bg-white hover:shadow-md transition-all group"
                                 x-show="expanded || {{ $index < 5 ? 'true' : 'false' }}"
                                 @if($index >= 5) x-cloak x-transition @endif>
                                <div class="w-12 h-12 rounded-md flex-shrink-0 shadow-inner border border-white" style="@if($grading->rank->css)background:{{ $grading->rank->css }}@else background-color: {{ $grading->rank->color ?? '#cccccc' }};@endif"></div>
                                <div class="flex-1">
                                    <div class="flex items-center justify-between">
                                        <div class="flex items-center gap-3">
                                            <p class="text-md font-black text-gray-900">{{ $grading->rank->name }}</p>
                                            @if($loop->first)
                                                <span class="inline-flex items-center px-2 py-0.5 rounded-lg text-[10px] font-black bg-green-100 text-green-700 uppercase tracking-widest border border-green-200">Current Grade</span>
                                            @endif
                                        </div>
                                        <span class="text-xs font-bold text-gray-400 capitalize">{{ $grading->graded_at->format('jS M Y') }}</span>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                    @if($user->gradings->count() > 5)
                        <div class="mt-6 text-center">
                            <button @click="expanded = !expanded" class="inline-flex items-center gap-2 px-4 py-2 bg-gray-50 text-gray-500 text-[10px] font-black uppercase tracking-widest rounded-xl border border-gray-100 hover:bg-white hover:shadow-sm hover:text-green-600 transition-all">
                                <span x-text="expanded ? 'Show Less' : 'Show Full History'"></span>
                                <svg class="w-3 h-3 transition-transform duration-300" :class="expanded ? 'rotate-180' : ''" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /></svg>
                            </button>
                        </div>
                    @endif
                @else
                    <div class="text-center py-12 bg-gray-50/50 rounded-lg border border-dashed border-gray-200">
                        <p class="text-sm font-medium text-gray-400">No grading history recorded.</p>
                    </div>
                @endif
            </div>

            <!-- 3. Notes Log (Expandable) -->
            <div class="bg-white rounded-lg shadow-sm border border-gray-100 p-8" x-data="{ expanded: false }">
                <div class="flex items-center justify-between mb-8">
                    <div>
                        <h3 class="text-xl font-black text-gray-900 font-display tracking-tight uppercase tracking-widest text-xs opacity-40 mb-1">Observation Log</h3>
                        <p class="text-sm text-gray-500 font-medium italic">Notes and feedback</p>
                    </div>
                    <div class="p-3 bg-amber-50 rounded-lg">
                        <svg class="w-6 h-6 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" /></svg>
                    </div>
                </div>

                @if($user->memberNotes->count() > 0)
                    <div class="space-y-6">
                        @foreach($user->memberNotes as $index => $note)
                            <div class="relative pl-8 border-l-2 border-gray-100 pb-2 last:pb-0 font-medium text-gray-700"
                                 x-show="expanded || {{ $index < 3 ? 'true' : 'false' }}"
                                 @if($index >= 3) x-cloak x-transition @endif>
                                <div class="absolute -left-[9px] top-0 w-4 h-4 rounded-full bg-white border-4 border-amber-400 shadow-sm"></div>
                                <div class="bg-gray-50 p-6 rounded-lg rounded-tl-none border border-gray-100">
                                    <div class="flex items-center gap-2 mb-3">
                                        @if($note->author->photo_url_thumbnail)
                                            <img class="h-6 w-6 rounded-lg object-cover ring-2 ring-white shadow-sm" src="{{ $note->author->photo_url_thumbnail }}" alt="{{ $note->author->name }}">
                                        @else
                                            <div class="h-6 w-6 rounded-lg bg-indigo-50 border border-indigo-100 flex items-center justify-center text-[10px] font-black text-indigo-400 uppercase">{{ substr($note->author->name, 0, 1) }}</div>
                                        @endif
                                        <span class="text-xs font-black text-gray-900 uppercase tracking-widest">{{ $note->author->name }}</span>
                                        <div class="h-3 w-px bg-gray-200"></div>
                                        <span class="text-[10px] font-bold text-gray-400 uppercase tracking-wider">{{ $note->created_at->format('jS M Y') }}</span>
                                    </div>
                                    <p class="text-sm text-gray-700 leading-relaxed font-medium">{{ $note->content }}</p>
                                </div>
                            </div>
                        @endforeach
                    </div>
                    @if($user->memberNotes->count() > 3)
                        <div class="mt-6 text-center">
                            <button @click="expanded = !expanded" class="inline-flex items-center gap-2 px-4 py-2 bg-gray-50 text-gray-500 text-[10px] font-black uppercase tracking-widest rounded-xl border border-gray-100 hover:bg-white hover:shadow-sm hover:text-amber-600 transition-all">
                                <span x-text="expanded ? 'Show Less' : 'View Full Observation Log ({{ $user->memberNotes->count() }})'"></span>
                                <svg class="w-3 h-3 transition-transform duration-300" :class="expanded ? 'rotate-180' : ''" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /></svg>
                            </button>
                        </div>
                    @endif
                @else
                    <p class="text-sm text-gray-400 font-medium italic text-center py-6">No observation log entries found.</p>
                @endif
            </div>
        </div>

        <!-- Sidebar Column (Profile Details) -->
        <div class="space-y-8">
            <!-- Membership Renewal -->
            @if($user->renewal_date)
            <div class="bg-indigo-50 border border-indigo-100 rounded-lg p-6 shadow-sm">
                <div class="flex items-center gap-4">
                    <div class="w-10 h-10 rounded-xl bg-white flex items-center justify-center text-indigo-600 shadow-sm border border-indigo-100">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" /></svg>
                    </div>
                    <div>
                        <p class="text-[10px] font-black text-indigo-400 uppercase tracking-widest mb-0.5">Renewal Date</p>
                        <p class="text-lg font-black text-indigo-900 leading-none">{{ $user->renewal_date->format('jS F') }}</p>
                    </div>
                </div>
            </div>
            @else
            <div class="bg-rose-50 border border-rose-100 rounded-lg p-6 shadow-sm">
                <div class="flex items-center gap-4">
                    <div class="w-10 h-10 rounded-xl bg-white flex items-center justify-center text-rose-500 shadow-sm border border-rose-100">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /></svg>
                    </div>
                    <div class="flex-1">
                        <p class="text-[10px] font-black text-rose-400 uppercase tracking-widest mb-1">Renewal Date Not Set</p>
                        <a href="{{ route('members.edit', $user) }}" class="text-xs font-black text-rose-600 hover:text-rose-800 transition-colors flex items-center gap-1">
                            Set renewal date now 
                            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" /></svg>
                        </a>
                    </div>
                </div>
            </div>
            @endif

            <!-- 1. Groups & Affiliation -->
            <div class="bg-white rounded-lg border border-gray-100 p-8">
                <h3 class="text-xs font-black text-gray-400 uppercase tracking-widest mb-6">Club Groups</h3>
                @if($user->memberGroups->count() > 0)
                    <div class="flex flex-wrap gap-2">
                        @foreach($user->memberGroups as $group)
                            <span class="px-3 py-1 bg-white border border-gray-200 rounded-lg text-[10px] font-black text-gray-600 uppercase tracking-widest transition-all hover:border-indigo-200 hover:text-indigo-600">
                                {{ $group->name }}
                            </span>
                        @endforeach
                    </div>
                @else
                    <p class="text-sm font-medium opacity-50 italic">Not assigned to any groups.</p>
                @endif
            </div>

            <!-- 2. Profile Details -->
            <div class="bg-white rounded-lg shadow-sm border border-gray-100 p-8">
                <h3 class="text-xs font-black text-gray-400 uppercase tracking-widest mb-6">Personal Information</h3>
                
                <div class="space-y-6">
                    <div class="flex items-start gap-4">
                        <div class="w-10 h-10 rounded-xl bg-gray-50 flex items-center justify-center text-gray-400 shadow-sm border border-gray-100">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" /></svg>
                        </div>
                        <div>
                            <p class="text-[10px] font-black text-gray-400 uppercase tracking-widest mb-1">Age / Gender</p>
                            <p class="text-sm font-bold text-gray-900">{{ $user->age ?: 'Age unknown' }} <span class="text-gray-400 mx-1">/</span> {{ trim($user->gender) && trim($user->gender) !== 'NULL' ? ucfirst($user->gender) : 'Unspecified' }}</p>
                        </div>
                    </div>

                    <div class="flex items-start gap-4">
                        <div class="w-10 h-10 rounded-xl bg-gray-50 flex items-center justify-center text-gray-400 shadow-sm border border-gray-100">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
                        </div>
                        <div>
                            <p class="text-[10px] font-black text-gray-400 uppercase tracking-widest mb-1">Address</p>
                            <p class="text-sm font-bold text-gray-900 leading-relaxed">
                                @php
                                    $addr1 = trim($user->address_1 ?? '');
                                    $addr2 = trim($user->address_2 ?? '');
                                    $city = trim($user->town_city ?? '');
                                    $county = trim($user->county ?? '');
                                    $postcode = trim($user->postcode ?? '');
                                    
                                    if ($addr1 === 'NULL') $addr1 = '';
                                    if ($addr2 === 'NULL') $addr2 = '';
                                    if ($city === 'NULL') $city = '';
                                    if ($county === 'NULL') $county = '';
                                    if ($postcode === 'NULL') $postcode = '';
                                @endphp
                                @if($addr1)
                                    {{ $addr1 }}<br>
                                @endif
                                @if($addr2)
                                    {{ $addr2 }}<br>
                                @endif
                                @if($city || $county || $postcode)
                                    {{ $city }}@if($city && ($county || $postcode)), @endif
                                    {{ $county }} {{ $postcode }}
                                @endif
                                @if(!$addr1 && !$addr2 && !$city && !$county && !$postcode)
                                    <span class="text-gray-400 italic">No address provided</span>
                                @endif
                            </p>
                        </div>
                    </div>

                    <div class="flex items-start gap-4">
                        <div class="w-10 h-10 rounded-xl bg-gray-50 flex items-center justify-center text-gray-400 shadow-sm border border-gray-100">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /></svg>
                        </div>
                        <div>
                            <p class="text-[10px] font-black text-gray-400 uppercase tracking-widest mb-1">Member Since</p>
                            <p class="text-sm font-bold text-gray-900">{{ $stats['joined_date']->format('jS F, Y') }}</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 3. Medical & Emergency -->
            <div class="bg-rose-50 rounded-3xl border border-rose-100 p-8">
                <h3 class="text-xs font-black text-rose-500 uppercase tracking-widest mb-6">Medical & Safety</h3>
                
                <div class="space-y-6">
                    <div>
                        <p class="text-[10px] font-black text-rose-400 uppercase tracking-widest mb-1">Emergency Contact</p>
                        @php
                            $emergencyName = trim($user->emergency_contact_name ?? '');
                            $emergencyPhone = trim($user->emergency_contact_telephone ?? '');
                            if ($emergencyName === 'NULL') $emergencyName = '';
                            if ($emergencyPhone === 'NULL') $emergencyPhone = '';
                        @endphp
                        <p class="text-sm font-bold text-rose-900">{{ $emergencyName ?: 'Not assigned' }}</p>
                        @if($emergencyPhone)
                            <p class="text-xs font-bold text-rose-600 mt-1">{{ $emergencyPhone }}</p>
                        @endif
                    </div>

                    @php
                        $parentName = trim($user->parent_guardian_name ?? '');
                        if ($parentName === 'NULL') $parentName = '';
                    @endphp
                    @if($parentName)
                    <div>
                        <p class="text-[10px] font-black text-rose-400 uppercase tracking-widest mb-1">Parent / Guardian</p>
                        <p class="text-sm font-bold text-rose-900">{{ $parentName }}</p>
                    </div>
                    @endif

                    <div class="p-4 bg-white border border-rose-200 rounded-2xl">
                        <p class="text-[10px] font-black text-rose-400 uppercase tracking-widest mb-2">Medical Information</p>
                        @php
                            $medicalNotes = trim($user->medical_notes ?? '');
                            if ($medicalNotes === 'NULL') $medicalNotes = '';
                        @endphp
                        <p class="text-xs font-medium text-rose-900 italic leading-relaxed">{{ $medicalNotes ?: 'No medical information disclosed.' }}</p>
                    </div>
                </div>
            </div>
        </div>    </div>
    <div class="w-full"></div>
@endsection