<% layout('layouts/customer-boilerplate')  -%>

    <div class="row">

        <input style="margin-bottom: 15px;" class="form-control" type="text" id="user_input" onkeyup="filterByOrderID()" placeholder="Search by Order ID ...">

        <div class="row">
            <ul class="nav nav-pills nav-fill justify-content-center">
                <li class="nav-item ">
                    <a class="nav-link <%= what ==  'Orders: All'  ? 'active' : '' %>" aria-current="page" href="/admin/orders">All</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link <%= what ==  'Orders: New'  ? 'active' : '' %>" href="/admin/orders?order_status=New">New</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link <%= what ==  'Orders: Packed'  ? 'active' : '' %>" href="/admin/orders?order_status=Packed">Packed</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link <%= what ==  'Orders: Delivered'  ? 'active' : '' %>" href="/admin/orders?order_status=Delivered">Delivered</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link <%= what ==  'Orders: Received'  ? 'active' : '' %>" href="/admin/orders?order_status=Received">Received</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link <%= what ==  'Orders: Cancelled'  ? 'active' : '' %>" href="/admin/orders?order_status=Cancelled">Cancelled</a>
                </li>
            </ul>
        </div>

        <div class="row">
            <table class="table table-hover" id="orders_table">
                <thead>
                    <tr>
                        <th scope="col">Index</th>
                        <th scope="col">Order ID</th>
                        <th scope="col">Order Date</th>
                        <th scope="col">Order Status</th>
                        <th scope="col">Payment Status</th>
                        <th scope="col">Payment Method</th>
                        <th scope="col">Total order value</th>
                        <th scope="col">Ordered by</th>
                        <th scope="col">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    <% let table_index = 0%>
                        <% for(let order of orders){ %>
                            <% table_index += 1%>
                                <tr class="<%=order.order_status=='Cancelled' ? 'table-active' : order.order_status=='Received' ? 'table-active' : '' %>">
                                    <td>
                                        <%= table_index %>
                                    </td>
                                    <td>
                                        <%= order._id %>
                                    </td>
                                    <td>
                                        <%= order.created_date.getDate()%>.
                                            <%= order.created_date.getMonth()%>.
                                                <%= order.created_date.getFullYear()%> <span><%= order.created_date.getHours()%>:<%= order.created_date.getMinutes()%></span>
                                    </td>
                                    <td>
                                        <select <%=order.order_status=='Cancelled' ? 'disabled' : order.order_status=='Received' ? 'disabled' : '' %> style="font-size: 14px;" onchange="UpdateHiddenValue('order_status_<%= order._id %>', 'hidden-update-input-<%= order._id %>')" id="order_status_<%= order._id %>" class="form-select" aria-label="order status">
                                            <option selected disabled value="<%= order.order_status %>"><%= order.order_status %></option>
                                            <option disabled value="New">New</option>
                                            <option value="Packed">Packed</option>
                                            <option value="Delivered">Delivered</option>
                                            <option disabled value="Received">Received</option>
                                            <option value="Cancelled">Cancelled</option>
                                        </select>
                                    </td>
                                    <td>
                                        <select <%=order.order_status=='Cancelled' ? 'disabled' : order.order_status=='Received' ? 'disabled' : '' %> onchange="UpdateHiddenValue('payment_status_<%= order._id %>', 'hidden-update-input-<%= order._id %>-2')" id="payment_status_<%= order._id %>" style="font-size: 14px;" class="form-select" name="payment_status" aria-label="payment status">
                                            <option selected disabled value="<%= order.payment_status %>"><%= order.payment_status %></option>
                                            <option value="Paid-in-cash">Paid-in-cash</option>
                                            <option disabled value="Paid-online">Paid-online</option>
                                            <option value="Paid-by-card">Paid-by-card</option>
                                            <option disabled value="Not Paid">Not Paid</option>
                                        </select>
                                    </td>
                                    <td>
                                        <%= order.payment_method %>
                                    </td>
                                    <td>
                                        <%= order.total_price %> zl
                                    </td>
                                    <td>
                                        <a href="" style="text-decoration: none;">
                                            <%= order.order_owner.first_name %>
                                                <%= order.order_owner.last_name %>
                                        </a>
                                    </td>
                                    <td class="actions">
                                        <form action="/admin/orders" method="POST">
                                            <input type="text" hidden name="order_status" id="hidden-update-input-<%= order._id %>" value="<%= order.order_status %>">
                                            <input type="text" hidden name="payment_status" id="hidden-update-input-<%= order._id %>-2" value="<%= order.payment_status %>">
                                            <input type="text" hidden name="order_id" value="<%= order._id %>">
                                            <button <%=order.order_status=='Cancelled' ? 'disabled' : order.order_status=='Received' ? 'disabled' : '' %> type="submit" class="btn btn-info btn-sm"><i class="fa fa-refresh"></i></button>
                                            <button type="button" class="btn btn-warning btn-sm" data-bs-toggle="modal" data-bs-target="#order<%= table_index %>">View</button>
                                        </form>
                                    </td>
                                </tr>
                                <% } %>
                </tbody>
            </table>
        </div>
    </div>



    <% let order_index = 0 %>
        <% for(let order of orders) {%>
            <% order_index += 1 %>
                <!-- Modal -->
                <div class="modal fade" id="order<%= order_index %>" tabindex="-1" aria-labelledby="orderLabel" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h6 class="modal-title" id="orderLabel">
                                    Order ID:
                                    <%= order._id %>
                                </h6>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                                <span> Ordered Products:
                                    <ul style="list-style: none;">
                                        <% for (let product of order.products) {%>
                                            <li>
                                                <a style="text-decoration: none; text-transform:capitalize" href="">
                                                    <%= product.product_name %>
                                                </a> -
                                                <%= product.quantity%>
                                                    <%= product.product_quantity_type%> - <%= product.product_price %>zl per <%= product.product_quantity_type  %>  
                                            </li>
                                            <% } %>
                                    </ul>
                                </span>
                                <hr>
                                <span> Total price: 
                                    <b><%= order.total_price %> zl</b>
                                </span>
                                <hr>
                                <span>
                                    Payment method: <b><%= order.payment_method %></b>   
                                </span>
                                <hr>
                                <span>
                                    Payment status: <b><%= order.payment_status %></b>
                                </span>
                                <hr>
                                <span>Ordered by:
                                  <%= order.order_owner.first_name %> <%= order.order_owner.last_name %>  
                                </span>
                                <hr>
                                <span>
                                    Delivery Address: <span><%= order.order_owner.address.St_address %> <%= order.order_owner.address.St_address2 %>, <%= order.order_owner.address.postal_code %>, <%= order.order_owner.address.city %>, <%= order.order_owner.address.voivodship %></span>
                                </span>
                                <hr>
                                <span>
                                    Contact Number: <%= order.order_owner.phone_number %> 
                                </span>
                                <hr>
                                <span>
                                    Ordered date: <b><%= order.created_date.getDate()%>.<%= order.created_date.getMonth()%>.<%= order.created_date.getFullYear()%> <%= order.created_date.getHours()%>:<%= order.created_date.getMinutes()%></b>
                                </span>
                                <hr>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                                <button type="button" class="btn btn-primary">Print PDF</button>
                            </div>
                        </div>
                    </div>
                </div>
                <% } %>