{% extends "layout_default.phtml" %}

{% block meta_title %}{% trans 'Statistics' %}{% endblock %}

{% block content %}

<div class="widgets">
    <div class="left">
        <div class="widget nomargin">
            <div class="head"><h5 class="iChart8">{% trans 'Website statistic' %}</h5></div>
            {% set stats = admin.stats_get_summary %}
            {% set income = admin.stats_get_summary_income %}
            <table cellpadding="0" cellspacing="0" width="100%" class="tableStatic">
                <thead>
                    <tr>
                      <td>{% trans 'Metric' %}</td>
                      <td width="25%">{% trans 'Total' %}</td>
                      <td width="25%">{% trans 'This Month' %}</td>
                      <td width="25%">{% trans 'Today' %}</td>
                    </tr>
                </thead>
                
                <tbody>
                    <tr>
                        <td>{% trans 'Income' %}</td>
                        <td align="center"><a href="{{ 'index'|alink }}" title="" class="webStatsLink">{{ mf.currency_format(income.total) }}</a></td>
                        <td align="center"><a href="{{ 'index'|alink }}" title="" class="webStatsLink">{{ mf.currency_format(income.this_month) }}</a></td>
                        <td align="center"><a href="{{ 'index'|alink }}" title="" class="webStatsLink">{{ mf.currency_format(income.today) }}</a></td>
                    </tr>
                    <tr>
                        <td>{% trans 'Clients' %}</td>
                        <td align="center"><a href="{{ 'client'|alink }}" title="" class="webStatsLink">{{ stats.clients_total }}</a></td>
                        <td align="center"><a href="{{ 'client'|alink }}" title="" class="webStatsLink">{{ stats.clients_this_month }}</a></td>
                        <td align="center"><a href="{{ 'client'|alink }}" title="" class="webStatsLink">{{ stats.clients_today }}</a></td>
                    </tr>
                    <tr>
                        <td>{% trans 'Orders' %}</td>
                        <td align="center"><a href="{{ 'order'|alink }}" title="" class="webStatsLink">{{ stats.orders_total }}</a></td>
                        <td align="center"><a href="{{ 'order'|alink }}" title="" class="webStatsLink">{{ stats.orders_this_month }}</a></td>
                        <td align="center"><a href="{{ 'order'|alink }}" title="" class="webStatsLink">{{ stats.orders_today }}</a></td>
                    </tr>
                    <tr>
                        <td>{% trans 'Invoices' %}</td>
                        <td align="center"><a href="{{ 'invoice'|alink }}" title="" class="webStatsLink">{{ stats.invoices_total }}</a></td>
                        <td align="center"><a href="{{ 'invoice'|alink }}" title="" class="webStatsLink">{{ stats.invoices_this_month }}</a></td>
                        <td align="center"><a href="{{ 'invoice'|alink }}" title="" class="webStatsLink">{{ stats.invoices_today }}</a></td>
                    </tr>
                    <tr>
                        <td>{% trans 'Tickets' %}</td>
                        <td align="center"><a href="{{ 'support'|alink }}" title="" class="webStatsLink">{{ stats.tickets_total }}</a></td>
                        <td align="center"><a href="{{ 'support'|alink }}" title="" class="webStatsLink">{{ stats.tickets_this_month }}</a></td>
                        <td align="center"><a href="{{ 'support'|alink }}" title="" class="webStatsLink">{{ stats.tickets_today }}</a></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    
    <div class="right">
        <div class="widget first">
            <div class="head">
                <h5 class="iDropper">{% trans 'Define date interval for graphs ' %}</h5>
            </div>
            <form method="get" action="" class="mainForm">
                <fieldset>
                    <div class="rowElem noborder">
                        <div class="formRight moreFields">
                            <ul>
                                <li style="width: 100px"><input type="text" name="date_from" value="{% if request.date_from %}{{ request.date_from|date('Y-m-d') }}{%endif%}" placeholder="{{ now|date('Y-m-d') }}" class="datepicker"/></li>
                                <li class="sep">-</li>
                                <li style="width: 100px"><input type="text" name="date_to" value="{% if request.date_to %}{{ request.date_to|date('Y-m-d') }}{%endif%}" placeholder="{{ now|date('Y-m-d') }}" class="datepicker"/></li>
                            </ul>
                        </div>
                        <div class="fix"></div>
                    </div>
                    <div class="rowElem noborder">
                        <input type="submit" value="{% trans 'Update graphs' %}" class="greyishBtn" />
                        <div class="fix"></div>
                    </div>
                </fieldset>
            </form>
        </div>
    </div>
    <div class="fix"></div>
