drinkMe/drinkMe/Client/Pages/Payment.razor

@page "/payment"

<PurchaseSteps PurchaseStep="PurchaseStep.PaymentSetup" />

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

		<div class="columns">

			<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="drinkCartPItem">

									<div class="drinkCartName"><strong>@cartDrink.Name</strong></div>
									<div class="drinkCartQuantity has-text-centered">
										<div class="field">
											<p class="control">
												@cartDrink.Quantity
											</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>
						if (DiscountCodes.Count > 0)
						{
							<hr />
							<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>
						}
						<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>
					}
				</div>

			</div>

			<div class="column is-half">
				<div class="box">
					<EditForm Model="CreditCardForm" OnValidSubmit="Pay">
						<DataAnnotationsValidator />
						<InputRadioGroup Name="PaymentMethod" @bind-Value="PaymentMethod">
							<div class="field">
								<div class="control">
									<label class="radio">
										<InputRadio Name="PaymentMethod" Value="PaymentMethod.Cash" disabled="@(TotalPrice > 10f)" />
										<span class="icon-text"><span class="icon"><i class="fad fa-money-bill-wave"></i></span> <span>I'm going with cash</span></span>
									</label>
								</div>
							</div>
							<div class="is-divider" data-content="OR"></div>
							<div class="field">
								<div class="control">
									<label class="radio">
										<InputRadio Name="PaymentMethod" Value="PaymentMethod.CreditCard" />
										<span class="icon-text"><span class="icon"><i class="fad fa-credit-card-front"></i></span> <span>Here goes the card</span></span>
									</label>
								</div>
							</div>
						</InputRadioGroup>
						<fieldset class="@VUtilities.IfTrueThen(PaymentMethod == PaymentMethod.Cash, "is-hidden")" disabled="@(PaymentMethod != PaymentMethod.CreditCard)">
							<div class="field">
								<label class="label">Credit card number</label>
								<div class="control has-icons-left">
									<span class="icon is-left"><i class="fad fa-credit-card-front"></i></span>
									<input @bind-value="CreditCardForm.Number" class="input" placeholder="">
								</div>
								<p class="help is-danger">
									<ValidationMessage For="() => CreditCardForm.Number" />
								</p>
							</div>
							<div class="columns">
								<div class="column is-half">
									<label class="label">Expiration month / year</label>
									<div class="field has-addons has-addons-right">
										<div class="control">
											<input @bind-value="CreditCardForm.ExpirationMonth" class="input has-text-centered" placeholder="01">
										</div>
										<div class="control">
											<input class="input has-text-centered" value="/" readonly disabled>
										</div>
										<div class="control">
											<input @bind-value="CreditCardForm.ExpirationYear" class="input has-text-centered" placeholder="@((DateTime.Now.Year + 1).ToString().Substring(2,2))">
										</div>
									</div>
									<p class="help is-danger">
										<ValidationMessage For="() => CreditCardForm.ExpirationMonth" />
										<ValidationMessage For="() => CreditCardForm.ExpirationYear" />
									</p>
								</div>
								<div class="column is-half">
									<div class="field">
										<label class="label">CVV code</label>
										<div class="control has-icons-left">
											<span class="icon is-left"><i class="fad fa-key"></i></span>
											<input type="text" @bind-value="CreditCardForm.CVVCode" class="input has-text-centered" placeholder="***" />
										</div>
										<p class="help is-danger">
											<ValidationMessage For="() => CreditCardForm.CVVCode" />
										</p>
									</div>
								</div>
							</div>
							@if (PaymentMethod == PaymentMethod.CreditCard)
							{
								<div class="field has-text-right">
									<button type="submit" class="button is-primary has-icons-left">
										<span class="icon"><i class="fad fa-credit-card-blank"></i></span>
										<span>Pay</span>
									</button>
								</div>
							}
						</fieldset>

					</EditForm>

					@if (PaymentMethod == PaymentMethod.Cash)
					{
						<div class="field mt-5 has-text-right">
							<button class="button is-primary has-icons-left" @onclick="Pay">
								<span class="icon"><i class="fad fa-money-bill-wave"></i></span>
								<span>Pay at checkout</span>
							</button>
						</div>
					}
				</div>
			</div>

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