<ion-content>
    <div class="cart_wrapper">
        <div class="cart_head">
            <div class="nav_header">
                <button class="nav_btn nav_back_white floatLeft" (click)="goBack()">
                    <img src="../assets/arrow_white.png" />
                </button>
                <div class="nav_title floatLeft">
                    <h4>CART</h4>
                </div>
                <button class="nav_btn floatRight"></button>
                <div class="clear"></div>
            </div>
            <div class="cart_menu_header">
                <ul>
                    <li class="textCenter active" [class.active]="currentIndex == 0">
                        CART
                    </li>
                    <li class="textCenter">
                        <hr />
                    </li>
                    <li class="textCenter" [class.active]="currentIndex == 1">
                        CHECKOUT
                    </li>
                    <li class="textCenter">
                        <hr />
                    </li>
                    <li class="textCenter" [class.active]="currentIndex == 2">FINISH</li>
                </ul>
            </div>
            <div class="cart_content">
                <ion-slides pager="false" [options]="cartwizard" (ionSlideDidChange)="slideChanged()">
                    <ion-slide>
                        <div class="cart_list" *ngIf="cartService.carts">
                            <ul *ngIf="cartService.carts.length > 0">
                                <li *ngFor="let carts of cartService.carts; let i= index">
                                    <div class="close" (click)="cartService.removeItem(i)"></div>
                                    <div class="cart_image">
                                        <img [src]="carts.image" onerror="this.src=''" />
                                    </div>
                                    <div class="cart_detail">
                                        <h4>{{carts.prodName}}</h4>
                                        <h4>{{carts.size}}, {{carts.color}}</h4>
                                        <h5>A$ {{carts.price}}</h5>
                                    </div>
                                    <div class="cart_count">
                                        <div class="add" (click)="cartService.addCount(i)">+</div>
                                        <div class="count">{{carts.qty}}</div>
                                        <div class="remove" (click)="cartService.removeCount(i)">
                                            -
                                        </div>
                                    </div>
                                    <div class="clear"></div>
                                </li>
                            </ul>
                            <div class="total_div" *ngIf="cartService.cartTotal">
                                <ion-row>
                                    <ion-col>
                                        <p class="textLeft">Total Price:</p>
                                    </ion-col>
                                    <ion-col>
                                        <p class="textRight">A$ {{cartService.cartTotal}}</p>
                                    </ion-col>
                                </ion-row>
                            </div>
                            <div class="no-items-wrapper" *ngIf="cartService.carts.length == 0">
                                <img src="../../assets/noitem.png" />
                                <h1>There is no products added</h1>
                                <button (click)="goToPage('home')">Shop Now</button>
                            </div>
                        </div>
                    </ion-slide>
                    <ion-slide>
                        <div class="checkout_list">
                            <h5>
                                <span class="floatLeft">ITEMS</span>
                                <span class="floatRight" *ngIf="cartService.cartTotal">A$
                                    {{cartService.cartTotal}}</span>
                                <div class="clear"></div>
                            </h5>
                            <ion-grid class="p0" *ngIf="cartService.carts && cartService.carts.length > 0">
                                <ion-row *ngFor="let carts of cartService.carts">
                                    <ion-col size="6" class="p0">
                                        <h6 class="textLeft">{{carts.prodName}}</h6>
                                    </ion-col>
                                    <ion-col size="2" class="p0">
                                        <h6 class="textRight"><strong>{{carts.qty}} X</strong></h6>
                                    </ion-col>
                                    <ion-col size="4" class="p0">
                                        <h6 class="textRight">
                                            <strong>A$ {{carts.price}}</strong>
                                        </h6>
                                    </ion-col>
                                </ion-row>
                            </ion-grid>
                            <hr />
                            <h5>
                                <span class="floatLeft">DELIVERY</span>
                                <span class="floatRight" (click)="istoggle()">EDIT</span>
                                <div class="clear"></div>
                            </h5>
                            <ion-grid class="p0" *ngIf="custAddress">
                                <ion-row>
                                    <ion-col class="p0">
                                        <h6>
                                            {{custAddress.building}},<br /> {{custAddress.landmark}},
                                            <br /> {{custAddress.address}}
                                        </h6>
                                    </ion-col>
                                </ion-row>
                            </ion-grid>
                            <hr />
                            <h5>
                                <span class="floatLeft">PAYMENT</span>
                                <span class="floatRight">CHANGE</span>
                                <div class="clear"></div>
                            </h5>
                            <div class="payment_method">
                                <input type="radio" name="payments" id="cod" name="radio-group" checked="true" (click)="getwaycod()" />
                                <label for="cod">
                                    <p>COD</p>
                                </label>
                            </div>
                            <div class="payment_method">
                                <input type="radio" name="payments" id="paypal" name="radio-group" (click)="getwaypaypal()" />
                                <label for="paypal">
                                    <p>PayPal</p>
                                </label>
                            </div>
                            <!-- <div class="card_div" [hidden]="gateway !=1">
                <input class="card_no borderNone widthFull" placeholder="PayPal ID" />
              </div> -->
                            <div class="payment_method">
                                <input type="radio" name="payments" id="afterpay" name="radio-group" (click)="getwayafterpay()" />
                                <label for="afterpay">
                                    <p>AfterPay</p>
                                </label>
                            </div>
                            <!-- <div class="card_div" [hidden]="gateway !=2">
                <input class="card_no" placeholder="**** **** **** 1458" />
                <input class="cv_number" placeholder="CVV" />
              </div> -->
                            <div class="payment_method">
                                <input type="radio" name="payments" id="payk" name="radio-group" (click)="getwaypayk()" />
                                <label for="payk">
                                    <p>PayK</p>
                                </label>
                            </div>
                            <!-- <div class="card_div" [hidden]="gateway !=3">
                <input
                  class="card_no borderNone widthFull"
                  placeholder="PafyK ID"
                />
              </div> -->
                            <!-- <div class="delivery_time">
                                <ul>
                                    <li>
                                        Delivery 10 Mnt<br>
                                        <strong>AU$10</strong>
                                    </li>
                                    <li>
                                        Delivery 1 Hr<br>
                                        <strong>FREE</strong>
                                    </li>
                                </ul>
                            </div> -->
                            <hr />
                            <div class="coupon_code">
                                <input class="" placeholder="COUPON CODE: GET50" #promo /><button class="add_btn" (click)="promoApply(promo.value)">
                                    APPLY
                                </button>
                                <span *ngIf="discountApplied" style="color: red">Promocode applied successfully
                                </span>
                            </div>
                            <br />

                            <h6>
                                <span class="floatLeft">PRODUCT COST</span>
                                <span class="floatRight" *ngIf="cartService.cartTotal">A$
                                    {{cartService.cartTotal}}</span>
                                <div class="clear"></div>
                            </h6>

                            <h6>
                                <span class="floatLeft">DELIVERY CHARGE</span>
                                <span class="floatRight" *ngIf="cartService.cartTotal">A$
                                    {{getDeliveryCharge(cartService.cartTotal)}}</span>
                                <div class="clear"></div>
                            </h6>
                            <h6>
                                <span class="floatLeft">GST/TAX</span>
                                <span class="floatRight" *ngIf="cartService.cartTotal">A$
                                    {{getTax(cartService.cartTotal)}}</span>
                                <div class="clear"></div>
                            </h6>
                            <h6 *ngIf="discountApplied">
                                <span class="floatLeft">DISCOUNT</span>
                                <span class="floatRight">(-) A$ {{discount}}</span>
                                <div class="clear"></div>
                            </h6>
                            <hr />
                            <div class="total_div">
                                <ion-row>
                                    <ion-col>
                                        <p class="textLeft">Total Price:</p>
                                    </ion-col>
                                    <ion-col>
                                        <p class="textRight" *ngIf="cartService.cartTotal">
                                            A$ {{getTotal(cartService.cartTotal)}}
                                        </p>
                                    </ion-col>
                                </ion-row>
                            </div>
                        </div>
                    </ion-slide>
                    <ion-slide>
                        <div class="order_placed_div">
                            <img src="../assets/Group137@3x.png" />
                            <h4>Order Placed</h4>
                            <p>{{bookDate}}</p>
                            <h3>The product will be delivered in</h3>
                            <h1>{{deliveryTime}} Mins</h1>
                            <button class="view_order" (click)="goToPage('myorder')">
                                VIEW ORDERS</button><br />
                            <button class="home_btn" (click)="goToPage('home')">HOME</button>
                        </div>
                    </ion-slide>
                </ion-slides>
            </div>
        </div>
    </div>
