<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">Profil aktualisieren</a></li>
            <li class="nav-item"><a class="nav-link" href="#settings" data-toggle="tab">Sicherheitseinstellungen</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.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.email %>">
                  </div>
                </div>
            
                <div class="form-group row align-items-center">
                  <label for="exampleInputFile" class="col-sm-2">Foto</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()"  style="padding: 4px 4px;">
                      <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.photo !=null && userData.photo !="" ){%>
                      <img class="img-thumbnail" id="imagePreview" style="width: 100px"
                        src="/<%=userData.photo %>" 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.photo %>" />
                    <button type="submit" class="btn btn-primary" id="updateProfile">Speichern</button>
                    <button type="button" class="btn btn-default">
                      <a href="/dashboard">Zurück</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 Passwort <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 Passwort" required>
                    <small id="emailvalid" class="form-text
                 invalid-feedback">
                      Please enter valid Passwort!
                    </small>
                  </div>
                </div>
                <div class="form-group row">
                  <label for="inputName2" class="col-sm-2 col-form-label">New Passwort <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 Passwort" required>
                    <small id="emailvalid" class="form-text
                 invalid-feedback">
                      Please enter valid Passwort!
                    </small>
                  </div>
                </div>
                <div class="form-group row">
                  <label for="inputName2" class="col-sm-2 col-form-label">Confirm Passwort <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 Passwort" required>
                    <small id="emailvalid" class="form-text
                 invalid-feedback">
                      Conform password did not match with Passwort!
                    </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">Speichern</button>
                    <button type="submit" class="btn btn-default">
                      <a href="/dashboard">Zurück</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>