LotteryV2/website/Areas/Millions/Views/Home/PopupFreeTickit.cshtml

@using LotteryWebApp.Languages
@using Microsoft.AspNetCore.Http
@{
	var shouldAutoCheckFreeTicket = Context.Session.GetString("Millions.FreeTicket.AutoChecked") != "1";
}

<link rel="stylesheet" href="~/Millions/css/popup-free-ticket.css" asp-append-version="true" />

<aside class="free-ticket-popup" aria-labelledby="freeTicketTitle">
	<a class="free-ticket-popup__card"
	   href="#"
	   id="freeTicketClaimButton"
	   aria-label="Get your free ticket">
		<img class="free-ticket-popup__image"
			 src="~/Millions/assets/images/free-ticket-floating-icon.png"
			 alt="" aria-hidden="true" />
		<strong class="free-ticket-popup__ticket-text">
			@Lang.millions_free<br />@Lang.millions_ticket
		</strong>
		<strong class="free-ticket-popup__button-text" id="freeTicketTitle">
			@Lang.millions_free @Lang.millions_ticket
		</strong>
	</a>
</aside>

<div class="free-ticket-result" id="freeTicketResultModal" role="dialog" aria-modal="true"
	 aria-labelledby="freeTicketResultTitle" aria-describedby="freeTicketResultDescription" hidden>
	<div class="free-ticket-result__backdrop" data-free-ticket-close></div>
	<section class="free-ticket-result__panel">
		<h2 class="free-ticket-visually-hidden" id="freeTicketResultTitle">@Lang.free_ticket_waiting_title</h2>
		<p class="free-ticket-visually-hidden" id="freeTicketResultDescription">@Lang.free_ticket_waiting_description</p>
		<img class="free-ticket-result__image"
			 src="~/Millions/assets/images/free-ticket-success-no-text.png"
			 alt="" aria-hidden="true" />
		<strong class="free-ticket-result__copy free-ticket-result__copy--badge">@Lang.free_ticket_success_badge</strong>
		<h2 class="free-ticket-result__copy free-ticket-result__copy--title">@Lang.free_ticket_success_title</h2>
		<p class="free-ticket-result__copy free-ticket-result__copy--received">@Lang.free_ticket_success_received</p>
		<p class="free-ticket-result__copy free-ticket-result__copy--ticket">@Lang.free_ticket_success_ticket</p>
		<p class="free-ticket-result__copy free-ticket-result__copy--chance">@Lang.free_ticket_success_chance</p>
		<strong class="free-ticket-result__copy free-ticket-result__copy--prize">30,000,000 HTG!</strong>
		<span class="free-ticket-result__copy free-ticket-result__copy--use">@Lang.free_ticket_success_use</span>
		<span class="free-ticket-result__copy free-ticket-result__copy--later">@Lang.free_ticket_success_later</span>
		<p class="free-ticket-result__copy free-ticket-result__copy--validity">@Lang.free_ticket_success_validity</p>
		<button type="button" class="free-ticket-result__action free-ticket-result__action--dismiss-icon"
				data-free-ticket-close aria-label="@Lang.millions_close"></button>
		<a class="free-ticket-result__action free-ticket-result__action--use"
		   href="@Url.Action("BuyTicket", "Home", new { area = "Millions", freeTicketMode = "1" })"
		   aria-label="@Lang.free_ticket_buy_now"></a>
		<button type="button" class="free-ticket-result__action free-ticket-result__action--later"
				data-free-ticket-close aria-label="@Lang.millions_close"></button>
	</section>
</div>

<div class="free-ticket-error-43" id="freeTicketError43Modal" role="dialog" aria-modal="true"
	 aria-labelledby="freeTicketError43Title" aria-describedby="freeTicketError43Description" hidden>
	<div class="free-ticket-error-43__backdrop" data-free-ticket-error-43-close></div>
	<section class="free-ticket-error-43__panel">
		<h2 class="free-ticket-visually-hidden" id="freeTicketError43Title">@Lang.free_ticket_error_43_title</h2>
		<p class="free-ticket-visually-hidden" id="freeTicketError43Description">
			@Lang.free_ticket_error_43_description
		</p>
		<img class="free-ticket-error-43__image"
			 src="~/Millions/assets/images/free-ticket-error-43-no-text.png"
			 alt="" aria-hidden="true" />
		<strong class="free-ticket-error-43__copy free-ticket-error-43__copy--badge">@Lang.free_ticket_error_43_badge</strong>
		<h2 class="free-ticket-error-43__copy free-ticket-error-43__copy--title">@Lang.free_ticket_error_43_title</h2>
		<p class="free-ticket-error-43__copy free-ticket-error-43__copy--description">@Lang.free_ticket_error_43_description</p>
		<strong class="free-ticket-error-43__copy free-ticket-error-43__copy--daily-title">@Lang.free_ticket_error_43_daily_title</strong>
		<p class="free-ticket-error-43__copy free-ticket-error-43__copy--daily-description">@Lang.free_ticket_error_43_daily_description</p>
		<span class="free-ticket-error-43__copy free-ticket-error-43__copy--buy">@Lang.millions_buy_ticket_label</span>
		<span class="free-ticket-error-43__copy free-ticket-error-43__copy--close">@Lang.millions_close</span>
		<p class="free-ticket-error-43__copy free-ticket-error-43__copy--footer">@Lang.free_ticket_error_43_footer</p>
		<button type="button" class="free-ticket-error-43__action free-ticket-error-43__action--dismiss-icon"
				data-free-ticket-error-43-close aria-label="@Lang.millions_close"></button>
		<a class="free-ticket-error-43__action free-ticket-error-43__action--buy"
		   href="@Url.Action("BuyTicket", "Home", new { area = "Millions" })"
		   aria-label="@Lang.millions_buy_ticket_label"></a>
		<button type="button" class="free-ticket-error-43__action free-ticket-error-43__action--close"
				data-free-ticket-error-43-close aria-label="@Lang.millions_close"></button>
	</section>
