@extends('layouts.admin')

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

@section('header')
    <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 w-full">
        <div class="flex flex-col">
            <h2 class="text-sm font-normal text-gray-600 uppercase tracking-wider mb-0 leading-none">Member Management</h2>
            <div class="mt-2">
                <h1 class="text-3xl font-black text-gray-900 font-display tracking-tight mb-2">{{ $user->name }}</h1>
                
                @if(auth()->user()->role === 'club_manager' || auth()->user()->role === 'admin')
                    <div x-data="{ 
                        active: {{ $user->is_active ? 'true' : 'false' }}, 
                        loading: false,
                        toggle() {
                            if (this.loading) return;
                            this.loading = true;
                            
                            // Optimistic update
                            this.active = !this.active;

                            fetch('{{ route('members.toggle-active', $user) }}', {
                                method: 'PATCH',
                                headers: {
                                    'X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]').content,
                                    'Accept': 'application/json',
                                    'Content-Type': 'application/json'
                                },
                            })
                            .then(response => {
                                if (!response.ok) throw new Error('Network response was not ok');
                                return response.json();
                            })
                            .then(data => {
                                this.loading = false;
                                if (data.success) {
                                    this.active = data.is_active;
                                } else {
                                    // Revert on failure
                                    this.active = !this.active;
                                    alert('Failed to update status');
                                }
                            })
                            .catch(error => {
                                console.error('Error:', error);
                                this.loading = false;
                                this.active = !this.active;
                                alert('Error updating status');
                            });
                        }
                    }" class="flex items-center">
                        <button 
                            @click="toggle()" 
                            type="button" 
                            class="relative inline-flex h-6 w-24 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2 {{ $user->is_active ? 'bg-green-500' : 'bg-red-500' }}"
                            :class="active ? 'bg-green-500' : 'bg-red-500'"
                            role="switch" 
                            :aria-checked="active"
                        >
                            <span class="sr-only">Toggle Active Status</span>
                            
                            <!-- Text Labels -->
                            <span 
                                class="pointer-events-none absolute inset-0 flex items-center justify-start pl-2 text-[9px] font-bold uppercase tracking-wider text-white transition-opacity duration-200 {{ $user->is_active ? 'opacity-100' : 'opacity-0' }}"
                                :class="active ? 'opacity-100' : 'opacity-0'"
                            >
                                Active
                            </span>
                            <span 
                                class="pointer-events-none absolute inset-0 flex items-center justify-end pr-2 text-[9px] font-bold uppercase tracking-wider text-white transition-opacity duration-200 {{ $user->is_active ? 'opacity-0' : 'opacity-100' }}"
                                :class="active ? 'opacity-0' : 'opacity-100'"
                            >
                                Inactive
                            </span>

                            <!-- Knob -->
                            <span 
                                aria-hidden="true" 
                                class="pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
                                style="{{ $user->is_active ? 'transform: translateX(4.5rem)' : 'transform: translateX(0)' }}"
                                :style="active ? 'transform: translateX(4.5rem)' : 'transform: translateX(0)'"
                            ></span>
                        </button>
                    </div>
                @endif
            </div>
        </div>

        <!-- Photo Section (Top Right) -->
        <div class="bg-white p-4 rounded-lg border border-gray-200 shadow-sm w-full md:w-auto">
            <form method="POST" action="{{ route('members.update-photo', $user) }}" enctype="multipart/form-data" id="photo-form">
                @csrf
                @method('PUT')
                <input type="hidden" name="active_tab" id="header-active-tab">                <div class="flex items-center gap-6">
                    <!-- Controls (Left) -->
                    <div class="flex flex-col gap-2">
                        <label class="block text-xs font-semibold text-gray-500 uppercase tracking-wider">Member Photo</label>
                        <div class="flex flex-col gap-3">
                            <input type="file" name="photo" id="photo" accept="image/*" onchange="document.getElementById('photo-form').submit()" class="text-xs text-gray-500 file:mr-3 file:py-1.5 file:px-3 file:rounded file:border-0 file:text-xs file:font-semibold file:bg-indigo-50 file:text-indigo-700 hover:file:bg-indigo-100 cursor-pointer">
                            @if($user->photo_path)
                                <label class="inline-flex items-center cursor-pointer group">
                                    <input type="checkbox" name="remove_photo" value="1" onchange="document.getElementById('photo-form').submit()" class="h-4 w-4 rounded border-gray-300 text-red-600 shadow-sm focus:ring-red-500">
                                    <span class="ml-2 text-xs text-red-600 font-bold uppercase group-hover:text-red-700 transition-colors">Remove Photo</span>
                                </label>
                            @endif
                        </div>
                    </div>

                    <!-- Photo (Right) -->
                    <div class="relative">
                        @if($user->photo_url)
                            <img src="{{ $user->photo_url }}" alt="{{ $user->name }}" class="w-32 h-32 rounded-lg object-cover shadow-md ring-4 ring-gray-50">
                        @else
                            <div class="w-32 h-32 rounded-lg bg-gray-50 flex items-center justify-center border border-gray-200">
                                <svg class="w-10 h-10 text-gray-300" 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>
                @error('photo')
                    <p class="mt-2 text-[10px] text-red-600">{{ $message }}</p>
                @enderror
            </form>
        </div>
    </div>
@endsection

