
<!-- Start Profile Section -->
<div class="panel panel-inverse" data-sortable-id="form-stuff-1">
    
    <div class="panel-body">

        <form id="fileupload"  class="">
    		<div style="padding:10px;text-align:center;">
    			<img id="imgUserProfile" class="media-object rounded-corner" alt="" src="/users/<%=member._id%>.jpg" style="display: block;margin-left: auto;margin-right: auto;height: 120px;width: 120px;" />
    			<div id="mybutton">
						<input type="file" accept=".jpg,.jpeg,.png"  id="userfile" name="upload"/>
						Upload
				</div>
    		</div>
    	
	   </form>
       
       <form autocomplete="new-password" class="form-horizontal" method="post" id="profileForm">

        <div class="form-group" id="nameLabel">
            <label class="col-md-3 control-label">Full Name</label>
            <div class="col-md-9">
                <input id="full_name" type="text" class="form-control" maxlength="115" placeholder="Full Name" value="<%if(member.full_name){%><%=member.full_name%><%}%>">
            </div>
        </div>
    
        <div class="form-group">
            <label class="col-md-3 control-label">Title</label>
            <div class="col-md-9">
                <input id="usertitle" type="text" maxlength="115" class="form-control" placeholder="Title" value="<%if(member.title){%><%=member.title%><%}%>">
            </div>
        </div>
    
        <div class="form-group">
            <label class="col-md-3 control-label">Company</label>
            <div class="col-md-9">
                <input id="usercompany" type="text" maxlength="115" class="form-control" placeholder="Company" value="<%if(member.company){%><%=member.company%><%}%>">
            </div>
        </div>
    
        <div class="form-group">
            <label class="col-md-3 control-label">Phone</label>
            <div class="col-md-9">
                <input type="number" name="userphone" maxlength="12" class="form-control" id="userphone" placeholder="Phone" value="<% if (member.phone) { %><%= member.phone %><% } %>">
            </div>
        </div>
    
        <!-- Password Field -->
        <div class="form-group">
            <label class="col-md-3 control-label">Password</label>
            <div class="col-md-9 position-relative">
                <input type="password" minlength="8" maxlength="30" name="userpassword" class="form-control" id="userpassword" autocomplete="new-password">
                <span toggle="#userpassword" class="fa fa-fw fa-eye field-icon toggle-password"></span>
            </div>
        </div>
    
        <!-- Confirm Password Field -->
        <div class="form-group">
            <label class="col-md-3 control-label">Confirm Password</label>
            <div class="col-md-9 position-relative">
                <input type="password" minlength="8" maxlength="30" class="form-control" id="userconfirmpassword" placeholder="Password" autocomplete="off">
                <span toggle="#userconfirmpassword" class="fa fa-fw fa-eye field-icon toggle-password"></span>
            </div>
        </div>
    
        <div class="form-group">
            <label class="col-md-3 control-label">Last Login Time</label>
            <div class="col-md-9">
                <label style="margin-top: 7px;"><%if(member.previous_login_time && member.previous_login_time != ""){%><%=member.previous_login_time%><%}%></label><br>
            </div>
        </div>
    
        <div class="form-group has-error" id="errorDiv" style="display:none">
            <label class="col-md-3 control-label"></label>
            <div class="col-md-9">
                <label id="lblErrorMsg" class="form-control" style="border: 0px;color: #ff5b57;">Passwords do not match.</label>
            </div>
        </div>
    
        <div class="form-group">
            <label class="col-md-3 control-label"></label>
            <div class="col-md-9">
                <button type="submit" class="btn btn-sm btn-success">Save Changes</button>
            </div>
        </div>
    </form>
    </div>
</div>   

   <style>
   .field-icon {
       position: absolute;
       top: 50%;
       right: 20px;
       transform: translateY(-50%);
       cursor: pointer;
   }
   .position-relative {
       position: relative;
   }

    </style>

<script nonce="<%=nonce%>">

     // JS to toggle password visibility (icon)
     $(".toggle-password").click(function() {
         $(this).toggleClass("fa-eye fa-eye-slash");
         var input = $($(this).attr("toggle"));
         if (input.attr("type") == "password") {
             input.attr("type", "text");
         } else {
             input.attr("type", "password");
         }
     });

    const userphoneInput = document.getElementById('userphone');
    userphoneInput.addEventListener('input', function (e) {
        const inputValue = e.target.value;
        const numericValue = inputValue.replace(/\D/g, '');
        const formattedValue = numericValue.slice(0, 10);
        e.target.value = formattedValue;
    });
</script>
