@extends('layouts.app')
@section('title', __('Profile'))
@section('content')
<section class="grid gap-5 xl:grid-cols-[.8fr_1.2fr]">
  <div class="overflow-hidden rounded-[1.7rem] bg-gradient-to-br from-blue-950 to-blue-800 p-6 text-white shadow-xl shadow-blue-950/10">
    <span class="flex h-16 w-16 items-center justify-center rounded-full bg-white/15 text-2xl font-extrabold">{{ strtoupper(substr($user->name, 0, 1)) }}</span>
    <h2 class="mt-5 text-2xl font-bold">{{ $user->name }}</h2>
    <p class="mt-1 text-sm text-blue-200">{{ $user->email }}</p>
    <div class="mt-6 border-t border-white/15 pt-5">
      <p class="text-[10px] font-bold uppercase tracking-[.16em] text-blue-200/75">{{ __('Account type') }}</p>
      <p class="mt-1 font-semibold">{{ __($user->isAdmin() ? 'Administrator' : ($user->isEmployee() ? 'Employee' : 'Team Leader')) }}</p>
    </div>
  </div>
  <div class="panel-card p-5 sm:p-7">
    <div class="flex flex-wrap items-start justify-between gap-3"><div><h2 class="font-bold text-slate-900">{{ __('Account details') }}</h2><p class="mt-1 text-sm text-slate-500">{{ __('Information associated with your LML account.') }}</p></div><a href="{{ route('profile.edit') }}" class="rounded-xl border border-slate-200 px-3 py-2 text-xs font-bold text-slate-700 hover:bg-slate-50">{{ __('Edit profile') }}</a></div>
    <dl class="mt-6 divide-y divide-slate-100">
      <div class="flex flex-wrap justify-between gap-2 py-4"><dt class="text-sm text-slate-500">{{ __('Full name') }}</dt><dd class="text-sm font-bold text-slate-800">{{ $user->name }}</dd></div>
      <div class="flex flex-wrap justify-between gap-2 py-4"><dt class="text-sm text-slate-500">Email</dt><dd class="text-sm font-bold text-slate-800">{{ $user->email }}</dd></div>
      <div class="flex flex-wrap justify-between gap-2 py-4"><dt class="text-sm text-slate-500">{{ __('Member ID') }}</dt><dd class="text-sm font-bold text-slate-800">{{ $user->member_id ?: '—' }}</dd></div>
      <div class="flex flex-wrap justify-between gap-2 py-4"><dt class="text-sm text-slate-500">{{ __('Status') }}</dt><dd class="text-sm font-bold {{ $user->is_active ? 'text-emerald-700' : 'text-rose-700' }}">{{ $user->is_active ? __('Active') : __('Inactive') }}</dd></div>
      <div class="flex flex-wrap justify-between gap-2 py-4"><dt class="text-sm text-slate-500">{{ __('Member since') }}</dt><dd class="text-sm font-bold text-slate-800">{{ $user->created_at->format('F Y') }}</dd></div>
    </dl>
    <form method="POST" action="{{ route('logout') }}" class="mt-5 border-t border-slate-100 pt-5 sm:hidden">@csrf<button class="w-full rounded-xl border border-rose-200 px-4 py-3 text-sm font-bold text-rose-700">{{ __('Sign out') }}</button></form>
  </div>
</section>
@endsection