@extends('dashboard.layout.main')

@section('content')
    @can('dashboard_cards')
        <section id="dashboard-analytics">

        <div class="row">
            <div class="col-xl-3 col-md-4 col-sm-6 st-cards">
                <div class="card text-center">
                    <div class="card-content">
                        <div class="card-body">
                            <div class="avatar bg-rgba-warning p-50 m-0 mb-1">
                                <div class="avatar-content">
                                    <i class="fas fa-users text-black-50 font-medium-5"></i>
                                </div>
                            </div>
                            <h2 class="text-bold-700">{{ $admins+$users+$shops }}</h2>
                            <p class="mb-0 line-ellipsis">@lang('global.all_users_count')</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-md-4 col-sm-6 st-cards">
                <a href="{{ route('admins.index') }}" class="card-link-color">
                    <div class="card text-center">
                    <div class="card-content">
                        <div class="card-body">
                            <div class="avatar bg-rgba-warning p-50 m-0 mb-1">
                                <div class="avatar-content">
                                    <i class="fas fa-user-shield text-black-50 font-medium-5"></i>
                                </div>
                            </div>
                            <h2 class="text-bold-700">{{ $admins }}</h2>
                            <p class="mb-0 line-ellipsis">@lang('global.all_admins_count')</p>
                        </div>
                    </div>
                </div>
                </a>
            </div>
            <div class="col-xl-3 col-md-4 col-sm-6 st-cards">
                <a href="{{ route('shops.index') }}" class="card-link-color">
                    <div class="card text-center">
                        <div class="card-content">
                            <div class="card-body">
                                <div class="avatar bg-rgba-warning p-50 m-0 mb-1">
                                    <div class="avatar-content">
                                        <i class="fas fa-store text-black-50 font-medium-5"></i>
                                    </div>
                                </div>
                                <h2 class="text-bold-700">{{ $shops }}</h2>
                                <p class="mb-0 line-ellipsis">@lang('global.all_shops_count')</p>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-xl-3 col-md-4 col-sm-6 st-cards">
                <a href="{{ route('users.index') }}" class="card-link-color">
                    <div class="card text-center">
                        <div class="card-content">
                            <div class="card-body">
                                <div class="avatar bg-rgba-warning p-50 m-0 mb-1">
                                    <div class="avatar-content">
                                        <i class="fas fa-user-friends text-black-50 font-medium-5"></i>
                                    </div>
                                </div>
                                <h2 class="text-bold-700">{{ $users }}</h2>
                                <p class="mb-0 line-ellipsis">@lang('global.all_normal_users_count')</p>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-xl-3 col-md-4 col-sm-6 st-cards">
                <a href="" class="card-link-color">
                    <div class="card text-center">
                        <div class="card-content">
                            <div class="card-body">
                                <div class="avatar bg-rgba-warning p-50 m-0 mb-1">
                                    <div class="avatar-content">
                                        <i class="fas fa-badge-percent text-black-50 font-medium-5"></i>
                                    </div>
                                </div>
                                <h2 class="text-bold-700">{{ GetSetting('TotalPayment') }} @lang('global.qar')</h2>
                                <p class="mb-0 line-ellipsis">@lang('global.total_payment')</p>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-xl-3 col-md-4 col-sm-6 st-cards">
                <a href="{{ route('payment_subscription') }}" class="card-link-color">
                    <div class="card text-center">
                        <div class="card-content">
                            <div class="card-body">
                                <div class="avatar bg-rgba-warning p-50 m-0 mb-1">
                                    <div class="avatar-content">
                                        <i class="fa fa-money text-black-50 font-medium-5"></i>
                                    </div>
                                </div>
                                <h2 class="text-bold-700">{{ $activeSubscriptions }}</h2>
                                <p class="mb-0 line-ellipsis">@lang('global.active_subscriptions')</p>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-xl-3 col-md-4 col-sm-6 st-cards">
                <a href="{{ route('products.index') }}" class="card-link-color">
                    <div class="card text-center">
                        <div class="card-content">
                            <div class="card-body">
                                <div class="avatar bg-rgba-warning p-50 m-0 mb-1">
                                    <div class="avatar-content">
                                        <i class="fa fa-cubes text-black-50 font-medium-5"></i>
                                    </div>
                                </div>
                                <h2 class="text-bold-700">{{ $totalProduct }}</h2>
                                <p class="mb-0 line-ellipsis">@lang('global.total_products')</p>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-xl-3 col-md-4 col-sm-6 st-cards">
                <a href="{{ route('products.index', ['is_active'=>1]) }}" class="card-link-color">
                    <div class="card text-center">
                        <div class="card-content">
                            <div class="card-body">
                                <div class="avatar bg-rgba-warning p-50 m-0 mb-1">
                                    <div class="avatar-content">
                                        <i class="fa fa-cube text-black-50 font-medium-5"></i>
                                    </div>
                                </div>
                                <h2 class="text-bold-700">{{ $activeProduct }}</h2>
                                <p class="mb-0 line-ellipsis">@lang('global.active_products')</p>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
        </div>

    </section>
    @endcan

@endsection
@push('scripts')
    <script>
        $(function() {
            $('.st-cards .card').mouseenter(function (e){
                animateCSS(this, 'pulse')
            })
        })
    </script>
@endpush