<div class="row">
  <div class="col-md-12 mt-2">
    <form name="" autocomplete="off" id="editUserForm" method="post" action="/user/update" enctype="multipart/form-data"
      novalidate>
      <div class="card card-info">
        <div class="card-header">
          <h4 class="card-title">
            <%=sectionTitle%>
          </h4>
        </div>
        <div class="card-body">
          <div class="form-row">
            <input type="hidden" id="id" name="id" value="<%=userData.id%>" />
            <div class="form-group col-md-6 col-md-6">
              <label class="required" for="inputName">Name</label>
              <input type="text" id="name" name="name" class="form-control" value="<%=userData.name%>"
                onkeypress="return /[a-zA-Z]/i.test(event.key)" oninput="capitalizeFirstLetter(this)"
                placeholder="Enter name" required>
            </div>

            <div class="form-group col-md-6">
              <label class="required" for="inputName">Email</label>
              <input type="email" readonly id="email" name="email" class="form-control" value="<%=userData.email%>"
                onkeypress="return /[A-Za-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6}/.test(event.key)"
                placeholder="Enter email" required oninput="validate(this)">
            </div>

            <div class="form-group col-md-6">
              <label class="required" for="inputName">Telefonnummer</label>
              <input type="text" id="phone" name="phone" class="form-control" value="<%=userData.phone_number%>"
                onkeypress="if ( isNaN( String.fromCharCode(event.keyCode) )) return false;"
                placeholder="Enter Telefonnummer" min="10" oninput="validate(this)" required>
            </div>

            <div class="form-group col-md-6">
              <label for="photo">Profilbild</label>
              <input type="file" class="form-control" id="photo" name="photo" accept="image/*" style="padding: 4px 4px;"
                onchange="previewSelectedImage(event)" />
              <div class="mt-2">
                <img
    id="previewImage"
    src="<%= (userData.photo && userData.photo !== '') ? '/' + userData.photo : '/images/no-image.jpg' %>"
    alt="Profilbild"
    width="100"
    style="border-radius: 5px;"
>
              </div>
            </div>



            <!-- <% const selectedRole=roleData.find(role=> role.id == userData.user_role); %>
                            <div class="form-group col-md-6">
                                <label class="required">Benutzerrolle</label>
                                <input type="text" class="form-control" value="<%= selectedRole?.name || '' %>"
                                    disabled>
                                <input type="hidden" name="user_role" value="<%= selectedRole?.id || '' %>">
                            </div> -->

            <div class="form-group col-md-6">
              <label class="required">Benutzerrolle</label>

              <select id="user_role" name="user_role" class="form-control" required>

                <option value="" disabled>
                  Benutzerrolle auswählen
                </option>

                <% if(roleData && roleData.length> 0){ %>

                  <% roleData.forEach(function(role){ %>

                    <% if(role.id !=1){ %>

                      <option value="<%= role.id %>" <%=userData.user_role==role.id ? 'selected' : '' %>>

                        <%= role.name %>

                      </option>

                      <% } %>

                        <% }) %>

                          <% } else { %>

                            <option disabled>No roles found</option>

                            <% } %>

              </select>
            </div>
            <input type="text" name="fake_username" style="display:none">
            <input type="password" name="fake_password" style="display:none">
            <div class="form-group col-md-6">
              <label for="password">Neues Passwort</label>

              <div class="input-group">
                <input type="password" id="password" name="password" class="form-control"
                  placeholder="Neues Passwort eingeben" autocomplete="new-password" onkeyup="validatePassword()" />

                <div class="input-group-append">
                  <span class="input-group-text" style="cursor:pointer;">
                    <i class="fa fa-eye" id="togglePassword"></i>
                  </span>
                </div>
              </div>

              <small id="passwordLengthError" class="text-danger d-block"></small>

              <small class="text-muted">
                Leer lassen, wenn Passwort nicht geändert werden soll.
              </small>
            </div>

            <div class="form-group col-md-6">
              <label for="confirm_password">Passwort bestätigen</label>

              <div class="input-group">
                <input type="password" id="confirm_password" name="confirm_password" class="form-control"
                  placeholder="Passwort bestätigen" autocomplete="new-password" />

                <div class="input-group-append">
                  <span class="input-group-text" style="cursor:pointer;">
                    <i class="fa fa-eye" id="toggleConfirmPassword"></i>
                  </span>
                </div>
              </div>

              <small id="passwordError" class="text-danger"></small>
            </div>

            <div class="form-group col-md-6">
              <label class="required" for="inputName">Status</label>
              <select id="active_status" name="active_status" class="form-control" required>
                <option selected disabled>Select Status</option>
                <option value="1" <%=userData.status==1 ? 'selected' : '' %> >Aktiv</option>
                <option value="0" <%=userData.status==0 ? 'selected' : '' %>>Inaktiv</option>
              </select>
            </div>
          </div>
        </div>
        <div class="card-footer">
          <input type="hidden" id="old_profile_pic" name="old_profile_pic" value="<%=userData.photo %>" />
          <button type="submit" class="btn btn-info">Speichern</button>
          <button type="button" class="btn btn-default">
            <a href="/user/list">Cancel</a>
          </button>
        </div>
      </div>
    </form>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

