@extends('voyager::master')


@section('box_header')

    <style>
        .mainHeaderBrowseGameMainBox {
            display: flex;
            flex-wrap: wrap;
            margin-bottom: 15px;
        }

        .mainHeaderBrowseGameMainBox > div {
            padding: 0 10px;
        }

        .mainHeaderBrowseGameCard {
            background-image: linear-gradient(to right, #2a5ff5, #2b95f5);
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-radius: 8px;
            color: #fff;
            padding: 10px 15px;
        }

        .mainHeaderBrowseGameCard.haveFooter {
            flex-direction: column;
        }

        .mainHeaderBrowseGameCard.haveFooter > div:first-child {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .mainHeaderBrowseGameCardNum {
            font-size: 26px;
            font-weight: 600;
        }

        .mainHeaderBrowseGameCardTitle {
            font-size: 16px;
            font-family: Poppins-Regular;
            font-weight: 500;
        }

        .mainHeaderBrowseGameCardIcon {
            font-size: 37px;
        }

        .mainHeaderBrowseGameCardIcon i {
            display: grid;
            place-items: center;
        }

        .mainHeaderBrowseGameCardIcon img{
            width: 74px;
            height: 72px;
        }

        .mainHeaderBrowseGameCardFooter {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-top: 1px solid rgba(255, 255, 255, .5);
            padding-top: 10px;
            margin-top: 5px;
        }

        .mainHeaderBrowseGameCardFooterTitle {
            font-size: 13px;
        }

        .mainHeaderBrowseGameCardFooterDate{
            width: 80px;
        }

        .mainHeaderBrowseGameCardFooterDate .select2-selection,
        .mainHeaderBrowseGameCardFooterDate .select-selected{
            background-color: transparent;
            border-color: transparent;
            color: #fff !important;
            padding: 0px 10px !important;
            margin: 0 ;
        }

        .mainHeaderBrowseGameCardFooterDate .select-selected::after,
        #ltr .mainHeaderBrowseGameCardFooterDate .dropdown .select-selected::after{
            top: 50%;
            right: 0 !important;
            transform: translateY(-50%);
            filter: brightness(0) saturate(100%) invert(98%) sepia(1%) saturate(788%) hue-rotate(181deg) brightness(122%) contrast(100%);
        }

        @media screen and (max-width:767px){
            .mainHeaderBrowseGameMainBox > div{
                width: 100%;
                margin-bottom: 15px;
            }
            .mainHeaderBrowseGameMainBox > div:last-child{
                width: 100%;
                margin-bottom: 0;
            }
        }


        /*    Custom DropDown*/

        /*.dropdown .select-selected, .mySelectionItem .select2-selection {*/
        /*    padding: 9px 20px !important;*/
        /*}*/

        .mySelectionItem select {
            display: none;
        }

        .select2-dropdown {
            z-index: 2;
            width: 100%;
            min-width: 150px !important;
            box-sizing: border-box;
            border-radius: 8px;
            background: var(--input-bg);
            border: 1px solid var(--input-border);
            font-size: 14px;
            line-height: 22px;
            padding: 15px 20px !important;
            position: absolute;
            color: var(--font-color);
            max-height: 300px;
            overflow: auto;
            font-weight: 500;
            direction: rtl;
        }

        .select2-search input {
            padding: 15px 20px;
            width: 100% !important;
            display: block;
            box-sizing: border-box;
            border-radius: 8px;
            font-size: 14px;
            line-height: 22px;
            font-weight: 600;
            background: var(--input-bg);
            border: 1px solid var(--pagination-borde);
            outline: none;
            color: var(--font-color);
        }

        .select2-results__options {
            list-style: none;
            padding: 0 2rem;
        }

        .select2-results__options li {
            cursor: pointer;
            margin: 7px 0;
        }

        .newTableCustomWithItemSize th,
        .newTableCustomWithItemSize td {
            width: calc(100% / (var(--countItem)));
            font-size: 14px;
        }

    </style>

    <div class="row">
        <div class="mainHeaderBrowseGameMainBox">

            <div class="col-md-3">
                <div class="mainHeaderBrowseGameCard haveFooter">
                    <div>
                        <div class="mainHeaderBrowseGameCardBody">
                            <div class="mainHeaderBrowseGameCardTitle">SUCCESSFUL</div>
                            <div class="mainHeaderBrowseGameCardNum depositTopValue"><span>{{ \App\Models\Deposit::query()->whereDate('created_at' , \Carbon\Carbon::today())->sum('amount') }}</span></div>
                        </div>
                        <div class="mainHeaderBrowseGameCardIcon" >
                            <img src="/assets/images/new/depositsIcon.svg" alt="" style="width: 48px;height:48px">
                        </div>
                    </div>
                    <div class="mainHeaderBrowseGameCardFooter">
                        <div class="mainHeaderBrowseGameCardFooterTitle depositTopValue">DEPOSIT - <span>0.00</span></div>
                        <div class="mainHeaderBrowseGameCardFooterDate">
                            <div class="mySelectionItem">
                                <select
                                    class="form-control DepositTopSelect" name="BalanceSelect">
                                    <option value="0" selected>Today</option>
                                    <option value="1">Week</option>
                                    <option value="2">Month</option>
                                </select>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

            <div class="col-md-3">
                <div class="mainHeaderBrowseGameCard haveFooter">
                    <div>
                        <div class="mainHeaderBrowseGameCardBody">
                            <div class="mainHeaderBrowseGameCardTitle">NEW REGISTRATION</div>
                            <div class="mainHeaderBrowseGameCardNum">{{ \App\Models\Player::query()->count() }}</div>
                        </div>
                        <div class="mainHeaderBrowseGameCardIcon">
                            <img src="/assets/images/new/userIcon.svg" alt="" style="width: 48px;height:48px">
                        </div>
                    </div>
                    <div class="mainHeaderBrowseGameCardFooter">
                        <div class="mainHeaderBrowseGameCardFooterTitle">PLAYERS - {{ \App\Models\Player::query()->count() }}</div>
                        <div class="mainHeaderBrowseGameCardFooterDate" style="opacity: 0;">Today</div>
                    </div>

                </div>
            </div>

            <div class="col-md-3">
                <div class="mainHeaderBrowseGameCard haveFooter">
                    <div>
                        <div class="mainHeaderBrowseGameCardBody">
                            <div class="mainHeaderBrowseGameCardTitle">SUCCESSFUL</div>
                            <div class="mainHeaderBrowseGameCardNum withdrawTopValue"><span>{{ \App\Models\Withdraw::query()->whereDate('created_at' , \Carbon\Carbon::today())->sum('amount') }}</span></div>
                        </div>
                        <div class="mainHeaderBrowseGameCardIcon">
                            <img src="/assets/images/new/withdrawsIcon.svg" alt="" style="width: 48px;height:48px">
                        </div>
                    </div>
                    <div class="mainHeaderBrowseGameCardFooter">
                        <div class="mainHeaderBrowseGameCardFooterTitle withdrawTopValue">WITHDRAWALS - <span>0.00</span></div>
                        <div class="mainHeaderBrowseGameCardFooterDate">
                            <div class="mySelectionItem">
                                <select
                                    class="form-control WithdrawTopSelect" name="WithdrawTopSelect">
                                    <option value="0" selected>Today</option>
                                    <option value="1">Week</option>
                                    <option value="2">Month</option>
                                </select>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

            <div class="col-md-3">
                <div class="mainHeaderBrowseGameCard haveFooter">
                    <div>
                        <div class="mainHeaderBrowseGameCardBody">
                            <div class="mainHeaderBrowseGameCardTitle">EURO</div>
                            <div class="mainHeaderBrowseGameCardNum GrossGamingRevenueValue">{{ \App\Models\GamePlayed::query()->whereDate('created_at' , \Carbon\Carbon::today())->sum('input_bet') -
                                             \App\Models\GamePlayed::query()->whereDate('created_at' , \Carbon\Carbon::today())->sum('output_bet') }}</div>
                        </div>
                        <div class="mainHeaderBrowseGameCardIcon">
                            <img src="/assets/images/new/revenueIcon.svg" alt="" style="width: 48px;height:48px">
                        </div>
                    </div>
                    <div class="mainHeaderBrowseGameCardFooter">
                        <div class="mainHeaderBrowseGameCardFooterTitle">GGR</div>
                        <div class="mainHeaderBrowseGameCardFooterDate">
                            <div class="mySelectionItem">
                                <select
                                    class="form-control GrossGamingRevenue" name="GrossGamingRevenue">
                                    <option value="0" selected>Today</option>
                                    <option value="1">Week</option>
                                    <option value="2">Month</option>
                                </select>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

        </div>
    </div>
@endsection

@section('content')

    <style>
        #revenueChart,
        #dashboardGameChart {
            height: 400px;
        }

        .last5ItemDashboardBox {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }


        .accountActionCardBtn {
            min-width: 120px;
            cursor: pointer;
            background-color: #dddddd;
            color: #222;
            text-align: left;
            position: relative;
            box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px;
            padding-top: 7px;
            padding-bottom: 7px;
        }

        .accountActionCardBtnBadge {
            width: 35px;
            height: 41px;
            display: grid;
            place-items: center;
            position: absolute;
            top: 0;
            right: 12px;
            clip-path: polygon(100% 0%, 100% 90%, 80% 100%, 20% 100%, 0% 90.00%, 0% 0%);
            font-size: 22px;
            color: #fff;
            border-radius: 4px;
        }

        .accountActionCardBtn.success .accountActionCardBtnBadge {
            background-color: #26D882;
        }

        .accountActionCardBtn.error .accountActionCardBtnBadge {
            background-color: #F84263;
        }


    </style>

    <div class="col-lg-12 col-md-12 col-sm-12">

        @php

            $charts = \TCG\Voyager\Models\Chart::query()->take(3)->get();

        @endphp

        @if($charts->count() > 0)
            <div class="row" style="display: none">
                <div class="padding-item col-lg-12 col-md-12 col-sm-12">
                    <h5 class="title">
                        Reports
                    </h5>
                </div>
                <div class="padding-item col-lg-12 col-md-12 col-sm-12">
                    <div id="box" class="box">
                        <div class="row">
                            @foreach($charts as $chart)
                                <div class="col-lg-4 col-md-6 col-sm-6 col-12">
                                    <div class="chart-row">
                                        <div class="flex-box chart-title">
                                            <span style="background: {{ $chart->color }}"></span>
                                            {{ $chart->chart_name }}
                                        </div>
                                        <h5>
                                            @php
                                                $model = app($chart->table_name);
                                            @endphp
                                            {{ $model->where($chart->date_field , '>=' ,\Carbon\Carbon::now()->subDays($chart->days))->count() }}
                                        </h5>
                                        <canvas style="height: 150px" id="{{ $chart->chart_id }}"></canvas>
                                        {{-- <a class="flex-box more">
                                             <img src="{{ voyager_asset('icon/arrow.svg') }}">
                                             لیست کاربران

                                         </a>--}}
                                        <div class="line"></div>

                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        @endif

        <div class="row">
            <div class="col-md-12 px-2">
                <div class="box">

                    <div class="  col-md-4 px-2 mb-3" style="margin-left: auto;">
                        <label class="control-label" for="wageringDone">Type</label>
                        <div class="dropdown custom-selects mySelectionItem">
                            <select
                                    class="form-control BalanceSelect" name="BalanceSelect">
                                <option value="-1">Select</option>
                                <option value="0" selected>Revenue</option>
                                <option value="1">Deposit</option>
                                <option value="2">Withdraw</option>
                            </select>
                        </div>
                    </div>

                    <canvas id="revenueChart" style="height: 400px;"></canvas>
                </div>
            </div>

        </div>

        <div class="row my-4">
            @include('voyager::dashboard.personalizemenus')

            @include('voyager::dashboard.last_5_deposit_dash')
            @include('voyager::dashboard.last_5_withdraw1_dash')
            @include('voyager::dashboard.last_5_register_dash')

            <div class="row">
                <div class="padding-item col-lg-12 col-md-12 col-sm-12" style="margin-top: 25px;">
                    <div class="row">
                        <div class="padding-item col-lg-12 col-md-12 col-sm-12">
                            {{--<h5 class="title">
                                Chart Data
                            </h5>--}}
                        </div>
                        <div class="padding-item col-lg-12 col-md-12 col-sm-12">
                            <div class="">
                                <div class="row">
                                    <div class="col-md-3 px-2 chartHomeDataBox">
                                        <div class="box h-100">
                                            <h5 class="title" style="text-align:center;margin-bottom: 10px;">Net per system and category</h5>
                                            <canvas id="dashboardGameChart" style="height: 350px;"></canvas>
                                        </div>
                                    </div>
                                    <div class="col-md-3 px-2 chartHomeDataBox">
                                        <div class="box h-100 px-4">
                                            <h5 class="title" style="text-align:center;margin-bottom: 10px;">Access by browsers</h5>

                                            <canvas id="chartHomeData" height="300"></canvas>
                                        </div>
                                    </div>
                                    <div class="col-md-3 px-2 chartHomeDataBox">
                                        <div class="box h-100 px-4">
                                            <h5 class="title" style="text-align:center;margin-bottom: 10px;">Access by OS</h5>

                                            <canvas id="chartHomeData1" height="300"></canvas>
                                        </div>
                                    </div>
                                    <div class="col-md-3 px-2 chartHomeDataBox">
                                        <div class="box h-100 px-4">
                                            <h5 class="title" style="text-align:center;margin-bottom: 10px;">Access by contries</h5>

                                            <canvas id="chartHomeData2" height="350"></canvas>
                                        </div>
                                    </div>

                                </div>

                            </div>
                        </div>

                    </div>
                </div>
            </div>


            {{--            @include('voyager::dashboard.smspack')--}}
        </div>

        <div class="row">
            <div class="col-md-12">
                <div class="row">
                    <div class="col-md-8 px-4" style="padding-right: 0.75rem !important;">
                        <div class="box">
                            <h5 class="title" style="text-align:center;margin-bottom: 10px;">World Market</h5>
                            <div id="chartdiv"></div>
                        </div>
                    </div>
                    <div class="col-md-4" style="padding-right: 1.5rem;padding-bottom: 15px;">
                        <div class="box h-100">
                            <h5 class="title" style="text-align:center;margin-bottom: 10px;">Revenue by country </h5>

                            <canvas id="chartDivData" height="400"></canvas>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>

    <style>

        #chartDivData {
            height: 400px;
        }

        .chartHomeDataBox{
            min-height: 435px;
        }

        .chartHomeDataBox .box{
            display: grid;
        }

        .chartHomeDataBox .box canvas {
            height: auto;
        }

        #chartdiv {
            width: 100%;
            height: 500px;
            max-width: 100%;
        }
    </style>

    {{--@include('voyager::dashboard.notes')--}}

