@extends('layouts.page') <!-- Extend your layout -->
<link rel="stylesheet" href="{{ asset('asset/css/style.css') }}">
@section('title', 'Support Team') <!-- Dynamic page title -->
@section('content')
    @php
        $pageName = 'Support Team'; // Set the dynamic page name
        $verifiedCount = $users->where('is_verified', true)->count();
    @endphp

        <!-- Stats Banner (mirrors the dashboard / Issues page banner) -->
    <div class="page-banner">
        <div>
            <h2>Everyone currently handling support across the platform.</h2>
        </div>
        <div class="page-stat-group">
            <div class="page-stat-pill">
                <i class="bi bi-people"></i>
                <span>
                    <span class="stat-value">{{ $users->count() }}</span>
                    <span class="stat-label">Members</span>
                </span>
            </div>
{{--            <div class="page-stat-pill">--}}
{{--                <i class="bi bi-patch-check"></i>--}}
{{--                <span>--}}
{{--                    <span class="stat-value">{{ $verifiedCount }}</span>--}}
{{--                    <span class="stat-label">Verified</span>--}}
{{--                </span>--}}
{{--            </div>--}}
        </div>
    </div>

    <div class="container py-2">
        @if($users->isEmpty())
            <div class="d-flex flex-column justify-content-center align-items-center py-5">
                <i class="bi bi-people" style="font-size: 48px; color: var(--ink-soft, #5c7a6f);"></i>
                <p class="fs-5 text-secondary mt-3">No Support Team Members</p>
            </div>
        @else
            <div class="row g-4">
                @foreach ($users as $user)
                    <div class="col-md-6 col-lg-4">
                        <div class="user-card">
                            <div class="user-card-cover"></div>

                            <div class="user-avatar-wrap">
                                <img src="{{ asset($user->avatar ?? 'default_user.png') }}"
                                     srcset="{{ asset($user->avatar) }} 2x"
                                     alt="{{ $user->name }}"
                                     class="user-avatar">
                                <span class="user-status-dot"></span>
                            </div>

                            <div class="user-card-body">
                                <div class="user-info">
                                    <p class="user-name">
                                        {{ $user->name }}
                                        @if($user->is_verified) <!-- Show badge if verified -->
                                        <img src="{{ asset('verified_badge.png') }}"
                                             alt="Verified"
                                             class="verified-badge">
                                        @endif
                                    </p>
                                    <p class="user-email">
                                        <i class="bi bi-envelope"></i><span>{{ $user->email ?? 'N/A' }}</span>
                                    </p>

                                    <div class="user-card-footer">
                                        <div>
                                            @foreach ($user->roles as $role)
                                                <span class="badge">{{ $roleNameMap[$role->name] ?? $role->name }}</span>
                                            @endforeach
                                        </div>
{{--                                        <span class="user-card-id">#{{ str_pad($user->id, 3, '0', STR_PAD_LEFT) }}</span>--}}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        @endif
    </div>
@endsection