<ion-header>
    <div class="nav_header">
        <ion-grid class="no-gutter">
            <ion-row class="no-gutter">
                <ion-col class="no-gutter" size="2"><button class="nav_btn nav_back floatLeft" (click)="goBack()"></button></ion-col>
                <ion-col class="no-gutter" size="8">
                    <div class="nav_title floatLeft">
                        <h4>MY ORDERS</h4>
                    </div>
                </ion-col>
                <ion-col class="no-gutter" size="2"></ion-col>
            </ion-row>
        </ion-grid>
    </div>
</ion-header>

<ion-content>
    <div class="myorder_wrapper" *ngIf="myorder.orders">
        <ul *ngIf="myorder.orders.length > 0">
            <li *ngFor="let order of myorder.orders; let i = index">
                <div class="order_info">
                    <h5 class="floatLeft">{{order.orderCode}}</h5>
                    <h6 class="floatRight" *ngIf="order.orderDate">
                        {{ order.orderDate.seconds * 1000 | date:'MMMM dd, y' }}
                    </h6>
                    <div class="clear"></div>
                    <button class="order_track floatRight" (click)="orderDetails(i)" *ngIf="order.riderStatus > 0 && order.riderStatus <= 4 ">
                        Track Order
                    </button>
                    <br/>                    
                    <div class="clear"></div>                    
                </div>
                <div class="product-wrapper" *ngFor="let shopper of order.shopper">
                    <div *ngFor="let product of shopper.product" class="order-inn-box" (click)="viewOrder(order.orderId, shopper.shopperId)">
                        <div class="order_image">
                            <img [src]="product.image" onerror="" />
                        </div>
                        <div class="order_detail">
                            <h5 class="floatLeft">{{unEscape(product.prodName)}}</h5>
                            <div class="clear"></div>
                            <h5>
                                <span *ngIf="product.color !== 'No-Color'">{{product.color}},
                            </span>
                                <span *ngIf="product.size !== 'Any-Size'">{{product.size}}</span>&nbsp;<span>{{product.qty}}</span>
                            </h5>

                            <p *ngIf="product.price">A$ {{service.formatNumber(product.price.toFixed(2))}}</p>
                        </div>
                        <div class="order_other">

                            <span class="floatRight" (click)="acceptOrder(order)">{{getStatus(order.orderStatus)}}</span>
                            <div class="clear"></div>
                            <!-- <button class="track_btn" *ngIf="order.orderStatus >= 3 && order.orderStatus < 7" (click)="orderDetails(i)">TRACK</button> -->
                            <div class="clear"></div>
                        </div>
                        <div class="clear"></div>
                    </div>
                </div>

                <div class="order_info">
                    <h5 class="floatRight">TOTAL PRICE : {{priceFormat(order.amount)}}</h5>

                    <div class="clear"></div>
                </div>
            </li>

            <!-- <li>
                <div class="order_image"></div>
                <div class="order_detail">
                    <h5 class="floatLeft">European Style V Neck</h5>
                    <div class="clear"></div>
                    <h5>Green, Small <span>3</span></h5>
                    <p>AU$99.00</p>
                </div>
                <div class="order_other">
                    <h6 class="floatRight">June 26th 2019</h6>
                    <div class="clear"></div>

                </div>
                <div class="clear"></div>
            </li>
            <li>
                <div class="order_image"></div>
                <div class="order_detail">
                    <h5 class="floatLeft">European Style V Neck</h5>
                    <div class="clear"></div>
                    <h5>Green, Small <span>3</span></h5>
                    <p>AU$99.00</p>
                </div>
                <div class="order_other">
                    <h6 class="floatRight">June 26th 2019</h6>
                    <div class="clear"></div>

                </div>
                <div class="clear"></div>
            </li>
            <li>
                <div class="order_image"></div>
                <div class="order_detail">
                    <h5 class="floatLeft">European Style V Neck</h5>
                    <div class="clear"></div>
                    <h5>Green, Small <span>3</span></h5>
                    <p>AU$99.00</p>
                </div>
                <div class="order_other">
                    <h6 class="floatRight">June 26th 2019</h6>
                    <div class="clear"></div>
                    <h5 class="floatRight">Cancelled</h5>
                    <div class="clear"></div>
                </div>
                <div class="clear"></div>
            </li> -->
        </ul>
        <div class="empty-wishlist-wrapper" *ngIf="myorder.orders.length == 0">
            <img src="../../assets/wishlist.png" />
            <h1>There is no order</h1>
            <button (click)="goToPage('home')">shop now</button>
        </div>
    </div>
</ion-content>
<div class="loader" *ngIf="loader">
    <div class="lds-ripple">
        <div></div>
        <div></div>
    </div>
</div>