@extends('layouts.dashboard.app')

@php
    $body_class = 'account-page';

    $total_page_view = $total_views_by_sub = $total_alerts = $total_compliance = $accept_count = $accept_percentage = 0;
    if($websites->count()){

        $total_page_view = $websites->sum('views');
        $total_alerts = $websites->sum('alerts');
        $sites_ids = $websites->pluck('id');






       $accept_count = $websites->sum('accept_count');
       $accept_percentage = calculatePercentage($accept_count, $total_page_view);
       $total_compliance = $websites->sum('compliance')/$websites->count();
    }




    if($activeSub){
        if($activeSub->price_type == 'year'){
            $c_plan_price = $activeSub?->plan?->year_price;
            $c_plan_period = 'year';
        } else {
            $c_plan_price = $activeSub?->plan?->price;
            $c_plan_period = 'month';
        }

        $c_period = $activeSub->getCurrentCycleDates();


        if($c_period){

            $websites_ids = $currentUser->websites()->pluck('id')->all();

            $views_by_sub = \App\Models\WebsiteStat::whereIn('website_id', $websites_ids)->where('time', '>=', $c_period[0])->where('time', '<=', $c_period[1])->get();
            $total_views_by_sub= $views_by_sub->sum('views');
        }

    }else {
         $c_plan_price = $currentPlan?->price;
         $c_plan_period = 'month';
    }

    $website_percent = cookiesFlowGetPercent($websites->count() , $currentPlan?$currentPlan->website_cnt:0 );
    $views_percent = cookiesFlowGetPercent($total_page_view , $currentPlan?$currentPlan->page_views:0 );


