<div class="purchase_wrapper">
  <div class="container-fluid">
    <app-searchbar>
    </app-searchbar>
    
    <div class="loader_overlay" *ngIf="loader"></div>
    <div class="purchase_content_wrapper">
        <div class="row">
            <div class="col-md-4">
              <div class="product_gallery">
                <div class="product_gallery_inner" *ngIf="galleryImages;else nogalleryimage">
                    <ngx-gallery [options]="galleryOptions" [images]="galleryImages"></ngx-gallery>
                </div>
                <ng-template #nogalleryimage>
                  No Image Found
                </ng-template>
              </div>
            </div>
            <div class="col-md-8" *ngIf="productDetails">
                <div class="product_details">
                  <h1  class="text_truncate" data-toggle="pill" tooltip="{{productDetails.product_name}}" placement="top" show-delay="500" z-index="99999">{{productDetails.product_name}}</h1>
                  <h2>{{productDetails.short_description}}</h2>
                  <h2><strong>Brand : </strong>{{productDetails.brand_name}}</h2>
		              <div *ngIf="productDetails.part_id">
                    <h2><strong>Part ID : </strong>{{productDetails.part_id}}</h2></div>
                  <h3>NGN {{productDetails.amount}}</h3>
                  <div class="rating_div" *ngIf="productDetails.rating">
                      <fieldset class="rating prevent-click">
                          <input type="radio" [checked]="(productDetails.rating >= 4.75) ? 'true':''" id="firstStar5" name="firstRating" value="5" /><label class = "full" for="firstStar5"></label>
                          <input type="radio" [checked]="(productDetails.rating >= 4.25 && productDetails.rating < 4.75) ? 'true':''" id="firstStar4half" name="firstRating" value="4.5" /><label class="half" for="firstStar4half"></label>
                          <input type="radio" [checked]="(productDetails.rating >= 3.75 && productDetails.rating < 4.25) ? 'true':''" id="firstStar4" name="firstRating" value="4" /><label class = "full" for="firstStar4"></label>
                          <input type="radio" [checked]="(productDetails.rating >= 3.25 && productDetails.rating < 3.75) ? 'true':''" id="firstStar3half" name="firstRating" value="3.5" /><label class="half" for="firstStar3half"></label>
                          <input type="radio" [checked]="(productDetails.rating >= 2.75 && productDetails.rating < 3.25) ? 'true':''" id="firstStar3" name="firstRating" value="3" /><label class = "full" for="firstStar3"></label>
                          <input type="radio" [checked]="(productDetails.rating >= 2.25 && productDetails.rating < 2.75) ? 'true':''" id="firstStar2half" name="firstRating" value="2.5" /><label class="half" for="firstStar2half"></label>
                          <input type="radio" [checked]="(productDetails.rating >= 1.75 && productDetails.rating < 2.25) ? 'true':''" id="firstStar2" name="firstRating" value="2" /><label class = "full" for="firstStar2"></label>
                          <input type="radio" [checked]="(productDetails.rating >= 1.25 && productDetails.rating < 1.75) ? 'true':''" id="firstStar1half" name="firstRating" value="1.5" /><label class="half" for="firstStar1half"></label>
                          <input type="radio" [checked]="(productDetails.rating >= 0.75 && productDetails.rating < 1.25) ? 'true':''" id="firstStar1" name="firstRating" value="1" /><label class = "full" for="firstStar1"></label>
                          <input type="radio" [checked]="(productDetails.rating < 0.75 && productDetails.rating >= 0.25) ? 'true':''" id="firstStarhalf" name="firstRating" value="0.5" /><label class="half" for="firstStarhalf"></label>
                      </fieldset>
                      <div class="clear"></div>
                  </div>
                  <h2 *ngIf="productDetails.count > 0">{{productDetails.count}} Reviews</h2>
                  <h4 *ngIf="productDetails.description">Product Details</h4>
                  <div *ngIf="productDetails.description" [innerHTML]="productDetails.description"></div>
                  <h4>Quantity</h4>
                  <div class="counter_wrapper">
                    <div class="count_btn" (click)="minus()">-</div>
                    <div class="counter_value">{{this.count}}</div>
                    <div class="count_btn" (click)="add()">+</div>
                  </div>  
                  <div class="btn_bay">
                    <button class="btn_cart btn" (click)="addToCart(productDetails.amount)" *ngIf="loginDetails && cartValue == '1'">Add to Cart</button>
                    <button class="btn_cart btn" (click)="goCart()" *ngIf="loginDetails && cartValue == '2'">Go to Cart</button>
                    <button class="btn_buy btn" (click)="buyProduct(productDetails.amount)">{{loginDetails?'Buy Now':'Login And Continue'}}</button>
                  </div>  
                </div>
                <div *ngIf="productDetails.about" [innerHTML]="productDetails.about" class="product_details"></div>
                <div class="product_details"  *ngIf="productDetails.rating">
                    <h4 class="pt0">Rating & Reviews</h4>
                    <div class="big_rating_div" >
                            <fieldset class="rating prevent-click">
                                <input type="radio" [checked]="(productDetails.rating >= 4.75) ? 'true':''" id="secondStar5" name="secondRating" value="5" /><label class = "full" for="secondStar5"></label>
                                <input type="radio" [checked]="(productDetails.rating >= 4.25 && productDetails.rating < 4.75) ? 'true':''" id="secondStar4half" name="secondRating" value="4.5" /><label class="half" for="secondStar4half"></label>
                                <input type="radio" [checked]="(productDetails.rating >= 3.75 && productDetails.rating < 4.25) ? 'true':''" id="secondStar4" name="secondRating" value="4" /><label class = "full" for="secondStar4"></label>
                                <input type="radio" [checked]="(productDetails.rating >= 3.25 && productDetails.rating < 3.75) ? 'true':''" id="secondStar3half" name="secondRating" value="3.5" /><label class="half" for="secondStar3half"></label>
                                <input type="radio" [checked]="(productDetails.rating >= 2.75 && productDetails.rating < 3.25) ? 'true':''" id="secondStar3" name="secondRating" value="3" /><label class = "full" for="secondStar3"></label>
                                <input type="radio" [checked]="(productDetails.rating >= 2.25 && productDetails.rating < 2.75) ? 'true':''" id="secondStar2half" name="secondRating" value="2.5" /><label class="half" for="secondStar2half"></label>
                                <input type="radio" [checked]="(productDetails.rating >= 1.75 && productDetails.rating < 2.25) ? 'true':''" id="secondStar2" name="secondRating" value="2" /><label class = "full" for="secondStar2"></label>
                                <input type="radio" [checked]="(productDetails.rating >= 1.25 && productDetails.rating < 1.75) ? 'true':''" id="secondStar1half" name="secondRating" value="1.5" /><label class="half" for="secondStar1half"></label>
                                <input type="radio" [checked]="(productDetails.rating >= 0.75 && productDetails.rating < 1.25) ? 'true':''" id="secondStar1" name="secondRating" value="1" /><label class = "full" for="secondStar1"></label>
                                <input type="radio" [checked]="(productDetails.rating < 0.75 && productDetails.rating >= 0.25) ? 'true':''" id="secondStarhalf" name="secondRating" value="0.5" /><label class="half" for="secondStarhalf"></label>
                            </fieldset>
                        <div class="clear"></div>
                    </div>
                    <div class="rate_review" *ngIf="productDetails.reviews">
                      <div class="loader_overlay" *ngIf="review_loader"></div>
                      <ul infiniteScroll  [infiniteScrollDistance]="2"  [infiniteScrollThrottle]="50"  (scrolled)="onScroll()" [scrollWindow]="false" style="max-height: 700px; overflow: scroll">
                        <li *ngFor="let revws of reviewArray">
                          <div class="row">
                            <div class="col-md-9">
                                <h4 class="pt0">{{revws.title}}</h4>
                                <p>{{revws.description}}</p>
                            </div>
                            <div class="col-md-3">
                              <div class="feed_rating">
                                  <fieldset class="rating prevent-click">
                                    <input type="radio" [checked]="(revws.rating >= 4.75) ? 'true':''" [attr.id]="'usrReviewId_'+revws.id+'_5'" [attr.name]="'usrReviewName_'+revws.id" value="5" /><label class = "full" for="secondStar5"></label>
                                    <input type="radio" [checked]="(revws.rating >= 4.25 && revws.rating < 4.75) ? 'true':''" [attr.id]="'usrReviewId_'+revws.id+'_4half'" [attr.name]="'usrReviewName_'+revws.id" value="4.5" /><label class="half" for="secondStar4half"></label>
                                    <input type="radio" [checked]="(revws.rating >= 3.75 && revws.rating < 4.25) ? 'true':''" [attr.id]="'usrReviewId_'+revws.id+'_4'" [attr.name]="'usrReviewName_'+revws.id" value="4" /><label class = "full" for="secondStar4"></label>
                                    <input type="radio" [checked]="(revws.rating >= 3.25 && revws.rating < 3.75) ? 'true':''" [attr.id]="'usrReviewId_'+revws.id+'_3half'" [attr.name]="'usrReviewName_'+revws.id" value="3.5" /><label class="half" for="secondStar3half"></label>
                                    <input type="radio" [checked]="(revws.rating >= 2.75 && revws.rating < 3.25) ? 'true':''" [attr.id]="'usrReviewId_'+revws.id+'_3'" [attr.name]="'usrReviewName_'+revws.id" value="3" /><label class = "full" for="secondStar3"></label>
                                    <input type="radio" [checked]="(revws.rating >= 2.25 && revws.rating < 2.75) ? 'true':''" [attr.id]="'usrReviewId_'+revws.id+'_2half'" [attr.name]="'usrReviewName_'+revws.id" value="2.5" /><label class="half" for="secondStar2half"></label>
                                    <input type="radio" [checked]="(revws.rating >= 1.75 && revws.rating < 2.25) ? 'true':''" [attr.id]="'usrReviewId_'+revws.id+'_2'" [attr.name]="'usrReviewName_'+revws.id" value="2" /><label class = "full" for="secondStar2"></label>
                                    <input type="radio" [checked]="(revws.rating >= 1.25 && revws.rating < 1.75) ? 'true':''" [attr.id]="'usrReviewId_'+revws.id+'_1half'" [attr.name]="'usrReviewName_'+revws.id" value="1.5" /><label class="half" for="secondStar1half"></label>
                                    <input type="radio" [checked]="(revws.rating >= 0.75 && revws.rating < 1.25) ? 'true':''" [attr.id]="'usrReviewId_'+revws.id+'_1'" [attr.name]="'usrReviewName_'+revws.id" value="1" /><label class = "full" for="secondStar1"></label>
                                    <input type="radio" [checked]="(revws.rating < 0.75 && revws.rating >= 0.25) ? 'true':''" [attr.id]="'usrReviewId_'+revws.id+'_half'" [attr.name]="'usrReviewName_'+revws.id" value="0.5" /><label class="half" for="secondStarhalf"></label>
                                </fieldset>
                              </div>
                              <div class="clear"></div>
                                <p class="textRight">{{revws.datetime | date:'dd MMMM yyyy'}}</p>
                            </div>
                          </div>
                        </li>
                      </ul>
                    </div>
                </div>
            </div>
            <input type="hidden" #indexLoginModal data-toggle="modal" data-target="#login">
        </div>
    </div>
  </div>
  <div class="bottom_product_list">
    <h4>Trending Products</h4>
    <div class="loader_overlay" *ngIf="loader2"></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>{{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">NGN {{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>
