{% extends "pos/base.html" %}
{% load static %}
{% block title %}Referrals Tree{% endblock title %}

{% block stylesheets %}

<style>
  .tree-wrap{display:flex;gap:1rem}
  .tree{flex: 1 1 65%; border:1px solid #e9ecef; border-radius:.5rem; background:#fff; padding:1rem}
  .pane{flex: 1 1 35%; border:1px solid #e9ecef; border-radius:.5rem; background:#fff; padding:1rem}
  .node{display:flex; align-items:center; justify-content:space-between; padding:.35rem .5rem; border-bottom:1px dashed #f1f3f5}
  .left{display:flex; align-items:center; gap:.5rem}
  .toggle{cursor:pointer; user-select:none}
  .badges .badge{margin-left:.25rem}
  .children{margin-left:1rem}
</style>
{% endblock stylesheets %}

{% block heading %}Referrals Tree{% endblock heading %}

{% block content %}
<div class="row ml-0 mb-3">
  <a href="{% url 'ref:partner_create' %}" class="btn btn-primary font-weight-bold mr-2">
    <i class="fas fa-user-friends mr-1"></i> Add Partner
  </a>
  <a href="{% url 'ref:client_create' %}" class="btn btn-success font-weight-bold">
    <i class="fas fa-user-plus mr-1"></i> Add Client
  </a>
</div>

<form class="form-inline mb-3" method="get" action=".">
  <input type="text" name="q" value="{{ query }}" class="form-control mr-2" placeholder="Search by name or code (e.g., A-2, AA-1)">
  <button class="btn btn-secondary" type="submit"><i class="fas fa-search mr-1"></i> Search</button>
  {% if mode == 'search' %}
    <a href="{% url 'ref:tree' %}" class="btn btn-light ml-2">Clear</a>
  {% endif %}
</form>

<div class="tree-wrap">
  <section class="tree">
    {% if mode == 'search' %}
      <div class="alert alert-info py-2 mb-3">
        Showing branch for <strong>{{ node.name }}</strong> (<code>{{ node.code }}</code>) with ancestors and descendants.
      </div>
    {% endif %}

    {% with objs=objs children=children_map tcc=total_client_count sub=subtree_amount_total %}
      {% if mode == 'full' %}
        {% for root in root_candidates %}
          {% include "ref/_branch.html" with root=root objs=objs children=children tcc=tcc sub=sub %}
        {% empty %}
          <div class="alert alert-warning mb-0">No partners yet. Add your first partner.</div>
        {% endfor %}
      {% else %}
        {% for root in root_candidates %}
          {% include "ref/_branch.html" with root=root objs=objs children=children tcc=tcc sub=sub %}
        {% endfor %}
      {% endif %}
    {% endwith %}
  </section>

  <aside class="pane">
    <h5 class="mb-3">Quick Tips</h5>
    <ul class="mb-3">
      <li>Each node shows <strong>Clients: direct / total</strong>, <strong>Own</strong>, and <strong>Subtree</strong> amounts.</li>
      <li>Click <em>Toggle</em> to expand/collapse branches.</li>
      <li>Use <strong>Search</strong> to focus a specific branch.</li>
    </ul>
    <div class="alert alert-light">
      <strong>Legend</strong><br>
      <span class="badge badge-secondary">Partner</span>
      <span class="badge badge-primary">Client</span>
      <span class="badge badge-info">Own</span>
      <span class="badge badge-success">Subtree</span>
    </div>
  </aside>
</div>

{% endblock content %}

{% block javascripts %}
<script>
  document.addEventListener('click', function(e){
    if(e.target.classList.contains('toggle')){
      const ul = e.target.closest('.node').nextElementSibling;
      if(ul && ul.classList.contains('children')){
        ul.style.display = (ul.style.display === 'none') ? '' : 'none';
        e.target.textContent = (ul.style.display === 'none') ? '▶' : '▼';
      }
    }
  });
</script>
{% endblock javascripts %}