@extends('layouts.app')

@section('title', 'Account Settings')

@section('content')
    <div class="max-w-4xl">
        <h2 class="text-2xl font-bold text-gray-800 mb-2">Account</h2>
        <p class="text-gray-500 text-sm mb-8">Manage your personal details and preferences.</p>

        <div class="bg-white p-8 rounded-xl shadow-sm border border-gray-200 mb-6">
            <div class="flex items-center gap-6">
                <div class="relative">
                    <div class="w-24 h-24 rounded-full bg-slate-800 text-white flex items-center justify-center text-3xl font-bold">
                        {{ substr(session('user_name'), 0, 1) }}
                    </div>
                    <button class="absolute bottom-0 right-0 bg-white border border-gray-200 p-2 rounded-full shadow-sm hover:bg-gray-50">
                        <i class="fas fa-camera text-gray-500"></i>
                    </button>
                </div>
                <div>
                    <h3 class="text-lg font-bold text-gray-800">{{ session('user_name') }}</h3>
                    <p class="text-gray-500 text-sm">Role: <span class="uppercase font-bold text-xs bg-gray-100 px-2 py-1 rounded">{{ session('role') }}</span></p>
                </div>
            </div>

            <form class="mt-8 space-y-6 max-w-lg">
                <div>
                    <label class="block text-sm font-bold text-gray-700 mb-1">Full Name</label>
                    <input type="text" value="{{ session('user_name') }}" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-[#FF6900] outline-none">
                </div>
                <div>
                    <label class="block text-sm font-bold text-gray-700 mb-1">Email Address</label>
                    <input type="email" value="user@example.com" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-[#FF6900] outline-none bg-gray-50" readonly>
                </div>
                <button class="bg-[#FF6900] text-white px-6 py-2.5 rounded-lg font-bold text-sm shadow hover:bg-[#e65e00] transition">Save Changes</button>
            </form>
        </div>
    </div>
@endsection