</div>

<div class="free-ticket-error-44" id="freeTicketError44Modal" role="dialog" aria-modal="true"
	 aria-labelledby="freeTicketError44Title" aria-describedby="freeTicketError44Description" hidden>
	<div class="free-ticket-error-44__backdrop" data-free-ticket-error-44-close></div>
	<section class="free-ticket-error-44__panel">
		<h2 class="free-ticket-visually-hidden" id="freeTicketError44Title">@Lang.free_ticket_waiting_title</h2>
		<p class="free-ticket-visually-hidden" id="freeTicketError44Description">
			@Lang.free_ticket_waiting_description
		</p>
		<img class="free-ticket-error-44__image"
			 src="~/Millions/assets/images/free-ticket-error-44-no-text.png"
			 alt="" aria-hidden="true" />
		<strong class="free-ticket-error-44__copy free-ticket-error-44__copy--badge">@Lang.free_ticket_waiting_badge</strong>
		<h2 class="free-ticket-error-44__copy free-ticket-error-44__copy--title">@Lang.free_ticket_waiting_title</h2>
		<p class="free-ticket-error-44__copy free-ticket-error-44__copy--description">@Lang.free_ticket_waiting_description</p>
		<p class="free-ticket-error-44__copy free-ticket-error-44__copy--chance">@Lang.free_ticket_success_chance</p>
		<strong class="free-ticket-error-44__copy free-ticket-error-44__copy--prize">30,000,000 HTG!</strong>
		<span class="free-ticket-error-44__copy free-ticket-error-44__copy--buy">@Lang.free_ticket_buy_now</span>
		<span class="free-ticket-error-44__copy free-ticket-error-44__copy--close">@Lang.millions_close</span>
		<p class="free-ticket-error-44__copy free-ticket-error-44__copy--footer">@Lang.free_ticket_waiting_validity</p>
		<button type="button" class="free-ticket-error-44__action free-ticket-error-44__action--dismiss-icon"
				data-free-ticket-error-44-close aria-label="@Lang.millions_close"></button>
		<a class="free-ticket-error-44__action free-ticket-error-44__action--buy"
		   href="@Url.Action("BuyTicket", "Home", new { area = "Millions", freeTicketMode = "1" })"
		   aria-label="@Lang.free_ticket_buy_now"></a>
		<button type="button" class="free-ticket-error-44__action free-ticket-error-44__action--close"
				data-free-ticket-error-44-close aria-label="@Lang.millions_close"></button>
	</section>
</div>

