
      <div class="container-fluid">
    <div class="row">
  
      <div class="col-md-12 mt-2">
        <div class="card">
          <div class="card-header p-2">
            <ul class="nav nav-pills" id="myTab">
              <li class="nav-item"><a class="nav-link active" href="#profile" data-toggle="tab">Update Profile</a></li>
              <li class="nav-item"><a class="nav-link" href="#settings" data-toggle="tab">Security Settings</a></li>
            </ul>
          </div><!-- /.card-header -->
          <div class="card-body">
            <div class="tab-content">
              <div class="tab-pane active" id="profile">
                <form class="form-horizontal" id="updateProfileForm" name="form" method="post" action="/profile/updated"
                  enctype="multipart/form-data">
  
                  <input type="hidden" id="id" name="id" value="<%=userData.id%>" />
  
                  <div class="form-group row">
                    <label for="inputName" class="col-sm-2 col-form-label">User Name <span
                        style="color:red">*</span></label>
                    <div class="col-sm-10">
                      <input type="text" class="form-control" id="user_name" name="user_name" placeholder="User Name"
                        value="<%=userData.user_name%>" onkeypress="return /[a-zA-Z_\s]/i.test(event.key)">
                      <small id="firstnamevalid" class="form-text
                   invalid-feedback">
                        Please enter name!
                      </small>
                    </div>
                  </div>
                  <div class="form-group row">
                    <label for="inputEmail" class="col-sm-2 col-form-label">Email <span style="color:red">*</span></label>
                    <div class="col-sm-10">
                      <input type="email" class="form-control" id="user_email" name="user_email" placeholder="Enter email"
                        value="<%= userData.user_email %>">
                    </div>
                  </div>
                  <div class="form-group row">
                    <label for="inputName2" class="col-sm-2 col-form-label">Phone <span style="color:red">*</span></label>
                    <div class="col-sm-10">
                      <input type="text" class="form-control" id="phone_number" name="phone_number" placeholder="Phone"
                        value="<%= userData.phone_number %>"
                        onkeypress="if ( isNaN( String.fromCharCode(event.keyCode) )) return false;"
                        placeholder="Enter phone number" oninput="validate(this)">
                      <small id="phonevalid" class="form-text
                   invalid-feedback">
                        Please enter valid email!
                      </small>
                    </div>
                  </div>
                  <div class="form-group row align-items-center">
                    <label for="exampleInputFile" class="col-sm-2">Profile Photo</label>
                    <div class="input-group col-sm-7">
                      <div class="custom-file">
                        <input type="file" class="form-control imagepickerWithPreviewId"
                          data-previewelement="imagePreview" id="image" name="image" accept="image/*"
                          onchange="return fileValidation()">
                        <label id="image-error" style="display: none;" class="error" for="image">Please upload file having
                          extensions .jpeg/.jpg/.png/.gif only.</label>
                      </div>
                    </div>
                    <div class="col-sm-3 ml-50">
                      <%if(userData.profile_pic !=null && userData.profile_pic !="" ){%>
                        <img class="img-thumbnail" id="imagePreview" style="width: 100px"
                          src="/uploads/user/profile_pic/<%=userData.profile_pic %>" alt="Image">
                        <%}else{%>
                          <img class="img-thumbnail" id="imagePreview" style="width: 100px" src="/images/no-image.jpg%>"
                            alt="Image">
                          <%}%>
                    </div>
                  </div>
  
                  <div class="form-group row">
                    <div class="offset-sm-2 col-sm-10">
                      <input type="hidden" id="old_profile_pic" name="old_profile_pic" value="<%=userData.profile_pic %>" />
                      <button type="submit" class="btn btn-primary" id="updateProfile">Submit</button>
                      <button type="submit" class="btn btn-default">
                        <a href="/profile">Cancel</a>
                      </button>
                    </div>
                  </div>
                </form>
              </div>
  
              <div class="tab-pane" id="settings">
                <form class="form-horizontal" id="securitySettingsFrom" name="form" method="post"
                  action="/security-settings" enctype="multipart/form-data">
                  <div class="form-group row">
                    <label for="inputName2" class="col-sm-2 col-form-label">Current Password <span
                        style="color:red">*</span></label>
                    <div class="col-sm-10">
                      <input type="password" class="form-control" id="current_password" name="current_password"
                        placeholder="Current Password" required>
                      <small id="emailvalid" class="form-text
                   invalid-feedback">
                        Please enter valid password!
                      </small>
                    </div>
                  </div>
                  <div class="form-group row">
                    <label for="inputName2" class="col-sm-2 col-form-label">New Password <span
                        style="color:red">*</span></label>
                    <div class="col-sm-10">
                      <input type="password" class="form-control" id="new_password" name="new_password"
                        placeholder="New Password" required>
                      <small id="emailvalid" class="form-text
                   invalid-feedback">
                        Please enter valid password!
                      </small>
                    </div>
                  </div>
                  <div class="form-group row">
                    <label for="inputName2" class="col-sm-2 col-form-label">Confirm Password <span
                        style="color:red">*</span></label>
                    <div class="col-sm-10">
                      <input type="password" class="form-control" id="confirm_password" name="confirm_password"
                        placeholder="Confirm Password" required>
                      <small id="emailvalid" class="form-text
                   invalid-feedback">
                        Conform password did not match with password!
                      </small>
                    </div>
  
                  </div>
                  <div class="form-group row">
                    <div class="offset-sm-2 col-sm-10">
                      <button type="submit" class="btn btn-primary" id="SecuritySettings">Submit</button>
                      <button type="submit" class="btn btn-default">
                        <a href="/profile">Cancel</a>
                      </button>
                    </div>
                  </div>
                </form>
              </div>
              <!-- /.tab-pane -->
  
              <!-- /.tab-pane -->
            </div>
            <!-- /.tab-content -->
          </div><!-- /.card-body -->
  
        </div>
  
        <!-- /.nav-tabs-custom -->
      </div>
      <!-- /.col -->
    </div>
    <!-- /.row -->
  </div><!-- /.container-fluid -->
  
  
  <%- contentFor('pageScriptsSection')%>
    <!-- bs-custom-file-input -->
    <script src="/resources/admin-lte/plugins/bs-custom-file-input/bs-custom-file-input.min.js"></script>
  
    <script>
      $(document).ready(function () {
        // For file input 
        bsCustomFileInput.init();
  
        // For remembering tab state
        $('a[data-toggle="tab"]').on("show.bs.tab", function (e) {
          localStorage.setItem("activeTab", $(e.target).attr("href"));
        });
        var activeTab = localStorage.getItem("activeTab");
        if (activeTab) {
          $('#myTab a[href="' + activeTab + '"]').tab("show");
        }
      });
  
      // Timepicker
      $('.timepicker').datetimepicker({
        format: 'LT'
      })
  
  
      function lettersOnlyCheck(name) {
        var regEx = /^[A-Za-z]+$/;
        if (name.value.match(regEx)) {
          return true;
        }
        else {
          alert("Please enter letters only.");
          return false;
        }
      }
  
    </script>
  