{extends "Data/statistics.tpl"}
{block name="minifiedStats"}
    <li class="sparks-info">
        <h5> Downloads <span class="txt-color-purple"><i class="fa fa-download"></i>&nbsp;{$allDownloads}</span></h5>
        <div class="sparkline txt-color-purple hidden-mobile hidden-md hidden-sm">
            {foreach item=dl from=$downloadArray name=downloads}
                {$dl.visit_count}{if $smarty.foreach.downloads.last}{else},{/if}
            {/foreach}
        </div>
    </li>
    <li class="sparks-info">
        <h5> Besucher <span class="txt-color-green"><i class="fa fa-users"></i>&nbsp;{$allVisitors}</span></h5>
        <div class="sparkline txt-color-green hidden-mobile hidden-md hidden-sm">
            {foreach item=visit from=$visitorArray name=visitors}
                {$visit.visit_count}{if $smarty.foreach.visitors.last}{else},{/if}
            {/foreach}
        </div>
    </li>
{/block}
{block name="body"}
    <section id="widget-grid" class="">
        <div class="row">
                <article class="col-sm-6">
                    <div class="jarviswidget jarviswidget-color-blueLight" id="wid-id-0" data-widget-togglebutton="false" data-widget-editbutton="false" data-widget-fullscreenbutton="false" data-widget-colorbutton="false" data-widget-deletebutton="false">
                        <header>
                            <span class="widget-icon"> <i class="fa fa-line-chart txt-color-darken"></i> </span>
                            <h2>Besucher pro Tag Statistik</h2>
                        </header>

                        <div class="no-padding">

                            <div class="widget-body">
                                <canvas id="userLineChart" height="100"></canvas>

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

                <article class="col-sm-6">
                    <div class="jarviswidget jarviswidget-color-blueLight" id="wid-id-1" data-widget-togglebutton="false" data-widget-editbutton="false" data-widget-fullscreenbutton="false" data-widget-colorbutton="false" data-widget-deletebutton="false">

                        <header>
                            <span class="widget-icon"> <i class="fa fa-info-circle txt-color-darken"></i> </span>
                            <h2>Statistik</h2>
                        </header>

                        <div class="no-padding">

                            <div class="widget-body" style="padding-top: 20px;">
                                <table class="table table-bordered">
                                    <thead>
                                        <tr>
                                            <th>Bezeichnung:</th>
                                            <th>Gesamt:</th>
                                            <th>Letzte 7 Tage</th>
                                            <th>Letzten 30 Tage</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>Downloads:</td>
                                            <td><span class="btn btn-xs btn-default" id="allDls">{$allDownloads}</span></td>
                                            <td><span class="label label-danger">Coming Soon</span></td>
                                            <td><span class="label label-danger">Coming Soon</span></td>
                                        </tr>
                                        <tr>
                                            <td>Besucher:</td>
                                            <td><span class="btn btn-xs btn-default" id="allVisits">{$allVisitors}</span></td>
                                            <td><span class="label label-danger">Coming Soon</span></td>
                                            <td><span class="label label-danger">Coming Soon</span></td>
                                        </tr>
                                        <tr>
                                            <td>Traffic:</td>
                                            <td>{$traffic} GB</td>
                                            <td><span class="label label-danger">Coming Soon</span></td>
                                            <td><span class="label label-danger">Coming Soon</span></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </article>
        </div>
        <div class="row" id="ajaxReq">
            {block name="ajaxAppend"}{/block}
        </div>
    </section>
{/block}
{block name="additionalJSFiles"}
    <script src="lib/SmartAdmin/js/plugin/chartjs/chart.min.js"></script>
{/block}
{block name="additionalJSCode"}
        var userCtx = document.getElementById("userLineChart").getContext("2d");

        var userLineConfig = {
            type: 'line',
            data: {
                labels: {$stats->getDateLabels()},
                datasets:[
                    {
                        label: 'Besucher pro Tag',
                        data: {$stats->getUserDateRows()|json_encode},
                        backgroundColor: 'rgba(107,176,255,0.5)',
                        borderColor: 'rgba(107,176,255,1)'
                    },
                    {
                        label: 'Downloads pro Tag',
                        data: {$stats->getDownloadDateRows()|json_encode},
                        backgroundColor: 'rgba(191,63,63,0.5)',
                        borderColor: 'rgba(191,63,63,1)'
                    }
                ]
            },
            options: {
                responsive: true,
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true,
                            stepSize: 10
                        }
                    }]
                },

                tooltips: {
                    mode: 'label'
                },
                hover: {
                    mode: 'dataset'
                }
            }
        };
        window.userLine = new Chart(userCtx, userLineConfig);
{/block}