LotteryV2/website/Views/Account/Login.cshtml

@using LotteryWebApp.Languages;
@using LotteryWebApp.Controllers;
@using LotteryWebApp.Common;
@model AccountLogin_ViewModel

@{
    ViewData["Title"] = "Login";
    Layout = "~/Views/Shared/_NothingLayout.cshtml";
}

<style>
    html, body {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        height: 100% !important;
        display: block !important;
        overflow-x: hidden !important;
        background: #FDF9F0 !important; /* Desktop base */
        font-family: 'Montserrat', sans-serif;
    }

    /* Trên điện thoại, cho màu nền HTML & BODY trùng khớp với màu đỏ của nội dung */
    @@media (max-width: 600px) {
        html, body {
            background: #EE0033 !important;
        }
    }

    .all-screen {
        width: 100% !important;
        display: block !important;
        position: relative !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .login-scaffold {
        width: 100% !important;
        width: 100vw !important; /* Ép lấy hết chiều rộng màn hình */
        max-width: 100% !important;
        min-height: 100dvh;
        background: #EE0033 !important; /* Nội màu đỏ */
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 20px 20px 80px 20px; /* Increased bottom padding to prevent cut-off */
        box-sizing: border-box;
        position: relative;
        margin: 0 auto;
    }

    /* Chỉ giới hạn chiều rộng trên màn hình lớn (Tablet/Desktop) */
    @@media (min-width: 600px) {
        .login-scaffold {
            max-width: 450px !important;
            width: 450px !important;
        }
    }

    /* Logo at top */
    .logo-container {
        margin-top: 15px;
        width: 100%;
        display: flex;
        justify-content: center;
    }
    .logo-container img {
        width: 280px;
        height: auto;
    }

    /* Form Area */
    .form-container {
        width: 100%;
        max-width: 360px;
        margin-top: 35px;
        z-index: 10;
    }

    /* Phone Input: White with Gray Prefix */
    .custom-phone-input {
        background: #FFFFFF;
        border: 2px solid #000000;
        border-radius: 12px;
        height: 56px;
        display: flex;
        overflow: hidden;
        margin-bottom: 20px;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    }
    .prefix-box {
        background: #E8E8E8;
        width: 25%;
        min-width: 80px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 800;
        font-size: 20px;
        color: #000;
        border-right: 2px solid #DDD;
    }
    .input-box {
        flex: 1;
        padding: 0 15px;
    }
    .phone-field {
        width: 100%;
        height: 100%;
        border: none !important;
        background: transparent !important;
        outline: none !important;
        font-weight: 700;
        font-size: 20px;
        color: #000 !important;
        letter-spacing: 1px;
    }

    /* Remove Spinners from Number Input */
    .phone-field::-webkit-inner-spin-button,
    .phone-field::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }
    .phone-field {
        -moz-appearance: textfield;
    }

    /* Action Button - Gold */
    .btn-submit-otp {
        background: linear-gradient(180deg, #FBD94E 0%, #F5AE31 100%);
        border: 1.5px solid #FFFFFF;
        border-radius: 14px;
        height: 56px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 6px rgba(0,0,0,0.15);
        color: #000;
        font-family: 'Bricolage Grotesque', sans-serif;
        font-weight: 900;
        font-size: 21px;
        text-transform: none;
        cursor: pointer;
    }
    .btn-submit-otp:disabled {
        opacity: 0.5;
        filter: grayscale(0.5);
        cursor: not-allowed;
    }

    /* Illustration at bottom */
    .illustration-footer {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        pointer-events: none;
        margin-top: -10px;
    }
    .illustration-footer img {
        width: 100%;
        max-width: 420px;
        height: auto;
    }
    @@media (max-width: 400px) {
        .illustration-footer img {
            max-width: 300px; /* Shrink illustration on very small screens */
        }
    }

    /* Language Switcher Dark Red */
    .lang-switcher-fixed {
        margin-bottom: 40px; /* Increased bottom margin even more */
        background: #D53018;
        border-radius: 12px;
        padding: 4px;
        display: flex;
        gap: 4px;
        border: 2.5px solid #FFFFFF;
    }
    .lang-tab {
        padding: 7px 16px;
        border-radius: 10px;
        color: rgba(255,255,255,0.8);
        font-weight: 700;
        font-size: 18px;
        text-decoration: none !important;
        display: flex;
        align-items: center;
        gap: 6px;
    }
    .lang-tab.active {
        background: #420D09;
        color: #FFF;
        border: 1px solid #FFF;
    }
    .lang-tab img {
        width: 18px;
        height: auto;
    }

    /* OTP Inputs Inverted: White background again */
    .otp-container {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 25px;
    }
    .otp-input {
        width: 60px;
        height: 60px;
        background: #800015; /* Màu đỏ đậm / Dark Maroon */
        border: none;
        border-radius: 12px; 
        text-align: center;
        font-size: 26px;
        font-weight: 900;
        color: #FFFFFF;
        box-shadow: 0 4px 10px rgba(0,0,0,0.2);
        outline: none;
        transition: all 0.2s;
    }
    .otp-input:focus {
        background: #420D09;
        box-shadow: 0 0 0 2px #FFF;
    }
    .otp-input::placeholder {
        color: rgba(255,255,255,0.5);
    }

    .error-text {
        color: #FFD43D;
        font-weight: 800;
        font-size: 14px;
        text-align: center;
        margin-bottom: 15px;
        min-height: 20px;
    }

    /* Center Toastr */
    #toast-container {
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        right: auto !important;
        bottom: auto !important;
        position: fixed !important;
        display: block !important;
    }
    #toast-container > .toast {
        width: 300px !important;
        text-align: center;
        margin: 0 auto 12px auto !important;
        float: none !important;
    }
</style>

<script>
    // Global toastr config for this page
    toastr.options = {
        "positionClass": "toast-top-center",
        "showDuration": "300",
        "hideDuration": "1000",
        "timeOut": "5000",
        "extendedTimeOut": "1000",
        "showEasing": "swing",
        "hideEasing": "linear",
        "showMethod": "fadeIn",
        "hideMethod": "fadeOut"
    }
</script>

<div class="login-scaffold animate__animated animate__fadeIn">
    
    <!-- Logo -->
    <div class="logo-container">
        <img src="~/LotteryV2/img/ChooseApp/logo.png" alt="MEGA LOTO" />
    </div>

    <!-- Main Content -->
    <div class="form-container">
        
        @if (Model.step == Constants.LOGIN_ENTER_MSISDN || Model.step == null)
        {
            <!-- Step 1 -->
            <div class="custom-phone-input">
                <div class="prefix-box">+509</div>
                <div class="input-box">
                    <input type="number" 
                           id="phonenumber" 
                           class="phone-field" 
                           placeholder="888 999 888" 
                           name="phonenumber" 
                           required 
                           autofocus>
                </div>
            </div>
        }
        else if (Model.step == Constants.LOGIN_ENTER_OTP)
        {
            <!-- Step 2 -->
            <input type="hidden" id="phonenumber_hidden" value="@Model.phonenumber" />
            <div style="text-align: center; color: white; margin-bottom: 20px;">
                <h2 style="font-weight: 900; font-size: 22px;">@Lang.verify_otp</h2>
                <p style="font-size: 14px; opacity: 0.8;">@Lang.enter_otp_to_login</p>
            </div>

            <form id="otpForm" action="/verify-otp" method="POST" class="otp-container">
                <input class="otp-input otp-box-0" pattern="\d{1}" inputmode="numeric" name="lottery-otp-box" maxlength="1" placeholder="-" required autofocus />
                <input class="otp-input otp-box-1" pattern="\d{1}" inputmode="numeric" name="lottery-otp-box" maxlength="1" placeholder="-" required />
                <input class="otp-input otp-box-2" pattern="\d{1}" inputmode="numeric" name="lottery-otp-box" maxlength="1" placeholder="-" required />
                <input class="otp-input otp-box-3" pattern="\d{1}" inputmode="numeric" name="lottery-otp-box" maxlength="1" placeholder="-" required />
            </form>

            <div style="text-align: center; margin-bottom: 20px;">
                <span style="color:white; font-size: 13px;">@Lang.not_get_otp</span>
                <a style="color:#FFD43D; font-weight:800; font-size: 14px; text-decoration: underline; cursor: pointer;" onclick="resentOTP_Action()">@Lang.resend_otp</a>
            </div>
        }

        <div class="error-text">
            @if(Model.message != null) {
                <script>toastr.error('@Model.message');</script>
                @Model.message
            }
        </div>

        <button type="button" 
                id="btnLoginConfirm"
                class="btn-submit-otp" 
                @(Model.step == Constants.LOGIN_ENTER_OTP ? "disabled" : "")
                onclick="@(Model.step == Constants.LOGIN_ENTER_MSISDN || Model.step == null ? "loginRedirect_Click()" : "loginButtonAction_Click()")">
            @(Model.step == null || Model.step == Constants.LOGIN_ENTER_MSISDN ? Lang.get_otp1 : Lang.confirm)
        </button>
    </div>

    <!-- Illustration at bottom -->
    <div class="illustration-footer">
        <img src="~/LotteryV2/img/top_banner1.png" alt="" />
    </div>

    @if (Model.step != Constants.LOGIN_ENTER_OTP)
    {
        <!-- Language Footer -->
        <div class="lang-switcher-fixed">
            <a href="javascript:void(0)" onclick="changeLanguageAction('fr')" class="lang-tab @(ViewBag.Lang == "fr" ? "active" : "")">
                <img src="~/img/en_flag.png" alt="" /> English
            </a>
            <a href="javascript:void(0)" onclick="changeLanguageAction('en')" class="lang-tab @(ViewBag.Lang == "en" || ViewBag.Lang == "fr" ? "active" : "")">
                <img src="~/img/Flag_of_Haiti.png" alt="" /> Natcom
            </a>
        </div>
    }

</div>

@if (Model.step == Constants.LOGIN_ENTER_OTP)
{
    <script>
        $(document).ready(function() {
            function checkOtpComplete() {
                var filled = 0;
                $('.otp-input').each(function() {
                    if ($(this).val().length >= 1) filled++;
                });
                $('#btnLoginConfirm').prop('disabled', filled < 4);
            }

            $('.otp-input').on('keyup', function(e) {
                var $this = $(this);
                if (e.keyCode == 8) {
                    if ($this.val().length === 0) {
                        $this.prev('.otp-input').val('').focus();
                    }
                } else {
                    if ($this.val().length >= 1) {
                        $this.next('.otp-input').focus();
                    }
                }
                checkOtpComplete();
            });

            $('.otp-input').on('input', function() {
                checkOtpComplete();
            });
        });
    </script>
}

@*<script type="text/javascript">
    function createAccountClick(message) {
    toastr.options.timeOut = 5000; // 1.5s
    toastr.error(message);
    }
    </script>*@