<div class="purchase_wrapper">
  <div class="container-fluid">
      <app-searchbar>
      </app-searchbar>
    <div class="loader_overlay" *ngIf="loader"></div>
      <div class="myorder_wrapper">
        <ul *ngIf="bookedData;else noOrders" infiniteScroll  [infiniteScrollDistance]="2"  [infiniteScrollThrottle]="50"  (scrolled)="onScroll()" [scrollWindow]="false" style="max-height: 700px; overflow: scroll">
          <li *ngFor="let book of bookedData">
            <div class="row">
              <div class="col-md-6">
                <div class="auto_part_container">
                    <img src="{{imageServer + book.product_image}}" onerror="this.src='assets/images/user_avatar.jpg'">
                </div>
                <div class="auto_part_detail">
                  <h2 class="text_truncate" data-toggle="pill" tooltip="{{book.product_name}}" placement="top" show-delay="500" z-index="99999">{{book.product_name}}</h2>
                  <h3>{{book.short_description}}</h3>
                  <div class="others">
                    <!-- <h4><div>Color</div><span>Black</span></h4> -->
                    <h4><div>Quantity</div><span>{{book.quantity}}</span></h4>
                  </div>
                    <h4 class="cpoint"><span>{{book.format_order_id}}</span><strong (click)="trackOrder(book.transId)" *ngIf="(book.status == '2' || book.status == '3' || book.status == '4' || book.status == '5')">Track Order</strong></h4>
                    <h4><div style="width:auto !important;">Ordered On</div><span>{{book.datetime | date: "EEE, MMMM dd, yyyy"}}</span></h4>
                </div>
                <div class="clear"></div>
              </div>
              <div class="col-md-6">
                <div class="price_details">
                  <h5>NGN {{book.amount}}</h5>
                  <h5 *ngIf="( book.status == '1')"> <button class="btn btn-warning btn-sm">Payment Processing</button></h5>
                  <h5 *ngIf="( book.status == '8') || ( book.status == '9')"> <button class="btn btn-danger btn-sm">{{book.status == '8' ? 'Order Deleted': 'Payment Failed'}}</button></h5>

                  <h4 *ngIf="( book.status == '2' || book.status == '3' || book.status == '4')">{{book.expected_delivery == null || book.expected_delivery == '' ? 'Your Expected Delivery date will Update soon': 'Delivery expected by '+ (book.expected_delivery | date: "EEE, MMMM dd, yyyy") }}<br>
                    <div *ngIf="book.status == '2'">Your Order is Placed</div>
                    <div *ngIf="book.status == '3'">Your item is Packed</div>
                    <div *ngIf="book.status == '4'">Your item has been Shipped</div>
                  </h4>
                  <h4 *ngIf="( book.status == '5' || book.status == '6')">{{book.delivered == null || book.delivered == '' ? 'Order Delivered date will Update soon' : 'Delivered on '+ (book.delivered | date: "EEE, MMMM dd, yyyy") }}<br>
                    <div *ngIf="book.status == '5'">Your Order is Delivered</div>
                    <div *ngIf="book.status == '6'">Your item is Returned</div>
                  </h4>
                  <h4 *ngIf = "book.status == '7'">
                    <div *ngIf="book.status == '7'">This item is Canceled</div>
                  </h4>
                  <div class="cancel cpoint" *ngIf="(book.status == '2' || book.status == '3'|| book.status == '4')" (click)="cnfCancelOrder(book.order_id)">Cancel Item</div>
                  <div class="clear"></div>
                </div>
              </div>
            </div>
          </li>
        </ul>
        <ng-template #noOrders>
            <div class="cmn_nodata">
              <img src="../../../assets/images/no_result.png">
              <p>No Data Found</p>
                
            </div>
          </ng-template>
      </div>
  </div>
  <div class="bottom_product_list">
    <h4>Trending Products</h4>
    <div class="loader_overlay" *ngIf="trend_loader"></div>
    <ngx-carousel [inputs]="carouselTile" (carouselLoad)="carouselTileLoad()"  *ngIf="trendingProductData">
      <ngx-tile NgxCarouselItem *ngFor="let prdt of trendingProductData">
        <li (click)="latestPrdtDtls(prdt.product_id)">
          <div class="inner_div_product cpoint">
              <div class="product_wrapper">
                <img src="{{imageServer + prdt.product_image}}" onerror="this.src='assets/images/user_avatar.jpg'">
              </div>
              <h5 class="text_truncate" data-toggle="pill" tooltip="{{prdt.product_name}}" placement="top" show-delay="500" z-index="99999">{{prdt.product_name}}</h5>
              <p>{{prdt.short_description}}</p>
              <div class="star_ratting">
                  <fieldset class="rating prevent-click">
                    <input type="radio" [checked]="(prdt.rating >= 4.75) ? 'true':''" [attr.id]="'thirdStar_'+prdt.product_id+'_5'" [attr.name]="'thirdStarName_'+prdt.product_id" value="5" /><label class = "full" for="thirdStar5"></label>
                    <input type="radio" [checked]="(prdt.rating >= 4.25 && prdt.rating < 4.75) ? 'true':''" [attr.id]="'thirdStar_'+prdt.product_id+'_4half'" [attr.name]="'thirdStarName_'+prdt.product_id" value="4.5" /><label class="half" for="thirdStar4half"></label>
                    <input type="radio" [checked]="(prdt.rating >= 3.75 && prdt.rating < 4.25) ? 'true':''" [attr.id]="'thirdStar_'+prdt.product_id+'_4'" [attr.name]="'thirdStarName_'+prdt.product_id" value="4" /><label class = "full" for="thirdStar4"></label>
                    <input type="radio" [checked]="(prdt.rating >= 3.25 && prdt.rating < 3.75) ? 'true':''" [attr.id]="'thirdStar_'+prdt.product_id+'_3half'" [attr.name]="'thirdStarName_'+prdt.product_id" value="3.5" /><label class="half" for="thirdStar3half"></label>
                    <input type="radio" [checked]="(prdt.rating >= 2.75 && prdt.rating < 3.25) ? 'true':''" [attr.id]="'thirdStar_'+prdt.product_id+'_3'" [attr.name]="'thirdStarName_'+prdt.product_id" value="3" /><label class = "full" for="thirdStar3"></label>
                    <input type="radio" [checked]="(prdt.rating >= 2.25 && prdt.rating < 2.75) ? 'true':''" [attr.id]="'thirdStar_'+prdt.product_id+'_2half'" [attr.name]="'thirdStarName_'+prdt.product_id" value="2.5" /><label class="half" for="thirdStar2half"></label>
                    <input type="radio" [checked]="(prdt.rating >= 1.75 && prdt.rating < 2.25) ? 'true':''" [attr.id]="'thirdStar_'+prdt.product_id+'_2'" [attr.name]="'thirdStarName_'+prdt.product_id" value="2" /><label class = "full" for="thirdStar2"></label>
                    <input type="radio" [checked]="(prdt.rating >= 1.25 && prdt.rating < 1.75) ? 'true':''" [attr.id]="'thirdStar_'+prdt.product_id+'_1half'" [attr.name]="'thirdStarName_'+prdt.product_id" value="1.5" /><label class="half" for="thirdStar1half"></label>
                    <input type="radio" [checked]="(prdt.rating >= 0.75 && prdt.rating < 1.25) ? 'true':''" [attr.id]="'thirdStar_'+prdt.product_id+'_1'" [attr.name]="'thirdStarName_'+prdt.product_id" value="1" /><label class = "full" for="thirdStar1"></label>
                    <input type="radio" [checked]="(prdt.rating < 0.75 && prdt.rating >= 0.25) ? 'true':''" [attr.id]="'thirdStar_'+prdt.product_id+'_half'" [attr.name]="'thirdStarName_'+prdt.product_id" value="0.5" /><label class="half" for="thirdStarhalf"></label>
                  </fieldset>
                  <span class="floatRight">$ {{prdt.amount}}</span>
                  <div class="clear"></div>
                  <p>{{(prdt.reviews > 0)?prdt.reviews+' Reviews':'Be the first one to review.'}}</p>
              </div>
          </div>
      </li>
      </ngx-tile>
      <button NgxCarouselPrev class='leftRs'>&lt;</button>
      <button NgxCarouselNext class='rightRs'>&gt;</button>
  </ngx-carousel>
  </div>
</div>

<!-- Confirm Modal PopUp-->
<button #confirmModal class="hide" data-toggle="modal" data-target="#confirm">Add Vehicle</button>
<div class="modal" id="confirm" >
    <div class="modal-dialog modal-full">
        <div class="modal-content background_transparent">
           <div class="modal-body quote_modal">
               <div class="confirm_modal_content">
                   <div class="login_modal_inner">
                        <div class="login_success">
                            <h4>Do You Want to Confirm ?</h4>
                        </div>
                        <div class="row">
                            <div class="col-md-12 textCenter">
                                <button class="btn btn-success" data-dismiss="modal" (click)="confirmCallBack(confirmCallBak,confirmParam)">Yes</button>
                                <button class="btn btn-danger" data-dismiss="modal">No</button>
                            </div>
                        </div>
                   </div>
               </div>
           </div>
        </div>
    </div>
</div>