@extends('layouts.app', ['title' => 'Profile'])

@section('content')
<section class="rounded-[2rem] border border-white/10 bg-slate-900/70 p-6 max-w-3xl">
    <h1 class="font-display text-3xl font-bold text-white">Profile settings</h1>
    <p class="mt-2 text-sm text-slate-400">Update your contact details, account email, and password from one place.</p>

    <form method="POST" action="{{ route('profile.update') }}" class="mt-6 grid gap-4 md:grid-cols-2">
        @csrf
        <input name="name" value="{{ old('name', $user->name) }}" placeholder="Full name" title="Update the main contact name shown across the portal" class="rounded-2xl border border-white/10 bg-slate-950/80 px-4 py-3 text-white" required>
        <input name="email" type="email" value="{{ old('email', $user->email) }}" placeholder="Email address" title="This email is used for login, invoices, and password reset links" class="rounded-2xl border border-white/10 bg-slate-950/80 px-4 py-3 text-white" required>
        <input name="company_name" value="{{ old('company_name', $user->company_name) }}" placeholder="Company name" title="Optional: update the business or team name tied to your account" class="rounded-2xl border border-white/10 bg-slate-950/80 px-4 py-3 text-white">
        <input name="mobile_number" value="{{ old('mobile_number', $user->mobile_number) }}" placeholder="Mobile number" title="Optional: add a billing or support contact number" class="rounded-2xl border border-white/10 bg-slate-950/80 px-4 py-3 text-white">
        <input name="timezone" value="{{ old('timezone', $user->timezone) }}" placeholder="Timezone" title="Set the timezone used for notices and account timestamps" class="rounded-2xl border border-white/10 bg-slate-950/80 px-4 py-3 text-white">
        <input name="locale" value="{{ old('locale', $user->locale) }}" placeholder="Locale" title="Set your preferred language or locale code" class="rounded-2xl border border-white/10 bg-slate-950/80 px-4 py-3 text-white">

        <div class="md:col-span-2 mt-2 rounded-[1.5rem] border border-white/10 bg-white/5 p-5">
            <h2 class="font-display text-xl font-semibold text-white">Change password</h2>
            <div class="mt-4 grid gap-4 md:grid-cols-2">
                <input name="current_password" type="password" placeholder="Current password" title="Required only when you want to set a new password" class="rounded-2xl border border-white/10 bg-slate-950/80 px-4 py-3 text-white">
                <div class="hidden md:block"></div>
                <input name="password" type="password" placeholder="New password" title="Leave blank to keep the current password" class="rounded-2xl border border-white/10 bg-slate-950/80 px-4 py-3 text-white">
                <input name="password_confirmation" type="password" placeholder="Confirm new password" title="Repeat the new password exactly" class="rounded-2xl border border-white/10 bg-slate-950/80 px-4 py-3 text-white">
            </div>
        </div>

        <button type="submit" class="md:col-span-2 rounded-2xl bg-brand-500 px-5 py-3 font-semibold text-white">Save account changes</button>
    </form>
</section>
@endsection