@extends('layouts.admin')
@section('title', $user->name)
@section('page-title', $user->name)
@section('content')
<div class="max-w-3xl space-y-6">
    <div class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
        <div class="flex items-start gap-4">
            @if($user->profile_image)
            <img src="{{ Storage::url($user->profile_image) }}" alt="" class="h-20 w-20 rounded-full object-cover">
            @else
            <span class="flex h-20 w-20 items-center justify-center rounded-full bg-slate-200 text-2xl font-medium text-slate-600">{{ substr($user->name, 0, 1) }}</span>
            @endif
            <div class="flex-1">
                <h2 class="text-lg font-semibold text-slate-800">{{ $user->name }}</h2>
                <p class="text-sm text-slate-600">{{ $user->email }}</p>
                <p class="text-sm text-slate-600">{{ $user->mobile ?? '-' }}</p>
                <p class="mt-1 text-sm">Role: <strong>{{ $user->getRoleNames()->first() }}</strong> | Branch: <strong>{{ $user->branch?->name ?? '-' }}</strong></p>
                <span class="inline-flex mt-2 rounded-full px-2.5 py-0.5 text-xs font-medium {{ $user->status === 'active' ? 'bg-emerald-100 text-emerald-800' : 'bg-slate-100 text-slate-800' }}">{{ $user->status }}</span>
            </div>
        </div>
        <div class="mt-6 flex gap-3">
            @can('edit users')<a href="{{ route('users.edit', $user) }}" class="rounded-lg bg-slate-800 px-4 py-2 text-sm font-medium text-white hover:bg-slate-700">Edit</a>@endcan
            <a href="{{ route('users.index') }}" class="rounded-lg border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">Back to list</a>
        </div>
    </div>
</div>
@endsection