<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="Axium.Web.Login" EnableSessionState="True" %>
<%@ Register TagPrefix="axi" TagName="LogoImage" Src="~/PatientAccess/Controls/LogoImageControl.ascx" %>
<%@ Register TagPrefix="axi" TagName="LinksRow" Src="~/PatientAccess/Controls/LinksRow.ascx" %>
<%@ Register TagPrefix="axi" TagName="ModalSpinner" Src="~/PatientAccess/Controls/ModalSpinner.ascx" %>
<%@ Register TagPrefix="axi" TagName="Notification" Src="~/PatientAccess/Controls/Notification.ascx" %>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head id="Head1" runat="server">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
    <script type="text/javascript">
        function RefreshParent() {
            window.parent.location.href = window.parent.location.href;
        }
        function RefreshParentDefault() {
            window.parent.location.href = '/PatientAccess/Default.aspx';
        }
        function RefreshParentDefaultWithParam(param) {
            window.parent.location.href = '/PatientAccess/Default.aspx' + param;
        }
    </script>

    <script src="Includes/Scripts/jquery-3.5.1.min.js" type="text/javascript"></script>
    <script src="Includes/Scripts/jquery-migrate-3.3.2.min.js" type="text/javascript"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js" type="text/javascript" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>

    <link
        rel="stylesheet"
        href="https://fonts.googleapis.com/css2?family=Flow Block:wght@400&display=swap" />
    <link
        rel="stylesheet"
        href="https://fonts.googleapis.com/css2?family=Fjalla One:wght@400&display=swap" />
    <link
        rel="stylesheet"
        href="https://fonts.googleapis.com/css2?family=Inter:wght@400&display=swap" />
    <link
        rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css" />

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous" />
    <link rel="stylesheet" href="./includes/css/PA2.0/common.css" />
    <link rel="stylesheet" href="./includes/css/login.css" />
    <script src="Includes/Scripts/PA2.0/common.js" type="text/javascript"></script>
    <script src="Includes/Scripts/PA2.0/pendo.js" type="text/javascript"></script>
</head>
<body>

    <axi:Notification ID="Notification" runat="server" />
    <axi:ModalSpinner ID="ModalSpinner" runat="server"/>

    <div class="HideOnMobile">

        <div class="container login-container">

            <div style="flex-grow: 1;">

                <form id="form1" runat="server" defaultbutton="LoginBtn">           
                    <div class="university-logo-container">
                        <axi:LogoImage ID="UniversityLogo" runat="server" CssImage="university-logo" />
                    </div>
                    

                    <div class="mt-5">
                        <div class="form-itemverticalinput">
                            <div class="label mb-2">
                                <div class="title">
                                    <label id="usernameLabel" for="Username">Username</label>
                                </div>
                            </div>
                            <div class="input">
                                <asp:TextBox ID="Username" CssClass="form-control" runat="server" AccessKey="u" MaxLength="100" EnableViewState="false" autocomplete="off" />
                            </div>
                        </div>

                        <div class="form-itemverticalinput1 mt-3">
                            <div class="label mb-2">
                                <div class="title">
                                    <label id="passwordLabel" for="Password">
                                        Password
                                    </label>
                                </div>
                            </div>
                            <div class="input">
                                <asp:TextBox ID="Password" CssClass="form-control" runat="server" AccessKey="p" TextMode="Password" MaxLength="16" EnableViewState="false" autocomplete="off" />
                            </div>
                        </div>

                        <asp:Button ID="ForgotPasswordBtn" runat="server" CssClass="forgot-password btn btn-link text-decoration-none" Text="Forgot Password?" OnClick="ForgotPassword_Click" OnClientClick="openModalSpinner()"/>
                        <div id="ErrorSpan" class="error" runat="server"></div>
                        <asp:Button ID="LoginBtn" CssClass="login-inner btn btn-primary btn-pa shadow-none" runat="server" Text="Login" OnClick="LoginBtn_Click" OnClientClick="openModalSpinner()"/>
                        <asp:Button ID="SelfRegistrationBtn" runat="server" CssClass="btn btn-link text-decoration-none w-100" Text="Don’t have an account? Register" OnClick="SelfRegistration_Click" OnClientClick="openModalSpinner()"/>
                    </div>
                </form>

            </div>
            <div class="HideOnMobile">
                <axi:LinksRow ID="LinksRow2" runat="server" HasBackButton="false"></axi:LinksRow>
            </div>
            <asp:Label ID="CopyrightLabel" CssClass="copyright pb-1" runat="server"></asp:Label>

        </div>

        <div class="welcome-iframe-box">
            <iframe class="welcome-iframe" src='WelcomeToPA.aspx'></iframe>
        </div>
    </div>

    <div class="ShowOnMobile">
        <div id="MobilePage1" runat="server" style="display: block">
            <asp:Image ID="LoginImage" runat="server" class="login-bg-img" AlternateText="" />
            <div id="DivBackgroundColor" runat="server" class="login-child pa-primary-background-color-opacity"></div>
            <div class="login-mobile-page1">
                <div class="university-logo-container">
                    <axi:LogoImage ID="LogoImageMobile1" runat="server" CssImage="university-logo" />
                </div>

                <div class="welcome-to-the-mobile pa-text-color">
                    <asp:Label ID="UniversityName" runat="server"></asp:Label>
                    <p class="welcome-to-the">Welcome to the Exan Group</p>
                    <div id="LoginText" runat="server" class="patientaccess-lets-you"></div>
                </div>

                <div id="LoginMobileBtn" runat="server" class="login-button-mobile-page1-container">
                    <button id="LoginMobileBtnPage1" class="btn btn-outline-primary w-100" onclick="showMobilePage2()">Login</button>
                </div>
