{% extends LOWBONO_DASHBOARD_TEMPLATE_BASE|default:"lowbono/dashboard/base.html" %}
{% load django_bootstrap5 %}
{% load django_tables2 %}
{% load static %}

{% block title %}Referral Status · Staff Dashboard{% endblock %}

{% block content %}
  <!-- Top bar: page title -->
  <div class="mb-3">
    <h1 class="h4 mb-0">Referral Status
      <span class="badge bg-secondary align-middle">{{ grand_total }}</span>
      {% if overdue_total %}<span class="badge bg-danger align-middle">{{ overdue_total }} overdue</span>{% endif %}
    </h1>
  </div>

  <!-- Controls row: filter toggle (left), above the filter card -->
  <div class="d-flex justify-content-between align-items-center mb-2 flex-wrap gap-2">
    <button class="btn btn-sm btn-outline-secondary filter-toggle" type="button"
            data-bs-toggle="collapse" data-bs-target="#filterPanel"
            aria-expanded="true" aria-controls="filterPanel">
      <i class="bi bi-funnel"></i> <span class="filter-toggle-label"></span>
      <i class="bi bi-chevron-down chevron"></i>
    </button>
  </div>

  <!-- Filter panel -->
  <div class="collapse show" id="filterPanel">
    <div class="card mb-3">
      <div class="card-header">Filter</div>
      <div class="card-body py-3">
        <form method="get" class="row g-2 align-items-end">
          <div class="col-6 col-md-3">{% bootstrap_field form.profession size='sm' %}</div>
          <div class="col-6 col-md-3">{% bootstrap_field form.received_after size='sm' %}</div>
          <div class="col-6 col-md-3">{% bootstrap_field form.received_before size='sm' %}</div>
          <div class="col-6 col-md-2 pb-2">{% bootstrap_field form.overdue_only size='sm' %}</div>
          <div class="col-12 mt-1">
            <button type="submit" class="btn btn-sm btn-primary"><i class="bi bi-funnel"></i> Apply</button>
            <a href="{{ request.path }}" class="btn btn-sm btn-outline-secondary">Reset</a>
          </div>
        </form>
      </div>
    </div>
  </div>

  <!-- Table section header: heading + column / export controls (next to the table) -->
  <div class="d-flex justify-content-between align-items-center mb-2 flex-wrap gap-2">
    <h2 class="h5 mb-0">Referral Status
      <span class="badge bg-secondary align-middle">{{ grand_total }}</span>
    </h2>
    <div class="d-flex gap-2">
      <div class="dropdown">
        <button class="btn btn-sm btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown"
                data-bs-auto-close="outside" type="button">
          <i class="bi bi-layout-three-columns px-1"></i>View/Hide Columns
        </button>
        <div class="dropdown-menu dropdown-menu-end p-2" style="min-width: 260px; max-height: 340px; overflow:auto;">
          {% for column in table.columns %}
            <label class="dropdown-item small mb-0">
              <input type="checkbox" class="col-toggle form-check-input me-1"
                     data-col="{{ forloop.counter }}" data-name="{{ column.name }}"
                     {% if column.name not in default_hidden %}checked{% endif %}> {{ column.header }}
            </label>
          {% endfor %}
        </div>
      </div>
      <div class="btn-group">
        <a class="btn btn-sm btn-outline-success" href="{% querystring '_export'='csv' %}">
          <i class="bi bi-filetype-csv"></i> Export CSV</a>
        <a class="btn btn-sm btn-outline-success" href="{% querystring '_export'='xlsx' %}">
          <i class="bi bi-file-earmark-excel"></i> Export Excel Sheet</a>
      </div>
    </div>
  </div>

  <!-- Professional x Stage matrix -->
  <div class="table-scroll-wrap">
    <div class="table-responsive">
      {% render_table table %}
    </div>
  </div>
{% endblock %}