@extends('layouts.backend.app')

@push('title', __('Dashboard'))

@push('css')
    <link rel="stylesheet" media="screen, print" href="{{ asset('assets/backend/css/datagrid/datatables/datatables.bundle.css') }}">
@endpush

@section('content')
    <ol class="breadcrumb page-breadcrumb">
        <li class="breadcrumb-item"><a href="javascript:void(0);">Admin</a></li>
        <li class="breadcrumb-item active">Dashboard</li>
        <li class="position-absolute pos-top pos-right d-none d-sm-block"><span class="js-get-date"></span></li>
    </ol>
    <div class="subheader">
        <h1 class="subheader-title">
            <i class='subheader-icon fal fa-chart-area'></i> Admin <span class='fw-300'>Dashboard</span>
        </h1>
    </div>
    <div class="row justify-content-center">
        <div class="col-sm-6 col-lg-3">
            <div class="p-3 bg-info-300 rounded overflow-hidden position-relative text-white mb-g">
                <div class="">
                    <h3 class="display-4 d-block l-h-n m-0 fw-500">
                        {{ $data['totalCoachesOverAll'] }}
                        <small class="m-0 l-h-n" style="font-weight: 400;">Total Coaches (Overall)</small>
                    </h3>
                </div>
                <i class="fal fa-user position-absolute pos-right pos-bottom opacity-15 mb-n1 mr-n1" style="font-size:6rem"></i>
            </div>
        </div>
        <div class="col-sm-6 col-lg-3">
            <div class="p-3 bg-success-300 rounded overflow-hidden position-relative text-white mb-g">
                <div class="">
                    <h3 class="display-4 d-block l-h-n m-0 fw-500">
                        {{ $data['totalCoachesVerified'] }}
                        <small class="m-0 l-h-n" style="font-weight: 400;">Coaches (Verified)</small>
                    </h3>
                </div>
                <i class="fal fa-user position-absolute pos-right pos-bottom opacity-15 mb-n1 mr-n1" style="font-size:6rem"></i>
            </div>
        </div>
        <div class="col-sm-6 col-lg-3">
            <div class="p-3 bg-warning-300 rounded overflow-hidden position-relative text-white mb-g">
                <div class="">
                    <h3 class="display-4 d-block l-h-n m-0 fw-500">
                        {{ $data['totalCoachesNotVerified'] }}
                        <small class="m-0 l-h-n" style="font-weight: 400;">Coaches (Unverified)</small>
                    </h3>
                </div>
                <i class="fal fa-user position-absolute pos-right pos-bottom opacity-15 mb-n1 mr-n1" style="font-size:6rem"></i>
            </div>
        </div>
        <div class="col-sm-6 col-lg-3">
            <div class="p-3 bg-success-300 rounded overflow-hidden position-relative text-white mb-g">
                <div class="">
                    <h3 class="display-4 d-block l-h-n m-0 fw-500">
                        {{ $data['totalCoachesActive'] }}
                        <small class="m-0 l-h-n" style="font-weight: 400;">Coaches (Approved / Active)</small>
                    </h3>
                </div>
                <i class="fal fa-user position-absolute pos-right pos-bottom opacity-15 mb-n1 mr-n1" style="font-size:6rem"></i>
            </div>
        </div>
        <div class="col-sm-6 col-lg-3">
            <div class="p-3 bg-danger-300 rounded overflow-hidden position-relative text-white mb-g">
                <div class="">
                    <h3 class="display-4 d-block l-h-n m-0 fw-500">
                        {{ $data['totalCoachesNotActive'] }}
                        <small class="m-0 l-h-n" style="font-weight: 400;">Coaches (Others / Inactive)</small>
                    </h3>
                </div>
                <i class="fal fa-user position-absolute pos-right pos-bottom opacity-15 mb-n1 mr-n1" style="font-size:6rem"></i>
            </div>
        </div>
    </div>
    <div class="row justify-content-center">
        <div class="col-sm-6 col-lg-3">
            <div class="p-3 bg-info-300 rounded overflow-hidden position-relative text-white mb-g">
                <div class="">
                    <h3 class="display-4 d-block l-h-n m-0 fw-500">
                        {{ $data['totalAthletesOverAll'] }}
                        <small class="m-0 l-h-n" style="font-weight: 400;">Total Athletes (Overall)</small>
                    </h3>
                </div>
                <i class="fal fa-users position-absolute pos-right pos-bottom opacity-15 mb-n1 mr-n1" style="font-size:6rem"></i>
            </div>
        </div>
        <div class="col-sm-6 col-lg-3">
            <div class="p-3 bg-success-300 rounded overflow-hidden position-relative text-white mb-g">
                <div class="">
                    <h3 class="display-4 d-block l-h-n m-0 fw-500">
                        {{ $data['totalAthletesVerified'] }}
                        <small class="m-0 l-h-n" style="font-weight: 400;">Athletes (Verified)</small>
                    </h3>
                </div>
                <i class="fal fa-users position-absolute pos-right pos-bottom opacity-15 mb-n1 mr-n1" style="font-size:6rem"></i>
            </div>
        </div>
        <div class="col-sm-6 col-lg-3">
            <div class="p-3 bg-warning-300 rounded overflow-hidden position-relative text-white mb-g">
                <div class="">
                    <h3 class="display-4 d-block l-h-n m-0 fw-500">
                        {{ $data['totalAthletesNotVerified'] }}
                        <small class="m-0 l-h-n" style="font-weight: 400;">Athletes (Unverified)</small>
                    </h3>
                </div>
                <i class="fal fa-users position-absolute pos-right pos-bottom opacity-15 mb-n1 mr-n1" style="font-size:6rem"></i>
            </div>
        </div>
        <div class="col-sm-6 col-lg-3">
            <div class="p-3 bg-success-300 rounded overflow-hidden position-relative text-white mb-g">
                <div class="">
                    <h3 class="display-4 d-block l-h-n m-0 fw-500">
                        {{ $data['totalAthletesActive'] }}
                        <small class="m-0 l-h-n" style="font-weight: 400;">Athletes (Approved / Active)</small>
                    </h3>
                </div>
                <i class="fal fa-users position-absolute pos-right pos-bottom opacity-15 mb-n1 mr-n1" style="font-size:6rem"></i>
            </div>
        </div>
        <div class="col-sm-6 col-lg-3">
            <div class="p-3 bg-danger-300 rounded overflow-hidden position-relative text-white mb-g">
                <div class="">
                    <h3 class="display-4 d-block l-h-n m-0 fw-500">
                        {{ $data['totalAthletesNotActive'] }}
                        <small class="m-0 l-h-n" style="font-weight: 400;">Athletes (Others / Inactive)</small>
                    </h3>
                </div>
                <i class="fal fa-users position-absolute pos-right pos-bottom opacity-15 mb-n1 mr-n1" style="font-size:6rem"></i>
            </div>
        </div>
    </div>
    <div class="row justify-content-center">
        <div class="col-sm-6 col-lg-4">
            <div class="p-3 bg-info-300 rounded overflow-hidden position-relative text-white mb-g">
                <div class="">
                    <h3 class="display-4 d-block l-h-n m-0 fw-500">
                        {{ $data['totalReviewsOverAll'] }}
                        <small class="m-0 l-h-n" style="font-weight: 400;">Total Reviews (Overall)</small>
                    </h3>
                </div>
                <i class="fal fa-star position-absolute pos-right pos-bottom opacity-15 mb-n1 mr-n1" style="font-size:6rem"></i>
            </div>
        </div>
        <div class="col-sm-6 col-lg-4">
            <div class="p-3 bg-success-300 rounded overflow-hidden position-relative text-white mb-g">
                <div class="">
                    <h3 class="display-4 d-block l-h-n m-0 fw-500">
                        {{ $data['totalReviewsActive'] }}
                        <small class="m-0 l-h-n" style="font-weight: 400;">Total Reviews (Approved / Active)</small>
                    </h3>
                </div>
                <i class="fal fa-star position-absolute pos-right pos-bottom opacity-15 mb-n1 mr-n1" style="font-size:6rem"></i>
            </div>
        </div>
        <div class="col-sm-6 col-lg-4">
            <div class="p-3 bg-danger-300 rounded overflow-hidden position-relative text-white mb-g">
                <div class="">
                    <h3 class="display-4 d-block l-h-n m-0 fw-500">
                        {{ $data['totalReviewsNotActive'] }}
                        <small class="m-0 l-h-n" style="font-weight: 400;">Total Reviews (Others / Inactive)</small>
                    </h3>
                </div>
                <i class="fal fa-star position-absolute pos-right pos-bottom opacity-15 mb-n1 mr-n1" style="font-size:6rem"></i>
            </div>
        </div>
    </div>
    <div class="row justify-content-center">
        <div class="col-sm-6 col-lg-4">
            <div class="p-3 bg-info-300 rounded overflow-hidden position-relative text-white mb-g">
                <div class="">
                    <h3 class="display-4 d-block l-h-n m-0 fw-500">
                        {{ $data['totalRepliesOverAll'] }}
                        <small class="m-0 l-h-n" style="font-weight: 400;">Total Replies (Overall)</small>
                    </h3>
                </div>
                <i class="fal fa-reply position-absolute pos-right pos-bottom opacity-15 mb-n1 mr-n1" style="font-size:6rem"></i>
            </div>
        </div>
        <div class="col-sm-6 col-lg-4">
            <div class="p-3 bg-success-300 rounded overflow-hidden position-relative text-white mb-g">
                <div class="">
                    <h3 class="display-4 d-block l-h-n m-0 fw-500">
                        {{ $data['totalRepliesActive'] }}
                        <small class="m-0 l-h-n" style="font-weight: 400;">Total Replies (Approved / Active)</small>
                    </h3>
                </div>
                <i class="fal fa-reply position-absolute pos-right pos-bottom opacity-15 mb-n1 mr-n1" style="font-size:6rem"></i>
            </div>
        </div>
        <div class="col-sm-6 col-lg-4">
            <div class="p-3 bg-danger-300 rounded overflow-hidden position-relative text-white mb-g">
                <div class="">
                    <h3 class="display-4 d-block l-h-n m-0 fw-500">
                        {{ $data['totalRepliesNotActive'] }}
                        <small class="m-0 l-h-n" style="font-weight: 400;">Total Replies (Others / Inactive)</small>
                    </h3>
                </div>
                <i class="fal fa-reply position-absolute pos-right pos-bottom opacity-15 mb-n1 mr-n1" style="font-size:6rem"></i>
            </div>
        </div>
    </div>
    <div class="row justify-content-center">
        <div class="col-sm-6 col-lg-4">
            <div class="p-3 bg-info-300 rounded overflow-hidden position-relative text-white mb-g">
                <div class="">
                    <h3 class="display-4 d-block l-h-n m-0 fw-500">
                        {{ $data['totalFlagsOverAll'] }}
                        <small class="m-0 l-h-n" style="font-weight: 400;">Total Flags (Overall)</small>
                    </h3>
                </div>
                <i class="fal fa-flag position-absolute pos-right pos-bottom opacity-15 mb-n1 mr-n1" style="font-size:6rem"></i>
            </div>
        </div>
        <div class="col-sm-6 col-lg-4">
            <div class="p-3 bg-success-300 rounded overflow-hidden position-relative text-white mb-g">
                <div class="">
                    <h3 class="display-4 d-block l-h-n m-0 fw-500">
                        {{ $data['totalFlagsActive'] }}
                        <small class="m-0 l-h-n" style="font-weight: 400;">Total Flags (Approved / Active)</small>
                    </h3>
                </div>
                <i class="fal fa-flag position-absolute pos-right pos-bottom opacity-15 mb-n1 mr-n1" style="font-size:6rem"></i>
            </div>
        </div>
        <div class="col-sm-6 col-lg-4">
            <div class="p-3 bg-danger-300 rounded overflow-hidden position-relative text-white mb-g">
                <div class="">
                    <h3 class="display-4 d-block l-h-n m-0 fw-500">
                        {{ $data['totalFlagsNotActive'] }}
                        <small class="m-0 l-h-n" style="font-weight: 400;">Total Flags (Others / Inactive)</small>
                    </h3>
                </div>
                <i class="fal fa-flag position-absolute pos-right pos-bottom opacity-15 mb-n1 mr-n1" style="font-size:6rem"></i>
            </div>
        </div>
    </div>
@endsection

@push('js')
    @include('backend.dashboard.partials.scripts');
@endpush

@push('toastr')
    @include('layouts.backend.partials.flash-messages-toastr')
@endpush