@extends("admin.template.layout")
@section('header')
    <style>
        .container {
            margin-top: 10px;
        }

        .counter-box {
            display: block;
            background: #ffffff;
            padding: 40px 20px 37px;
            text-align: center
        }

        .counter-box p {
            margin: 5px 0 0;
            padding: 0;
            color: #909090;
            font-size: 18px;
            font-weight: 500
        }

        .counter-box i {
            font-size: 60px;
            margin: 0 0 15px;
            color: #d2d2d2
        }

        .counter {
            display: block;
            font-size: 32px;
            font-weight: 700;
            color: #666;
            line-height: 28px
        }

        .counter-box.colored {
            background: #3acf87;
        }

        .fa{
            font-size: 60px !important;
            margin: 0 0 15px;
            color: #d2d2d2
        }

        .counter-box.colored p,
        .counter-box.colored i,
        .counter-box.colored .counter {
            color: #fff
        }
    </style>
@endsection
@section('content')
    <div class="container-xxl flex-grow-1 container-p-y">
        <div class="container">

            <div class="row">

                <div class="four col-md-3">
                    <div class="counter-box">
                        <i class="fa fa-2x text-muted fa-thumbs-up"></i>
                        <span class="counter" id="community_likes">0</span>
                        <p>Community Likes</p>
                    </div>
                </div>
                <div class="four col-md-3">
                    <div class="counter-box">
                        <i class="fa fa-2x text-muted fa-users"></i>
                        <span class="counter" id="members">0</span>
                        <p>Members</p>
                    </div>
                </div>
                <div class="four col-md-3">
                    <div class="counter-box">
                        <i class="fa fa-2x text-muted fa-newspaper"></i>
                        <span class="counter" id="posts">0</span>
                        <p>Posts</p>
                    </div>
                </div>
                <div class="four col-md-3">
                    <div class="counter-box">
                        <i class="fa fa-2x text-muted fa-list"></i>
                        <span class="counter">0</span>
                        <p>Comments</p>
                    </div>
                </div>
            </div>
            <div class="row mt-4">
                <div class="col-12">
                    <div class="card h-100 user-analytic-chart plr-30">
                        <div class="card-header">
                            <h5 class="mb-0">Members</h5>
                        </div>
                        <div class="card-body p-2">
                            <canvas id="Chart3" style="width: 100%; height: 250px;"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
@stop
@section('script')

    <script src="{{asset('')}}admin-assets/assets/js/Chart.min.js"></script>
    <script>
        jQuery(document).ready(function () {

            App.initTreeView();

        });

        function loadCounters() {
            $('.counter').each(function () {
                $(this).prop('Counter', 0).animate({
                    Counter: $(this).text()
                }, {
                    duration: 4000,
                    easing: 'swing',
                    step: function (now) {
                        $(this).text(Math.ceil(now));
                    }
                });
            });
        }

        $(document).ready(function () {
            $.ajax({
                url: "{{route('community.insights', encrypt($community->id))}}",
                type: "GET",
                dataType: "JSON",
                success: function (data) {
                    data = data.data;

                    $('#community_likes').html(data.likes);
                    $('#members').html(data.members);
                    $('#posts').html(data.posts);
                    $('#comments').html(data.comments);
                    loadCounters();
                    loadChart(data.dates, data.members_count)
                }
            });

            loadCounters();

        });


        function loadChart(labels, data) {
            const ctx3 = document.getElementById('Chart3');
            const chart3 = new Chart(ctx3, {
                type: "line",

                data: {
                    labels: labels,
                    datasets: [
                        {
                            label: "Members",
                            backgroundColor: "#4a6cf7",
                            borderColor: "#4a6cf7",
                            data: data,
                            pointBackgroundColor: "transparent",
                            pointHoverBackgroundColor: "#4a6cf7",
                            pointBorderColor: "transparent",
                            pointHoverBorderColor: "#fff",
                            pointHoverBorderWidth: 3,
                            pointBorderWidth: 5,
                            pointRadius: 5,
                            pointHoverRadius: 8,
                            tension: 0.5
                        },
                    ],
                },

                // Configuration options
                options: {
                    title: {
                        display: false,
                    },

                    layout: {
                        padding: {
                            top: 0,
                        },
                    },

                    plugins: {
                        legend: {
                            display: true,
                            position: 'bottom'
                        }
                    },

                    scales: {
                        yAxes: {
                            grid: {
                                display: false,
                                drawTicks: false,
                                drawBorder: false,
                            },
                            ticks: {
                                padding: 15,
                                max: 100,
                                min: 0,
                                callback: function (value, index, ticks) {
                                    return value;
                                }
                            },
                        },
                        xAxes:
                            {
                                grid: {
                                    drawBorder: false,
                                    color: "rgba(143, 146, 161, .1)",
                                    zeroLineColor: "rgba(143, 146, 161, .1)",
                                },
                                ticks: {
                                    padding: 10,
                                },
                            },
                    },
                },
            });
        }
    </script>
@stop