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

{% block body_class %}{{ block.super }} orders home{% endblock %}

{% block extrahead %}
    {{ block.super }}
    <meta http-equiv="refresh" content="300">
{% endblock %}

{% block breadcrumbs %}
{% endblock %}

{% block headertext %}
{% trans "Dashboard" %}
{% endblock %}

{% block dashboard_content %}

<div class="table-header">
    <i class="fas fa-signal"></i> {% trans "Your Store Statistics" %}
</div>

<div class="content-block">
    <div class="row">
        <aside class="col-md-3 order-graph-details">
            <label><span><i class="fas fa-shopping-cart"></i>{{ total_orders_last_day }}</span>{% trans "Total Orders" %}</label>
            <label><span><i class="fas fa-hand-point-right"></i>{{ total_customers_last_day }}</span>{% trans "New Customers" %}</label>
            <label><span><i class="fas fa-users"></i>{{ total_customers }}</span>{% trans "Total Customers" %}</label>
            <label><span><i class="fas fa-briefcase"></i>{{ total_products }}</span>{% trans "Total Products" %}</label>
        </aside>
        <div class="col-md-9">
            <div id="order_graph">
                <div class="bar-caption"><h2>{% trans "Latest Orders (last 24 hours)" %}</h2></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|time }}</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>


<div class="row">
    <div class="col-md-4">
        <table class="table table-striped table-bordered table-hover">
            <caption><i class="fas fa-shopping-cart"></i> {% trans "Orders - Last 24 Hours" %}</caption>
            <tr>
                <th class="col-md-10">{% trans "Total orders" %}</th>
                <td class="col-md-2" >{{ total_orders_last_day }}</td>
            </tr>
            <tr>
                <th class="col-md-10">{% trans "Total lines" %}</th>
                <td class="col-md-2" >{{ total_lines_last_day }}</td>
            </tr>
            <tr>
                <th class="col-md-10">{% trans "Total revenue" %}</th>
                <td class="col-md-2" >{{ total_revenue_last_day|currency }}</td>
            </tr>
            <tr>
                <th class="col-md-10">{% trans "Average order costs" %}</th>
                <td class="col-md-2" >{{ average_order_costs|currency }}</td>
            </tr>
        </table>
    </div>

    <div class="col-md-4">
        <table class="table table-striped table-bordered table-hover">
            <caption>
                <a href="{% url 'dashboard:order-list' %}" class="btn btn-secondary float-right">
                    <i class="fas fa-shopping-cart"></i> {% trans "Manage" %}
                </a>
                <i class="fas fa-shopping-cart"></i> {% trans "Orders - All Time" %}
            </caption>
            <tr>
                <th class="col-md-10">{% trans "Total orders" %}</th>
                <td class="col-md-2" >{{ total_orders }}</td>
            </tr>
            <tr>
                <th class="col-md-10">{% trans "Total lines" %}</th>
                <td class="col-md-2" >{{ total_lines }}</td>
            </tr>
            <tr>
                <th class="col-md-10">{% trans "Total revenue" %}</th>
                <td class="col-md-2" >{{ total_revenue|currency }}</td>
            </tr>
            <tr>
                <th class="col-md-10">{% trans "Total <em>open</em> baskets" %}</th>
                <td class="col-md-2" >{{ total_open_baskets }}</td>
            </tr>
        </table>
    </div>

    <div class="col-md-4">
        <table class="table table-striped table-bordered table-hover">
            <caption><i class="fas fa-users"></i> {% trans "Customers" %}</caption>
            <tr>
                <th class="col-md-10">{% trans "Total customers" %}</th>
                <td class="col-md-2" >{{ total_customers }}</td>
            </tr>
            <tr>
                <th class="col-md-10">{% trans "New customers" %}</th>
                <td class="col-md-2" >{{ total_customers_last_day }}</td>
            </tr>
            <tr>
                <th class="col-md-10">{% trans "Total <em>open</em> baskets" %}</th>
                <td class="col-md-2" >{{ total_open_baskets_last_day }}</td>
            </tr>
        </table>
    </div>
</div>

<div class="row">
    <div class="col-md-6">
        <table class="table table-striped table-bordered table-hover">
            <caption>
                <div class="btn-toolbar float-right">
                    <div class="btn-group">
                        <a href="{% url 'dashboard:catalogue-product-list' %}" class="btn btn-secondary">
                            <i class="fas fa-sitemap"></i> {% trans "Manage" %}
                        </a>
                    </div>
                    <div class="btn-group ml-2">
                        <a href="{% url 'dashboard:stock-alert-list' %}" class="btn btn-secondary">
                            <i class="fas fa-sitemap"></i> {% trans "View Stock Alerts" %}
                        </a>
                    </div>
                </div>
                <i class="fas fa-sitemap"></i> {% trans "Catalogue and stock" %}
            </caption>
            <tr>
                <th class="col-md-10">{% trans "Total products" %}</th>
                    <td class="col-md-2" >{{ total_products }}</td>
            </tr>
            <tr>
                <th class="col-md-10">{% trans "<em>Open</em> stock alerts" %}</th>
                    <td class="col-md-2" >{{ total_open_stock_alerts }}</td>
            </tr>
            <tr>
                <th class="col-md-10">{% trans "<em>Closed</em> stock alerts" %}</th>
                    <td class="col-md-2" >{{ total_closed_stock_alerts }}</td>
            </tr>
        </table>
    </div>
    <div class="col-md-6">
        {% if user.is_staff %}
        <table class="table table-striped table-bordered table-hover">
            <caption><i class="fas fa-gift"></i> {% trans "Offers, vouchers" %}</caption>
            {% for offer_map in offer_maps %}
            <tr>
                <th class="col-md-10">{% blocktrans with offer_type=offer_map.offer_type %}Active <em>{{ offer_type }}</em> Offers{% endblocktrans %}</th>
                <td class="col-md-2" >{{ offer_map.count }}</td>
            </tr>
            {% endfor %}
            <tr>
                <th class="col-md-10">{% trans "Active <em>Vouchers</em>" %}</th>
                <td class="col-md-2" >{{ total_vouchers }}</td>
            </tr>
        </table>
        {% endif %}
    </div>
</div>

{% endblock %}
