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

{% block title %}Dashboard Feature Manager{% endblock %}

{% block stylesheets %}
<style>
:root{
  --fm-blue:   #01478f;
  --fm-bg:     #f0f4f9;
  --fm-card:   #ffffff;
  --fm-border: rgba(15,23,42,.09);
  --fm-shadow: 0 8px 24px rgba(2,6,23,.07);
  --fm-muted:  #64748b;
}

/* ── Outer wrap ── */
.fm-wrap{ background:var(--fm-bg); min-height:80vh; padding:.9rem; }

/* ── Sticky top bar ── */
.fm-topbar{
  position: sticky; top: 0; z-index: 100;
  background: var(--fm-card);
  border: 1px solid var(--fm-border);
  border-radius: 16px;
  box-shadow: var(--fm-shadow);
  padding: .8rem 1.1rem;
  margin-bottom: .9rem;
  display: flex; align-items: center;
  flex-wrap: wrap; gap: .6rem;
}
.fm-title-block{ flex: 1; min-width: 200px; }
.fm-title{ font-weight:900; font-size:1.1rem; color:#0f172a; }
.fm-subtitle{ color:var(--fm-muted); font-size:.8rem; margin-top:.1rem; }
.fm-badge{
  display:inline-flex; align-items:center; gap:.3rem;
  padding:.28rem .65rem; border-radius:999px;
  background:rgba(1,71,143,.08); border:1px solid rgba(1,71,143,.18);
  color:var(--fm-blue); font-weight:800; font-size:.78rem;
}

/* ── Search box ── */
.fm-search-wrap{
  position: relative; flex: 0 0 220px;
}
.fm-search{
  width: 100%;
  padding: .4rem .85rem .4rem 2rem;
  border: 1.5px solid var(--fm-border);
  border-radius: 10px;
  font-size: .85rem;
  outline: none;
  background: #f8fafc;
  transition: border-color .15s;
}
.fm-search:focus{ border-color: rgba(1,71,143,.4); background:#fff; }
.fm-search-icon{
  position:absolute; left:.65rem; top:50%; transform:translateY(-50%);
  color: #94a3b8; font-size:.8rem; pointer-events:none;
}
.fm-no-results{
  display:none; text-align:center; padding:2rem;
  color:var(--fm-muted); font-size:.9rem;
}

/* ── Action buttons ── */
.fm-actions{ display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; }
.fm-btn{
  border-radius: 10px; padding: .38rem .9rem;
  font-weight: 800; font-size: .82rem;
  cursor: pointer; border: none; white-space: nowrap;
  transition: opacity .15s ease;
}
.fm-btn:hover{ opacity:.88; }
.fm-btn-save{
  background:var(--fm-blue); color:#fff;
  box-shadow:0 4px 12px rgba(1,71,143,.25);
}
.fm-btn-unselect-all{
  background:#fff5f5; color:#dc2626;
  border:1.5px solid rgba(220,38,38,.2) !important;
  border:none;
}
.fm-btn-select-all{
  background:#f0fdf4; color:#16a34a;
  border:1.5px solid rgba(22,163,74,.2) !important;
  border:none;
}
.fm-btn-reset{
  background:#f8fafc; color:var(--fm-muted);
  border:1.5px solid var(--fm-border) !important;
  border:none;
}

/* ── Group card ── */
.fm-group{ background:var(--fm-card); border:1px solid var(--fm-border); border-radius:14px; box-shadow:var(--fm-shadow); margin-bottom:.8rem; overflow:hidden; }
.fm-group-head{
  background:linear-gradient(90deg,rgba(1,71,143,.05),transparent);
  padding:.55rem 1rem; border-bottom:1px solid var(--fm-border);
  display:flex; align-items:center; justify-content:space-between;
}
.fm-group-title{ font-weight:900; color:var(--fm-blue); font-size:.85rem; }
.fm-group-meta{ display:flex; align-items:center; gap:.6rem; }
.fm-group-count{ font-size:.75rem; color:var(--fm-muted); font-weight:700; }
.fm-grp-btn{ font-size:.72rem; color:var(--fm-blue); font-weight:700; cursor:pointer; text-decoration:underline dotted; background:none; border:none; padding:0; }
.fm-group-body{
  padding:.65rem .9rem;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(190px,1fr)); gap:.5rem;
}

/* ── Tile ── */
.fm-tile{
  display:flex; align-items:center; gap:.6rem;
  padding:.5rem .65rem;
  border:1.5px solid var(--fm-border); border-radius:12px;
  background:#fafbfd; cursor:pointer;
  transition:all .13s ease; position:relative; user-select:none;
}
.fm-tile:hover{ border-color:rgba(1,71,143,.3); background:rgba(1,71,143,.03); transform:translateY(-1px); box-shadow:0 4px 12px rgba(1,71,143,.07); }
.fm-tile.enabled{ border-color:rgba(1,71,143,.32); background:rgba(1,71,143,.045); }
.fm-tile input[type="checkbox"]{ position:absolute; opacity:0; width:0; height:0; }
/* Toggle pill */
.fm-toggle{ flex-shrink:0; width:34px; height:18px; border-radius:999px; background:#cbd5e1; position:relative; transition:background .18s; }
.fm-toggle::after{ content:""; position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.2); transition:transform .18s; }
.fm-tile.enabled .fm-toggle{ background:var(--fm-blue); }
.fm-tile.enabled .fm-toggle::after{ transform:translateX(16px); }
/* Icon */
.fm-tile-ic{ width:32px; height:32px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:rgba(1,71,143,.08); flex-shrink:0; font-size:13px; color:var(--fm-blue); }
/* Label */
.fm-tile-label{ font-weight:800; font-size:.8rem; color:#475569; line-height:1.2; flex:1; min-width:0; }
.fm-tile.enabled .fm-tile-label{ color:#0f172a; }
.fm-tile-access{ font-size:.68rem; color:#94a3b8; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* highlight on search */
.fm-tile mark{ background:#fef08a; padding:0 2px; border-radius:3px; font-style:normal; font-weight:900; }

/* Mobile */
@media(max-width:576px){
  .fm-group-body{ grid-template-columns:1fr 1fr; }
  .fm-topbar{ flex-direction:column; align-items:flex-start; }
  .fm-search-wrap{ flex:1 1 100%; }
}
</style>
{% endblock %}

{% block content %}
<div class="fm-wrap">

{# ── STICKY TOP BAR ── #}
<div class="fm-topbar">

  <div class="fm-title-block">
    <div class="fm-title">
      <i class="fas fa-sliders-h mr-1" style="color:var(--fm-blue);"></i>
      Feature Manager
    </div>
    <div class="fm-subtitle">
      POS: <strong>{{ pos_type|capfirst }}</strong> &nbsp;·&nbsp;
      <span class="fm-badge">
        <i class="fas fa-circle" style="font-size:7px;color:#22c55e;"></i>
        <span id="fmEnabledCount">{{ enabled }}</span> of
        <span id="fmTotalCount">{{ total }}</span> enabled
      </span>
      &nbsp;·&nbsp;
      <span class="fm-badge" id="fmVisibleBadge" style="display:none;">
        <i class="fas fa-search" style="font-size:9px;"></i>
        <span id="fmVisibleCount">0</span> visible
      </span>
    </div>
  </div>

  {# Search box #}
  <div class="fm-search-wrap">
    <i class="fas fa-search fm-search-icon"></i>
    <input type="text" id="fmSearch" class="fm-search"
           placeholder="Search Features..." autocomplete="off">
  </div>

  {# Action buttons #}
  <div class="fm-actions">
    <button type="button" class="fm-btn fm-btn-select-all"
            onclick="globalToggle(true)">
      <i class="fas fa-check-square mr-1"></i> Select All
    </button>
    <button type="button" class="fm-btn fm-btn-unselect-all"
            onclick="globalToggle(false)">
      <i class="fas fa-square mr-1"></i> Unselect All
    </button>

    {# Reset — separate form POST #}
    <form method="POST" action="{% url 'pos:feature_manager_reset' %}"
          style="display:inline;"
          onsubmit="return confirm('Sab tiles defaults par reset ho jaenge?');">
      {% csrf_token %}
      <button type="submit" class="fm-btn fm-btn-reset">
        <i class="fas fa-undo mr-1"></i> Reset
      </button>
    </form>

    <button type="button" class="fm-btn fm-btn-save" onclick="saveTiles()">
      <i class="fas fa-save mr-1"></i> Save Changes
    </button>
  </div>

</div>{# end topbar #}

{# ── GROUPS ── #}
<div id="fmGroups">
{% for group_name, items in groups.items %}
<div class="fm-group" data-group="{{ group_name }}">
  <div class="fm-group-head">
    <span class="fm-group-title">
      <i class="fas fa-layer-group mr-1" style="font-size:.75rem;opacity:.7;"></i>
      {{ group_name }}
    </span>
    <div class="fm-group-meta">
      <span class="fm-group-count" id="grpCount-{{ forloop.counter }}">
        {{ items|length }}
      </span>
      <button class="fm-grp-btn" type="button"
              onclick="toggleGroup('{{ forloop.counter }}', true)">All On</button>
      <button class="fm-grp-btn" type="button"
              onclick="toggleGroup('{{ forloop.counter }}', false)">All Off</button>
    </div>
  </div>
  <div class="fm-group-body" id="grpBody-{{ forloop.counter }}">
    {% for item in items %}
    <label class="fm-tile {% if item.is_enabled %}enabled{% endif %}"
           id="tile-{{ item.key }}"
           data-label="{{ item.label|lower }}"
           data-group="{{ group_name|lower }}">
      <input type="checkbox"
             name="tile_keys"
             value="{{ item.key }}"
             {% if item.is_enabled %}checked{% endif %}>
      <div class="fm-toggle"></div>
      <div class="fm-tile-ic"><i class="{{ item.icon }}"></i></div>
      <div style="min-width:0;flex:1;">
        <div class="fm-tile-label">{{ item.label }}</div>
        <div class="fm-tile-access">
          {% if item.access %}
            <i class="fas fa-lock" style="font-size:8px;"></i> {{ item.access }}
          {% else %}
            <i class="fas fa-globe" style="font-size:8px;"></i> Public
          {% endif %}
        </div>
      </div>
    </label>
    {% endfor %}
  </div>
</div>
{% endfor %}
</div>{# end fmGroups #}

{# No results message #}
<div class="fm-no-results" id="fmNoResults">
  <i class="fas fa-search" style="font-size:2rem;color:#cbd5e1;"></i>
  <p class="mt-2">Koi feature nahi mila — search word change karo</p>
</div>

</div>{# end fm-wrap #}

{# Hidden form for saving (JS submit karta hai) #}
<form id="fmSaveForm" method="POST" action="{% url 'pos:feature_manager' %}" style="display:none;">
  {% csrf_token %}
  <div id="fmHiddenInputs"></div>
</form>
{% endblock %}

{% block javascripts %}
<script>
// ── Tile toggle ────────────────────────────────────────────────────────────
function syncTile(key, isEnabled) {
  const tile = document.getElementById('tile-' + key);
  if (!tile) return;
  tile.classList.toggle('enabled', isEnabled);
  const cb = tile.querySelector('input[type="checkbox"]');
  if (cb) cb.checked = isEnabled;
  updateCounts();
}

// tile label click se toggle
document.querySelectorAll('.fm-tile').forEach(function(tile) {
  tile.addEventListener('click', function(e) {
    // checkbox ka native behavior already handle karta hai
    // lekin hum visual sync karein
    const cb = tile.querySelector('input[type="checkbox"]');
    if (!cb) return;
    // checkbox already toggled by label click — sync visual
    setTimeout(function() {
      tile.classList.toggle('enabled', cb.checked);
      updateCounts();
    }, 0);
  });
});

// ── Group toggle ───────────────────────────────────────────────────────────
function toggleGroup(idx, enable) {
  const body = document.getElementById('grpBody-' + idx);
  if (!body) return;
  body.querySelectorAll('.fm-tile').forEach(function(tile) {
    if (tile.style.display === 'none') return; // hidden (search) tiles skip
    const cb = tile.querySelector('input');
    if (!cb) return;
    cb.checked = enable;
    tile.classList.toggle('enabled', enable);
  });
  updateCounts();
}

// ── Global select / unselect ──────────────────────────────────────────────
function globalToggle(enable) {
  document.querySelectorAll('.fm-tile').forEach(function(tile) {
    if (tile.style.display === 'none') return; // search hidden skip
    const cb = tile.querySelector('input');
    if (!cb) return;
    cb.checked = enable;
    tile.classList.toggle('enabled', enable);
  });
  updateCounts();
}

// ── Save ───────────────────────────────────────────────────────────────────
function saveTiles() {
  const form   = document.getElementById('fmSaveForm');
  const holder = document.getElementById('fmHiddenInputs');
  holder.innerHTML = '';

  // Collect ALL checked tiles (including those hidden by search)
  document.querySelectorAll('.fm-tile input[type="checkbox"]:checked').forEach(function(cb) {
    const inp = document.createElement('input');
    inp.type  = 'hidden';
    inp.name  = 'tile_keys';
    inp.value = cb.value;
    holder.appendChild(inp);
  });

  form.submit();
}

// ── Count update ───────────────────────────────────────────────────────────
function updateCounts() {
  const allTiles = document.querySelectorAll('.fm-tile');
  const enabled  = document.querySelectorAll('.fm-tile.enabled').length;
  document.getElementById('fmEnabledCount').textContent = enabled;
  document.getElementById('fmTotalCount').textContent   = allTiles.length;
}

// ── Search ─────────────────────────────────────────────────────────────────
document.getElementById('fmSearch').addEventListener('input', function() {
  const q       = this.value.trim().toLowerCase();
  const groups  = document.querySelectorAll('.fm-group');
  let totalVisible = 0;

  groups.forEach(function(grpEl) {
    let groupVisible = 0;
    const grpName = (grpEl.dataset.group || '').toLowerCase();

    grpEl.querySelectorAll('.fm-tile').forEach(function(tile) {
      const lbl = tile.dataset.label || '';
      const match = !q || lbl.includes(q) || grpName.includes(q);

      tile.style.display = match ? '' : 'none';
      if (match) groupVisible++;

      // Highlight matched text in label
      const labelEl = tile.querySelector('.fm-tile-label');
      if (labelEl) {
        if (q && lbl.includes(q)) {
          const original = tile.dataset.originalLabel || labelEl.textContent;
          tile.dataset.originalLabel = original;
          const regex = new RegExp('(' + q.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') + ')', 'gi');
          labelEl.innerHTML = original.replace(regex, '<mark>$1</mark>');
        } else {
          // Restore original
          if (tile.dataset.originalLabel) {
            labelEl.textContent = tile.dataset.originalLabel;
          }
        }
      }
    });

    grpEl.style.display = groupVisible > 0 ? '' : 'none';
    totalVisible += groupVisible;
  });

  // No results message
  const noRes = document.getElementById('fmNoResults');
  if (q && totalVisible === 0) {
    noRes.style.display = '';
  } else {
    noRes.style.display = 'none';
  }

  // Visible badge
  const visiBadge = document.getElementById('fmVisibleBadge');
  const visiCount = document.getElementById('fmVisibleCount');
  if (q) {
    visiBadge.style.display = 'inline-flex';
    visiCount.textContent   = totalVisible;
  } else {
    visiBadge.style.display = 'none';
  }
});

// ── Init ───────────────────────────────────────────────────────────────────
updateCounts();
</script>
{% endblock %}