<div class="p-8 max-w-2xl mx-auto">
    <div class="mb-8">
        <h1 class="text-2xl font-bold text-white">Agent Profile</h1>
        <p class="text-slate-400 text-sm">Manage your account details and password</p>
    </div>

    <div class="bg-slate-900 border border-slate-800 rounded-2xl p-6 shadow-xl">
        <form id="profile-form" onsubmit="handleProfileUpdate(event)" class="space-y-5">
            <div>
                <label class="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2">Full Name</label>
                <input type="text" name="name" value="<?= htmlspecialchars($user['name'] ?? '') ?>" required
                       class="w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-2.5 text-sm text-white focus:outline-none focus:border-emerald-500">
            </div>

            <div>
                <label class="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2">Email Address</label>
                <input type="email" name="email" value="<?= htmlspecialchars($user['email'] ?? '') ?>" required
                       class="w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-2.5 text-sm text-white focus:outline-none focus:border-emerald-500">
            </div>

            <div>
                <label class="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2">Role</label>
                <input type="text" value="<?= ucfirst(htmlspecialchars($user['role'] ?? 'Agent')) ?>" disabled
                       class="w-full bg-slate-950/50 border border-slate-800/50 rounded-xl px-4 py-2.5 text-sm text-slate-500 cursor-not-allowed">
            </div>

            <div class="pt-4 border-t border-slate-800">
                <label class="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2">New Password (leave blank to keep current)</label>
                <input type="password" name="password" placeholder="••••••••"
                       class="w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-2.5 text-sm text-white focus:outline-none focus:border-emerald-500">
            </div>

            <button type="submit" class="bg-emerald-500 hover:bg-emerald-600 text-white font-medium py-2.5 px-5 rounded-xl transition shadow-lg shadow-emerald-500/20">
                Save Changes
            </button>
        </form>
    </div>
</div>

<script>
async function handleProfileUpdate(e) {
    e.preventDefault();
    const form = e.target;
    const formData = new FormData(form);

    try {
        const res = await fetch('/profile/update', {
            method: 'POST',
            body: formData,
            headers: { 'X-Requested-With': 'XMLHttpRequest' }
        });
        const data = await res.json();
        if (data.success) {
            App.toast('Profile updated successfully!', 'success');
        } else {
            App.toast(data.error || 'Failed to update profile', 'error');
        }
    } catch (err) {
        App.toast('Error connecting to server', 'error');
    }
}
</script>
