@extends('layouts.app')

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

@push('styles')
<style>
h1 { color: var(--text-primary); }
p.text-secondary { color: var(--text-secondary); }
.btn-ghost { background: transparent; color: var(--text-secondary); border: 1px solid var(--border-color); }
.btn-ghost:hover { background: var(--accent-light); color: var(--text-primary); }
</style>
@endpush

@section('content')
@can('view_user_report')
@php $currency = config('settings.currency_symbol', '$'); @endphp

<div class="mb-8 fade-in">
    <div class="flex items-center justify-between">
        <div class="flex items-center gap-4">
            <div class="h-14 w-1 bg-gradient-to-b from-sky-400 to-sky-600 rounded-full"></div>
            <div>
                <h1 class="text-3xl font-bold tracking-tight">User Report</h1>
                <p class="text-secondary mt-1">View system users, roles, and activity metrics</p>
            </div>
        </div>
        <div class="flex gap-2">
            <a href="{{ route('reports.users.pdf', request()->query()) }}" class="btn-primary px-4 py-2.5 rounded-xl flex items-center gap-2 text-sm font-medium transition-all">
                <i class="fas fa-file-pdf"></i> PDF
            </a>
        </div>
    </div>
</div>

<div class="table-container rounded-2xl p-4 mb-8 fade-in">
    <form method="GET" class="space-y-4">
        <div class="flex flex-wrap items-end gap-4">
            <div class="flex-1 min-w-[200px]">
                <label class="block text-xs text-slate-400 mb-1.5 font-medium">User</label>
                <select name="user_id" class="input-modern rounded-lg px-3 py-2 text-sm">
                    <option value="">All Users (Summary)</option>
                    @foreach($allUsers as $u)
                        <option value="{{ $u->id }}" {{ $userId == $u->id ? 'selected' : '' }}>{{ $u->name }} ({{ $u->role->label ?? $u->role->name ?? 'N/A' }})</option>
                    @endforeach
                </select>
            </div>
            <div class="flex-1 min-w-[150px]">
                <label class="block text-xs text-slate-400 mb-1.5 font-medium">Role</label>
                <select name="role_id" class="input-modern rounded-lg px-3 py-2 text-sm">
                    <option value="">All Roles</option>
                    @foreach($roles as $role)
                        <option value="{{ $role->id }}" {{ $roleId == $role->id ? 'selected' : '' }}>{{ $role->label ?? $role->name }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block text-xs text-slate-400 mb-1.5 font-medium">Status</label>
                <select name="status" class="input-modern rounded-lg px-3 py-2 text-sm">
                    <option value="">All</option>
                    <option value="active" {{ $status === 'active' ? 'selected' : '' }}>Active</option>
                    <option value="inactive" {{ $status === 'inactive' ? 'selected' : '' }}>Inactive</option>
                </select>
            </div>
            <div>
                <label class="block text-xs text-slate-400 mb-1.5 font-medium">From</label>
                <input type="date" name="date_from" value="{{ $dateFrom }}" class="input-modern rounded-lg px-3 py-2 text-sm">
            </div>
            <div>
                <label class="block text-xs text-slate-400 mb-1.5 font-medium">To</label>
                <input type="date" name="date_to" value="{{ $dateTo }}" class="input-modern rounded-lg px-3 py-2 text-sm">
            </div>
            @include('reports.partials.branch-filter')
            <button type="submit" class="btn-primary px-5 py-2 rounded-lg text-sm font-medium transition-colors">
                <i class="fas fa-search mr-1"></i> View Report
            </button>
        </div>
    </form>
</div>

@if($selectedUser)
<div class="mb-6 fade-in">
    <div class="table-container rounded-2xl p-6">
        <div class="flex items-center gap-4 mb-4">
            <div class="w-14 h-14 rounded-full bg-gradient-to-br from-sky-400 to-purple-500 flex items-center justify-center text-white text-lg font-bold">
                {{ strtoupper(substr($selectedUser->name, 0, 1)) }}
            </div>
            <div>
                <h2 class="text-xl font-bold text-white">{{ $selectedUser->name }}</h2>
                <p class="text-sm text-slate-400">{{ $selectedUser->email ?? '' }} {{ $selectedUser->phone ? '| ' . $selectedUser->phone : '' }}</p>
                <div class="flex items-center gap-2 mt-1">
                    <span class="px-2.5 py-0.5 text-xs font-medium rounded-full bg-indigo-500/20 text-indigo-300">{{ $selectedUser->role->label ?? $selectedUser->role->name ?? 'N/A' }}</span>
                    @if($selectedUser->is_active)
                        <span class="px-2.5 py-0.5 text-xs font-medium rounded-full bg-emerald-500/20 text-emerald-300">Active</span>
                    @else
                        <span class="px-2.5 py-0.5 text-xs font-medium rounded-full bg-red-500/20 text-red-300">Inactive</span>
                    @endif
                    @if($selectedUser->branch_id)
                        <span class="px-2.5 py-0.5 text-xs font-medium rounded-full bg-cyan-500/20 text-cyan-300">
                            <i class="fas fa-store mr-1"></i>{{ $selectedUser->branch->name ?? 'Branch #' . $selectedUser->branch_id }}
                        </span>
                    @endif
                </div>
            </div>
        </div>
        <div class="grid grid-cols-2 sm:grid-cols-4 gap-3">
            <div class="rounded-xl bg-slate-700/30 p-3 text-center">
                <p class="text-2xl font-bold text-emerald-400">{{ $userSales->count() }}</p>
                <p class="text-xs text-slate-400">Sales</p>
            </div>
            <div class="rounded-xl bg-slate-700/30 p-3 text-center">
                <p class="text-2xl font-bold text-orange-400">{{ $userPurchases->count() }}</p>
                <p class="text-xs text-slate-400">Purchases</p>
            </div>
            <div class="rounded-xl bg-slate-700/30 p-3 text-center">
                <p class="text-2xl font-bold text-red-400">{{ $userExpenses->count() }}</p>
                <p class="text-xs text-slate-400">Expenses</p>
            </div>
            <div class="rounded-xl bg-slate-700/30 p-3 text-center">
                <p class="text-2xl font-bold text-purple-400">{{ $userProjectTransactions->count() }}</p>
                <p class="text-xs text-slate-400">Project Txns</p>
            </div>
        </div>
    </div>
</div>

@if($userSales->count() > 0)
<div class="table-container rounded-2xl overflow-hidden fade-in mb-6">
    <div class="px-5 py-4" style="border-bottom: 1px solid var(--border-color);">
        <i class="fas fa-shopping-cart text-emerald-400"></i>
        <h3 class="text-sm font-semibold text-white">Sales Created by {{ $selectedUser->name }}</h3>
        <span class="ml-auto text-xs text-slate-400">{{ $dateFrom }} to {{ $dateTo }}</span>
    </div>
    <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-slate-700/50">
            <thead class="bg-slate-700/30">
                <tr>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-slate-400 uppercase">Invoice</th>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-slate-400 uppercase">Customer</th>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-slate-400 uppercase">Branch</th>
                    <th class="px-4 py-3 text-right text-xs font-semibold text-slate-400 uppercase">Amount</th>
                    <th class="px-4 py-3 text-right text-xs font-semibold text-slate-400 uppercase">Paid</th>
                    <th class="px-4 py-3 text-center text-xs font-semibold text-slate-400 uppercase">Status</th>
                    <th class="px-4 py-3 text-right text-xs font-semibold text-slate-400 uppercase">Date</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-700/50">
                @foreach($userSales as $sale)
                <tr class="hover:bg-slate-700/20 transition-colors">
                    <td class="px-4 py-3 text-sm text-sky-400 font-mono">{{ $sale->invoice_no }}</td>
                    <td class="px-4 py-3 text-sm text-slate-300">{{ $sale->customer->name ?? 'Walk-in' }}</td>
                    <td class="px-4 py-3 text-sm text-slate-400">{{ $sale->branch->name ?? 'N/A' }}</td>
                    <td class="px-4 py-3 text-sm text-slate-300 text-right">{{ $currency }} {{ number_format($sale->total_amount, 2) }}</td>
                    <td class="px-4 py-3 text-sm text-slate-300 text-right">{{ $currency }} {{ number_format($sale->paid_amount, 2) }}</td>
                    <td class="px-4 py-3 text-center">
                        @php $statusClass = $sale->payment_status == 'paid' ? 'emerald' : ($sale->payment_status == 'partial' ? 'amber' : 'red'); @endphp
                        <span class="px-2 py-0.5 text-xs font-medium rounded-full bg-{{ $statusClass }}-500/20 text-{{ $statusClass }}-300">{{ ucfirst($sale->payment_status) }}</span>
                    </td>
                    <td class="px-4 py-3 text-sm text-slate-400 text-right">{{ $sale->created_at->format('M d, Y') }}</td>
                </tr>
                @endforeach
            </tbody>
            <tfoot class="bg-slate-700/20">
                <tr>
                    <td colspan="3" class="px-4 py-3 text-sm font-semibold text-white">Total</td>
                    <td class="px-4 py-3 text-sm font-semibold text-emerald-400 text-right">{{ $currency }} {{ number_format($userSales->sum('total_amount'), 2) }}</td>
                    <td class="px-4 py-3 text-sm font-semibold text-slate-300 text-right">{{ $currency }} {{ number_format($userSales->sum('paid_amount'), 2) }}</td>
                    <td colspan="2"></td>
                </tr>
            </tfoot>
        </table>
    </div>
</div>
@endif

@if($userPurchases->count() > 0)
<div class="table-container rounded-2xl overflow-hidden fade-in mb-6">
    <div class="px-5 py-4" style="border-bottom: 1px solid var(--border-color);">
        <i class="fas fa-truck-loading text-orange-400"></i>
        <h3 class="text-sm font-semibold text-white">Purchases Created by {{ $selectedUser->name }}</h3>
        <span class="ml-auto text-xs text-slate-400">{{ $dateFrom }} to {{ $dateTo }}</span>
    </div>
    <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-slate-700/50">
            <thead class="bg-slate-700/30">
                <tr>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-slate-400 uppercase">Purchase No</th>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-slate-400 uppercase">Supplier</th>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-slate-400 uppercase">Branch</th>
                    <th class="px-4 py-3 text-right text-xs font-semibold text-slate-400 uppercase">Amount</th>
                    <th class="px-4 py-3 text-right text-xs font-semibold text-slate-400 uppercase">Paid</th>
                    <th class="px-4 py-3 text-right text-xs font-semibold text-slate-400 uppercase">Date</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-700/50">
                @foreach($userPurchases as $purchase)
                <tr class="hover:bg-slate-700/20 transition-colors">
                    <td class="px-4 py-3 text-sm text-sky-400 font-mono">{{ $purchase->purchase_no }}</td>
                    <td class="px-4 py-3 text-sm text-slate-300">{{ $purchase->supplier->name ?? 'N/A' }}</td>
                    <td class="px-4 py-3 text-sm text-slate-400">{{ $purchase->branch->name ?? 'N/A' }}</td>
                    <td class="px-4 py-3 text-sm text-slate-300 text-right">{{ $currency }} {{ number_format($purchase->total_amount, 2) }}</td>
                    <td class="px-4 py-3 text-sm text-slate-300 text-right">{{ $currency }} {{ number_format($purchase->paid_amount, 2) }}</td>
                    <td class="px-4 py-3 text-sm text-slate-400 text-right">{{ $purchase->created_at->format('M d, Y') }}</td>
                </tr>
                @endforeach
            </tbody>
            <tfoot class="bg-slate-700/20">
                <tr>
                    <td colspan="3" class="px-4 py-3 text-sm font-semibold text-white">Total</td>
                    <td class="px-4 py-3 text-sm font-semibold text-orange-400 text-right">{{ $currency }} {{ number_format($userPurchases->sum('total_amount'), 2) }}</td>
                    <td class="px-4 py-3 text-sm font-semibold text-slate-300 text-right">{{ $currency }} {{ number_format($userPurchases->sum('paid_amount'), 2) }}</td>
                    <td></td>
                </tr>
            </tfoot>
        </table>
    </div>
</div>
@endif

@if($userExpenses->count() > 0)
<div class="table-container rounded-2xl overflow-hidden fade-in mb-6">
    <div class="px-5 py-4" style="border-bottom: 1px solid var(--border-color);">
        <i class="fas fa-receipt text-red-400"></i>
        <h3 class="text-sm font-semibold text-white">Expenses Created by {{ $selectedUser->name }}</h3>
        <span class="ml-auto text-xs text-slate-400">{{ $dateFrom }} to {{ $dateTo }}</span>
    </div>
    <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-slate-700/50">
            <thead class="bg-slate-700/30">
                <tr>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-slate-400 uppercase">Title</th>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-slate-400 uppercase">Category</th>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-slate-400 uppercase">Branch</th>
                    <th class="px-4 py-3 text-right text-xs font-semibold text-slate-400 uppercase">Amount</th>
                    <th class="px-4 py-3 text-center text-xs font-semibold text-slate-400 uppercase">Status</th>
                    <th class="px-4 py-3 text-right text-xs font-semibold text-slate-400 uppercase">Date</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-700/50">
                @foreach($userExpenses as $expense)
                <tr class="hover:bg-slate-700/20 transition-colors">
                    <td class="px-4 py-3 text-sm text-slate-300">{{ $expense->title }}</td>
                    <td class="px-4 py-3 text-sm text-slate-400">{{ $expense->category->name ?? 'N/A' }}</td>
                    <td class="px-4 py-3 text-sm text-slate-400">{{ $expense->branch->name ?? 'N/A' }}</td>
                    <td class="px-4 py-3 text-sm text-slate-300 text-right">{{ $currency }} {{ number_format($expense->amount, 2) }}</td>
                    <td class="px-4 py-3 text-center">
                        @php $cls = $expense->status == 'approved' ? 'emerald' : ($expense->status == 'pending' ? 'amber' : 'red'); @endphp
                        <span class="px-2 py-0.5 text-xs font-medium rounded-full bg-{{ $cls }}-500/20 text-{{ $cls }}-300">{{ ucfirst($expense->status) }}</span>
                    </td>
                    <td class="px-4 py-3 text-sm text-slate-400 text-right">{{ $expense->expense_date->format('M d, Y') }}</td>
                </tr>
                @endforeach
            </tbody>
            <tfoot class="bg-slate-700/20">
                <tr>
                    <td colspan="3" class="px-4 py-3 text-sm font-semibold text-white">Total</td>
                    <td class="px-4 py-3 text-sm font-semibold text-red-400 text-right">{{ $currency }} {{ number_format($userExpenses->sum('amount'), 2) }}</td>
                    <td colspan="2"></td>
                </tr>
            </tfoot>
        </table>
    </div>
</div>
@endif

@if($userProjectTransactions->count() > 0)
<div class="table-container rounded-2xl overflow-hidden fade-in mb-6">
    <div class="px-5 py-4" style="border-bottom: 1px solid var(--border-color);">
        <i class="fas fa-project-diagram text-purple-400"></i>
        <h3 class="text-sm font-semibold text-white">Project Transactions by {{ $selectedUser->name }}</h3>
        <span class="ml-auto text-xs text-slate-400">{{ $dateFrom }} to {{ $dateTo }}</span>
    </div>
    <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-slate-700/50">
            <thead class="bg-slate-700/30">
                <tr>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-slate-400 uppercase">Project</th>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-slate-400 uppercase">Type</th>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-slate-400 uppercase">Description</th>
                    <th class="px-4 py-3 text-right text-xs font-semibold text-slate-400 uppercase">Amount</th>
                    <th class="px-4 py-3 text-right text-xs font-semibold text-slate-400 uppercase">Date</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-700/50">
                @foreach($userProjectTransactions as $txn)
                <tr class="hover:bg-slate-700/20 transition-colors">
                    <td class="px-4 py-3 text-sm text-slate-300">{{ $txn->project->name ?? 'N/A' }}</td>
                    <td class="px-4 py-3">
                        <span class="px-2 py-0.5 text-xs font-medium rounded-full {{ $txn->type == 'income' ? 'bg-emerald-500/20 text-emerald-300' : 'bg-red-500/20 text-red-300' }}">
                            {{ ucfirst($txn->type) }}
                        </span>
                    </td>
                    <td class="px-4 py-3 text-sm text-slate-400 max-w-[200px] truncate">{{ $txn->description ?? '-' }}</td>
                    <td class="px-4 py-3 text-sm text-slate-300 text-right">{{ $currency }} {{ number_format($txn->amount, 2) }}</td>
                    <td class="px-4 py-3 text-sm text-slate-400 text-right">{{ $txn->date->format('M d, Y') }}</td>
                </tr>
                @endforeach
            </tbody>
            <tfoot class="bg-slate-700/20">
                @php
                    $incomeTotal = $userProjectTransactions->where('type', 'income')->sum('amount');
                    $expenseTotal = $userProjectTransactions->where('type', 'expense')->sum('amount');
                @endphp
                <tr>
                    <td colspan="3" class="px-4 py-3 text-sm font-semibold text-white">Income Total</td>
                    <td class="px-4 py-3 text-sm font-semibold text-emerald-400 text-right">{{ $currency }} {{ number_format($incomeTotal, 2) }}</td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan="3" class="px-4 py-3 text-sm font-semibold text-white">Expense Total</td>
                    <td class="px-4 py-3 text-sm font-semibold text-red-400 text-right">{{ $currency }} {{ number_format($expenseTotal, 2) }}</td>
                    <td></td>
                </tr>
            </tfoot>
        </table>
    </div>
</div>
@endif
@endif

@if(!$selectedUser)
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
    <div class="stat-card rounded-2xl p-5 fade-in">
        <div class="flex items-center gap-3 mb-3">
            <div class="w-10 h-10 rounded-xl bg-sky-500/20 flex items-center justify-center">
                <i class="fas fa-users text-sky-400"></i>
            </div>
            <div>
                <p class="text-xs text-slate-400 font-medium">Total Users</p>
                <p class="text-2xl font-bold text-white">{{ $totalUsers }}</p>
            </div>
        </div>
        <div class="text-xs text-slate-500">System users</div>
    </div>
    <div class="stat-card rounded-2xl p-5 fade-in">
        <div class="flex items-center gap-3 mb-3">
            <div class="w-10 h-10 rounded-xl bg-emerald-500/20 flex items-center justify-center">
                <i class="fas fa-check-circle text-emerald-400"></i>
            </div>
            <div>
                <p class="text-xs text-slate-400 font-medium">Active</p>
                <p class="text-2xl font-bold text-emerald-400">{{ $activeUsers }}</p>
            </div>
        </div>
        <div class="text-xs text-slate-500">{{ $activeUsers > 0 ? number_format(($activeUsers / max($totalUsers, 1)) * 100, 1) . '% of total' : 'No active users' }}</div>
    </div>
    <div class="stat-card rounded-2xl p-5 fade-in">
        <div class="flex items-center gap-3 mb-3">
            <div class="w-10 h-10 rounded-xl bg-red-500/20 flex items-center justify-center">
                <i class="fas fa-pause-circle text-red-400"></i>
            </div>
            <div>
                <p class="text-xs text-slate-400 font-medium">Inactive</p>
                <p class="text-2xl font-bold text-red-400">{{ $inactiveUsers }}</p>
            </div>
        </div>
        <div class="text-xs text-slate-500">{{ $inactiveUsers > 0 ? number_format(($inactiveUsers / max($totalUsers, 1)) * 100, 1) . '% of total' : 'All users active' }}</div>
    </div>
    <div class="stat-card rounded-2xl p-5 fade-in">
        <div class="flex items-center gap-3 mb-3">
            <div class="w-10 h-10 rounded-xl bg-purple-500/20 flex items-center justify-center">
                <i class="fas fa-user-shield text-purple-400"></i>
            </div>
            <div>
                <p class="text-xs text-slate-400 font-medium">Roles</p>
                <p class="text-2xl font-bold text-white">{{ $roles->count() }}</p>
            </div>
        </div>
        <div class="text-xs text-slate-500">{{ $roles->where('is_active', true)->count() }} active</div>
    </div>
</div>

<div class="table-container rounded-2xl overflow-hidden fade-in">
    <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-slate-700/50">
            <thead class="bg-slate-700/30">
                <tr>
                    <th class="px-5 py-3 text-left text-xs font-semibold text-slate-400 uppercase tracking-wider">User</th>
                    <th class="px-5 py-3 text-left text-xs font-semibold text-slate-400 uppercase tracking-wider">Email / Phone</th>
                    <th class="px-5 py-3 text-left text-xs font-semibold text-slate-400 uppercase tracking-wider">Role</th>
                    <th class="px-5 py-3 text-center text-xs font-semibold text-slate-400 uppercase tracking-wider">Status</th>
                    <th class="px-5 py-3 text-right text-xs font-semibold text-slate-400 uppercase tracking-wider">Sales</th>
                    <th class="px-5 py-3 text-right text-xs font-semibold text-slate-400 uppercase tracking-wider">Purchases</th>
                    <th class="px-5 py-3 text-right text-xs font-semibold text-slate-400 uppercase tracking-wider">Expenses</th>
                    <th class="px-5 py-3 text-right text-xs font-semibold text-slate-400 uppercase tracking-wider">Created</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-700/50">
                @forelse($users as $user)
                <tr class="hover:bg-slate-700/20 transition-colors">
                    <td class="px-5 py-4">
                        <div class="flex items-center gap-3">
                            <div class="w-8 h-8 rounded-full bg-gradient-to-br from-sky-400 to-purple-500 flex items-center justify-center text-white text-xs font-bold flex-shrink-0">
                                {{ strtoupper(substr($user->name, 0, 1)) }}
                            </div>
                            <div>
                                <p class="text-sm font-medium text-white">{{ $user->name }}</p>
                            </div>
                        </div>
                    </td>
                    <td class="px-5 py-4">
                        <div class="text-sm text-slate-300">{{ $user->email ?? '-' }}</div>
                        <div class="text-xs text-slate-500">{{ $user->phone ?? '' }}</div>
                    </td>
                    <td class="px-5 py-4">
                        <span class="px-2.5 py-1 text-xs font-medium rounded-full bg-indigo-500/20 text-indigo-300">
                            {{ $user->role->label ?? $user->role->name ?? 'N/A' }}
                        </span>
                    </td>
                    <td class="px-5 py-4 text-center">
                        @if($user->is_active)
                            <span class="px-2 py-0.5 text-xs font-medium rounded-full bg-emerald-500/20 text-emerald-300">Active</span>
                        @else
                            <span class="px-2 py-0.5 text-xs font-medium rounded-full bg-red-500/20 text-red-300">Inactive</span>
                        @endif
                    </td>
                    <td class="px-5 py-4 text-right text-sm text-slate-300">{{ $user->sales_count }}</td>
                    <td class="px-5 py-4 text-right text-sm text-slate-300">{{ $user->purchases_count }}</td>
                    <td class="px-5 py-4 text-right text-sm text-slate-300">{{ $user->expenses_count }}</td>
                    <td class="px-5 py-4 text-right text-sm text-slate-400">{{ $user->created_at->format('M d, Y') }}</td>
                </tr>
                @empty
                <tr>
                    <td colspan="8" class="px-5 py-16 text-center">
                        <div class="w-14 h-14 mx-auto mb-3 rounded-2xl bg-slate-700/50 flex items-center justify-center">
                            <i class="fas fa-users text-2xl text-slate-500"></i>
                        </div>
                        <p class="text-slate-400 font-medium">No users found</p>
                        <p class="text-slate-500 text-sm mt-1">Try adjusting your filters</p>
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

@if($users->count() > 0)
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4 mt-6">
    <div class="stat-card rounded-2xl p-5 fade-in">
        <h3 class="text-sm font-semibold text-white mb-4 flex items-center gap-2">
            <i class="fas fa-chart-pie text-sky-400"></i> Users by Role
        </h3>
        @php $roleCounts = $users->groupBy(fn($u) => $u->role->label ?? $u->role->name ?? 'Unknown'); @endphp
        <div class="space-y-3">
            @foreach($roleCounts as $roleName => $roleUsers)
            <div>
                <div class="flex justify-between text-sm mb-1">
                    <span class="text-slate-300">{{ $roleName }}</span>
                    <span class="text-slate-400">{{ $roleUsers->count() }}</span>
                </div>
                <div class="w-full h-2 bg-slate-700/50 rounded-full overflow-hidden">
                    <div class="h-full rounded-full bg-sky-500" style="width: {{ ($roleUsers->count() / max($users->count(), 1)) * 100 }}%"></div>
                </div>
            </div>
            @endforeach
        </div>
    </div>
    <div class="stat-card rounded-2xl p-5 fade-in">
        <h3 class="text-sm font-semibold text-white mb-4 flex items-center gap-2">
            <i class="fas fa-chart-bar text-sky-400"></i> Activity Summary
        </h3>
        @php
            $totalAllSales = $users->sum('sales_count');
            $totalAllPurchases = $users->sum('purchases_count');
            $totalAllExpenses = $users->sum('expenses_count');
        @endphp
        <div class="space-y-4">
            <div class="flex items-center justify-between p-3 rounded-xl bg-slate-700/30">
                <div class="flex items-center gap-3">
                    <div class="w-8 h-8 rounded-lg bg-emerald-500/20 flex items-center justify-center">
                        <i class="fas fa-shopping-cart text-emerald-400 text-xs"></i>
                    </div>
                    <span class="text-sm text-slate-300">Total Sales Created</span>
                </div>
                <span class="text-lg font-bold text-emerald-400">{{ $totalAllSales }}</span>
            </div>
            <div class="flex items-center justify-between p-3 rounded-xl bg-slate-700/30">
                <div class="flex items-center gap-3">
                    <div class="w-8 h-8 rounded-lg bg-orange-500/20 flex items-center justify-center">
                        <i class="fas fa-truck-loading text-orange-400 text-xs"></i>
                    </div>
                    <span class="text-sm text-slate-300">Total Purchases Created</span>
                </div>
                <span class="text-lg font-bold text-orange-400">{{ $totalAllPurchases }}</span>
            </div>
            <div class="flex items-center justify-between p-3 rounded-xl bg-slate-700/30">
                <div class="flex items-center gap-3">
                    <div class="w-8 h-8 rounded-lg bg-red-500/20 flex items-center justify-center">
                        <i class="fas fa-receipt text-red-400 text-xs"></i>
                    </div>
                    <span class="text-sm text-slate-300">Total Expenses Created</span>
                </div>
                <span class="text-lg font-bold text-red-400">{{ $totalAllExpenses }}</span>
            </div>
        </div>
    </div>
</div>
@endif
@endif
@endcan
@endsection