@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-xxl-3 col-sm-6">
                <div class="card">
                    <div class="row">
                        <div class="col-6">
                            <div class="card-body">
                                <div class="card-info">
                                    <h6 class="mb-4 pb-1 text-nowrap">@lang('messages.dashboard.users')</h6>
                                    <div class="d-flex align-items-center mb-3">
                                        <h4 class="mb-0 me-2">{{$activeUser}}</h4>
                                    </div>
                                    <div class="badge bg-label-primary rounded-pill mb-xl-1">@lang('messages.dashboard.active')</div>
                                </div>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="h-100 position-relative">
                                <img src="{{asset('assets/img/illustrations/illustration-4.png')}}" alt="Ratings" class="position-absolute card-img-position scaleX-n1-rtl bottom-0 w-auto end-0 me-3 me-xl-0 me-xxl-3 pe-2" width="95">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xxl-3 col-sm-6">
                <div class="card">
                    <div class="row">
                        <div class="col-6">
                            <div class="card-body">
                                <div class="card-info">
                                    <h6 class="mb-4 pb-1 text-nowrap">@lang('messages.dashboard.files')</h6>
                                    <div class="d-flex align-items-center mb-3">
                                        <h4 class="mb-0 me-2">{{$activeFile}}</h4>
                                    </div>
                                    <div class="badge bg-label-primary rounded-pill mb-xl-1">@lang('messages.dashboard.active')</div>
                                </div>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="h-100 position-relative">
                                <img src="{{asset('assets/img/illustrations/illustration-2.png')}}" alt="Ratings" class="position-absolute card-img-position scaleX-n1-rtl bottom-0 w-auto end-0 me-3 me-xl-0 me-xxl-3 pe-2" width="81">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xxl-3 col-sm-6">
                <div class="card">
                    <div class="row">
                        <div class="col-6">
                            <div class="card-body">
                                <div class="card-info">
                                    <h6 class="mb-4 pb-1 text-nowrap">@lang('messages.dashboard.codes')</h6>
                                    <div class="d-flex align-items-center mb-3">
                                        <h4 class="mb-0 me-2">{{$activeCode}}</h4>
                                    </div>
                                    <div class="badge bg-label-primary rounded-pill mb-xl-1">@lang('messages.dashboard.active')</div>
                                </div>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="h-100 position-relative">
                                <img src="{{asset('assets/img/illustrations/illustration-1.png')}}" alt="Ratings" class="position-absolute card-img-position scaleX-n1-rtl bottom-0 w-auto end-0 me-3 me-xl-0 me-xxl-3 pe-2" width="95">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xxl-3 col-sm-6">
                <div class="card">
                    <div class="row">
                        <div class="col-6">
                            <div class="card-body">
                                <div class="card-info">
                                    <h6 class="mb-4 pb-1 text-nowrap">@lang('messages.dashboard.websites')</h6>
                                    <div class="d-flex align-items-center mb-3">
                                        <h4 class="mb-0 me-2">{{$activeWebsite}}</h4>
                                    </div>
                                    <div class="badge bg-label-primary rounded-pill mb-xl-1">@lang('messages.dashboard.active')</div>
                                </div>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="h-100 position-relative">
                                <img src="{{asset('assets/img/illustrations/illustration-1.png')}}" alt="Ratings" class="position-absolute card-img-position scaleX-n1-rtl bottom-0 w-auto end-0 me-3 me-xl-0 me-xxl-3 pe-2" width="95">
                            </div>
                        </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-xxl-3 col-sm-6">
                <div class="card">
                    <div class="row">
                        <div class="col-6">
                            <div class="card-body">
                                <div class="card-info">
                                    <h6 class="mb-4 pb-1 text-nowrap">@lang('messages.dashboard.websites')</h6>
                                    <div class="d-flex align-items-center mb-3">
                                        <h4 class="mb-0 me-2">{{$activeWebsite}}</h4>
                                    </div>
                                    <div class="badge bg-label-primary rounded-pill mb-xl-1">@lang('messages.dashboard.active')</div>
                                </div>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="h-100 position-relative">
                                <img src="{{asset('assets/img/illustrations/illustration-4.png')}}" alt="Ratings" class="position-absolute card-img-position scaleX-n1-rtl bottom-0 w-auto end-0 me-3 me-xl-0 me-xxl-3 pe-2" width="95">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xxl-3 col-sm-6">
                <div class="card">
                    <div class="row">
                        <div class="col-6">
                            <div class="card-body">
                                <div class="card-info">
                                    <h6 class="mb-4 pb-1 text-nowrap">@lang('messages.dashboard.codes')</h6>
                                    <div class="d-flex align-items-center mb-3">
                                        <h4 class="mb-0 me-2">{{$activeCode}}</h4>
                                    </div>
                                    <div class="badge bg-label-primary rounded-pill mb-xl-1">@lang('messages.dashboard.active')</div>
                                </div>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="h-100 position-relative">
                                <img src="{{asset('assets/img/illustrations/illustration-2.png')}}" alt="Ratings" class="position-absolute card-img-position scaleX-n1-rtl bottom-0 w-auto end-0 me-3 me-xl-0 me-xxl-3 pe-2" width="81">
                            </div>
                        </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="row mt-5">
                <div class="col-10 mb-6">
                    <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-md-2">
                    <div class="col-sm-12col-lg-12 mb-6">
                        <div class="row">
                            <div class="card card-border-shadow-primary">
                                <div class="card-body fix-style">
                                    <div class="d-flex align-items-center mb-2">
                                        <div class="avatar me-4">
                                            <span class="avatar-initial rounded bg-label-primary"><i class="ri-car-line ri-24px"></i></span>
                                        </div>
                                        <h4 class="mb-0">$ {{ $yesterdayEarning }}</h4>
                                    </div>
                                    <h6 class="mb-0 fw-normal">YESTERDAY INCOME</h6>
                                    <!-- <p class="mb-0">
                                        <span class="me-1 fw-medium">+18.2%</span>
                                        <small class="text-muted">than last week</small>
                                    </p> -->
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-12 col-lg-12 mb-6">
                        <div class="row">
                            <div class="card card-border-shadow-warning">
                                <div class="card-body fix-style">
                                    <div class="d-flex align-items-center mb-2">
                                        <div class="avatar me-4">
                                            <span class="avatar-initial rounded bg-label-warning"><i class="ri-alert-line ri-24px"></i></span>
                                        </div>
                                        <h4 class="mb-0">{{ $yesterdayClicks }}</h4>
                                    </div>
                                    <h6 class="mb-0 fw-normal">YESTERDAY CLICKS</h6>
                                    <!-- <p class="mb-0">
                                        <span class="me-1 fw-medium">-8.7%</span>
                                        <small class="text-muted">than last week</small>
                                    </p> -->
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-12 col-lg-12 mb-6">
                        <div class="row">
                            <div class="card card-border-shadow-danger">
                                <div class="card-body fix-style">
                                    <div class="d-flex align-items-center mb-2">
                                        <div class="avatar me-4">
                                            <span class="avatar-initial rounded bg-label-danger"><i class="ri-route-line ri-24px"></i></span>
                                        </div>
                                        <h4 class="mb-0">$ {{ $balanecPayment }}</h4>
                                    </div>
                                    <h6 class="mb-0 fw-normal">AVAILABLE BALANCE</h6>
                                    <!-- <p class="mb-0">
                                        <span class="me-1 fw-medium">+4.3%</span>
                                        <small class="text-muted">than last week</small>
                                    </p> -->
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6 col-lg-12 mb-6">
                        <div class="row">
                            <div class="card card-border-shadow-info">
                                <div class="card-body fix-style">
                                    <div class="d-flex align-items-center mb-2">
                                        <div class="avatar me-4">
                                            <span class="avatar-initial rounded bg-label-info"><i class="ri-time-line ri-24px"></i></span>
                                        </div>
                                        <h4 class="mb-0">$ {{ $totalApproved }}</h4>
                                    </div>
                                    <h6 class="mb-0 fw-normal">TOTAL GAINS</h6>
                                    <p class="mb-0">
                                        <!-- <span class="me-1 fw-medium">-2.5%</span>
                                        <small class="text-muted">than last week</small> -->
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @elseif(auth()->user()->hasPermissionTo('View Dashboard'))
            <div class="col-xxl-3 col-sm-6">
                <div class="card">
                    <div class="row">
                        <div class="col-6">
                            <div class="card-body">
                                <div class="card-info">
                                    <h6 class="mb-4 pb-1 text-nowrap">@lang('messages.dashboard.websites')</h6>
                                    <div class="d-flex align-items-center mb-3">
                                        <h4 class="mb-0 me-2">{{$activeWebsite}}</h4>
                                    </div>
                                    <div class="badge bg-label-primary rounded-pill mb-xl-1">@lang('messages.dashboard.active')</div>
                                </div>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="h-100 position-relative">
                                <img src="{{asset('assets/img/illustrations/illustration-4.png')}}" alt="Ratings" class="position-absolute card-img-position scaleX-n1-rtl bottom-0 w-auto end-0 me-3 me-xl-0 me-xxl-3 pe-2" width="95">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xxl-3 col-sm-6">
                <div class="card">
                    <div class="row">
                        <div class="col-6">
                            <div class="card-body">
                                <div class="card-info">
                                    <h6 class="mb-4 pb-1 text-nowrap">@lang('messages.dashboard.codes')</h6>
                                    <div class="d-flex align-items-center mb-3">
                                        <h4 class="mb-0 me-2">{{$activeCode}}</h4>
                                    </div>
                                    <div class="badge bg-label-primary rounded-pill mb-xl-1">@lang('messages.dashboard.active')</div>
                                </div>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="h-100 position-relative">
                                <img src="{{asset('assets/img/illustrations/illustration-2.png')}}" alt="Ratings" class="position-absolute card-img-position scaleX-n1-rtl bottom-0 w-auto end-0 me-3 me-xl-0 me-xxl-3 pe-2" width="81">
                            </div>
                        </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>
            @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