@endphp
@section('content')
    <div class="wrapper header-fixed sidebar-gutters">
        <main class="content">
            <section class="full-vh">
                <div class="card">
                    <div class="decor-border-bottom-4">
                        <p class="color-secondary text--xs fw-500 mb-16">{{ date('l, d M Y') }}</p>
                        <h3 class="mb-28">{{ __('Welcome,') }} {{$currentUser->name}}!</h3>

                        <div class="row gy-24 gx-14">
                            <div class="col-lg-3">
                                <div class="card-info">
                                    <div class="card-info__title-group">
                                        <div class="card-info__icon-decor">
                                            <img src="{{ asset('dash/img/icon-decor-subscription-plan.svg') }}">
                                        </div>
                                        <span class="card-info__title">Subscription Plan</span>
                                    </div>
                                    <span class="card-info__value --gradient-text">{{ $currentPlan?->title }} Plan</span>
                                </div>
                            </div>
                            <div class="col-lg-3">
                                <div class="card-info">
                                    <div class="card-info__title-group">
                                        <div class="card-info__icon-decor">
                                            <img src="{{ asset('dash/img/icon-decor-number-of-websites.svg') }}">
                                        </div>
                                        <span class="card-info__title">Number of Websites</span>
                                    </div>
                                    <div class="card-info__content-group">
                                        <span class="card-info__value --gradient-text">{{ $currentUser->websites()->count() }}</span>
                                        <span class="card-info__text">domains</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-3">
                                <div class="card-info">
                                    <div class="card-info__title-group">
                                        <div class="card-info__icon-decor">
                                            <img src="{{ asset('dash/img/icon-decor-total-page-views.svg') }}">
                                        </div>
                                        <span class="card-info__title">Total Page Views</span>
                                    </div>
                                    <div class="card-info__content-group">
                                        <span class="card-info__value --gradient-text">{{ number_format($total_page_view, 0) }}</span>
                                        <span class="card-info__text">views</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-3">
                                <div class="card-info">
                                    <div class="card-info__title-group">
                                        <div class="card-info__icon-decor">
                                            <img src="{{ asset('dash/img/icon-decor-compliance-status.svg') }}">
                                        </div>
                                        <span class="card-info__title">Compliance Status</span>
                                    </div>
                                    <div class="card-info__content-group">
                                        <span class="card-info__value --gradient-text">{{ number_format($accept_percentage, 0) }}%</span>
                                        <span class="card-info__text">rate</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row gx-14 gy-24">
                        <div class="col-lg-9">
                            <h3 class="mb-16">Performance</h3>
                            <p class="color-secondary text--xs fw-500 mb-28">Keep an eye on your cookie compliance and website activity with real-time insights.</p>

                            <div class="card-chart">
                                @php
                                    $sum_views = array_sum(array_column($chartInfo, 'views'));
                                    $accept_count_chart = array_sum(array_column($chartInfo, 'accept_count'));
                                    $accept_percentage_chart = calculatePercentage($accept_count_chart, $sum_views);




                                @endphp
                                <div class="card-chart__head">
                                    <div class="card-info__content-group">
                                        <span class="card-info__value --gradient-text"><span class="chat-info-accept-percentage">{{ number_format(($accept_percentage_chart/7), 0, '', ',') }}</span>%</span>
                                        <span class="card-info__text">compliant / day  </span>
                                    </div>
                                    <div class="card-info__content-group">
                                        <span class="chat-info-perday card-info__value --gradient-text">{{ number_format(($sum_views/7), 0, '', ',') }}</span>
                                        <span class="card-info__text">views / day</span>
                                    </div>
                                    {{--<div class="card-info__content-group">
                                        <span class="card-info__value --gradient-text">5</span>
                                        <span class="card-info__text">alerts / day ToDo</span>
                                    </div>--}}


                                    <div class="form-group select--outline select-gray input--sm ml-auto">
                                        <form class="dash-chart-form" action="{{ route('dashboard.getChartInfo') }}" method="POST">
                                            @csrf
                                            <select name="range" class="dash-chart-range-select select-default">
                                               {{-- <option value="">Sort by week</option>--}}
                                                <option selected value="last_7">Last 7 days</option>
                                                <option value="last_30">Last 30 days</option>
                                            </select>
                                            <button type="submit" class="d-none" />
                                        </form>
                                    </div>
                                </div>
                                <div class="card-chart__body">
                                    <div class="card-chart__legends">
                                        <div class="legend-item">
                                            <span class="legend-item__indicator" style="background-color: #8E09E3;"></span>
                                            <span>Page Views</span>
                                        </div>
                                        <div class="legend-item">
                                            <span class="legend-item__indicator" style="background-color: #88E41C;"></span>
                                            <span>Accepts</span>
                                        </div>
                                        {{--<div class="legend-item">
                                            <span class="legend-item__indicator" style="background-color: #BFBFBF;"></span>
                                            <span>Compliance Issues</span>
                                        </div>--}}
                                    </div>
                                    <div class="canvas-wrapper bar-wrap flex-auto">

                                        <canvas id="dashChart" data-ymax="{{ $chartMaxViews }}" data-info="{{ json_encode($chartInfo) }}" class="dash-bar-chart"  width="700" height="242"></canvas>

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

                        <div class="col-lg-3">
                            <div class="card-chart">
                                <div class="card-chart__body">
                                    <h3 class="mb-28">Plan Usage</h3>
                                    <div class="card-info__content-group mb-28">

                                            <span class="card-info__value --gradient-text">{{ $c_plan_price }} {{\App\Models\Setting::get('currency_sign')}}</span>
                                            <span class="card-info__text">/ {{$c_plan_period}}</span>
                                    </div>
                                    <a href="{{ route('dashboard.subscription-plans.index') }}" class="btn btn--primary btn--md radius-10 w-full mb-18">Upgrade Plan</a>

                                    <p class="text-center text--xs color-secondary">
                                        @if($activeSub &&$activeSub->current_period_end)
                                            <span class="fw-600">Next payment:</span><span>{{ date('d M Y', $activeSub->current_period_end) }}</span>
                                        @endif
                                    </p>
                                    <div class="group-radar justify-evenly">

                                        <div class="chart-block text-center">
                                            <canvas class="doughnut-chart" width="80" data-fill="{{ $websites->count() }}" data-total="{{ ($currentPlan)?$currentPlan->website_cnt:'' }}" height="80"></canvas>
                                            <label class="chart-title">Website <br> Domains</label>
                                        </div>
                                        <div class="chart-block text-center">
                                            <canvas class="doughnut-chart" width="80" data-fill="{{ $total_views_by_sub }}" data-total="{{ ($currentPlan)?$currentPlan->page_views:'' }}" height="80"></canvas>
                                            <label class="chart-title">Pages <br> Views</label>
                                        </div>

                                    </div>
                                    <a href="{{ route('dashboard.subscription-plans.index') }}" class="btn btn--lg btn--lg-2 btn--light radius-1 w-full">
                                        <p>Show All Plans</p>
                                    </a>
                                </div>


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

                </div>
            </section>


        </main>

        <x-footer-dashboard />

    </div>


@endsection



@push('scripts')
    <script src="{{ asset('dash/js/dashboard.js') }}"></script>
@endpush