{% extends 'dashboard/layout.html' %}
{% load currency_filters %}

{% block body_class %}orders{% endblock %}

{% block breadcrumbs %}
<ul class="breadcrumb">
    <li>
        <a href="{% url dashboard:index %}">Dashboard</a>
        <span class="divider">/</span>
    </li>
    <li class="active"><a href=".">Home</a></li>
</ul>
{% endblock %}

{% block header %}
<div class="page-header">
    <h1>Dashboard</h1>
</div>
{% endblock %}

{% block dashboard_content %}

<div class="sub-header">
	<h2>Last 24 hours</h2>
</div>

<div class='row-fluid'>
    <div class="span12">
        <div id="order-graph">
            <div class='bar-caption'><h1>Latest Orders (Hourly)</h1></div>
            <div class='bar-y-axis'>
                <ul>
                {% for y_value in hourly_report_dict.y_range %}
                    <li><span>{{ y_value|currency }}</span></li>
                {% endfor %}
                </ul>
            </div>
            <dl class='bar-chart'> 
                {% for item in hourly_report_dict.order_total_hourly %}
                    <dd class='bar-layer'>
                        <em>{{ item.end_time|date:"G:i" }}</em>
                        <span style="height: {{ item.percentage }}%;" >
                            <p{% if item.percentage == 0 %} style="display: none;"{% endif %}>{{ item.total_incl_tax|currency }}</p>
                        </span>
                    </dd>
                {% endfor %}
            </dl>
        </div>
    </div>
</div>

<div class='row-fluid'>
    <div class="span6">
        <table class="table table-striped table-bordered">
                <caption>Order stats for last 24 hours</caption>
                <tr>
                        <th class="span10">Total orders</th>
                        <td class="span2" >{{ total_orders_last_day }}</td>
                </tr>
                <tr>
                        <th class="span10">Total lines</th>
                        <td class="span2" >{{ total_lines_last_day }}</td>
                </tr>
                <tr>
                        <th class="span10">Total revenue</th>
                        <td class="span2" >{{ total_revenue_last_day|currency }}</td>
                </tr>
                <tr>
                        <th class="span10">Average order costs</th>
                        <td class="span2" >{{ average_order_costs|currency }}</td>
                </tr>
        </table>
    </div>

    <div class="span6">
        <table class="table table-striped table-bordered">
            <caption>Customers</caption>
            <tr>
                <th class="span10">Total customers</th>
                <td class="span2" >{{ total_customers }}</td>
            </tr>
            <tr>
                <th class="span10">New customers</th>
                <td class="span2" >{{ total_customers_last_day }}</td>
            </tr>
            <tr>
                <th class="span10">Total <em>open</em> baskets</th>
                <td class="span2" >{{ total_open_baskets_last_day }}</td>
            </tr>
        </table>
    </div>
</div>

<div class="sub-header">
	<h2>All time</h2>
</div>

<div class='row-fluid'>
    <div class="span6">
        <table class="table table-striped table-bordered">
            <caption>Orders</caption>
            <tr>
                    <th class="span10">Total orders</th>
                    <td class="span2" >{{ total_orders }}</td>
            </tr>
            <tr>
                    <th class="span10">Total lines</th>
                    <td class="span2" >{{ total_lines }}</td>
            </tr>
            <tr>
                    <th class="span10">Total revenue</th>
                    <td class="span2" >{{ total_revenue|currency }}</td>
            </tr>
            <tr>
                <th class="span10">Total <em>open</em> baskets</th>
                <td class="span2" >{{ total_open_baskets }}</td>
            </tr>
        </table>
		<p><a href="{% url dashboard:order-list %}" class="btn">Manage orders</a></p>
    </div>

    <div class="span6">
        <table class="table table-striped table-bordered">
                <caption>Catalogue and stock</caption>
                <tr>
                        <th class="span10">Total products</th>
                        <td class="span2" >{{ total_products }}</td>
                </tr>
                <tr>
                        <th class="span10"><em>Open</em> stock alerts</th>
                        <td class="span2" >{{ total_open_stock_alerts }}</td>
                </tr>
                <tr>
                        <th class="span10"><em>Closed</em> stock alerts</th>
                        <td class="span2" >{{ total_closed_stock_alerts }}</td>
                </tr>
        </table>
		<p><a href="{% url dashboard:catalogue-product-list %}" class="btn">Manage catalogue</a>
		   <a href="{% url dashboard:stock-alert-list %}" class="btn">View stock alerts</a></p>

        <table class="table table-striped table-bordered">
            <caption>Offers, vouchers and promotions</caption>
            <tr>
                <th class="span10">Active <em>Site</em> Offers</th>
                <td class="span2" >{{ total_site_offers }}</td>
            </tr>
            <tr>
                <th class="span10">Active <em>Vouchers</em></th>
                <td class="span2" >{{ total_vouchers }}</td>
            </tr>
                <th class="span10">Promotions</em></th>
                <td class="span2" >{{ total_promotions }}</td>
            </tr>
        </table>
    </div>
</div> 

{% endblock %}