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

{% block stylesheets %}
<style>
.banks-section {
  background: #f0fdf4; border: 1px solid #bbf7d0;
  border-radius: 10px; padding: 1.25rem; margin-top: 1rem;
}
.banks-section > h6 { color: #166534; font-weight: 600; margin-bottom: .6rem; }

.branch-bank-group {
  margin-bottom: 1rem;
  background: #fff; border: 1px solid #d1fae5;
  border-radius: 8px; overflow: hidden;
  display: none;   /* hidden by default; shown when branch is selected */
}
.branch-bank-group.visible { display: block; }

.branch-group-header {
  background: #dcfce7; padding: .45rem .9rem;
  font-weight: 600; font-size: .82rem; color: #166534;
  display: flex; justify-content: space-between; align-items: center;
}
.bank-items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
  gap: .5rem; padding: .65rem .9rem;
}
.bank-item {
  display: flex; align-items: center; gap: .55rem;
  padding: .5rem .75rem;
  border: 1px solid #e2e8f0; border-radius: 7px;
  cursor: pointer; transition: all .14s; user-select: none;
  background: #fafafa;
}
.bank-item:hover { border-color: #22c55e; background: #f0fdf4; }
.bank-item.selected { background: #dcfce7; border-color: #22c55e; }
.bank-item input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; flex-shrink: 0; }
.bank-item label { margin: 0; cursor: pointer; font-size: .85rem; font-weight: 500; color: #374151; }
.select-all-branch-btn {
  font-size: .72rem; padding: .1rem .45rem; border-radius: 4px;
  cursor: pointer; background: #16a34a; color: #fff; border: none;
}
.select-all-branch-btn:hover { background: #15803d; }
.no-branch-selected-msg {
  color: #6b7280; font-size: .85rem; padding: .5rem 0;
  display: none;
}
.no-branch-selected-msg.show { display: block; }

.sub-tenant-section {
  background: #f8fafc; border: 1px solid #e2e8f0;
  border-radius: 10px; padding: 1.25rem; margin-top: 1rem;
}
.sub-tenant-section h6 { color: #334155; font-weight: 600; margin-bottom: .75rem; }
.sub-tenant-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)); gap: .6rem; }
.sub-item {
  display: flex; align-items: center; gap: .6rem;
  padding: .6rem .85rem; background: #fff;
  border: 1px solid #e2e8f0; border-radius: 8px;
  cursor: pointer; transition: all .15s; user-select: none;
}
.sub-item:hover { border-color: #3b82f6; }
.sub-item.selected { background: #eff6ff; border-color: #3b82f6; }
.sub-item input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; flex-shrink: 0; }
.sub-item label { margin: 0; cursor: pointer; font-weight: 500; font-size: .85rem; color: #374151; }
.section-label {
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: #6b7280; margin-bottom: .4rem;
}
</style>
{% endblock %}

{% block content %}
<div class="container py-4">
  <div class="row justify-content-center">
    <div class="col-lg-8">

      <div class="mb-3">
        <a href="{% url 'authentication:normal_list' %}" class="text-muted small">
          <i class="fas fa-arrow-left mr-1"></i>Back to Users
        </a>
      </div>

      <div class="card shadow-sm">
        <div class="card-header bg-primary text-white py-3">
          <h5 class="mb-0">
            {% if form.initial.username %}
              <i class="fas fa-user-edit mr-2"></i>Edit User
            {% else %}
              <i class="fas fa-user-plus mr-2"></i>Add New User
            {% endif %}
          </h5>
        </div>

        <div class="card-body">
          <form method="post" novalidate>
            {% csrf_token %}

            {% if form.non_field_errors %}
            <div class="alert alert-danger">{{ form.non_field_errors }}</div>
            {% endif %}

            <!-- ── Account Info ─────────────────────── -->
            <div class="section-label"><i class="fas fa-id-card mr-1"></i>Account Info</div>
            <div class="row">
              <div class="col-md-6">
                <div class="form-group">
                  <label class="font-weight-bold">Username <span class="text-danger">*</span></label>
                  {{ form.username }}
                  {% if form.username.errors %}<div class="text-danger small mt-1">{{ form.username.errors }}</div>{% endif %}
                </div>
              </div>
              <div class="col-md-6">
                <div class="form-group">
                  <label class="font-weight-bold">Email</label>
                  {{ form.email }}
                  {% if form.email.errors %}<div class="text-danger small mt-1">{{ form.email.errors }}</div>{% endif %}
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-md-6">
                <div class="form-group">
                  <label class="font-weight-bold">Password</label>
                  {{ form.password1 }}
                  <small class="form-text text-muted">{{ form.password1.help_text }}</small>
                  {% if form.password1.errors %}<div class="text-danger small mt-1">{{ form.password1.errors }}</div>{% endif %}
                </div>
              </div>
              <div class="col-md-6">
                <div class="form-group">
                  <label class="font-weight-bold">Confirm Password</label>
                  {{ form.password2 }}
                  {% if form.password2.errors %}<div class="text-danger small mt-1">{{ form.password2.errors }}</div>{% endif %}
                </div>
              </div>
            </div>

            <hr>

            <!-- ── Branch Assignment ──────────────── -->
            <div class="section-label"><i class="fas fa-building mr-1"></i>Branch Assignment</div>
            <div class="form-group">
              <label class="font-weight-bold">Branches <span class="text-danger">*</span></label>
              {{ form.branches }}
              <small class="form-text text-muted">{{ form.branches.help_text }}</small>
              {% if form.branches.errors %}<div class="text-danger small mt-1">{{ form.branches.errors }}</div>{% endif %}
            </div>
            <div class="row">
              <div class="col-md-6">
                <div class="form-group">
                  <label class="font-weight-bold">Expiry Date <span class="text-danger">*</span></label>
                  {{ form.expiry_date }}
                  {% if form.expiry_date.errors %}<div class="text-danger small mt-1">{{ form.expiry_date.errors }}</div>{% endif %}
                </div>
              </div>
              <div class="col-md-6">
                <div class="form-group">
                  <label class="font-weight-bold">Status</label>
                  {{ form.status }}
                  {% if form.status.errors %}<div class="text-danger small mt-1">{{ form.status.errors }}</div>{% endif %}
                </div>
              </div>
            </div>

            <hr>

            <!-- ── Bank Account Access (grouped by branch) ── -->
            <div class="banks-section">
              <h6><i class="fas fa-university mr-2"></i>Bank Account Access</h6>
              <p class="text-muted small mb-3">
                Select which bank accounts this user can use.
                <strong>Leave all unchecked</strong> to grant access to all banks.
              </p>

              <div id="no-branch-msg" class="no-branch-selected-msg">
                <i class="fas fa-info-circle mr-1 text-warning"></i>
                Select a branch above to see its bank accounts.
              </div>

              {% if banks_by_branch %}
                {% for group in banks_by_branch %}
                {# FIX: convert branch.pk to string BEFORE building composite key #}
                {% with bpk=group.branch.pk|stringformat:"s" %}

                <div class="branch-bank-group"
                     id="bank-group-{{ group.branch.pk }}"
                     data-branch-id="{{ group.branch.pk }}">
                  <div class="branch-group-header">
                    <span><i class="fas fa-building mr-1"></i>{{ group.branch.company_name }} / {{ group.branch.branch_name }}</span>
                    <button type="button" class="select-all-branch-btn"
                            onclick="toggleBranchBanks('{{ group.branch.pk }}', this)">
                      Select All
                    </button>
                  </div>
                  <div class="bank-items-grid" id="bank-grid-{{ group.branch.pk }}">
                    {% for bank in group.banks %}
                    {# FIX: convert t_id to string FIRST, then concatenate — avoids string+int = '' bug #}
                    {% with btid=bank.t_id|stringformat:"s" %}
                    {% with ck=bpk|add:"__"|add:btid %}

                    <div class="bank-item {% if ck in initial_bank_keys %}selected{% endif %}"
                         onclick="toggleBankCheck(this)">
                      <input type="checkbox"
                             name="bank_accounts"
                             value="{{ ck }}"
                             {% if ck in initial_bank_keys %}checked{% endif %}>
                      <label>
                        <i class="fas fa-wallet mr-1 text-success" style="font-size:.78rem;"></i>
                        {{ bank.name|title }}
                      </label>
                    </div>

                    {% endwith %}{% endwith %}
                    {% endfor %}
                  </div>
                </div>

                {% endwith %}
                {% endfor %}

                <div class="mt-2 d-flex align-items-center" style="gap:.5rem; flex-wrap:wrap;">
                  <button type="button" class="btn btn-outline-success btn-sm" onclick="selectAllBanks(true)">
                    <i class="fas fa-check-double mr-1"></i>Select All Visible
                  </button>
                  <button type="button" class="btn btn-outline-secondary btn-sm" onclick="selectAllBanks(false)">
                    <i class="fas fa-times mr-1"></i>Clear All
                  </button>
                  <span id="bank-count-badge" class="text-muted small ml-1"></span>
                </div>

              {% else %}
              <p class="text-muted mb-0 small">
                <i class="fas fa-info-circle mr-1"></i>No bank accounts found.
              </p>
              {% endif %}

              {% if form.bank_accounts.errors %}
              <div class="text-danger small mt-2">{{ form.bank_accounts.errors }}</div>
              {% endif %}
            </div>

            <!-- ── Sub-Tenant Section ─────────────── -->
            {% if has_sub_tenants %}
            <div class="sub-tenant-section mt-3">
              <h6><i class="fas fa-store-alt mr-2 text-info"></i>Counter / Sub-Tenant Access</h6>
              <p class="text-muted small mb-3">Leave unchecked for parent-level access only.</p>
              {% if form.sub_tenants.field.queryset.exists %}
              <div class="sub-tenant-grid">
                {% for checkbox in form.sub_tenants %}
                <div class="sub-item {% if checkbox.data.attrs.checked %}selected{% endif %}"
                     onclick="toggleCheck(this, '{{ checkbox.id_for_label }}')">
                  {{ checkbox.tag }}
                  <label for="{{ checkbox.id_for_label }}">
                    <i class="fas fa-cash-register mr-1 text-info" style="font-size:.78rem;"></i>
                    {{ checkbox.choice_label }}
                  </label>
                </div>
                {% endfor %}
              </div>
              {% else %}
              <p class="text-muted mb-0 small">No sub-tenants available.</p>
              {% endif %}
              {% if form.sub_tenants.errors %}<div class="text-danger small mt-2">{{ form.sub_tenants.errors }}</div>{% endif %}
            </div>
            {% endif %}

            <hr>

            <!-- ── Submit ───────────────────────────── -->
            <div class="d-flex justify-content-between">
              <a href="{% url 'authentication:normal_list' %}" class="btn btn-outline-secondary">
                <i class="fas fa-times mr-2"></i>Cancel
              </a>
              <button type="submit" class="btn btn-success px-4">
                {% if form.initial.username %}
                  <i class="fas fa-save mr-2"></i>Update User
                {% else %}
                  <i class="fas fa-user-plus mr-2"></i>Create User
                {% endif %}
              </button>
            </div>

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

    </div>
  </div>
</div>
{% endblock %}

{% block javascripts %}
<script>
// ── Branch PKs that have banks (for JS filtering) ──────────────────────────
var BRANCH_HAS_BANKS = {
  {% for group in banks_by_branch %}"{{ group.branch.pk }}": true{% if not forloop.last %},{% endif %}{% endfor %}
};

// ── Initially selected branch PKs (edit mode) ─────────────────────────────
var INITIAL_BRANCH_PKS = [
  {% for b in initial_branches %}"{{ b.id }}"{% if not forloop.last %},{% endif %}{% endfor %}
  {% if single_branch and not initial_branches %}"{{ single_branch.id }}"{% endif %}
];

$(document).ready(function () {

  // ── Select2 init ──────────────────────────────────────────────────────────
  var $sel = $('#id_branches');
  $sel.select2({
    theme: 'bootstrap-5',
    placeholder: 'Select Branch(es)',
    allowClear: true,
    minimumInputLength: 0,
    ajax: {
      url: '/ajax/branches/',
      dataType: 'json',
      delay: 250,
      data: function (p) { return { q: p.term || '' }; },
      processResults: function (d) { return { results: d.results }; },
      cache: true,
    },
  });

  // ── Select2 events: show/hide bank groups ─────────────────────────────────
  $sel.on('select2:select', function (e) {
    showBranchGroup(String(e.params.data.id));
    updateNoBranchMsg();
    updateBankCount();
  });
  $sel.on('select2:unselect', function (e) {
    hideBranchGroup(String(e.params.data.id));
    updateNoBranchMsg();
    updateBankCount();
  });

  // ── Pre-select branches (EDIT mode) ───────────────────────────────────────
  {% if initial_branches %}
  [
    {% for b in initial_branches %}
    { id: "{{ b.id }}", text: "{{ b.company_name|escapejs }} / {{ b.branch_name|escapejs }}" }{% if not forloop.last %},{% endif %}
    {% endfor %}
  ].forEach(function (b) {
    $sel.append(new Option(b.text, b.id, true, true));
    showBranchGroup(b.id);
  });
  $sel.trigger('change');
  {% endif %}

  // ── Auto-select single branch (ADD mode) ──────────────────────────────────
  {% if single_branch and not initial_branches %}
  $sel.append(new Option(
    "{{ single_branch.company_name|escapejs }} / {{ single_branch.branch_name|escapejs }}",
    "{{ single_branch.id }}", true, true
  )).trigger('change');
  showBranchGroup("{{ single_branch.id }}");
  {% endif %}

  // Initial visual: check already-selected banks + sub-tenants
  document.querySelectorAll('.bank-item input[type="checkbox"]').forEach(function (cb) {
    if (cb.checked) cb.closest('.bank-item').classList.add('selected');
  });
  document.querySelectorAll('.sub-item input[type="checkbox"]').forEach(function (cb) {
    if (cb.checked) cb.closest('.sub-item').classList.add('selected');
  });
  updateNoBranchMsg();
  updateBankCount();
});

// ── Show / hide bank group for a branch ───────────────────────────────────
function showBranchGroup(branchId) {
  var el = document.getElementById('bank-group-' + branchId);
  if (el) el.classList.add('visible');
}
function hideBranchGroup(branchId) {
  var el = document.getElementById('bank-group-' + branchId);
  if (!el) return;
  el.classList.remove('visible');
  // Uncheck all banks in this hidden group
  el.querySelectorAll('input[type="checkbox"]').forEach(function (cb) {
    cb.checked = false;
    cb.closest('.bank-item').classList.remove('selected');
  });
}

function updateNoBranchMsg() {
  var anyVisible = document.querySelectorAll('.branch-bank-group.visible').length > 0;
  var hasBankGroups = Object.keys(BRANCH_HAS_BANKS).length > 0;
  var msg = document.getElementById('no-branch-msg');
  if (!msg) return;
  msg.classList.toggle('show', hasBankGroups && !anyVisible);
}

// ── Toggle individual bank ─────────────────────────────────────────────────
function toggleBankCheck(el) {
  var cb = el.querySelector('input[type="checkbox"]');
  if (!cb) return;
  cb.checked = !cb.checked;
  el.classList.toggle('selected', cb.checked);
  updateBankCount();
}

// ── Select/deselect all banks in ONE branch ────────────────────────────────
function toggleBranchBanks(branchPk, btn) {
  var grid = document.getElementById('bank-grid-' + branchPk);
  if (!grid) return;
  var items = grid.querySelectorAll('.bank-item');
  var anyUnchecked = Array.from(items).some(function (i) {
    return !i.querySelector('input[type="checkbox"]').checked;
  });
  items.forEach(function (item) {
    var cb = item.querySelector('input[type="checkbox"]');
    cb.checked = anyUnchecked;
    item.classList.toggle('selected', anyUnchecked);
  });
  btn.textContent = anyUnchecked ? 'Deselect All' : 'Select All';
  updateBankCount();
}

// ── Select/clear ALL visible banks ────────────────────────────────────────
function selectAllBanks(doSelect) {
  document.querySelectorAll('.branch-bank-group.visible .bank-item').forEach(function (item) {
    var cb = item.querySelector('input[type="checkbox"]');
    cb.checked = doSelect;
    item.classList.toggle('selected', doSelect);
  });
  updateBankCount();
}

// ── Sub-tenant toggle ─────────────────────────────────────────────────────
function toggleCheck(el, id) {
  var cb = document.getElementById(id);
  if (!cb) return;
  cb.checked = !cb.checked;
  el.classList.toggle('selected', cb.checked);
}

// ── Bank count badge ──────────────────────────────────────────────────────
function updateBankCount() {
  var checked = document.querySelectorAll('.branch-bank-group.visible .bank-item input[type="checkbox"]:checked').length;
  var total   = document.querySelectorAll('.branch-bank-group.visible .bank-item input[type="checkbox"]').length;
  var el = document.getElementById('bank-count-badge');
  if (!el) return;
  if (total === 0) { el.textContent = ''; return; }
  el.textContent = checked > 0
    ? checked + ' of ' + total + ' selected'
    : 'None selected (all banks accessible)';
}
</script>
{% endblock %}