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.png"
             alt="" aria-hidden="true" />
        <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.png"
             alt="" aria-hidden="true" />
        <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.png"
             alt="" aria-hidden="true" />
        <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>