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

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

{% block stylesheets %}
<style>
  .rpt .form-control { min-width: 160px; }
  .rpt .toolbar { display:flex; gap:.5rem; flex-wrap:wrap; }
  .rpt table thead th { background:#f2f6fc; border-color:#d0d7e2; }
  .rpt tfoot th { background:#eef3fc; font-weight:700; }
  .text-end { text-align:right; }
  .text-center { text-align:center; }
  .row-group td { background:#fff5d6; font-weight:700; }
  .row-subtotal td { background:#eef3fc; font-weight:700; }
  .pill input { display:none; }
  .pill label { border:1px solid #d0d7e2; border-radius:999px; padding:.2rem .6rem; margin-right:.25rem; cursor:pointer; font-size:.9rem; }
  .pill input:checked + label { background:#e9f2ff; border-color:#4da3ff; }
  .colbox { display:flex; flex-wrap:wrap; gap:.35rem .75rem; max-height:150px; overflow:auto; border:1px solid #e5e7eb; padding:.5rem .6rem; border-radius:.4rem; background:#fafafa; }
  .colbox .itm { white-space:nowrap; }
</style>
{% endblock %}

{% block content %}

<form method="get" class="rpt mb-3"  id="saleStockForm">

  <div class="mb-2 d-flex justify-content-between">
    <button type="button" id="btnToggleFilters" class="btn btn-sm btn-outline-secondary">
      Show / Hide Filters
    </button>
    <a href="{% url 'reports:distributor_export' %}" target="_blank" class="btn btn-sm btn-outline-warning">
      DSSR
    </a>
    <a href="{% url 'reports:sale_stock_reconcile' %}" target="_blank" class="btn btn-sm btn-outline-warning">
      Sale & Retrun Re-Concile
    </a>
    
    <a href="{% url 'reports:stock_mismatch' %}" target="_blank" class="btn btn-sm btn-outline-danger ms-1">
      Stock Mismatch
    </a>
  </div>

  <div class="card"  id="filtersPanel">
    <div class="card-body py-2 d-none" id="filtersBody">
      <div class="row align-items-end">
        <div class="col-6 col-md-2 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-6 col-md-2 mb-2">
          <label class="mb-1">To</label>
          <input type="date" name="date_to" value="{{ date_to }}" class="form-control form-control-sm">
        </div>

        <div class="col-12 col-md-4 mb-2">
          <!-- <label class="mb-1">Company</label> -->
          <select id="companies" multiple class="form-control form-control-sm"></select>
          <input type="hidden" name="company_ids" id="hid_company_ids" value="{{ company_ids|join:',' }}">
        </div>

        <div class="col-12 col-md-4 mb-2">
          <!-- <label class="mb-1">Category</label> -->
          <select id="categories" multiple class="form-control form-control-sm"></select>
          <input type="hidden" name="category_ids" id="hid_category_ids" value="{{ category_ids|join:',' }}">
        </div>

      </div>

      <div class="row align-items-center mt-2">
        <div class="col-12 col-md-5 mb-2">
          <!-- <div><small class="text-muted">Group By</small></div> -->
          <div class="pill">
            <input type="radio" id="g_none" name="group_by" value="none" {% if group_by == 'none' %}checked{% endif %}><label for="g_none">No Group</label>
            <input type="radio" id="g_company" name="group_by" value="company" {% if group_by == 'company' %}checked{% endif %}><label for="g_company">Company</label>
            <input type="radio" id="g_category" name="group_by" value="category" {% if group_by == 'category' %}checked{% endif %}><label for="g_category">Category</label>
          </div>
        </div>
        <div class="col-12 col-md-3 mb-2">
          <!-- <label class="mb-1">Search</label> -->
          <input type="text" name="q" value="{{ q }}" class="form-control form-control-sm" placeholder="Code/Name">
        </div>
        <div class="col-12 col-md-2 mb-2">
          <div class="form-check mt-4">
            <input class="form-check-input" type="checkbox" value="1" id="chkZero" name="hide_zero" {% if hide_zero %}checked{% endif %}>
            <label class="form-check-label" for="chkZero">Hide zero rows</label>
          </div>
          <div class="form-check">
            <input class="form-check-input" type="checkbox" value="1" id="chkSSR" name="ssr_on_purchase" {% if ssr_on_purchase %}checked{% endif %}>
            <label class="form-check-label" for="chkSSR">SSR on Purchase</label>
          </div>
        </div>
      </div>

      <div class="row mt-2">
        <div class="col-12">
          <div class="d-flex align-items-center mb-1">
            <small class="text-muted">Columns (toggle any):</small>
          </div>
          <div class="colbox">
            {% for k,lbl in col_choices %}
              <div class="itm">
                <label class="me-1">
                  <input type="checkbox" class="colchk" name="col" value="{{ k }}"
                         {% if k in selected_cols_list %}checked{% endif %}>
                  {{ lbl }}
                </label>
              </div>
            {% endfor %}
          </div>
          <input type="hidden" id="cols" name="cols" value="{{ selected_cols }}">
        </div>
      </div>

      <div class="row mt-2">
        <div class="col-auto">
          <button class="btn btn-primary btn-sm" type="submit">Filter</button>
        </div>
        <div class="col ml-auto">
          <div class="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 }}&group_by={{ group_by }}&company_ids={{ company_ids|join:',' }}&category_ids={{ category_ids|join:',' }}&q={{ q }}&hide_zero={% if hide_zero %}1{% else %}0{% endif %}&cols={{ selected_cols }}&ssr_on_purchase={% if ssr_on_purchase %}1{% else %}0{% endif %}">
              Excel
            </a>
            <a class="btn btn-outline-danger btn-sm"
               href="{{ url_pdf }}?date_from={{ date_from }}&date_to={{ date_to }}&group_by={{ group_by }}&company_ids={{ company_ids|join:',' }}&category_ids={{ category_ids|join:',' }}&q={{ q }}&hide_zero={% if hide_zero %}1{% else %}0{% endif %}&cols={{ selected_cols }}&ssr_on_purchase={% if ssr_on_purchase %}1{% else %}0{% endif %}">
              PDF
            </a>
          </div>
        </div>
      </div>

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

<div class="card rpt">
  <div class="card-body p-2">
    <div class="table-responsive">
      <table class="table table-bordered table-hover mb-0">
      <thead>
        <tr>
          {% for hg in header_groups %}
            <th class="text-center" colspan="{{ hg.span }}">{{ hg.label }}</th>
          {% endfor %}
        </tr>
        <tr>
          {% for c in columns %}
            <th class="{% if c.align == 'right' %}text-end{% elif c.align == 'center' %}text-center{% endif %}">
              {{ c.label }}
            </th>
          {% endfor %}
        </tr>
      </thead>

        <tbody>
          {% if render_rows %}
            {% for r in render_rows %}
              <tr class="{{ r.row_class }}">
                {% for cell in r.cells %}
                  <td class="{{ cell.class }}">{{ cell.value }}</td>
                {% 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 %}
              <th class="{{ cell.class }}">{{ cell.value }}</th>
            {% endfor %}
          </tr>
        </tfoot>

      </table>
    </div>
  </div>
</div>

{% endblock %}

{% block javascripts %}

<script>
(function(){
  // CSRF
  function getCookie(name){let c=null;document.cookie.split(';').forEach(v=>{v=v.trim();if(v.startsWith(name+'=')){c=decodeURIComponent(v.slice(name.length+1));}});return c;}
  const csrftoken = getCookie('csrftoken');

  // --- Show/Hide Filters (persist localStorage) ---
  const KEY = 'sale_stock_filters_open';
  const panel = document.getElementById('filtersBody');
  const btn = document.getElementById('btnToggleFilters');
  function setOpen(open){
    if(open){ panel.classList.remove('d-none'); localStorage.setItem(KEY,'1'); }
    else    { panel.classList.add('d-none');    localStorage.setItem(KEY,'0'); }
  }
  setOpen(localStorage.getItem(KEY)==='1');   // default hidden
  btn.addEventListener('click', function(){
    setOpen(panel.classList.contains('d-none'));
  });

  // --- Column toggles -> hidden 'cols' ---
  function rebuildCols(){
    const list = [];
    document.querySelectorAll('.colchk:checked').forEach(x=>list.push(x.value));
    document.getElementById('cols').value = list.join(',');
  }
  // init from server-side checked state
  rebuildCols();
  // listen changes + before submit
  document.querySelectorAll('.colchk').forEach(cb=>cb.addEventListener('change', rebuildCols));
  document.getElementById('saleStockForm').addEventListener('submit', function(){
    rebuildCols();
    document.getElementById('hid_company_ids').value = ($('#companies').val() || []).join(',');
    document.getElementById('hid_category_ids').value = ($('#categories').val() || []).join(',');
  });

  // --- Select2 AJAX (Companies) ---
  $('#companies').select2({
    width: '100%', multiple: true, placeholder: 'Search companies...',
    ajax: {
      url: "{% url 'products:companies_autocomplete' %}",
      type: "GET", delay: 200,
      headers: {'X-CSRFToken': csrftoken},
      data: params => ({ term: params.term || "" }),
      processResults: data => ({ results: data }) // expects [{id,text}]
    }
  });
  // Prefill selected
  const preCompanies = {{ companies_prefill|safe }};
  preCompanies.forEach(function(it){
    const opt = new Option(it.name, it.t_id, true, true);
    $('#companies').append(opt);
  });
  $('#companies').trigger('change');

  // --- Select2 AJAX (Categories) ---
  $('#categories').select2({
    width: '100%', multiple: true, placeholder: 'Search categories...',
    ajax: {
      url: "{% url 'products:categories_autocomplete' %}",
      type: "GET", delay: 200,
      headers: {'X-CSRFToken': csrftoken},
      data: params => ({ term: params.term || "" }),
      processResults: data => ({ results: data })
    }
  });
  const preCategories = {{ categories_prefill|safe }};
  preCategories.forEach(function(it){
    const opt = new Option(it.cat_name, it.t_id, true, true);
    $('#categories').append(opt);
  });
  $('#categories').trigger('change');

})();
</script>
{% endblock %}