{% extends "pos/base.html" %}
{% load static %}
{% block title %}Item‑wise Sales Report{% endblock %}

{% block stylesheets %}

<style>
  @media print {
    body * { visibility: hidden; }
    #report-container, #report-container * { visibility: visible; }
    #report-container { position: absolute; top:0; left:0; width:100%; }
  }
</style>
{% endblock %}

{% block heading %}Item‑wise Sales Report{% endblock %}

{% block content %}
<div id="report-container" class="p-3">

  <form method="get" class="row gy-2 gx-3 align-items-end">

    <!-- Date From -->
    <div class="col-12 col-sm-auto">
      <label class="form-label">Date From</label>
      <input type="date" name="date_from" class="form-control form-control-sm"
             value="{{ date_from }}">
    </div>

    <!-- Date To -->
    <div class="col-12 col-sm-auto">
      <label class="form-label">Date To</label>
      <input type="date" name="date_to" class="form-control form-control-sm"
             value="{{ date_to }}">
    </div>

    <!-- Show Profit -->
    <div class="col-12 col-sm-auto form-check">
      <input class="form-check-input" type="checkbox"
             id="show_profit" name="show_profit" value="1"
             {% if show_profit %}checked{% endif %}>
      <label class="form-check-label" for="show_profit">Show Profit</label>
    </div>

    <!-- Branches -->
    {% if is_master %}
    <div class="col-12 col-sm-auto">
      <button id="show-multi-btn" type="button"
              class="btn btn-info btn-sm w-100">
        <i class="bi bi-grid-1x2"></i> Branches
      </button>
    </div>
    {% endif %}

    <!-- Category -->
    <div class="col-12 col-sm-auto dropdown">
      <button class="btn btn-outline-secondary btn-sm dropdown-toggle w-100"
              type="button" id="categoryDropdown"
              data-bs-toggle="dropdown" aria-expanded="false">
        {% if selected_category %}
          {% for c in categories %}
            {% if c.t_id|stringformat:"s" == selected_category %}
              {{ c.cat_name }}
            {% endif %}
          {% endfor %}
        {% else %}
          Category
        {% endif %}
      </button>
      <ul class="dropdown-menu" aria-labelledby="categoryDropdown">
        <li>
          <label class="dropdown-item d-flex align-items-center">
            <input class="form-check-input me-2" type="radio"
                   name="category" value=""
                   {% if not selected_category %}checked{% endif %}>
            All
          </label>
        </li>
        <li><hr class="dropdown-divider"></li>
        {% for c in categories %}
        <li>
          <label class="dropdown-item d-flex align-items-center">
            <input class="form-check-input me-2" type="radio"
                   name="category" value="{{ c.t_id }}"
                   {% if selected_category == c.t_id|stringformat:"s" %}checked{% endif %}>
            {{ c.cat_name }}
          </label>
        </li>
        {% endfor %}
      </ul>
    </div>

    <!-- Company -->
    <div class="col-12 col-sm-auto dropdown">
      <button class="btn btn-outline-secondary btn-sm dropdown-toggle w-100"
              type="button" id="companyDropdown"
              data-bs-toggle="dropdown" aria-expanded="false">
        {% if selected_company %}
          {% for c in companies %}
            {% if c.t_id|stringformat:"s" == selected_company %}
              {{ c.name }}
            {% endif %}
          {% endfor %}
        {% else %}
          Company
        {% endif %}
      </button>
      <ul class="dropdown-menu" aria-labelledby="companyDropdown">
        <li>
          <label class="dropdown-item d-flex align-items-center">
            <input class="form-check-input me-2" type="radio"
                   name="company" value=""
                   {% if not selected_company %}checked{% endif %}>
            All
          </label>
        </li>
        <li><hr class="dropdown-divider"></li>
        {% for c in companies %}
        <li>
          <label class="dropdown-item d-flex align-items-center">
            <input class="form-check-input me-2" type="radio"
                   name="company" value="{{ c.t_id }}"
                   {% if selected_company == c.t_id|stringformat:"s" %}checked{% endif %}>
            {{ c.name }}
          </label>
        </li>
        {% endfor %}
      </ul>
    </div>

    <!-- Area -->
    <div class="col-12 col-sm-auto dropdown">
      <button class="btn btn-outline-secondary btn-sm dropdown-toggle w-100"
              type="button" id="areaDropdown"
              data-bs-toggle="dropdown" aria-expanded="false">
        {% if selected_area %}
          {% for a in areas %}
            {% if a.t_id|stringformat:"s" == selected_area %}
              {{ a.area_name }}
            {% endif %}
          {% endfor %}
        {% else %}
          Area
        {% endif %}
      </button>
      <ul class="dropdown-menu" aria-labelledby="areaDropdown">
        <li>
          <label class="dropdown-item d-flex align-items-center">
            <input class="form-check-input me-2" type="radio"
                   name="area" value=""
                   {% if not selected_area %}checked{% endif %}>
            All
          </label>
        </li>
        <li><hr class="dropdown-divider"></li>
        {% for a in areas %}
        <li>
          <label class="dropdown-item d-flex align-items-center">
            <input class="form-check-input me-2" type="radio"
                   name="area" value="{{ a.t_id }}"
                   {% if selected_area == a.t_id|stringformat:"s" %}checked{% endif %}>
            {{ a.area_name }}
          </label>
        </li>
        {% endfor %}
      </ul>
    </div>

    <!-- Booker -->
    <div class="col-12 col-sm-auto dropdown">
      <button class="btn btn-outline-secondary btn-sm dropdown-toggle w-100"
              type="button" id="bookerDropdown"
              data-bs-toggle="dropdown" aria-expanded="false">
        {% if selected_booker %}
          {% for b in bookers %}
            {% if b.t_id|stringformat:"s" == selected_booker %}
              {{ b.name }}
            {% endif %}
          {% endfor %}
        {% else %}
          Booker
        {% endif %}
      </button>
      <ul class="dropdown-menu" aria-labelledby="bookerDropdown">
        <li>
          <label class="dropdown-item d-flex align-items-center">
            <input class="form-check-input me-2" type="radio"
                   name="booker" value=""
                   {% if not selected_booker %}checked{% endif %}>
            All
          </label>
        </li>
        <li><hr class="dropdown-divider"></li>
        {% for b in bookers %}
        <li>
          <label class="dropdown-item d-flex align-items-center">
            <input class="form-check-input me-2" type="radio"
                   name="booker" value="{{ b.t_id }}"
                   {% if selected_booker == b.t_id|stringformat:"s" %}checked{% endif %}>
            {{ b.name }}
          </label>
        </li>
        {% endfor %}
      </ul>
    </div>

    <!-- Filter & Export -->
    <div class="col-12 col-sm-auto">
      <button class="btn btn-primary btn-sm w-100">Filter</button>
    </div>
    <div class="col-12 col-sm-auto">
      <a href="?export=excel&{{ base_qs }}" class="btn btn-success btn-sm w-100">Export Excel</a>
    </div>
    <div class="col-12 col-sm-auto">
      <a href="?export=pdf&{{ base_qs }}"   class="btn btn-danger btn-sm w-100">Export PDF</a>
    </div>
    <div class="col-12 col-sm-auto">
      <button type="button" class="btn btn-secondary btn-sm w-100" onclick="window.print()">Print</button>
    </div>
    <div class="col-12 col-sm-auto">
      <button type="button" class="btn btn-light btn-sm w-100"
              data-bs-toggle="modal" data-bs-target="#helpModal">
        <i class="bi bi-question-circle"></i>
      </button>
    </div>

    {% if is_master %}
    <div class="col-12" id="multi-tenant-section" style="display:none">
      <label>Branches:</label>
      <select name="branches" multiple class="form-select form-select-sm">
        {% for br in branches %}
          <option value="{{ br.pos_business_id }}"
            {% if br.pos_business_id|stringformat:"s" in selected_branches %}selected{% endif %}>
            {{ br.company_name }} / {{ br.branch_name }}
          </option>
        {% endfor %}
      </select>
    </div>
    {% endif %}
  </form>

  <!-- Table -->
  <div class="table-responsive mt-3">
    <table class="table table-striped table-bordered table-sm">
      <thead class="table-light">
        <tr>
          <th>Product ID</th>
          <th>Name</th>
          <th class="text-end">Qty</th>
          <th class="text-end">Gross</th>
          <th class="text-end">Discount</th>
          <th class="text-end">Net</th>
          {% if show_profit %}<th class="text-end">Profit</th>{% endif %}
        </tr>
      </thead>
      <tbody>
        {% for row in page_obj.object_list %}
        <tr>
          <td>{{ row.product_code }}</td>
          <td>{{ row.product_name }}</td>
          <td class="text-end">{{ row.total_quantity|floatformat:2 }}</td>
          <td class="text-end">{{ row.gross_sales|floatformat:2 }}</td>
          <td class="text-end">{{ row.total_discount|floatformat:2 }}</td>
          <td class="text-end">{{ row.net_sales|floatformat:2 }}</td>
          {% if show_profit %}<td class="text-end">{{ row.profit|floatformat:2 }}</td>{% endif %}
        </tr>
        {% empty %}
        <tr><td colspan="{{ col_count }}" class="text-center">No data</td></tr>
        {% endfor %}
      </tbody>
      <tfoot class="table-active">
        <tr>
          <th colspan="2" class="text-end">Grand Total:</th>
          <th class="text-end">{{ totals.sum_qty|floatformat:2 }}</th>
          <th class="text-end">{{ totals.sum_gross|floatformat:2 }}</th>
          <th class="text-end">{{ totals.sum_disc|floatformat:2 }}</th>
          <th class="text-end">{{ totals.sum_net|floatformat:2 }}</th>
          {% if show_profit %}<th class="text-end">{{ totals.sum_profit|floatformat:2 }}</th>{% endif %}
        </tr>
      </tfoot>
    </table>
  </div>
</div>

<!-- Help Modal -->
<div class="modal fade" id="helpModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Report Help</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <p>Shows per‑product sales. Filter by date, branch, category, company, area or booker.</p>
        <p>“Show Profit” adds a Profit column ((item_price − purchase_price − discount) × quantity).</p>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block javascripts %}

<script>
  // Toggle branch selector
  document.getElementById('show-multi-btn')?.addEventListener('click', ()=>{
    const sec = document.getElementById('multi-tenant-section');
    sec.style.display = sec.style.display==='none'?'block':'none';
  });

  // Auto-close dropdown on radio select
  document.querySelectorAll('.dropdown-menu input[type=radio]').forEach(radio=>{
    radio.addEventListener('change', () => {
      const btn = radio.closest('.dropdown').querySelector('[data-bs-toggle="dropdown"]');
      bootstrap.Dropdown.getInstance(btn).hide();
    });
  });
</script>
{% endblock %}