{% extends "admin/partial/layout_logged_in.html.twig" %}

{% block title %}Dashboard{% endblock %}
{% block selected_page %}dashboard{% endblock %}
{% block selected_sub_page %}dashboard{% endblock %}

{% block body %}
<script>
// check for script upgrades
    $(document).ready(function () {
        $.ajax({
            url: "{{ ADMIN_WEB_ROOT }}/ajax/check_for_upgrade",
            dataType: "json"
        }).done(function (response) {
            if (typeof(response['core']) != "undefined")
            {
                showInfo("There is an update available to "+response['core']['latest_version']+" of your core script. <a href='system_update'>Click here</a> to start the upgrade process.");
            }
        });

        loadCharts();
    });

    function loadCharts()
    {
        $('#wrapper_14_day_chart').load('{{ ADMIN_WEB_ROOT }}/ajax/dashboard_chart_14_day_chart');
        $('#wrapper_file_status_chart').load('{{ ADMIN_WEB_ROOT }}/ajax/dashboard_chart_file_status_chart');
        $('#wrapper_12_month_chart').load('{{ ADMIN_WEB_ROOT }}/ajax/dashboard_chart_12_months_chart');
        $('#wrapper_file_type_chart').load('{{ ADMIN_WEB_ROOT }}/ajax/dashboard_chart_file_type_chart');
        $('#wrapper_14_day_users').load('{{ ADMIN_WEB_ROOT }}/ajax/dashboard_chart_14_day_users');
        $('#wrapper_user_status_chart').load('{{ ADMIN_WEB_ROOT }}/ajax/dashboard_chart_user_status_chart');
    }
</script>