<script>
	(function () {
		var popup = document.querySelector('.free-ticket-popup');
		var claimButton = document.getElementById('freeTicketClaimButton');
		var resultModal = document.getElementById('freeTicketResultModal');
		var error43Modal = document.getElementById('freeTicketError43Modal');
		var error44Modal = document.getElementById('freeTicketError44Modal');
		var error43ReturnFocus = null;
		var error44ReturnFocus = null;
		if (!popup) return;

		function showFreeTicketResult(result) {
			if (!resultModal || !result || String(result.responseCode) !== '0' || !result.code) {
				return false;
			}

			resultModal.hidden = false;
			document.body.classList.add('free-ticket-result-open');
			return true;
		}

		function showFreeTicketError43() {
			if (!error43Modal) return false;

			error43ReturnFocus = document.activeElement;
			error43Modal.hidden = false;
			document.body.classList.add('free-ticket-result-open');
			var closeButton = error43Modal.querySelector('[data-free-ticket-error-43-close]');
			if (closeButton) closeButton.focus();
			return true;
		}

		function closeFreeTicketError43() {
			if (!error43Modal) return;

			error43Modal.hidden = true;
			document.body.classList.remove('free-ticket-result-open');
			if (error43ReturnFocus && typeof error43ReturnFocus.focus === 'function') {
				error43ReturnFocus.focus();
			}
		}

		if (error43Modal) {
			error43Modal.querySelectorAll('[data-free-ticket-error-43-close]').forEach(function (closeButton) {
				closeButton.addEventListener('click', closeFreeTicketError43);
			});

			error43Modal.addEventListener('keydown', function (event) {
				if (event.key === 'Escape') closeFreeTicketError43();
			});
		}

		function showFreeTicketError44(result) {
			if (!error44Modal) return false;

			error44ReturnFocus = document.activeElement;
			error44Modal.hidden = false;
			document.body.classList.add('free-ticket-result-open');
			var closeButton = error44Modal.querySelector('[data-free-ticket-error-44-close]');
			if (closeButton) closeButton.focus();
			return true;
		}

		function closeFreeTicketError44() {
			if (!error44Modal) return;

			error44Modal.hidden = true;
			document.body.classList.remove('free-ticket-result-open');
			if (error44ReturnFocus && typeof error44ReturnFocus.focus === 'function') {
				error44ReturnFocus.focus();
			}
		}

		if (error44Modal) {
			error44Modal.querySelectorAll('[data-free-ticket-error-44-close]').forEach(function (closeButton) {
				closeButton.addEventListener('click', closeFreeTicketError44);
			});

			error44Modal.addEventListener('keydown', function (event) {
				if (event.key === 'Escape') closeFreeTicketError44();
			});
		}

		if (resultModal) {
			resultModal.querySelectorAll('[data-free-ticket-close]').forEach(function (closeButton) {
				closeButton.addEventListener('click', function () {
					resultModal.hidden = true;
					document.body.classList.remove('free-ticket-result-open');
				});
			});
		}

		if (claimButton) {
			var freeTicketMessages = {
				'38': @Html.Raw(System.Text.Json.JsonSerializer.Serialize(Lang.get_free_ticket_code_38)),
				'39': @Html.Raw(System.Text.Json.JsonSerializer.Serialize(Lang.get_free_ticket_code_39)),
				'40': @Html.Raw(System.Text.Json.JsonSerializer.Serialize(Lang.get_free_ticket_code_40)),
				'41': @Html.Raw(System.Text.Json.JsonSerializer.Serialize(Lang.get_free_ticket_code_41)),
				'42': @Html.Raw(System.Text.Json.JsonSerializer.Serialize(Lang.get_free_ticket_code_42)),
				'43': @Html.Raw(System.Text.Json.JsonSerializer.Serialize(Lang.get_free_ticket_code_43)),
				'44': @Html.Raw(System.Text.Json.JsonSerializer.Serialize(Lang.get_free_ticket_code_44))
			};

			if (@(shouldAutoCheckFreeTicket ? "true" : "false") && document.getElementById('playNowSection')) {
				document.addEventListener('DOMContentLoaded', function () {
					var initialVerificationToken = document.querySelector('input[name="__RequestVerificationToken"]');
					$.ajax({
						url: subDomain + '@Url.Action("GetFreeTicket", "Home", new { area = "Millions" })',
						type: 'POST',
						data: {
							__RequestVerificationToken: initialVerificationToken ? initialVerificationToken.value : '',
							type: '1'
						},
						success: function (result) {
							if (result && String(result.responseCode) === '0' && result.code) {
								showFreeTicketError44(result);
							}
						}
					});
				});
			}

			claimButton.addEventListener('click', function (event) {
				event.preventDefault();
				if (claimButton.dataset.loading === 'true') return;

				var verificationToken = document.querySelector('input[name="__RequestVerificationToken"]');
				claimButton.dataset.loading = 'true';
				claimButton.classList.add('free-ticket-popup__card--loading');

				$.ajax({
					url: subDomain + '@Url.Action("GetFreeTicket", "Home", new { area = "Millions" })',
					type: 'POST',
					data: {
						__RequestVerificationToken: verificationToken ? verificationToken.value : ''
					},
					success: function (result) {
						if (showFreeTicketResult(result)) {
							return;
						}

						var responseCode = result && result.responseCode
							? String(result.responseCode)
							: '';
						if (responseCode === '43' && showFreeTicketError43()) {
							return;
						}
						if (responseCode === '44' && showFreeTicketError44(result)) {
							return;
						}
						var responseMessage = freeTicketMessages[responseCode]
							|| (result && result.responseMessage)
							|| 'Unable to get free ticket.';

						window.alert(responseMessage);
					},
					error: function () {
						window.alert('Unable to get free ticket.');
					},
					complete: function () {
						claimButton.dataset.loading = 'false';
						claimButton.classList.remove('free-ticket-popup__card--loading');
					}
				});
			});
		}

		function alignFreeTicketIcon() {
			var millionsFrame = document.querySelector('.main-content, .main-container');
			var playNowSection = document.getElementById('playNowSection');
			if (!millionsFrame) {
				popup.style.left = '';
				popup.style.right = '10px';
				return;
			}

			var frameRect = millionsFrame.getBoundingClientRect();
			var popupWidth = popup.getBoundingClientRect().width;
			popup.style.left = Math.max(8, frameRect.right - popupWidth - 15) + 'px';
			popup.style.right = 'auto';

			if (playNowSection) {
				var playRect = playNowSection.getBoundingClientRect();
				popup.style.top = (playRect.top - 7) + 'px';
				popup.style.bottom = 'auto';
			}
		}

		alignFreeTicketIcon();
		window.addEventListener('resize', alignFreeTicketIcon, { passive: true });
		window.addEventListener('scroll', alignFreeTicketIcon, { passive: true, capture: true });
	})();
</script>