<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="cartData;else noCart" infiniteScroll  [infiniteScrollDistance]="2"  [infiniteScrollThrottle]="50"  (scrolled)="onScroll()" [scrollWindow]="false" style="max-height: 700px; overflow: scroll">
        <li *ngFor="let cart of cartData">
          <div class="row">
            <div class="col-md-6">
              <div class="auto_part_container">
                <img src="{{imageServer + cart.product_image}}" onerror="this.src='assets/images/user_avatar.jpg'">
              </div>
              <div class="auto_part_detail">
                <h2>{{cart.product_name}}</h2>
                <h3>{{cart.short_description}}</h3>
                 <div class="others">
                <h4><div>Brand</div><span>{{cart.brand_name}}</span></h4>
                  <!--  <h4><div>Quantity</div><span>1</span></h4> -->
                </div>
                <h4>Quantity</h4>
                <div class="counter_wrapper">
                  <div class="count_btn" (click)="minus(cart.cart_id)">-</div>
                  <!-- <div class="counter_value">{{this.count}}</div> -->
                  <div class="counter_value">{{cartQuantity[cart.cart_id]['quantity']}}</div>
                  <div class="count_btn" (click)="add(cart.cart_id)">+</div>
                </div> 
              </div>
              <div class="clear"></div>
            </div>
            <div class="col-md-6">
              <div class="price_details">
                <div class="remove" (click)="cnfRemoveProduct(cart.cart_id)">Remove</div>
                <h5>$ {{cartQuantity[cart.cart_id]['total_amount']}}</h5>
                <!-- <h4>Delivery expected by Thu, Apr 25th 2019<br>
                </h4> --><br>
                <button class="purchase_btn" (click)="buyProduct(cart.product_id,cartQuantity[cart.cart_id]['total_amount'],cart.cart_id,cartQuantity[cart.cart_id]['quantity'],cart.amount)">Purchase</button>
                <div class="clear"></div>
                
              </div>
            </div>
          </div>
        </li>
      </ul>
      <ng-template #noCart>
        No Data Found
      </ng-template>
    </div>
  </div>
  <div class="bottom_product_list">
    <div class="loader_overlay" *ngIf="trend_loader"></div>
    <h4>Trending Products</h4>
    <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">
            <div class="product_wrapper">
              <img src="{{imageServer + prdt.product_image}}" onerror="this.src='assets/images/user_avatar.jpg'">
            </div>
            <h5>{{prdt.product_name}}</h5>
            <p>{{prdt.short_description}}</p>
            <div class="star_ratting  prevent-click">
              <fieldset class="rating">
                <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>