<!-- page content -->
<div class="right_col" role="main">
    <!-- top tiles -->
    <div class="row tile_count">
        <div class="col-md-{{ topBoxSize }} col-sm-4 col-xs-6 tile_stats_count">
            <a href="file_manage">
                <span class="count_top"><i class="fa fa-file-o"></i> Active Files</span>
                <div class="count green">{{ totalActiveFiles }}</div>
            </a>
        </div>
        <div class="col-md-{{ topBoxSize }} col-sm-4 col-xs-6 tile_stats_count">
            <a href="{% if Auth.hasAccessLevel(20) == true %}server_manage{% else %}#{% endif %}">
                <span class="count_top"><i class="fa fa-clock-o"></i> Total Space Used</span>
                <div class="count green">{{ totalHDSpaceFormatted }}</div>
            </a>
        </div>
        <div class="col-md-{{ topBoxSize }} col-sm-4 col-xs-6 tile_stats_count">
            <a href="file_manage">
                <span class="count_top"><i class="fa fa-download"></i> Total Downloads</span>
                <div class="count green">{{ totalDownloads }}</div>
            </a>
        </div>
        {% if Auth.hasAccessLevel(20) == true %}        
            <div class="col-md-{{ topBoxSize }} col-sm-4 col-xs-6 tile_stats_count">
                <a href="user_manage?filterByAccountStatus=active">
                    <span class="count_top"><i class="fa fa-user"></i> Total Registered<span class="paid-account-option">/Paid Users</span></span>
                    <div class="count green">{{ totalRegisteredUsers }}<font class="paid-account-option">/{{ totalPaidUsers }}</font></div>
                </a>
            </div>
        {% endif %}
        
        <div class="col-md-{{ topBoxSize }} col-sm-4 col-xs-6 tile_stats_count file-pending-reports">
            <a href="file_report_manage?filterByReportStatus=pending">
                <span class="count_top"><i class="fa fa-support"></i> Pending Reports</span>
                <div class="count green">{{ totalReports }}</div>
            </a>
        </div>
        
        {% if Auth.hasAccessLevel(20) == true %} 
        {% if payments30Days|length == 0 %}
        <div class="col-md-{{ topBoxSize }} col-sm-4 col-xs-6 tile_stats_count paid-account-option">
            <a href="payment_manage">
                <span class="count_top"><i class="fa fa-credit-card"></i> 30 Day Payments</span>
                <div class="count green">{{ SITE_CONFIG_COST_CURRENCY_SYMBOL }} 0</div>
 
            </a>
        </div>
        {% else %}
            {% for payments30Day in payments30Days %}
            <div class="col-md-{{ topBoxSize }} col-sm-4 col-xs-6 tile_stats_count">
                <a href="payment_manage" class="paid-account-option">
                    <span class="count_top"><i class="fa fa-credit-card"></i> 30 Day Payments</span>
                    <div class="count green">{{ payments30Day['total']|number_format(0, '.', '') }} {{ payments30Day['currency_code'] }}</div>
                </a>
            </div>
            {% endfor %}
        {% endif %}
        {% endif %}
        <div class="clear"></div>
    </div>
    <!-- /top tiles -->

    <div class="row">
        <div class="col-md-8 col-sm-8 col-xs-12">
            <div class="x_panel tile fixed_height_320">
                <div class="x_title">
                    <h2>New Files <small>Last 14 Days</small></h2>
                    <div class="clearfix"></div>
                </div>

                <div class="x_content">
                    <div id="placeholder33" style="height: 234px; display: none" class="demo-placeholder"></div>
                    <div style="width: 100%;">
                        <div id="canvas_dahs" class="demo-placeholder" style="width: 100%; height:244px;"></div>
                    </div>
                    <span id="wrapper_14_day_chart"></span>
                </div>
            </div>
        </div>
        
        
        <div class="col-md-4 col-sm-4 col-xs-12">
            <div class="x_panel tile fixed_height_320 wrapper_file_status_chart">
                <div class="x_title">
                    <h2>File Status</h2>
                    <div class="clearfix"></div>
                </div>
                <div class="x_content">
                    <table class="" style="width:100%">
                        <tr>
                            <th style="width:37%;">
                                &nbsp;
                            </th>
                            <th>
                                <div class="col-lg-7 col-md-7 col-sm-7 col-xs-7">
                                    <p class="">Status</p>
                                </div>
                                <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5 text-right">
                                    <p class="">Total Files</p>
                                </div>
                            </th>
                        </tr>
                        <tr>
                            <td>
                                <canvas id="canvas1" height="140" width="140" style="margin: 15px 10px 10px 0"></canvas>
                                <span id="wrapper_file_status_chart"></div>
                            </td>
                            <td>
                                <table class="tile_info">
                                    <tr>
                                        <td></td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
    </div>

    <br/>
    
    <div class="row">
        <div class="col-md-8 col-sm-8 col-xs-12">
            <div class="x_panel tile fixed_height_320">
                <div class="x_title">
                    <h2>New Files <small>Last 12 Months</small></h2>
                    <div class="clearfix"></div>
                </div>

                <div class="x_content">
                    <div id="placeholder33" style="height: 234px; display: none" class="demo-placeholder"></div>
                    <div style="width: 100%;">
                        <div id="canvas_dahs2" class="demo-placeholder" style="width: 100%; height:244px;"></div>
                    </div>
                    <span id="wrapper_12_month_chart"></span>
                </div>
            </div>
        </div>
        
        <div class="col-md-4 col-sm-4 col-xs-12">
            <div class="x_panel tile fixed_height_320 wrapper_file_type_chart">
                <div class="x_title">
                    <h2>File Type</h2>
                    <div class="clearfix"></div>
                </div>
                <div class="x_content">
                    <table class="" style="width:100%">
                        <tr>
                            <th style="width:37%;">
                                &nbsp;
                            </th>
                            <th>
                                <div class="col-lg-7 col-md-7 col-sm-7 col-xs-7">
                                    <p class="">Type</p>
                                </div>
                                <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5 text-right">
                                    <p class="">Total Files</p>
                                </div>
                            </th>
                        </tr>
                        <tr>
                            <td>
                                <canvas id="canvas2" height="140" width="140" style="margin: 15px 10px 10px 0"></canvas>
                                <span id="wrapper_file_type_chart"></div>
                            </td>
                            <td>
                                <table class="tile_info">
                                    <tr>
                                        <td></td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
    </div>
 
    {% if currentProduct != 'cloudable' %}
    <br />
    
    <div class="row">
        <div class="col-md-8 col-sm-8 col-xs-12">
            <div class="x_panel tile fixed_height_320">
                <div class="x_title">
                    <h2>New Users <small>Last 14 Days</small></h2>
                    <div class="clearfix"></div>
                </div>

                <div class="x_content">
                    <div id="placeholder33" style="height: 234px; display: none" class="demo-placeholder"></div>
                    <div style="width: 100%;">
                        <div id="canvas_dahs3" class="demo-placeholder" style="width: 100%; height:244px;"></div>
                    </div>
                    <span id="wrapper_14_day_users"></span>
                </div>
            </div>
        </div>
        
        <div class="col-md-4 col-sm-4 col-xs-12">
            <div class="x_panel tile fixed_height_320 wrapper_user_status_chart">
                <div class="x_title">
                    <h2>User Status</h2>
                    <div class="clearfix"></div>
                </div>
                <div class="x_content">
                    <table class="" style="width:100%">
                        <tr>
                            <th style="width:37%;">
                                &nbsp;
                            </th>
                            <th>
                                <div class="col-lg-7 col-md-7 col-sm-7 col-xs-7">
                                    <p class="">Status</p>
                                </div>
                                <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5 text-right">
                                    <p class="">Total Users<p>
                                </div>
                            </th>
                        </tr>
                        <tr>
                            <td>
                                <canvas id="canvas3" height="140" width="140" style="margin: 15px 10px 10px 0"></canvas>
                                <span id="wrapper_user_status_chart"></div>
                            </td>
                            <td>
                                <table class="tile_info">
                                    <tr>
                                        <td></td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
    </div>
    {% endif %}
