{% extends "pos/base.html" %}
{% load static %}

{% block title %}Users Access Management{% endblock %}
{% block heading %}Users Access Management{% endblock %}

{% block content %}
<div class="card">
  <div class="card-body">
    <div class="form-row align-items-end">
      <div class="form-group col-md-4">
        <label><b>Select User</b></label>
        <select id="userSelect" class="form-control">
          <option value="">-- Choose --</option>
          {% for u in users %}
            <option value="{{ u.id }}">{{ u.username }}</option>
          {% endfor %}
        </select>
      </div>
      <div class="form-group col-md-4">
        <label><b>Search Feature</b></label>
        <input id="searchBox" type="text" class="form-control" placeholder="type to filter…">
      </div>
      <div class="form-group col-md-4 text-right">
        <button id="saveBtn" class="btn btn-primary" disabled>Save Access</button>
        <button id="selectAllBtn" class="btn btn-outline-secondary ml-2" disabled>Select All</button>
        <button id="unselectAllBtn" class="btn btn-outline-secondary ml-1" disabled>Unselect All</button>
      </div>

    </div>

    <div id="groupsWrap" style="max-height:65vh; overflow:auto;">
      <!-- groups render here -->
    </div>
  </div>
</div>

<script>
  const $user  = document.getElementById('userSelect');
  const $search= document.getElementById('searchBox');
  const $wrap  = document.getElementById('groupsWrap');
  const $save  = document.getElementById('saveBtn');
  const $selectAll = document.getElementById('selectAllBtn');
  const $unselectAll = document.getElementById('unselectAllBtn');

  function getCookie(name){
    const m = document.cookie.match('(^|;)\\s*' + name + '\\s*=\\s*([^;]+)');
    return m ? m.pop() : '';
  }

  function renderGroups(groups){
    $wrap.innerHTML = '';
    (groups || []).forEach(g => {
      const sec = document.createElement('section');
      sec.className = 'feat-group mb-3';
      sec.innerHTML = `
        <h5 class="mb-2">${g.name}</h5>
        <div class="row">
          ${g.items.map(it => `
            <div class="col-md-4 col-sm-6 mb-2 feat-item"
                 data-code="${it.code.toLowerCase()}"
                 data-label="${it.label.toLowerCase()}">
              <div class="custom-control custom-checkbox">
                <input type="checkbox" class="custom-control-input feat-check" id="f_${it.code}"
                       ${it.checked ? 'checked':''} data-code="${it.code}">
                <label class="custom-control-label" for="f_${it.code}">
                  <b>${it.label}</b> <small class="text-muted">(${it.code})</small>
                </label>
              </div>
            </div>
          `).join('')}
        </div>`;
      $wrap.appendChild(sec);
    });
  }

  async function loadFeatures(){
    const uid = $user.value;
    const enabled = !!uid;
    $save.disabled = !enabled;
    setMassButtonsEnabled(enabled);         // NEW

    if(!uid){ $wrap.innerHTML = ''; return; }
    const res = await fetch("{% url 'rbac:api_user_features' %}?user_id="+encodeURIComponent(uid));
    const data = await res.json();
    renderGroups(data.groups || []);
    applySearch();
  }


  function applySearch(){
    const q = ($search.value || '').trim().toLowerCase();
    // show/hide items
    document.querySelectorAll('.feat-item').forEach(el => {
      const hit = !q || el.dataset.code.includes(q) || el.dataset.label.includes(q);
      el.style.display = hit ? '' : 'none';
    });
    // hide empty groups
    document.querySelectorAll('.feat-group').forEach(g => {
      const anyVisible = Array.from(g.querySelectorAll('.feat-item')).some(el => el.style.display !== 'none');
      g.style.display = anyVisible ? '' : 'none';
    });
  }

  function setAllVisible(checked){
    // Sirf visible (filtered) items par toggle
    document.querySelectorAll('.feat-item').forEach(el => {
      if (el.style.display === 'none') return;
      const cb = el.querySelector('.feat-check');
      if (cb) cb.checked = checked;
    });
  }

  // Enable/disable buttons when user selected
  function setMassButtonsEnabled(enabled){
    $selectAll.disabled = !enabled;
    $unselectAll.disabled = !enabled;
  }

  // Hook up buttons
  $selectAll.addEventListener('click', () => setAllVisible(true));
  $unselectAll.addEventListener('click', () => setAllVisible(false));


  $user.addEventListener('change', loadFeatures);
  $search.addEventListener('input', applySearch);


  // $save.addEventListener('click', async () => {
  //   const uid = $user.value;
  //   if(!uid) return;
  //   const codes = Array.from(document.querySelectorAll('.feat-check:checked'))
  //                 .map(x => x.dataset.code);

  //   const res = await fetch("{% url 'rbac:api_user_features_save' %}", {
  //     method: 'POST',
  //     headers: { 'Content-Type':'application/json', 'X-CSRFToken': getCookie('csrftoken') },
  //     body: JSON.stringify({ user_id: uid, codes })
  //   });

  //   let data = null;
  //   try {
  //     data = await res.json();
  //   } catch (e) {
  //     const txt = await res.text();
  //     console.error('Server (non-JSON) response:', txt);
  //     alert('Server error ' + res.status + ' — details console me dekhain.');
  //     return;
  //   }

  //   if (!res.ok || !data.ok) {
  //     alert('Error: ' + (data && (data.error || data.detail) || ('HTTP ' + res.status)));
  //     return;
  //   }
  //   alert('Access saved successfully.');
  // });



  $save.addEventListener('click', async () => {
    const uid = $user.value;
    if(!uid) return;

    // ✅ Collect checked → ORDER-preserving dedupe
    const checked = Array.from(document.querySelectorAll('.feat-check:checked'))
                   .map(x => x.dataset.code);
    const codes = Array.from(new Set(checked));  // unique, order-preserving in modern engines

    const res = await fetch("{% url 'rbac:api_user_features_save' %}", {
      method: 'POST',
      headers: { 'Content-Type':'application/json', 'X-CSRFToken': getCookie('csrftoken') },
      body: JSON.stringify({ user_id: uid, codes })
    });

    let data = null;
    try { data = await res.json(); }
    catch(e){ console.error('Non-JSON response', await res.text()); alert('Server error '+res.status); return; }

    if (!res.ok || !data.ok) {
      alert('Error: ' + (data.error || data.detail || ('HTTP ' + res.status)));
      return;
    }
    alert('Access saved successfully.');
  });

  
</script>
{% endblock %}