<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">
                                    <div class="close"></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)="addCount()">+</div>
                                        <div class="count">{{count}}</div>
                                        <div class="remove" (click)="removeCount()">-</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>1 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>
                                            Shamjith KS<br> +00 0000 888 888<br> Carnival InfoparkInfopark Kochi<br> 682030, Kerala, India
                                        </h6>
                                    </ion-col>
                                </ion-row>
                            </ion-grid>
                            <hr>
                            <h5>
                                <span class="floatLeft">PAYMENT</span>
                                <span class="floatRight">CHANGE</span>
                                <div class="clear"></div>
                            </h5>
                            <p>AfterPay</p>
                            <div class="card_div">
                                <input class="card_no" placeholder="**** **** **** 1458">
                                <input class="cv_number" placeholder="CVV">
                            </div>
                            <div class="after_pay">
                                Pay Pal
                            </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"><button class="add_btn">ADD</button>
                            </div>
                            <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$ {{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 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)="goToPage('orderplaced')">
            FINISH
        </div> -->
    </div>
</ion-content>
<!-- <div class="loader">
    <div class="lds-ripple">
        <div></div>
        <div></div>
    </div>
</div> -->