</div>

<div class="widget">
    <div class="head">
        <h5 class="iGraph">{% trans 'Income' %}</h5>
    </div>
    <div class="body">
        <div id="graph-income" style="width: 700px; height: 200px;"></div>
    </div>
</div>

<div class="widget">
    <div class="head">
        <h5 class="iGraph">{% trans 'Orders' %}</h5>
    </div>
    <div class="body">
        <div id="graph-orders" style="width: 700px; height: 200px;"></div>
    </div>
</div>

<div class="widget">
    <div class="head">
        <h5 class="iGraph">{% trans 'Invoices' %}</h5>
    </div>
    <div class="body">
        <div id="graph-invoice" style="width: 700px; height: 200px;"></div>
    </div>
</div>

<div class="widget">
    <div class="head">
        <h5 class="iGraph">{% trans 'Clients' %}</h5>
    </div>
    <div class="body">
        <div id="graph-clients" style="width: 700px; height: 200px;"></div>
    </div>
</div>

<div class="widget">
    <div class="head">
        <h5 class="iGraph">{% trans 'Support tickets' %}</h5>
    </div>
    <div class="body">
        <div id="graph-tickets" style="width: 700px; height: 200px;"></div>
    </div>
</div>

<div class="widgets">
    <div class="left">
        <div class="widget">
            <div class="head">
                <h5 class="iGraph">{% trans 'Orders by status' %}</h5>
            </div>
            <div class="body">
                <div id="pie-orders" style="width: 316px; height: 316px; margin: 0 auto;"></div>
            </div>
        </div>
    </div>

    <div class="right">
        <div class="widget">
            <div class="head">
                <h5 class="iGraph">{% trans 'Income vs Refund' %}</h5>
            </div>
            <div class="body">
                <div id="pie-income-vs-refund" style="width: 316px; height: 316px; margin: 0 auto;"></div>
            </div>
        </div>
    </div>
    <div class="fix"></div>
</div>

{% endblock %}

{% block js %}
<script type="text/javascript" src="js/flot/jquery.flot.js"></script>
<script type="text/javascript" src="js/flot/jquery.flot.pie.js"></script>
<script type="text/javascript" src="js/flot/excanvas.min.js"></script>
<script type="text/javascript">

$(function() {
    setPlotData('graph-income', 'admin/stats/get_income');
    setPlotData('graph-orders', 'admin/stats/get_orders');
    setPlotData('graph-invoice', 'admin/stats/get_invoices');
    setPlotData('graph-clients', 'admin/stats/get_clients');
    setPlotData('graph-tickets', 'admin/stats/get_tickets');
    
    setPieData('pie-orders', 'admin/stats/get_orders_statuses');
    setPieData('pie-income-vs-refund', 'admin/stats/get_income_vs_refunds');
});

function setPlotData(id, url, andUrl) {
    api.get(url, {date_from:'{{request.date_from}}', date_to:'{{request.date_to}}'}, function(result){
        $.plot($("#"+id), [ result ] , {
              yaxis: {
                  min: 0,
                  tickDecimals: false
              },
              xaxis: {
                mode: "time",
                tickDecimals: false,
                timeformat: "%y-%m-%d"
              },
            colors: ["#afd8f8"],
            grid: {
                clickable: true,
            },
            series: {
                   lines: {
                        lineWidth: 2,
                        fill: true,
                        fillColor: { colors: [ { opacity: 0.6 }, { opacity: 0.2 } ] },
                        steps: false
                   }
                }
        });
    });
}

function setPieData(id, url) {
    api.get(url, {}, function(result){
        var d = [];
        $.each(result, function(title, value) {
            d.push({ label: title, data: [[1, value]]});
        });
        $.plot($("#"+id), d,
        {
			series: {
				pie: {
					show: true,
					radius:300,
					label: {
						show: true,
						formatter: function(label, series){
							return '<div style="font-size:11px;text-align:center;padding:2px;color:white;">'+label+'<br/>'+Math.round(series.percent)+'%</div>';
						},
						threshold: 0.1
					}
				}
			},
			legend: {
				show: false
			},
        });
    });
}
</script>
{% endblock %}