

<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 Overview
   </div>
</ion-header>
<ion-content class="page_background"><div *ngIf="request_val" >
<div class="widthFull theme_lblue text_color_white textCenter status_label" *ngIf="request_val.book_status=='1'" >BOOKED</div>
<div class="widthFull theme_green text_color_white textCenter status_label"  *ngIf="request_val.book_status=='3'" >COMPLETED</div>
<div class="widthFull theme_red text_color_white textCenter status_label"  *ngIf="request_val.book_status=='2'" >CANCELLED</div>
</div>
<div padding>
<div class="fm_vehicle_detail" *ngIf="request_val" >
  
    <div class="fm_quote_received">
        Booked for : <strong>{{request_val.book_date |date:'EE,dd.MM.yyyy'}} </strong> at <strong>{{request_val.book_time}} </strong>
    </div>
    <div class="fm_vehicle_banner">
      <div class="fm_vehicle_photo"> <img *ngIf="request_val.profile_pic" [src]="request_val.profile_pic" ></div>
      <div class="fm_vehicle_detail">
        <h4>{{request_val.name}} </h4>
        <!-- <p>Mustang 2017</p> -->
		 <button  type="button" *ngIf="request_val.rate==null && request_val.book_status==3" (click)="presentPopover($event)" class="fm_addreview">Add Review</button>
		<rating [(ngModel)]="request_val.rate" *ngIf="request_val.rate!=null"
        readOnly="true"  
        max="5" 
        emptyStarIconName="star-outline"  
        halfStarIconName="star-half"  
        starIconName="star"  
        nullable="false"  
        (ngModelChange)="onModelChange($event)"></rating>
      </div>
      <div class="clear"></div>
    </div>
    <div class="fm_vehicle_bottom">
      <p>Repair Type:</p>
      <h4 *ngIf="request_val.pool_id!=0" >{{request_val.service_name}}</h4> 
	    <h4 *ngIf="request_val.pool_id==0" >{{request_val.service}}</h4> 
	  <p>User Name:</p> 
      <h4>{{request_val.first_name}} {{request_val.last_name}}</h4>
	  <p *ngIf="request_val.discount!=null" >Discount:</p>
      <h4 *ngIf="request_val.discount!=null" >{{request_val.discount}}%</h4>
	  <p>Price:</p>
      <h4>€{{request_val.price}}</h4>
	  <p>Booking status:</p>
      <h4  *ngIf="request_val.book_status==1" >Waiting for Service</h4>
	  <h4  *ngIf="request_val.book_status==2" >On repair</h4>
	  <h4  *ngIf="request_val.book_status==3" >Garage has completed service</h4>
	  <h4  *ngIf="request_val.book_status==4" >Repair Completed</h4>

      <br>
       <!-- <p>Existing quote photos</p>
      <div class="fm_gallery">
        <li></li>
        <li></li>
        <div class="clear"></div>
      </div>
      <p>Details and Images</p>
      <div class="fm_gallery">
        <li *ngFor="let images of request_val.pool_images" > <img [src]="images.image" ></li>
      </div> -->
      </div>
      <div class="textCenter" *ngIf="request_val">
          <button *ngIf="request_val.book_status==3"  class="login_btn widthFull theme_lblue" ion-button (click)="repair()">Confirm Repair Complete</button>
      </div>
  </div>
</div>
  
</ion-content>

