<ion-content>
    <div class="cart_wrapper" *ngIf="myOrder.selItem">
        <div class="cart_head">
            <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_white floatLeft" (click)="goBack()">
                                <img src="../assets/arrow_white.png" />
                            </button>
                        </ion-col>
                        <ion-col class="no-gutter" size="8">
                            <div class="nav_title floatLeft">
                                <h4></h4>
                            </div>
                        </ion-col>
                        <ion-col class="no-gutter" size="2">
                            <button class="nav_btn floatRight"></button>
                        </ion-col>
                    </ion-row>
                </ion-grid>
            </div>
            <img src="../assets/white_tick.png" />
            <h4>ORDER IS PLACED</h4>
            <p>{{ myOrder.selItem.orderDate.seconds * 1000 | date:'MMMM dd, y' }}</p>
        </div>
        <div class="order_status">
            <div class="clear"></div>
            <div class="status_div go_green">
                <h4>{{myOrder.selItem.orderCode}}</h4>
                <h6>{{ myOrder.selItem.orderDate.seconds * 1000 | date:'MMMM dd, y' }}</h6>
            </div>
            <!-- <div class="status_gap go_green">
            </div>
            <div class="status_div go_green">
                <h4>Retailer Accepted</h4>
                <h6>June 26th 2019, 03:05PM</h6>
            </div>
            <div class="status_gap go_green">
            </div>
            <div class="status_div go_green">
                <div class="floatLeft">
                    <h4>Product Packed</h4>
                    <h6>June 26th 2019, 03:10PM</h6>
                </div>
                <button class="track_btn floatRight" (click)="goToPage('trackorder')">Track Order</button>
                <div class="clear"></div>
            </div>
            <div class="status_gap go_green">
            </div>
            <div class="status_div go_green">
                <h4>Rider is assigned to shop</h4>
                <h6>June 26th 2019, 03:12PM</h6>
            </div>
            <div class="status_gap go_green">
            </div>
            <div class="status_div go_green">
                <h4>Rider has picked up your product and on the way</h4>
                <h6>June 26th 2019, 03:15PM</h6>
            </div>
            <div class="status_gap">
            </div>
            <div class="status_div">
                <h4>Your product is delivered</h4>
            </div> -->
        </div>
        <div class="nearby_shop_list">
            <ul *ngIf="myOrder.selItem.shopper">
                <li *ngFor="let product of myOrder.selItem.shopper.product; let i = index">
                    <div class="nearby_image">
                        <img [src]="product.image" onerror="this.src='../assets/5bf42c4220000057060294f8@3x.png'" />
                    </div>
                    <div class="nearby_detail">
                        <h5>
                            <span class="floatLeft">{{unEscape(product.prodName)}}</span>
                            <span class="floatRight">0
                                <img src="../assets/Path61_2.png" />
                            </span>
                            <div class="clear"></div>
                        </h5>
                        <p class="prodName"></p>
                    </div>
                    <div class="clear"></div>
                    <div class="product_detail">
                        <h5 *ngIf="myOrder.selItem.orderStatus >= 3 || myOrder.selItem.orderStatus < 7 && i == 0">
                            Delivery time : <span><b>{{myOrder.deliveryTime}}</b></span>
                        </h5>
                        <h6>
                            <!-- <span *ngIf="product.color !== 'No-Color'">Product: {{unEscape(product.prodName)}},
                            </span> -->
                            <span *ngIf="product.color !== 'No-Color'">Color: {{product.color}}, </span>
                            <span *ngIf="product.size !== 'Any-Size'">Size: {{product.size}}</span>
                        </h6>
                        <h5>Quantity : <span>{{product.qty}}</span></h5>
                        <h5>
                            Unit Price: <strong>A$ {{service.formatNumber(product.price)}}</strong>
                        </h5>

                        <h5>
                            GST/TAX: <strong>{{service.formatNumber(getGst(product.price, product.gst))}}</strong>
                        </h5>

                        <h5>
                            Total: <strong>A$ {{service.formatNumber(((product.price + ((product.price * product.gst) /100)) * product.qty).toFixed(2)) }}</strong>
                        </h5>
                        
                        <button class="cancel_btn" (click)="returnOrder(myOrder.selItem.orderId, product.itemId)"
            *ngIf="myOrder.selItem.orderStatus === 3">
            RETURN ITEM
        </button>
                    </div>
                </li>
            </ul>
        </div>


        <div class="product_detail">
            <h5>Order Status: <span>{{getStatus(myOrder.selItem.orderStatus)}}</span></h5>
            <h5 *ngIf="checkRetrailer(myOrder.selItem.shopper.shopperStatus, myOrder.selItem.orderStatus)">Retailer Status: <span>{{getShopperStatus(myOrder.selItem.shopper.shopperStatus)}}</span></h5>
            <h5 *ngIf="checkRider(myOrder.selItem.riderStatus)">Rider Status: <span>{{getRiderStatus(myOrder.selItem.riderStatus)}}</span></h5>
            <h2 *ngIf="myOrder.selItem.contactLess">DelLeave in the Doorstep Delivery</h2>
            <div class="delivery-wrap">
                <h4 class="floatLeft">DELIVERY</h4>
                <span class="floatRight"
                    *ngIf="myOrder.cancelDelivery > 0 && myOrder.selItem.orderStatus != 0 && myOrder.selItem.orderStatus != 8"><img
                        class="ng-tns-c3-0" src="../../assets/edit.png" (click)="changeAddress(myOrder.selItem.orderId)" /></span>

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

            <h5 *ngIf="myOrder.selItem.deliveryAddress">
                {{myOrder.selItem.deliveryAddress.addressType}},
                <!-- ,<br />{{myOrder.selItem.deliveryAddress.address}} -->
                <br /> {{myOrder.selItem.deliveryAddress.building}}<div
                    *ngIf="myOrder.selItem.deliveryAddress.landmark && myOrder.selItem.deliveryAddress.landmark!==''">
                    {{myOrder.selItem.deliveryAddress.landmark}}</div>
            </h5>
            <!-- <hr /> -->
        </div>
    </div>
</ion-content>

<ion-footer *ngIf="myOrder.selItem">
    <div class="footer-btn">
        <button class="cancel_btn" (click)="cancellOrder(myOrder.selItem.orderId)"
            *ngIf="myOrder.selItem.orderStatus === 1">
            CANCEL THIS ORDER
        </button>
    </div>
</ion-footer>