@extends($layout)

@section('content')
<div class="max-w-4xl mx-auto py-10 px-6">

    <div class="mb-8">
        <h1 class="text-3xl font-bold text-gray-800">
            My Profile
        </h1>
        <p class="text-gray-500 my-1">Manage your account details and view your reservations.</p>
    </div>

    <div class="flex flex-col md:flex-row gap-8">
    
        <div class="w-full md:w-1/3">
            <div class="bg-white rounded-lg shadow p-4">
                <nav class="flex flex-col space-y-2">
                    
                    <a href="{{ route('profile.edit') }}" class="flex items-center gap-3 px-4 py-2 rounded bg-indigo-50 border-l-4 border-indigo-500 text-indigo-700 font-semibold">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zM12 12a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd" />
                        </svg>
                        Edit Profile
                    </a>

                    <a href="{{ route('profile.password') }}" class="flex items-center gap-3 px-4 py-2 rounded text-gray-600 hover:bg-gray-50 hover:text-gray-800">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" 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>
                        Change Password
                    </a>
                </nav>
            </div>
        </div>

        <div class="w-full md:w-2/3">
            <div class="bg-white rounded-lg shadow">
                <form method="post" action="{{ route('profile.update') }}" enctype="multipart/form-data">
                    @csrf
                    @method('patch')

                    <div class="border-b px-6 py-4">
                        <h3 class="text-lg font-semibold text-gray-700">Profile Information</h3>
                        <p class="text-sm text-gray-500">Update your account's profile information and email address.</p>
                    </div>

                    <div class="p-6 space-y-6">
                        <div>
                            <x-input-label for="avatar" :value="__('Profile Picture')" />
                            <div class="flex items-center gap-4 mt-1">
                                <img src="{{ $user->avatar ? asset('storage/' . $user->avatar) : 'https://ui-avatars.com/api/?name=' . urlencode($user->name) . '&color=7F9CF5&background=EBF4FF' }}"
                                     alt="{{ $user->name }}" class="h-16 w-16 rounded-full object-cover">
                                
                                <input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg, image/jpg" class="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"/>
                            </div>
                            <x-input-error class="mt-2" :messages="$errors->get('avatar')" />
                        </div>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <x-input-label for="name" :value="__('Full Name')" />
                                <x-text-input id="name" name="name" type="text" class="mt-1 block w-full" :value="old('name', $user->name)" required autofocus autocomplete="name" />
                                <x-input-error class="mt-2" :messages="$errors->get('name')" />
                            </div>

                            <div>
                                <x-input-label for="email" :value="__('Email Address')" />
                                <x-text-input id="email" name="email" type="email" class="mt-1 block w-full" :value="old('email', $user->email)" required autocomplete="username" />
                                <x-input-error class="mt-2" :messages="$errors->get('email')" />
                            </div>

                            <div>
                                <x-input-label for="phone" :value="__('Phone Number')" />
                                <x-text-input id="phone" name="phone" type="text" class="mt-1 block w-full" :value="old('phone', $user->phone)" autocomplete="tel" />
                                <x-input-error class="mt-2" :messages="$errors->get('phone')" />
                            </div>
                            
                            <div>
                                <x-input-label for="membership_id" :value="__('Membership ID')" />
                                <x-text-input id="membership_id" name="membership_id" type="text" class="mt-1 block w-full" :value="old('membership_id', $user->membership_id)" />
                                <x-input-error class="mt-2" :messages="$errors->get('membership_id')" />
                            </div>

                            <div>
                                <x-input-label for="gender" :value="__('Gender')" />
                                <select id="gender" name="gender" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                    <option value="" {{ old('gender', $user->gender) == '' ? 'selected' : '' }}>Please select...</option>
                                    <option value="Male" {{ old('gender', $user->gender) == 'Male' ? 'selected' : '' }}>Male</option>
                                    <option value="Female" {{ old('gender', $user->gender) == 'Female' ? 'selected' : '' }}>Female</option>
                                </select>
                                <x-input-error class="mt-2" :messages="$errors->get('gender')" />
                            </div>
                            
                            <div>
                                <x-input-label for="dob" :value="__('Date of Birth')" />
                                <x-text-input id="dob" name="dob" type="date" class="mt-1 block w-full" :value="old('dob', $user->dob ? $user->dob->format('Y-m-d') : '')" />
                                <x-input-error class="mt-2" :messages="$errors->get('dob')" />
                            </div>

                            <div class="md:col-span-2">
                                <x-input-label for="address" :value="__('Address')" />
                                <textarea id="address" name="address" rows="3" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:border-indigo-500 focus:ring-indigo-500">{{ old('address', $user->address) }}</textarea>
                                <x-input-error class="mt-2" :messages="$errors->get('address')" />
                            </div>
                        </div>
                    </div>

                    <div class="flex items-center gap-4 bg-gray-50 px-6 py-4 rounded-b-lg">
                        <x-primary-button>{{ __('Save') }}</x-primary-button>

                        @if (session('status') === 'profile-updated')
                            <p
                                x-data="{ show: true }"
                                x-show="show"
                                x-transition
                                x-init="setTimeout(() => show = false, 2000)"
                                class="text-sm text-gray-600"
                            >{{ __('Saved.') }}</p>
                        @endif
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection