@extends('layouts.admin')

@section('title', 'User Details')

@section('content')
<div class="min-h-screen bg-slate-50">
    <div class="mx-auto max-w-5xl px-4 py-6 sm:px-6 lg:px-8">

        <div class="mb-6 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
            <div>
                <h1 class="text-2xl font-bold text-slate-800 md:text-3xl">User Details</h1>
                <p class="mt-1 text-sm text-slate-500">ইউজারের বিস্তারিত তথ্য</p>
            </div>

            <div class="flex items-center gap-2">
                <a href="{{ route('admin.users.edit', $user) }}"
                   class="rounded-xl bg-amber-500 px-4 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-amber-600">
                    Edit User
                </a>
                <a href="{{ route('admin.users.index') }}"
                   class="rounded-xl border border-slate-300 bg-white px-4 py-2 text-sm font-semibold text-slate-700 transition hover:bg-slate-50">
                    Back
                </a>
            </div>
        </div>

        <div class="grid grid-cols-1 gap-6 lg:grid-cols-3">

            <div class="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm lg:col-span-1">
                <div class="flex flex-col items-center text-center">
                    <div class="flex h-24 w-24 items-center justify-center rounded-3xl bg-gradient-to-br from-blue-100 to-indigo-100 text-3xl font-bold uppercase text-blue-700 shadow-sm">
                        {{ strtoupper(substr($user->username ?? 'U', 0, 1)) }}
                    </div>

                    <h2 class="mt-4 text-xl font-bold text-slate-800">{{ $user->username }}</h2>
                    <p class="mt-1 text-sm text-slate-500">User ID: #{{ $user->id }}</p>

                    <div class="mt-4 flex flex-wrap items-center justify-center gap-2">
                        <span class="inline-flex items-center gap-1.5 rounded-full px-3 py-1.5 text-xs font-semibold ring-1
                            {{ $user->status === 'active'
                                ? 'bg-emerald-100 text-emerald-700 ring-emerald-200'
                                : 'bg-rose-100 text-rose-700 ring-rose-200' }}">
                            <span class="h-2 w-2 rounded-full {{ $user->status === 'active' ? 'bg-emerald-500' : 'bg-rose-500' }}"></span>
                            {{ ucfirst($user->status) }}
                        </span>

                        <span class="inline-flex items-center gap-1.5 rounded-full px-3 py-1.5 text-xs font-semibold ring-1
                            {{ $user->is_online
                                ? 'bg-indigo-100 text-indigo-700 ring-indigo-200'
                                : 'bg-slate-100 text-slate-600 ring-slate-200' }}">
                            <span class="h-2 w-2 rounded-full {{ $user->is_online ? 'bg-indigo-500' : 'bg-slate-400' }}"></span>
                            {{ $user->is_online ? 'Online' : 'Offline' }}
                        </span>
                    </div>
                </div>
            </div>

            <div class="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm lg:col-span-2">
                <div class="grid grid-cols-1 gap-5 md:grid-cols-2">
                    <div>
                        <p class="text-xs font-medium uppercase text-slate-400">Username</p>
                        <p class="mt-1 text-base font-semibold text-slate-800">{{ $user->username }}</p>
                    </div>

                    <div>
                        <p class="text-xs font-medium uppercase text-slate-400">Phone</p>
                        <p class="mt-1 text-base font-semibold text-slate-800">{{ $user->phone ?: '—' }}</p>
                    </div>

                    <div>
                        <p class="text-xs font-medium uppercase text-slate-400">Email</p>
                        <p class="mt-1 text-base font-semibold text-slate-800">{{ $user->email ?: '—' }}</p>
                    </div>

                    <div>
                        <p class="text-xs font-medium uppercase text-slate-400">Joined Date</p>
                        <p class="mt-1 text-base font-semibold text-slate-800">
                            {{ optional($user->created_at)?->format('d M Y h:i A') ?? '—' }}
                        </p>
                    </div>

                    <div>
                        <p class="text-xs font-medium uppercase text-slate-400">Last Login</p>
                        <p class="mt-1 text-base font-semibold text-slate-800">
                            {{ optional($user->last_login_at)?->format('d M Y h:i A') ?? '—' }}
                        </p>
                    </div>

                    <div>
                        <p class="text-xs font-medium uppercase text-slate-400">Last Logout</p>
                        <p class="mt-1 text-base font-semibold text-slate-800">
                            {{ optional($user->last_logout_at)?->format('d M Y h:i A') ?? '—' }}
                        </p>
                    </div>

                    <div class="md:col-span-2">
                        <p class="text-xs font-medium uppercase text-slate-400">Last Activity</p>
                        <p class="mt-1 text-base font-semibold text-slate-800">
                            {{ optional($user->last_activity_at)?->format('d M Y h:i A') ?? '—' }}
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection