<%@ Page Language="C#" AutoEventWireup="false" EnableEventValidation="false" CodeBehind="PersonalInformationEdit.aspx.cs" Inherits="Axium.Web.Users.PersonalInformationEdit" %>
<%@ Register TagPrefix="axi" TagName="Notification" Src="~/PatientAccess/Controls/Notification.ascx" %>
<%@ Register TagPrefix="axi" TagName="MarkIncorrectCorrectButton" Src="~/PatientAccess/Controls/MarkIncorrectCorrectButton.ascx" %>
<%@ Register TagPrefix="axi" TagName="Copyright" Src="~/PatientAccess/Controls/CopyrightControl.ascx" %>

<!DOCTYPE html>

<html>
<head runat="server" ID="Head1"> 
    <title></title>
    <style type="text/css" runat="server" ID="logicCss"></style> 
    
    <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/PA2.0/inputSpinner.css">
    <link rel="stylesheet" href="../Includes/Css/personalInformation.css">
    <link rel='stylesheet' type='text/css' href='../Includes/Css/spinner.css' />
    <link href="../Includes/Css/PA2.0/CorrectIncorrectButton.css" rel="stylesheet" />
    
    <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" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
    <script src="../Includes/Scripts/json2.min.js" type="text/javascript"></script>
    <script src="../Includes/Scripts/utilities.js" type="text/javascript"></script>
    <script src="../Includes/Scripts/jquery.numeric.js" type="text/javascript"></script>
    <script src="../Includes/Scripts/jqModal-r14.js" type="text/javascript"></script>
    <script src="../Includes/Scripts/ui.datepicker.js" type="text/javascript"></script>
    <script src="../Includes/Scripts/dateControl.js" type="text/javascript"></script>
    <script src="../Includes/Scripts/jquery.maxlength-1.0.3.min.js" type="text/javascript"></script>    
    <script src="../Includes/Scripts/jquery.timer.js" type="text/javascript"></script>
    <script src="../Includes/Scripts/jquery.validate-1.19.2.min.js" type="text/javascript"></script>
    <script src="../Includes/Scripts/personalInformation.250.js" type="text/javascript"></script>      <%--39647133--%>
    <script src="../Includes/Scripts/iframe.231520.js" type="text/javascript"></script>
    <script src='../Includes/Scripts/spin.min.js' type='text/javascript'></script>
    <script src="../Includes/Scripts/general.240530.js" type="text/javascript"></script>
    <script src="../Includes/JQueryUI/js/jquery-ui-1.13.2.custom.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/5.0.8/jquery.inputmask.min.js" type="text/javascript"></script>
    <script type='text/javascript' src='../Includes/Scripts/spin.min.js'></script>
    <script src="https://kit.fontawesome.com/95fbe47167.js" crossorigin="anonymous"></script>
    <script src="../Includes/Scripts/PA2.0/common.js" type="text/javascript"></script>
    
    <script type="module">
        import Addresses from "../Includes/Scripts/PA2.0/addresses.js";

        const addresses = new Addresses('cityAutocomplete', 'StateDropDown', 'CountryDropDown', 'Zip');
        const emergAddresses = new Addresses('EmergInfoCity', 'EmergInfoState', undefined, 'EmergInfoZip');

    </script>
    
    <script src="../Includes/Scripts/PA2.0/pendo.js" type="text/javascript"></script>

