@extends('layouts.admin_layout.admin_layout')
@section('content')

<style>
    .user {
        background-color: #21272D;
    }
    .user:hover {
        background-color: #314055;
    }
    .premium-user {
        background-color: #21272D;
        
    }
    .premium-user:hover {
        background-color: #4C4A3B;
    }
    .free-user {
        background-color: #21272D;
    }
    .free-user:hover {
        background-color: #4B3F3B;
    }
    .pricing {
        background-color: #21272D;
    }
    .pricing:hover {
        background-color: #373555;
    }
    .admin {
        background-color: #21272D;
    }
    .admin:hover {
        background-color: #4C4A3B;
    }
    .all-countries {
        background-color: #21272D;
    }
    .all-countries:hover {
        background-color: #373555;
    }
    .all-servers {
        background-color: #21272D;
    }
    .all-servers:hover {
        background-color: #314055;
    }
</style>

<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper custom-content-wrapper">
    <!-- Content Header (Page header) -->
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0 text-white">Dashboard</h1>
                </div><!-- /.col -->
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="{{url('admin/dashboard')}}" style="color: #87888C;">Home</a></li>
                        <li class="breadcrumb-item text-white">Dashboard</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
    <!-- /.content-header -->

    <!-- Main content -->
    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-6 col-lg-3">
                    <a href="{{ url('admin/user_index') }}">
                        <div class="info-box user" style="display: flex; justify-content: center; align-items: center; padding: 22px;">
                            <div style="background-color: #314055; width: 70px; height: 70px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 1;">
                                <img src="{{ asset('icons/user.png') }}" style="color: red; height: 26px; width: 26px; z-index: 2;" alt="">
                            </div>
                            <div class="info-box-content ps-3">
                                <span class="info-box-text" style="color: #FFFFFF; font-size: 30px; font-weight: bold">{{$totalUser}}+</span>
                                <span class="" style="color: #87888C; margin: 0px">Total Users</span>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-6 col-lg-3">
                    <a href="{{ url('admin/user_index/pro') }}">
                        <div class="info-box premium-user" style="display: flex; justify-content: center; align-items: center; padding: 22px;">
                            <div style="background-color: #4C4A3B; width: 70px; height: 70px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 1;">
                                <img src="{{ asset('icons/premium-user.png') }}" style="color: #5B93FF; height: 26px; width: 26px; z-index: 2;" alt="">
                            </div>
                            <div class="info-box-content ps-3">
                                <span class="info-box-text" style="color: #FFFFFF; font-size: 30px; font-weight: bold">{{$premiumUser}}+</span>
                                <span class="" style="color: #87888C; margin: 0px">Premium Users</span>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-6 col-lg-3">
                    <a href="{{ url('admin/user_index/guest') }}">
                        <div class="info-box free-user" style="display: flex; justify-content: center; align-items: center; padding: 22px;">
                            <div style="background-color: #4B3F3B; width: 70px; height: 70px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 1;">
                                <img src="{{ asset('icons/free-user.png') }}" style="color: #5B93FF; height: 26px; width: 26px; z-index: 2;" alt="">
                            </div>
                            <div class="info-box-content ps-3">
                                <span class="info-box-text" style="color: #FFFFFF; font-size: 30px; font-weight: bold">{{$guestUser}}+</span>
                                <span class="" style="color: #87888C; margin: 0px">Free Users</span>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-6 col-lg-3">
                    <a href="{{ url('admin/packeg_index') }}">
                        <div class="info-box pricing" style="display: flex; justify-content: center; align-items: center; padding: 22px;">
                            <div style="background-color: #373555; width: 70px; height: 70px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 1;">
                                <img src="{{ asset('icons/pricing.png') }}" style="height: 26px; width: 26px; z-index: 2;" alt="">
                            </div>
                            <div class="info-box-content ps-3">
                                <span class="info-box-text" style="color: #FFFFFF; font-size: 30px; font-weight: bold">{{$totalPlane}}+</span>
                                <span class="" style="color: #87888C; margin: 0px">Manage Pricing</span>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-6 col-lg-3">
                    <a href="{{ url('admin/Aindex') }}">
                        <div class="info-box admin" style="display: flex; justify-content: center; align-items: center; padding: 22px;">
                            <div style="background-color: #4C4A3B; width: 70px; height: 70px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 1;">
                                <img src="{{ asset('icons/admin.png') }}" style="color: #5B93FF; height: 26px; width: 26px; z-index: 2;" alt="">
                            </div>
                            <div class="info-box-content ps-3">
                                <span class="info-box-text" style="color: #FFFFFF; font-size: 30px; font-weight: bold">{{$totalAdmins}}+</span>
                                <span class="" style="color: #87888C; margin: 0px">Total Admins</span>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-6 col-lg-3">
                    <a href="{{ url('admin/country') }}">
                        <div class="info-box all-countries" style="display: flex; justify-content: center; align-items: center; padding: 22px;">
                            <div style="background-color: #373555; width: 70px; height: 70px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 1;">
                                <img src="{{ asset('icons/country.png') }}" style="color: #5B93FF; height: 26px; width: 26px; z-index: 2;" alt="">
                            </div>
                            <div class="info-box-content ps-3">
                                <span class="info-box-text" style="color: #FFFFFF; font-size: 30px; font-weight: bold">{{$totalCountries}}+</span>
                                <span class="" style="color: #87888C; margin: 0px">All Countries</span>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-6 col-lg-3">
                    <a href="{{ url('admin/servers') }}">
                        <div class="info-box all-servers" style="display: flex; justify-content: center; align-items: center; padding: 22px;">
                            <div style="background-color: #314055; width: 70px; height: 70px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 1;">
                                <img src="{{ asset('icons/server.png') }}" style="height: 26px; width: 26px; z-index: 2;" alt="">
                            </div>
                            <div class="info-box-content ps-3">
                                <span class="info-box-text" style="color: #FFFFFF; font-size: 30px; font-weight: bold">{{$totalServers}}+</span>
                                <span class="" style="color: #87888C; margin: 0px">All Servers</span>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-6 col-lg-3">
                    <a href="">
                        <div class="info-box" style="background-color: #21272D; display: flex; justify-content: center; align-items: center; padding: 22px;">
                            <div style="background-color: #4B3F3B; width: 70px; height: 70px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 1;">
                                <img src="{{ asset('icons/total-token.png') }}" style="color: #5B93FF; height: 26px; width: 26px; z-index: 2;" alt="">
                            </div>
                            <div class="info-box-content ps-3">
                                <span class="info-box-text" style="color: #FFFFFF; font-size: 30px; font-weight: bold">{{$totalTokenBuy}}+</span>
                                <span class="" style="color: #87888C; margin: 0px">Total Tokens Alloted</span>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-6 col-lg-3">
                    <a href="">
                        <div class="info-box" style="background-color: #21272D; display: flex; justify-content: center; align-items: center; padding: 22px;">
                            <div style="background-color: #314055; width: 70px; height: 70px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 1;">
                                <img src="{{ asset('icons/used-token.png') }}" style="color: #5B93FF; height: 26px; width: 26px; z-index: 2;" alt="">
                            </div>
                            <div class="info-box-content ps-3">
                                <span class="info-box-text" style="color: #FFFFFF; font-size: 30px; font-weight: bold">{{$totalUseTokens}}+</span>
                                <span class="" style="color: #87888C; margin: 0px">Used Tokens</span>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-6 col-lg-3">
                    <a href="">
                        <div class="info-box" style="background-color: #21272D; display: flex; justify-content: center; align-items: center; padding: 22px;">
                            <div style="background-color: #4B3F3B; width: 70px; height: 70px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 1;">
                                <img src="{{ asset('icons/remaining-token.png') }}" style="color: #5B93FF; height: 26px; width: 26px; z-index: 2;" alt="">
                            </div>
                            <div class="info-box-content ps-3">
                                <span class="info-box-text" style="color: #FFFFFF; font-size: 30px; font-weight: bold">{{$totalTokenCount}}+</span>
                                <span class="" style="color: #87888C; margin: 0px">Remaining Tokens</span>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-6 col-lg-3">
                    <a href="">
                        <div class="info-box" style="background-color: #21272D; display: flex; justify-content: center; align-items: center; padding: 22px;">
                            <div style="background-color: #373555; width: 70px; height: 70px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 1;">
                                <img src="{{ asset('icons/total-credit.png') }}" style="color: #5B93FF; height: 26px; width: 26px; z-index: 2;" alt="">
                            </div>
                            <div class="info-box-content ps-3">
                                <span class="info-box-text" style="color: #FFFFFF; font-size: 30px; font-weight: bold">{{$totalCraditsInit}}+</span>
                                <span class="" style="color: #87888C; margin: 0px">Total Alloted Credits</span>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-6 col-lg-3">
                    <a href="">
                        <div class="info-box" style="background-color: #21272D; display: flex; justify-content: center; align-items: center; padding: 22px;">
                            <div style="background-color: #384947; width: 70px; height: 70px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 1;">
                                <img src="{{ asset('icons/used-credit.png') }}" style="color: #5B93FF; height: 26px; width: 26px; z-index: 2;" alt="">
                            </div>
                            <div class="info-box-content ps-3">
                                <span class="info-box-text" style="color: #FFFFFF; font-size: 30px; font-weight: bold">{{$totalUseCradits}}+</span>
                                <span class="" style="color: #87888C; margin: 0px">Used Credits</span>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-6 col-lg-3">
                    <a href="">
                        <div class="info-box" style="background-color: #21272D; display: flex; justify-content: center; align-items: center; padding: 22px;">
                            <div style="background-color: #4C4A3B; width: 70px; height: 70px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 1;">
                                <img src="{{ asset('icons/remaining-credit.png') }}" style="color: #5B93FF; height: 26px; width: 26px; z-index: 2;" alt="">
                            </div>
                            <div class="info-box-content ps-3">
                                <span class="info-box-text" style="color: #FFFFFF; font-size: 30px; font-weight: bold">{{$totalCraditsCount}}+</span>
                                <span class="" style="color: #87888C; margin: 0px">Remaining Credits</span>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </section>
</div>
@endsection