<div class="row">
  <div class="col-md-12 mt-2">
    <form id="editrolepermission" method="post" action="/role-permission/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">

            <div class="col">
              <div class="form-group col-md-4">
              <label class="required">
                Benutzer Rolle
              </label>

              <select id="role_id" name="role_id" class="form-control" onchange="onChangeRole()" required>
                <option selected disabled>
                  wählen Rolle
                </option>

                <% for(let i in roleData){ %>

                  <option value="<%= roleData[i].id %>" <%=roleId==roleData[i].id ? 'selected' : '' %>
                    >
                    <%= roleData[i].name %>
                  </option>

                  <% } %>

              </select>
            </div>
            </div>

            <div class="form-group col-md-12">

              <% if(roleId){ %>

                <table class="table table-bordered">

                  <thead>

                    <tr>

                      <th>
                        Menüname
                      </th>

                      <th>
                        Erstellen

                        <input type="checkbox" id="create_box" <%=checkHeaderStatus.create_box ? 'checked' : '' %>
                        >
                      </th>

                      <th>
                        Lesen

                        <input type="checkbox" id="read_box" <%=checkHeaderStatus.read_box ? 'checked' : '' %>
                        >
                      </th>

                      <th>
                        Aktualisieren

                        <input type="checkbox" id="update_box" <%=checkHeaderStatus.update_box ? 'checked' : '' %>
                        >
                      </th>

                      <th>
                        Löschen

                        <input type="checkbox" id="delete_box" <%=checkHeaderStatus.delete_box ? 'checked' : '' %>
                        >
                      </th>

                    </tr>

                  </thead>

                  <tbody>

                    <% for(let i in permissionMenuData){ %>

                      <tr>

                        <td>
                          <%= permissionMenuData[i].menu_name %>
                        </td>

                        <td>

                          <input type="checkbox" class="create_class" id="create_<%= i %>"
                            name="menu_data[<%= i %>][create_status]" <%=permissionMenuData[i].create_status ? 'checked'
                            : '' %>
                          <%= permissionMenuData[i].disabled ? 'disabled' : '' %>
                            >

                        </td>

                        <td>

                          <input type="checkbox" class="read_class" id="read_<%= i %>"
                            name="menu_data[<%= i %>][read_status]" <%=permissionMenuData[i].read_status ? 'checked'
                            : '' %>
                          <%= permissionMenuData[i].disabled ? 'disabled' : '' %>
                            >

                        </td>

                        <td>

                          <input type="checkbox" class="update_class" id="update_<%= i %>"
                            name="menu_data[<%= i %>][update_status]" <%=permissionMenuData[i].update_status ? 'checked'
                            : '' %>
                          <%= permissionMenuData[i].disabled ? 'disabled' : '' %>
                            >

                        </td>

                        <td>

                          <input type="checkbox" class="delete_class" id="delete_<%= i %>"
                            name="menu_data[<%= i %>][delete_status]" <%=permissionMenuData[i].delete_status ? 'checked'
                            : '' %>
                          <%= permissionMenuData[i].disabled ? 'disabled' : '' %>
                            >

                        </td>

                        <input type="hidden" name="menu_data[<%= i %>][menu_id]"
                          value="<%= permissionMenuData[i].id %>">

                      </tr>

                      <% } %>

                  </tbody>

                </table>

                <% } %>

            </div>

          </div>

        </div>

        <div class="card-footer">

          <button type="submit" class="btn btn-info mr-2" id="adduser">
            Speichern
          </button>

        </div>

      </div>

    </form>
  </div>
</div>

<script>

  function onChangeRole() {

    const roleId = document.getElementById('role_id').value;

    if (roleId) {
      window.location.href =
        '/role-permission/edit?role_id=' + roleId;
    }
  }

  $(document).ready(function () {

    $('#create_box').on('change', function () {

      $('.create_class:not(:disabled)').prop(
        'checked',
        $(this).is(':checked')
      );

    });

    $('#read_box').on('change', function () {

      $('.read_class:not(:disabled)').prop(
        'checked',
        $(this).is(':checked')
      );

    });

    $('#update_box').on('change', function () {

      $('.update_class:not(:disabled)').prop(
        'checked',
        $(this).is(':checked')
      );

    });

    $('#delete_box').on('change', function () {

      $('.delete_class:not(:disabled)').prop(
        'checked',
        $(this).is(':checked')
      );

    });

  });

</script>