<x-layouts.app :title="'Profile & Settings | ' . config('app.name')" headerLabel="Profile & Settings" activePage="profile">
<div class="space-y-12 w-full">
    <div>
        <h2 class="font-serif text-4xl text-on-surface mb-2">Profile & Settings</h2>
        <p class="text-on-surface-variant text-sm">Manage your personal information and security preferences.</p>
    </div>

    @if($errors->any())
        <div class="bg-error-container text-on-error-container p-4 rounded-sm text-sm">
            @foreach($errors->all() as $error)
                <p>{{ $error }}</p>
            @endforeach
        </div>
    @endif

    <div class="grid grid-cols-1 lg:grid-cols-12 gap-12">
        <!-- Profile Info -->
        <div class="lg:col-span-8 space-y-12">
            <!-- Personal Information -->
            <section class="bg-surface-container-lowest p-8 shadow-sm">
                <h3 class="font-serif text-2xl text-on-surface mb-8">Personal Information</h3>
                <form method="POST" action="{{ route('profile.update') }}" enctype="multipart/form-data" class="space-y-6">
                    @csrf
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label class="block text-xs font-semibold text-on-surface-variant uppercase tracking-tighter mb-2">First Name</label>
                            <input name="first_name" value="{{ old('first_name', $user->first_name) }}" class="w-full bg-surface-container-high border-none py-3 px-4 text-on-surface focus:ring-0 focus:border-b-2 focus:border-secondary" required/>
                        </div>
                        <div>
                            <label class="block text-xs font-semibold text-on-surface-variant uppercase tracking-tighter mb-2">Last Name</label>
                            <input name="last_name" value="{{ old('last_name', $user->last_name) }}" class="w-full bg-surface-container-high border-none py-3 px-4 text-on-surface focus:ring-0 focus:border-b-2 focus:border-secondary" required/>
                        </div>
                        <div>
                            <label class="block text-xs font-semibold text-on-surface-variant uppercase tracking-tighter mb-2">Email</label>
                            <input value="{{ $user->email }}" class="w-full bg-surface-container-high border-none py-3 px-4 text-on-surface-variant opacity-60 cursor-not-allowed" disabled/>
                        </div>
                        <div>
                            <label class="block text-xs font-semibold text-on-surface-variant uppercase tracking-tighter mb-2">Phone</label>
                            <input name="phone" value="{{ old('phone', $user->phone) }}" class="w-full bg-surface-container-high border-none py-3 px-4 text-on-surface focus:ring-0 focus:border-b-2 focus:border-secondary" type="tel"/>
                        </div>
                        <div>
                            <label class="block text-xs font-semibold text-on-surface-variant uppercase tracking-tighter mb-2">Date of Birth</label>
                            <input name="dob" value="{{ old('dob', $user->dob) }}" class="w-full bg-surface-container-high border-none py-3 px-4 text-on-surface focus:ring-0 focus:border-b-2 focus:border-secondary" type="date"/>
                        </div>
                        <div>
                            <label class="block text-xs font-semibold text-on-surface-variant uppercase tracking-tighter mb-2">Country</label>
                            <input name="country" value="{{ old('country', $user->country) }}" class="w-full bg-surface-container-high border-none py-3 px-4 text-on-surface focus:ring-0 focus:border-b-2 focus:border-secondary"/>
                        </div>
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-on-surface-variant uppercase tracking-tighter mb-2">Address</label>
                        <input name="address" value="{{ old('address', $user->address) }}" class="w-full bg-surface-container-high border-none py-3 px-4 text-on-surface focus:ring-0 focus:border-b-2 focus:border-secondary"/>
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-on-surface-variant uppercase tracking-tighter mb-2">Profile Photo</label>
                        <input type="file" name="profile_photo" accept=".jpg,.jpeg,.png" class="block text-sm text-on-surface-variant file:mr-4 file:py-2 file:px-6 file:border-0 file:text-sm file:font-semibold file:bg-white file:text-on-surface file:border file:border-outline hover:file:bg-surface-container file:cursor-pointer"/>
                        <p class="text-xs text-on-surface-variant mt-1">JPG or PNG, max 2MB</p>
                    </div>
                    <button type="submit" class="px-8 py-3 bg-primary text-on-primary font-label font-semibold tracking-wider uppercase text-sm hover:bg-primary-container transition-colors">
                        Update Profile
                    </button>
                </form>
            </section>

            <!-- Change Password -->
            <section class="bg-surface-container-lowest p-8 shadow-sm">
                <h3 class="font-serif text-2xl text-on-surface mb-8">Change Password</h3>
                <form method="POST" action="{{ route('profile.password') }}" class="space-y-6">
                    @csrf
                    <div>
                        <label class="block text-xs font-semibold text-on-surface-variant uppercase tracking-tighter mb-2">Current Password</label>
                        <input name="current_password" type="password" class="w-full bg-surface-container-high border-none py-3 px-4 text-on-surface focus:ring-0 focus:border-b-2 focus:border-secondary" required/>
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-on-surface-variant uppercase tracking-tighter mb-2">New Password</label>
                        <input name="password" type="password" class="w-full bg-surface-container-high border-none py-3 px-4 text-on-surface focus:ring-0 focus:border-b-2 focus:border-secondary" required/>
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-on-surface-variant uppercase tracking-tighter mb-2">Confirm New Password</label>
                        <input name="password_confirmation" type="password" class="w-full bg-surface-container-high border-none py-3 px-4 text-on-surface focus:ring-0 focus:border-b-2 focus:border-secondary" required/>
                    </div>
                    <button type="submit" class="px-8 py-3 bg-secondary text-on-secondary font-label font-semibold tracking-wider uppercase text-sm hover:opacity-90 transition-all">
                        Update Password
                    </button>
                </form>
            </section>
        </div>

        <!-- Sidebar -->
        <div class="lg:col-span-4 space-y-8">
            <!-- Profile Card -->
            <div class="bg-surface-container-lowest p-8 shadow-sm text-center">
                <div class="w-24 h-24 rounded-full bg-surface-container-highest mx-auto mb-4 flex items-center justify-center overflow-hidden">
                    @if($user->profile_photo)
                        <img src="{{ asset('storage/' . $user->profile_photo) }}" alt="Profile" class="w-full h-full object-cover">
                    @else
                        <span class="material-symbols-outlined text-4xl text-on-surface-variant">person</span>
                    @endif
                </div>
                <h3 class="font-serif text-xl text-on-surface">{{ $user->first_name }} {{ $user->last_name }}</h3>
                <p class="text-xs text-on-surface-variant mt-1">{{ $user->email }}</p>
                <span class="inline-block mt-3 text-[10px] font-bold uppercase tracking-tighter px-3 py-1 rounded-full bg-secondary-container text-secondary">
                    {{ $user->status->value }}
                </span>
            </div>

            <!-- Security Settings -->
            <div class="bg-surface-container-lowest p-8 shadow-sm space-y-6">
                <h3 class="font-serif text-xl text-on-surface">Security</h3>
                <div class="flex items-center justify-between">
                    <div>
                        <h4 class="font-label text-sm font-bold text-on-surface">OTP Verification</h4>
                        <p class="text-xs text-on-surface-variant">Extra layer on login</p>
                    </div>
                    <form method="POST" action="{{ route('profile.otp-toggle') }}">
                        @csrf
                        <button type="submit" class="relative inline-flex items-center cursor-pointer">
                            <div class="w-11 h-6 bg-surface-container-highest rounded-full {{ session('otp_verified') ? 'bg-secondary' : '' }} after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all {{ session('otp_verified') ? 'after:translate-x-full' : '' }}"></div>
                        </button>
                    </form>
                </div>
            </div>

            <!-- Account Info -->
            <div class="bg-secondary-container/30 p-6 rounded-sm">
                <p class="text-xs font-bold uppercase tracking-widest text-secondary mb-2">Member Since</p>
                <p class="text-sm text-on-secondary-container">{{ $user->created_at->format('F d, Y') }}</p>
            </div>
        </div>
    </div>
</div>
</x-layouts.app>
