@extends('backend.layouts.main')

@section('content')

    <x-admin.page.view heading="Dashboard">

        <div class="row justify-content-center mt-3">
            <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-4">
                <x-admin.widget.count
                    title="Users"
                    progress="{{ $userDifference }}"
                    count="{{ $userCount }}"
                    icon="fa fa-users"
                />
            </div>
            <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-4">
                <x-admin.widget.count
                    title="Posts"
                    progress="{{ $postDifference }}"
                    count="{{ $postCount }}"
                    icon="fa fa-clipboard-list"
                />
            </div>
            <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-4">
                <x-admin.widget.count
                    title="Reviews"
                    progress="{{ $reviewDifference }}"
                    count="{{ $reviewCount }}"
                    icon="fa fa-star"
                />
            </div>
        </div>

        <div class="row justify-content-center">
            <div class="col-12">
                <div class="d-flex justify-content-between mb-2 mt-3">
                    <x-admin.page.heading>
                        Users Analytics
                    </x-admin.page.heading>
                    <form action="{{ route('admin.dashboard') }}">
                        <x-admin.form.select
                            id="year"
                            :items="array_reverse(range(2018, date('Y')))"
                            :selected="request('year')"
                            class="submit-onchange"
                        />
                    </form>
                </div>
            </div>
            <div class="col-1">
                <h4 class="chart-meta-1">Users</h4>
            </div>
            <div class="col-11">
                <canvas id="user-chart" class="card rounded w-100 p-3"></canvas>
            </div>
            <div class="col-12 text-center mt-2">
                <h3 class="chart-meta-2">Duration</h3>
            </div>
        </div>

        <div class="row justify-content-center">
            <div class="col-12">
                <div class="d-flex justify-content-between mb-2 mt-3">
                    <x-admin.page.heading>
                        Posts Analytics
                    </x-admin.page.heading>
                    <form action="{{ route('admin.dashboard') }}">
                        <x-admin.form.select
                            id="year"
                            :items="array_reverse(range(2018, date('Y')))"
                            :selected="request('year')"
                            class="submit-onchange"
                        />
                    </form>
                </div>
            </div>
            <div class="col-1">
                <h4 class="chart-meta-1">Posts</h4>
            </div>
            <div class="col-11">
                <canvas id="post-chart" class="card rounded w-100 p-3"></canvas>
            </div>
            <div class="col-12 text-center mt-2">
                <h3 class="chart-meta-2">Duration</h3>
            </div>
        </div>

    </x-admin.page.view>

@endsection


@push('site-scripts')
    <!-- Loading Chart JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js" integrity="sha512-QSkVNOCYLtj73J4hbmVoOV6KVZuMluZlioC+trLpewV8qMjsWqlIQvkn1KGX2StWvPMdWGBqim1xlC8krl1EKQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <!-- Scripts -->
    <script type="text/javascript">

        /**
         * Method to create the dashboard chart
         * @param id
         * @param data
         * @param label
         */
        function createChart(id, data, label = '') {
            //X labels
            const labels = [
                'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'July', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
            ];
            //Getting canvas context
            const ctx = document.getElementById(id).getContext("2d");
            //Creating gradient
            const gradient = ctx.createLinearGradient(0, 4, 2, 400);
            //Adding colors
            gradient.addColorStop(0, '#005F33');
            gradient.addColorStop(0.2, '#004E29');
            gradient.addColorStop(0.6, '#00361C');
            gradient.addColorStop(1, '#000402');
            //Creating shipper chart
            new Chart(ctx, {
                type: 'line',
                data: {
                    labels: labels,
                    datasets: [{
                        label: label,
                        backgroundColor: "rgba(124,79,252,.23)",
                        fill: true,
                        borderColor: "transparent",
                        pointBorderColor: "transparent",
                        pointBackgroundColor: "transparent",
                        pointRadius: 2,
                        pointBorderWidth: 2,
                        pointHoverBorderWidth: 4,
                        tension: 0.2,
                        data: data,
                    }]
                },
                options: {}
            });
        }

        //Creating shipper chart
        createChart('user-chart', {{ $userChart }}, 'Users');
        createChart('post-chart', {{ $postChart }}, 'Posts');
    </script>
@endpush