<ion-header class="theme_dark_bg">
  <button ion-button class="nav_btn theme_color floatLeft" (click)="goBack()">
     <ion-icon name="ios-arrow-back"></ion-icon>
  </button>
  <div class="nav_header_title floatLeft">Add Coupons</div>
  <div class="clear"></div>
</ion-header>

<ion-content padding class="cab_coupon_bg">
  <div class="cab_coupon_wrapper">
		<form [formGroup]="promoForm">
	<div class="cab_coupon_box">
		<input class="cab_coupon_input" placeholder="Enter Coupon Code" formControlName="promocode">
	</div>
	</form>
	<!-- <p *ngIf="">You don’t seem to have any valid coupons.<br> -->
	<!-- Invite your friends. Unlock free ride coupons</p> -->
	<div class="cab_coupon_box">
		<button ion-button class="cab_coupon_apply" (click)="checkCode()" [disabled]="promoBtn">Apply</button>
	</div>
	<div class="cab_coupon_content">
		<p>Payment Details</p>
		<li>
			<div class="child textLeft">Total</div>
			<div class="child textRight">₹ {{rate[0]}}</div>
			<div class="clear"></div>
		</li>
		<li>
			<div class="child textLeft">Discount</div>
			<div class="child textRight" *ngIf="promo.discount.slice(-1)=='%'">{{promo.discount}}</div>
			<div class="child textRight" *ngIf="promo.discount.slice(-1)!='%'">₹ {{promo.discount}}</div>
			<div class="clear"></div>
		</li>
		<li>
			<div class="child textLeft">Due after service</div>
			<div class="child textRight">₹ {{promo.amount}}</div>
			<div class="clear"></div>
		</li>

	</div>
  </div>
</ion-content>
<ion-footer>
  <div class="cab_footer_btn_bay">
    <button ion-button class="cab_footer_btn floatRight"(click)="pay()">CONTINUE</button>
    <button ion-button class="cab_footer_btn floatLeft" (click)="goBack()">CANCEL</button>
    <div class="clear"></div>
  </div>
</ion-footer>
