{% extends 'base.html' %}
{% block content %}
<style>
  .card-clean { border: 0; box-shadow: 0 2px 10px rgba(0,0,0,.06); border-radius: 14px; }
  .toolbar-sticky { position: sticky; top: 64px; z-index: 10; }
  .submenu-chip { border: 1px solid var(--bs-border-color); border-radius: 10px; padding: .5rem .75rem; }
  .submenu-chip:hover { background: var(--bs-light); }
  .menu-badge { font-weight: 600; }
  .btn-ghost { border: 1px solid var(--bs-border-color); background: #fff; }
  .btn-ghost:hover { background: var(--bs-light); }
</style>

<div class="container py-4">
  <div class="d-flex align-items-center justify-content-between gap-3 mb-3">
    <div class="d-flex align-items-center gap-2">
      <i class="bi bi-shield-lock-fill fs-4 text-primary"></i>
      <h4 class="mb-0">Role-Based Access Control</h4>
    </div>
    {% if selected_role %}
      <span class="badge bg-primary-subtle text-primary border menu-badge">
        Managing: {{ selected_role|capitalize }}
      </span>
    {% endif %}
  </div>

  <div class="row g-3">
    <!-- Left: Role & quick actions -->
    <div class="col-lg-3">
      <div class="card card-clean">
        <div class="card-header bg-white">
          <strong>Choose Role</strong>
        </div>
        <div class="card-body">
          <form method="GET" class="vstack gap-2">
            <select name="role" class="form-select" onchange="this.form.submit()">
              {% for r in roles %}
                <option value="{{ r.name }}" {% if r.name == selected_role %}selected{% endif %}>
                  {{ r.name|capitalize }}
                </option>
              {% endfor %}
            </select>
          </form>
        </div>
      </div>

      {% if selected_role %}
      <div class="card card-clean mt-3">
        <div class="card-header bg-white">
          <strong>Bulk Actions</strong>
        </div>
        <div class="card-body">
          <div class="d-grid gap-2">
            <button class="btn btn-ghost" id="checkAll"><i class="bi bi-check2-square me-1"></i>Select all</button>
            <button class="btn btn-ghost" id="uncheckAll"><i class="bi bi-x-square me-1"></i>Clear all</button>
          </div>
          <hr>
          <label class="form-label small text-muted mb-1">Filter submenus</label>
          <input type="search" id="filterBox" class="form-control" placeholder="Type to filter…">
          <div class="small text-muted mt-2">
            Selected: <span id="checkedCount" class="fw-semibold">0</span>
          </div>
        </div>
      </div>
      {% endif %}
    </div>

    <!-- Right: Menus & submenus -->
    <div class="col-lg-9">
      {% if selected_role %}
      <form method="POST" class="card card-clean">
        <input type="hidden" name="role" value="{{ selected_role }}">

        <div class="card-header bg-white toolbar-sticky">
          <div class="d-flex align-items-center justify-content-between flex-wrap gap-2">
            <div class="d-flex align-items-center gap-2">
              <i class="bi bi-list-check text-primary"></i>
              <strong>Grant access by submenu</strong>
            </div>
            <div class="d-flex gap-2">
              <button type="submit" class="btn btn-primary">
                <i class="bi bi-save me-1"></i>Save Access
              </button>
            </div>
          </div>
        </div>

        <div class="card-body">
          <div class="accordion" id="menuAccordion">
            {% for menu in all_menus %}
            <div class="accordion-item border-0 mb-2">
              <h2 class="accordion-header">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                        data-bs-target="#m{{ menu.id }}">
                  <i class="bi {{ menu.icon or 'bi-list' }} me-2 text-primary"></i>
                  <span class="me-2">{{ menu.name }}</span>
                  <span class="badge bg-light text-muted border ms-auto" id="count-{{ menu.id }}">0/{{ menu.submenus|length }}</span>
                </button>
              </h2>
              <div id="m{{ menu.id }}" class="accordion-collapse collapse">
                <div class="accordion-body pt-3">
                  <div class="d-flex gap-2 mb-3">
                    <button class="btn btn-sm btn-ghost" type="button" onclick="toggleMenu('{{ menu.id }}', true)">
                      <i class="bi bi-check2-all me-1"></i>Select menu
                    </button>
                    <button class="btn btn-sm btn-ghost" type="button" onclick="toggleMenu('{{ menu.id }}', false)">
                      <i class="bi bi-eraser me-1"></i>Clear menu
                    </button>
                  </div>

                  <div class="row g-2" data-menu-grid="{{ menu.id }}">
                    {% for submenu in menu.submenus %}
                    <div class="col-md-6 col-xl-4 submenu-item">
                      <label class="submenu-chip w-100">
                        <div class="form-check">
                          <input class="form-check-input subchk" type="checkbox" name="submenu_ids"
                                 id="s{{ submenu.id }}" value="{{ submenu.id }}"
                                 data-menu-id="{{ menu.id }}"
                                 {% if submenu.id in selected_ids %}checked{% endif %}>
                          <label class="form-check-label" for="s{{ submenu.id }}">
                            <span class="fw-semibold">{{ submenu.name }}</span>
                            <div class="small text-muted">URL: {{ submenu.url }}{% if submenu.endpoint %} • {{ submenu.endpoint }}{% endif %}</div>
                          </label>
                        </div>
                      </label>
                    </div>
                    {% else %}
                      <div class="col-12 text-muted">No submenus.</div>
                    {% endfor %}
                  </div>
                </div>
              </div>
            </div>
            {% endfor %}
          </div>
        </div>

        <div class="card-footer bg-white d-flex justify-content-end">
          <button class="btn btn-primary px-4">
            <i class="bi bi-save me-1"></i>Save Access
          </button>
        </div>
      </form>
      {% else %}
        <div class="alert alert-info">Choose a role on the left to begin.</div>
      {% endif %}
    </div>
  </div>
</div>

<script>
(function () {
  const subchks = Array.from(document.querySelectorAll('.subchk'));
  const checkedCount = document.getElementById('checkedCount');

  function refreshCounts() {
    const totalChecked = subchks.filter(c => c.checked).length;
    if (checkedCount) checkedCount.textContent = totalChecked;

    const byMenu = {};
    subchks.forEach(c => {
      const k = c.dataset.menuId;
      byMenu[k] = byMenu[k] || { all: 0, on: 0 };
      byMenu[k].all += 1;
      if (c.checked) byMenu[k].on += 1;
    });
    Object.keys(byMenu).forEach(id => {
      const b = document.getElementById('count-' + id);
      if (b) b.textContent = byMenu[id].on + '/' + byMenu[id].all;
    });
  }
  refreshCounts();
  subchks.forEach(c => c.addEventListener('change', refreshCounts));

  document.getElementById('checkAll')?.addEventListener('click', () => {
    subchks.forEach(c => c.checked = true); refreshCounts();
  });
  document.getElementById('uncheckAll')?.addEventListener('click', () => {
    subchks.forEach(c => c.checked = false); refreshCounts();
  });

  window.toggleMenu = function(menuId, state) {
    subchks.filter(c => c.dataset.menuId === String(menuId))
           .forEach(c => c.checked = !!state);
    refreshCounts();
  }

  const filterBox = document.getElementById('filterBox');
  if (filterBox) {
    filterBox.addEventListener('input', function () {
      const q = this.value.trim().toLowerCase();
      document.querySelectorAll('.submenu-item').forEach(item => {
        item.style.display = (!q || item.innerText.toLowerCase().includes(q)) ? '' : 'none';
      });
    });
  }
})();
</script>
{% endblock %}