</div>
<!-- /page content -->

<!-- FastClick -->
<script src="{{ CORE_ASSETS_ADMIN_WEB_ROOT }}/vendors/fastclick/lib/fastclick.js"></script>
<!-- NProgress -->
<script src="{{ CORE_ASSETS_ADMIN_WEB_ROOT }}/vendors/nprogress/nprogress.js"></script>
<!-- Chart.js -->
<script src="{{ CORE_ASSETS_ADMIN_WEB_ROOT }}/vendors/Chart.js/dist/Chart.min.js"></script>
<!-- gauge.js -->
<script src="{{ CORE_ASSETS_ADMIN_WEB_ROOT }}/vendors/gauge.js/dist/gauge.min.js"></script>
<!-- bootstrap-progressbar -->
<script src="{{ CORE_ASSETS_ADMIN_WEB_ROOT }}/vendors/bootstrap-progressbar/bootstrap-progressbar.min.js"></script>
<!-- iCheck -->
<script src="{{ CORE_ASSETS_ADMIN_WEB_ROOT }}/vendors/iCheck/icheck.min.js"></script>
<!-- Skycons -->
<script src="{{ CORE_ASSETS_ADMIN_WEB_ROOT }}/vendors/skycons/skycons.js"></script>
<!-- Flot -->
<script src="{{ CORE_ASSETS_ADMIN_WEB_ROOT }}/vendors/Flot/jquery.flot.js"></script>
<script src="{{ CORE_ASSETS_ADMIN_WEB_ROOT }}/vendors/Flot/jquery.flot.pie.js"></script>
<script src="{{ CORE_ASSETS_ADMIN_WEB_ROOT }}/vendors/Flot/jquery.flot.time.js"></script>
<script src="{{ CORE_ASSETS_ADMIN_WEB_ROOT }}/vendors/Flot/jquery.flot.stack.js"></script>
<script src="{{ CORE_ASSETS_ADMIN_WEB_ROOT }}/vendors/Flot/jquery.flot.resize.js"></script>
<!-- Flot plugins -->
<script src="{{ CORE_ASSETS_ADMIN_WEB_ROOT }}/vendors/flot.orderbars/js/jquery.flot.orderBars.js"></script>
<script src="{{ CORE_ASSETS_ADMIN_WEB_ROOT }}/vendors/flot-spline/js/jquery.flot.spline.min.js"></script>
<script src="{{ CORE_ASSETS_ADMIN_WEB_ROOT }}/vendors/flot.curvedlines/curvedLines.js"></script>
<!-- DateJS -->
<script src="{{ CORE_ASSETS_ADMIN_WEB_ROOT }}/vendors/DateJS/build/date.js"></script>
<!-- JQVMap -->
<script src="{{ CORE_ASSETS_ADMIN_WEB_ROOT }}/vendors/jqvmap/dist/jquery.vmap.js"></script>
<script src="{{ CORE_ASSETS_ADMIN_WEB_ROOT }}/vendors/jqvmap/dist/maps/jquery.vmap.world.js"></script>
<script src="{{ CORE_ASSETS_ADMIN_WEB_ROOT }}/vendors/jqvmap/examples/js/jquery.vmap.sampledata.js"></script>
<!-- bootstrap-daterangepicker -->
<script src="{{ CORE_ASSETS_ADMIN_WEB_ROOT }}/vendors/moment/min/moment.min.js"></script>
<script src="{{ CORE_ASSETS_ADMIN_WEB_ROOT }}/vendors/bootstrap-daterangepicker/daterangepicker.js"></script>
{% endblock %}