<ion-header class="theme_background">
    <button ion-button class="nav_btn floatLeft" (click)="back()">
        <ion-icon name="arrow-back"></ion-icon>
    </button>
    <div class="nav_header_title floatLeft">
        <h5>
            {{'common.Bookings' | translate}}
        </h5>
    </div>
    <div class="clear"></div>
</ion-header>
<ion-content padding>
    <div class="booking">
        <h5>
            {{'common.Choose_your_booking_date' | translate}}
        </h5>
        <ion-item>
            <ion-datetime min="{{current_date}}" displayFormat="DD/MM/YYYY" [(ngModel)]="myDate" placeholder="{{'common.Pick_date' | translate}}" (ionChange)="call_time()"></ion-datetime>
        </ion-item>
        <h5>
            {{'common.Choose_your_booking_time' | translate}}
        </h5>
        <ion-item>
            <ion-datetime  hourValues="{{time_list}}" displayFormat="hh:mm" [(ngModel)]="myTime" placeholder="{{'common.Pick_time' | translate}}" (ionChange)="check_time()"></ion-datetime>
        </ion-item>
        <br>
        <div class="service_list">
            <h5>
                {{'common.Choose_your_services' | translate}}
            </h5>
            <ul *ngIf="result ">
                <li *ngFor="let service of result.services">
                    <ion-item>
                        <ion-checkbox (ionChange)="service_choose(service,$event) "></ion-checkbox>
                        <ion-label>{{service.service_name}}</ion-label>
                        <div class="clear"></div>
                    </ion-item>
                </li>
            </ul>
        </div>
    </div>
    <div class="footer_row">
    <ion-row *ngIf="selected_service && selected_service.length>0">
        <ion-col col-8 class="p0">
            <p>{{'common.Total_Fare' | translate}}<br>
                <strong class="amount">{{price}}</strong>
            </p>
        </ion-col>
        <ion-col col-4 class="p0">
            <button ion-button class="done_btn m0 widthFull" (click)="done()" [disabled]="check_validate()">
             {{'common.Apply' | translate}}
          </button>
        </ion-col>
    </ion-row>
</div>
</ion-content>
