<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="EnterOneTimeCode.aspx.cs" Inherits="DoctorAccess.PatientAccess.EnterOneTimeCode" %>
<%@ 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>

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head runat="server">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1"/>
    <meta http-equiv="X-UA-Compatible" content="IE=8"/>

    <script src="Includes/JQueryUI/js/jquery-3.5.1.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>
    <script src="Includes/Scripts/PA2.0/common.js" type="text/javascript"></script>
    <script src="Includes/Scripts/PA2.0/getOneTimeCode.js" type="text/javascript"></script>
    <script src="Includes/Scripts/PA2.0/enterOneTimeCode.js" type="text/javascript"></script>
    <script src="Includes/Scripts/PA2.0/pendo.js" type="text/javascript"></script>


    <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/selfRegistration.css"/>
    <link rel="stylesheet" href="./Includes/Css/PA2.0/common.css"/>
    <link rel="stylesheet" href="./Includes/Css/PA2.0/getOneTimeCode.css"/>
    <link rel="stylesheet" href="./Includes/Css/PA2.0/enterOneTimeCode.css"/>
</head>
<body>
    <axi:Notification ID="Notification" runat="server" />
    <axi:ModalSpinner ID="ModalSpinner" runat="server" />
    <form name="SelfRegis" id="SelfRegis" runat="server" class="needs-validation p-0 m-0" novalidate>
        <asp:HiddenField ID="HdnLogoImgTopPosition" runat="server" ClientIDMode="Static" />
        <div class="container">
            <div class="otp-main-content">
                <div class="university-logo-container">
                    <axi:LogoImage ID="LogoImage1" runat="server" CssImage="university-logo"/>
                </div>

                <div id="RegisterFormContainer" runat="server" class="text-container text-container-with-back-link">

                    <div class="back-link ShowOnMobile">
                        <asp:LinkButton ID="BackBtn" runat="server" CssClass="text-decoration-none" OnClientClick="openModalSpinner()" OnClick="BackBtn_Click">
                            <i class="bi bi-chevron-left"></i>Back to <asp:Literal ID="PreviousPageName" runat="server" EnableViewState="false" />
                        </asp:LinkButton>
                    </div>

                    <div id="PageTitle" runat="server" class="text-register-access opt-title"></div>
                    <div id="content1" runat="server" class="description pb-1">
                        <b>Step 3:</b>&nbsp;Enter the 6-digit code we sent to
                        <asp:Literal ID="PhoneOrEmail" runat="server" EnableViewState="false" />
                        <asp:Literal ID="ActionText" runat="server" EnableViewState="false" />
                    </div>

                    <asp:HiddenField ID="HdnOneTimeCodeUser" runat="server" ClientIDMode="Static" />
                    
                    <div class="otp-field">
                        <input id="otp-1" type="number" pattern="[0-9]*" inputtype="numeric" autocomplete="one-time-code" required />
                        <input id="otp-2" type="number" pattern="[0-9]*" inputtype="numeric" required />
                        <input id="otp-3" type="number" pattern="[0-9]*" inputtype="numeric" required />
                        <input id="otp-4" type="number" pattern="[0-9]*" inputtype="numeric" required />
                        <input id="otp-5" type="number" pattern="[0-9]*" inputtype="numeric" required />
                        <input id="otp-6" type="number" pattern="[0-9]*" inputtype="numeric" required />
                    </div>

                    <div class="row">
                        <asp:LinkButton ID="GetNewCodeLink" runat="server" ClientIDMode="Static" CssClass="text-decoration-none get-new-code-link" OnClientClick="return handleGetNewCodeClick();" OnClick="GetNewCodeLink_Click">
                            Get new code <span id="timer"></span>
                        </asp:LinkButton>
                    </div>

                    <div class="note-message">
                        Note: if you request a new code, the previous one will expire.
                    </div>

                    <div class="text-center back-link">
                        <asp:LinkButton ID="BackDesktopBtn" runat="server" CssClass="text-decoration-none HideOnMobile" OnClientClick="openModalSpinner()" OnClick="BackBtn_Click">
                            <i class="bi bi-chevron-left"></i>Back to <asp:Literal ID="PreviousPageNameDesktop" runat="server" EnableViewState="false" />
                        </asp:LinkButton>
                    </div>
                    
                    <asp:Button ID="HdnSubmitBtn" runat="server" CssClass="d-none" OnClientClick="openModalSpinner()" OnClick="HdnSubmitBtn_Click" />
                </div>

            </div>
            
            <div class="mx-3 mt-4">
                <asp:Literal ID="ErrorText" runat="server" Visible="false" EnableViewState="false"/>

                <axi:LinksRow runat="server"></axi:LinksRow>
            </div>
            <asp:Label ID="CopyrightLabel" CssClass="copyright" runat="server"></asp:Label>
        </div>
    </form>


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

</body>
</html>
