{% extends 'admin_dash/base.html' %}

{% load static %}
{% load humanize %}
{% block content %}

<div class="content-wrapper">
    <div class="content">
        {% for msg in messages%}
        <label class="text-{{msg.tags}} text-center col-12" style="text-align: center;">{{msg}}</label>
        {% endfor%}

        <div class="row">
            <div class="col-12">
                <!-- Recent Order Table -->
                <div class="card card-table-border-none" id="recent-orders">
                    <div class="card-header justify-content-between">
                        <h2>All Orders</h2>

                    </div>
                    <div class="card-body pt-0 pb-5">
                        <table class="table card-table table-responsive table-responsive-large" style="width:100%">
                            <thead>
                                <tr>
                                    <th>Order ID</th>
                                    <th>Product Name</th>
                                    <th class="d-none d-md-table-cell">Units</th>
                                    <th class="d-none d-md-table-cell">Order Date</th>
                                    <th class="d-none d-md-table-cell">Order Cost</th>
                                    <th>Status</th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for order in orders %}

                                <tr>
                                    <td>{{order.track_id}}</td>
                                    <td>
                                        <a class="text-dark" href=""> {{order.product.name}}</a>
                                    </td>
                                    <td class="d-none d-md-table-cell">{{order.qty}} Unit</td>
                                    <td class="d-none d-md-table-cell">{{order.date_added|naturaltime}}</td>
                                    <td class="d-none d-md-table-cell">#{{order.total_price}}</td>
                                    <td>
                                        <span
                                            class="badge badge-{% if order.completed %}success{% elif order.cancelled %}danger{% else %}warning{%endif%}">
                                            {% if order.completed %} Completed {% elif order.cancelled %} Cancelled
                                            {%else %} Pending {% endif%}
                                        </span>
                                    </td>
                                    <td class="text-right">
                                        <div class="dropdown show d-inline-block widget-dropdown">
                                            <a class="dropdown-toggle icon-burger-mini" href="" role="button"
                                                id="dropdown-recent-order1" data-toggle="dropdown" aria-haspopup="true"
                                                aria-expanded="false" data-display="static"></a>
                                            <ul class="dropdown-menu dropdown-menu-right"
                                                aria-labelledby="dropdown-recent-order1">
                                                <li class="dropdown-item">
                                                    <a href="#" data-toggle="modal"
                                                        data-target="#exampleModal{{order.order_id}}">View</a>
                                                </li>
                                                <li class="dropdown-item">
                                                    {% if order.cancelled %}
                                                    <a href="{% url 'order:cancel_order' order.order_id 'activate' %}">Activate
                                                        Order</a>
                                                    {% else%}
                                                    <a href="#" data-toggle="modal"
                                                        data-target="#exampleModal{{order.track_id}}{{order.pk}}">Cancel
                                                        Order</a>
                                                    {% endif %}
                                                </li>
                                            </ul>
                                        </div>
                                    </td>
                                </tr>

                                <!--Order details Modal -->
                                <div class="modal fade" id="exampleModal{{order.order_id}}" tabindex="-1"
                                    aria-labelledby="exampleModalLabel" aria-hidden="true">
                                    <div class="modal-dialog">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="exampleModalLabel">Order Details</h5>
                                                <button type="button" class="btn-close" data-dismiss="modal"
                                                    aria-label="Close"></button>
                                            </div>
                                            <div class="modal-body">
                                                <label>Track ID: {{order.track_id}}</label><br>
                                                <label>Product Name: {{order.product.name}}</label><br>
                                                <label>Qty Bought: {{order.qty}}</label><br>
                                                <label>Order On: {{order.date_added}}</label><br>
                                                <label>Total Cost: #{{order.total_price}}</label><br>
                                                <label>Total Discount: #{{order.total_discount}}</label><br>
                                                <label>Delivery Address: {{order.street}} {{order.city}},
                                                    {{order.state}}</label><br>
                                                <label>Contact Number: {{order.contact}}</label>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-danger"
                                                    data-dismiss="modal">Close</button>
                                                {% if not order.cancelled%}
                                                {% if order.completed %}
                                                <a href="{% url 'order:complete_order' order.order_id 'pending' %}"><button
                                                        type="button" class="btn btn-warning text-white">Mark
                                                        Pending</button></a>
                                                {% else %}
                                                <a href="{% url 'order:complete_order' order.order_id 'completed' %}"><button
                                                        type="button" class="btn btn-success text-white">Mark
                                                        Completed</button></a>
                                                {% endif %}
                                                {% endif %}
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!--Cancel Order Modal -->
                                <div class="modal fade" id="exampleModal{{order.track_id}}{{order.pk}}" tabindex="-1"
                                    aria-labelledby="exampleModalLabel" aria-hidden="true">
                                    <div class="modal-dialog">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="exampleModalLabel">Order Details</h5>
                                                <button type="button" class="btn-close" data-dismiss="modal"
                                                    aria-label="Close"></button>
                                            </div>
                                            <div class="modal-body">
                                                <label>Do you want to cancel this order?</label><br>
                                                <label>Track ID: {{order.track_id}}</label><br>
                                                <label>Product Name: {{order.product.name}}</label><br>
                                                <label>Ordered By: {{order.user.first_name}}
                                                    {{order.user.last_name}}</label>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-success"
                                                    data-dismiss="modal">Close</button>
                                                <a href="{% url 'order:cancel_order' order.order_id 'cancel' %}"><button
                                                        type="button" class="btn btn-danger">Cancel Order</button></a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                {% endfor %}

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>




</div>



{% endblock content %}