@inherits Dynamicweb.Rendering.RazorTemplateBase<Dynamicweb.Rendering.RazorTemplateModel<Dynamicweb.Rendering.Template>>

@{
	string paymentErrorMessage = GetString("Ecom:Cart.ValidationError.EcomCartPaymethodId.ErrorMessage");
	bool methodSelected = false;
	<div class="list-group" id="PaymentMethodsGroup">
		@foreach (LoopItem method in GetLoop("Paymethods"))
		{
			if (method.GetBoolean("Ecom:Cart.Paymethod.IsSelected"))
			{
				methodSelected = true;
			}
			<label class="list-group-item list-group-item-action" role="button">
				<dl class="grid gap-1 gap-sm-3 mb-0">
					<dt class="g-col-8 g-col-sm-4 fw-normal">
						<div class="form-check">
							@{
								string paymentMethodId = GetString("Ecom:Order.PaymentMethodID");
								string paymentMethodIdSaved = method.GetString("Ecom:Cart.Paymethod.ID");
							}
							<input class="form-check-input" type="radio" name="EcomCartPaymethodID" id="EcomCartPaymentmethodID_@method.GetString("Ecom:Cart.Paymethod.ID")" @if (String.Equals(paymentMethodId, paymentMethodIdSaved)) { <text> checked="checked" </text> } value="@method.GetString("Ecom:Cart.Paymethod.ID")" onchange="submitForm()">
							<span class="form-check-label">@method.GetString("Ecom:Cart.Paymethod.Name")</span>
						</div>
					</dt>
					<dd class="g-col-12 g-col-sm-7 order-2 order-sm-1 mb-0">
						@{
							string imagePath = Dynamicweb.Context.Current.Server.MapPath(method.GetString("Ecom:Cart.Paymethod.Icon.Clean"));

							if (File.Exists(imagePath))
							{
								<span class="m-0 d-block" style="height: 1.5rem; width: 100%; background: url('@method.GetString("Ecom:Cart.Paymethod.Icon.Clean")') no-repeat left center; background-size: contain;"></span>
							}
							else
							{
								<span class="fs-8 lh-1">@method.GetString("Ecom:Cart.Paymethod.Description")</span>
							}
						}

					</dd>
					<dd class="g-col-4 g-col-sm-1 order-1 order-sm-2 mb-0 text-end">
						@if (!method.GetBoolean("Ecom:Cart.Paymethod.Price.IsZero"))
						{
							<span class="text-price">@method.GetString("Ecom:Cart.Paymethod.Price")</span>
						}
					</dd>
				</dl>
			</label>
		}
		@{
			if (!methodSelected)
			{
				//Enable the possibility to use validation if no default shipping method is selected
				<input class="form-check-input d-none" type="radio" name="EcomCartPaymethodID" value="" checked="checked" />
			}
		}
		@paymentErrorMessage
	</div>

	LoopItem selectedPaymentMethodWithSavedCardSupport = GetLoop("Paymethods").FirstOrDefault(p => p.GetBoolean("Ecom:Cart.Paymethod.IsSelected") && p.GetBoolean("Ecom:Cart.Paymethod.SupportSavedCard") && Pageview.User != null);
	if (selectedPaymentMethodWithSavedCardSupport != null)
	{
		bool cardIsSaved = !string.IsNullOrEmpty(GetString("Ecom:Order.SavedCardName"));
		string cardIsSavedValue = cardIsSaved ? "true" : string.Empty;
		string savedCardName = "";

		<div class="list-group" id="SavedCardsGroup">
			<h4 class="fs-6 fw-normal mb-0 mt-4">@Translate("Saved Cards")</h4>
			<p class="fs-8 mb-3">@Translate("Pay with a saved card")</p>

			@foreach (LoopItem card in GetLoop("SavedCards"))
			{
				savedCardName = !card.GetBoolean("Ecom:SavedCard.IsSelected") ? card.GetString("Ecom:SavedCard.Name") : savedCardName;

				<label class="list-group-item list-group-item-action">
					<div class="form-check fw-normal">
						<input class="form-check-input" type="radio" name="EcomCartSavedCardID" id="EcomSavedCardID_@card.GetString("Ecom:SavedCard.ID")" value="@card.GetString("Ecom:SavedCard.ID")" checked="@card.GetBoolean("Ecom:SavedCard.IsSelected")" data-card-name="@card.GetString("Ecom:SavedCard.Name")" onchange="selectSavedCard(this)">
						<span class="form-check-label">@card.GetString("Ecom:SavedCard.Name")</span>
					</div>
				</label>
			}

			<label class="list-group-item list-group-item-action">
				<dl class="grid gap-0 gap-sm-3 align-items-center mb-0">
					<dt class="g-col-4 fw-normal">
						<div class="form-check">
							<input class="form-check-input" type="radio" name="EcomCartSavedCardID" id="SaveNewCard" value="" checked="@cardIsSavedValue" onchange="selectNewCard(this)">
							<span class="form-check-label fst-italic">@Translate("Save a new card")</span>
						</div>
					</dt>
					<dd class="g-col-6 mb-0">
						<input type="checkbox" class="d-none" name="EcomOrderSavedCardCreate" id="EcomOrderSavedCardCreate" value="true" checked="@cardIsSavedValue">
						<input type="text" class="form-control" id="NewSavedCardName" value="@GetString("Ecom:Order.SavedCardName")" onchange="document.getElementById('MySavedCardName').value=this.value" placeholder="@Translate("New saved card name")">
					</dd>
				</dl>
			</label>

			<input type="hidden" name="EcomOrderSavedCardName" id="MySavedCardName" value="@savedCardName" />
		</div>
	}
}

<script>
	function selectSavedCard(element) {
		let cardName = element.getAttribute('data-card-name');

		resetRadioButton(element);
		updateSavedCardName(cardName);
		updateNewCardValue(false);
	}

	function selectNewCard(element) {
		resetRadioButton(element);
		updateSavedCardName("");
		updateNewCardValue(true);
	}

	function resetRadioButton(element) {
		let radioList = document.querySelector("input[name='EcomCartSavedCardID']");
		for (let i = 0; i < radioList.length; i++) {
			if (radioList[i].checked && radioList[i].id !== element.id) radioList[i].checked = false;
		}
	}

	function updateSavedCardName(value) {
		let savedCardNameField = document.querySelector("#MySavedCardName");
		if (savedCardNameField) {
			savedCardNameField.value = value;
		}
	}

	function updateNewCardValue(value) {
		let newCardField = document.querySelector("#EcomOrderSavedCardCreate");
		if (newCardField) {
			newCardField.checked = value;
		}
	}
</script>
