@extends('layouts.admin')

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

@section('content')
    <x-page-header
        title="Account Settings"
        :breadcrumbs="[
            ['label' => 'Admin', 'href' => route('admin.dashboard')],
            ['label' => 'Settings'],
        ]"
        subtitle="Manage your personal information, security, and account preferences."
    />

    <div class="space-y-6">
        {{-- Profile Information --}}
        <div class="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden">
            <div class="p-6 border-b border-slate-100 bg-slate-50/50">
                <h3 class="text-lg font-bold text-slate-900">Personal Information</h3>
                <p class="text-sm text-slate-500">Update your account's profile information and email address.</p>
            </div>
            <div class="p-6">
                <div class="max-w-xl">
                    @include('profile.partials.update-profile-information-form')
                </div>
            </div>
        </div>

        {{-- Security --}}
        <div class="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden">
            <div class="p-6 border-b border-slate-100 bg-slate-50/50">
                <h3 class="text-lg font-bold text-slate-900">Security & Password</h3>
                <p class="text-sm text-slate-500">Ensure your account is using a long, random password to stay secure.</p>
            </div>
            <div class="p-6">
                <div class="max-w-xl">
                    @include('profile.partials.update-password-form')
                </div>
            </div>
        </div>

        {{-- Danger Zone --}}
        <div class="bg-white rounded-2xl border border-rose-100 shadow-sm overflow-hidden">
            <div class="p-6 border-b border-rose-50 bg-rose-50/30">
                <h3 class="text-lg font-bold text-rose-900">Danger Zone</h3>
                <p class="text-sm text-rose-600/70">Permanently delete your account and all associated data.</p>
            </div>
            <div class="p-6">
                <div class="max-w-xl">
                    @include('profile.partials.delete-user-form')
                </div>
            </div>
        </div>
    </div>
@endsection