<%- include('../partials/header') -%>
    <link rel="stylesheet" href="/order/order.css">

    <div class="container">

        <div class="text-center">
            <h2>My Orders</h2>
            <br>
        </div>

        <div id="orders">
            <%orders.forEach(function(order, indx){ 
                var products_count=order.Product_qty.length;
                %>
                <div class="card">
                <div class="order">
                    <ul>
                        <li><b>Order n°:</b> <%=order._id%></li>
                        <br>
                        <li><%=products_count%> Products</li>
                    </ul>
                    <ul>
                      <li>Order placed At: <b> <%=order._id.getTimestamp().toUTCString()%></b></li>
                    </ul>
                    <ul>
                        <li><button class="btn btn-secondary" onclick="show_detail('<%=order._id%>')">View</button>
                            <button id="btn_cancel_<%= indx %>" class="btn btn-danger" <%= order.status!="Pending"? "disabled" : "" %> onclick="change_ord_stat('Canceled', '<%=order._id%>', '<%= indx %>')">Cancel</button>
                        <button class="btn text-success txt_ord_stat"><%=order.status%></button>
                          </li>
                        <br>
                        <li><span style="color: #43AA8B;">Total:</span> <%=order.total%> DH</li>
                    </ul>
                </div>
                <hr style="margin: 0;">
                <div id="details_<%=order._id%>" class="details">
<div class="col-md-6">
    <ul id="products" class="list-group">
        <% order.Product_qty.forEach(function(f_product){ %>
          <li class="list-group-item d-flex justify-content-between lh-condensed">
            <div class="col-sm-3 col-xs-3">
              <img class="img-responsive" src="<%=f_product.product.images[0].secure_url%>" style="max-width: 100%;"/>
          </div>
            <div>
              <h6 class="my-0"><%=f_product.product.name%></h6>
              <small class="text-muted">Quantity: <%=f_product.qty%></small>
            </div>
            <span class="text-muted"><%=f_product.product.price%> DH</span>
          </li>
          <% }); %>
          <li class="list-group-item d-flex justify-content-between">
            <span>Payment Method:</span>
            <span><%=order.client_infos.payment_method%></span>
          </li>
        <li class="list-group-item d-flex justify-content-between">
          <span>Total</span>
          <strong><%=order.total%> DH</strong>
        </li>
      </ul>
</div>
<div class="col-md-6">
    <h5 class="mb-3">Ship To:</h5>
    <div class="row">
        <div class="col-md-6 mb-3">
          <label for="firstName">Full Name: <b><%=order.client_infos.fname%> <%=order.client_infos.lname%></b></label>
        </div>
        <div class="col-md-6 mb-3">
          <label for="lastName">Phone: <b><%=order.client_infos.phone%></b></label>
        </div>
      </div>
      <div class="row">
        <div class="col-md-6 mb-3">
          <label for="firstName">Email: <b><%=order.client_infos.email%></b></label>
        </div>
        <div class="col-md-6 mb-3">
          <label for="lastName">Adress: <b><%=order.client_infos.adress%></b></label>
        </div>
      </div>
      <div class="row">
        <div class="col-md-6 mb-3">
          <label for="lastName">Adress2: <b><%=order.client_infos.adress2 ? order.client_infos.adress2 : "none"%></b></label>
        </div>
      </div>
</div>
                </div>
            </div>
                <br>
            <%})%>
        </div>

    </div>

    <script src="/order/order.js"></script>
    <%- include('../partials/footer') -%>