<%- include('../includes/header') %>

    <!-- Appointment -->
    <section class="section-area account-wraper1">
        <div class="container-fluid">
            <div class="appointment-inner section-sp2 pt-3">
                <div class="container">
                    <%- include('../includes/tabs') %>
                </div>
                <!-- Address Tab -->
                <div id="address" class="tabcontent">
                    <div class="container mt-5">
                        <div class="row align-items-center">
                            <div class="col-xl-12 col-lg-12 col-md-12">
                                <div class="appointment-form-1 form-wraper">
                                    <h1 class="mb-4">My Orders</h1>
                                    <% if(ordersLength> 0){ orders.forEach(function(order) { %>
                                        <div class="row addressbg-1">
                                            <div class="col-xl-12 col-lg-12 col-md-12">
                                                <div class="blog-card">
                                                    <% JSON.parse(order.details).products.forEach(element=> { %>
                                                        <div class="d-flex">
                                                            <div class="post-media">
                                                                <div class="pro my-2 text-left">
                                                                    <img height="100" width="100"
                                                                        src="<%= element.thumbnail %>"
                                                                        class="<%= JSON.stringify(element) %>" alt="">
                                                                </div>
                                                            </div>
                                                            <div class="post-info text-left">
                                                                <p>Title: <span>
                                                                        <%= element.title %>
                                                                    </span></p>
                                                                <p>Quantity: <span>
                                                                        <%= element.quantity %>
                                                                    </span></p>
                                                                <p class="green">Status: <span>
                                                                        <%= element.status==1 ? 'Ordered' : order.status
                                                                            %>
                                                                    </span></p>
                                                            </div>
                                                        </div>
                                                        <% }) %>
                                                            <div class="mx-3 mb-3 text-left orders-flex orders-info">
                                                                <p>Order ID: <br> <span>
                                                                        <%= order.order_id %>
                                                                    </span></p>
                                                                <p>Order Date: <br> <span>
                                                                        <%= order.created_at %>
                                                                    </span></p>
                                                                <p>Order Total: <br> <span> ₹<%= order.final_price %>
                                                                    </span></p>
                                                                <div>
                                                                    <!-- <button data-order="<%= order.order_id %>"
                                                                        data-toggle="modal" data-target="#trackingModal"
                                                                        class="btn btn-outline-primary">Tracking
                                                                        <i class="btn-icon-bx fas fa-eye"></i></button> -->
                                                                    <button data-order="<%= order.order_id %>"
                                                                        class="btn btn-outline-primary invoice">Invoice
                                                                        <i class="btn-icon-bx fas fa-eye"></i></button>
                                                                </div>
                                                            </div>
                                                </div>
                                            </div>

                                        </div>
                                        <% }) } else{ %>
                                            <div class="text-center w-100 my-3">
                                                <p>No Orders Found</p>
                                            </div>
                                            <% } %>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
    </section>

    </div>
    <button onclick='window.scrollTo({top: 0, behavior: "smooth"});' class="back-to-top fa fa-chevron-up"></button>
    <div class="modal fade" id="trackingModal" tabindex="-1" aria-labelledby="trackingModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="card">
                <div class="d-flex justify-content-between px-3 top">
                    <div class="">
                        <h5>
                            ORDER
                            <span class="text-primary font-weight-bold">#YWSNWDAAW</span>
                        </h5>
                    </div>
                    <div class="d-flex flex-column text-sm-right">
                        <p class="mb-0">
                            Expected Arrival <span class="font-weight-bold">29 Aug 2022</span>
                        </p>
                        <p>
                            USPS <span class="font-weight-bold">2374723467163473124234</span>
                        </p>
                    </div>
                </div>
                <!-- Add class "active" to progress -->
                <div class="d-flex justify-content-center">
                    <div class="col-12">
                        <ul id="progressbar" class="text-center">
                            <li class="active step0"></li>
                            <li class="active step0"></li>
                            <li class="active step0"></li>
                            <li class="step0"></li>
                        </ul>
                    </div>
                </div>
                <div class="d-flex justify-content-between top">
                    <div class="d-flex icon-content">
                        <img src="./images/icon/CheckList.png" alt="" class="icon" />
                        <div class="d-flex flex-column">
                            <p class="font-weight-bold">Order <br />Processed</p>
                        </div>
                    </div>
                    <div class=" d-flex icon-content">
                        <img src="./images/icon/Delivery.png" alt="" class="icon" />
                        <div class="d-flex flex-column">
                            <p class="font-weight-bold">Order <br />Shipped</p>
                        </div>
                    </div>
                    <div class=" d-flex icon-content">
                        <img src="./images/icon/Shipping.png" alt="" class="icon" />
                        <div class="d-flex flex-column">
                            <p class="font-weight-bold">Order <br />En Route</p>
                        </div>
                    </div>
                    <div class=" d-flex icon-content">
                        <img src="./images/icon/Home.png" alt="" class="icon" />
                        <div class="d-flex flex-column">
                            <p class="font-weight-bold">Order <br />Arrival</p>
                        </div>
                    </div>
                </div>
                <div class="tracking-info-detail">
                    <div class="tracking-box">
                        <div class="tracking-time-box">
                            <div class="tracking-time">Nov 26, 2018</div>
                            <span>03:36 AM</span>
                        </div>
                        <div class="tracking-location">
                            <strong>Delivered in California </strong>
                            Carga Office Near 10-G Location South
                        </div>
                    </div>

                    <div class="tracking-box">
                        <div class="tracking-time-box">
                            <div class="tracking-time">Nov 28, 2018</div>
                            <span>05:40 PM</span>
                        </div>
                        <div class="tracking-location style-two">
                            <strong>Out For Delivery </strong>
                            Union WareHouse 5th Avenue Block
                        </div>
                    </div>

                    <div class="tracking-box">
                        <div class="tracking-time-box">
                            <div class="tracking-time">Nov 29, 2018</div>
                            <span>12:35 PM</span>
                        </div>
                        <div class="tracking-location style-three">
                            <span class="dott"></span>
                            <strong>Arrive at Post Office</strong>
                            Local Post Office In Near Vicinity
                        </div>
                    </div>

                    <div class="tracking-box">
                        <div class="tracking-time-box">
                            <div class="tracking-time">Dec 02, 2018</div>
                            <span>03:10 AM</span>
                        </div>
                        <div class="tracking-location style-three">
                            <span class="dott"></span>
                            <strong>Departed Shipping Facility</strong>
                            Carga Office Departure Location Road
                        </div>
                    </div>

                    <div class="tracking-box">
                        <div class="tracking-time-box">
                            <div class="tracking-time">Dec 04, 2018</div>
                            <span>09:00 AM</span>
                        </div>
                        <div class="tracking-location style-three">
                            <span class="dott"></span>
                            <strong>Picked up by Shipping Partner </strong>
                            Will Be Delivered at Your Location
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
    </div>
    <%- include('../includes/footer') %>