@extends('admin.layouts.app')
@section('title', 'User — ' . $user->name)
@section('breadcrumb')
    <span>/</span>
    <a href="{{ route('admin.users.index') }}" style="color:inherit;text-decoration:none;">Users</a>
    <span>/</span> {{ $user->name }}
@endsection

@section('content')
<div class="page-header">
    <div>
        <h1>{{ $user->name }}</h1>
        <p class="page-subtitle">User ID: {{ $user->user_id }}</p>
    </div>
    <div class="d-flex gap-2">
        @if(auth()->user()->hasPermission('users.edit'))
        <a href="{{ route('admin.users.edit', $user) }}" class="btn btn-primary">
            <i class="fas fa-edit me-2"></i>Edit
        </a>
        @endif
        <a href="{{ route('admin.users.index') }}" class="btn btn-outline-secondary">
            <i class="fas fa-arrow-left me-2"></i>Back
        </a>
    </div>
</div>

<div class="row g-4">
    <!-- Profile Card -->
    <div class="col-lg-4">
        <div class="card text-center">
            <div class="card-body py-4">
                <img src="{{ $user->profile_image_url }}" width="90" height="90"
                    style="border-radius:50%;object-fit:cover;border:3px solid #3b82f6;" class="mb-3">
                <h5 class="mb-1 fw-700">{{ $user->name }}</h5>
                <p style="font-size:13px;color:#64748b;">{{ $user->designation ?? 'No Designation' }}</p>
                @php
                $roleColors=['super_admin'=>'danger','admin'=>'primary','manager'=>'info','csr_manager'=>'warning','accountant'=>'success','volunteer'=>'secondary','staff'=>'light'];
                @endphp
                <span class="badge bg-{{ $roleColors[$user->user_type] ?? 'secondary' }} mb-3">
                    {{ $user->role->name ?? ucfirst($user->user_type) }}
                </span>
                <div class="row g-2 text-start">
                    <div class="col-12">
                        <div style="font-size:12px;color:#94a3b8;font-weight:600;text-transform:uppercase;">User ID</div>
                        <code>{{ $user->user_id }}</code>
                    </div>
                    <div class="col-12">
                        <div style="font-size:12px;color:#94a3b8;font-weight:600;text-transform:uppercase;">Email</div>
                        <div style="font-size:13px;">{{ $user->email }}</div>
                    </div>
                    <div class="col-12">
                        <div style="font-size:12px;color:#94a3b8;font-weight:600;text-transform:uppercase;">Mobile</div>
                        <div style="font-size:13px;">+91 {{ $user->mobile }}</div>
                    </div>
                    <div class="col-12">
                        <div style="font-size:12px;color:#94a3b8;font-weight:600;text-transform:uppercase;">Department</div>
                        <div style="font-size:13px;">{{ $user->department->name ?? '—' }}</div>
                    </div>
                    <div class="col-12">
                        <div style="font-size:12px;color:#94a3b8;font-weight:600;text-transform:uppercase;">Status</div>
                        {!! $user->status_badge !!}
                    </div>
                    <div class="col-12">
                        <div style="font-size:12px;color:#94a3b8;font-weight:600;text-transform:uppercase;">Last Login</div>
                        <div style="font-size:12px;">
                            {{ $user->last_login_at ? $user->last_login_at->format('d M Y H:i') : 'Never' }}
                            @if($user->last_login_ip)
                                <span style="color:#94a3b8;">({{ $user->last_login_ip }})</span>
                            @endif
                        </div>
                    </div>
                    <div class="col-12">
                        <div style="font-size:12px;color:#94a3b8;font-weight:600;text-transform:uppercase;">Registered</div>
                        <div style="font-size:12px;">{{ $user->created_at->format('d M Y') }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Permissions -->
    <div class="col-lg-8">
        <div class="card">
            <div class="card-header d-flex align-items-center justify-content-between">
                <h6 class="mb-0 fw-700"><i class="fas fa-key text-warning me-2"></i>Granted Permissions</h6>
                <span class="badge bg-warning text-dark">{{ count($permissions) }} permissions</span>
            </div>
            <div class="card-body">
                @php
                    $grouped = collect($permissions)->groupBy(fn($slug) => explode('.', $slug)[0]);
                @endphp
                @foreach($grouped as $module => $slugs)
                <div class="mb-3">
                    <div style="font-size:11px;font-weight:700;color:#475569;text-transform:uppercase;letter-spacing:0.5px;margin-bottom:6px;">
                        {{ ucwords(str_replace('_', ' ', $module)) }}
                    </div>
                    <div class="d-flex flex-wrap gap-1">
                        @foreach($slugs as $slug)
                        <span class="badge" style="background:#eff6ff;color:#3b82f6;font-weight:500;">
                            {{ explode('.', $slug)[1] ?? $slug }}
                        </span>
                        @endforeach
                    </div>
                </div>
                @endforeach

                @if(empty($permissions))
                <div class="text-center text-muted py-3">
                    <i class="fas fa-lock d-block mb-2" style="font-size:24px;color:#cbd5e1;"></i>
                    No permissions granted
                </div>
                @endif
            </div>
            @if(auth()->user()->hasPermission('users.manage_permissions'))
            <div class="card-footer bg-white">
                <a href="{{ route('admin.users.access-control') }}?user_id={{ $user->id }}"
                    class="btn btn-sm btn-outline-warning">
                    <i class="fas fa-key me-1"></i>Manage Permissions
                </a>
            </div>
            @endif
        </div>
    </div>
</div>
@endsection