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

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

{% block title %}
    {% trans "Orders" %} | {{ block.super }}
{% endblock %}

{% block breadcrumbs %}
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{% url 'dashboard:index' %}">{% trans "Dashboard" %}</a></li>
            <li class="breadcrumb-item active" aria-current="page">{% trans "Orders" %}</li>
        </ol>
    </nav>
{% endblock %}

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

{% block dashboard_content %}
    <div class="table-header">
        <h3><i class="fas fa-search"></i> {% trans "Search" %}</h3>
    </div>
    <div class="card card-body bg-light">
        <form method="get" class="form-inline" id="search_form">
            {% for field in form %}
                {% if "order" in field.id_for_label %}
                    {% if field.is_hidden %}
                        {% render_field field class+='form-control' %}
                    {% else %}
                        <div class="form-group mr-2">
                            {{ field.label_tag }}
                            {% render_field field class+='form-control' %}
                            {% for error in field.errors %}
                                <ul class="error-block">
                                    <li>{{ error }}</li>
                                </ul>
                            {% endfor %}
                        </div>
                    {% endif %}
                {% endif %}
            {% endfor %}
            <input type="submit" value="{% trans "Search" %}" class="btn btn-primary mr-2" />
            <a data-toggle="modal" data-target="#SearchModal" href="#">{% trans "Advanced Search" %}</a>
        </form>

        {# Search modal, if there are form errors the form is automatically openend #}
        {% include "oscar/dashboard/partials/advanced_search_modal.html" with form=form style='horizontal' %}

        {% if search_filters %}
        <div class="search-filter-list">
            <label>Filters:</label>
            {% for filter in search_filters %}
            <span class="badge badge-success">{{ filter }}</span>
            {% endfor %}
        </div>

        {% endif %}
    </div>

    {% if orders %}
        <form method="post" class="order_table" id="orders_form">
            {% csrf_token %}

            {% block order_list %}
            <table class="table table-striped table-bordered table-hover">
                <caption>
                    <h3 class="float-left"><i class="fas fa-shopping-cart"></i>
                        {% if search_filters %}
                        {% trans "Order Search Results" %}
                        {% else %}
                        {% trans "All Orders" %}
                        {% endif %}
                    </h3>
                    <div class="float-right">
                        <div class="form-inline">
                            <label>{% trans "Download selected orders as a CSV" %}</label>
                            <button type="submit" class="btn btn-primary" name="action" value="download_selected_orders" data-loading-text="{% trans 'Submitting...' %}">{% trans "Download" %}</button>
                        </div>
                    </div>
                </caption>

                <thead>
                    <tr>
                        <th></th>
                        <th>{% anchor 'number' _("Order number") %}</th>
                        <th>{% anchor 'total_incl_tax' _("Total inc tax") %}</th>
                        <th>{% trans "Number of items" %}</th>
                        <th>{% trans "Status" %}</th>
                        <th>{% trans "Customer" %}</th>
                        <th>{% trans "Shipping address" %}</th>
                        <th>{% trans "Billing address" %}</th>
                        <th>{% trans "Date of purchase" %}</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                {% for order in orders %}
                    <tr>
                        <td><input type="checkbox" name="selected_order" class="selected_order" value="{{ order.id }}"/></td>
                        <td><a href="{% url 'dashboard:order-detail' number=order.number %}">{{ order.number }}</a></td>
                        <td>{{ order.total_incl_tax|currency:order.currency }}</td>
                        <td>{{ order.num_items }}</td>
                        <td>{{ order.status|default:"-" }}</td>
                        <td>
                            {% if order.guest_email %}
                                {{ order.guest_email }}
                            {% elif order.user %}
                                <a href="{% url 'dashboard:user-detail' pk=order.user.id %}">{{ order.user.get_full_name|default:order.user.email }}</a>
                            {% else %}
                                &lt;{% trans "Deleted" %}&gt;
                            {% endif %}
                        </td>
                        <td>{{ order.shipping_address|default:"-" }}</td>
                        <td>{{ order.billing_address|default:"-" }}</td>
                        <td>{{ order.date_placed }}</td>
                        <td>
                            <a class="btn btn-secondary" href="{% url 'dashboard:order-detail' number=order.number %}">{% trans "View" %}</a>
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
            {% endblock order_list %}
            {% block order_actions %}
                <div class="card card-body bg-light">
                    <h3><i class="fas fa-exclamation-circle"></i> {% trans "Change order status" %}:</h3>
                    {% if order_statuses %}
                        <div class="form-group">
                            <div class="controls">
                                <select name="new_status">
                                    <option value=""> -- {% trans "choose new status" %} -- </option>
                                    {% for status in order_statuses %}
                                        <option>{{ status }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                        <div class="flex-nowrap">
                            <button type="submit" name="action" value="change_order_statuses" class="btn btn-primary" data-loading-text="{% trans 'Changing...' %}">
                                {% trans "Change status" %}
                            </button>
                        </div>
                    {% else %}
                        {% trans "This order can't have its status changed." %}
                    {% endif %}
                </div>
            {% endblock %}

            {% include "oscar/dashboard/partials/pagination.html" %}
        </form>
    {% else %}
        <table class="table table-striped table-bordered">
            <caption><i class="fas fa-shopping-cart"></i>
                {% if search_filters %}
                {% trans "Order Search Results" %}
                {% else %}
                {% trans "All Orders" %}
                {% endif %}
            </caption>
            <tr><td>{% trans "No orders found." %}</td></tr>
        </table>
    {% endif %}

    {% endblock dashboard_content %}

    {% block onbodyload %}
        {{ block.super }}
        oscar.dashboard.orders.initTable();
        {% if form.errors %}
        $('#SearchModal').modal('show');
        {% endif %}
    {% endblock onbodyload %}
