{% 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 %}