</ion-content>
<ion-footer>
    <div class="footer_btnbay" *ngIf="cartService.carts && cartService.carts.length > 0" [hidden]="currentIndex != 0">
        <div class="continue" (click)="goToPage('productlist')">
            CONTINUE SHOPPING
        </div>
        <div class="checkout" (click)="next(1)">CHECKOUT</div>
    </div>
    <div class="footer_btn" *ngIf="cartService.carts && cartService.carts.length > 0" [hidden]="currentIndex != 1" (click)="next(2);">
        PAY
    </div>
    <!-- <div class="footer_btn" [hidden]="currentIndex != 2" (click)="finishpop()">
        FINISH
    </div> -->
</ion-footer>
<div class="loader" *ngIf="loader">
    <div class="lds-ripple">
        <div></div>
        <div></div>
    </div>
</div>

<div *ngIf="isShow" [@slideInOut]>
    <div class="nav_header">
        <button class="nav_btn nav_back floatLeft" (click)="istoggle(); setAddress()">
            <img src="../assets/Group17_2.png" />
        </button>
        <div class="nav_title floatLeft">
            <h4>CHANGE LOCATION</h4>
        </div>
        <div class="clear"></div>
    </div>
    <ion-content class="sort_wrappper">
        <agm-map [zoom]="20" [latitude]="lat" [longitude]="lng" [disableDefaultUI]="false" [zoomControl]="false" [backgroundColor]="'rgba(29, 27, 130,0.2)'">
            <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
        </agm-map>
        <div class="add_address_wrapper">
            <h5>
                <span class="floatLeft">NEW ADDRESS</span>
                <span class="floatRight" (click)="istoggle(); goToPage('nearby')">ADD NEW</span>
                <div class="clear"></div>
            </h5>
            <ul *ngIf="addressService.addressList && addressService.addressList.length > 0">
                <li *ngFor="let address of addressService.addressList; let i = index">
                    <div class="floatLeft">
                        {{address.default}}
                        <input class="styled-checkbox" name="addressId" id="styled-checkbox-{{i}}" type="radio" (click)="setDefault(address.addressId, i)" [value]="address.addressId" #addressType [checked]="address.defaultVal == 1" />
                        <label for="styled-checkbox-{{i}}"> {{address.addressType}} </label>
                    </div>
                    <div class="floatLeft">
                        <p>
                            {{address.building}}, {{address.landmark}}, {{address.address}}
                        </p>
                    </div>
                    <div class="clear"></div>
                </li>
            </ul>
        </div>
    </ion-content>
</div>