@extends('account.layout')

@section('account_content')
<div class="space-y-8">
    <div>
        <h2 class="text-2xl font-bold text-gray-900">Personal Information</h2>
        <p class="mt-2 text-base text-gray-500">Update your personal information</p>
    </div>
    <hr class="border-t border-gray-200">

    <form action="{{ route('account.profile.update') }}" method="POST" class="space-y-8">
        @csrf
        <div class="grid grid-cols-1 gap-y-6 gap-x-8 sm:grid-cols-6">
            <div class="sm:col-span-3">
                <label for="name" class="block text-base font-medium text-gray-700">Full Name</label>
                <div class="mt-2">
                    <input type="text" name="name" id="name" value="{{ $user->name ?? '' }}" class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-1 focus:ring-yellow-500 focus:border-yellow-500">
                </div>
                @error('name')
                    <p class="mt-2 text-base text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <div class="sm:col-span-3">
                <label for="email" class="block text-base font-medium text-gray-700">Email Address</label>
                <div class="mt-2">
                    <input disabled type="email" name="email" id="email" value="{{ $user->email ?? '' }}" class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-1 focus:ring-yellow-500 focus:border-yellow-500">
                </div>
                @error('email')
                    <p class="mt-2 text-base text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <div class="sm:col-span-3">
                <label for="phone" class="block text-base font-medium text-gray-700">Phone Number</label>
                <div class="mt-2">
                    <input type="tel" name="phone" id="phone" value="{{ $user->phone ?? '' }}" class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-1 focus:ring-yellow-500 focus:border-yellow-500">
                </div>
                @error('phone')
                    <p class="mt-2 text-base text-red-600">{{ $message }}</p>
                @enderror
            </div>
        </div>

        <div class="pt-6">
            <div class="flex justify-end">
                <button type="submit" class="px-6 py-3 font-medium bg-red-700 text-white rounded-lg hover:bg-red-800 transition-colors duration-300">
                    Save Changes
                </button>
            </div>
        </div>
    </form>
</div>
@endsection