{% extends "pos/base.html" %}
{% block title %}Active Branches Overview{% endblock %}

{% block content %}
<div class="container-fluid px-4">

  {# PAGE HEADER #}
  <div class="d-flex align-items-center justify-content-between mb-4">
    <div>
      <h1 class="h3 mb-0 text-gray-800">
        <i class="fas fa-store-alt mr-2 text-primary"></i>
        Active Branches Overview
      </h1>
      <small class="text-muted">
        <span id="visibleBranchCount">{{ total_branches }}</span>
        active branch{{ total_branches|pluralize:"es" }}
        {% if tenant_groups %} across
        <span id="visibleTenantCount">{{ tenant_groups|length }}</span>
        tenant{{ tenant_groups|length|pluralize }}{% endif %}
      </small>
    </div>
    <a href="{% url 'authentication:branch_add' %}" class="btn btn-primary btn-sm">
      <i class="fas fa-plus mr-1"></i> Add Branch
    </a>
  </div>

  {# ══ SERVER-SIDE FILTER BAR ══ #}
  <div class="card shadow-sm mb-3 border-0">
    <div class="card-body py-3">
      <form method="get" id="filterForm" class="form-row align-items-end">

        <div class="form-group col-md-4 mb-2 mb-md-0">
          <label class="small font-weight-bold text-uppercase text-muted mb-1">
            <i class="fas fa-search mr-1"></i>Search Tenant / Branch
          </label>
          <select name="branch_search" id="id_branch_search"
                  class="form-control" style="width:100%">
            {% if search_val %}
              <option value="{{ search_val }}" selected>Tenant ID: {{ search_val }}</option>
            {% else %}
              <option value="">— All Tenants —</option>
            {% endif %}
          </select>
        </div>

        <div class="form-group col-md-3 mb-2 mb-md-0">
          <label class="small font-weight-bold text-uppercase text-muted mb-1">
            <i class="fas fa-calendar-times mr-1"></i>Expiring Within
          </label>
          <select name="expiry_range" id="id_expiry_range" class="form-control">
            <option value=""      {% if expiry_range == ""       %}selected{% endif %}>— All —</option>
            <option value="7"     {% if expiry_range == "7"      %}selected{% endif %}>7 Days</option>
            <option value="15"    {% if expiry_range == "15"     %}selected{% endif %}>15 Days</option>
            <option value="30"    {% if expiry_range == "30"     %}selected{% endif %}>1 Month</option>
            <option value="custom"{% if expiry_range == "custom" %}selected{% endif %}>Custom Range…</option>
          </select>
        </div>

        <div class="form-group col-md-3 mb-2 mb-md-0" id="customRangeBox"
             {% if expiry_range != "custom" %}style="display:none"{% endif %}>
          <label class="small font-weight-bold text-uppercase text-muted mb-1">
            Custom Expiry Range
          </label>
          <div class="input-group input-group-sm">
            <input type="date" name="exp_start" id="id_exp_start"
                   class="form-control" value="{{ exp_start }}">
            <div class="input-group-prepend input-group-append">
              <span class="input-group-text px-1">→</span>
            </div>
            <input type="date" name="exp_end" id="id_exp_end"
                   class="form-control" value="{{ exp_end }}">
          </div>
        </div>

        <div class="form-group col-md-2 mb-2 mb-md-0 d-flex align-items-end">
          <button type="submit" class="btn btn-primary btn-sm mr-1">
            <i class="fas fa-filter mr-1"></i>Apply
          </button>
          <a href="{% url 'authentication:active_branches_overview' %}"
             class="btn btn-outline-secondary btn-sm">
            <i class="fas fa-times mr-1"></i>Clear
          </a>
        </div>

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

  {# ══ COLOR FILTER BAR (client-side, instant) ══ #}
  <div class="card shadow-sm mb-4 border-0">
    <div class="card-body py-2 px-3">
      <div class="d-flex flex-wrap align-items-center">
        <small class="text-muted font-weight-bold text-uppercase mr-3 mb-1">
          <i class="fas fa-palette mr-1"></i>Filter by Last Login:
        </small>

        <button type="button" class="color-filter-btn mr-2 mb-1 active"
                data-color="all"
                style="background:#6c757d;color:#fff;border:none;border-radius:4px;padding:4px 10px;cursor:pointer;font-size:.8rem;">
          <i class="fas fa-th mr-1"></i>All
          <span class="badge badge-light text-dark ml-1" id="cnt-all">0</span>
        </button>

        <button type="button" class="color-filter-btn mr-2 mb-1"
                data-color="success"
                style="background:#1cc88a;color:#fff;border:none;border-radius:4px;padding:4px 10px;cursor:pointer;font-size:.8rem;">
          ● &lt; 3 Days
          <span class="badge badge-light text-dark ml-1" id="cnt-success">0</span>
        </button>

        <button type="button" class="color-filter-btn mr-2 mb-1"
                data-color="primary"
                style="background:#4e73df;color:#fff;border:none;border-radius:4px;padding:4px 10px;cursor:pointer;font-size:.8rem;">
          ● &lt; 7 Days
          <span class="badge badge-light text-dark ml-1" id="cnt-primary">0</span>
        </button>

        <button type="button" class="color-filter-btn mr-2 mb-1"
                data-color="warning"
                style="background:#fd7e14;color:#fff;border:none;border-radius:4px;padding:4px 10px;cursor:pointer;font-size:.8rem;">
          ● &lt; 15 Days
          <span class="badge badge-light text-dark ml-1" id="cnt-warning">0</span>
        </button>

        <button type="button" class="color-filter-btn mr-2 mb-1"
                data-color="danger"
                style="background:#e74a3b;color:#fff;border:none;border-radius:4px;padding:4px 10px;cursor:pointer;font-size:.8rem;">
          ● &gt; 15 Days
          <span class="badge badge-light text-dark ml-1" id="cnt-danger">0</span>
        </button>

        <button type="button" class="color-filter-btn mr-2 mb-1"
                data-color="secondary"
                style="background:#858796;color:#fff;border:none;border-radius:4px;padding:4px 10px;cursor:pointer;font-size:.8rem;">
          ● No Login
          <span class="badge badge-light text-dark ml-1" id="cnt-secondary">0</span>
        </button>

        <span id="colorFilterLabel" class="ml-auto text-muted small mb-1" style="display:none">
          <i class="fas fa-filter text-primary mr-1"></i>
          Showing: <strong id="colorFilterName"></strong>
          &mdash;
          <a href="#" id="clearColorFilter" class="text-danger">Clear filter</a>
        </span>
      </div>
    </div>
  </div>

  {# ══ RESULTS ══ #}
  {% if tenant_groups %}
    {% for group in tenant_groups %}
    <div class="card shadow-sm mb-3 border-0 tenant-card"
         id="tenant-{{ group.tenant_id }}"
         data-tenant-id="{{ group.tenant_id }}">

      <div class="card-header text-white py-2 d-flex align-items-center justify-content-between"
           style="background:linear-gradient(135deg,#4e73df 0%,#224abe 100%);border-radius:6px 6px 0 0;">
        <div>
          <i class="fas fa-building mr-2"></i>
          <strong>{{ group.company_name }}</strong>
          <span class="badge badge-light text-primary ml-2">Tenant ID: {{ group.tenant_id }}</span>
        </div>
        <span class="badge badge-light tenant-branch-count">
          {{ group.branches|length }} branch{{ group.branches|length|pluralize:"es" }}
        </span>
      </div>

      <div class="card-body p-0">
        <div class="table-responsive">
          <table class="table table-hover table-sm mb-0 text-nowrap">
            <thead class="thead-light">
              <tr>
                <th class="pl-3" style="width:22%">Branch Name</th>
                <th style="width:8%">Tenant ID</th>
                <th style="width:12%">Phone</th>
                <th style="width:20%">Address</th>
                <th style="width:13%">Expiry Date</th>
                <th style="width:16%">Last Login</th>
                <th style="width:9%" class="text-center">Action</th>
              </tr>
            </thead>
            <tbody>
              {% for item in group.branches %}
              {% with br=item.branch %}
              <tr class="branch-row" data-color="{{ item.color_class }}">

                <td class="pl-3 align-middle font-weight-bold">
                  <i class="fas fa-code-branch text-muted mr-1 small"></i>
                  {{ br.branch_name }}
                </td>

                <td class="align-middle text-center">
                  <span class="badge badge-light border">{{ br.pos_business_id }}</span>
                </td>

                <td class="align-middle">
                  {% if br.phone_no %}
                    <i class="fas fa-phone text-muted mr-1 small"></i>{{ br.phone_no }}
                  {% elif br.mobile_no %}
                    <i class="fas fa-mobile-alt text-muted mr-1 small"></i>{{ br.mobile_no }}
                  {% else %}<span class="text-muted">—</span>{% endif %}
                </td>

                <td class="align-middle" title="{{ br.address }}"
                    style="max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
                  {% if br.address %}
                    <i class="fas fa-map-marker-alt text-muted mr-1 small"></i>{{ br.address }}
                  {% else %}<span class="text-muted">—</span>{% endif %}
                </td>

                <td class="align-middle">
                  {% if br.expiry_date %}
                    <span class="{% if br.expiry_date < today %}text-danger font-weight-bold{% else %}text-dark{% endif %}">
                      {{ br.expiry_date|date:"d M Y" }}
                    </span><br>
                    <small class="{% if br.expiry_date < today %}text-danger{% elif br.expiry_date == today %}text-warning font-weight-bold{% else %}text-muted{% endif %}">
                      {% if br.expiry_date < today %}<i class="fas fa-exclamation-circle"></i> Expired
                      {% elif br.expiry_date == today %}<i class="fas fa-exclamation-triangle"></i> Today
                      {% else %}{{ br.expiry_date|timeuntil }} left{% endif %}
                    </small>
                  {% else %}
                    <span class="text-muted">No expiry</span>
                  {% endif %}
                </td>

                <td class="align-middle">
                  <span class="badge badge-{{ item.color_class }}"
                        style="font-size:.78rem;padding:5px 8px;">
                    {% if item.last_login %}
                      <i class="fas fa-clock mr-1"></i>{{ item.last_login|date:"d M Y H:i" }}
                    {% else %}
                      <i class="fas fa-minus mr-1"></i>No login recorded
                    {% endif %}
                  </span>
                </td>

                <td class="align-middle text-center">
                  <a href="{% url 'authentication:branch_edit' br.id %}"
                     class="btn btn-sm btn-outline-secondary"
                     title="Edit {{ br.branch_name }}">
                    <i class="fas fa-edit"></i>
                    <span class="d-none d-xl-inline ml-1">Edit</span>
                  </a>
                </td>
              </tr>
              {% endwith %}
              {% endfor %}
            </tbody>
          </table>
        </div>
      </div>

      <div class="tenant-empty-msg" style="display:none">
        <p class="text-center text-muted py-3 mb-0 small">
          <i class="fas fa-filter mr-1"></i>
          No branches match the selected login category for this tenant.
        </p>
      </div>
    </div>
    {% endfor %}

  {% else %}
    <div class="card border-0 shadow-sm">
      <div class="card-body text-center py-5">
        <i class="fas fa-store-slash fa-3x text-muted mb-3"></i>
        <h5 class="text-muted">No active branches found</h5>
        <p class="text-muted small mb-0">
          {% if expiry_range or search_val %}
            No branches match the selected filters.
            <a href="{% url 'authentication:active_branches_overview' %}">Clear filters</a>
          {% else %}There are no active branches in the system yet.{% endif %}
        </p>
      </div>
    </div>
  {% endif %}

  {# ══ SUMMARY FOOTER ══ #}
  {% if tenant_groups %}
  <div class="card shadow-sm border-0 mt-2 mb-5">
    <div class="card-header py-2 bg-light d-flex align-items-center justify-content-between">
      <strong class="small text-uppercase text-muted">
        <i class="fas fa-chart-bar mr-1"></i>Summary by Last Login Category
      </strong>
      <small id="summaryFilterNote" class="text-primary" style="display:none">
        <i class="fas fa-filter mr-1"></i>Filtered view
      </small>
    </div>
    <div class="card-body p-0">
      <div class="table-responsive">
        <table class="table table-sm mb-0">
          <thead class="thead-light">
            <tr>
              <th style="width:30px"></th>
              <th>Login Category</th>
              <th class="text-center" style="width:100px">Branches</th>
              <th class="text-center" style="width:100px">Tenants</th>
              <th>Distribution</th>
            </tr>
          </thead>
          <tbody id="summaryTbody"></tbody>
          <tfoot style="background:#f8f9fc;font-weight:bold;border-top:2px solid #dee2e6;">
            <tr>
              <td></td>
              <td class="text-uppercase text-muted small">Total</td>
              <td class="text-center" id="summaryTotalBranches">—</td>
              <td class="text-center" id="summaryTotalTenants">—</td>
              <td></td>
            </tr>
          </tfoot>
        </table>
      </div>
    </div>
  </div>
  {% endif %}

</div>
{% endblock %}


{% block javascripts %}
{{ block.super }}
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/select2-bootstrap4-theme@1.0.0/dist/select2-bootstrap4.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<style>
  .badge-warning  { background-color:#fd7e14!important; color:#fff!important; }
  .branch-row:hover { background-color:#f8f9fc; }
  .select2-container--bootstrap4 .select2-selection--single {
    height: calc(1.5em + .75rem + 2px) !important;
  }
  .color-filter-btn {
    opacity:.7;
    transition: opacity .15s, box-shadow .15s, transform .1s;
  }
  .color-filter-btn:hover { opacity:1; }
  .color-filter-btn.active {
    opacity:1;
    box-shadow: 0 0 0 3px rgba(0,0,0,.25), 0 2px 6px rgba(0,0,0,.18) !important;
    transform: translateY(-1px);
  }
  .summary-row { cursor:pointer; transition: background .1s; }
  .summary-row:hover { background:#f0f4ff!important; }
</style>

<script>
(function () {
  "use strict";

  var COLORS = [
    { key:"success",   label:"< 3 Days",   hex:"#1cc88a" },
    { key:"primary",   label:"< 7 Days",   hex:"#4e73df" },
    { key:"warning",   label:"< 15 Days",  hex:"#fd7e14" },
    { key:"danger",    label:"> 15 Days",  hex:"#e74a3b" },
    { key:"secondary", label:"No Login",   hex:"#858796" },
  ];

  var activeColor = "all";

  /* ── 1. Custom date range toggle ── */
  var rangeSelect = document.getElementById("id_expiry_range");
  var customBox   = document.getElementById("customRangeBox");
  function toggleCustomRange() {
    if (!rangeSelect || !customBox) return;
    customBox.style.display = (rangeSelect.value === "custom") ? "" : "none";
  }
  if (rangeSelect) {
    rangeSelect.addEventListener("change", toggleCustomRange);
    toggleCustomRange();
  }

  /* ── 2. Select2 AJAX ── */
  var ajaxUrl = "{% url 'authentication:branch_overview_search_ajax' %}";
  $("#id_branch_search").select2({
    theme: "bootstrap4",
    placeholder: "Type to search tenant / branch…",
    allowClear: true,
    minimumInputLength: 0,
    width: "100%",
    ajax: {
      url: ajaxUrl, dataType: "json", delay: 250,
      data: function(p) { return { term: p.term || "" }; },
      processResults: function(d) {
        return { results: [{ id:"", text:"— All Tenants —" }].concat(d.results||[]) };
      },
      cache: true
    }
  });
  {% if search_val %}
  $.ajax({ url:ajaxUrl, data:{ term:"" }, dataType:"json",
    success: function(d) {
      var m = (d.results||[]).find(function(r){ return String(r.id)==="{{ search_val }}"; });
      if (m) { $("#id_branch_search").append(new Option(m.text, m.id, true, true)).trigger("change"); }
    }
  });
  {% endif %}

  /* ══════════════════════════════════════════════════
     3. COLOR FILTER + SUMMARY
  ══════════════════════════════════════════════════ */

  /* Count all rows regardless of filter */
  function countAll() {
    var c = { all:0 };
    COLORS.forEach(function(m){ c[m.key] = 0; });
    document.querySelectorAll(".branch-row").forEach(function(row){
      var k = row.getAttribute("data-color");
      if (c[k] !== undefined) c[k]++;
      c.all++;
    });
    return c;
  }

  /* Apply filter: show/hide rows and cards */
  function applyColorFilter(color) {
    activeColor = color;

    document.querySelectorAll(".tenant-card").forEach(function(card) {
      var rows    = card.querySelectorAll(".branch-row");
      var visible = 0;

      rows.forEach(function(row) {
        var show = (color === "all" || row.getAttribute("data-color") === color);
        row.style.display = show ? "" : "none";
        if (show) visible++;
      });

      var emptyMsg = card.querySelector(".tenant-empty-msg");
      if (visible === 0) {
        card.style.display = "none";
        if (emptyMsg) emptyMsg.style.display = "none";
      } else {
        card.style.display = "";
        var badge = card.querySelector(".tenant-branch-count");
        if (badge) badge.textContent = visible + " branch" + (visible !== 1 ? "es" : "");
        if (emptyMsg) emptyMsg.style.display = "none";
      }
    });

    /* Update header subtitle counts */
    var visRows    = document.querySelectorAll(".branch-row");
    var visBranch  = 0;
    visRows.forEach(function(r){ if(r.style.display !== "none") visBranch++; });
    var visTenant  = 0;
    document.querySelectorAll(".tenant-card").forEach(function(c){ if(c.style.display !== "none") visTenant++; });

    var bcEl = document.getElementById("visibleBranchCount");
    if (bcEl) bcEl.textContent = visBranch;
    var tcEl = document.getElementById("visibleTenantCount");
    if (tcEl) tcEl.textContent = visTenant;

    /* Label + summary note */
    var lbl     = document.getElementById("colorFilterLabel");
    var lblName = document.getElementById("colorFilterName");
    var sumNote = document.getElementById("summaryFilterNote");
    if (color === "all") {
      if (lbl)     lbl.style.display = "none";
      if (sumNote) sumNote.style.display = "none";
    } else {
      var meta = COLORS.find(function(c){ return c.key === color; });
      if (lbl && lblName) { lblName.textContent = meta ? meta.label : color; lbl.style.display = ""; }
      if (sumNote) sumNote.style.display = "";
    }

    /* Update button active states */
    document.querySelectorAll(".color-filter-btn").forEach(function(btn) {
      var isActive = btn.getAttribute("data-color") === color;
      btn.classList.toggle("active", isActive);
    });

    buildSummary();
  }

  /* Build summary table based on CURRENTLY VISIBLE rows */
  function buildSummary() {
    var tbody     = document.getElementById("summaryTbody");
    var totalBrEl = document.getElementById("summaryTotalBranches");
    var totalTnEl = document.getElementById("summaryTotalTenants");
    if (!tbody) return;

    /* Total visible branches (for % calc) */
    var grandTotal = 0;
    document.querySelectorAll(".branch-row").forEach(function(r){
      if (r.style.display !== "none") grandTotal++;
    });

    var html = "";
    COLORS.forEach(function(meta) {
      /* Branch count for this color among visible rows */
      var brCount = 0;
      document.querySelectorAll(".branch-row[data-color='" + meta.key + "']").forEach(function(r){
        if (r.style.display !== "none") brCount++;
      });

      /* Tenant count: cards that are visible AND have ≥1 visible branch of this color */
      var tnCount = 0;
      document.querySelectorAll(".tenant-card").forEach(function(card){
        if (card.style.display === "none") return;
        var found = false;
        card.querySelectorAll(".branch-row[data-color='" + meta.key + "']").forEach(function(r){
          if (r.style.display !== "none") found = true;
        });
        if (found) tnCount++;
      });

      var pct = grandTotal > 0 ? Math.round((brCount / grandTotal) * 100) : 0;
      var isActive = (activeColor === meta.key);

      html += "<tr class='summary-row' style='" + (isActive ? "background:#eef2ff;" : "") + "'"
            + " onclick='window.__cfClick(\"" + meta.key + "\")'>"
            + "<td class='text-center pl-3'>"
            +   "<span style='display:inline-block;width:13px;height:13px;border-radius:50%;"
            +   "background:" + meta.hex + "'></span>"
            + "</td>"
            + "<td><span class='font-weight-bold' style='color:" + meta.hex + "'>" + meta.label + "</span></td>"
            + "<td class='text-center'>"
            +   "<span class='badge' style='background:" + meta.hex + ";color:#fff;font-size:.85rem;padding:4px 10px'>"
            +     brCount
            +   "</span>"
            + "</td>"
            + "<td class='text-center'>"
            +   "<span class='badge badge-light border text-dark' style='font-size:.85rem;padding:4px 10px'>"
            +     tnCount
            +   "</span>"
            + "</td>"
            + "<td style='vertical-align:middle'>"
            +   "<div style='display:flex;align-items:center'>"
            +     "<div style='flex:1;background:#eee;border-radius:4px;height:12px;overflow:hidden'>"
            +       "<div style='width:" + pct + "%;height:100%;background:" + meta.hex + ";"
            +         "border-radius:4px;transition:width .4s ease'></div>"
            +     "</div>"
            +     "<small class='ml-2 text-muted'>" + pct + "%</small>"
            +   "</div>"
            + "</td>"
            + "</tr>";
    });

    tbody.innerHTML = html;

    /* Footer totals */
    var tenantSet = new Set();
    document.querySelectorAll(".tenant-card").forEach(function(c){
      if (c.style.display !== "none") tenantSet.add(c.getAttribute("data-tenant-id"));
    });
    if (totalBrEl) totalBrEl.textContent = grandTotal;
    if (totalTnEl) totalTnEl.textContent = tenantSet.size;
  }

  /* Global click handler for summary rows (toggle) */
  window.__cfClick = function(color) {
    applyColorFilter(activeColor === color ? "all" : color);
  };

  /* Bind color filter buttons */
  document.querySelectorAll(".color-filter-btn").forEach(function(btn) {
    btn.addEventListener("click", function() {
      var c = btn.getAttribute("data-color");
      applyColorFilter(activeColor === c ? "all" : c);
    });
  });

  /* Clear filter link */
  var clearLink = document.getElementById("clearColorFilter");
  if (clearLink) {
    clearLink.addEventListener("click", function(e){ e.preventDefault(); applyColorFilter("all"); });
  }

  /* ── Init ── */
  (function init() {
    var counts = countAll();
    Object.keys(counts).forEach(function(k){
      var el = document.getElementById("cnt-" + k);
      if (el) el.textContent = counts[k];
    });
    applyColorFilter("all");
  })();

})();
</script>
{% endblock %}