drinkMe/drinkMe/Client/Pages/Index.razor

@page "/"

<PurchaseSteps PurchaseStep="PurchaseStep.ChoosingProducts" />

<section class="section">
	<div class="container">

		<div class="columns">

			<div class="column is-half">
				<div class="columns is-multiline">

					@foreach (var drink in AvailableDrinks)
					{
						<div @key="drink.Id" class="column is-full">
							<div class="box">
								<article class="media">
									<div class="media-left">
										<figure class="image is-64x64">
											<img src="images/drinks/@drink.PictureName" alt="drink image">
										</figure>
									</div>
									<div class="media-content">
										<div class="content">
											<p>
												<strong>@drink.Name</strong>
												<br>
												<span>@drink.Description</span>
											</p>
										</div>
										<div class="level">
											<div class="level-left">
												<div class="level-item">
													<strong>@drink.Price €</strong>
												</div>
											</div>
											<div class="level-right mt-2-mobile">
												<div class="level-item has-text-centered">
													<button class="button is-small is-primary has-icons-left"
																	disabled="@drink.IsInTheCart" @onclick="async () => await AddToCart(drink)">
														<span class="icon"><i class="fad fa-cart-arrow-down"></i></span>
														<span>Add to cart</span>
													</button>
												</div>
											</div>
										</div>
									</div>
								</article>
							</div>
						</div>
					}
				</div>
			</div>

			<div class="column is-half">

				<div class="box">
					@if (CartDrinks.Count == 0)
					{
						<h1 class="has-text-centered">
							<span class="icon-text">
								<span class="icon">
									<i class="fad fa-shopping-cart"></i>
								</span>
								<span>Empty cart</span>
							</span>
						</h1>
					}
					else
					{
						<div class="drinkCartList">
							@foreach (var cartDrink in CartDrinks)
							{
								<div class="drinkCartItem">

									<div class="drinkCartName"><strong>@cartDrink.Name</strong></div>
									<div class="drinkCartQuantity">
										<div class="field has-addons">
											<p class="control">
												<button class="button is-small is-danger" @onclick="async () => await SubtractQuantity(cartDrink)">
													<span class="icon"><i class="fad fa-minus"></i></span>
												</button>
											</p>
											<p class="control">
												<input class="input is-small has-text-centered" type="text" readonly @bind-value="cartDrink.Quantity" />
											</p>
											<p class="control">
												<button class="button is-small is-success" @onclick="async () => await AddQuantity(cartDrink)">
													<span class="icon"><i class="fad fa-plus"></i></span>
												</button>
											</p>
										</div>
									</div>
									<div class="drinkCartCross has-text-centered">
										<span class="icon">
											<i class="fad fa-times"></i>
										</span>
									</div>
									<div class="drinkCartPrice has-text-centered">@cartDrink.Price €</div>

								</div>
							}
						</div>
						<hr />
						<EditForm Model="DiscountForm" OnValidSubmit="TryAddDiscount">
							<DataAnnotationsValidator />
							<label class="label" for="discount">
								<span>Any discount?</span>
							</label>
							<div class="field has-addons">
								<p class="control is-expanded has-icons-left">
									<span class="icon is-left"><i class="fad fa-tags"></i></span>
									<input class="input" type="text" id="discount" placeholder="discount code" @onchange="OnChangeDiscountCode">
								</p>
								<p class="control">
									<button type="submit" class="button is-primary has-icons-left">
										<span class="icon is-left">
											<i class="fad fa-badge-dollar"></i>
										</span>
										<span>Add discount</span>
									</button>
								</p>
							</div>
							<p class="help is-danger">
								<ValidationMessage For="() => DiscountForm.DiscountCode" />
								@InvalidDiscountCodeError
							</p>
							<ul>
								@foreach (var discountCode in DiscountCodes)
								{
									<li class="has-text-right">
										<span class="tag is-dark">@discountCode.Code</span>
										<span class="tag is-success">-@discountCode.DiscountPercentage %</span>
									</li>
								}
							</ul>
						</EditForm>
						<hr />
						<div class="level">
							<div class="level-left">
								<h2><strong>Totale price</strong></h2>
							</div>
							<div class="level-right">
								<h2>
									<strong>@(Math.Round(TotalPrice, 2)) €</strong>
								</h2>
							</div>
						</div>
						<hr />
						<div class="buttons is-right">
							<NavLink href="payment" class="button is-primary has-icons-left">
								<span class="icon"><i class="fad fa-money-bill-wave"></i></span>
								<span>Go to payment</span>
							</NavLink>
						</div>
					}
				</div>

			</div>
		</div>
	</div>
</section>