{% extends "layout.html" %}
{% set active_page = "orders" -%}
{% set order_items = order.group_by_user() -%}
{% set courier_or_admin = not current_user.is_anonymous() and (current_user.is_admin() or current_user.id == order.courier_id) -%}

{% import "utils.html" as util %}

{% block container %}
<div class="row">
    <div class="col-md-push-1 col-md-10 darker order_overview" id="info"><!-- Shitty html -->
        <h3 id="order-title">Order {{ order.id }}
        <div class="pull-right">
            {% if order.can_close(current_user.id) -%}
            <form action="{{ url_for('order_bp.close_order', order_id=order.id) }}" method="post" style="display:inline">
                <input type="submit" class="btn btn-danger" value="Close"></input>
            </form>
            {% endif %}{% if courier_or_admin %}
                <a class="btn btn-warning" href="{{ url_for('order_bp.order_edit', order_id=order.id) }}">Edit</a>
        {%- endif %}
        </div></h3>
        courier: {{ order.courier.username }}
        {% if order.courier == None and not current_user.is_anonymous() %}
        <form action="{{ url_for('order_bp.volunteer', order_id=order.id) }}" method="post" style="display:inline">
            <input type="submit" class="btn btn-primary btn-sm" value="Volunteer"></input>
        </form>
        {% endif %}
        <br/>
        location: <a href="{{ order.location.website }}">{{ order.location.name }}</a><br/>
        {% if order.location.telephone != None %}
            telephone: <a href="tel://{{ order.location.telephone }}">{{ order.location.telephone }}</a><br/>
        {% endif %}
        start: {{ order.starttime.strftime("%d/%m/%Y %H:%M") }}<br>
        {% if order.stoptime %}
            closing time: {{ order.stoptime.strftime("%H:%M") }} (<span class="time">{{  order.stoptime|countdown }}</span>)
        {% else %}open{% endif %}<br/>
        total price: {{ total_price|euro }} {% if courier_or_admin %}- remaining debts: {{ debts|euro }}{% endif %}
    </div>
    {% if form -%}
    <div class="col-md-push-1 col-md-10 darker order_order" id="form">
        <h4>Order:</h4>
        <form method="post" action="{{ url_for('order_bp.order_item_create', order_id=order.id) }}">
          <span class="pull-right">
            <a class="btn btn-primary" onclick="chooseRandom()">Choose for me</a>
          </span>
            {{ form.csrf_token }}
            <div class="form-group select2-container select2 {{ 'has-errors' if form.product_id.errors}}">
                {{ form.product_id.label(class='control-label') }}<br>
                {{ form.product_id(class='form-control select') }}
                {{ util.render_form_field_errors(form.product_id) }}
            </div>
            <div class="form-group {{ 'has-errors' if form.product_id.errors }}">
                {{ form.extra.label(class='control-label') }}<br>
                {{ form.extra(class='form-control', placeholder='Fill in extras, when applicable') }}
                {{ util.render_form_field_errors(form.extra) }}
            </div>
            {% if current_user.is_anonymous() %}
                <div class="form-group{{ ' has-error' if form.name.errors }}{{ ' required' if form.name.flags.required }}">
                    {{ form.name.label(class='control-label') }}
                    {{ form.name(class='form-control', placeholder='Fill in your name...') }}
                    {{ util.render_form_field_errors(form.name) }}
                </div>
            {% endif %}
            <div class="form-group" style="padding-top: 8px;">
                 {{ form.submit_button(class='btn btn-primary') }}
            </div>
        </form>
    </div>
    {%- endif %}
