<ion-header>
    <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-header>
<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>{{unEscape(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$ {{service.formatNumber(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>{{unEscape(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>{{unEscape(similar.prodName)}}</h5>
                                <p>{{service.formatNumber(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 *ngIf="product">
    <div class="footer_div">
        <div class="footer_options">
            <button class="share" (click)="socialShare(product.prodName, product.category, product.subCate, product.price, product.image)"></button>
            <button [ngClass]="checkFavStatus(product.prodId)" (click)="changeFav(product.prodId)"></button>
            <button class="cart" [disabled]="!disCart" (click)="buyNow(product,0)"></button>
        </div>
        <div class="footer_btn" (click)="buyNow(product,1)">BUY NOW</div>
    </div>
</ion-footer>