<ion-header class="theme_dark_bg">
  <button ion-button class="nav_btn theme_color floatLeft" (click)="back()">
      <ion-icon name="ios-arrow-back"></ion-icon>
  </button>
  <div class="nav_header_title floatLeft">Trips Details</div>
  <button class="nav_btn floatRight"></button>
  <div class="clear"></div>
</ion-header>
<ion-content class="themelogin_background">
  <div class="cab_trip_detail_wrapper">
    <h4>Pickup Point</h4>
    <p class="floatLeft textLeft width50">{{details.pickup_area}}</p>
    <p class="floatRight textRight width50">{{details.pickup_time}}, {{details.pickup_date}}</p>
    <div class="clear"></div>
    <br>
    <h4>Drop Point</h4>
    <p class="floatLeft textLeft width50">{{details.drop_area}}</p>
    <p class="floatRight textRight width50" *ngIf="details.drop_time">{{details.drop_time}}, {{details.drop_date}}</p>
    <div class="clear"></div>
    <br>
    <br>
    <hr *ngIf="details.assigned_for">
    <ion-grid class="p0" *ngIf="details.assigned_for">
      <ion-row>
        <ion-col col-6 class="p0">
          <h4>CAB DETAILS</h4>
          <p>{{details.taxi_type}}</p>
          <!-- <p>Ford Fiesta</p> -->
          <p>{{details.car_no}}</p>
        </ion-col>
        <ion-col col-6 class="p0">
          <h4>DRIVER DETAILS</h4>
          <p>{{details.name}}</p>
          <p>{{details.phone}}</p>
          <p><strong (click)="call()">Call Now</strong></p>
        </ion-col>
      </ion-row>
    </ion-grid>
    <br>
    <br>
    <hr *ngIf="details.item_status=='Complete'">
    <span *ngIf="details.item_status=='Complete'">
    <h4>PAYMENT DETAILS</h4>
    <p class="floatLeft textLeft">Amount Charged</p>
    <p class="floatRight textRight">Rs {{details.amount}}</p>
    <div class="clear"></div>
    <p class="floatLeft textLeft">Discount Amount</p>
    <p class="floatRight textRight">Rs {{details.discount}}</p>
    <div class="clear"></div>
    <p class="floatLeft textLeft">Amount Payable</p>
    <p class="floatRight textRight"><strong>Rs {{details.amount - details.discount}}</strong></p>
    <div class="clear"></div>
    </span>
    <br>
    <br>
    <span *ngIf="details.status=='Complete' && !details.rating">
    <h4 class="textCenter">Kindly Rate us for our service.</h4>
    <p class="textCenter">Your ratting is important for our better service.</p>
    <div class="cab_ratting" (click)="rating($event)">
        <input type="radio" id="star5" name="rating" value="5" /><label for="star5" title="Rocks!">5 stars</label>
        <input type="radio" id="star4" name="rating" value="4" /><label for="star4" title="Pretty good">4 stars</label>
        <input type="radio" id="star3" name="rating" value="3" /><label for="star3" title="Meh">3 stars</label>
        <input type="radio" id="star2" name="rating" value="2" /><label for="star2" title="Kinda bad">2 stars</label>
        <input type="radio" id="star1" name="rating" value="1" /><label for="star1" title="Sucks big time">1 star</label>
        <div class="clear"></div>
    </div>
    </span>
  </div>
</ion-content>
<ion-footer *ngIf="details.status!='Complete' && details.status!='Started' && details.status!='Cancelled'">
  <div class="cab_footer_btn_bay">
    <button ion-button class="cab_footer_btn single_btn" (click)="cancel()">CANCEL RIDE</button>
    <div class="clear"></div>
  </div>
</ion-footer>