</div>
<div class="row" id="items">
    <div class="col-md-push-1 col-md-5 darker order_items" id="items-list">
        <h3>Items</h3>
        <table class="table table-hover table-condensed">
            <thead>
                <tr><th>Name</th><th>Item</th><th>Price</th>{% if courier_or_admin %}<th>Paid?</th>{% endif %}<th>Delete</th></tr>
            </thead>
            <tbody>
            {% for item in order.items -%}
                <tr>
                    <td>{{ item.get_name() }}</td>
                    <td><span title="{{ item.extra if item.extra }}">{{ item.product.name }}{{ "*" if item.extra }}</span></td>
                    <td>{{ item.product.price|euro }}</td>
                    {% if courier_or_admin %}<td>{% if not item.paid %}
                      <form action="{{ url_for('order_bp.item_paid', order_id=order.id, item_id=item.id) }}" method="post" style="display:inline">
                          <input type="submit" class="btn btn-xs btn-primary" value="Pay"></input>
                      </form>
                    {% else %} <span class="glyphicon glyphicon-chevron-down"></span>
                    {% endif %}</td>
                    {% endif %}
                    <td>{% if item.can_delete(order.id, current_user.id, session.get('anon_name', '')) -%}
                      <form action="{{ url_for('order_bp.delete_item', order_id=order.id, item_id=item.id) }}" method="post" style="display:inline">
                          <button class="btn btn-link" type="submit"><span class="glyphicon glyphicon-remove"></span></button>
                      </form>
                    {%- endif %}<br/></td>
                </tr>
            {%- endfor %}
            </tbody>
        </table>
    </div>
    <div class="col-md-push-2 col-md-4 darker box order_ordered" id="items-ordered">
        <h3>Ordered products: {{ order.items.count() }}</h3>
        <a class="divLink" href="{{ url_for('order_bp.items_showcase', order_id=order.id) }}"></a>
        {% for key, value in order.group_by_product().items() -%}
            <div class="product">
                {{ key }}: {{ value["count"] }}
                {% if value["extras"] -%}
                    <div class="extras">
                    {% for extra in value["extras"] -%}
                        <div>- {{ extra }}</div>
                    {% endfor %}
                    </div>
                {%- endif %}
            </div>
        {%- endfor %}
    </div>
</div>
<div class="row">
    <div class="col-md-push-1 col-md-5 darker order_depts" id="debts">
            <h3>Debts</h3>
            <table class="table table-hover table-condensed">
                <thead>
                    <tr><th>Name</th><th>Total</th><th>To pay</th>{% if courier_or_admin %}<th>Paid?</th>{% endif %}</tr>
                </thead>
                <tbody>
                {% for key, value in order_items.items() -%}
                    <tr>
                        <td>{{ key }}</td>
                        <td>{{ value["total"]|euro }}</td>
                        <td>{{ value["to_pay"]|euro }}</td>
                        {% if courier_or_admin %}<td>{% if not value["to_pay"] == 0 %}
                          <form action="{{ url_for('order_bp.items_user_paid', order_id=order.id, user_name=key) }}" method="post" style="display:inline">
                              <input type="submit" class="btn btn-xs btn-primary" value="Pay"></input>
                          </form>
                          {% else %} <span class="glyphicon glyphicon-chevron-down"></span> {% endif %}</td>{% endif %}
                    </tr>
                {%- endfor %}
                </tbody>
            </table>
    </div>
</div>
{% endblock %}

{% block styles %}
    {{ super() }}
    <link rel="stylesheet" href="{{ url_for('static', filename='css/select2.min.css') }}" />
    <link rel="stylesheet" href="{{ url_for('static', filename='css/select2-bootstrap.min.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/print.css') }}">
{% endblock %}
{% block scripts %}
    {{ super() }}
    <script src="{{ url_for('static', filename='js/select2.min.js') }}"></script>
    <script type="text/javascript">
        var select = $('.select').select2({
            'sorter': function(results) {
                return results.sort();
            }
        });
        var options = select[0].options;
        function chooseRandom() {
          var index = Math.floor((Math.random() * options.length))
          var choice = options[index]
          select.val(choice.value).trigger("change")
        }
    </script>
{% endblock %}