{% extends "base.html" %}

{% load i18n %}

{% block content %}
<div class="card">
<div class="card-header text-center">
    <h1>{{ title }}</h1>
</div>
<div class="card-body">
    {% for of in orders %}
        <div class="card mb-4">
            <div class="card-header text-center">
                <h3>{{ of.order.note }}</h3>
            </div>
            <div class="card-body">
                <dl class="row">
                    <dt class="col-xl-3">{% trans 'date'|capfirst %}</dt>
                    <dd class="col-xl-9">{{ of.order.date }}</dd>

                    {% if of.number > 1 %}
                        <dt class="col-xl-3">{% trans 'order number'|capfirst %}</dt>
                        <dd class="col-xl-9">{{ of.number }}</dd>
                    {% endif %}

                    {% if of.priority %}
                        <dt class="col-xl-3">{% trans 'priority request'|capfirst %}</dt>
                        <dd class="col-xl-9">{{ of.priority }}</dd>
                    {% endif %}

                    {% if of.remark %}
                        <dt class="col-xl-3">{% trans 'remark'|capfirst %}</dt>
                        <dd class="col-xl-9">{{ of.remark }}</dd>
                    {% endif %}

                    {% if of.options.count %}
                        <dt class="col-xl-3">{% trans 'options'|capfirst %}</dt>
                        <dd class="col-xl-9">{{ of.options.all|join:', ' }}</dd>
                    {% endif %}
                </dl>
            </div>
            <div class="card-footer text-center">
                {% if list_type != 'READY' %}
                    <a href="#" class="btn btn-success" onclick="setOrderStatus({{ of.pk }}, 'READY')">
                        {% trans "Mark as ready" %}
                    </a>
                {% endif %}
                {% if list_type != 'SERVED' %}
                    <a href="#" class="btn btn-primary" onclick="setOrderStatus({{ of.pk }}, 'SERVED')">
                        {% trans "Mark as served" %}
                    </a>
                {% endif %}
                {% if list_type != 'QUEUED' %}
                    <a href="#" class="btn btn-warning" onclick="setOrderStatus({{ of.pk }}, 'QUEUED')">
                        {% trans "Re-queue" %}
                    </a>
                {% endif %}
                {% if list_type != 'CANCELED' %}
                    <a href="#" class="btn btn-danger" onclick="setOrderStatus({{ of.pk }}, 'CANCELED')">
                        {% trans "Cancel" %}
                    </a>
                {% endif %}
            </div>
        </div>
    {% empty %}
        <div class="alert alert-warning">
            {% trans "There is no queued order." %}
        </div>
    {% endfor %}
</div>
</div>

<div class="card mt-5">
<div class="card-body">
    <h3>{% trans "Other waiting lists:" %}</h3>
    <ul>
        {% for other_food in food.sheet.food_set.all %}
            {% if other_food != food %}
                <li>
                    {% if list_type == 'QUEUED' %}
                        <a href="{% url 'sheets:queued_list' pk=other_food.pk %}">{{ other_food }}</a>
                    {% else %}
                        <a href="{% url 'sheets:ready_list' pk=other_food.pk %}">{{ other_food }}</a>
                    {% endif %}
                </li>
            {% endif %}
        {% endfor %}
    </ul>
</div>
<div class="card-footer text-center">
    {% if list_type != 'QUEUED' %}
        <a href="{% url 'sheets:queued_list' pk=food.pk %}" class="btn btn-primary">
            {% trans "Queued orders" %}
        </a>
    {% endif %}
    {% if list_type != 'READY' %}
        <a href="{% url 'sheets:ready_list' pk=food.pk %}" class="btn btn-success">
            {% trans "Ready orders" %}
        </a>
    {% endif %}
    {% if list_type != 'SERVED' %}
        <a href="{% url 'sheets:served_list' pk=food.pk %}" class="btn btn-secondary">
            {% trans "Served orders" %}
        </a>
    {% endif %}
    {% if list_type != 'CANCELED' %}
        <a href="{% url 'sheets:canceled_list' pk=food.pk %}" class="btn btn-danger">
            {% trans "Canceled orders" %}
        </a>
    {% endif %}
    <a href="{% url 'sheets:waiting_list' pk=food.pk %}" class="btn btn-primary">
        {% trans "Waiting list" %}
    </a>
    <a href="{% url 'sheets:sheet_detail' pk=food.sheet_id %}" class="btn btn-secondary">
        {% trans "Back to note sheet detail" %}
    </a>
</div>
</div>
{% endblock %}

{% block extrajavascript %}
    <script>
        function reload() {
            reloadWithTurbolinks()
            timeout = setTimeout(reload, 15000)
        }

        if (timeout === undefined)
            var timeout = setTimeout(reload, 15000)

        function setOrderStatus(ordered_food_id, status) {
            fetch('/api/sheets/orderedfood/' + ordered_food_id + '/', {
                method: 'PATCH',
                body: JSON.stringify({
                    status: status,
                    served_date: status === 'QUEUED' ? null : new Date().toISOString(),
                }),
                headers: {
                    'Content-Type': "application/json; charset=UTF-8",
                    'X-CSRFTOKEN': "{{ csrf_token }}"
                }
            }).then(response => response.json()).then(response => {
                if ('detail' in response)
                    addMsg("{% trans "An error occurred" %}" + " : " + response['detail'], "danger")
                else {
                    clearTimeout(timeout)
                    reload()
                }
            })
        }
    </script>
{% endblock %}