<div class="row">
  <div class="col-md-12 mt-2">
    <form name="" id="addUserForm" method="post" action="/user/insert" 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">
            <div class="form-group col-md-6">
              <label class="required" for="inputName">Name</label>

              <input type="text" id="name" name="name" class="form-control" value="<%= formData?.name || '' %>"
                placeholder="Enter name" required autocomplete="off" onkeypress="return /^[A-Za-z ]$/.test(event.key)"
                oninput="
            this.value = this.value.replace(/[^A-Za-z ]/g, '');
            capitalizeFirstLetter(this);
            validate(this);
        ">
            </div>

            <div class="form-group col-md-6">
              <label class="required" for="inputName">Email</label>
              <!-- <input type="email" id="email" name="email" class="form-control" placeholder="Enter email"
                                oninput="validate(this)" required> -->
              <input type="email" id="email" name="email" class="form-control" value="<%= formData?.email || '' %>"
                placeholder="Enter email" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
                oninput="validate(this)" required>
            </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"
                onkeypress="if ( isNaN( String.fromCharCode(event.keyCode) )) return false;"
                placeholder="Enter Telefonnummer" value="<%= formData?.phone || '' %>" min="10" oninput="validate(this)"
                required>
            </div>
            <div class="form-group col-md-6">
              <label class="required" for="inputName">Passwort</label>
              <!-- <input type="password" id="password" name="password" class="form-control"
                                placeholder="Enter Passwort" minlength="6" value="" required oninput="validate(this)"> -->
              <input type="password" id="password" name="password" class="form-control" placeholder="Enter Passwort"
                minlength="6" value="" autocomplete="new-password" autocorrect="off" autocapitalize="off"
                spellcheck="false" required oninput="validate(this)">
              <!-- <div class="">
                                <i class="far fa-eye" id="togglePassword"></i>
                            </div> -->
              <div class="">
                <button type="button" id="generate_password" name="generate_password"
                  class="btn btn-info mt-1 float-right">Generate Passwort</button>

                <i id="togglePassword" class="btn btn-info mt-1 mr-2 float-right far fa-eye" id="togglePassword"></i>
              </div>
            </div>
            <div class="form-group col-md-6">
              <label class="required" for="inputName">Confirm Passwort</label>
              <input type="password" id="confirm_password" name="confirm_password" class="form-control"
                placeholder="Enter confirm passwort" value="" autocomplete="new-password" autocorrect="off"
                autocapitalize="off" spellcheck="false" required oninput="validate(this)">
            </div>

            <!-- <% const subcontractor=roleData.find(r=> r.name === 'subcontractor'); %>
              <% if (subcontractor) { %>
                <div class="form-group col-md-6">
                  <label class="required">Benutzerrolle</label>
                  <input type="text" class="form-control" value="<%= subcontractor.name %>" disabled>
                  <input type="hidden" name="user_role" value="<%= subcontractor.id %>">
                </div>
                <% } else { %>
                  <div class="form-group col-md-6">
                    <label>Benutzerrolle</label>
                    <p class="text-danger">Subcontractor-Rolle nicht gefunden</p>
                  </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 selected>
                  Benutzerrolle auswählen
                </option>

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

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

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

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

                        <%= role.name %>

                      </option>

                      <% } %>

                        <% }) %>

                          <% } else { %>

                            <option disabled>No roles found</option>

                            <% } %>

              </select>
            </div>
            <div class="form-group col-md-6">
              <label for="inputName">Profilbild</label>
              <input type="file" class="form-control imagepickerWithPreviewId" style="padding: 4px 4px;"
                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 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" selected>Aktiv</option>
                                                <option value="0">Inaktive</option>
                                            </select>
                                        </div> -->

            <div class="form-group col-md-6">
              <label class="required" for="active_status">Status</label>

              <!-- <select id="active_status" name="active_status" class="form-control" required>
                        <option value="" selected disabled>Status auswählen</option>
                        <option value="1">Aktiv</option>
                        <option value="0">Inaktiv</option>
                      </select> -->
              <select id="active_status" name="active_status" class="form-control" required>

                <option value="" <%=!formData?.active_status ? 'selected' : '' %>
                  disabled>
                  Status auswählen
                </option>

                <option value="1" <%=formData?.active_status=='1' ? 'selected' : '' %>>
                  Aktiv
                </option>

                <option value="0" <%=formData?.active_status=='0' ? 'selected' : '' %>>
                  Inaktiv
                </option>

              </select>
            </div>
            <div class="form-group col-md-6" id="previewSingleImage">
              <img class="img-thumbnail" id="imagePreview" style="width: 100px" src="" alt="">
            </div>
          </div>
        </div>
        <div class="card-footer">
          <button type="submit" class="btn btn-info mr-2" id="adduser">Speichern</button>
          <button type="button" class="btn btn-default">
            <a href="/user/list">Zurück</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) {
    type = password.getAttribute('type') === 'password' ? 'text' : 'password';
    password.setAttribute('type', type);
    togglePassword.classList.toggle('fa-eye-slash');
  });
</script>

<%- contentFor('pageStyleSection')%>
  <link rel="stylesheet" href="/stylesheets/style.css" />