<ion-header class="nav_header theme_primary">
    <button class="nav_btn floatLeft" ion-button (click)="back()">
        <ion-icon name="ios-arrow-back"></ion-icon>
    </button>
    <div class="nav_header_title floatLeft">
      Booking
    </div>
  </ion-header>
  <ion-content padding>
      <div class="booking_wrapper">
          <div *ngIf="page == 'offers'" > 
            <h5>Selected</h5>
            <div class="" *ngIf="offers">
                <p><strong>{{offers.description}}</strong></p>
                <!--<h6 class="textRight">
                  <span class="discount_price"> -{{service_selected.discount}}%</span>
                </h6> -->
                <h6 class="textRight">
                  <span class="actual_price">€{{offers.price}}</span>
                  <span class="final_price">€{{offers.total_price}}</span>
                </h6>
				 <h5>Further Services</h5>
            <ion-list *ngIf="selected_services">
                <ion-item *ngFor="let serv of selected_services; let i=index">
                    <ion-label class="floatLeft">
                      <span class="floatLeft">{{serv.service}}</span>
                      <span class="floatRight">€{{serv.price}}</span></ion-label>
                      <div class="clear"></div>
                  <ion-checkbox class="floatRight" (ionChange)="updateCheckedOptions(serv, $event.checked)"></ion-checkbox> 
                  </ion-item>
            </ion-list>
            </div>   
          </div>
          <hr>
          <div [hidden]="page == 'offers' || page == 'quotes'" >
            <h5>Our Services</h5>
            <ion-list *ngIf="selected_services">
                <ion-item *ngFor="let serv of selected_services; let i=index">
                    <ion-label class="floatLeft">
                      <span class="floatLeft">{{serv.service}}</span>
                      <span class="floatRight">€{{serv.price}}</span></ion-label>
                      <div class="clear"></div>
                  <ion-checkbox class="floatRight" (ionChange)="updateCheckedOptions(serv, $event.checked)"></ion-checkbox> 
                  </ion-item>
            </ion-list>
          </div>
          <div class="no_result_found" *ngIf="service_message">
              <div class="no_result_icon">
                <img src="assets/imgs/icon4.png">
              </div>
              <p>
                  Book Value Empty
              </p>
          </div>
          <div class="no_result_found" *ngIf="book_message">
              <div class="no_result_icon">
                <img src="assets/imgs/icon4.png">
              </div>
              <p>
                service value empty
              </p>
          </div>
          <hr>
         
			 <div *ngIf="page == 'quotes'" > 
            <h5>Selected</h5>
            <div class="" *ngIf="quote_val">
                <p><strong>{{quote_val.service_name}}</strong></p>
                <!--<h6 class="textRight">
                  <span class="discount_price"> -{{service_selected.discount}}%</span>
                </h6> -->
                <h6 class="textRight">
                 
                  <span class="final_price">€{{quote_val.price}}</span>
                </h6>
				 <h5>Further Services</h5>
            <ion-list *ngIf="selected_services">
                <ion-item *ngFor="let serv of selected_services; let i=index">
                    <ion-label class="floatLeft">
                      <span class="floatLeft">{{serv.service}}</span>
                      <span class="floatRight">€{{serv.price}}</span></ion-label>
                      <div class="clear"></div>
                  <ion-checkbox class="floatRight" (ionChange)="updateCheckedOptions(serv, $event.checked)"></ion-checkbox> 
                  </ion-item>
            </ion-list>
            </div>   
          </div>
          <ion-row class="p0">
            <ion-col col-8 class="p0">
              <h4>Total Amount</h4>
              <span>(incl. 20 Mwst)</span>
            </ion-col>
            <ion-col col-4 class="textRight p0">
              <h3>€ {{total_price}}</h3>
            </ion-col>
          </ion-row>
          <br>
          <hr>
          <h4>Select Date and Available time</h4>
          <div class="offered_head">
              <div class="nav_btn floatLeft">
                  <ion-icon name="ios-arrow-back"  *ngIf="timing.dates >= tom" (click)="get_next_dates(timing.dates,'prev')"></ion-icon>
              </div>
              <div class="nav_header_title floatLeft">
                  <ion-item class="s_result_detail_datepicker"> 
                      <ion-datetime  displayFormat="DD MMM, YYYY" min="{{today_dt}}" max="2040" pickerFormat="YYYY-MM-DD" [(ngModel)]="timing.dates" 
                        (ngModelChange)="get_next_dates(timing.dates,'no')" 
                        placeholder="Start Time">
                      </ion-datetime>
                    </ion-item>
              </div>
              <div class="nav_btn floatRight" (click)="get_next_dates(timing.dates,'next')">
                  <ion-icon name="ios-arrow-forward"></ion-icon>
              </div>
              <div class="clear"></div>
          </div> 
		   <div class="booking_div">
          <div class="booking_content"   *ngIf="schedule">
          <div class="no_result_found" *ngIf="schedule.length <=0">
              <div class="no_result_icon">
                <img src="assets/imgs/icon4.png">
              </div> 
              <p>
                  No Schedule Found  
              </p>
          </div>
  
     
  
          <ul class="time_list" *ngIf="schedule.length >0">
            <li *ngFor="let book_dates of schedule"  (click)="select_time(timing.dates,book_dates)">
                {{book_dates}}
            </li>
  
            <div class="clear"></div>
          </ul>
          </div>
          </div>
          <button  class="login_btn theme_lblue widthFull" (click)="book()">Next</button>
  
      </div>
  </ion-content>