@extends('dashboard.layouts.base')

@section('title', 'لوحة إحصائيات النظام')

@section('content')
            <div class="col-12">
        <div class="card ">
            <div class="card-header d-flex justify-content-between align-items-center w-100" style="direction: rtl;">
                <h3 class="card-title mb-0">📊 لوحة إحصائيات النظام</h3>
                {{-- 🚫 No Add button --}}
            </div>

            <div class="card-body">
                <div id="example2_wrapper" class="dataTables_wrapper dt-bootstrap4">
        <div class="row">

            <div class="col-lg-3 col-6">
                <div class="small-box bg-info">
                    <div class="inner">
                        <h3>{{ $usersCount }}</h3>
                        <p>عدد المستخدمين</p>
                    </div>
                    <div class="icon">
                        <i class="ion ion-person"></i>
                    </div>
                    {{-- <a href="{{ route('dashboard.users.index') }}" class="small-box-footer">
                        تفاصيل أكثر <i class="fas fa-arrow-circle-left"></i>
                    </a> --}}
                </div>
            </div>
            
            <div class="col-lg-3 col-6">
                <div class="small-box bg-danger">
                    <div class="inner">
                        <h3>{{ $blockedUsersCount }}</h3>
                        <p>المستخدمين المحظورين</p>
                    </div>
                    <div class="icon">
                        <i class="ion ion-close-circled"></i>
                    </div>
                    {{-- <a href="{{ route('dashboard.users.index') }}" class="small-box-footer">
                        تفاصيل أكثر <i class="fas fa-arrow-circle-left"></i>
                    </a> --}}
                </div>
            </div>

            <div class="col-lg-3 col-6">
                <div class="small-box bg-success">
                    <div class="inner">
                        <h3>{{ $chatsCount }}</h3>
                        <p>عدد المحادثات</p>
                    </div>
                    <div class="icon">
                        <i class="ion ion-chatbubbles"></i>
                    </div>
                    {{-- <a href="{{ route('dashboard.reported-chats.index') }}" class="small-box-footer">
                        تفاصيل أكثر <i class="fas fa-arrow-circle-left"></i>
                    </a> --}}
                </div>
            </div>

            <div class="col-lg-3 col-6">
                <div class="small-box bg-warning">
                    <div class="inner">
                        <h3>{{ $featuredUsersCount }}</h3>
                        <p>المستخدمون المميزون</p>
                    </div>
                    <div class="icon">
                        <i class="ion ion-star"></i>
                    </div>
                    {{-- <a href="{{ route('dashboard.users.index') }}" class="small-box-footer">
                        تفاصيل أكثر <i class="fas fa-arrow-circle-left"></i>
                    </a> --}}
                </div>
            </div>

            <div class="col-lg-3 col-6">
                <div class="small-box bg-primary">
                    <div class="inner">
                        <h3>{{ $onlineUsersCount }}</h3>
                        <p>المتواجدون الآن</p>
                    </div>
                    <div class="icon">
                        <i class="ion ion-ios-pulse-strong"></i>
                    </div>
                    {{-- <a href="{{ route('dashboard.users.index') }}" class="small-box-footer">
                        تفاصيل أكثر <i class="fas fa-arrow-circle-left"></i>
                    </a> --}}
                </div>
            </div>

            <div class="col-lg-3 col-6">
                <div class="small-box bg-secondary">
                    <div class="inner">
                        <h3>{{ $maleUsersCount }}</h3>
                        <p>عدد الذكور</p>
                    </div>
                    <div class="icon">
                        <i class="ion ion-male"></i>
                    </div>
                    {{-- <a href="{{ route('dashboard.users.index') }}" class="small-box-footer">
                        تفاصيل أكثر <i class="fas fa-arrow-circle-left"></i>
                    </a> --}}
                </div>
            </div>

            <div class="col-lg-3 col-6">
                <div class="small-box bg-pink">
                    <div class="inner">
                        <h3>{{ $femaleUsersCount }}</h3>
                        <p>عدد الإناث</p>
                    </div>
                    <div class="icon">
                        <i class="ion ion-female"></i>
                    </div>
                    {{-- <a href="{{ route('dashboard.users.index') }}" class="small-box-footer">
                        تفاصيل أكثر <i class="fas fa-arrow-circle-left"></i>
                    </a> --}}
                </div>
            </div>

        </div>

</div>
@endsection