@extends('backend.layouts.app')
<style>
    #bars {
        width: 600px;
        height: 400px;
    }
    .fix-style {
        padding: 30px 6px !important;
    }
    </style>
@section('content')
<!-- Content wrapper -->
<div class="content-wrapper">
    <!-- Content -->
    <div class="container-xxl flex-grow-1 container-p-y">
        <div class="row g-6">
            @if(auth()->user()->hasRole('Super Admin'))
                <div class="col-lg-3 col-sm-6">
                    <div class="widget widget-stats bg-gradient-purple m-b-10">
                        <div class="stats-icon stats-icon-lg"><i class="fa fa-users fa-fw"></i></div>
                        <div class="stats-content">
                            <div class="stats-title">@lang('messages.dashboard.users')</div>
                            <div class="stats-number">{{$activeUser}}</div>
                            <div class="stats-progress progress">
                                <div class="progress-bar" style="width: 76.3%;"></div>
                            </div>
                            <div class="stats-desc">@lang('messages.dashboard.active')</div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-sm-6">
                    <div class="widget widget-stats bg-gradient-black m-b-10">
                        <div class="stats-icon stats-icon-lg"><i class="fa fa-file fa-fw"></i></div>
                        <div class="stats-content">
                            <div class="stats-title">@lang('messages.dashboard.files')</div>
                            <div class="stats-number">{{$activeFile}}</div>
                            <div class="stats-progress progress">
                                <div class="progress-bar" style="width: 54.9%;"></div>
                            </div>
                            <div class="stats-desc">@lang('messages.dashboard.active')</div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-sm-6">
                    <div class="widget widget-stats bg-gradient-orange m-b-10">
                        <div class="stats-icon stats-icon-lg"><i class="fa fa-code fa-fw"></i></div>
                        <div class="stats-content">
                            <div class="stats-title">@lang('messages.dashboard.codes')</div>
                            <div class="stats-number">{{$activeCode}}</div>
                            <div class="stats-progress progress">
                                <div class="progress-bar" style="width: 23.5%;"></div>
                            </div>
                            <div class="stats-desc">@lang('messages.dashboard.active')</div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-sm-6">
                    <div class="widget widget-stats bg-pink m-b-10">
                        <div class="stats-icon stats-icon-lg"><i class="fa fa-link fa-fw"></i></div>
                        <div class="stats-content">
                            <div class="stats-title">@lang('messages.dashboard.websites')</div>
                            <div class="stats-number">{{$activeWebsite}}</div>
                            <div class="stats-progress progress">
                                <div class="progress-bar" style="width: 10.5%;"></div>
                            </div>
                            <div class="stats-desc">@lang('messages.dashboard.active')</div>
                        </div>
                    </div>
                </div>

                <!-- <div class="col-xxl-12 align-self-end">
                    <div class="card">
                        <div class="card-body">
                            <div class="row g-3">
                                <div class="col-md-3 col-6">
                                    <div class="d-flex align-items-center">
                                        <div class="avatar">
                                            <div class="avatar-initial bg-primary rounded shadow-xs">
                                                <i class="ri-group-line ri-24px"></i>
                                            </div>
                                        </div>
                                        <div class="ms-3">
                                            <p class="mb-0">@lang('messages.dashboard.users')</p>
                                            <h5 class="mb-0">{{ $totalUser }}</h5>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3 col-6">
                                    <div class="d-flex align-items-center">
                                        <div class="avatar">
                                            <div class="avatar-initial bg-success rounded shadow-xs">
                                                <i class="mdi mdi-folder-zip ri-24px"></i>
                                            </div>
                                        </div>
                                        <div class="ms-3">
                                            <p class="mb-0">@lang('messages.dashboard.files')</p>
                                            <h5 class="mb-0">{{ $totalFile }}</h5>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3 col-6">
                                    <div class="d-flex align-items-center">
                                        <div class="avatar">
                                            <div class="avatar-initial bg-warning rounded shadow-xs">
                                                <i class="mdi mdi-xml ri-24px"></i>
                                            </div>
                                        </div>
                                        <div class="ms-3">
                                            <p class="mb-0">@lang('messages.dashboard.codes')</p>
                                            <h5 class="mb-0">{{ $totalCode }}</h5>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3 col-6">
                                    <div class="d-flex align-items-center">
                                        <div class="avatar">
                                            <div class="avatar-initial bg-info rounded shadow-xs">
                                                <i class="mdi mdi-sitemap ri-24px"></i>
                                            </div>
                                        </div>
                                        <div class="ms-3">
                                            <p class="mb-0">@lang('messages.dashboard.websites')</p>
                                            <h5 class="mb-0">{{ $totalWebsite }}</h5>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div> -->
            @elseif(auth()->user()->hasRole('Publisher'))
                <div class="col-lg-3 col-sm-6">
                    <div class="widget widget-stats bg-gradient-purple m-b-10">
                        <div class="stats-icon stats-icon-lg"><i class="fa fa-link fa-fw"></i></div>
                        <div class="stats-content">
                            <div class="stats-title">@lang('messages.dashboard.websites')</div>
                            <div class="stats-number">{{$activeWebsite}}</div>
                            <div class="stats-progress progress">
                                <div class="progress-bar" style="width: 76.3%;"></div>
                            </div>
                            <div class="stats-desc">@lang('messages.dashboard.active')</div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-sm-6">
                    <div class="widget widget-stats bg-gradient-orange m-b-10">
                        <div class="stats-icon stats-icon-lg"><i class="fa fa-code fa-fw"></i></div>
                        <div class="stats-content">
                            <div class="stats-title">@lang('messages.dashboard.codes')</div>
                            <div class="stats-number">{{$activeCode}}</div>
                            <div class="stats-progress progress">
                                <div class="progress-bar" style="width: 23.5%;"></div>
                            </div>
                            <div class="stats-desc">@lang('messages.dashboard.active')</div>
                        </div>
                    </div>
                </div>

                <div class="col-xxl-12 align-self-end">
                    <div class="card">
                        <div class="card-body">
                            <div class="row g-3">
                                <div class="col-md-3 col-6">
                                    <div class="d-flex align-items-center">
                                        <div class="avatar">
                                            <div class="avatar-initial bg-primary rounded shadow-xs">
                                                <i class="mdi mdi-sitemap ri-24px"></i>
                                            </div>
                                        </div>
                                        <div class="ms-3">
                                            <p class="mb-0">@lang('messages.dashboard.websites')</p>
                                            <h5 class="mb-0">{{ $totalWebsite }}</h5>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3 col-6">
                                    <div class="d-flex align-items-center">
                                        <div class="avatar">
                                            <div class="avatar-initial bg-success rounded shadow-xs">
                                                <i class="mdi mdi-xml ri-24px"></i>
                                            </div>
                                        </div>
                                        <div class="ms-3">
                                            <p class="mb-0">@lang('messages.dashboard.codes')</p>
                                            <h5 class="mb-0">{{ $totalCode }}</h5>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-10 mt-5 mb-5">
                    <div class="card">
                        <div class="card-header header-elements">
                            <h5 class="card-title mb-0">Report</h5>
                            <div class="card-header-elements py-0 ms-auto">
                                
                            </div>
                        </div>
                        <div class="card-body">
                            <canvas id="bars"></canvas>
                        </div>
                    </div>
                </div>
                <div class="col-lg-2 mt-5 mb-5">
                    <div class="row">
                        <div class="col-lg-12 col-sm-12">
                            <div class="widget widget-stats bg-gradient-blue m-b-10">
                                <div class="stats-icon stats-icon-lg"><i class="fa fa-dollar-sign fa-fw"></i></div>
                                <div class="stats-content">
                                    <div class="stats-title">YESTERDAY INCOME</div>
                                    <div class="stats-number">$ {{ $yesterdayEarning }}</div>
                                    <!-- <div class="stats-progress progress">
                                        <div class="progress-bar" style="width: 40.5%;"></div>
                                    </div>
                                    <div class="stats-desc">Better than last week (40.5%)</div> -->
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-12 col-sm-12 mt-2">
                            <div class="widget widget-stats bg-gradient-teal m-b-10">
                                <div class="stats-icon stats-icon-lg"><i class="fa fa-globe fa-fw"></i></div>
                                <div class="stats-content">
                                    <div class="stats-title">YESTERDAY CLICKS</div>
                                    <div class="stats-number">{{ $yesterdayClicks }}</div>
                                    <!-- <div class="stats-progress progress">
                                        <div class="progress-bar" style="width: 70.1%;"></div>
                                    </div>
                                    <div class="stats-desc">Better than last week (70.1%)</div> -->
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-12 col-sm-12 mt-2">
                            <div class="widget widget-stats bg-gradient-purple m-b-10">
                                <div class="stats-icon stats-icon-lg"><i class="fa fa-dollar-sign fa-fw"></i></div>
                                <div class="stats-content">
                                    <div class="stats-title">AVAILABLE BALANCE</div>
                                    <div class="stats-number">$ {{ $balanecPayment }}</div>
                                    <!-- <div class="stats-progress progress">
                                        <div class="progress-bar" style="width: 40.5%;"></div>
                                    </div>
                                    <div class="stats-desc">Better than last week (40.5%)</div> -->
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-12 col-sm-12 mt-2">
                            <div class="widget widget-stats bg-gradient-orange m-b-10">
                                <div class="stats-icon stats-icon-lg"><i class="fa fa-dollar-sign fa-fw"></i></div>
                                <div class="stats-content">
                                    <div class="stats-title">TOTAL GAINS</div>
                                    <div class="stats-number">$ {{ $totalApproved }}</div>
                                    <!-- <div class="stats-progress progress">
                                        <div class="progress-bar" style="width: 40.5%;"></div>
                                    </div>
                                    <div class="stats-desc">Better than last week (40.5%)</div> -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @elseif(auth()->user()->hasPermissionTo('View Dashboard'))
                <div class="col-lg-3 col-sm-6">
                    <div class="widget widget-stats bg-gradient-purple m-b-10">
                        <div class="stats-icon stats-icon-lg"><i class="fa fa-archive fa-fw"></i></div>
                        <div class="stats-content">
                            <div class="stats-title">@lang('messages.dashboard.websites')</div>
                            <div class="stats-number">{{$activeWebsite}}</div>
                            <div class="stats-progress progress">
                                <div class="progress-bar" style="width: 76.3%;"></div>
                            </div>
                            <div class="stats-desc">@lang('messages.dashboard.active')</div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-sm-6">
                    <div class="widget widget-stats bg-gradient-orange m-b-10">
                        <div class="stats-icon stats-icon-lg"><i class="fa fa-file-alt fa-fw"></i></div>
                        <div class="stats-content">
                            <div class="stats-title">@lang('messages.dashboard.codes')</div>
                            <div class="stats-number">{{$activeCode}}</div>
                            <div class="stats-progress progress">
                                <div class="progress-bar" style="width: 23.5%;"></div>
                            </div>
                            <div class="stats-desc">@lang('messages.dashboard.active')</div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-12 align-self-end">
                    <div class="card">
                        <div class="card-body">
                            <div class="row g-3">
                                <div class="col-md-3 col-6">
                                    <div class="d-flex align-items-center">
                                        <div class="avatar">
                                            <div class="avatar-initial bg-primary rounded shadow-xs">
                                                <i class="mdi mdi-sitemap ri-24px"></i>
                                            </div>
                                        </div>
                                        <div class="ms-3">
                                            <p class="mb-0">@lang('messages.dashboard.websites')</p>
                                            <h5 class="mb-0">{{ $totalWebsite }}</h5>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3 col-6">
                                    <div class="d-flex align-items-center">
                                        <div class="avatar">
                                            <div class="avatar-initial bg-success rounded shadow-xs">
                                                <i class="mdi mdi-xml ri-24px"></i>
                                            </div>
                                        </div>
                                        <div class="ms-3">
                                            <p class="mb-0">@lang('messages.dashboard.codes')</p>
                                            <h5 class="mb-0">{{ $totalCode }}</h5>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endif
        </div>
    </div>
    <div class="content-backdrop fade"></div>
</div>
<!-- / Content -->
@endsection

@section('footer_scripts')
@if(auth()->user()->hasRole('Publisher'))
<script>
     $(document).ready(function() {
        let barChartCtx = document.getElementById("bars").getContext("2d");
        let config = {
        data: {
            "labels": [{{$days}}],
            "datasets": [
                {
                    "label": "Earning",
                    "data": [{{ $revenue }}],
                    backgroundColor: ['rgba(173, 196, 255, 1)']
                },
                {
                    "label": "Clicks",
                    "data": [{{ $clicks }}],
                    backgroundColor: ['rgba(36, 79, 188, 1)']
                },
            ]
        },
        options: {
            scales: {
                x: {
                    title: {
                        display: true,
                        text: "Date"
                    },
                    grid: {
                    display: true
                    }
                },
                y: {
                    title: {
                        display: true,
                        text: "Stats"
                    },
                    position: "left"
                }
            },
            plugins: {
                legend: {
                    display: false
                },
                datalabels: {
                    display: true,
                    color: 'white'
                }
            }
        },
            type: "bar",
            plugins: [ChartDataLabels]
        };

        let barChart = new Chart(barChartCtx, config);
    })
</script>
@endif
@endsection