<%@ Page Language="vb" AutoEventWireup="false" MasterPageFile="~/Client/ClientMaster.master" CodeBehind="MyAccount.aspx.vb" Inherits="Web.MyAccount" %>
<%@ MasterType VirtualPath="../ClientMaster.Master" %>
<asp:Content ID="Content1" ContentPlaceHolderID="phContent" runat="server">

    <div class="container">
        <h1>My Account</h1>

        <section class="mb-3">
            <h2>Account Information</h2>
            <asp:PlaceHolder ID="phAccountInfoSaved" runat="server" Visible="false">
                <div class="alert alert-info alert-dismissible">
                    Your account information has been saved.
                </div>
            </asp:PlaceHolder>
            <div class="form-group">
                <asp:Label runat="server" AssociatedControlID="txtUsername" Text="Username" />
                <asp:TextBox ID="txtUsername" runat="server" Enabled="false" CssClass="form-control" />
            </div>
            <div class="row">
                <div class="form-group col-4">
                    <asp:Label runat="server" AssociatedControlID="txtNameFirst" Text="First Name" />
                    <asp:TextBox ID="txtNameFirst" runat="server" MaxLength="50" ValidationGroup="AccountInfo" CssClass="form-control" />
                    <asp:RequiredFieldValidator runat="server" ValidationGroup="AccountInfo" ControlToValidate="txtNameFirst"
                        Text="required" Display="Dynamic" CssClass="text-danger" />
                </div>
                <div class="form-group col-3">
                    <asp:Label runat="server" AssociatedControlID="txtNameMiddle" Text="Middle Name" />
                    <asp:TextBox ID="txtNameMiddle" runat="server" MaxLength="50" ValidationGroup="AccountInfo" CssClass="form-control" />
                </div>
                <div class="form-group col-4">
                    <asp:Label runat="server" AssociatedControlID="txtNameLast" Text="Last Name" />
                    <asp:TextBox ID="txtNameLast" runat="server" MaxLength="50" ValidationGroup="AccountInfo" CssClass="form-control" />
                    <asp:RequiredFieldValidator runat="server" ValidationGroup="AccountInfo" ControlToValidate="txtNameLast"
                        Text="required" Display="Dynamic" CssClass="text-danger" />
                </div>
                <div class="form-group col-1">
                    <asp:Label runat="server" AssociatedControlID="txtNameSuffix" Text="Suffix" />
                    <asp:TextBox ID="txtNameSuffix" runat="server" MaxLength="50" ValidationGroup="AccountInfo" CssClass="form-control" />
                </div>
            </div>
            <div class="form-group">
                <asp:Label runat="server" AssociatedControlID="txtEmail" Text="Email Address" />
                <asp:TextBox ID="txtEmail" runat="server" MaxLength="128" ValidationGroup="AccountInfo" CssClass="form-control" />
                <asp:RequiredFieldValidator runat="server" ValidationGroup="AccountInfo" ControlToValidate="txtEmail"
                    Text="required" Display="Dynamic" CssClass="text-danger" />
            </div>
            
            <div class="row">
                <div class="d-none"><asp:Button ID="btnDefault" runat="server" ValidationGroup="AccountInfo" /></div>
                <div class="col-2">
                    <asp:Button ID="btnCancel" runat="server" Text="Cancel" CausesValidation="false" CssClass="btn btn-secondary" />
                </div>
                <div class="col-8"></div>
                <div class="col-2">
                    <asp:Button ID="btnSave" runat="server" ValidationGroup="AccountInfo" Text="Save" CssClass="btn btn-primary float-right" />
                </div>
            </div>
        </section>

        <section class="login-form">
            <h2>Change Password</h2>
            <asp:PlaceHolder ID="phChangePasswordSaved" runat="server" Visible="false">
                <div class="alert alert-info alert-dismissible">
                    Your account information has been saved.
                </div>
            </asp:PlaceHolder>
            <asp:PlaceHolder ID="phInvalidPassword" runat="server" Visible="false">
                <div class="alert alert-danger alert-dismissible">
                    The password you entered is invalid.
                </div>
            </asp:PlaceHolder>
            <div class="form-group w-50">
                <asp:Label runat="server" AssociatedControlID="txtPassword" Text="Old Password" />
                <asp:TextBox ID="txtPassword" runat="server" CssClass="form-control" />
                <asp:RequiredFieldValidator runat="server" ValidationGroup="ChangePassword" ControlToValidate="txtPassword"
                    Text="required" Display="Dynamic" CssClass="text-danger" />
            </div>
            <div class="row">
                <div class="form-group col">
                    <asp:Label runat="server" AssociatedControlID="txtNewPassword" Text="New Password" />
                    <asp:TextBox ID="txtNewPassword" runat="server" CssClass="form-control" />
                    <asp:RequiredFieldValidator runat="server" ValidationGroup="ChangePassword" ControlToValidate="txtNewPassword"
                        Text="required" Display="Dynamic" CssClass="text-danger" />
                </div>
                <div class="form-group col">
                    <asp:Label runat="server" AssociatedControlID="txtVerifyPassword" Text="Re-enter Password" />
                    <asp:TextBox ID="txtVerifyPassword" runat="server" CssClass="form-control" />
                    <asp:CustomValidator runat="server" ValidationGroup="ChangePassword" 
                        ControlToValidate="txtVerifyPassword" ClientValidationFunction="txtPassword2_ClientValidate"
                        Text="Must match password" Display="Dynamic" CssClass="text-danger" />
                    <script type="text/javascript">
                        function txtPassword2_ClientValidate(sender, e) {
                            var txtNewPassword = $('#<%= txtNewPassword.ClientID %>');
                            var txtVerifyPassword = $('#<%= txtVerifyPassword.ClientID %>');
                            e.IsValid = txtNewPassword.val() === txtVerifyPassword.val();
                        }
                    </script>
                </div>
            </div>

            <div class="row">
                <div class="col">
                    <asp:Button ID="btnCancel2" runat="server" Text="Cancel" CausesValidation="false"
                        CssClass="btn btn-secondary" />
                </div>
                <div class="col">
                    <asp:Button ID="btnChange" runat="server" ValidationGroup="ChangePassword"
                        Text="Change Password" CssClass="btn btn-primary float-right" />
                </div>
            </div>
        </section>

    </div>

</asp:Content>