<!-- <script>
    const togglePassword = document.querySelector('#togglePassword');
    const password = document.querySelector('#password');

    togglePassword.addEventListener('click', function (e) {
        const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
        password.setAttribute('type', type);
        this.classList.toggle('fa-eye-slash');
    });
</script> -->

<script>
  $('#country_id').change(async (e) => {
    console.log(e.target.value);
    const url =
      `${window.location.protocol}//${window.location.host}/coach/get-state/${e.target.value}`;
    var select = document.getElementById("state_id");
    try {
      const response = await fetch(url, {
        method: "POST"
      });
      if (!response.ok) {
        throw new Error(`Response status: ${response.status}`);
      }

      const json = await response.json();
      console.log(json);
      let data = json.state;
      $('#state_id').find('option').not(':first').remove();
      for (let i = 0; i < data.length; i++) {
        var option = document.createElement("option");
        option.text = data[i].state_name;
        option.value = data[i].id;
        select.appendChild(option);
      }

    } catch (error) {
      console.error(error.message);
    }
  })
  $('#state_id').change(async (e) => {
    console.log(e.target.value);
    const url = `${window.location.protocol}//${window.location.host}/coach/get-city/${e.target.value}`;
    var select = document.getElementById("city_id");
    try {
      const response = await fetch(url, {
        method: "POST"
      });
      if (!response.ok) {
        throw new Error(`Response status: ${response.status}`);
      }

      const json = await response.json();
      console.log(json);
      let data = json.city;
      $('#city_id').find('option').not(':first').remove();
      for (let i = 0; i < data.length; i++) {
        var option = document.createElement("option");
        option.text = data[i].city_name;
        option.value = data[i].id;
        select.appendChild(option);
      }

    } catch (error) {
      console.error(error.message);
    }
  })
</script>

<script>
  function previewSelectedImage(event) {
    const input = event.target;
    const preview = document.getElementById("previewImage");

    if (input.files && input.files[0]) {
      const reader = new FileReader();
      reader.onload = function (e) {
        preview.src = e.target.result;
      };
      reader.readAsDataURL(input.files[0]);
    }
  }
</script>

<script>
function validatePassword() {
    const password = document.getElementById("password").value;
    const error = document.getElementById("passwordLengthError");

    if (password === "") {
        error.innerHTML = "";
        return true;
    }

    let messages = [];

    if (password.length < 8) {
        messages.push("Minimum 8 characters");
    }

    if (!/[A-Z]/.test(password)) {
        messages.push("At least 1 uppercase letter");
    }

    if (!/[a-z]/.test(password)) {
        messages.push("At least 1 lowercase letter");
    }

    if (!/\d/.test(password)) {
        messages.push("At least 1 number");
    }

    if (!/[@$!%*?&.#^()_\-+=]/.test(password)) {
        messages.push("At least 1 special character");
    }

    error.innerHTML = messages.join("<br>");

    return messages.length === 0;
}

function checkPasswordMatch() {
    const password = document.getElementById("password").value.trim();
    const confirmPassword = document.getElementById("confirm_password").value.trim();
    const error = document.getElementById("passwordError");

    error.innerHTML = "";

    if (password !== "" && confirmPassword === "") {
        error.innerHTML = "Please confirm password";
        return false;
    }

    if (password !== "" && password !== confirmPassword) {
        error.innerHTML = "Passwords do not match";
        return false;
    }

    return true;
}

document.getElementById("password").addEventListener("keyup", function () {
    validatePassword();
    checkPasswordMatch();
});

document.getElementById("confirm_password").addEventListener("keyup", function () {
    checkPasswordMatch();
});

document.getElementById("editUserForm").addEventListener("submit", function (e) {

    const password = document.getElementById("password").value.trim();

    // Password field empty = allow update
    if (password === "") {
        return true;
    }

    // Password strength validation
    if (!validatePassword()) {
        e.preventDefault();
        document.getElementById("password").focus();
        return false;
    }

    // Confirm password validation
    if (!checkPasswordMatch()) {
        e.preventDefault();
        document.getElementById("confirm_password").focus();
        return false;
    }

    return true;
});
</script>

<%- contentFor('pageStyleSection')%>
  <link rel="stylesheet" href="/stylesheets/style.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">