@extends('layouts.admin')

@section('header')
    Add Member
@endsection

@section('content')
    <div class="bg-white shadow-sm sm:rounded-lg" style="overflow: visible;">
        <div class="p-6 text-gray-900"  style="overflow: visible;">
            <div class="mb-6">
                <h3 class="text-lg font-medium leading-6 text-gray-900">Create New Member</h3>
                <p class="mt-1 text-sm text-gray-600">Add a new member to the club.</p>
            </div>

            <form method="POST" action="{{ route('members.store') }}" enctype="multipart/form-data">
                @csrf

                <!-- Photo Upload -->
                <div class="mb-4">
                    <label for="photo" class="block text-sm font-medium text-gray-700">Member Photo (Optional)</label>
                    <input type="file" name="photo" id="photo" accept="image/*" class="mt-1 block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-indigo-50 file:text-indigo-700 hover:file:bg-indigo-100">
                    @error('photo')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <div class="space-y-8">
                    @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') == $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') }}" 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') }}" 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') == 'Male' ? 'selected' : '' }}>Male</option>
                                <option value="Female" {{ old('gender') == 'Female' ? 'selected' : '' }}>Female</option>
                                <option value="Not specified" {{ old('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') }}" 
                                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') }}" 
                                       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', 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" 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') }}" 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>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <!-- Password -->
                        <div>
                            <label for="password" class="block text-sm font-medium text-gray-700">Password (Optional)</label>
                            <input type="password" name="password" id="password" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
                            <p class="mt-1 text-xs text-gray-500">Leaving this blank will prevent the user from logging in until a password is set.</p>
                            @error('password') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                        </div>

                        <!-- Password Confirmation -->
                        <div>
                            <label for="password_confirmation" class="block text-sm font-medium text-gray-700">Confirm Password (Optional)</label>
                            <input type="password" name="password_confirmation" id="password_confirmation" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
                        </div>

                        <!-- Role -->
                        <div>
                            <label for="role" class="block text-sm font-medium text-gray-700">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') == 'member' ? 'selected' : '' }}>Student</option>
                                <option value="club_manager" {{ old('role') == 'club_manager' ? 'selected' : '' }}>Club Manager</option>
                            </select>
                            @error('role') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                        </div>

                    <!-- Rank -->
                    @if($ranks->count() > 0)
                        <div class="mb-4" style="overflow: visible;">
                            <label for="rank_id" class="block text-sm font-medium text-gray-700">Rank (Optional)</label>
                            
                            <!-- Hidden select for form submission -->
                            <select id="rank_id" name="rank_id" class="hidden">
                                <option value="">No rank assigned</option>
                                @php
                                    $defaultRankId = old('rank_id', $ranks->last()?->id);
                                    $selectedRank = $ranks->firstWhere('id', $defaultRankId);
                                @endphp
                                @foreach($ranks->sortByDesc('order') as $rank)
                                    <option value="{{ $rank->id }}" {{ $defaultRankId == $rank->id ? 'selected' : '' }}>{{ $rank->name }}</option>
                                @endforeach
                            </select>

                            <!-- Custom visual dropdown -->
                            <div class="relative mt-1" style="overflow: visible;">
                                <button type="button" id="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">
                                    <span id="rank-selected-display" class="flex items-center gap-2">
                                        @if($selectedRank)
                                            <div class="w-6 h-6 rounded border-2 border-gray-300 flex-shrink-0" style="@if($selectedRank->css)background:{{ $selectedRank->css }}@else background-color: {{ $selectedRank->color ?? '#cccccc' }};@endif"></div>
                                            <span>{{ $selectedRank->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-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="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">
                                        <li class="rank-option cursor-pointer select-none relative py-2 pl-3 pr-9 hover:bg-gray-100 {{ $defaultRankId == '' ? 'bg-indigo-50' : '' }}" data-value="">
                                            <span class="block truncate text-gray-400">No rank assigned</span>
                                        </li>
                                        @foreach($ranks->sortByDesc('order') as $rank)
                                            <li class="rank-option cursor-pointer select-none relative py-2 pl-3 pr-9 hover:bg-gray-100 {{ $defaultRankId == $rank->id ? 'bg-indigo-50' : '' }}" 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

                            <!-- No Photo Permission Checkbox -->
                            <div class="mt-4 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') ? '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>
                            <!-- Club Admin Checkbox -->
                            @if(auth()->user()->role === 'admin' || (auth()->user()->role === 'club_manager' && auth()->user()->is_club_admin))
                                <div class="mt-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') ? '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>

                        <script>
                            (function() {
                                const hiddenSelect = document.getElementById('rank_id');
                                const dropdownButton = document.getElementById('rank-dropdown-button');
                                const dropdownMenu = document.getElementById('rank-dropdown-menu');
                                const selectedDisplay = document.getElementById('rank-selected-display');
                                const options = document.querySelectorAll('.rank-option');

                                // Toggle dropdown
                                dropdownButton.addEventListener('click', function(e) {
                                    e.preventDefault();
                                    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
                                        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 there's an old value
                                if (hiddenSelect.value) {
                                    const selectedOption = Array.from(options).find(opt => opt.dataset.value === hiddenSelect.value);
                                    if (selectedOption) {
                                        selectedOption.click();
                                    }
                                }
                            })();
                        </script>
                    @endif
                </div>

                <hr class="my-8 border-gray-200">

                <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') }}" 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') }}" 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') }}" 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') }}" 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') }}" 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') }}" 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') }}" 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') }}" 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') }}" 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') }}" 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') }}</textarea>
                                @error('medical_notes') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                            </div>
                        </div>
                    </div>
                </div>

                <hr class="my-8 border-gray-200">

                <div class="mb-8">
                    <label for="notes" class="block text-sm font-medium text-gray-700">General Notes</label>
                    <p class="mt-1 text-xs text-gray-500 mb-2">Internal notes about the member. These are not visible to the member.</p>
                    <textarea name="notes" id="notes" rows="6" 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('notes') }}</textarea>
                    @error('notes') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                </div>

                <hr class="my-8 border-gray-200">

                <!-- Member Groups -->
                @if($memberGroups->count() > 0)
                    <div class="mb-6">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Member Groups</label>
                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2">
                            @foreach($memberGroups as $group)
                                <div class="relative flex items-start">
                                    <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')) ? 'checked' : '' }}
                                        >
                                    </div>
                                    <div class="ml-3 text-sm leading-6">
                                        <label for="group_{{ $group->id }}" class="font-medium text-gray-900">{{ $group->name }}</label>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                        @error('member_groups')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                @endif

                <div class="flex items-center justify-end gap-4">
                    <a href="{{ route('members.index') }}" class="inline-flex items-center px-4 py-2 bg-gray-300 border border-transparent rounded-md font-semibold text-xs text-gray-700 uppercase tracking-widest hover:bg-gray-400 focus:bg-gray-400 active:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 transition ease-in-out duration-150">
                        Cancel
                    </a>
                    <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">
                        Create Member
                    </button>
                </div>
            </form>
        </div>
    </div>
@endsection