<div class="heading-holder">
	<div class="name"> MY ORDERS </div>
	<!-- <ion-button fill="clear"> SORT / FILTER </ion-button> -->
</div>

<ul class="orders">
	<li *ngFor="let userOrder of userOrders" class="order" (click)="selected_order = order">
		<div class="order-mall" *ngFor="let order of userOrder.orderedlist">
			<div class="heading"> Order ID: {{ userOrder.orders_id }} </div>
			<div class="time-details">
				Pickup on {{ getFormattedDate(order.pickup_time, 'DD MMMM YYYY @ hh:mm A') }}
			</div>
			<div class="time-details">
				<p>
					<strong>Mall:</strong> {{ order.mall_name }}
				</p>
				<p>
					<strong>Outlet:</strong> {{ order.outlet_name }}
				</p>
			</div>

			<ul class="ordered-items">
				<li *ngFor="let item of order.menuitems">
					<div class="order-item-details">
						<label class="name"> {{ item.menu_item_name }} x {{ item.item_quantity }} </label>
					</div>
				</li>
			</ul>
			<ul class="ordered-items">
				<li>
					<div class="order-item-details">
						<label class="name"> <strong> TOTAL </strong> </label>
						<label class="time"> <strong> &#8377; {{ order.total_price }} </strong> </label>
					</div>
				</li>
			</ul>

			<p class="note">
				We will notify you each time a order is ready for pickup
			</p>

			<div class="action-buttons-holder">
				<ion-button shape="round" (click)="reOrder(userOrder.orderedlist)"> Reorder </ion-button>
				<ion-button shape="round" fill="outline" (click)="show_rate_modal = true"> Rate &amp; Review </ion-button>
			</div>
		</div>
	</li>
</ul>

<section class="common-semi-modal rating-modal" [ngClass]="{'active': show_rate_modal}">
	<header> Rate &amp; Review <button (click)="show_rate_modal = false"> Close </button> </header>
	<div class="rating">
		<div class="semi-heading"> Rating </div>
		<p> Rating the food will help us give you personalised recommendation </p>
		<div class="star-holder">
			<ion-icon name="star" (click)="selected_rating = 1"></ion-icon>
			<ion-icon name="star" (click)="selected_rating = 2"></ion-icon>
			<ion-icon name="star" (click)="selected_rating = 3"></ion-icon>
			<ion-icon name="star" (click)="selected_rating = 4"></ion-icon>
			<ion-icon name="star" (click)="selected_rating = 5"></ion-icon>
		</div>
	</div>
	<div class="review">
		<div class="semi-heading"> Review </div>
		<textarea placeholder="Please tell something about the food..."></textarea>
	</div>
	<ion-button size="block" shape="round"> Submit Feedback </ion-button>
</section>
