{% extends 'admin_base.html.twig' %}

{% block body %}

    <div class="row">
        <div class="col-md-6 col-lg-3 grid-margin stretch-card">
            <div class="card bg-gradient-primary text-white text-center card-shadow-primary">
                <div class="card-body">
                    <h6 class="font-weight-normal">Total blogs</h6>
                    <h2 class="mb-0">{{ blogsCount }}</h2>
                </div>
            </div>
        </div>
        <div class="col-md-6 col-lg-3 grid-margin stretch-card">
            <div class="card bg-gradient-danger text-white text-center card-shadow-danger">
                <div class="card-body">
                    <h6 class="font-weight-normal">Total articles</h6>
                    <h2 class="mb-0">{{ postsCount }}</h2>
                </div>
            </div>
        </div>
        <div class="col-md-6 col-lg-3 grid-margin stretch-card">
            <div class="card bg-gradient-warning text-white text-center card-shadow-warning">
                <div class="card-body">
                    <h6 class="font-weight-normal">Sponsored articles</h6>
                    <h2 class="mb-0">{{ sponsoredPostsCount }}</h2>
                </div>
            </div>
        </div>
        <div class="col-md-6 col-lg-3 grid-margin stretch-card">
            <div class="card bg-gradient-info text-white text-center card-shadow-info">
                <div class="card-body">
                    <h6 class="font-weight-normal">Not sponsored</h6>
                    <h2 class="mb-0">{{ notSponsoredPostsCount }}</h2>
                </div>
            </div>
        </div>
    </div>


    <div class="row">
        <div class="col-lg-6 grid-margin stretch-card">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <h6 class="card-title">Latest blogs</h6>
                    </div>
                    {% for blog in latestBlogs %}
                        <div class="list d-flex align-items-center border-bottom py-3">
                            {% include 'admin/partials/_image_thumb.html.twig' with
                                {
                                    image: blog.image,
                                    thumb: 'blog_icon',
                                    class: 'img-sm rounded-circle'
                                } %}
                            <div class="wrapper w-100 ml-3">
                                <p><b>{{ blog.name }}</b></p>
                                <small class="text-muted">{{ blog.createdAt | ago }}</small>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>
        <div class="col-lg-6 grid-margin stretch-card">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">Sponsored stat</h4>
                    <div class="google-chart-container">
                        <div id="Donut-chart" class="google-charts"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-12 grid-margin stretch-card">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">Daily articles graph</h4>
                    <div class="google-chart-container">
                        <canvas id="lineChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="row grid-margin">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">Latest posts</h4>
                    <div class="table-responsive mt-2">
                        <table class="table mt-3 border-top">
                            <thead>
                            <tr>
                                <th>Id</th>
                                <th>Title</th>
                                <th width="140">Blog</th>
                                <th width="80">Country</th>
                                <th width="120">Time</th>
                                <th>Status</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for post in latestPosts %}

                                {% if post.sponsored %}
                                    {% set color = 'danger' %}
                                    {% set label = 'Sponsored' %}
                                {% else %}
                                    {% set color = 'success' %}
                                    {% set label = 'Not sponsored' %}
                                {% endif %}

                                <tr>
                                    <td>{{ post.id }}</td>
                                    <td>
                                        <a class="text-black" href="{{ post.url }}" target="_blank">
                                            {{ post.title }}
                                        </a>
                                    </td>
                                    <td>
                                        <a class="text-black" href="{{ post.blog.url }}" target="_blank">
                                            {{ post.blog.name }}
                                        </a>
                                    </td>
                                    <td align="center">{{ post.blog.country }}</td>
                                    <td>{{ post.createdAt | ago }}</td>
                                    <td>
                                        <div class="text-white badge badge-{{ color }} badge-fw">{{ label }}</div>
                                    </td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

{% endblock %}


{% block javascripts %}

    {{ parent() }}
    <script src="{{ asset('js/admin/dashboard.js') }}"></script>
    <script type="text/javascript">

        // Donut Chart Starts

        google.charts.load('current', {
            packages: [ 'corechart' ],
        });
        google.charts.setOnLoadCallback(drawChart);

        function drawChart() {
            var data = google.visualization.arrayToDataTable([
                [ 'Sponsored', 'Percentage' ],
                [ 'Sponsored', {{ sponsoredPostsCount }} ],
                [ 'Not sponsored', {{ notSponsoredPostsCount }} ],
            ]);

            var options = {
                title: 'Sponsored split',
                pieHole: 0.4,
                colors: [ '#E91E63', '#7571f9' ],
                chartArea: {
                    width: 500,
                },
            };

            var Donutchart = new google.visualization.PieChart(document.getElementById('Donut-chart'));
            Donutchart.draw(data, options);
        }

        // Donut Chart Ends


    </script>

    <script type="text/javascript">

        (function ($) {
            'use strict';

            //line chart
            var ctx     = document.getElementById('lineChart');
            ctx.height  = 100;
            var myChart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: [ {{ dates | slice(0, -2) | raw }} ],
                    datasets: [
                        {
                            label: 'Articles',
                            borderColor: 'rgba(255, 92, 117,.9)',
                            borderWidth: '1',
                            backgroundColor: 'rgb(255, 92, 117, .17)',
                            data: [ {{ postsPerDates | slice(0, -2) }} ],
                        },
                    ],
                },
                options: {
                    responsive: true,
                    tooltips: {
                        mode: 'index',
                        intersect: false,

                    },
                    tooltips: {},
                    hover: {
                        mode: 'nearest',
                        intersect: true,
                    },
                },
            });

        })(jQuery);

    </script>

{% endblock %}