@extends('layouts.app')
@section('title', 'My Profile')

@section('content')
<div class="p-4 sm:p-6 lg:p-7">
  @if ($errors->any())
    <div class="mb-4 p-4 rounded-xl border border-red-200 bg-red-50 text-red-800 text-[13px]">
      <ul class="list-disc ml-4">@foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul>
    </div>
  @endif

  <div class="flex flex-col xl:flex-row xl:items-start xl:justify-between gap-4 mb-5">
    <div>
      <p class="text-[17px] font-bold text-slate-900"><i class="fa-solid fa-user text-blue-600 mr-2"></i>My Profile</p>
      <p class="text-slate-400 text-[11px] mt-0.5">Manage your personal details, password and preferences</p>
    </div>
    <div class="flex flex-wrap items-center gap-3 justify-end">
      @if($user->last_login_at)
        <span class="text-[11px] text-slate-500">Last sign-in: <span class="font-semibold text-slate-700">{{ $user->last_login_at->format('d M Y, H:i') }}</span></span>
      @endif
      @if($user->is_active)
        <span class="badge g">Active</span>
      @else
        <span class="badge s">Inactive</span>
      @endif
    </div>
  </div>

  <div class="grid grid-cols-1 lg:grid-cols-12 gap-5">
    <div class="lg:col-span-4 space-y-5">
      @include('profile.partials.profile-summary')
      @include('profile.partials.avatar-form')
      <div class="dp">
        <p class="font-bold text-slate-900 mb-1"><i class="fa-solid fa-circle-info text-blue-600 mr-2"></i>Account</p>
        <p class="text-slate-500 text-[12px] mb-3">Read-only organisation assignment.</p>
        <dl class="space-y-2 text-[13px]">
          <div class="flex justify-between gap-2"><dt class="text-slate-500">Role</dt><dd class="font-semibold text-slate-800 text-right">{{ $user->role ?: '—' }}</dd></div>
          <div class="flex justify-between gap-2"><dt class="text-slate-500">Member since</dt><dd class="text-slate-800 text-right">{{ $user->created_at?->format('d M Y') }}</dd></div>
          @if($emailVerificationEnabled)
            <div class="flex justify-between gap-2 items-center">
              <dt class="text-slate-500">Verification</dt>
              <dd>@if($user->email_verified_at)<span class="badge g">Verified</span>@else<span class="badge a">Unverified</span>@endif</dd>
            </div>
          @endif
        </dl>
      </div>
    </div>
    <div class="lg:col-span-8 space-y-5">
      @include('profile.partials.personal-info-form')
      @include('profile.partials.password-form')
      @include('profile.partials.preferences-form')
      @include('profile.partials.notifications-form')
      @include('profile.partials.security-form')
      @include('profile.partials.sessions-list')
      @include('profile.partials.activity-list')
    </div>
  </div>
</div>
@endsection