<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">
       Garage
    </div>
 </ion-header>
 <ion-content>
    <div class="shop_wrapper" *ngIf="profile" >
       <div class="shop_banner_img">
          <img  [src]="profile.profile_pic">
          <img class="border_img" src="assets/img/fm_edit_border1.png">
       </div>
       <div class="shop_detail">
          <h4>{{profile.name}}</h4>
          <rating [(ngModel)]="profile.rate" 
          readOnly="true"  
          max="5" 
          emptyStarIconName="star-outline"  
          halfStarIconName="star-half"  
          starIconName="star"  
          nullable="false"  
          (ngModelChange)="onModelChange($event)">
          </rating>
          <br>
          <div class="clear"></div>
          <div class="map_nav">
             <div class="map_direction floatLeft">
                <p>{{profile.address}}</p>
             </div>
             <button type="button" class="map_btn floatRight" (click)="open_map(profile.lat,profile.lng)" >Map</button>
             <div class="clear"></div>
          </div>
       </div>
       <div class="more_details">
         <div class="row">
            <p>About</p>
            <h6>{{profile.description}}</h6>
         </div>
         <div class="row"  *ngIf="offers">
            <p>Service details :</p>
            <h6><span *ngIf="offers.description!=''" >{{offers.description}}</span><span  *ngIf="offers.description==''"  >No Description Available</span></h6>
            <p>Spare Parts :</p>
            <h6>OEM-parts(Erstausrusterqualitat)</h6>
            <p>Warranty on spare parts and work :</p>
            <h6>24 Months</h6>
            <p>Payment :</p>
            <h6>Pay on site</h6>
            <p>Price :</p>
			<h6><span class="actual_price">€ {{offers.price}}</span><span class="final_price">€ {{offers.total_price}}</span></h6>
            
         </div>   
		 <div class="row"  *ngIf="page=='quotes'">
            <p>Service details :</p>
            <h6><span *ngIf="quote_val.service_name!=''" >{{quote_val.service_name}}:including all parts and all labour according to quote</span><span  *ngIf="quote_val.service_name==''"  >No Description Available</span></h6>
            <p>Spare Parts :</p>
            <h6>OEM-parts(Erstausrusterqualitat)</h6>
            <p>Warranty on spare parts and work :</p>
            <h6>24 Months</h6>
            <p>Payment :</p>
            <h6>Pay on site</h6>
            <p>Price :</p>
			<h6><span class="final_price">€ {{quote_val.price}}</span></h6>
            
         </div>
		 
         <div class="row"  *ngIf="page=='fixprice'">
            <p>Service details:</p>
            <h6><span *ngIf="services_pg.description!=''" >{{services_pg.description}}</span><span  *ngIf="services_pg.description==''"  >No Description Available</span></h6>
            <p>Payment:</p>
            <h6>Pay on site</h6>
            <p>Price:</p>
            <h6>{{services_pg.price}}</h6>
         </div>
         <div class="row" *ngIf="selected_services && page=='location'">
           <p> Our Services</p>
          <h6 *ngFor="let serv of selected_services">{{serv.service}} € {{serv.price}} </h6>
          </div>
          <button ion-button type="button"  class="login_btn theme_lblue widthFull" (click)="book_now()">Go To Booking</button>
       </div>
       <hr>
       <div class="review_bay">
         <p>RATE & REVIEW</p>
         <ul *ngIf="profile.rating.length >0">
           <li  *ngFor="let rate_list of profile.rating">
             <div class="rate_pic">
                <img [src]="rate_list.profile_pic" *ngIf="rate_list.profile_pic" >
             </div>
             <div class="rate_detail">
               <h6>{{rate_list.first_name}} {{rate_list.last_name}}</h6>
               <p>{{rate_list.timestamp |date:'EE,dd.MM.yyyy'}}</p>
               <p *ngIf="rate_list.service" > {{rate_list.service }}</p>
                <p *ngIf="rate_list.service_name" > {{rate_list.service_name }}</p>
               <rating [(ngModel)]="rate_list.rate" 
                      readOnly="true"  
                      max="5" 
                      emptyStarIconName="star-outline"  
                      halfStarIconName="star-half"  
                      starIconName="star"  
                      nullable="false"  
                      (ngModelChange)="onModelChange($event)"></rating>
               <h5>{{rate_list.comments}}</h5>
             </div>
             <div class="clear"></div>
           </li>
         </ul>

         <div class="no_result_found"*ngIf="profile.rating.length <=0">
            <div class="no_result_icon">
               <img src="assets/imgs/icon4.png">
            </div>
            <p>
               No result found
            </p>
        </div>
       </div>
    </div>
 </ion-content>