<ion-header class="theme_background">
    <button ion-button class="nav_btn floatLeft" menuToggle>
        <ion-icon name="menu"></ion-icon>
    </button>
    <div class="nav_header_title floatLeft">
        <h5>{{'common.My_Booking' | translate}}</h5>
    </div>
    <div class="clear"></div>
</ion-header>
<ion-content>
    <ion-segment [(ngModel)]="booking">
            <ion-segment-button value="upcoming">
                 {{'common.Bookings' | translate}}
            </ion-segment-button>            
            <ion-segment-button value="past">
                {{'common.Completed' | translate}}
            </ion-segment-button>
        </ion-segment>
    <div [ngSwitch]="booking" *ngIf="result">
    <div class="booking_history" *ngSwitchCase="'upcoming'">
        <ion-card *ngFor="let res of result.list">
            <ion-card-content>
                <div class="booking_head">
                    <h4 class="">{{res.shop_name}}</h4>
                </div>
                <div class="booking_detail">
                    <ion-row>
                        <ion-col col-4>
                            <p>{{'common.Date' | translate}}</p>
                        </ion-col>
                        <ion-col col-1>:</ion-col>
                        <ion-col col-7>
                            <h6 class="textRight">
                                {{res.booking_date}}
                            </h6>
                        </ion-col>
                    </ion-row>
                    <ion-row>
                        <ion-col col-4>
                            <p>{{'common.Time' | translate}}</p>
                        </ion-col>
                        <ion-col col-1>:</ion-col>
                        <ion-col col-7>
                            <h6 class="textRight">
                                {{res.booking_time}}
                            </h6>
                        </ion-col>
                    </ion-row>
                    <ion-row>
                        <ion-col col-4>
                            <p>{{'common.Services' | translate}}</p>
                        </ion-col>
                        <ion-col col-1>:</ion-col>
                        <ion-col col-7>
                            <h6 class="textRight">
                                {{res.services}}
                            </h6>
                        </ion-col>
                    </ion-row>
                    <ion-row>
                        <ion-col col-4>
                            <p>{{'common.Total_Amount' | translate}}</p>
                        </ion-col>
                        <ion-col col-1>:</ion-col>
                        <ion-col col-7>
                            <h6 class="textRight">
                                {{res.total}}
                            </h6>
                        </ion-col>
                    </ion-row>
                    <ion-row>
                        <ion-col col-4>
                            <p>{{'common.Status' | translate}}</p>
                        </ion-col>
                        <ion-col col-1>:</ion-col>
                        <ion-col col-7>
                            <h6 class="textRight">
                                {{res.status}}
                            </h6>
                        </ion-col>
                    </ion-row>
                </div>
            </ion-card-content>
        </ion-card>        
    </div>
    <div class="booking_history" *ngSwitchCase="'past'">
        <ion-card *ngFor="let res of result.completed">
            <ion-card-content>
                <div class="booking_head">
                    <h4 class="">{{res.shop_name}}</h4>
                </div>
                <div class="booking_detail">
                    <ion-row>
                        <ion-col col-4>
                            <p>{{'common.Date' | translate}}</p>
                        </ion-col>
                        <ion-col col-1>:</ion-col>
                        <ion-col col-7>
                            <h6 class="textRight">
                                {{res.booking_date}}
                            </h6>
                        </ion-col>
                    </ion-row>
                    <ion-row>
                        <ion-col col-4>
                            <p>{{'common.Time' | translate}}</p>
                        </ion-col>
                        <ion-col col-1>:</ion-col>
                        <ion-col col-7>
                            <h6 class="textRight">
                                {{res.booking_time}}
                            </h6>
                        </ion-col>
                    </ion-row>
                    <ion-row>
                        <ion-col col-4>
                            <p>{{'common.Services' | translate}}</p>
                        </ion-col>
                        <ion-col col-1>:</ion-col>
                        <ion-col col-7>
                            <h6 class="textRight">
                                {{res.services}}
                            </h6>
                        </ion-col>
                    </ion-row>
                    <ion-row>
                        <ion-col col-4>
                            <p>{{'common.Total_Amount' | translate}}</p>
                        </ion-col>
                        <ion-col col-1>:</ion-col>
                        <ion-col col-7>
                            <h6 class="textRight">
                                {{res.total}}
                            </h6>
                        </ion-col>
                    </ion-row>
                    <ion-row>
                        <ion-col col-4>
                            <p>{{'common.Status' | translate}}</p>
                        </ion-col>
                        <ion-col col-1>:</ion-col>
                        <ion-col col-7>
                            <h6 class="textRight">
                                {{res.status}}
                            </h6>
                        </ion-col>
                    </ion-row>
                </div>
            </ion-card-content>
        </ion-card>             
    </div>
</div>
</ion-content>