{% extends 'common/base.html' %}
{% block title %} Access Control Add {% endblock %}
{% block content %}

<style>
  th, td {
    vertical-align: middle;
    text-align: center;
  }
  .menu-label {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
  }
  input[type="checkbox"] {
    width: 15px;
    height: 15px;
  }
</style>

<!-- Container Fluid-->
<div class="container-fluid" id="container-wrapper">
  <div class="d-sm-flex align-items-center justify-content-between mb-2">
    <h1 class="h3 mb-0 text-gray-800 mt-2">
       Access Control Add
      <span style="margin-left:30px;float:right">
        <a href="/your/url" class="btn btn-info"> Access Control List</a>
      </span>
    </h1>
  </div>

  <div class="row">
    <div class="col-lg-12">
      <div class="card shadow">
        <div class="card-body">
          <div class="table-responsive">
            <form method="POST">
                {% csrf_token %}
                <!-- your employee dropdown -->
                <div class="form-group col-sm-4">
                  <label for="employee_id">Select Employee</label>
                  <select name="employee_id" id="employee_id" class="form-control" required>
                    <option value="">-- Select Employee --</option>
                    {% for emp in employees %}
                      <option value="{{ emp.id }}">{{ emp.employee_id }} - {{ emp.full_name }}</option>
                    {% endfor %}
                  </select>
                </div>

              <table class="table table-bordered align-middle">
                <thead class="table-dark">
                  <tr>
                    <th>Module</th>
                    <th>Module Menu</th>
                    <th>Create</th>
                    <th>Read</th>
                    <th>Update</th>
                    <th>Delete</th>
                  </tr>
                </thead>
                <tbody>
                  {% for module in modules %}
                    {% for menu in module.menus.all %}
                      <tr>
                        {% if forloop.first %}
                          <td rowspan="{{ module.menus.count }}">{{ module.name }}</td>
                        {% endif %}
                        <td class="text-start">
                          <label class="menu-label">
                            <input type="checkbox" class="menu-toggle" data-menu="menu{{ menu.id }}">
                            {{ menu.name }}
                          </label>
                        </td>
                        <td><input type="checkbox" name="{{ menu.id }}_create" class="menu{{ menu.id }}"></td>
                        <td><input type="checkbox" name="{{ menu.id }}_read" class="menu{{ menu.id }}"></td>
                        <td><input type="checkbox" name="{{ menu.id }}_update" class="menu{{ menu.id }}"></td>
                        <td><input type="checkbox" name="{{ menu.id }}_delete" class="menu{{ menu.id }}"></td>
                      </tr>
                    {% endfor %}
                  {% empty %}
                    <tr>
                      <td colspan="6">No modules found.</td>
                    </tr>
                  {% endfor %}
                </tbody>

              </table>
              <button type="submit" class="btn btn-success mt-3" style="float:right">Submit Permissions</button>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>



<script>
  // Toggle all permissions in the row when the menu checkbox is checked
  document.querySelectorAll('.menu-toggle').forEach(toggle => {
    toggle.addEventListener('change', function () {
      const menuClass = this.getAttribute('data-menu');
      const checkboxes = document.querySelectorAll(`.${menuClass}`);
      checkboxes.forEach(box => {
        box.checked = this.checked;
      });
    });
  });
</script>



{% endblock %}