<div class="ion-page" #page>
<ion-content [fullscreen]="true" class="ion-padding">
  <ion-header>
    <ion-toolbar>
      <ion-title>Account</ion-title>
    </ion-toolbar>
  </ion-header>
        <ion-list>
          <ion-item> 
            <ion-label>{{userName}} <br>                
              <ion-text color="medium">
                <sub><ion-icon name="call"></ion-icon>{{userNumber}}</sub>
                <sub>  |  </sub>
                <sub><ion-icon name="mail"></ion-icon>{{userEmail}}</sub>
              </ion-text>
            </ion-label>
            <ion-button slot="end" fill="outline" size="small" id="open-modal" expand="block">Edit</ion-button>
          </ion-item>
        </ion-list>
        <ion-grid>
          <ion-row class="ion-text-center">
            <ion-col size="auto">
              <ion-icon style="padding-top: 12px;" aria-hidden="true" name="home" size="large"></ion-icon>
            </ion-col>
            <ion-col>
              <h3><ion-text>Manage Address</ion-text></h3>
            </ion-col>
            <ion-col size="auto">
              <ion-button fill="clear"><ion-icon size="large" name="chevron-forward-circle-outline"></ion-icon></ion-button>
            </ion-col>
          </ion-row>
        </ion-grid>

        <ion-modal trigger="open-modal" (willDismiss)="onWillDismiss($event)">
          <ng-template>
            <ion-header>
              <ion-toolbar>
                <ion-buttons slot="start">
                  <ion-button (click)="cancel()">Cancel</ion-button>
                </ion-buttons>
                <ion-title>Edit</ion-title>
                <ion-buttons slot="end">
                  <ion-button (click)="confirm()" [strong]="true">Confirm</ion-button>
                </ion-buttons>
              </ion-toolbar>
            </ion-header>
            <ion-content class="ion-padding">
              <ion-item>
                <ion-label position="stacked">Enter your name</ion-label>
                <ion-input type="text" placeholder="Your name"[(ngModel)] = "userName"></ion-input>
                <ion-label position="stacked">Enter your email</ion-label>
                <ion-input type="text" placeholder="Your email"[(ngModel)] = "userEmail"></ion-input>
                <ion-label position="stacked">Enter your number</ion-label>
                <ion-input type="text" placeholder="Your number"[(ngModel)] = "userNumber"></ion-input>
              </ion-item>
            </ion-content>
          </ng-template>
        </ion-modal>

  <ion-card>
    <ion-card-header color="primary">
      <ion-card-title>Order History</ion-card-title>
    </ion-card-header>
   <br>
    <ion-card-content  *ngFor="let item of orderHistory">
      <ion-list class="orderHistory-card">
        <ion-item>
          <h2><ion-label>{{ item.restaurantName }} </ion-label></h2>
        </ion-item>
        <ion-item>
          <ion-label>Dish: {{ item.dishName }}</ion-label>
        </ion-item>
        <ion-item>
          <ion-label>Quantity: {{ item.quantity }}</ion-label>
        </ion-item>
      </ion-list>
    </ion-card-content>
    <ion-card-content>
      <ion-text color="primary">
        <h1>Total: {{ totalPrice | currency :'ZAR':'symbol'}}</h1>
      </ion-text>
      <ion-text color="secondary">
        <sub>Includes delivery fee</sub>
      </ion-text>
    </ion-card-content>
  </ion-card>

  <ion-grid>
    <ion-row>
      <ion-col>
        <ion-button style="width: 100%;" fill="outline" size="small" (click)="reOrderAddToCart()">Reorder All</ion-button>
      </ion-col>
      <ion-col>
        <ion-button style="width: 100%;" fill="outline" size="small"  id="open-help-modal" expand="block">Need Help?</ion-button>
      </ion-col>
    </ion-row>
  </ion-grid>

  <ion-modal #modal trigger="open-help-modal" [canDismiss]="canDismiss" [presentingElement]="page">
    <ng-template>
      <ion-header>
        <ion-toolbar>
          <ion-title>Modal</ion-title>
          <ion-buttons slot="end">
            <ion-button (click)="modal.dismiss()">Close</ion-button>
          </ion-buttons>
        </ion-toolbar>
      </ion-header>
      <ion-content class="ion-padding">
        <h1>
          Placing an order:
        </h1>
        <p>
          To place an order, simply search for the restaurant or cuisine you're interested in, browse their menu, and select the items you'd like to order. Once you're done, proceed to the checkout page and review your order details before submitting.
        </p>
        <h1>
          Making a payment:
        </h1>
        <p>
          We offer a variety of payment options, including credit/debit card, PayPal, and in-app wallet. Simply select your preferred payment method at checkout and follow the instructions to complete your transaction.
        </p>
        <h1>
          Changing delivery address:
        </h1>
        <p>
          If you need to change your delivery address after placing an order, please contact our support team as soon as possible. We'll do our best to accommodate your request, but please note that any changes made after the order has been dispatched may result in a delay or additional fee.
        </p>
        <h1>
          Changing user details:
        </h1>
        <p>
          To update your user details, including your name, email, phone number, or password, go to your account settings page and make the necessary changes. Please note that some details, such as your email or phone number, may be required for verification purposes and cannot be changed without additional steps.
        </p>
      </ion-content>
    </ng-template>
  </ion-modal>
</ion-content>
</div>