<div class="nav_header">
  <button class="nav_btn nav_back floatLeft" (click)="goBack()">
    <img src="../assets/Group17_2.png" />
  </button>
  <div class="nav_title floatLeft"></div>
  <button class="nav_btn nav_cart floatRight" (click)="goToPage('cart')">
    <div class="not" *ngIf="cartService.carts">
      {{cartService.carts.length}}
    </div>
  </button>
  <div class="clear"></div>
</div>
<ion-content>
  <div class="product_detail_wrapper" *ngIf="product">
    <div class="product_banner">
      <div
        [ngClass]="checkFavStatus(product.prodId)"
        (click)="changeFav(product.prodId)"
      ></div>
      <div class="featured_badge" *ngIf="product.featured">Featured</div>
      <ion-slides pager="true" [options]="bannerOptions" *ngIf="slideData">
        <ion-slide *ngFor="let prodImg of slideData">
          <img [src]="prodImg" onerror="this.src='../assets/model1@3x.jpg'" />
        </ion-slide>
        <!-- <ion-slide>
          <img
            [src]="product.image"
            onerror="this.src='../assets/model1@3x.jpg'"
          />
        </ion-slide>
        <ion-slide>
          <img
            [src]="product.image"
            onerror="this.src='../assets/model1@3x.jpg'"
          />
        </ion-slide> -->
      </ion-slides>
    </div>
    <div class="product_header">
      <ion-row>
        <ion-col size="8">
          <h3>{{product.prodName}}</h3>
          <p>
            <strong
              ><span><img src="../assets/Path61_2.png"/></span
              >{{product.rating}}</strong
            >&nbsp; {{product.category}}, {{product.subCate}}
            <br />
            <span *ngFor="let tag of product.tag"
              ><span *ngIf="tag !=='No-Tag'">#{{tag}}&nbsp;</span></span
            >
          </p>
        </ion-col>
        <ion-col size="4">
          <h5>A$ {{product.price}}</h5>
          <p>
            <span class="offer" *ngIf="product.discount > 0"
              >-{{product.discount}}%</span
            >
          </p>
        </ion-col>
      </ion-row>
    </div>

    <div class="product_div_content">
      <h5 *ngIf="product.color && product.color[0] !=='No-Color'">Color</h5>
      <div class="size_div">
        <ul *ngIf="product.size">
          <ion-slides pager="false" [options]="slideOpts">
            <ion-slide *ngFor="let color of product.color; let i = index">
              <li *ngIf="color !=='No-Color'">
                <button id="custom_check_button">
                  <label>
                    <input
                      id="{{color}}"
                      type="radio"
                      name="color"
                      value="{{color}}"
                      (click)="cartService.choose_color(color)"
                      [checked]="i==0"
                    />
                    <p>{{color}}</p>
                  </label>
                </button>
              </li>
            </ion-slide>
          </ion-slides>
        </ul>
      </div>
      <h5 *ngIf="product.size && product.size[0] !=='Any-Size'">Size</h5>
      <div class="size_div">
        <ul *ngIf="product.size">
          <ion-slides pager="false" [options]="slideOpts">
            <ion-slide *ngFor="let size of product.size; let i = index">
              <li *ngIf="size !=='Any-Size'">
                <button id="custom_check_button">
                  <label>
                    <input
                      id="{{size}}"
                      type="radio"
                      name="services"
                      value="{{size}}"
                      (click)="cartService.choose_size(size)"
                      [checked]="i==0"
                    />
                    <p>{{size}}</p>
                  </label>
                </button>
              </li>
            </ion-slide>
          </ion-slides>
        </ul>
      </div>
      <!-- <h5>Color</h5>
            <div class="color_div">
                <ul>
                    <ion-slides pager="false" [options]="slideOpts">
                        <ion-slide>
                            <li>
                                <button id="custom_check_button">
                                    <label>
                                        <input id="1" type="radio" name="services" value="1">
                                        <p><img src="../../assets/c1.png"></p>
                                    </label>
                                </button>
                            </li>
                        </ion-slide>
                        <ion-slide>
                            <li>
                                <button id="custom_check_button">
                                    <label>
                                        <input id="2" type="radio" name="services" value="2">
                                        <p><img src="../../assets/c2.png"></p>
                                    </label>
                                </button>
                            </li>
                        </ion-slide>
                        <ion-slide>
                            <li>
                                <button id="custom_check_button">
                                    <label>
                                        <input id="3" type="radio" name="services" value="3">
                                        <p><img src="../../assets/c3.png"></p>
                                    </label>
                                </button>
                            </li>
                        </ion-slide>
                        <ion-slide>
                            <li>
                                <button id="custom_check_button">
                                    <label>
                                        <input id="4" type="radio" name="services" value="4">
                                        <p><img src="../../assets/c4.png"></p>
                                    </label>
                                </button>
                            </li>
                        </ion-slide>
                        <ion-slide>
                            <li>
                                <button id="custom_check_button">
                                    <label>
                                        <input id="5" type="radio" name="services" value="5">
                                        <p><img src="../../assets/c5.png"></p>
                                    </label>
                                </button>
                            </li>
                        </ion-slide>
                    </ion-slides>
                </ul>
            </div> -->
      <h5>Description</h5>
      <p>{{product.prodDesc}}</p>
      <!--<h5>
                <span class="floatLeft">Reviews</span><span class="floatRight" (click)="goToPage('reviewlist')">MORE</span>
                <div class="clear"></div>
            </h5>
             <div class="review_list">
                <ul>
                    <li>
                        <div class="review_image">

                        </div>
                        <div class="review_detail">
                            <h4 class="floatLeft">John Doe<span><img src="../assets/Path61_2.png">4</span></h4>
                            <h4 class="floatRight review_date">July 26th 2019</h4>
                            <div class="clear"></div>
                            <p>
                                Thank you so much to Garrett & Stacey for helping us design our gorgeous dream kitchen.
                            </p>
                        </div>
                        <div class="clear"></div>
                    </li>
                    <li>
                        <div class="review_image">

                        </div>
                        <div class="review_detail">
                            <h4 class="floatLeft">John Doe<span><img src="../assets/Path61_2.png">4</span></h4>
                            <h4 class="floatRight review_date">July 26th 2019</h4>
                            <div class="clear"></div>
                            <p>
                                Thank you so much to Garrett & Stacey for helping us design our gorgeous dream kitchen.
                            </p>
                        </div>
                        <div class="clear"></div>
                    </li>
                    <li>
                        <div class="review_image">

                        </div>
                        <div class="review_detail">
                            <h4 class="floatLeft">John Doe<span><img src="../assets/Path61_2.png">4</span></h4>
                            <h4 class="floatRight review_date">July 26th 2019</h4>
                            <div class="clear"></div>
                            <p>
                                Thank you so much to Garrett & Stacey for helping us design our gorgeous dream kitchen.
                            </p>
                        </div>
                        <div class="clear"></div>
                    </li>
                    <li>
                        <div class="review_image">

                        </div>
                        <div class="review_detail">
                            <h4 class="floatLeft">John Doe<span><img src="../assets/Path61_2.png">4</span></h4>
                            <h4 class="floatRight review_date">July 26th 2019</h4>
                            <div class="clear"></div>
                            <p>
                                Thank you so much to Garrett & Stacey for helping us design our gorgeous dream kitchen.
                            </p>
                        </div>
                        <div class="clear"></div>
                    </li>
                </ul>
            </div> -->
      <h5 *ngIf="product.similar && product.similar.length > 0">
        <span class="floatLeft">Related Products</span
        ><span class="floatRight" (click)="goToPage('productlist', data)"
          >MORE</span
        >
        <div class="clear"></div>
      </h5>
      <div class="related_product_slider">
        <ul *ngIf="product.similar && product.similar.length > 0">
          <ion-slides pager="false" [options]="relatedProd">
            <ion-slide *ngFor="let similar of product.similar">
              <li (click)="viewProd(similar)">
                <div class="product_image">
                  <img
                    [src]="similar.image"
                    onerror="this.src='../assets/model1@3x.png'"
                  />
                  <div
                    [ngClass]="checkFavStatus(similar.prodId)"
                    (click)="changeFav(similar.prodId)"
                  ></div>
                </div>
                <h5>{{similar.prodName}}</h5>
                <p>{{similar.price}}</p>
              </li>
            </ion-slide>
          </ion-slides>
        </ul>
      </div>
    </div>
  </div>
  <div class="loader" *ngIf="loader">
    <div class="lds-ripple">
      <div></div>
      <div></div>
    </div>
  </div>
</ion-content>
<ion-footer>
  <div class="footer_div">
    <div class="footer_options">
      <button class="share"></button>
      <button class="fav"></button>
      <button class="cart" (click)="buyNow(product,0)"></button>
    </div>
    <div class="footer_btn" (click)="buyNow(product,1)">BUY NOW</div>
  </div>
</ion-footer>
