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

{% block title %}{{ title }}{% endblock %}
{% block heading %}{{ title }}{% endblock %}

{% block stylesheets %}
<style>
  .rpt-toolbar { display:flex; gap:.5rem; flex-wrap:wrap; }
  .rpt-filters .form-control { min-width: 160px; }
  .table thead th { background:#f2f6fc; border-color:#d0d7e2; }
  tfoot th { background:#eef3fc; font-weight:700; }
  .text-end { text-align:right; }
  .text-center { text-align:center; }

  /* ── Booker / Area filter row ── */
  .filter-select {
    min-width: 180px;
    font-size: .85rem;
  }
  .filter-badge {
    display: inline-block;
    font-size: .75rem;
    padding: 2px 8px;
    border-radius: 4px;
    background: #e0f2fe;
    color: #0369a1;
    margin-left: 6px;
    vertical-align: middle;
  }
</style>
{% endblock %}

{% block content %}

<form method="get" class="mb-3 rpt-filters">
  <div class="card">
    <div class="card-body py-2">
      <div class="row align-items-end">

        {# ── Date filters (always visible) ── #}
        <div class="col-md-2 col-6 mb-2">
          <label class="mb-1">From</label>
          <input type="date" name="date_from" value="{{ date_from }}" class="form-control form-control-sm">
        </div>
        <div class="col-md-2 col-6 mb-2">
          <label class="mb-1">To</label>
          <input type="date" name="date_to" value="{{ date_to }}" class="form-control form-control-sm">
        </div>

        {# ── Booker / Area dropdowns (only when show_booker_area is True) ── #}
        {% if show_booker_area %}
        <div class="col-md-2 col-6 mb-2">
          <label class="mb-1">Order Booker</label>
          <select name="booker_id" class="form-control form-control-sm filter-select">
            <option value="">— All Bookers —</option>
            {% for b in bookers %}
              <option value="{{ b.id }}" {% if sel_booker|stringformat:"s" == b.id|stringformat:"s" %}selected{% endif %}>
                {{ b.name }}
              </option>
            {% endfor %}
          </select>
        </div>
        <div class="col-md-2 col-6 mb-2">
          <label class="mb-1">Sales Area</label>
          <select name="area_id" class="form-control form-control-sm filter-select">
            <option value="">— All Areas —</option>
            {% for a in areas %}
              <option value="{{ a.id }}" {% if sel_area|stringformat:"s" == a.id|stringformat:"s" %}selected{% endif %}>
                {{ a.name }}
              </option>
            {% endfor %}
          </select>
        </div>
        {% endif %}

        <div class="col-auto mb-2">
          <button class="btn btn-primary btn-sm" type="submit"><i class="fas fa-search mr-1"></i> Filter</button>
          {% if show_booker_area and sel_booker or sel_area %}
            <a href="?date_from={{ date_from }}&date_to={{ date_to }}" class="btn btn-outline-secondary btn-sm ml-1" title="Clear booker/area filters">
              <i class="fas fa-times mr-1"></i> Clear
            </a>
          {% endif %}
        </div>

        <div class="col ml-auto mb-2">
          <div class="rpt-toolbar d-flex justify-content-end">
            <a class="btn btn-outline-success btn-sm"
               href="{{ url_excel }}?date_from={{ date_from }}&date_to={{ date_to }}{{ filter_qs }}">
              Excel
            </a>
            <a class="btn btn-outline-danger btn-sm"
               href="{{ url_pdf }}?date_from={{ date_from }}&date_to={{ date_to }}{{ filter_qs }}">
              PDF
            </a>
            <button type="button" class="btn btn-info btn-sm" id="btnHelp">Help</button>
          </div>
        </div>

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

<div class="card shadow mb-4">
  <div class="card-body">
    <div class="table-responsive">
      <table class="table table-bordered table-hover">
        <thead>
          <tr>
            {% for c in columns %}
              {% if c.align == 'right' %}
                <th class="text-end">{{ c.label }}</th>
              {% elif c.align == 'center' %}
                <th class="text-center">{{ c.label }}</th>
              {% else %}
                <th>{{ c.label }}</th>
              {% endif %}
            {% endfor %}
          </tr>
        </thead>

        <tbody>
          {% if render_rows %}
            {% for row in render_rows %}
              <tr>
                {% for cell in row %}
                  {% if 'text-end' in cell.class %}
                    <td class="{{ cell.class }}">{{ cell.value|floatformat:2 }}</td>
                  {% else %}
                    <td class="{{ cell.class }}">{{ cell.value }}</td>
                  {% endif %}
                {% endfor %}
              </tr>
            {% endfor %}
          {% else %}
            <tr><td colspan="{{ columns|length }}" class="text-center text-muted">No data in this range.</td></tr>
          {% endif %}
        </tbody>

        <tfoot>
          <tr>
            {% for cell in totals_render %}
              {% if 'text-end' in cell.class %}
                <th class="{{ cell.class }}">{{ cell.value|floatformat:2 }}</th>
              {% else %}
                <th class="{{ cell.class }}">{{ cell.value }}</th>
              {% endif %}
            {% endfor %}
          </tr>
        </tfoot>
      </table>
    </div>
  </div>
</div>

<!-- Help Modal -->
<div id="helpModal" class="modal" tabindex="-1" role="dialog" style="display:none;">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">{{ title }} — Help</h5>
        <button type="button" class="close" id="helpClose" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        {{ help_html|safe }}
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary btn-sm" id="helpClose2">Close</button>
      </div>
    </div>
  </div>
</div>

{% endblock %}


{% block javascripts %}
<script>
(function(){
  var modal = document.getElementById('helpModal');
  var open  = document.getElementById('btnHelp');
  var close = document.getElementById('helpClose');
  var close2= document.getElementById('helpClose2');

  function show(){ modal.style.display='block'; modal.classList.add('show'); modal.style.background='rgba(0,0,0,.5)'; }
  function hide(){ modal.style.display='none'; modal.classList.remove('show'); modal.style.background=''; }

  if(open)  open.addEventListener('click', show);
  if(close) close.addEventListener('click', hide);
  if(close2)close2.addEventListener('click', hide);
})();
</script>
{% endblock %}