@extends('admin.master', ['menu' => 'dashboard'])
@section('title', isset($title) ? $title : '')
@section('content')
    <div class="row">
        <div class="col-md-12">
            <div class="breadcrumb__content">
                <div class="breadcrumb__content__left">
                    <div class="breadcrumb__title">
                        <h2>{{ __('Dashboard') }}</h2>
                    </div>
                </div>
                <div class="breadcrumb__content__right">
                    <nav aria-label="breadcrumb">
                        <ul class="breadcrumb">
                            <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">{{ __('Home') }}</a></li>
                            <li class="breadcrumb-item active" aria-current="page">{{ __('Dashboard') }}</li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <!-- Statistics -->
        @can(['membership'])
            <div class="col-lg-3 col-md-6 col-sm-6">
                <div class="status__box-3 bg-style">
                    <div class="item__left">
                        <h2>{{ __('Total Active Membership') }}</h2>
                        <div class="status__box__data">
                            <h2>{{ $totalMembershipSale }}</h2>
                        </div>
                    </div>
                    <div class="item__right">
                        <div class="status__box__img">
                            <i class="fas fa-chart-bar fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-6">
                <div class="status__box-3 bg-style">
                    <div class="item__left">
                        <h2>{{ __('Today Membership (All)') }}</h2>
                        <div class="status__box__data">
                            <h2>{{ $totalTodayMembership }}</h2>
                        </div>
                    </div>
                    <div class="item__right">
                        <div class="status__box__img">
                            <i class="fas fa-chart-bar fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-6">
                <div class="status__box-3 bg-style">
                    <div class="item__left">
                        <h2>{{ \Carbon\Carbon::now()->format('F') . __(' Membership') }}</h2>
                        <div class="status__box__data">
                            <h2>{{ $currentMonthMembership }}</h2>
                        </div>
                    </div>
                    <div class="item__right">
                        <div class="status__box__img">
                            <i class="fas fa-chart-bar fa-2x text-info"></i>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-6">
                <div class="status__box-3 bg-style">
                    <div class="item__left">
                        <h2>{{ __('Yearly Membership') }}</h2>
                        <div class="status__box__data">
                            <h2>{{ $currentYearMembership }}</h2>
                        </div>
                    </div>
                    <div class="item__right">
                        <div class="status__box__img">
                            <i class="fas fa-chart-bar fa-2x text-warning"></i>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Earnings -->
            <div class="col-lg-3 col-md-6 col-sm-6">
                <button type="button" data-bs-toggle="collapse" data-bs-target="#collapseBox" aria-expanded="false"
                    aria-controls="collapseBox" class="status__box-3 bg-style w-100" id="collapseBtn">
                    <div class="item__left">
                        <h2>{{ __('Membership Earning') }}</h2>
                        <div class="status__box__data">
                            <h2>{{ __('JD') . $totalEarningMembership }}</h2>
                        </div>
                    </div>
                    <div class="item__right">
                        <div class="status__box__img">
                            <i class="fas fa-money-bill-wave fa-2x"></i>
                        </div>
                    </div>
                </button>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-6">
                <button type="button" data-bs-toggle="collapse" data-bs-target="#collapseBox2" aria-expanded="false"
                    aria-controls="collapseBox2" class="status__box-3 bg-style w-100" id="collapseBtn2">
                    <div class="item__left">
                        <h2>{{ __('Today Earning') }}</h2>
                        <div class="status__box__data">
                            <h2>{{ __('JD') . $todayMembershipEarning }}</h2>
                        </div>
                    </div>
                    <div class="item__right">
                        <div class="status__box__img">
                            <i class="fas fa-money-bill-wave fa-2x text-success"></i>
                        </div>
                    </div>
                </button>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-6">
                <button type="button" data-bs-toggle="collapse" data-bs-target="#collapseBox3" aria-expanded="false"
                    aria-controls="collapseBox3" class="status__box-3 bg-style w-100" id="collapseBtn3">
                    <div class="item__left">
                        <h2>{{ \Carbon\Carbon::now()->format('F') . __(' Earning') }}</h2>
                        <div class="status__box__data">
                            <h2>{{ __('JD') . $monthMembershipEarning }}</h2>
                        </div>
                    </div>
                    <div class="item__right">
                        <div class="status__box__img">
                            <i class="fas fa-money-bill-wave fa-2x text-info"></i>
                        </div>
                    </div>
                </button>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-6">
                <button type="button" data-bs-toggle="collapse" data-bs-target="#collapseBox4" aria-expanded="false"
                    aria-controls="collapseBox4" class="status__box-3 bg-style w-100" id="collapseBtn4">
                    <div class="item__left">
                        <h2>{{ __('Yearly Earning') }}</h2>
                        <div class="status__box__data">
                            <h2>{{ __('JD') . $yearMembershipEarning }}</h2>
                        </div>
                    </div>
                    <div class="item__right">
                        <div class="status__box__img">
                            <i class="fas fa-shopping-cart fa-2x text-warning"></i>
                        </div>
                    </div>
                </button>
            </div>
            <div class="col-12">
                <div class="collapse mb-4" id="collapseBox">
                    <div class="card">
                        <div class="item-top card-header mb-30">
                            <h2 class="card-title">{{ __('Membership Earning') }}</h2>
                        </div>
                        <div class="card-body">
                            <div class="chart-container">
                                <canvas id="multipleLineChart3"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-12">
                <div class="collapse mb-4" id="collapseBox2">
                    <div class="card">
                        <div class="item-top card-header mb-30">
                            <h2 class="card-title">{{ __('Today Membership Earning') }}</h2>
                        </div>
                        <div class="card-body">
                            <div class="chart-container">
                                <canvas id="multipleLineChart4"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-12">
                <div class="collapse mb-4" id="collapseBox3">
                    <div class="card">
                        <div class="item-top card-header mb-30">
                            <h2 class="card-title">{{ \Carbon\Carbon::now()->format('F') . __(' Membership Earning') }}</h2>
                        </div>
                        <div class="card-body">
                            <div class="chart-container">
                                <canvas id="multipleLineChart5"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-12">
                <div class="collapse mb-4" id="collapseBox4">
                    <div class="card">
                        <div class="item-top card-header mb-30">
                            <h2 class="card-title">{{ __('Yearly Membership Earning') }}</h2>
                        </div>
                        <div class="card-body">
                            <div class="chart-container">
                                <canvas id="multipleLineChart6"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Earnings -->
        @endcan
        @can('category-list')
            <div class="col-lg-3 col-md-6 col-sm-6">
                <div class="status__box-3 bg-style">
                    <div class="item__left">
                        <h2>{{ __('Total Sale') }}</h2>
                        <div class="status__box__data">
                            <h2>{{ $totalProductSale }}</h2>
                        </div>
                    </div>
                    <div class="item__right">
                        <div class="status__box__img">
                            <i class="fas fa-chart-bar fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-6">
                <div class="status__box-3 bg-style">
                    <div class="item__left">
                        <h2>{{ __('Today Order') }}</h2>
                        <div class="status__box__data">
                            <h2>{{ $todayProductOrder }}</h2>
                        </div>
                    </div>
                    <div class="item__right">
                        <div class="status__box__img">
                            <i class="fas fa-chart-bar fa-2x text-success"></i>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-6">
                <div class="status__box-3 bg-style">
                    <div class="item__left">
                        <h2>{{ \Carbon\Carbon::now()->format('F') . __(' Sale') }}</h2>
                        <div class="status__box__data">
                            <h2>{{ $totalCurrentMonthProductSale }}</h2>
                        </div>
                    </div>
                    <div class="item__right">
                        <div class="status__box__img">
                            <i class="fas fa-chart-bar fa-2x text-info"></i>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-6">
                <div class="status__box-3 bg-style">
                    <div class="item__left">
                        <h2>{{ __('Yearly Sale') }}</h2>
                        <div class="status__box__data">
                            <h2>{{ $totalLatYearProductSale }}</h2>
                        </div>
                    </div>
                    <div class="item__right">
                        <div class="status__box__img">
                            <i class="fas fa-chart-bar fa-2x text-warning"></i>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Statistics -->

            <!-- Orders -->
            <div class="col-lg-3 col-md-6 col-sm-6">
                <div class="status__box-3 bg-style">
                    <div class="item__left">
                        <h2>{{ __('Orders') }}</h2>
                        <div class="status__box__data">
                            <h2>{{ $totalOrders }}</h2>
                        </div>
                    </div>
                    <div class="item__right">
                        <div class="status__box__img">
                            <i class="fas fa-shopping-cart fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-6">
                <div class="status__box-3 bg-style">
                    <div class="item__left">
                        <h2>{{ __('Pending Orders') }}</h2>
                        <div class="status__box__data">
                            <h2>{{ $pendingOrders }}</h2>
                        </div>
                    </div>
                    <div class="item__right">
                        <div class="status__box__img">
                            <i class="fas fa-shopping-cart fa-2x text-success"></i>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-6">
                <div class="status__box-3 bg-style">
                    <div class="item__left">
                        <h2>{{ __(' Delivered Orders') }}</h2>
                        <div class="status__box__data">
                            <h2>{{ $deliveredOrders }}</h2>
                        </div>
                    </div>
                    <div class="item__right">
                        <div class="status__box__img">
                            <i class="fas fa-shopping-cart fa-2x text-info"></i>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-6">
                <div class="status__box-3 bg-style">
                    <div class="item__left">
                        <h2>{{ __('Returned Orders') }}</h2>
                        <div class="status__box__data">
                            <h2>{{ $returnedOrders }}</h2>
                        </div>
                    </div>
                    <div class="item__right">
                        <div class="status__box__img">
                            <i class="fas fa-shopping-cart fa-2x text-warning"></i>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Orders -->

            <!-- Products -->
            <div class="col-lg-3 col-md-6 col-sm-6">
                <div class="status__box-3 bg-style">
                    <div class="item__left">
                        <h2>{{ __('Products') }}</h2>
                        <div class="status__box__data">
                            <h2>{{ $totalProducts }}</h2>
                        </div>
                    </div>
                    <div class="item__right">
                        <div class="status__box__img">
                            <i class="fas fa-check-circle fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-6">
                <div class="status__box-3 bg-style">
                    <div class="item__left">
                        <h2>{{ __('Customers') }}</h2>
                        <div class="status__box__data">
                            <h2>{{ $totalUsers }}</h2>
                        </div>
                    </div>
                    <div class="item__right">
                        <div class="status__box__img">
                            <i class="fas fa-check-circle fa-2x text-success"></i>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-6">
                <div class="status__box-3 bg-style">
                    <div class="item__left">
                        <h2>{{ __('Categories') }}</h2>
                        <div class="status__box__data">
                            <h2>{{ $totalCategories }}</h2>
                        </div>
                    </div>
                    <div class="item__right">
                        <div class="status__box__img">
                            <i class="fas fa-check-circle fa-2x text-info"></i>
                        </div>
                    </div>
                </div>
            </div>
            {{-- <div class="col-lg-3 col-md-6 col-sm-6">
                <div class="status__box-3 bg-style">
                    <div class="item__left">
                        <h2>{{ __('Brands') }}</h2>
                        <div class="status__box__data">
                            <h2>{{ $totalBrands }}</h2>
                        </div>
                    </div>
                    <div class="item__right">
                        <div class="status__box__img">
                            <i class="fas fa-check-circle fa-2x text-warning"></i>
                        </div>
                    </div>
                </div>
            </div> --}}
            <!-- Products -->

            <!-- Transactions -->
            <div class="col-lg-3 col-md-6 col-sm-6">
                <div class="status__box-3 bg-style">
                    <div class="item__left">
                        <h2>{{ __('Online Transactions') }}</h2>
                        <div class="status__box__data">
                            <h2>{{ __('JD') . $totalOnlineTransaction }}</h2>
                        </div>
                    </div>
                    <div class="item__right">
                        <div class="status__box__img">
                            <i class="fas fa-dollar-sign fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
            {{-- <div class="col-lg-3 col-md-6 col-sm-6">
                <div class="status__box-3 bg-style">
                    <div class="item__left">
                        <h2>{{ __('Paypal Transactions') }}</h2>
                        <div class="status__box__data">
                            <h2>{{ __('JD') . $totalPaypalTransaction }}</h2>
                        </div>
                    </div>
                    <div class="item__right">
                        <div class="status__box__img">
                            <i class="fas fa-dollar-sign fa-2x text-success"></i>
                        </div>
                    </div>
                </div>
            </div> --}}
            {{-- <div class="col-lg-3 col-md-6 col-sm-6">
                <div class="status__box-3 bg-style">
                    <div class="item__left">
                        <h2>{{ __('Stripe Transactions') }}</h2>
                        <div class="status__box__data">
                            <h2>{{ __('JD') . $totalStripeTransaction }}</h2>
                        </div>
                    </div>
                    <div class="item__right">
                        <div class="status__box__img">
                            <i class="fas fa-dollar-sign fa-2x text-info"></i>
                        </div>
                    </div>
                </div>
            </div> --}}
            {{-- <div class="col-lg-3 col-md-6 col-sm-6">
                <div class="status__box-3 bg-style">
                    <div class="item__left">
                        <h2>{{ __('Razorpay Transactions') }}</h2>
                        <div class="status__box__data">
                            <h2>{{ __('JD') . $totalRazorpayTransaction }}</h2>
                        </div>
                    </div>
                    <div class="item__right">
                        <div class="status__box__img">
                            <i class="fas fa-dollar-sign fa-2x text-warning"></i>
                        </div>
                    </div>
                </div>
            </div> --}}
            <!-- Transactions -->

            {{-- <div class="col-lg-3 col-md-6 col-sm-6">
                <div class="status__box-3 bg-style">
                    <div class="item__left">
                        <h2>{{ __('Bank Transactions') }}</h2>
                        <div class="status__box__data">
                            <h2>{{ __('JD') . $totalOnlineTransaction }}</h2>
                        </div>
                    </div>
                    <div class="item__right">
                        <div class="status__box__img">
                            <i class="fas fa-dollar-sign fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>  --}}
            <div class="col-lg-3 col-md-6 col-sm-6">
                <div class="status__box-3 bg-style">
                    <div class="item__left">
                        <h2>{{ __('Reviews') }}</h2>
                        <div class="status__box__data">
                            <h2>{{ $getTotalReviews }}</h2>
                        </div>
                    </div>
                    <div class="item__right">
                        <div class="status__box__img">
                            <i class="fas fa-comment-alt fa-2x text-success"></i>
                        </div>
                    </div>
                </div>
            </div>
        @endcan
        @can('cms-list')
            <div class="col-lg-3 col-md-6 col-sm-6">
                <div class="status__box-3 bg-style">
                    <div class="item__left">
                        <h2>{{ __('Blogs') }}</h2>
                        <div class="status__box__data">
                            <h2>{{ $getTotalBlogs }}</h2>
                        </div>
                    </div>
                    <div class="item__right">
                        <div class="status__box__img">
                            <i class="fas fa-blog fa-2x text-info"></i>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-6">
                <div class="status__box-3 bg-style">
                    <div class="item__left">
                        <h2>{{ __('Subscribers') }}</h2>
                        <div class="status__box__data">
                            <h2>{{ $getTotalSubscribers }}</h2>
                        </div>
                    </div>
                    <div class="item__right">
                        <div class="status__box__img">
                            <i class="fas fa-users fa-2x text-warning"></i>
                        </div>
                    </div>
                </div>
            </div>
        @endcan
    </div>
    <div class="row">
        @can('membership')
            <div class="col-md-12">
                <div class="form-vertical__item bg-style">
                    <form method="GET" action="{{ route('admin.dashboard') }}">
                        @csrf
                        <div class="row">
                            <div class="col-md-12">
                                <h2 class="text-center mb-25">{{ __('Search Form For Membership') }}</h2>
                            </div>
                            <div class="col-md-6">
                                <div class="input__group mb-25">
                                    <label for="from">{{ __('From:') }}</label>
                                    <input required type="date" class="form-control"
                                        value="{{ old('from', request()->from) }}" name="from" id="from">
                                    @error('from')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="input__group mb-25">
                                    <label for="to">{{ __('To:') }}</label>
                                    <input required type="date" class="form-control"
                                        value="{{ old('to', request()->to) }}" name="to" id="to">
                                    @error('to')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                        </div>
                        <div class="input__button">
                            <button type="submit" class="btn btn-blue">{{ __('Search') }}</button>
                        </div>
                    </form>
                </div>
            </div>
            <div class="col-md-6 mb-3">
                <div class="card gender-ratio-chart-card">
                    <div class="item-top card-header mb-30">
                        <h2 class="card-title">{{ __('By Gender') }}</h2>
                    </div>
                    <div class="card-body">
                        <div class="chart-container">
                            <canvas id="genderRatio"></canvas>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 mb-3">
                <div class="card age-ratio-chart-card">
                    <div class="item-top card-header mb-30">
                        <h2 class="card-title">{{ __('By Age Group') }}</h2>
                    </div>
                    <div class="card-body">
                        <div class="chart-container">
                            <canvas id="ageRatio"></canvas>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 mb-3">
                <div class="card payment-ratio-chart-card">
                    <div class="item-top card-header mb-30">
                        <h2 class="card-title">{{ __('Payment Method') }}</h2>
                    </div>
                    <div class="card-body">
                        <div class="chart-container">
                            <canvas id="paymentRatio"></canvas>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 mb-3">
                <div class="card">
                    <div class="item-top card-header mb-30">
                        <h2 class="card-title">{{ __('By Membership Type') }}</h2>
                    </div>
                    <div class="card-body">
                        <div class="chart-container">
                            <canvas id="membershipType"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        @endcan
        @can('category-list')
            <div class="col-md-6 mb-3">
                <div class="card transactions-chart-card">
                    <div class="item-top card-header mb-30">
                        <h2 class="card-title">{{ __('Transactions') }}</h2>
                    </div>
                    <div class="card-body">
                        <div class="chart-container">
                            <canvas id="earnSource"></canvas>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 mb-3">
                <div class="card sales-ratio-chart-card">
                    <div class="item-top card-header mb-30">
                        <h2 class="card-title">{{ __('Sales Ratio') }}</h2>
                    </div>
                    <div class="card-body">
                        <div class="chart-container">
                            <canvas id="salesRatio"></canvas>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 mb-3">
                <div class="card">
                    <div class="item-top card-header mb-30">
                        <h2 class="card-title">{{ \Carbon\Carbon::now()->format('F') . __(' Sales') }}</h2>
                    </div>
                    <div class="card-body">
                        <div class="chart-container">
                            <canvas id="multipleLineChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 mb-3">
                <div class="card">
                    <div class="item-top card-header mb-30">
                        <h2 class="card-title">{{ \Carbon\Carbon::now()->format('F') . __(' Earnings') }}</h2>
                    </div>
                    <div class="card-body">
                        <div class="chart-container">
                            <canvas id="multipleLineChart2"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        @endcan
    </div>
    @can('category-list')
        <div id="transaction_pie" data-dt='{!! json_encode($transactionPie) !!}'></div>
        <div id="sales_ratio" data-dt='{!! json_encode($salesRatio) !!}'></div>
    @endcan
    @can('membership')
        <div id="gender_ratio" data-dt='{!! json_encode($genderRatio) !!}'></div>
        <div id="age_ratio" data-dt='{!! json_encode($ageRatio) !!}'></div>
        <div id="payment_ratio" data-dt='{!! json_encode($paymentMethodRatio) !!}'></div>
        <div id="membership_type_ratio" data-dt='{!! json_encode($membershipTypeRatio) !!}'></div>

        <div id="totalEarningMembershipByType" data-dt='{!! json_encode($totalEarningMembershipByType) !!}'></div>
        <div id="todayMembershipEarningByType" data-dt='{!! json_encode($todayMembershipEarningByType) !!}'></div>
        <div id="monthMembershipEarningByType" data-dt='{!! json_encode($monthMembershipEarningByType) !!}'></div>
        <div id="yearMembershipEarningByType" data-dt='{!! json_encode($yearMembershipEarningByType) !!}'></div>
    @endcan
    @push('post_scripts')
        <script src="{{ asset('backend/plugins/chart.min.js') }}"></script>
        <script src="{{ asset('backend/js/admin/dashboard.js') }}"></script>
        <script>
            @can('category-list')
                multipleLineChart = document.getElementById('multipleLineChart').getContext('2d'),
                    multipleLineChart2 = document.getElementById('multipleLineChart2').getContext('2d'),
                    multipleLineChart3 = document.getElementById('multipleLineChart3').getContext('2d'),
                    multipleLineChart4 = document.getElementById('multipleLineChart4').getContext('2d'),
                    multipleLineChart5 = document.getElementById('multipleLineChart5').getContext('2d'),
                    multipleLineChart6 = document.getElementById('multipleLineChart6').getContext('2d')

                var myMultipleLineChart = new Chart(multipleLineChart, {
                    type: 'bar',
                    data: {
                        labels: [{!! $order_days !!}],
                        datasets: [{
                            label: "Product Sales",
                            borderColor: "#6777ef",
                            pointBorderColor: "#FFF",
                            pointBackgroundColor: "#6777ef",
                            pointBorderWidth: 2,
                            pointHoverRadius: 4,
                            pointHoverBorderWidth: 1,
                            pointRadius: 4,
                            backgroundColor: '#6777ef',
                            fill: true,
                            borderWidth: 2,
                            data: [{!! $order_sales !!}]
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        legend: {
                            display: false
                        },
                        tooltips: {
                            bodySpacing: 4,
                            mode: "nearest",
                            intersect: 0,
                            position: "nearest",
                            xPadding: 10,
                            yPadding: 10,
                            caretPadding: 10
                        },
                        layout: {
                            padding: {
                                left: 15,
                                right: 15,
                                top: 15,
                                bottom: 15
                            }
                        }
                    }
                });

                var myMultipleLineChart2 = new Chart(multipleLineChart2, {
                    type: 'bar',
                    data: {
                        labels: [{!! $earning_days !!}],
                        datasets: [{
                            label: "Earning JD",
                            borderColor: "#66bb6a",
                            pointBorderColor: "#FFF",
                            pointBackgroundColor: "#66bb6a",
                            pointBorderWidth: 2,
                            pointHoverRadius: 4,
                            pointHoverBorderWidth: 1,
                            pointRadius: 4,
                            backgroundColor: '#66bb6a',
                            fill: true,
                            borderWidth: 2,
                            data: [{!! $total_incomess !!}]
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        legend: {
                            display: false
                        },
                        tooltips: {
                            bodySpacing: 4,
                            mode: "nearest",
                            intersect: 0,
                            position: "nearest",
                            xPadding: 10,
                            yPadding: 10,
                            caretPadding: 10
                        },
                        layout: {
                            padding: {
                                left: 15,
                                right: 15,
                                top: 15,
                                bottom: 15
                            }
                        }
                    }
                });
            @endcan
            @can('membership')
                var xValues = ["Individual", "Employee", "Family", "Corporate", "Honarary"];
                var barColors = ['#34D0DC', '#5EBEE4', '#1D6D9E', '#EC4654', '#FEC240']

                new Chart("membershipType", {
                    type: "bar",
                    data: {
                        labels: xValues,
                        datasets: [{
                            backgroundColor: barColors,
                            data: $('#membership_type_ratio').data("dt"),
                        }]
                    },
                    options: {
                        legend: {
                            display: false
                        },
                        plugins: {
                            legend: {
                                display: false
                            },
                            title: {
                                display: false,
                                text: 'TEST'
                            }
                        }
                    },
                });

                var xValues = ["Individual", "Employee", "Family", "Corporate"];
                var barColors = ['#34D0DC', '#5EBEE4', '#1D6D9E', '#EC4654']

                new Chart("multipleLineChart3", {
                    type: "bar",
                    data: {
                        labels: xValues,
                        datasets: [{
                            backgroundColor: barColors,
                            data: $('#totalEarningMembershipByType').data("dt"),
                        }]
                    },
                    options: {
                        legend: {
                            display: false
                        },
                        plugins: {
                            legend: {
                                display: false
                            },
                            title: {
                                display: false,
                                text: 'TEST'
                            }
                        }
                    },
                });
                var xValues = ["Individual", "Employee", "Family", "Corporate"];
                var barColors = ['#34D0DC', '#5EBEE4', '#1D6D9E', '#EC4654']

                new Chart("multipleLineChart4", {
                    type: "bar",
                    data: {
                        labels: xValues,
                        datasets: [{
                            backgroundColor: barColors,
                            data: $('#todayMembershipEarningByType').data("dt"),
                        }]
                    },
                    options: {
                        legend: {
                            display: false
                        },
                        plugins: {
                            legend: {
                                display: false
                            },
                            title: {
                                display: false,
                                text: 'TEST'
                            }
                        }
                    },
                });
                var xValues = ["Individual", "Employee", "Family", "Corporate"];
                var barColors = ['#34D0DC', '#5EBEE4', '#1D6D9E', '#EC4654']

                new Chart("multipleLineChart5", {
                    type: "bar",
                    data: {
                        labels: xValues,
                        datasets: [{
                            backgroundColor: barColors,
                            data: $('#monthMembershipEarningByType').data("dt"),
                        }]
                    },
                    options: {
                        legend: {
                            display: false
                        },
                        plugins: {
                            legend: {
                                display: false
                            },
                            title: {
                                display: false,
                                text: 'TEST'
                            }
                        }
                    },
                });
                var xValues = ["Individual", "Employee", "Family", "Corporate"];
                var barColors = ['#34D0DC', '#5EBEE4', '#1D6D9E', '#EC4654']

                new Chart("multipleLineChart6", {
                    type: "bar",
                    data: {
                        labels: xValues,
                        datasets: [{
                            backgroundColor: barColors,
                            data: $('#yearMembershipEarningByType').data("dt"),
                        }]
                    },
                    options: {
                        legend: {
                            display: false
                        },
                        plugins: {
                            legend: {
                                display: false
                            },
                            title: {
                                display: false,
                                text: 'TEST'
                            }
                        }
                    },
                });
            @endcan

            $(document).ready(function(){
                $('#collapseBtn').click(function() {
                    $('#collapseBox2, #collapseBox3, #collapseBox4').removeClass('show');
                });
                $('#collapseBtn2').click(function() {
                    $('#collapseBox, #collapseBox3, #collapseBox4').removeClass('show');
                });
                $('#collapseBtn3').click(function() {
                    $('#collapseBox, #collapseBox2, #collapseBox4').removeClass('show');
                });
                $('#collapseBtn4').click(function() {
                    $('#collapseBox, #collapseBox2, #collapseBox3').removeClass('show');
                });
            });
        </script>
    @endpush
@endsection