@extends('clients.layouts.app')

@section('title', 'My Profile')

@section('content')
    <div class="space-y-8 animate-in fade-in duration-700">
        <div class="flex flex-col md:flex-row md:items-center justify-between gap-6 pb-2">
            <div>
                <h1 class="text-4xl font-black text-slate-900 dark:text-white tracking-tight italic">Profile Settings</h1>
                <p class="text-sm text-slate-400 font-medium mt-1 uppercase tracking-widest">Update your personal and
                    billing information</p>
            </div>
            <button
                class="bg-[#1e293b] text-white px-8 py-3.5 rounded-lg font-bold text-xs uppercase tracking-widest shadow-xl shadow-slate-900/10 hover:bg-slate-800 transition-all transform hover:-translate-y-1 block">
                Save All Changes
            </button>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
            <!-- Main Form -->
            <div class="lg:col-span-2 space-y-6">
                <div
                    class="bg-white dark:bg-[#1e293b] rounded-lg p-10 border border-slate-100 dark:border-white/5 shadow-sm">
                    <h3
                        class="text-lg font-black text-slate-900 dark:text-white uppercase tracking-widest mb-8 flex items-center">
                        <i class="fas fa-user-circle mr-3 text-primary"></i> Personal Details
                    </h3>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div class="space-y-2">
                            <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">First
                                Name</label>
                            <input type="text" value="{{ $user->firstname }}"
                                class="w-full bg-slate-50 dark:bg-white/[0.03] border-none rounded-lg px-4 py-3.5 text-sm font-bold text-slate-700 dark:text-white focus:ring-2 focus:ring-primary/20 transition-all">
                        </div>
                        <div class="space-y-2">
                            <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Last
                                Name</label>
                            <input type="text" value="{{ $user->lastname }}"
                                class="w-full bg-slate-50 dark:bg-white/[0.03] border-none rounded-lg px-4 py-3.5 text-sm font-bold text-slate-700 dark:text-white focus:ring-2 focus:ring-primary/20 transition-all">
                        </div>
                        <div class="space-y-2 md:col-span-2">
                            <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Email
                                Address</label>
                            <input type="email" value="{{ $user->email }}"
                                class="w-full bg-slate-50 dark:bg-white/[0.03] border-none rounded-lg px-4 py-3.5 text-sm font-bold text-slate-700 dark:text-white opacity-60 cursor-not-allowed"
                                disabled>
                        </div>
                    </div>
                </div>

                <div
                    class="bg-white dark:bg-[#1e293b] rounded-lg p-10 border border-slate-100 dark:border-white/5 shadow-sm">
                    <h3
                        class="text-lg font-black text-slate-900 dark:text-white uppercase tracking-widest mb-8 flex items-center">
                        <i class="fas fa-map-marker-alt mr-3 text-primary"></i> Billing Address
                    </h3>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div class="space-y-2 md:col-span-2">
                            <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Street
                                Address</label>
                            <input type="text" placeholder="123 Web Street"
                                class="w-full bg-slate-50 dark:bg-white/[0.03] border-none rounded-lg px-4 py-3.5 text-sm font-bold text-slate-700 dark:text-white focus:ring-2 focus:ring-primary/20 transition-all">
                        </div>
                        <div class="space-y-2">
                            <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">City</label>
                            <input type="text" placeholder="New York"
                                class="w-full bg-slate-50 dark:bg-white/[0.03] border-none rounded-lg px-4 py-3.5 text-sm font-bold text-slate-700 dark:text-white focus:ring-2 focus:ring-primary/20 transition-all">
                        </div>
                        <div class="space-y-2">
                            <label
                                class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Postcode</label>
                            <input type="text" placeholder="10001"
                                class="w-full bg-slate-50 dark:bg-white/[0.03] border-none rounded-lg px-4 py-3.5 text-sm font-bold text-slate-700 dark:text-white focus:ring-2 focus:ring-primary/20 transition-all">
                        </div>
                    </div>
                </div>
            </div>

            <!-- Sidebar / Settings -->
            <div class="space-y-6">
                <div
                    class="bg-white dark:bg-[#1e293b] rounded-lg p-8 border border-slate-100 dark:border-white/5 shadow-sm">
                    <h4 class="text-xs font-black text-slate-900 dark:text-white uppercase tracking-widest mb-6">Preferences
                    </h4>
                    <div class="space-y-4">
                        <div class="flex items-center justify-between p-4 bg-slate-50 dark:bg-white/[0.02] rounded-2xl">
                            <span class="text-[10px] font-black text-slate-400 uppercase tracking-widest">Language</span>
                            <span class="text-xs font-bold text-primary">English</span>
                        </div>
                        <div class="flex items-center justify-between p-4 bg-slate-50 dark:bg-white/[0.02] rounded-2xl">
                            <span class="text-[10px] font-black text-slate-400 uppercase tracking-widest">Currency</span>
                            <span class="text-xs font-bold text-primary">USD</span>
                        </div>
                    </div>
                </div>

                <div class="bg-primary rounded-lg p-8 text-white relative overflow-hidden">
                    <h4 class="text-xs font-black uppercase tracking-widest mb-2 relative z-10">Security Check</h4>
                    <p class="text-sm font-medium opacity-80 mb-6 relative z-10">Your account is well protected. Add 2FA for
                        extra safety.</p>
                    <a href="{{ route('client.security') }}"
                        class="inline-block bg-white text-primary px-6 py-3 rounded-lg font-bold text-xs uppercase tracking-widest hover:bg-slate-50 transition-all relative z-10">Enhance
                        Security</a>
                    <i class="fas fa-shield-halved absolute bottom-[-1rem] right-[-1rem] text-8xl opacity-10"></i>
                </div>
            </div>
        </div>
    </div>
@endsection