<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>
                    </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">EDIT</span>
                                <div class="clear"></div>
                            </h5>
                            <ion-grid class="p0">
                                <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">
                                <label for="paypal">
                                    <p>COD</p>
                                </label>
                            </div>
                            <!-- <div class="payment_method">
                                <input type="radio" name="payments" id="paypal" name="radio-group" checked (click)="getwaypaypal()">
                                <label for="test1">
                                    <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="test2">
                                    <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="test3">
                                    <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" #promo><button class="add_btn" (click)="promoApply(promo.value)">ADD</button>
                                <br/>&nbsp;<h6>GET50</h6>
                                <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>June 26th 2019, 03:00 PM</p>
                            <h3>The product will be delivered in</h3>
                            <h1>60:00 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 SHOPING</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>