@section('content')
    <div class="bg-white shadow-sm sm:rounded-lg" x-data="{ 
        activeTab: '{{ session('active_tab', 'personal') }}',
        init() {
            const hash = window.location.hash.substring(1);
            const validTabs = ['personal', 'contact', 'notes', 'gradings', 'settings'];
            
            if (hash && validTabs.includes(hash)) {
                this.activeTab = hash;
            } else if (hash === 'emergency-contact') {
                this.activeTab = 'contact';
            }
            
            // Sync with header form input (which is outside this scope)
            this.$watch('activeTab', value => {
                const headerInput = document.getElementById('header-active-tab');
                if (headerInput) headerInput.value = value;
            });
            // Initial sync
            const headerInput = document.getElementById('header-active-tab');
            if (headerInput) headerInput.value = this.activeTab;
        }
    }" style="overflow: visible;">
        <div class="p-6 text-gray-900" style="overflow: visible;">

            <!-- Tabs Navigation -->
            <div class="border-b border-gray-200 mb-6">
                <nav class="-mb-px flex space-x-8" aria-label="Tabs">
                    <button 
                        @click="activeTab = 'personal'" 
                        :class="activeTab === 'personal' ? 'border-indigo-500 text-indigo-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
                        class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm transition-colors duration-200"
                    >
                        Personal
                    </button>
                    <button 
                        @click="activeTab = 'contact'" 
                        :class="activeTab === 'contact' ? 'border-indigo-500 text-indigo-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
                        class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm transition-colors duration-200"
                    >
                        Contact Details
                    </button>
                    <button 
                        @click="activeTab = 'notes'" 
                        :class="activeTab === 'notes' ? 'border-indigo-500 text-indigo-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
                        class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm transition-colors duration-200"
                    >
                        Notes
                    </button>
                    <button 
                        @click="activeTab = 'gradings'" 
                        :class="activeTab === 'gradings' ? 'border-indigo-500 text-indigo-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
                        class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm transition-colors duration-200"
                    >
                        Gradings
                    </button>
                    <button 
                        @click="activeTab = 'settings'" 
                        :class="activeTab === 'settings' ? 'border-indigo-500 text-indigo-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
                        class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm transition-colors duration-200"
                    >
                        Settings
                    </button>
                </nav>
            </div>

            <form method="POST" action="{{ route('members.update', $user) }}">
                @csrf
                @method('PUT')
                <input type="hidden" name="active_tab" x-model="activeTab">
                <!-- Personal Tab Content -->
                <div x-show="activeTab === 'personal'" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 translate-y-1" x-transition:enter-end="opacity-100 translate-y-0">
                    <div class="space-y-6">
                        @if(auth()->user()->role === 'admin')
                            <!-- Club Selection (Admin Only) -->
                            <div class="mb-4">
                                <label for="club_id" class="block text-sm font-medium text-gray-700">Club</label>
                                <select id="club_id" name="club_id" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" required>
                                    <option value="">Select a club</option>
                                    @foreach($clubs as $club)
                                        <option value="{{ $club->id }}" {{ (old('club_id', $user->club_id) == $club->id) ? 'selected' : '' }}>{{ $club->name }}</option>
                                    @endforeach
                                </select>
                                @error('club_id')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>
                        @else
                            <input type="hidden" name="club_id" value="{{ auth()->user()->club_id }}">
                        @endif

                        <!-- Row 1: Name, DOB, Gender -->
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                            <!-- Name -->
                            <div>
                                <label for="name" class="block text-sm font-medium text-gray-700">Name</label>
                                <input type="text" name="name" id="name" value="{{ old('name', $user->name) }}" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" required>
                                @error('name') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                            </div>

                            <!-- Date of Birth -->
                            <div>
                                <label for="date_of_birth" class="block text-sm font-medium text-gray-700">Date of Birth</label>
                                <input type="date" name="date_of_birth" id="date_of_birth" value="{{ old('date_of_birth', $user->date_of_birth?->format('Y-m-d')) }}" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" max="{{ date('Y-m-d') }}">
                                @error('date_of_birth') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                            </div>

                            <!-- Gender -->
                            <div>
                                <label for="gender" class="block text-sm font-medium text-gray-700">Gender</label>
                                <select id="gender" name="gender" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
                                    <option value="">Select gender</option>
                                    <option value="Male" {{ old('gender', $user->gender) == 'Male' ? 'selected' : '' }}>Male</option>
                                    <option value="Female" {{ old('gender', $user->gender) == 'Female' ? 'selected' : '' }}>Female</option>
                                    <option value="Not specified" {{ old('gender', $user->gender) == 'Not specified' ? 'selected' : '' }}>Not specified</option>
                                </select>
                                @error('gender') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                            </div>
                        </div>

                        <!-- Row 2: Member Reference, Joined Date, Renewal Date -->
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                            <!-- Reference Number -->
                            <div>
                                <label for="reference_number" class="block text-sm font-medium text-gray-700">{{ auth()->user()->club?->member_reference_description ?? 'Member Reference Number' }}</label>
                                <input type="text" name="reference_number" id="reference_number" value="{{ old('reference_number', $user->reference_number) }}" 
                                    placeholder="{{ auth()->user()->club?->member_reference_description ? 'e.g. ' . auth()->user()->club->member_reference_description : '' }}"
                                    class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
                                @error('reference_number') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                            </div>

                            <!-- Custom Reference Number 2 (Conditional) -->
                            @if(auth()->user()->club?->member_reference_description_2)
                                <div>
                                    <label for="reference_number_2" class="block text-sm font-medium text-gray-700">
                                        {{ auth()->user()->club->member_reference_description_2 }}
                                    </label>
                                    <input type="text" name="reference_number_2" id="reference_number_2" 
                                           value="{{ old('reference_number_2', $user->reference_number_2) }}" 
                                           placeholder="e.g. {{ auth()->user()->club->member_reference_description_2 }}"
                                           class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
                                    @error('reference_number_2') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                                </div>
                            @endif

                            <!-- Joined Date -->
                            <div>
                                <label for="joined_at" class="block text-sm font-medium text-gray-700">Joined Date</label>
                                <input type="date" name="joined_at" id="joined_at" value="{{ old('joined_at', $user->joined_at?->format('Y-m-d')) }}" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" max="{{ date('Y-m-d') }}">
                                @error('joined_at') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                            </div>

                            <!-- Renewal Date -->
                            <div>
                                <label for="renewal_date" class="block text-sm font-medium text-gray-700">Renewal Date</label>
                                <input type="date" name="renewal_date" id="renewal_date" value="{{ old('renewal_date', $user->renewal_date?->format('Y-m-d')) }}" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
                                @error('renewal_date') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                            </div>
                        </div>

                        <!-- Row 3: Member Groups and Rank -->
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-10 pt-6 pb-6">
                            <!-- Left: Member Groups -->
                            @if($memberGroups->count() > 0)
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-3">Member Groups</label>
                                    <div class="space-y-2">
                                        @foreach($memberGroups as $group)
                                            <div class="relative flex items-start p-2 rounded-md hover:bg-gray-50 border border-transparent hover:border-gray-200 transition-colors duration-150">
                                                <div class="flex h-5 items-center">
                                                    <input 
                                                        id="group_{{ $group->id }}" 
                                                        name="member_groups[]" 
                                                        type="checkbox" 
                                                        value="{{ $group->id }}"
                                                        class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
                                                        {{ (is_array(old('member_groups')) && in_array($group->id, old('member_groups'))) || $user->memberGroups->contains($group->id) ? 'checked' : '' }}
                                                    >
                                                </div>
                                                <div class="ml-3 text-sm leading-6">
                                                    <label for="group_{{ $group->id }}" class="font-medium text-gray-900 cursor-pointer">{{ $group->name }}</label>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                    @error('member_groups')
                                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                    @enderror
                                </div>
                            @endif

                            <!-- Right: Rank -->
                            @if($ranks->count() > 0)
                                <div style="overflow: visible;">
                                    <div class="flex items-center justify-between mb-1">
                                        <label for="rank_id" class="block text-sm font-medium text-gray-700">Current Rank</label>
                                        <button type="button" @click="activeTab = 'gradings'" class="text-[10px] font-black text-indigo-600 uppercase tracking-widest hover:text-indigo-800 transition-colors">
                                            Manage gradings →
                                        </button>
                                    </div>
                                    
                                    <select id="rank_id" name="rank_id" class="hidden" disabled>
                                        <option value="">No rank assigned</option>
                                        @foreach($eligibleRanks as $rank)
                                            <option value="{{ $rank->id }}" {{ old('rank_id', $user->rank_id) == $rank->id ? 'selected' : '' }}>{{ $rank->name }}</option>
                                        @endforeach
                                    </select>

                                    <div class="relative" style="overflow: visible;">
                                        <button type="button" disabled class="relative w-full cursor-not-allowed rounded-md border border-gray-200 bg-gray-50 py-2 pl-3 pr-10 text-left shadow-sm sm:text-sm text-gray-500">
                                            <span id="rank-selected-display" class="flex items-center gap-2">
                                                @if($user->rank)
                                                    <div class="w-6 h-6 rounded border border-gray-300 flex-shrink-0" style="@if($user->rank->css)background:{{ $user->rank->css }}@else background-color: {{ $user->rank->color ?? '#cccccc' }};@endif"></div>
                                                    <span class="block truncate">{{ $user->rank->name }}</span>
                                                @else
                                                    <span class="text-gray-400">No rank assigned</span>
                                                @endif
                                            </span>
                                            <span class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
                                                <svg class="h-5 w-5 text-gray-300" viewBox="0 0 20 20" fill="currentColor">
                                                    <path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd" />
                                                </svg>
                                            </span>
                                        </button>
                                    </div>

                                    @error('rank_id')
                                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                    @enderror

                                    <!-- No Photo Permission Checkbox -->
                                    <div class="mt-8 p-3 bg-yellow-50 border border-yellow-200 rounded-md">
                                        <div class="relative flex items-start">
                                            <div class="flex h-5 items-center">
                                                <input 
                                                    id="no_photo_permission" 
                                                    name="no_photo_permission" 
                                                    type="checkbox" 
                                                    value="1"
                                                    class="h-4 w-4 rounded border-gray-300 text-yellow-600 focus:ring-yellow-500"
                                                    {{ old('no_photo_permission', $user->no_photo_permission) ? 'checked' : '' }}
                                                >
                                            </div>
                                            <div class="ml-3 text-sm leading-6">
                                                <label for="no_photo_permission" class="font-bold text-yellow-900 cursor-pointer">No photo permission</label>
                                                <p class="text-yellow-700 text-xs">Member has not granted permission for their photo to be used in club publicity.</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endif
                        </div>
                </div>
            </div>

                <!-- Contact Details Tab Content -->
                <div x-show="activeTab === 'contact'" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 translate-y-1" x-transition:enter-end="opacity-100 translate-y-0" style="display: none;">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                        <!-- Left Column: Contact and Address -->
                        <div>
                            <h4 class="text-sm font-semibold text-gray-900 uppercase tracking-wider mb-4 border-b pb-1">Contact and Address</h4>
                            
                            <div class="space-y-4">
                                <!-- Email (Moved here) -->
                                <div class="mb-4">
                                    <label for="email" class="block text-sm font-medium text-gray-700">Email Address</label>
                                    <input type="email" name="email" id="email" value="{{ old('email', $user->email) }}" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" required>
                                    @error('email') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                                </div>

                                <div>
                                    <label for="address_1" class="block text-sm font-medium text-gray-700">Address Line 1</label>
                                    <input type="text" name="address_1" id="address_1" value="{{ old('address_1', $user->address_1) }}" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
                                    @error('address_1') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                                </div>

                                <div>
                                    <label for="address_2" class="block text-sm font-medium text-gray-700">Address Line 2</label>
                                    <input type="text" name="address_2" id="address_2" value="{{ old('address_2', $user->address_2) }}" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
                                    @error('address_2') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                                </div>

                                <div class="grid grid-cols-2 gap-4">
                                    <div>
                                        <label for="town_city" class="block text-sm font-medium text-gray-700">Town/City</label>
                                        <input type="text" name="town_city" id="town_city" value="{{ old('town_city', $user->town_city) }}" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
                                        @error('town_city') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                                    </div>
                                    <div>
                                        <label for="county" class="block text-sm font-medium text-gray-700">County</label>
                                        <input type="text" name="county" id="county" value="{{ old('county', $user->county) }}" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
                                        @error('county') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                                    </div>
                                </div>

                                <div class="grid grid-cols-2 gap-4">
                                    <div>
                                        <label for="postcode" class="block text-sm font-medium text-gray-700">Postcode</label>
                                        <input type="text" name="postcode" id="postcode" value="{{ old('postcode', $user->postcode) }}" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
                                        @error('postcode') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                                    </div>
                                    <div>
                                        <label for="telephone" class="block text-sm font-medium text-gray-700">Telephone</label>
                                        <input type="text" name="telephone" id="telephone" value="{{ old('telephone', $user->telephone) }}" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
                                        @error('telephone') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Right Column: Emergency & Medical -->
                        <div>
                            <h4 class="text-sm font-semibold text-gray-900 uppercase tracking-wider mb-4 border-b pb-1">Emergency & Medical</h4>
                            
                            <div class="space-y-4">
                                <div>
                                    <label for="parent_guardian_name" class="block text-sm font-medium text-gray-700">Parent/Guardian Name</label>
                                    <input type="text" name="parent_guardian_name" id="parent_guardian_name" value="{{ old('parent_guardian_name', $user->parent_guardian_name) }}" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
                                    @error('parent_guardian_name') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                                </div>

                                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                                    <div>
                                        <label for="emergency_contact_name" class="block text-sm font-medium text-gray-700">Emergency Contact</label>
                                        <input type="text" name="emergency_contact_name" id="emergency_contact_name" value="{{ old('emergency_contact_name', $user->emergency_contact_name) }}" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
                                        @error('emergency_contact_name') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                                    </div>
                                    <div>
                                        <label for="emergency_contact_telephone" class="block text-sm font-medium text-gray-700">Emergency Phone</label>
                                        <input type="text" name="emergency_contact_telephone" id="emergency_contact_telephone" value="{{ old('emergency_contact_telephone', $user->emergency_contact_telephone) }}" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
                                        @error('emergency_contact_telephone') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                                    </div>
                                </div>

                                <div>
                                    <label for="medical_notes" class="block text-sm font-medium text-gray-700">Medical Notes (Optional)</label>
                                    <textarea name="medical_notes" id="medical_notes" rows="4" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">{{ old('medical_notes', $user->medical_notes) }}</textarea>
                                    @error('medical_notes') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Settings Tab Content -->
                <div x-show="activeTab === 'settings'" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 translate-y-1" x-transition:enter-end="opacity-100 translate-y-0" style="display: none;">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <!-- Role -->
                        <div class="mb-4">
                            <label for="role" class="block text-sm font-medium text-gray-700">Member Role</label>
                            <select id="role" name="role" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" required>
                                <option value="">Select a role</option>
                                <option value="member" {{ old('role', $user->role) == 'member' ? 'selected' : '' }}>Student/Member</option>
                                <option value="club_manager" {{ old('role', $user->role) == 'club_manager' ? 'selected' : '' }}>Club Manager</option>
                            </select>
                            @error('role')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                            <p class="mt-1 text-xs text-gray-500">Determines the basic permissions for this user.</p>
                        </div>


                        <!-- Club Admin Checkbox -->
                        @if(auth()->user()->role === 'admin' || (auth()->user()->role === 'club_manager' && auth()->user()->is_club_admin))
                            <div class="mb-4 p-3 bg-purple-50 border border-purple-200 rounded-md">
                                <div class="relative flex items-start">
                                    <div class="flex h-5 items-center">
                                        <input 
                                            id="is_club_admin" 
                                            name="is_club_admin" 
                                            type="checkbox" 
                                            value="1"
                                            class="h-4 w-4 rounded border-gray-300 text-purple-600 focus:ring-purple-500"
                                            {{ old('is_club_admin', $user->is_club_admin) ? 'checked' : '' }}
                                        >
                                    </div>
                                    <div class="ml-3 text-sm leading-6">
                                        <label for="is_club_admin" class="font-bold text-purple-900 cursor-pointer">Club Admin</label>
                                        <p class="text-purple-700 text-xs">Grant this user full financial and administrative access to the club.</p>
                                    </div>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>

                <!-- Form Actions (Only for member details tabs) -->
                <div x-show="activeTab !== 'notes' && activeTab !== 'gradings'" class="mt-8 pt-6 border-t border-gray-200 flex items-center justify-end gap-3">
                    <a href="{{ route('members.index') }}" class="inline-flex items-center px-4 py-2 bg-white border border-gray-300 rounded-md font-semibold text-xs text-gray-700 uppercase tracking-widest shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 disabled:opacity-25 transition ease-in-out duration-150">
                        Cancel
                    </a>
                    <button type="submit" name="action" value="update" class="inline-flex items-center px-4 py-2 bg-white border border-indigo-600 rounded-md font-semibold text-xs text-indigo-600 uppercase tracking-widest shadow-sm hover:bg-indigo-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition ease-in-out duration-150">
                        Update
                    </button>
                    <button type="submit" name="action" value="update_close" class="inline-flex items-center px-4 py-2 bg-indigo-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-indigo-700 focus:bg-indigo-700 active:bg-indigo-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition ease-in-out duration-150">
                        Update & Close
                    </button>
                </div>
            </form>

            <!-- Gradings Tab Content (Outside the main form) -->
            <div x-show="activeTab === 'gradings'" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 translate-y-1" x-transition:enter-end="opacity-100 translate-y-0" style="display: none;">
                <!-- Grading Log -->
                <div class="mb-8 space-y-4">
                    <h4 class="text-sm font-bold text-gray-900 mb-4 flex items-center gap-2">
                        <svg class="w-4 h-4 text-gray-400" 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>
                        Grading History
                    </h4>

                    @if($gradings->count() > 0)
                        <div class="bg-white overflow-visible border border-gray-200 rounded-lg shadow-sm">
                            <table class="min-w-full divide-y divide-gray-200">
                                <thead class="bg-gray-50">
                                    <tr>
                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Rank</th>
                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                                        <th scope="col" class="relative px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                                    </tr>
                                </thead>
                                <tbody class="bg-white divide-y divide-gray-200">
                                    @foreach($gradings as $grading)
                                        <tr x-data="{ editing: false }">
                                            <td class="px-6 py-4 whitespace-nowrap">
                                                <div x-show="!editing" class="flex items-center">
                                                    @if($grading->rank->color || $grading->rank->css)
                                                        <span class="inline-block w-8 h-8 rounded border border-gray-300 mr-2" style="@if($grading->rank->css)background:{{ $grading->rank->css }}@else background-color: {{ $grading->rank->color }};@endif"></span>
                                                    @endif
                                                    <span class="text-sm font-medium text-gray-900">{{ $grading->rank->name }}</span>
                                                </div>
                                                <div x-show="editing" class="mt-1" id="edit-grading-{{ $grading->id }}-container">
                                                    <form id="edit-grading-{{ $grading->id }}" action="{{ route('gradings.update', $grading) }}" method="POST">
                                                        @csrf
                                                        @method('PATCH')
                                                        <select name="rank_id" id="edit_grading_rank_id_{{ $grading->id }}" class="hidden">
                                                            @foreach($ranks as $rank)
                                                                <option value="{{ $rank->id }}" {{ $grading->rank_id == $rank->id ? 'selected' : '' }}>{{ $rank->name }}</option>
                                                            @endforeach
                                                        </select>

                                                        <!-- Custom visual dropdown for table row -->
                                                        <div class="relative" style="overflow: visible;">
                                                            <button type="button" id="edit-grading-dropdown-button-{{ $grading->id }}" class="relative w-full cursor-pointer rounded-md border border-gray-300 bg-white py-1 pl-2 pr-8 text-left shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-xs h-[32px] flex items-center">
                                                                <span id="edit-grading-selected-display-{{ $grading->id }}" class="flex items-center gap-1">
                                                                    <span class="text-gray-400">Select Rank</span>
                                                                </span>
                                                                <span class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-1">
                                                                    <svg class="h-4 w-4 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
                                                                        <path fill-rule="evenodd" d="M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd" />
                                                                    </svg>
                                                                </span>
                                                            </button>

                                                            <div id="edit-grading-dropdown-menu-{{ $grading->id }}" class="hidden absolute z-50 mt-1 w-48 rounded-md bg-white shadow-lg" style="max-height: 12rem;">
                                                                <ul class="max-h-40 rounded-md py-1 text-xs ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-xs">
                                                                    @foreach($ranks as $rank)
                                                                        <li class="rank-option rank-option-edit-{{ $grading->id }} cursor-pointer select-none relative py-1.5 pl-2 pr-7 hover:bg-gray-100" data-value="{{ $rank->id }}" data-color="{{ $rank->color }}" data-css="{{ $rank->css }}" data-name="{{ $rank->name }}">
                                                                            <div class="flex items-center gap-2">
                                                                                <div class="w-4 h-4 rounded border-2 border-gray-300 flex-shrink-0" style="@if($rank->css)background:{{ $rank->css }}@else background-color: {{ $rank->color ?? '#cccccc' }};@endif"></div>
                                                                                <span class="block truncate">{{ $rank->name }}</span>
                                                                            </div>
                                                                        </li>
                                                                    @endforeach
                                                                </ul>
                                                            </div>
                                                        </div>
                                                    </form>
                                                </div>
                                            </td>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                                <span x-show="!editing">{{ $grading->graded_at->format('M d, Y') }}</span>
                                                <div x-show="editing">
                                                    <input type="date" name="graded_at" form="edit-grading-{{ $grading->id }}" value="{{ $grading->graded_at->format('Y-m-d') }}" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm text-xs p-1 h-[32px]">
                                                </div>
                                            </td>
                                            <td class="px-6 py-4 whitespace-nowrap">
                                                @if($loop->first)
                                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                                                        Current
                                                    </span>
                                                @endif
                                            </td>
                                            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                                <div class="flex justify-end items-center gap-3">
                                                    <button x-show="!editing" @click="editing = true" class="text-indigo-600 hover:text-indigo-900">Edit</button>
                                                    
                                                    <div x-show="editing" class="flex gap-2">
                                                        <button type="submit" form="edit-grading-{{ $grading->id }}" class="text-green-600 hover:text-green-900">Update</button>
                                                        <button @click="editing = false" class="text-gray-500 hover:text-gray-700">Cancel</button>
                                                    </div>

                                                    <form x-show="!editing" action="{{ route('gradings.destroy', $grading) }}" method="POST" onsubmit="return confirm('Are you sure you want to delete this grading?')">
                                                        @csrf
                                                        @method('DELETE')
                                                        <button type="submit" class="text-red-600 hover:text-red-900">Delete</button>
                                                    </form>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @else
                        <div class="bg-white p-8 border-2 border-dashed border-gray-200 rounded-lg text-center">
                            <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                            </svg>
                            <h3 class="mt-2 text-sm font-medium text-gray-900">No gradings found</h3>
                            <p class="mt-1 text-sm text-gray-500">Gradings will appear here once added.</p>
                        </div>
                    @endif
                </div>

                <!-- Add New Grading Form -->
                <div class="bg-gray-50 p-6 rounded-lg border border-gray-200">
                    <h4 class="text-sm font-bold text-gray-900 mb-4 flex items-center gap-2">
                        <svg class="w-4 h-4 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                        Add New Grading
                    </h4>
                    <form action="{{ route('gradings.store', $user) }}" method="POST">
                        @csrf
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 items-end">
                            <div id="grading-rank-dropdown-container" class="relative" style="overflow: visible;">
                                <label for="grading_rank_id" class="block text-sm font-medium text-gray-700">Rank</label>
                                
                                    <select name="rank_id" id="grading_rank_id" class="hidden" required>
                                        <option value="">Select Rank</option>
                                        @foreach($eligibleRanks->where('id', '!=', $user->rank_id)->sortByDesc('order') as $rank)
                                            <option value="{{ $rank->id }}" {{ $nextRankId == $rank->id ? 'selected' : '' }}>{{ $rank->name }}</option>
                                        @endforeach
                                    </select>

                                    <div class="relative mt-1" style="overflow: visible;">
                                        <button type="button" id="grading-rank-dropdown-button" class="relative w-full cursor-pointer rounded-md border border-gray-300 bg-white py-2 pl-3 pr-10 text-left shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm h-[38px] flex items-center">
                                            <span id="grading-rank-selected-display" class="flex items-center gap-2">
                                                <span class="text-gray-400">Select Rank</span>
                                            </span>
                                            <span class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
                                                <svg class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
                                                    <path fill-rule="evenodd" d="M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd" />
                                                </svg>
                                            </span>
                                        </button>

                                        <div id="grading-rank-dropdown-menu" class="hidden absolute z-50 mt-1 w-full rounded-md bg-white shadow-lg" style="max-height: 15rem;">
                                            <ul class="max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm">
                                                @foreach($eligibleRanks->where('id', '!=', $user->rank_id)->sortByDesc('order') as $rank)
                                                    <li class="rank-option rank-option-grading cursor-pointer select-none relative py-2 pl-3 pr-9 hover:bg-gray-100" data-value="{{ $rank->id }}" data-color="{{ $rank->color }}" data-css="{{ $rank->css }}" data-name="{{ $rank->name }}">
                                                        <div class="flex items-center gap-2">
                                                            <div class="w-6 h-6 rounded border-2 border-gray-300 flex-shrink-0" style="@if($rank->css)background:{{ $rank->css }}@else background-color: {{ $rank->color ?? '#cccccc' }};@endif"></div>
                                                            <span class="block truncate">{{ $rank->name }}</span>
                                                        </div>
                                                    </li>
                                                @endforeach
                                            </ul>
                                        </div>
                                    </div>
                                @error('rank_id') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                            </div>
                            <div>
                                <label for="graded_at" class="block text-sm font-medium text-gray-700">Grading Date</label>
                                <input type="date" name="graded_at" id="graded_at" value="{{ date('Y-m-d') }}" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm h-[38px]" required>
                                @error('graded_at') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                            </div>
                        </div>
                        <div class="mt-4 flex justify-end">
                            <button type="submit" class="inline-flex items-center px-4 py-2 bg-indigo-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-indigo-700 focus:bg-indigo-700 active:bg-indigo-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition ease-in-out duration-150">
                                Add Grading
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Notes Tab Content (Outside the main form) -->
            <div x-show="activeTab === 'notes'" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 translate-y-1" x-transition:enter-end="opacity-100 translate-y-0" style="display: none;">
                <!-- Add New Note Form -->
                <div class="mb-8 bg-gray-50 p-6 rounded-lg border border-gray-200">
                    <h4 class="text-sm font-bold text-gray-900 mb-4 flex items-center gap-2">
                        <svg class="w-4 h-4 text-indigo-500" 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>
                        Add New Note
                    </h4>
                    <form action="{{ route('member-notes.store', $user) }}" method="POST">
                        @csrf
                        <div>
                            <textarea name="content" id="note_content" rows="3" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" placeholder="Type your note here..." required></textarea>
                            @error('content') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                        </div>
                        <div class="mt-4 flex justify-end">
                            <button type="submit" class="inline-flex items-center px-4 py-2 bg-indigo-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-indigo-700 focus:bg-indigo-700 active:bg-indigo-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition ease-in-out duration-150">
                                Add Note
                            </button>
                        </div>
                    </form>
                </div>

                <!-- Note Log List -->
                <div class="space-y-4">
                    <h4 class="text-sm font-bold text-gray-900 mb-4 flex items-center gap-2">
                        <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                        </svg>
                        Note Log
                    </h4>
                    
                    @if($user->memberNotes->count() > 0)
                        <div class="flow-root">
                            <ul role="list" class="-mb-8">
                                @foreach($user->memberNotes as $note)
                                    <li>
                                        <div class="relative pb-8">
                                            @if(!$loop->last)
                                                <span class="absolute top-5 left-5 -ml-px h-full w-0.5 bg-gray-200" aria-hidden="true"></span>
                                            @endif
                                            <div class="relative flex items-start space-x-3">
                                                <div class="relative">
                                                    @if($note->author->photo_url)
                                                        <img class="h-10 w-10 rounded-full bg-gray-400 flex items-center justify-center ring-8 ring-white object-cover" src="{{ $note->author->photo_url }}" alt="">
                                                    @else
                                                        <div class="h-10 w-10 rounded-full bg-gray-100 flex items-center justify-center ring-8 ring-white">
                                                            <span class="text-xs font-medium text-gray-500 uppercase">{{ substr($note->author->name, 0, 1) }}</span>
                                                        </div>
                                                    @endif
                                                </div>
                                                <div class="min-w-0 flex-1 bg-white p-4 rounded-lg border border-gray-200 shadow-sm" x-data="{ editing: false }">
                                                    <div>
                                                        <div class="flex justify-between items-center mb-2">
                                                            <div class="text-sm flex items-center gap-2">
                                                                <span class="font-bold text-gray-900">{{ $note->author->name }}</span>
                                                                <span class="text-gray-500">{{ $note->created_at->format('M d, Y H:i') }}</span>
                                                                @if(session('new_note_id') == $note->id)
                                                                    <span class="inline-flex items-center rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-800 animate-pulse">
                                                                        NEWLY ADDED
                                                                    </span>
                                                                @endif
                                                            </div>
                                                            <div class="flex items-center gap-3">
                                                                @if(auth()->id() === $note->author_id || auth()->user()->role === 'admin')
                                                                    <button @click="editing = true" x-show="!editing" class="text-xs text-indigo-600 hover:text-indigo-900 font-medium leading-none">Edit</button>
                                                                    
                                                                    <form action="{{ route('member-notes.destroy', $note) }}" method="POST" class="flex items-center" onsubmit="return confirm('Are you sure you want to delete this note?')">
                                                                        @csrf
                                                                        @method('DELETE')
                                                                        <button type="submit" class="text-xs text-red-600 hover:text-red-900 font-medium leading-none">Delete</button>
                                                                    </form>
                                                                @endif
                                                            </div>
                                                        </div>
                                                        
                                                        <!-- View Mode -->
                                                        <div x-show="!editing" class="text-sm text-gray-700 whitespace-pre-wrap">{{ $note->content }}</div>
                                                        
                                                        <!-- Edit Mode -->
                                                        <div x-show="editing" style="display: none;">
                                                            <form action="{{ route('member-notes.update', $note) }}" method="POST">
                                                                @csrf
                                                                @method('PATCH')
                                                                <textarea name="content" rows="3" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" required>{{ $note->content }}</textarea>
                                                                <div class="mt-3 flex justify-end gap-2">
                                                                    <button type="button" @click="editing = false" class="inline-flex items-center px-3 py-1.5 bg-white border border-gray-300 rounded-md font-semibold text-xs text-gray-700 uppercase tracking-widest shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition ease-in-out duration-150">
                                                                        Cancel
                                                                    </button>
                                                                    <button type="submit" class="inline-flex items-center px-3 py-1.5 bg-indigo-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-indigo-700 focus:bg-indigo-700 active:bg-indigo-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition ease-in-out duration-150">
                                                                        Update Note
                                                                    </button>
                                                                </div>
                                                            </form>
                                                        </div>

                                                        @if($note->updated_at > $note->created_at)
                                                            <div class="mt-1 text-[10px] text-gray-400 italic">
                                                                Edited {{ $note->updated_at->format('M d, Y H:i') }}
                                                            </div>
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    @else
                        <div class="bg-gray-50 border-2 border-dashed border-gray-200 rounded-lg p-12 text-center">
                            <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                            </svg>
                            <h3 class="mt-2 text-sm font-medium text-gray-900">No notes yet</h3>
                            <p class="mt-1 text-sm text-gray-500">Get started by adding a note about this member.</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    @if(auth()->user()->role === 'club_manager' || auth()->user()->role === 'admin')
        <div id="account-management" class="mt-8 bg-white border border-red-100 shadow-sm sm:rounded-lg overflow-hidden" x-data="{ 
            showDeactivateConfirm: false, 
            showDeleteConfirm: false,
            deleteStep: 1
        }">
            <div class="p-6">
                <h3 class="text-lg font-bold text-gray-900 mb-1">Account Management</h3>
                <p class="text-sm text-gray-500 mb-6 font-medium">Destructive actions and status management for this member profile.</p>
                
                <div class="flex flex-col sm:flex-row gap-4">
                    <!-- Deactivate Button -->
                    @if($user->is_active)
                        <button 
                            @click="showDeactivateConfirm = true"
                            type="button" 
                            class="inline-flex items-center justify-center px-4 py-2 bg-amber-50 border border-amber-200 rounded-md font-semibold text-xs text-amber-700 uppercase tracking-widest hover:bg-amber-100 active:bg-amber-200 transition ease-in-out duration-150"
                        >
                            <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="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" />
                            </svg>
                            Mark as Inactive
                        </button>
                    @else
                        <form method="POST" action="{{ route('members.toggle-active', $user) }}">
                            @csrf
                            @method('PATCH')
                            <button 
                                type="submit" 
                                class="inline-flex items-center justify-center px-4 py-2 bg-green-50 border border-green-200 rounded-md font-semibold text-xs text-green-700 uppercase tracking-widest hover:bg-green-100 active:bg-green-200 transition ease-in-out duration-150"
                            >
                                <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="M5 13l4 4L19 7" />
                                </svg>
                                Reactivate Member
                            </button>
                        </form>
                    @endif

                    <!-- Delete Button -->
                    <button 
                        @click="showDeleteConfirm = true; deleteStep = 1"
                        type="button" 
                        class="inline-flex items-center justify-center px-4 py-2 bg-red-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-red-700 active:bg-red-900 transition ease-in-out duration-150 shadow-sm"
                    >
                        <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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                        </svg>
                        Delete Member
                    </button>
                </div>

                <!-- Deactivation Confirmation Modal -->
                <div x-show="showDeactivateConfirm" class="fixed inset-0 z-50 overflow-y-auto" style="display: none;">
                    <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
                        <div x-show="showDeactivateConfirm" 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 transition-opacity" aria-hidden="true" @click="showDeactivateConfirm = false">
                            <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
                        </div>
                        <span class="hidden sm:inline-block sm:align-middle sm:min-h-screen" aria-hidden="true">&#8203;</span>
                        <div x-show="showDeactivateConfirm" 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-middle bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm: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-amber-100 sm:mx-0 sm:h-10 sm:w-10">
                                        <svg class="h-6 w-6 text-amber-600" 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="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                                        <h3 class="text-lg leading-6 font-bold text-gray-900">Mark Member as Inactive?</h3>
                                        <div class="mt-2 text-sm text-gray-600 space-y-3">
                                            <p>Continuing will remove the member from all <strong>active</strong> membership indexes and filter views.</p>
                                            <p>The member will no longer be able to log in or access any system features.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse gap-3">
                                <form method="POST" action="{{ route('members.toggle-active', $user) }}">
                                    @csrf
                                    @method('PATCH')
                                    <button type="submit" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-amber-600 text-base font-medium text-white hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 sm:w-auto sm:text-sm uppercase tracking-widest font-bold">
                                        Confirm Inactivation
                                    </button>
                                </form>
                                <button @click="showDeactivateConfirm = false" 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:w-auto sm:text-sm uppercase tracking-widest font-bold">
                                    Cancel
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Delete Confirmation Modal (Multi-step) -->
                <div x-show="showDeleteConfirm" class="fixed inset-0 z-50 overflow-y-auto" style="display: none;">
                    <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
                        <div x-show="showDeleteConfirm" 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 transition-opacity" aria-hidden="true" @click="showDeleteConfirm = false">
                            <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
                        </div>
                        <span class="hidden sm:inline-block sm:align-middle sm:min-h-screen" aria-hidden="true">&#8203;</span>
                        <div x-show="showDeleteConfirm" 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-middle bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
                            
                            <!-- Step 1: Suggest Deactivation -->
                            <div x-show="deleteStep === 1" 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-red-100 sm:mx-0 sm:h-10 sm:w-10">
                                        <svg class="h-6 w-6 text-red-600" 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="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                                        <h3 class="text-lg leading-6 font-bold text-gray-900 uppercase tracking-tight">Delete Member?</h3>
                                        <div class="mt-2 text-sm text-gray-600 space-y-4">
                                            <p class="font-medium text-amber-700 p-3 bg-amber-50 rounded border border-amber-100 italic">
                                                Wait! Perhaps you'd prefer to just mark them as inactive?
                                            </p>
                                            <p>This retains their historical data and history in the system while preventing access.</p>
                                            <p class="font-semibold text-red-600">If you proceed with deletion, the following will be <strong>permanently removed</strong> and cannot be recovered:</p>
                                            <ul class="list-disc list-inside space-y-1 text-red-600 font-medium">
                                                <li>All attendance session records</li>
                                                <li>All grading history</li>
                                                <li>All member notes</li>
                                                <li>Group memberships</li>
                                                <li>Member profile and photo</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Step 2: Final Warning -->
                            <div x-show="deleteStep === 2" 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-red-900 sm:mx-0 sm:h-10 sm:w-10">
                                        <svg class="h-6 w-6 text-white" 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="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                                        <h3 class="text-xl leading-6 font-black text-red-600 uppercase tracking-tighter">Final Warning</h3>
                                        <div class="mt-2 text-sm text-gray-900 font-bold bg-red-50 p-4 border-l-4 border-red-600 rounded">
                                            <p>This action is irreversible.</p>
                                            <p class="mt-2 uppercase">Every piece of data, including photos and contact details, will be purged from the database forever.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse gap-3">
                                <!-- Step 1 UI -->
                                <template x-if="deleteStep === 1">
                                    <div class="flex flex-col sm:flex-row-reverse gap-3 w-full">
                                        <button @click="deleteStep = 2" type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-bold text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:w-auto sm:text-sm uppercase tracking-widest font-bold">
                                            I understand, proceed to delete
                                        </button>
                                        <button @click="showDeleteConfirm = false" 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:w-auto sm:text-sm uppercase tracking-widest font-bold">
                                            Keep member
                                        </button>
                                    </div>
                                </template>

                                <!-- Step 2 UI -->
                                <template x-if="deleteStep === 2">
                                    <div class="flex flex-col sm:flex-row-reverse gap-3 w-full">
                                        <form method="POST" action="{{ route('members.destroy', $user) }}">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-800 text-base font-black text-white hover:bg-red-950 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-900 sm:w-auto sm:text-sm uppercase tracking-widest font-bold">
                                                Confirm PERMANENT Deletion
                                            </button>
                                        </form>
                                        <button @click="deleteStep = 1" 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:w-auto sm:text-sm uppercase tracking-widest font-bold">
                                            Go Back
                                        </button>
                                    </div>
                                </template>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endif

    @if($ranks->count() > 0)
        <script>
            (function() {
                function initRankDropdown(containerId, hiddenSelectId, buttonId, menuId, displayId, optionsClass) {
                    const hiddenSelect = document.getElementById(hiddenSelectId);
                    const dropdownButton = document.getElementById(buttonId);
                    const dropdownMenu = document.getElementById(menuId);
                    const selectedDisplay = document.getElementById(displayId);
                    const options = document.querySelectorAll(optionsClass);

                    if (!hiddenSelect || !dropdownButton || !dropdownMenu || !selectedDisplay) return;

                    // Toggle dropdown
                    dropdownButton.addEventListener('click', function(e) {
                        e.preventDefault();
                        e.stopPropagation();
                        // Close other dropdowns first? Or just toggle this one.
                        dropdownMenu.classList.toggle('hidden');
                    });

                    // Close dropdown when clicking outside
                    document.addEventListener('click', function(e) {
                        if (!dropdownButton.contains(e.target) && !dropdownMenu.contains(e.target)) {
                            dropdownMenu.classList.add('hidden');
                        }
                    });

                    // Handle option selection
                    options.forEach(option => {
                        option.addEventListener('click', function() {
                            const value = this.dataset.value;
                            const name = this.dataset.name;
                            const color = this.dataset.color;
                            const css = this.dataset.css;

                            // Update hidden select
                            hiddenSelect.value = value;

                            // Update visual display
                            if (value) {
                                let swatchStyle = '';
                                if (css) {
                                    swatchStyle = `background: ${css};`;
                                } else if (color) {
                                    swatchStyle = `background-color: ${color};`;
                                } else {
                                    swatchStyle = 'background-color: #cccccc;';
                                }
                                selectedDisplay.innerHTML = `
                                    <div class="w-6 h-6 rounded border-2 border-gray-300 flex-shrink-0" style="${swatchStyle}"></div>
                                    <span>${name}</span>
                                `;
                            } else {
                                selectedDisplay.innerHTML = '<span class="text-gray-400">No rank assigned</span>';
                            }

                            // Remove selected state from all options in THIS dropdown
                            options.forEach(opt => opt.classList.remove('bg-indigo-50'));
                            // Add selected state to clicked option
                            this.classList.add('bg-indigo-50');

                            // Close dropdown
                            dropdownMenu.classList.add('hidden');
                        });
                    });

                    // Set initial selection
                    if (hiddenSelect.value) {
                        const selectedOption = Array.from(options).find(opt => opt.dataset.value === hiddenSelect.value);
                        if (selectedOption) {
                            const value = selectedOption.dataset.value;
                            const name = selectedOption.dataset.name;
                            const color = selectedOption.dataset.color;
                            const css = selectedOption.dataset.css;

                            let swatchStyle = '';
                            if (css) {
                                swatchStyle = `background: ${css};`;
                            } else if (color) {
                                swatchStyle = `background-color: ${color};`;
                            } else {
                                swatchStyle = 'background-color: #cccccc;';
                            }
                            selectedDisplay.innerHTML = `
                                <div class="w-6 h-6 rounded border-2 border-gray-300 flex-shrink-0" style="${swatchStyle}"></div>
                                <span>${name}</span>
                            `;
                            selectedOption.classList.add('bg-indigo-50');
                        }
                    }
                }

                // Initialize main rank dropdown
                initRankDropdown('rank-dropdown-container', 'rank_id', 'rank-dropdown-button', 'rank-dropdown-menu', 'rank-selected-display', '.rank-option-main');

                // Initialize Grading tab rank dropdown
                initRankDropdown('grading-rank-dropdown-container', 'grading_rank_id', 'grading-rank-dropdown-button', 'grading-rank-dropdown-menu', 'grading-rank-selected-display', '.rank-option-grading');

                // Initialize Edit Grading dropdowns in table
                @foreach($gradings as $grading)
                    initRankDropdown('edit-grading-{{ $grading->id }}-container', 'edit_grading_rank_id_{{ $grading->id }}', 'edit-grading-dropdown-button-{{ $grading->id }}', 'edit-grading-dropdown-menu-{{ $grading->id }}', 'edit-grading-selected-display-{{ $grading->id }}', '.rank-option-edit-{{ $grading->id }}');
                @endforeach
            })();
        </script>
    @endif
@endsection