<%--                <axi:LinksRow ID="LinksRow3" runat="server" HasBackButton="false"></axi:LinksRow>                            --%>
                <div class="d-flex justify-content-center mt-3 pb-1">
                    <asp:Label ID="CopyrightMobilePage1Label" CssClass="copyright pa-text-color" runat="server"></asp:Label>
                </div>
            </div>
        </div>

        <div id="MobilePage2" runat="server" style="display: none">
            <div class="login-mobile-page1">
                
                <div class="login-input-mobile">
                
                    <div class="mobile-page2-header mb-5">
                        <div class="btn btn-link text-decoration-none" onclick="showMobilePage1()"><i class="bi bi-chevron-left"></i>Back</div>
                    </div>

                
                </div>
                <div class="links-row-container-mobile">
                    <axi:LinksRow ID="LinksRow1" runat="server" HasBackButton="false"></axi:LinksRow>  
                </div>    
                <div class="d-flex justify-content-center mt-3 pb-1">
                    <asp:Label ID="CopyrightMobilePage2Label" CssClass="copyright" runat="server"></asp:Label>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        jQuery(document).ready(function () {
            var childHeight = jQuery('#Login').height();
            jQuery('#loginIfrmId', window.parent.document).css('height', childHeight);
        });

        function showMobilePage2() {
            document.getElementById('MobilePage2').style.display = 'block';
            document.getElementById('MobilePage1').style.display = 'none';
            return false;
        };

        function showMobilePage1() {
            document.getElementById('MobilePage1').style.display = 'block';
            document.getElementById('MobilePage2').style.display = 'none';
            return false;
        };

        window.onload = function () {
            var form = document.getElementById('form1');
            var showOnMobileDiv = document.querySelector('.login-input-mobile');

            var clonedForm = form.cloneNode(true);
            showOnMobileDiv.appendChild(clonedForm);

            var inputUsername = clonedForm.querySelector('#Username');
            inputUsername.classList.add('input-base-mobile');
            var inputPassword = clonedForm.querySelector('#Password');
            inputPassword.classList.add('input-base-mobile');

            var forgotPassword = clonedForm.querySelector('#ForgotPasswordBtn');
            forgotPassword.classList.add('forgot-password-mobile')

            var registerAccess = clonedForm.querySelector('#SelfRegistrationBtn');
            registerAccess.classList.add('register-for-access-mobile')
          
            clonedForm.querySelector('#usernameLabel').setAttribute("style", "font-weight: normal;");
            clonedForm.querySelector('#passwordLabel').setAttribute("style", "font-weight: normal;");
        };
    </script>
</body>
</html>