</head>
<body>
    
    <input id="hdnPatSerial" type="hidden" runat="server"/>                             <%-- AX-17079 --%>
    
    <form name="FormPat" id="FormPat" runat="server" class="g-3" novalidate>
        
        <input id="hfPosition" runat="server" type="hidden" class="ignore-serialize" />
        <script type="text/javascript">
            var f = $("#<%=hfPosition.ClientID%>");
            window.onload = function () {
                var position = parseInt(f.val());
                if (!isNaN(position)) {
                    setTimeout(() => window.scrollTo({ top: position, left: 0, behavior: "instant" }), 100);
                }
            };
            window.onscroll = function () {
                var position = $(window).scrollTop();
                f.val(position);
            };
        </script>
        
  	    <input id="hdnAllowBlankTitle" type="hidden" runat="server" />
        <input id="hdnIsEditableZipPostalCode" type="hidden" runat="server"/>
        <input id="hdnIsEditableFirstName" type ="hidden" runat="server"/>
	    <input id="hdnIsEditableLastName" type ="hidden" runat="server"/>
        <input id="hdnIsEditableBirthday" type ="hidden" runat="server"/>
        <input id="hdnIsEditableAddress" type ="hidden" runat="server"/>
        <input id="hdnPrefLangInactive" type="hidden" runat="server"/>
        <input id="hdnPrefLangInactiveValue" type="hidden" runat="server"/>
        <input id="hdnEthnicityInactive" type="hidden" runat="server"/>
        <input id="hdnEthnicityInactiveValue" type="hidden" runat="server"/>
  	    <input id="hdnCustomCodes" type="hidden" runat="server"/>
	    <input id="hdnCustomCodesValidate" type="hidden" runat="server"/>
        <input id="hdnEmergRelation" type="hidden" runat="server"/>
        <input id="hdnValidateEmergAddress" type="hidden" runat="server"/>
        <input id="hdnSettingLeaveUnsavedPatHeader" type="hidden" runat="server"/>          <%-- AX-17079 --%>
        <input id="hdnSettingLeaveUnsavedPatMessage" type="hidden" runat="server"/>         <%-- AX-17079 --%>
        <input id="hdnUserId" type="hidden" runat="server"/>
        <input id="hdnPatientId" type="hidden" runat="server"/>
        <input id="hdnSettingEmergInfoRequired" type="hidden" runat="server" />
        <input id="hdnValidateRace" type="hidden" runat="server" />
        <input id="hdnValidateEthnicity" type="hidden" runat="server" />
        
        <div class="container bg-transparent px-0 ml-0" style="width: 100%; max-width: 100%;">
            <div class="row">

                <fieldset id="Fieldset" runat="server">

                    <div id="InfoText" runat="server" class="col-md-12 mb-3 p-3 info-text">
                        This information is read-only. Please verify the information by indicating whether it is correct or incorrect at the bottom of the page.
                    </div>

                    <div class="col-md-12 mb-3">
                        <div class="bg-white p-3">
                            <h5 class="mb-3">Name and Demographics</h5>
                            <div class="row mb-3">
                                <div class="col-sm-2 col-md-2">
                                    <div class="form-group">
                                        <asp:Label ID="TitleLabel" runat="server" for="TitleDropDown" AssociatedControlID="TitleDropDown" EnableViewState="false">Title</asp:Label>
                                        <asp:DropDownList ID="TitleDropDown" runat="server" CssClass="form-select"/>
                                        <div class="invalid-feedback">The 'Title' field is required.</div>
                                    </div>
                                </div>
                                <div class="col-sm-10 col-md-4">
                                    <div class="form-group">
                                        <asp:Label ID="FirstNameLabel" for="FirstNameTxt" runat="server" AssociatedControlID="FirstNameTxt" EnableViewState="false">First Name</asp:Label>
                                        <asp:TextBox ID="FirstNameTxt" runat="server" CssClass="form-control" MaxLength="15" />
                                        <div class="invalid-feedback">The 'First Name' field is required.</div>
                                    </div>
                                </div>
                                <div class="col-sm-6 col-md-3">
                                    <div class="form-group">
                                        <asp:Label ID="MiddleNameLabel" runat="server" for="MiddleNameTxt" AssociatedControlID="MiddleNameTxt" EnableViewState="false">Middle Name</asp:Label>
                                        <asp:TextBox ID="MiddleNameTxt" runat="server" CssClass="form-control" MaxLength="15" />
                                    </div>
                                </div>
                                <div class="col-sm-6 col-md-3">
                                    <div class="form-group">
                                        <asp:Label ID="LastNameLabel" runat="server" for="LastNameTxt" AssociatedControlID="LastNameTxt" EnableViewState="false">Last Name</asp:Label>
                                        <asp:TextBox ID="LastNameTxt" runat="server" CssClass="form-control" MaxLength="25" />
                                        <div class="invalid-feedback">The 'Last Name' field is required.</div>
                                    </div>
                                </div>
                            </div>
                            <div class="row mb-3">
                                <div class="col-sm-6 col-md-6">
                                    <div class="form-group">
                                        <asp:Label ID="PreferredNameLabel" for="PreferredNameTxt" runat="server" AssociatedControlID="PreferredNameTxt" EnableViewState="false">Preferred Name</asp:Label>
                                        <asp:TextBox ID="PreferredNameTxt" runat="server" CssClass="form-control" MaxLength="15" />
                                    </div>
                                </div>
                                <div class="col-sm-6 col-md-3">
                                    <div class="form-group">
                                        <asp:Label ID="BirthdayLabel" for="BirthdayTxt" runat="server" AssociatedControlID="BirthdayTxt" EnableViewState="false">Birth Date</asp:Label>
                                        <input type="date" ID="BirthdayTxt" class="form-control" name="BirthdayTxt" pattern="\d{4}-\d{2}-\d{2}" min="1900-01-01" max="9999-12-31" runat="server" onclick="setDefaultDateOfBirth()" />
                                        <div class="invalid-feedback">Invalid birth date.</div>
                                    </div>
                                </div>
                                <div id="PreferredLanguageDiv" runat="server" class="col-sm-6 col-md-3">
                                    <div class="form-group">
                                        <asp:Label ID="PreferredLanguageLabel" for="PreferredLanguageDropDown" runat="server" AssociatedControlID="PreferredLanguageDropDown" EnableViewState="false">Preferred Language</asp:Label>
                                        <asp:DropDownList ID="PreferredLanguageDropDown" runat="server" CssClass="form-select"/>
                                        <div class="invalid-feedback">The 'Preferred Language' field is required.</div>
                                    </div>
                                </div>
                            </div>
                            <div class="row mb-3">
                                <div id="EthnicityDiv" runat="server" class="col-sm-6 col-md-6">
                                    <div class="form-group">
                                        <asp:Label ID="EthnicityLabel" for="EthnicityDropDown" runat="server" AssociatedControlID="EthnicityDropDown" EnableViewState="false">Ethnicity</asp:Label>                        
                                        <asp:DropDownList ID="EthnicityEmptyDropDown" runat="server" CssClass="form-select" Enabled="False" />                    
                                        <asp:DropDownList ID="EthnicityDropDown" runat="server" CssClass="form-select" />
                                        <div class="invalid-feedback">The 'Ethnicity' field is required.</div>
                                    </div>
                                </div>
                                <div id="RaceParentDiv" runat="server" class="col-sm-6">
                                    <div class="form-group">
                                        <input id="hdnSelectedRacesId" type="hidden" runat="server" />
                                        <label class="label" for="RaceDivListDp">Race(s)</label>
                                        <div id="RaceDivListDp" runat="server" class="dropdown"> 
                                            <button class="col-6 form-select bg-white race-dropdown" type="button" id="multiSelectDropdown" runat="server" data-bs-toggle="dropdown" onclick="orderRacesBySelected()" aria-expanded="false"></button> 
                                            <div class="invalid-feedback">The 'Race' field is required.</div>
                                            <ul id="RaceMultiSelectDropdown" runat="server" class="col-12 dropdown-menu" aria-labelledby="multiSelectDropdown"> 
                                                <li class="m-2 search">
                                                    <label>Search:</label>
                                                    <div class="input-group mb-3">
                                                        <span class="input-group-text" id="basic-addon1"><i class="fas fa-search"></i></span>
                                                        <input id="searchRace" class="form-control" type="search" onkeyup="searchRace_onKeyUp()" />
                                                    </div>
                                                </li>
                                            </ul>
                                        </div> 
                                    </div>
                                </div>
                                <div id="DeclineAnswerDiv" runat="server" class="col-sm-12">
                                    <div class="form-check pt-4">
                                      <input class="form-check-input" type="checkbox" value="" id="DeclineAnswerChkBox" runat="server" onclick="checkedDeclineAnswer()">
                                      <label class="form-check-label" for="DeclineAnswerChkBox">I decline to answer questions about ethnicity and race.</label>
                                    </div>
                                </div>
                            </div>
                        
                            <h5 class="mb-3">Address</h5>
                            <div class="row mb-3">
                                <div class="col-sm-4 col-md-6">
                                    <div class="form-group">
                                        <asp:Label ID="AddressLabel" runat="server" AssociatedControlID="Address">Address</asp:Label>
                                        <asp:TextBox ID="Address" runat="server" CssClass="form-control"  MaxLength="30" autocomplete="off" />
                                        <div class="invalid-feedback">The 'Address' field is required.</div>
                                    </div>
                                </div>
                                <div class="col-sm-4 col-md-6">
                                    <div class="form-group">
                                        <asp:Label ID="Address2Label" runat="server" AssociatedControlID="Address2">Address 2</asp:Label>
                                        <asp:TextBox ID="Address2" runat="server" CssClass="form-control"  MaxLength="30" autocomplete="off" />
                                    </div>
                                </div>
                            </div>
                            <div class="row mb-3">
                                <div class="col-sm-6 col-md-3">
                                    <div class="form-group inputspinner">
                                        <label for="cityAutocomplete">City</label>
                                        <input type="text" class="form-control autocomplete" id="cityAutocomplete" runat="server" />
                                        <div class="icon-inputspinner">
                                            <i class="loader"></i>
                                        </div>
                                        <div class="invalid-feedback">Invalid city.</div>
                                    </div>
                                </div>
                                <div class="col-sm-6 col-md-3">
                                    <div class="form-group">
                                        <asp:Label ID="StateLabel" runat="server" AssociatedControlID="StateDropDown" EnableViewState="false">State/Province</asp:Label>
                                        <asp:DropDownList ID="StateDropDown" runat="server" CssClass="form-select" />
                                        <div class="invalid-feedback">The 'State/Province' field is required.</div>
                                    </div>
                                </div>
                                <div class="col-sm-6 col-md-3">
                                    <div class="form-group">
                                        <asp:Label ID="ZipCodeLabel" runat="server" AssociatedControlID="Zip" EnableViewState="false">Zip/Postal Code</asp:Label>
                                        <asp:TextBox ID="Zip" runat="server" CssClass="form-control" MaxLength="15" />
                                        <div class="invalid-feedback">The 'Zip Code' is invalid or does not match the city, province, or country provided.</div>
                                    </div>
                                </div>
                                <div class="col-sm-6 col-md-3">
                                    <div class="form-group">
                                        <asp:Label ID="CountryLabel" runat="server" AssociatedControlID="CountryDropDown" EnableViewState="false">Country</asp:Label>
                                        <asp:DropDownList ID="CountryDropDown" runat="server" CssClass="form-select" />
                                        <div class="invalid-feedback">The 'Country' field is required.</div>
                                    </div>
                                </div>
                            </div>
                            <div class="row mb-3">
                                <div class="col-sm-6 col-md-3">
                                    <div class="form-group">
                                        <asp:Label ID="CountyLabel" runat="server" AssociatedControlID="CountyTxt" EnableViewState="false">County</asp:Label>
                                        <asp:TextBox ID="CountyTxt" runat="server" CssClass="form-control" MaxLength="15" autocomplete="off" />
                                    </div>
                                </div>
                            </div>

                            <h5 class="mb-3">Contact Information</h5>
                            <div class="row mb-3">
                                <div class="col-sm-12">
                                    <div class="form-group">
                                        <label id="EmailLabel" for="Email" class="label">Email</label>
                                        <input type="email" id="Email" runat="server" name="email" class="form-control" maxlength="255" />
                                        <div class="invalid-feedback">Invalid email address.</div>
                                    </div>
                                </div>
                            </div>    
                            <div class="row mb-3">
                                <div class="col-sm-6 col-md-3">
                                    <div class="form-group">
                                        <label id="homePhoneLabel" for="HomePhone" class="label">Home Phone</label>
                                        <input type="tel" id="HomePhone" runat="server" pattern="\(\d{3}\) \d{3}-\d{4}" name="homePhone" class="form-control" maxlength="14" placeholder="(___) ___-____" data-inputmask="'mask': '(999) 999-9999'">
                                        <div class="invalid-feedback">Invalid phone number.</div>
                                    </div>
                                </div>

                                <div class="col-sm-6 col-md-3">
                                    <div class="form-group">
                                        <label id="mobilePhoneLabel" for="MobilePhone" class="label">Mobile Phone</label>
                                        <input type="tel" id="MobilePhone" runat="server" pattern="\(\d{3}\) \d{3}-\d{4}" name="mobilePhone" class="form-control" maxlength="14" placeholder="(___) ___-____" data-inputmask="'mask': '(999) 999-9999'">
                                        <div class="invalid-feedback">Invalid phone number.</div>
                                    </div>
                                </div>
                            </div>
                            <div class="row mb-3">
                                <div class="col-sm-6 col-md-3">
                                    <div class="form-group">
                                        <label id="workPhoneLabel" for="WorkPhone" class="label">Work Phone</label>
                                        <input type="tel" id="WorkPhone" runat="server" pattern="\(\d{3}\) \d{3}-\d{4}" name="workPhone" class="form-control" maxlength="14" placeholder="(___) ___-____" data-inputmask="'mask': '(999) 999-9999'">
                                        <div class="invalid-feedback">Invalid phone number.</div>
                                    </div>
                                </div>

                                <div class="col-sm-6 col-md-3">
                                    <div class="form-group">
                                        <asp:Label ID="WorkPhoneExtLabel" runat="server" AssociatedControlID="WorkPhoneExt" EnableViewState="false">Ext</asp:Label>
                                        <asp:TextBox ID="WorkPhoneExt" runat="server" CssClass="form-control" MaxLength="6" autocomplete="off"  />
                                    </div>
                                </div>
                            </div>
                            <div class="row mb-3">
                                <div class="col-sm-6 col-md-3">
                                    <div class="form-group">
                                        <label id="otherPhoneLabel" for="OtherPhone" class="label">Other Phone</label>
                                        <input type="tel" id="OtherPhone" runat="server" pattern="\(\d{3}\) \d{3}-\d{4}" name="otherPhone" class="form-control" maxlength="14" placeholder="(___) ___-____" data-inputmask="'mask': '(999) 999-9999'">
                                        <div class="invalid-feedback">Invalid phone number.</div>
                                    </div>
                                </div>

                                <div class="col-sm-6 col-md-3">
                                    <div class="form-group">
                                        <asp:Label ID="otherPhoneExtLabel" runat="server" AssociatedControlID="OtherPhoneExt" EnableViewState="false">Ext</asp:Label>
                                        <asp:TextBox ID="OtherPhoneExt" runat="server" CssClass="form-control" MaxLength="6" autocomplete="off"  />
                                    </div>
                                </div>
                            </div>
                            <div class="row mb-3">
                                <div class="col-sm-12 col-md-6">
                                    <div class="form-group">
                                        <asp:Label ID="ContactTimeLabel" runat="server" AssociatedControlID="ContactTimeTxt" EnableViewState="false">Preferred Contact Time</asp:Label>
                                        <asp:TextBox ID="ContactTimeTxt" runat="server" CssClass="form-control" MaxLength="15" autocomplete="off"  />
                                    </div>
                                </div>
                                <div class="col-sm-12 col-md-6">
                                    <div class="form-group">
                                        <asp:Label ID="ContactAtLabel" runat="server" AssociatedControlID="ContactAtDropDown" EnableViewState="false">Contact At</asp:Label>
                                        <asp:DropDownList ID="ContactAtDropDown" runat="server" onchange="validateContactDp()" CssClass="form-select" />
                                        <div class="invalid-feedback">The 'Contact At' field is required.</div>
                                    </div>
                                </div>
                            </div>
                
                            <div id="EmergencyContactInfoDiv" runat="server" class="m-0 p-0">
                                <h5 class="mb-3">Emergency Contact Information</h5>
                                <div id="EmergInfoNameDiv" runat="server" class="row mb-3">
                                    <div class="col-sm-6 col-md-6">
                                        <div class="form-group">
                                            <asp:Label ID="EmergInfoFirstNameLabel" runat="server" AssociatedControlID="EmergInfoFirstName" EnableViewState="false">First Name</asp:Label>
                                            <asp:TextBox ID="EmergInfoFirstName" runat="server" CssClass="form-control" MaxLength="100" autocomplete="off" />
                                            <div class="invalid-feedback">The 'First Name' field is required.</div>
                                        </div>
                                    </div>
                                    <div class="col-sm-6 col-md-3">
                                        <div class="form-group">
                                            <asp:Label ID="EmergInfoMiddleNameLabel" runat="server" AssociatedControlID="EmergInfoMiddleName" EnableViewState="false">Middle Name</asp:Label>
                                            <asp:TextBox ID="EmergInfoMiddleName" runat="server" CssClass="form-control" MaxLength="100" autocomplete="off" />
                                        </div>
                                    </div>
                                    <div class="col-sm-6 col-md-3">
                                        <div class="form-group">
                                            <asp:Label ID="EmergInfoLastNameLabel" runat="server" AssociatedControlID="EmergInfoLastName" EnableViewState="false">Last Name</asp:Label>
                                            <asp:TextBox ID="EmergInfoLastName" runat="server" CssClass="form-control" MaxLength="100" autocomplete="off" />
                                            <div class="invalid-feedback">The 'Last Name' field is required.</div>
                                        </div>
                                    </div>
                                </div>
                                <div id="EmergInfoAddressDiv" runat="server">
                                    <div class="row mb-3">
                                        <div class="col-sm-4 col-md-6">
                                            <div class="form-group">
                                                <asp:Label ID="EmergInfoAddressLabel" runat="server" AssociatedControlID="EmergInfoAddress">Address</asp:Label>
                                                <asp:TextBox ID="EmergInfoAddress" runat="server" CssClass="form-control"  MaxLength="30" autocomplete="off" />
                                                <div class="invalid-feedback">The 'Address' field is required.</div>
                                            </div>
                                        </div>
                                        <div class="col-sm-4 col-md-6">
                                           <div class="form-group">
                                               <asp:Label ID="EmergInfoAddress2Label" runat="server" AssociatedControlID="EmergInfoAddress2">Address 2</asp:Label>
                                               <asp:TextBox ID="EmergInfoAddress2" runat="server" CssClass="form-control"  MaxLength="30" autocomplete="off" />
                                           </div>
                                        </div>                                        
                                    </div>
                                    <div class="row mb-3">
                                        <div class="col-sm-6 col-md-3">
                                            <div class="form-group inputspinner">
                                                <label for="EmergInfoCity">City</label>
                                                <input type="text" class="form-control autocomplete" id="EmergInfoCity" runat="server" />
                                                <div class="icon-inputspinner">
                                                    <i class="loader"></i>
                                                </div>
                                                <div class="invalid-feedback">Invalid city.</div>
                                            </div>
                                        </div>
                                        <div class="col-sm-6 col-md-3">
                                            <div class="form-group">
                                                <asp:Label ID="EmergInfoStateLabel" runat="server" AssociatedControlID="EmergInfoState" EnableViewState="false">State/Province</asp:Label>
                                                <asp:DropDownList ID="EmergInfoState" runat="server" CssClass="form-select" />
                                                <div class="invalid-feedback">The 'State/Province' field is required.</div>
                                            </div>
                                        </div>
                                        <div class="col-sm-6 col-md-3">
                                            <div class="form-group">
                                                <asp:Label ID="EmergInfoZipLabel" runat="server" AssociatedControlID="EmergInfoZip" EnableViewState="false">Zip/Postal Code</asp:Label>
                                                <asp:TextBox ID="EmergInfoZip" runat="server" CssClass="form-control" MaxLength="15" autocomplete="off" />
                                                <div class="invalid-feedback">The 'Zip Code' is invalid or does not match the city, province, or country provided.</div>
                                            </div>
                                        </div>
                                        <div class="col-sm-6 col-md-3">
                                            <div class="form-group">
                                                <asp:Label ID="EmergInfoCountyLabel" runat="server" AssociatedControlID="EmergInfoCounty" EnableViewState="false">County</asp:Label>
                                                <asp:TextBox ID="EmergInfoCounty" runat="server" CssClass="form-control" MaxLength="15" autocomplete="off" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div id="EmergInfoPhoneDiv" runat="server" class="row mb-3">
                                    <div class="col-sm-6 col-md-3">
                                        <div class="form-group">
                                            <label id="EmergInfoPhoneLabel" for="EmergInfoPhone" class="label">Phone</label>
                                            <input type="tel" id="EmergInfoPhone" runat="server" pattern="\(\d{3}\) \d{3}-\d{4}" name="EmergInfoPhone" class="form-control" maxlength="14" placeholder="(___) ___-____" data-inputmask="'mask': '(999) 999-9999'">
                                            <div class="invalid-feedback">Invalid phone number.</div>
                                        </div>
                                    </div>

                                    <div class="col-sm-6 col-md-3">
                                        <div class="form-group">
                                            <asp:Label ID="EmergInfoPhoneExtLabel" runat="server" AssociatedControlID="EmergInfoPhoneExt" EnableViewState="false">Ext</asp:Label>
                                            <asp:TextBox ID="EmergInfoPhoneExt" runat="server" CssClass="form-control" MaxLength="6" autocomplete="off"  />
                                        </div>
                                    </div>
                                </div>
                                <div id="EmergInfoPhoneAltDiv" runat="server" class="row mb-3">
                                    <div class="col-sm-6 col-md-3">
                                        <div class="form-group">
                                            <label id="EmergInfoAlternativePhoneLabel" for="EmergInfoAlternativePhone" class="label">Alternative Phone</label>
                                            <input type="tel" id="EmergInfoAlternativePhone" runat="server" pattern="\(\d{3}\) \d{3}-\d{4}" name="EmergInfoAlternativePhone" class="form-control" maxlength="14" placeholder="(___) ___-____" data-inputmask="'mask': '(999) 999-9999'">
                                            <div class="invalid-feedback">Invalid phone number.</div>
                                        </div>
                                    </div>

                                    <div class="col-sm-6 col-md-3">
                                        <div class="form-group">
                                            <asp:Label ID="EmergInfoAlternativePhoneExtLabel" runat="server" AssociatedControlID="EmergInfoAlternativePhoneExt" EnableViewState="false">Ext</asp:Label>
                                            <asp:TextBox ID="EmergInfoAlternativePhoneExt" runat="server" CssClass="form-control" MaxLength="6" autocomplete="off"  />
                                        </div>
                                    </div>
                                </div>

                                <div id="EmergInfoRelationDiv" runat="server" class="row mb-3">
                                    <div class="col-sm-6 col-md-6">
                                        <div class="form-group">
                                            <asp:Label ID="EmergInfoRelationLabel" runat="server" AssociatedControlID="EmergInfoRelation" EnableViewState="false">Relation</asp:Label>
                                            <asp:DropDownList ID="EmergInfoRelation" runat="server" CssClass="form-select"/>
                                            <div class="invalid-feedback">The 'Relation' field is required.</div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div id="AdditionalInformationOutput" runat="server" class="m-0 p-0">
                                <h5 class="mb-3">Additional Information</h5>
                                <div id="AdditionalInfoRow" runat="server" class="row mb-3"></div>
                            </div>
                        </div>
                    </div>

                </fieldset>
            
                <div class="col-md-12 mb-3">
                    <div class="row">
                        <div class="p-3">
                            <axi:Notification ID="Notification" runat="server" />
                            
                            
                            <div id="GeneralErrorMessage" runat="server" class="mb-3">
                                <span class="text-danger">One or more fields is invalid. Please check and try again.</span>
                            </div>
                            
                            <div id="SubmitBtnDiv" runat="server">
                                <asp:Button ID="SubmitBtn" runat="server" EnableViewState="false" CssClass="btn btn-primary btn-pa" Text="Mark as correct" OnClientClick="parent.openModalSpinner(); isSaving=true;" OnClick="SubmitBtn_Click" />
                                <button id="cancelBtn" runat="server" type="button" class="btn btn-outline-primary btn-pa d-none" onclick="cancel()">Cancel</button>
                            </div>
                            
                            <div id="CorrectIncorrectBtnDiv" runat="server">
                                <axi:MarkIncorrectCorrectButton ID="MarkIncorrectCorrectPanel" runat="server" HasSpinner="true" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div id="canLeaveModal" class="modal" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 id="modalTitle" class="modal-title"></h5>
                        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <p id="modalBody"></p>
                    </div>
                    <div class="modal-footer mobile-row">
                        <button id="modalCancelBtn" type="button" class="btn btn-pa btn-pa-secondary double-button-mobile" data-bs-dismiss="modal"></button>
                        <button id="modalOkBtn" type="button" class="btn btn-pa btn-primary double-button-mobile"></button>
                    </div>
                </div>
            </div>
        </div>

        <script type="text/javascript">
            Inputmask().mask(document.getElementById("HomePhone"));
            Inputmask().mask(document.getElementById("MobilePhone"));
            Inputmask().mask(document.getElementById("WorkPhone"));
            Inputmask().mask(document.getElementById("OtherPhone"));

            // emergency phones may not exist according to the settings
            var emergInfoPhone = document.getElementById('EmergInfoPhone');
            if (emergInfoPhone != null) {
                Inputmask().mask(emergInfoPhone);
            }
            
            var emergInfoAltPhone = document.getElementById("EmergInfoAlternativePhone");
            if (emergInfoAltPhone != null) {
                Inputmask().mask(emergInfoAltPhone);
            }
            
        </script>

        <script type="text/javascript">
            history.pushState(null, document.title, location.href);       // AX-17079.2
            window.addEventListener('popstate', checkCanGoBackPatient);      // AX-17079.2
        </script>

    </form>
    <axi:Copyright ID="Copyright" runat="server" />
</body>
</html>

