<ion-content [fullscreen]="true"  class="ion-padding">
  <ion-header>
    <ion-toolbar>
      <ion-title>Cart</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-card class="order-card" *ngFor="let item of cartItems">
    <ion-card-header color="primary">
      <ion-card-title>{{ item.restaurantName }}</ion-card-title>
    </ion-card-header>
    <br>
    <ion-card-content>
      <p>Dish: {{ item.dishName }}</p>
      <p>Quantity: {{ item.quantity }}</p>
      <p>Price: {{ item.dishPrice | currency :'ZAR':'symbol' }}</p>
    </ion-card-content>
  </ion-card>
  
  <ion-grid>
    <ion-row class="ion-text-center">
      <ion-col size="2">
        <ion-icon style="padding-top: 12px;" aria-hidden="true" name="home" size="large"></ion-icon>
      </ion-col>
      <ion-col style="padding-top: 13px;">
        <ion-row>
          Deliver to My Couch
        </ion-row>
        <ion-row>
          <ion-text color="medium"><sub>12 Main Street</sub></ion-text>
        </ion-row>
      </ion-col>
      <ion-col size="auto">
        <ion-button fill="clear"><ion-text color="danger" size="small">CHANGE</ion-text></ion-button>
      </ion-col>
    </ion-row>
  </ion-grid>

  <ion-card>
   
    <ion-card-header color="primary">
     <ion-card-title> Cart details </ion-card-title>
    </ion-card-header>
  
    <ion-card-content>
      <ion-grid>
        <ion-row>
          <ion-col>Item Total:</ion-col>
          <ion-col>{{itemPrice | currency :'ZAR':'symbol'}}</ion-col>
        </ion-row>
        <ion-row>
          <ion-col>Delivery Fee:</ion-col>
          <ion-col>{{ 50 | currency :'ZAR':'symbol'}}</ion-col>
        </ion-row>
        <ion-row>
          <ion-col>Total Price:</ion-col>
          <ion-col>{{ totalPrice | currency :'ZAR':'symbol'}}</ion-col>
        </ion-row>
      </ion-grid> 
      
      <ion-button id="present-alert" expand="block" color="primary">Make Payment</ion-button> 
      <ion-toast class="custom-toast" position="middle" trigger="open-toast" message="Payment successful!" [duration]="3000" icon="checkmark-sharp"></ion-toast>
    </ion-card-content>
  </ion-card>


  <ion-alert
    trigger="present-alert"
    header="Confirm Payment"
    [buttons]="alertButtons"
  ></ion-alert>

</ion-content>