@endsection

@section('javascript')

    <script src="https://cdn.amcharts.com/lib/5/index.js"></script>
    <script src="https://cdn.amcharts.com/lib/5/map.js"></script>
    <script src="https://cdn.amcharts.com/lib/5/geodata/continentsLow.js"></script>
    <script src="https://cdn.amcharts.com/lib/5/geodata/worldLow.js"></script>
    <script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>

    <script>
        $(".DepositTopSelect").select2({
            minimumResultsForSearch: -1,
            width:"100%",
            tags: true,
        })
        $(".WithdrawTopSelect").select2({
            minimumResultsForSearch: -1,
            width:"100%",
            tags: true,
        })
        $(".GrossGamingRevenue").select2({
            minimumResultsForSearch: -1,
            width:"100%",
            tags: true,
        })



        $(".DepositTopSelect").change(function(){
            if($(this).val() == 0){
                $(".depositTopValue span").text({{ \App\Models\Deposit::query()->whereDate('created_at' , \Carbon\Carbon::today())->sum('amount') }})
            }else if($(this).val() == 1){
                $(".depositTopValue span").text({{ \App\Models\Deposit::query()->whereDate('created_at' , '>=' , \Carbon\Carbon::today()->subDays(7))->whereDate('created_at' , '<=' , \Carbon\Carbon::today())->sum('amount') }})
            }else if($(this).val() == 2){
                $(".depositTopValue span").text({{ \App\Models\Deposit::query()->whereDate('created_at' , '>=' , \Carbon\Carbon::today()->subDays(30))->whereDate('created_at' , '<=' , \Carbon\Carbon::today())->sum('amount') }})
            }
        })
        $(".WithdrawTopSelect").change(function(){
            if($(this).val() == 0){
                $(".withdrawTopValue span").text({{ \App\Models\Withdraw::query()->whereDate('created_at' , \Carbon\Carbon::today())->sum('amount') }})
            }else if($(this).val() == 1){
                $(".withdrawTopValue span").text({{ \App\Models\Withdraw::query()->whereDate('created_at' , '>=' , \Carbon\Carbon::today()->subDays(7))->whereDate('created_at' , '<=' , \Carbon\Carbon::today())->sum('amount') }})
            }else if($(this).val() == 2){
                $(".withdrawTopValue span").text({{ \App\Models\Withdraw::query()->whereDate('created_at' , '>=' , \Carbon\Carbon::today()->subDays(30))->whereDate('created_at' , '<=' , \Carbon\Carbon::today())->sum('amount') }})
            }
        })
        $(".GrossGamingRevenue").change(function(){
            if($(this).val() == 0){
                $(".GrossGamingRevenueValue").text({{ \App\Models\GamePlayed::query()->whereDate('created_at' , \Carbon\Carbon::today())->sum('input_bet') -
                                             \App\Models\GamePlayed::query()->whereDate('created_at' , \Carbon\Carbon::today())->sum('output_bet') }})
            }else if($(this).val() == 1){
                $(".GrossGamingRevenueValue").text({{ \App\Models\GamePlayed::query()->whereDate('created_at' , '>=' , \Carbon\Carbon::today()->subDays(7))->whereDate('created_at' , '<=' , \Carbon\Carbon::today())->sum('input_bet') -
                                             \App\Models\GamePlayed::query()->whereDate('created_at' , '>=' , \Carbon\Carbon::today()->subDays(7))->whereDate('created_at' , '<=' , \Carbon\Carbon::today())->sum('output_bet') }})
            }else if($(this).val() == 2){
                $(".GrossGamingRevenueValue").text({{ \App\Models\GamePlayed::query()->whereDate('created_at' , '>=' , \Carbon\Carbon::today()->subDays(30))->whereDate('created_at' , '<=' , \Carbon\Carbon::today())->sum('input_bet') -
                                             \App\Models\GamePlayed::query()->whereDate('created_at' , '>=' , \Carbon\Carbon::today()->subDays(30))->whereDate('created_at' , '<=' , \Carbon\Carbon::today())->sum('output_bet') }})
            }
        })
    </script>

    <!-- Chart code -->
    <script>

        const worldMapDataChartBox = document.getElementById('chartDivData').getContext('2d');


        const worldMapDataChart = new Chart(worldMapDataChartBox, {
            type: 'pie',
            data: {
                labels: [
                    'Revenue'
                ],
                datasets: [{
                    label: 'Revenue',
                    data: [0],
                    backgroundColor: [
                        'rgb(81,54,235)',
                    ],
                    hoverOffset: 4
                }]
            },
            options: {
                // legend: {
                //     display: false,
                //     labels: {
                //         fontColor: "#96A6B1"
                //     }
                // },
                // scales: {
                //     y: {
                //         beginAtZero: true
                //     }
                // }
            }
        });


        function handleGetCountryData(countryDetail, getTotal = false) {

            $.ajax({
                url: "{{ route('salary_by_country') }}",
                method: 'post',
                data: {country: countryDetail.id  , '_token' : "{{ csrf_token() }}"}
            }).then((res) => {

                if (getTotal) {
                    worldMapDataChart.data.datasets[0].data = [res.total];
                } else {
                    worldMapDataChart.data.datasets[0].data = [res.by_country];
                }

                worldMapDataChart.update();
            }).catch((err) => {
            })
        }

        handleGetCountryData({id: 'CH'}, true)

        am5.ready(function () {

// Create root element
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
            var root = am5.Root.new("chartdiv");
            var colors = am5.ColorSet.new(root, {});


// Set themes
// https://www.amcharts.com/docs/v5/concepts/themes/
            root.setThemes([
                am5themes_Animated.new(root)
            ]);


// Create the map chart
// https://www.amcharts.com/docs/v5/charts/map-chart/
            var chart = root.container.children.push(am5map.MapChart.new(root, {
                panX: "rotateX",
                projection: am5map.geoNaturalEarth1()
            }));

            var countrySeries = chart.series.push(am5map.MapPolygonSeries.new(root, {
                visible: false
            }));
            countrySeries.mapPolygons.template.setAll({
                tooltipText: "{name}",
                interactive: true,
                fill: am5.color(0xaaaaaa)
            });

            /*
                        chart.series.click().then(function(ev) {
                            console.log("Series is now fully visible");
                        })*/


// Create polygon series for continents
// https://www.amcharts.com/docs/v5/charts/map-chart/map-polygon-series/
            var worldSeries = chart.series.push(am5map.MapPolygonSeries.new(root, {
                geoJSON: am5geodata_worldLow,
                exclude: ["AQ"]
            }));

            worldSeries.mapPolygons.template.setAll({
                tooltipText: "{name}",
                interactive: true,
                fill: am5.color(0xaaaaaa),
                templateField: "polygonSettings"
            });

            worldSeries.mapPolygons.template.states.create("hover", {
                fill: colors.getIndex(9)
            });

            worldSeries.mapPolygons.template.events.on("click", (ev) => {
                var dataItem = ev.target.dataItem;
                var data = dataItem.dataContext;
                var zoomAnimation = worldSeries.zoomToDataItem(dataItem);
                handleGetCountryData(data)

                /*Promise.all([
                    zoomAnimation.waitForStop(),

                    // am5.net.load("https://cdn.amcharts.com/lib/5/geodata/json/" + data.map + ".json", chart)
                ]).then((results) => {
                    var geodata = am5.JSONParser.parse(results[1].response);
                    countrySeries.setAll({
                        geoJSON: geodata,
                        fill: data.polygonSettings.fill
                    });

                    console.log("test")

                    countrySeries.show();
                    worldSeries.hide(100);
                    backContainer.show();
                });*/
            });
            /*var continentSeries = chart.series.push(am5map.MapPolygonSeries.new(root, {
                geoJSON: am5geodata_continentsLow,
                exclude: ["antarctica"]
            }));

            continentSeries.mapPolygons.template.setAll({
                tooltipText: "{name}",
                toggleKey: "active",
                interactive: true
            });

            continentSeries.mapPolygons.template.states.create("hover", {
                fill: root.interfaceColors.get("primaryButtonActive")
            });


// Set up zooming in on clicked continent
            continentSeries.mapPolygons.template.events.on("click", function (ev) {
                continentSeries.zoomToDataItem(ev.target.dataItem);
                continentSeries.hide();
                countrySeries.show();
                homeButton.show();

                console.log(chart)
            });*/


            // countrySeries.mapPolygons.template.events.on("click", function (ev) {
            //
            //
            //     console.log(ev)
            // });


// Create polygon series for countries
// https://www.amcharts.com/docs/v5/charts/map-chart/map-polygon-series/
            var countrySeries = chart.series.push(am5map.MapPolygonSeries.new(root, {
                geoJSON: am5geodata_worldLow,
                exclude: ["AQ"],
                visible: false
            }));

            countrySeries.mapPolygons.template.setAll({
                tooltipText: "{name}",
                interactive: true
            });

            countrySeries.mapPolygons.template.states.create("hover", {
                fill: root.interfaceColors.get("primaryButtonActive")
            });


// Add a button to go back to continents view
            var homeButton = chart.children.push(am5.Button.new(root, {
                paddingTop: 10,
                paddingBottom: 10,
                x: am5.percent(100),
                centerX: am5.percent(100),
                opacity: 0,
                interactiveChildren: false,
                icon: am5.Graphics.new(root, {
                    svgPath: "M16,8 L14,8 L14,16 L10,16 L10,10 L6,10 L6,16 L2,16 L2,8 L0,8 L8,0 L16,8 Z M16,8",
                    fill: am5.color(0xffffff)
                })
            }));

            homeButton.events.on("click", function () {
                chart.goHome();
                // continentSeries.show();
                // countrySeries.hide();
                homeButton.hide();
            });

        }); // end am5.ready()
    </script>

    <script>

        @foreach(\TCG\Voyager\Models\Chart::query()->take(3)->get() as $chart)

        @php
            $model = app($chart->table_name);

        $transactions = $model->where($chart->date_field , '>=' ,\Carbon\Carbon::now()->subDays($chart->days))
            ->orderBy($chart->date_field)
            ->get()->groupBy(function($date) use($chart) {
                return \Carbon\Carbon::parse($date->{$chart->date_field})->format('M');
            })->map(function ($user) {
                return collect($user->toArray());
            });

            if($chart->number === "id") {
                $transaction = $transactions->values()->map(function ($user) use($chart) {
                    return $user->count($chart);
                });
            } else {
                $transaction = $transactions->values()->map(function ($user) use($chart) {
                    return $user->sum($chart->number);
                });
            }

        @endphp

        @php
            $date_arr = [];


            foreach($transactions as $key => $tr){

                $date_arr[] = $key;

            }

        @endphp

        let chart_data{{ $loop->index }} = @json($transaction);
        var newuserdeailsdata{{ $loop->index }} = {
            pointBorderWidth: 0,
            pointHoverRadius: 0,
            pointRadius: 0,
            label: '', // Name the series
            data: chart_data{{ $loop->index }}, // Specify the data values array
            fill: false,
            borderColor: '{{ $chart->color }}', // Add custom color border (Line)
            backgroundColor: '{{ $chart->color }}', // Add custom color background (Points and Fill)
            borderWidth: 4, // Specify bar border width
        };
        var customTooltips{{ $loop->index }} = function (tooltipModel) {
            // Tooltip Element
            var tooltipEl = document.getElementById('chartjs-tooltip')

            let index = 0;
            if (tooltipModel.dataPoints) {
                index = tooltipModel.dataPoints[0].index
            }

            if (!tooltipEl) {
                tooltipEl = document.createElement('div');
                tooltipEl.id = 'chartjs-tooltip';
                tooltipEl.innerHTML = '' +
                    '<span class="triangle triangle-5"></span>' +

                    '<h6 id="tooltip-register-label" dir="rtl">' +
                    newuserdeailsdata{{ $loop->index }}.data[index] +
                    '</h6>' +
                    '<p id="tooltip-date-label">' +
                    tooltipModel.dataPoints[0].label +
                    '</p>' +
                    '<div class="toottipe-extra-item ">' +
                    '<img src="{{voyager_asset('icon/circle-toottipe.svg')}}">' +
                    '<img class="line-tooltipe" src="{{voyager_asset('icon/line-tooltipe.svg')}}">' +
                    '</div>'
                ;
                tooltipEl.classList.add('chart-tooltip')
                document.body.appendChild(tooltipEl);
            }
            // Hide if no tooltip
            if (tooltipModel.opacity === 0) {
                tooltipEl.style.opacity = 0;
                return;
            }

            // set content
            let date_label = document.getElementById('tooltip-date-label')
            date_label.innerHTML = tooltipModel.dataPoints[0].label

            let register_label = document.getElementById('tooltip-register-label')
            register_label.innerHTML = newuserdeailsdata{{ $loop->index }}.data[index]

            // Set caret Position
            tooltipEl.classList.remove('above', 'below', 'no-transform');
            if (tooltipModel.yAlign) {
                tooltipEl.classList.add(tooltipModel.yAlign);
            } else {
                tooltipEl.classList.add('no-transform');
            }
            // `this` will be the overall tooltip
            var position = this._chart.canvas.getBoundingClientRect();

            // Display, position, and set styles for font
            tooltipEl.style.opacity = 1;
            tooltipEl.style.position = 'absolute';
            tooltipEl.style.left = position.left + window.pageXOffset + tooltipModel.caretX + 'px';
            tooltipEl.style.top = position.top + window.pageYOffset - tooltipEl.offsetHeight - 25 + tooltipModel.caretY + 'px';
            tooltipEl.style.zIndex = 999;
            tooltipEl.style.pointerEvents = 'none';
        }

        window.myLine = new Chart(document.getElementById('{{ $chart->chart_id }}'), {
            type: "line",
            data: {
                labels: @json($date_arr),
                datasets: [
                    newuserdeailsdata{{ $loop->index }}
                ]
            },
            options: {
                legend: {
                    display: false,
                    labels: {
                        fontColor: "#96A6B1"
                    }
                },

                title: {
                    display: false,

                },
                scales:
                    {
                        responsive: true,
                        maintainAspectRatio: false,
                        xAxes: [{
                            gridLines: {
                                drawBorder: true,
                                display: true
                            },
                            ticks: {
                                beginAtZero: false,
                                fontSize: 12,
                                fontColor: 'var(--second-font-color)',
                                padding: 0,
                            },
                        }],
                        yAxes: [{
                            gridLines: {
                                drawBorder: true,
                                display: true
                            },
                            ticks: {
                                beginAtZero: false,
                                fontSize: 12,
                                fontColor: 'var(--second-font-color)',
                                maxTicksLimit: 5,
                                padding: 0,
                            }
                        }],
                    },
                onClick: graphClickEvent,
                tooltips: {
                    mode: "nearest",
                    intersect: false,
                    enabled: false,
                    position: "average",

                    custom: customTooltips{{ $loop->index }},
                    callbacks: {
                        label: function (tooltipItem, data) {


                        }
                    }
                }
            }
        });

        @endforeach


        /*
var saledetailsdata = {
            pointBorderWidth: 0,
            pointHoverRadius: 0,
            pointRadius: 0,
            label: '', // Name the series
            data: transaction, // Specify the data values array
            fill: false,
            borderColor: '#66C48C', // Add custom color border (Line)
            backgroundColor: '#66C48C', // Add custom color background (Points and Fill)
            borderWidth: 4 // Specify bar border width

        };
        var salenumberdetailsdata = {
            pointBorderWidth: 0,
            pointHoverRadius: 0,
            pointRadius: 0,
            label: '', // Name the series
            data: transactions, // Specify the data values array
            fill: false,
            borderColor: '#FC96C3', // Add custom color border (Line)
            backgroundColor: '#FC96C3', // Add custom color background (Points and Fill)
            borderWidth: 4 // Specify bar border width

        };

        // Custom Tooltip
        var customTooltips2 = function (tooltipModel) {
            // Tooltip Element
            var tooltipEl = document.getElementById('chartjs-tooltip')

            let index = 0;
            if (tooltipModel.dataPoints) {
                index = tooltipModel.dataPoints[0].index
            }

            if (!tooltipEl) {
                tooltipEl = document.createElement('div');
                tooltipEl.id = 'chartjs-tooltip';
                tooltipEl.innerHTML = '' +
                    '<span class="triangle triangle-5"></span>' +

                    '<h6 id="tooltip-register-label" dir="rtl">' +
                    saledetailsdata.data[index] +
                    '</h6>' +
                    '<p id="tooltip-date-label">' +
                    tooltipModel.dataPoints[0].label +
                    '</p>' +
                    '<div class="toottipe-extra-item ">' +
                    '<img src="assets/icon/circle-toottipe.svg">' +
                    '<img class="line-tooltipe" src="assets/icon/line-tooltipe.svg">' +
                    '</div>'
                ;
                tooltipEl.classList.add('chart-tooltip')
                document.body.appendChild(tooltipEl);
            }
            // Hide if no tooltip
            if (tooltipModel.opacity === 0) {
                tooltipEl.style.opacity = 0;
                return;
            }


            // set content
            let date_label = document.getElementById('tooltip-date-label')
            date_label.innerHTML = tooltipModel.dataPoints[0].label

            let register_label = document.getElementById('tooltip-register-label')
            register_label.innerHTML = saledetailsdata.data[index]

            // Set caret Position
            tooltipEl.classList.remove('above', 'below', 'no-transform');
            if (tooltipModel.yAlign) {
                tooltipEl.classList.add(tooltipModel.yAlign);
            } else {
                tooltipEl.classList.add('no-transform');
            }
            // `this` will be the overall tooltip
            var position = this._chart.canvas.getBoundingClientRect();

            // Display, position, and set styles for font
            tooltipEl.style.opacity = 1;
            tooltipEl.style.position = 'absolute';
            tooltipEl.style.left = position.left + window.pageXOffset + tooltipModel.caretX + 'px';
            tooltipEl.style.top = position.top + window.pageYOffset - tooltipEl.offsetHeight - 25 + tooltipModel.caretY + 'px';
            tooltipEl.style.zIndex = 999;
            tooltipEl.style.pointerEvents = 'none';
        }
        var customTooltips3 = function (tooltipModel) {
            // Tooltip Element
            var tooltipEl = document.getElementById('chartjs-tooltip')

            let index = 0;
            if (tooltipModel.dataPoints) {
                index = tooltipModel.dataPoints[0].index
            }

            if (!tooltipEl) {
                tooltipEl = document.createElement('div');
                tooltipEl.id = 'chartjs-tooltip';
                tooltipEl.innerHTML = '' +
                    '<span class="triangle triangle-5"></span>' +

                    '<h6 id="tooltip-register-label" dir="rtl">' +
                    salenumberdetailsdata.data[index] +
                    '</h6>' +
                    '<p id="tooltip-date-label">' +
                    tooltipModel.dataPoints[0].label +
                    '</p>' +
                    '<div class="toottipe-extra-item ">' +
                    '<img src="assets/icon/circle-toottipe.svg">' +
                    '<img class="line-tooltipe" src="assets/icon/line-tooltipe.svg">' +
                    '</div>'
                ;
                tooltipEl.classList.add('chart-tooltip')
                document.body.appendChild(tooltipEl);
            }
            // Hide if no tooltip
            if (tooltipModel.opacity === 0) {
                tooltipEl.style.opacity = 0;
                return;
            }


            // set content
            let date_label = document.getElementById('tooltip-date-label')
            date_label.innerHTML = tooltipModel.dataPoints[0].label

            let register_label = document.getElementById('tooltip-register-label')
            register_label.innerHTML = salenumberdetailsdata.data[index]

            // Set caret Position
            tooltipEl.classList.remove('above', 'below', 'no-transform');
            if (tooltipModel.yAlign) {
                tooltipEl.classList.add(tooltipModel.yAlign);
            } else {
                tooltipEl.classList.add('no-transform');
            }
            // `this` will be the overall tooltip
            var position = this._chart.canvas.getBoundingClientRect();

            // Display, position, and set styles for font
            tooltipEl.style.opacity = 1;
            tooltipEl.style.position = 'absolute';
            tooltipEl.style.left = position.left + window.pageXOffset + tooltipModel.caretX + 'px';
            tooltipEl.style.top = position.top + window.pageYOffset - tooltipEl.offsetHeight - 25 + tooltipModel.caretY + 'px';
            tooltipEl.style.zIndex = 999;
            tooltipEl.style.pointerEvents = 'none';
        }

        var salechart = document.getElementById('sale-chart');
        var salenumberchart = document.getElementById('sale-number-chart');

        window.myLine = new Chart(salechart, {
            type: "line",
            data: {
                labels: ["شنبه ۲۰ آبان ۹۹", "یکشنبه ۲۱ آبان ۹۹", "دوشنبه ۲۲ آبان ۹۹", "سه شنبه ۲۳ آبان ۹۹", "چهارشنبه ۲۴ آبان ۹۹", "پنجشنبه ۲۵ آبان ۹۹", "جمعه ۲۶ آبان ۹۹"],
                datasets: [
                    saledetailsdata
                ]
            },
            options: {
                legend: {
                    display: false,
                    labels: {
                        fontColor: "#96A6B1"
                    }
                },

                title: {
                    display: false,

                },
                scales:
                    {
                        responsive: true,
                        maintainAspectRatio: false,
                        xAxes: [{
                            gridLines: {
                                drawBorder: false,
                                display: false
                            },
                            ticks: {
                                beginAtZero: false,
                                fontSize: 0,
                                fontColor: '#fff',
                                padding: 0,
                            },
                        }],
                        yAxes: [{
                            gridLines: {
                                drawBorder: false,
                                display: false
                            },
                            ticks: {
                                beginAtZero: false,
                                fontSize: 0,
                                fontColor: '#fff',
                                maxTicksLimit: 5,
                                padding: 0,
                            }
                        }],
                    },
                onClick: graphClickEvent,
                tooltips: {
                    mode: "nearest",
                    intersect: false,
                    enabled: false,
                    position: "average",
                    custom: customTooltips2,
                    callbacks: {
                        label: function (tooltipItem, data) {


                        }
                    }
                }
            }
        });
        window.myLine = new Chart(salenumberchart, {
            type: "line",
            data: {
                labels: ["شنبه ۲۰ آبان ۹۹", "یکشنبه ۲۱ آبان ۹۹", "دوشنبه ۲۲ آبان ۹۹", "سه شنبه ۲۳ آبان ۹۹", "چهارشنبه ۲۴ آبان ۹۹", "پنجشنبه ۲۵ آبان ۹۹", "جمعه ۲۶ آبان ۹۹"],
                datasets: [
                    salenumberdetailsdata
                ]
            },
            options: {
                legend: {
                    display: false,
                    labels: {
                        fontColor: "#96A6B1"
                    }
                },

                title: {
                    display: false,

                },
                scales:
                    {
                        responsive: true,
                        maintainAspectRatio: false,
                        xAxes: [{
                            gridLines: {
                                drawBorder: false,
                                display: false
                            },
                            ticks: {
                                beginAtZero: false,
                                fontSize: 0,
                                fontColor: '#fff',
                                padding: 0,
                            },
                        }],
                        yAxes: [{
                            gridLines: {
                                drawBorder: false,
                                display: false
                            },
                            ticks: {
                                beginAtZero: false,
                                fontSize: 0,
                                fontColor: '#fff',
                                maxTicksLimit: 5,
                                padding: 0,
                            }
                        }],
                    },
                onClick: graphClickEvent,
                tooltips: {
                    mode: "nearest",
                    intersect: false,
                    enabled: false,
                    position: "average",
                    custom: customTooltips3,
                    callbacks: {
                        label: function (tooltipItem, data) {


                        }
                    }
                }
            }
        });
*/


        function graphClickEvent(event, array) {
            if (array[0]) {
                var chartData = array[0]["_chart"].config.data;
                var idx = array[0]["_index"];

                var label = chartData.labels[idx];
                var value = chartData.datasets[0].data[idx];

                // var url = "Label: " + label + " Value: " + value;

                console.log(label);
                alert(label);
            }
        }

        function randomNumbers(min, max) {
            return Math.floor(Math.random() * max) + min;
        }

        function randomScalingFactor() {
            return randomNumbers(1, 100);
        }

    </script>
    <script>
        $(".send-massage").focus(function () {
            $(this).addClass("active")
        });
        $(".send-massage").focusout(function () {
            $(this).removeClass("active")
        })


        $(".send-massage-btn").click(function () {
            $(this).addClass("active")
        });
        $("form .outer").click(function () {
            $("form .outer").removeClass("active")
            $(this).addClass("active")
        });
        $(".massage-filter .outer").click(function () {
            $(".massage-filter .outer").removeClass("active")
            $(this).addClass("active")
        });

        $(document).ready(function () {
            $('.massage-box input[type="checkbox"]').click(function () {
                var items = $(this)
                if ($(this).is(":checked")) {
                    setTimeout(function () {
                        items.parent().addClass("slide-right")
                    }, 100);
                    setTimeout(function () {
                        items.parent().hide(200)
                    }, 100);
                } else if ($(this).is(":not(:checked)")) {
                    items.stop();
                } else {
                    items.stop();

                }
            });
        });
    </script>
    <script>
        $(".send-massage-btn ").on("click", function () {
            var filename = $('.send-massage').val();
            console.log(filename)

            $(".massage-row").append(" <div class=\"padding-item col-lg-12 col-md-12 col-sm-12\">" +
                "<div class=\"box massage-box\">" +
                "<p> "
                + filename +
                "</p>" +
                "<input type=\"checkbox\" id=\"new-massage\">" +
                "<label for=\"new-massage\">" +
                "<img src=\"admin/voyager-assets?path=icon/check.svg\">" +
                "</label><div class=\"extra green-2\">" +
                "</div>" +
                "</div>" +
                "</div>");

            $.post("/admin/support/sendmessage", {
                content: filename
            }, function (data) {

            });

            $('.massage-box input[type="checkbox"]').click(function () {
                var items = $(this)
                if ($(this).is(":checked")) {
                    setTimeout(function () {
                        items.parent().addClass("slide-right")
                    }, 100);
                    setTimeout(function () {
                        items.parent().hide(200)
                    }, 100);
                } else if ($(this).is(":not(:checked)")) {
                    items.stop();
                } else {
                    items.stop();

                }
            });
        })
    </script>

    <script>

        const monthName = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']

        {{--    chart Config    --}}


        const ctx = document.getElementById('chartHomeData').getContext('2d');
        const ctx1 = document.getElementById('chartHomeData1').getContext('2d');
        const ctx2 = document.getElementById('chartHomeData2').getContext('2d');

        const myChart = new Chart(ctx, {
            type: 'pie',
            data: {
                labels: [
                    'Chrome',
                    'FireFox',
                    'Other'
                ],
                datasets: [{
                    label: 'Browser',
                    data: [
                        {{ \App\Models\PlayerLogin::query()->where('browser' , 'Chrome')->count() }},
                        {{ \App\Models\PlayerLogin::query()->where('browser' , 'Firefox')->count() }},
                        {{ \App\Models\PlayerLogin::query()->where('browser' , '!=' ,'Firefox')->where('browser' , '!=' ,'Chrome')->count() }}
                    ],
                    backgroundColor: [
                        '#54BAB9',
                        '#396EB0',
                        '#FC997C',
                        '#80558C',
                        '#70a9a1',
                    ],
                    hoverOffset: 4
                }]
            },
            options: {
                // legend: {
                //     display: false,
                //     labels: {
                //         fontColor: "#96A6B1"
                //     }
                // },
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });
        const myChart1 = new Chart(ctx1, {
            type: 'pie',
            data: {
                labels: [
                    'Windows',
                    'MacOS',
                    'Android',
                    'IOS',
                    'Other'
                ],
                datasets: [{
                    label: 'OS',
                    data: [
                        {{ \App\Models\PlayerLogin::query()->where('sys' , 'Windows')->count() }},
                        {{ \App\Models\PlayerLogin::query()->where('sys' , 'MacOS')->count() }},
                        {{ \App\Models\PlayerLogin::query()->where('sys' , 'Android')->count() }},
                        {{ \App\Models\PlayerLogin::query()->where('sys' , 'Ios')->count() }},
                        {{ \App\Models\PlayerLogin::query()->where('sys' , '!=' ,'Ios')->where('sys' , '!=' ,'Windows')
                                ->where('sys' , '!=' ,'Android')->where('sys' , '!=' ,'MacOS')->count() }},
                    ],
                    backgroundColor: [
                        '#54BAB9',
                        '#396EB0',
                        '#FC997C',
                        '#80558C',
                        '#70a9a1',
                    ],
                    hoverOffset: 4
                }]
            },
            options: {
                // legend: {
                //     display: false,
                //     labels: {
                //         fontColor: "#96A6B1"
                //     }
                // },
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });

        @php

            $groups = \App\Models\PlayerLogin::query()->select('country_name',
             \Illuminate\Support\Facades\DB::raw('count(*) as total'))
                ->groupBy('country_name')->get();

        @endphp


        const myChart2 = new Chart(ctx2, {
            type: 'pie',
            data: {
                labels: [
                    @foreach($groups as $group)
                            @if($group->country_name == null )
                            @continue
                            @endif
                        "{{ $group->country_name }}",
                    @endforeach
                ],
                datasets: [{
                    label: 'Country',
                    data: [
                        @foreach($groups as $group)
                                @if($group->country_name == null)
                                @continue
                                @endif
                                {{ $group->total }},
                        @endforeach
                    ],
                    backgroundColor: [
                        '#54BAB9',
                        '#396EB0',
                        '#FC997C',
                        '#80558C',
                        '#70a9a1',
                        'rgb(86,109,255)',
                        'rgb(79,241,208)',
                        'rgb(255,86,100)',
                    ],
                    hoverOffset: 4
                }]
            },
            options: {
                legend: {
                    display: false,
                    labels: {
                        fontColor: "#96A6B1"
                    }
                },

                plugin:{
                    labels: {
                        render: 'percentage',
                        fontColor: function (data) {
                            var rgb = hexToRgb(data.dataset.backgroundColor[data.index]);
                            var threshold = 140;
                            var luminance = 0.299 * rgb.r + 0.587 * rgb.g + 0.114 * rgb.b;
                            return luminance > threshold ? 'black' : 'white';
                        },
                        precision: 2
                    },
                },

                scales: {
                    y: {
                        beginAtZero: true,

                    },
                }
            }
        });


        const revenueChartBox = document.getElementById('revenueChart').getContext('2d');
        const dashboardGameChartBox = document.getElementById('dashboardGameChart').getContext('2d');

        var chartCustomeRevenueTooltips = {
            pointBorderWidth: 0,
            pointHoverRadius: 0,
            pointRadius: 0,
            label: '', // Name the series
            data: chart_data0, // Specify the data values array
            fill: false,
            borderColor: '#FC997C', // Add custom color border (Line)
            backgroundColor: '#FC997C', // Add custom color background (Points and Fill)
            borderWidth: 4, // Specify bar border width
        };

        var customTooltipsRevenue = function (tooltipModel) {
            console.log(tooltipModel.dataPoints[0])
            // Tooltip Element
            var tooltipEl = document.getElementById('chartjs-tooltip')

            let index = 0;
            if (tooltipModel.dataPoints) {
                index = tooltipModel.dataPoints[0].index
            }

            if (!tooltipEl) {
                tooltipEl = document.createElement('div');
                tooltipEl.id = 'chartjs-tooltip';
                tooltipEl.innerHTML = '' +
                    '<span class="triangle triangle-5"></span>' +

                    '<h6 id="tooltip-register-label" dir="rtl">' +
                    tooltipModel.dataPoints[0].value +
                    '</h6>' +
                    '<p id="tooltip-date-label">' +
                    tooltipModel.dataPoints[0].label +
                    '</p>' +
                    '<div class="toottipe-extra-item ">' +
                    '<img src="{{voyager_asset('icon/circle-toottipe.svg')}}">' +
                    '<img class="line-tooltipe" src="{{voyager_asset('icon/line-tooltipe.svg')}}">' +
                    '</div>'
                ;
                tooltipEl.classList.add('chart-tooltip')
                document.body.appendChild(tooltipEl);
            }
            // Hide if no tooltip
            if (tooltipModel.opacity === 0) {
                tooltipEl.style.opacity = 0;
                return;
            }

            // set content
            let date_label = document.getElementById('tooltip-date-label')
            date_label.innerHTML = tooltipModel.dataPoints[0].label

            let register_label = document.getElementById('tooltip-register-label')
            register_label.innerHTML = tooltipModel.dataPoints[0].value

            // Set caret Position
            tooltipEl.classList.remove('above', 'below', 'no-transform');
            if (tooltipModel.yAlign) {
                tooltipEl.classList.add(tooltipModel.yAlign);
            } else {
                tooltipEl.classList.add('no-transform');
            }
            // `this` will be the overall tooltip
            var position = this._chart.canvas.getBoundingClientRect();

            // Display, position, and set styles for font
            tooltipEl.style.opacity = 1;
            tooltipEl.style.position = 'absolute';
            tooltipEl.style.left = position.left + window.pageXOffset + tooltipModel.caretX + 'px';
            tooltipEl.style.top = position.top + window.pageYOffset - tooltipEl.offsetHeight - 25 + tooltipModel.caretY + 'px';
            tooltipEl.style.zIndex = 999;
            tooltipEl.style.pointerEvents = 'none';
        }

        const revenueChart = new Chart(revenueChartBox, {
            type: 'line',
            data: {
                labels: monthName,

                datasets: [
                    {
                        label: [
                            new Date().getFullYear()
                        ],
                        data: [
                            //2022 revenue
                            @for($i = 1 ; $i < 13 ; $i++)
                                    {{ \App\Models\GamePlayed::query()->whereMonth('created_at' , $i)->whereYear('created_at' , 2022)->sum('input_bet') -
                                             \App\Models\GamePlayed::query()->whereMonth('created_at' , $i)->whereYear('created_at' , 2022)->sum('output_bet') }},
                            @endfor
                        ],
                        backgroundColor: '#FC997C',
                        borderColor: '#FC997C',
                        hoverOffset: 4
                    },
                    {
                        label: [
                            new Date().getFullYear() - 1
                        ],
                        data: [
                            //2021 revenue
                            @for($i = 1 ; $i < 13 ; $i++)
                                    {{ \App\Models\GamePlayed::query()->whereMonth('created_at' , $i)->whereYear('created_at' , 2021)->sum('input_bet') -
                                             \App\Models\GamePlayed::query()->whereMonth('created_at' , $i)->whereYear('created_at' , 2021)->sum('output_bet') }},
                            @endfor
                        ],
                        backgroundColor: '#80558C',
                        borderColor: '#80558C',
                        hoverOffset: 4
                    }
                ]
            },
            options: {
                legend: {
                    display: true,
                    labels: {
                        textAlign: "left",
                        fontColor: "#96A6B1",
                    },

                },

                title: {
                    display: false,

                },
                scales:
                    {
                        responsive: true,
                        maintainAspectRatio: false,
                        xAxes: [{
                            gridLines: {
                                drawBorder: true,
                                display: true
                            },
                            ticks: {
                                beginAtZero: false,
                                fontSize: 12,
                                fontColor: '#aaa',
                                padding: 0,
                            },
                        }],
                        yAxes: [{
                            gridLines: {
                                drawBorder: true,
                                display: true
                            },
                            ticks: {
                                beginAtZero: false,
                                fontSize: 12,
                                fontColor: '#aaa',
                                maxTicksLimit: 5,
                                padding: 0,
                            }
                        }],
                    },
                elements: {
                    line: {
                        fill: false
                    },
                    point: {
                        radius: 0
                    }
                },
                onClick: graphClickEvent,
                tooltips: {
                    mode: "nearest",
                    intersect: false,
                    enabled: false,
                    position: "average",
                    pointerEvents : 'none',
                    custom: customTooltipsRevenue ,
                    callbacks: {
                        label: function (tooltipItem, data) {}
                    }
                },

            }
        });

        const dashboardGameChart = new Chart(dashboardGameChartBox, {
            type: 'doughnut',
            // percentageInnerCutout: 0,
            data: {
                @php
                    $providers = \App\Models\Provider::all();
                @endphp
                @php
                    $categories = \App\Models\Game::query()
                    ->select('id', 'type', \Illuminate\Support\Facades\DB::raw('count(*) as total'))
                    ->groupBy('type')->withoutGlobalScope('limit')->get();

                @endphp
                labels: [
                    @foreach($providers as $provider)
                        "{{ $provider->name }}",
                    @endforeach
                    @foreach($categories as $type => $category)
                        "{{ $category->type }}",
                    @endforeach
                ],

                datasets: [
                    {

                        label: [
                            @foreach($providers as $provider)
                                "{{ $provider->name }}",
                            @endforeach
                        ],
                        data: [
                            @foreach($providers as $provider)
                                1,
                            @endforeach
                        ],
                        backgroundColor: [
                            @for($i = 0; $i < $providers->count() ; $i++)
                                @if($i < 100)
                                    "#54BAB9",
                                @elseif($i > 100 && $i < 110)
                                    "#396EB0",
                                @elseif($i > 110 && $i < 112)
                                    "#FC997C",
                                @elseif($i > 112 && $i < 125)
                                    "#80558C",
                                @endif
                            @endfor
                        ],
                    }, {

                        label: [
                            @foreach($categories as $type => $category)
                                "{{ $category->type }}",
                            @endforeach
                        ],
                        data: [
                            @foreach($categories as $type => $category)
                                {{ $category->total }},
                            @endforeach
                        ],
                        backgroundColor: [
                            '#54BAB9',
                            '#396EB0',
                            '#FC997C',
                            '#80558C',
                            '#70a9a1',
                        ],
                    }],
            },
            options: {
                cutoutPercentage: 0,

                responsive: true,
                legend: {
                    display: false,
                    labels: {
                        fontColor: "#96A6B1"
                    }
                },

                title: {
                    display: false,

                },
                elements: {
                    line: {
                        fill: false
                    },
                    point: {
                        radius: 0
                    }
                },
                onClick: graphClickEvent,

            }
        });

        setInterval(() => {
            tesatsts()
        }, 500)

        function tesatsts() {

            if ($(".BalanceSelect").val() == 0) {
                revenueChart.data.datasets[0].data = [
                    @for($i = 1 ; $i < 13 ; $i++)
                            {{ \App\Models\GamePlayed::query()->whereMonth('created_at' , $i)->whereYear('created_at' , 2022)->sum('input_bet') -
                                     \App\Models\GamePlayed::query()->whereMonth('created_at' , $i)->whereYear('created_at' , 2022)->sum('output_bet') }},
                    @endfor
                ];
                revenueChart.data.datasets[1].data = [
                    @for($i = 1 ; $i < 13 ; $i++)
                            {{ \App\Models\GamePlayed::query()->whereMonth('created_at' , $i)->whereYear('created_at' , 2021)->sum('input_bet') -
                                     \App\Models\GamePlayed::query()->whereMonth('created_at' , $i)->whereYear('created_at' , 2021)->sum('output_bet') }},
                    @endfor
                ];
            } else if ($(".BalanceSelect").val() == 1) {
                revenueChart.data.datasets[0].data = [
                    @for($i = 1 ; $i < 13 ; $i++)
                            {{ \App\Models\Deposit::query()->whereMonth('created_at' , $i)->whereYear('created_at' , 2022)->sum('amount') }},
                    @endfor
                ];
                revenueChart.data.datasets[1].data = [
                    @for($i = 1 ; $i < 13 ; $i++)
                            {{ \App\Models\Deposit::query()->whereMonth('created_at' , $i)->whereYear('created_at' , 2021)->sum('amount') }},
                    @endfor
                ];
            } else if ($(".BalanceSelect").val() == 2) {
                revenueChart.data.datasets[0].data = [
                    @for($i = 1 ; $i < 13 ; $i++)
                            {{ \App\Models\Withdraw::query()->whereMonth('created_at' , $i)->whereYear('created_at' , 2022)->sum('amount') }},
                    @endfor
                ];
                revenueChart.data.datasets[1].data = [
                    @for($i = 1 ; $i < 13 ; $i++)
                            {{ \App\Models\Withdraw::query()->whereMonth('created_at' , $i)->whereYear('created_at' , 2021)->sum('amount') }},
                    @endfor
                ];
            }

            revenueChart.update();

        }


    </script>

@endsection