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

{% block title %}SS-01 · Stock Issue Summary{% endblock title %}

{% block stylesheets %}

<style>
  .filter-card .card-header { font-weight:600; }
  .select2-container--bootstrap4 .select2-selection--multiple { min-height: 38px; }
  .muted { color:#6c757d; }
  .table-title { font-weight:700; margin: 12px 0 4px; }
  .totline { font-weight:600; text-align:right; }
  /* Density: visible difference */
  .dense .card, .dense table.table { font-size: 12px; }
  .dense table.table td, .dense table.table th { padding: .25rem .35rem; }
  .comfortable .card, .comfortable table.table { font-size: 14px; }
  .comfortable table.table td, .comfortable table.table th { padding: .6rem .75rem; }
  
  /* Salesman Sheet Styles */
  .salesman-header { 
    text-align: center; 
    font-size: 18px; 
    font-weight: bold; 
    margin-bottom: 10px;
  }
  .salesman-info {
    text-align: right;
    margin-bottom: 5px;
  }
  .customer-header-row {
    background-color: #e9e9e9;
    padding: 5px 10px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
  }
  .customer-address-row {
    padding: 3px 10px;
    display: flex;
    justify-content: space-between;
    font-size: 13px;
  }
  .salesman-table th {
    background-color: #d9d9d9;
    text-align: center;
    font-size: 12px;
    padding: 4px 2px;
    vertical-align: middle;
  }
  .salesman-table td {
    text-align: center;
    font-size: 12px;
    padding: 3px 2px;
    vertical-align: middle;
  }
  .salesman-table td:first-child {
    text-align: left;
  }
  .salesman-table .return-col {
    border: 2px solid #333;
    min-width: 50px;
  }
  .salesman-table .remarks-col {
    border-left: 1px solid #dee2e6;
    border-right: 1px solid #dee2e6;
  }
  .salesman-table tbody .remarks-col {
    border-top: none;
    border-bottom: none;
  }
  .salesman-table thead .remarks-col {
    border-top: 1px solid #dee2e6;
  }
  .salesman-table tfoot .remarks-col {
    border-bottom: 1px solid #dee2e6;
  }
  .salesman-total-row {
    background-color: #f5f5f5;
    font-weight: bold;
  }
  .salesman-grand-total {
    background-color: #d0d0d0;
    font-weight: bold;
  }
  .po-cell {
    border: 2px solid #333 !important;
  }
</style>
{% endblock stylesheets %}

{% block heading %}Stock Issue Summary (SS-01){% endblock heading %}

{% block content %}

<div class="row">
  <div class="col-12">
    <div class="card filter-card">
      <div class="card-header d-flex justify-content-between align-items-center">
        <span>Filters & Settings</span>
        <div class="d-flex align-items-center">
          <label class="mr-2 mb-0">PDF Page</label>
          <select id="pdf_page" class="custom-select custom-select-sm mr-2" style="width:auto;">
            <option value="A4" {% if page_size == 'A4' %}selected{% endif %}>A4</option>
            <option value="A5" {% if page_size == 'A5' %}selected{% endif %}>A5</option>
            <option value="THERMAL" {% if page_size == 'THERMAL' %}selected{% endif %}>Thermal (80mm)</option>
          </select>
          <button type="button" class="btn btn-outline-secondary btn-sm" onclick="window.print()">Print</button>
          <button type="button" class="btn btn-primary btn-sm ml-2" id="btn-pdf">Export PDF</button>
          <button type="button" class="btn btn-info btn-sm ml-2" id="btn-bulk-print">
            Bulk Invoice Print
          </button>
        </div>
      </div>
      <div class="card-body">
        <form method="get" id="filters-form">
          <!-- A) Date & Invoices -->
          <div class="form-row">
            <div class="form-group col-md-3">
              <label>Date From</label>
              <input type="date" class="form-control" name="date_from" value="{{ filters.date_from }}">
            </div>
            <div class="form-group col-md-3">
              <label>Date To</label>
              <input type="date" class="form-control" name="date_to" value="{{ filters.date_to }}">
            </div>
            <div class="form-group col-md-3">
              <label>Invoice From</label>
              <input type="text" class="form-control" name="inv_from" placeholder="e.g. 300" value="{{ filters.inv_from }}">
            </div>
            <div class="form-group col-md-3">
              <label>Invoice To</label>
              <input type="text" class="form-control" name="inv_to" placeholder="e.g. 350" value="{{ filters.inv_to }}">
            </div>
            <div class="form-group col-md-6">
              <label>Skip Invoices (comma separated)</label>
              <input type="text" class="form-control" name="skip_invoices" placeholder="320,321,322" value="{{ filters.skip_invoices }}">
            </div>
            <div class="form-group col-md-6">
              <label>Exact Invoices (override range)</label>
              <input type="text" class="form-control" name="inv_list" placeholder="401,402" value="{{ filters.inv_list }}">
            </div>
          </div>

          <hr>

          <!-- B) Parties & Geography -->
          <div class="form-row">
            <div class="form-group col-md-4">
              <label>Customers</label>
              <select id="customers" name="customers" multiple></select>
            </div>
            <div class="form-group col-md-4">
              <label>Areas</label>
              <select id="areas" name="areas" multiple></select>
            </div>
            <div class="form-group col-md-4">
              <label>Bookers</label>
              <select id="bookers" name="bookers" multiple></select>
            </div>
          </div>

          <!-- C) Product & Catalog -->
          <div class="form-row">
            <div class="form-group col-md-4">
              <label>Companies</label>
              <select id="companies" name="companies" multiple></select>
            </div>
            <div class="form-group col-md-4">
              <label>Categories</label>
              <select id="categories" name="categories" multiple></select>
            </div>
            <div class="form-group col-md-4">
              <label>Products</label>
              <select id="products" name="products" multiple></select>
            </div>
          </div>

          <!-- D) Grouping & Options -->
          <div class="form-row">
            <div class="form-group col-md-6">
              <label>Grouping</label><br>
              <div class="custom-control custom-radio custom-control-inline">
                <input type="radio" id="gm_none" name="group_mode" value="none" class="custom-control-input" {% if group_mode == 'none' %}checked{% endif %}>
                <label class="custom-control-label" for="gm_none">None</label>
              </div>
              <div class="custom-control custom-radio custom-control-inline">
                <input type="radio" id="gm_company" name="group_mode" value="company" class="custom-control-input" {% if group_mode == 'company' %}checked{% endif %}>
                <label class="custom-control-label" for="gm_company">Company (multi-table)</label>
              </div>
              <div class="custom-control custom-radio custom-control-inline">
                <input type="radio" id="gm_category" name="group_mode" value="category" class="custom-control-input" {% if group_mode == 'category' %}checked{% endif %}>
                <label class="custom-control-label" for="gm_category">Category (multi-table)</label>
              </div>
              <div class="custom-control custom-radio custom-control-inline">
                <input type="radio" id="gm_abc" name="group_mode" value="abc" class="custom-control-input" {% if group_mode == 'abc' %}checked{% endif %}>
                <label class="custom-control-label" for="gm_abc">Area → Booker → Customer</label>
              </div>
            </div>

            <div class="form-group col-md-6">
              <label>Options</label><br>
              
              <!-- Show Load Sheet checkbox -->
              <!-- Show Load Sheet checkbox -->
              <div class="custom-control custom-checkbox custom-control-inline">
                <input type="checkbox" class="custom-control-input" id="opt_load_sheet" value="1" {% if show_load_sheet %}checked{% endif %}>
                <input type="hidden" name="show_load_sheet" id="show_load_sheet_hidden" value="{% if show_load_sheet %}1{% else %}0{% endif %}">
                <label class="custom-control-label" for="opt_load_sheet"><strong>Show Load Sheet</strong></label>
              </div>
              
              <div class="custom-control custom-checkbox custom-control-inline">
                <input type="checkbox" class="custom-control-input" id="opt_bonus" name="include_bonus" value="1" {% if include_bonus %}checked{% endif %}>
                <label class="custom-control-label" for="opt_bonus">Include Bonus</label>
              </div>
              <div class="custom-control custom-checkbox custom-control-inline">
                <input type="checkbox" class="custom-control-input" id="opt_ret_n" name="include_returns_normal" value="1" {% if include_ret_normal %}checked{% endif %}>
                <label class="custom-control-label" for="opt_ret_n">Include Return (Normal)</label>
              </div>
              <div class="custom-control custom-checkbox custom-control-inline">
                <input type="checkbox" class="custom-control-input" id="opt_ret_e" name="include_returns_expiry" value="1" {% if include_ret_expiry %}checked{% endif %}>
                <label class="custom-control-label" for="opt_ret_e">Include Return (Expiry/Damage)</label>
              </div>
              <div class="custom-control custom-checkbox custom-control-inline">
                <input type="checkbox" class="custom-control-input" id="opt_amount" name="show_amounts" value="1" {% if show_amounts %}checked{% endif %}>
                <label class="custom-control-label" for="opt_amount">Show Amounts</label>
              </div>
              <div class="custom-control custom-checkbox custom-control-inline">
                <input type="checkbox" class="custom-control-input" id="opt_weight" name="show_weight" value="1" {% if show_weight %}checked{% endif %}>
                <label class="custom-control-label" for="opt_weight">Show Weight (Tons)</label>
              </div>
              <div class="custom-control custom-checkbox custom-control-inline">
                <input type="checkbox" class="custom-control-input" id="opt_show_invs" name="show_invoices" value="1" {% if show_invoices %}checked{% endif %}>
                <label class="custom-control-label" for="opt_show_invs">Show Invoices Tables</label>
              </div>
              <div class="custom-control custom-checkbox custom-control-inline">
                <input type="checkbox" class="custom-control-input" id="opt_remarks" name="show_remarks_col" value="1" {% if show_remarks_col %}checked{% endif %}>
                <label class="custom-control-label" for="opt_remarks">Show Remarks Column</label>
              </div>
              <div class="custom-control custom-checkbox custom-control-inline">
                <input type="checkbox" class="custom-control-input" id="opt_salesman" name="show_salesman_sheet" value="1" {% if show_salesman_sheet %}checked{% endif %}>
                <label class="custom-control-label" for="opt_salesman">Show Salesman Sheet</label>
              </div>
              <div class="custom-control custom-radio custom-control-inline mt-2">
                <input type="radio" class="custom-control-input" id="dens_c" name="density" value="comfortable" {% if row_density != 'compact' %}checked{% endif %}>
                <label class="custom-control-label" for="dens_c">Comfortable</label>
              </div>
              <div class="custom-control custom-radio custom-control-inline">
                <input type="radio" class="custom-control-input" id="dens_d" name="density" value="compact" {% if row_density == 'compact' %}checked{% endif %}>
                <label class="custom-control-label" for="dens_d">Compact</label>
              </div>
            </div>
          </div>

          <div class="d-flex justify-content-end">
            <button class="btn btn-secondary mr-2" type="button" id="clear-filters">Clear</button>
            <button class="btn btn-primary" type="submit">Apply</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<div class="row {% if row_density == 'compact' %}dense{% else %}comfortable{% endif %}">
  <div class="col-12">
    <div class="mb-2 muted">
      Salesman/Delivery Person: — &nbsp; | &nbsp; Generated: {{ generated_at }}
    </div>

    <!-- LOAD SHEET - Only show if show_load_sheet is True -->
    {% if show_load_sheet %}
      {% if group_mode != 'abc' %}
        {% for gk, rows in groups.items %}
          <div class="table-title">{{ gk }}</div>
          <div class="card">
            <div class="card-body table-responsive p-0">
              <table class="table table-hover table-striped">
                <thead class="thead-light">
                  <tr>
                    <th>Product</th>
                    <th class="text-right">Pack</th>
                    <th class="text-right">Ctn Qty</th>
                    <th class="text-right">Pcs Qty</th>
                    <th class="text-right">Total Pcs Issued</th>
                    {% if include_bonus %}
                      <th class="text-right">Bonus (PCS)</th>
                    {% endif %}
                    {% if include_ret_normal %}
                      <th class="text-right">Return (Normal) CTN</th>
                      <th class="text-right">Return (Normal) PCS</th>
                    {% endif %}
                    {% if include_ret_expiry %}
                      <th class="text-right">Return (Expiry) CTN</th>
                      <th class="text-right">Return (Expiry) PCS</th>
                    {% endif %}
                    {% if show_amounts %}
                      <th class="text-right">Amount</th>
                    {% endif %}
                  </tr>
                </thead>
                <tbody>
                {% for r in rows %}
                  <tr>
                    <td>{{ r.product_name }} <span class="muted">[{{ r.product_code }}]</span></td>
                    <td class="text-right">{{ r.pack }}</td>
                    <td class="text-right">{{ r.issued_ctn }}</td>
                    <td class="text-right">{{ r.issued_pcs }}</td>
                    <td class="text-right">{{ r.total_pcs_issued }}</td>
                    {% if include_bonus %}
                      <td class="text-right">{{ r.bonus_pcs }}</td>
                    {% endif %}
                    {% if include_ret_normal %}
                      <td class="text-right">{{ r.ret_norm_ctn }}</td>
                      <td class="text-right">{{ r.ret_norm_pcs }}</td>
                    {% endif %}
                    {% if include_ret_expiry %}
                      <td class="text-right">{{ r.ret_exp_ctn }}</td>
                      <td class="text-right">{{ r.ret_exp_pcs }}</td>
                    {% endif %}
                    {% if show_amounts %}
                      <td class="text-right">{{ r.amount|floatformat:2 }}</td>
                    {% endif %}
                  </tr>
                {% endfor %}
                </tbody>
                <tfoot>
                  {% with tot=group_totals|get_item:gk %}
                  <tr class="font-weight-bold">
                    <td class="text-right">Totals:</td>
                    <td></td>
                    <td class="text-right">{{ tot.issued_ctn }}</td>
                    <td class="text-right">{{ tot.issued_pcs }}</td>
                    <td class="text-right">{{ tot.total_pcs_issued }}</td>
                    {% if include_bonus %}
                      <td class="text-right">{{ tot.bonus_pcs }}</td>
                    {% endif %}
                    {% if include_ret_normal %}
                      <td class="text-right">{{ tot.ret_norm_ctn }}</td>
                      <td class="text-right">{{ tot.ret_norm_pcs }}</td>
                    {% endif %}
                    {% if include_ret_expiry %}
                      <td class="text-right">{{ tot.ret_exp_ctn }}</td>
                      <td class="text-right">{{ tot.ret_exp_pcs }}</td>
                    {% endif %}
                    {% if show_amounts %}
                      <td class="text-right">{{ tot.amount|floatformat:2 }}</td>
                    {% endif %}
                  </tr>
                  {% endwith %}
                </tfoot>
              </table>
            </div>
          </div>
        {% empty %}
          <div class="alert alert-info">No records found for selected filters.</div>
        {% endfor %}
      {% else %}
        {% for area in abc_groups %}
          <div class="table-title">{{ area.title }} <span class="muted">(Subtotal: {{ area.totals.issued_ctn }} CTN, {{ area.totals.issued_pcs }} PCS)</span></div>
          {% for bok in area.bookers %}
            <div class="muted mb-1">{{ bok.title }} — Subtotal: {{ bok.totals.issued_ctn }} CTN, {{ bok.totals.issued_pcs }} PCS</div>
            {% for cu in bok.customers %}
              <div class="card mb-3">
                <div class="card-header">{{ cu.title }} — Total: {{ cu.totals.issued_ctn }} CTN, {{ cu.totals.issued_pcs }} PCS</div>
                <div class="card-body table-responsive p-0">
                  <table class="table table-hover table-striped">
                    <thead class="thead-light">
                      <tr>
                        <th>Product</th>
                        <th class="text-right">Pack</th>
                        <th class="text-right">Ctn Qty</th>
                        <th class="text-right">Pcs Qty</th>
                        <th class="text-right">Total Pcs Issued</th>
                      </tr>
                    </thead>
                    <tbody>
                      {% for r in cu.rows %}
                      <tr>
                        <td>{{ r.product_name }} <span class="muted">[{{ r.product_code }}]</span></td>
                        <td class="text-right">{{ r.pack }}</td>
                        <td class="text-right">{{ r.issued_ctn }}</td>
                        <td class="text-right">{{ r.issued_pcs }}</td>
                        <td class="text-right">{{ r.total_pcs_issued }}</td>
                      </tr>
                      {% endfor %}
                    </tbody>
                  </table>
                </div>
              </div>
            {% endfor %}
          {% endfor %}
        {% empty %}
          <div class="alert alert-info">No records found for selected filters.</div>
        {% endfor %}
      {% endif %}
    {% else %}
      <div class="alert alert-warning">Load Sheet is hidden. Check "Show Load Sheet" to display product summary.</div>
    {% endif %}

    <div class="mt-2 text-muted">
      Total Bills: {{ total_bills }}
    </div>

    {% if show_invoices and invoices %}
    <div class="table-title">Invoices</div>
    <div class="card">
      <div class="card-body table-responsive p-0">
        <table class="table table-hover table-striped">
          <thead class="thead-light">
            <tr>
              <th>Invoice #</th>
              <th>Customer</th>
              <th class="text-right">Date</th>
              <th class="text-right">Amount</th>
              <th>Area</th>
              <th>Booker</th>
              {% if show_remarks_col %}
                <th>Remarks</th>
              {% endif %}
            </tr>
          </thead>
          <tbody>
            {% for it in invoices %}
            <tr>
              <td>{{ it.inv }}</td>
              <td>{{ it.customer }}</td>
              <td class="text-right">{{ it.date }}</td>
              <td class="text-right">{{ it.amount|floatformat:2 }}</td>
              <td>{{ it.area }}</td>
              <td>{{ it.booker }}</td>
              {% if show_remarks_col %}<td></td>{% endif %}
            </tr>
            {% endfor %}
          </tbody>
          <tfoot>
            <tr class="font-weight-bold">
              <td></td><td>Total</td><td></td>
              <td class="text-right">{{ invoices_amount_total|floatformat:2 }}</td>
              <td></td><td></td>
              {% if show_remarks_col %}<td></td>{% endif %}
            </tr>
          </tfoot>
        </table>
      </div>
    </div>
    {% endif %}

    <!-- SALESMAN SHEET - NO BOX COLUMN -->
    {% if show_salesman_sheet and salesman_blocks %}
      <div class="table-title">Cash Memo Saleman Copy</div>
      
      <!-- Header Info -->
      <div class="salesman-info">
        <strong>Booker / Saleman :</strong> {{ salesman_header_booker|default:"—" }} &nbsp;&nbsp;&nbsp;&nbsp;
        <strong>Route :</strong> {{ salesman_header_route|default:"—" }}
      </div>
      
      {% for blk in salesman_blocks %}
        <div class="card mb-3">
          <!-- Customer Header -->
          <div class="customer-header-row">
            <span>T{{ blk.customer_id }}-{{ blk.invoice_no }} / {{ blk.customer_name }}</span>
            <span>Bill No : {{ blk.bill_no }}</span>
          </div>
          <div class="customer-address-row">
            <span>/ {{ blk.customer_address }}</span>
            <span>Order / Delv Date : {{ blk.order_date }} / {{ blk.delv_date }}</span>
          </div>
          
          <div class="card-body table-responsive p-0">
            <table class="table table-bordered salesman-table mb-0">
              <thead>
                <tr>
                  <th rowspan="2" style="width: 24%;">Product Code / Description</th>
                  <th rowspan="2" style="width: 5%;">CTN<br>Size</th>
                  <th colspan="2" style="width: 10%;">Sale Qty</th>
                  <th rowspan="2" style="width: 7%;">Return<br>Qty</th>
                  <th rowspan="2" style="width: 8%;">Trade<br>Price</th>
                  <th rowspan="2" style="width: 10%;">Gross<br>Amount</th>
                  <th rowspan="2" style="width: 8%;">Trade<br>Offer</th>
                  <th rowspan="2" style="width: 7%;">Disc</th>
                  <th rowspan="2" style="width: 9%;">Net<br>Amount</th>
                  <th rowspan="2" style="width: 12%;" class="remarks-col">Remarks</th>
                </tr>
                <tr>
                  <th>Ctns</th>
                  <th>Pcs</th>
                </tr>
              </thead>
              <tbody>
                {% for r in blk.rows %}
                <tr>
                  <td style="text-align: left;">{{ r.product }}</td>
                  <td>{{ r.ctn_size }}</td>
                  <td>{{ r.ctns }}</td>
                  <td>{% if r.pcs %}{{ r.pcs }}{% else %}0{% endif %}</td>
                  <td class="return-col"></td>
                  <td class="text-right">{{ r.trade_price|floatformat:0 }}</td>
                  <td class="text-right">{{ r.gross_amount|floatformat:0 }}</td>
                  <td class="text-right">{% if r.trade_offer %}{{ r.trade_offer|floatformat:0 }}{% endif %}</td>
                  <td class="text-right">{% if r.disc %}{{ r.disc|floatformat:1 }}{% endif %}</td>
                  <td class="text-right">{{ r.net_amount|floatformat:0 }}</td>
                  <td class="remarks-col"></td>
                </tr>
                {% endfor %}
              </tbody>
              <tfoot>
                <tr class="salesman-total-row">
                  <td style="text-align: left;"><strong>Total</strong></td>
                  <td></td>
                  <td><strong>{{ blk.totals.ctns }}</strong></td>
                  <td><strong>{% if blk.totals.pcs %}{{ blk.totals.pcs }}{% else %}0{% endif %}</strong></td>
                  <td colspan="2" class="po-cell"><strong>{% if blk.po %}P/O: {{ blk.po|floatformat:0 }}{% endif %}</strong></td>
                  <td class="text-right"><strong>{{ blk.totals.gross_amount|floatformat:0 }}</strong></td>
                  <td class="text-right"><strong>{% if blk.totals.trade_offer %}{{ blk.totals.trade_offer|floatformat:0 }}{% endif %}</strong></td>
                  <td class="text-right"><strong>{% if blk.totals.disc %}{{ blk.totals.disc|floatformat:1 }}{% endif %}</strong></td>
                  <td class="text-right"><strong>{{ blk.totals.net_amount|floatformat:0 }}</strong></td>
                  <td class="remarks-col"></td>
                </tr>
              </tfoot>
            </table>
          </div>
        </div>
      {% endfor %}
      
      <!-- Grand Total -->
      {% if salesman_grand_totals %}
      <div class="card">
        <div class="card-body p-0">
          <table class="table table-bordered salesman-table mb-0">
            <tbody>
              <tr class="salesman-grand-total">
                <td style="text-align: left; width: 24%;"><strong>Grand Total</strong></td>
                <td style="width: 5%;"></td>
                <td style="width: 5%;"><strong>{{ salesman_grand_totals.ctns }}</strong></td>
                <td style="width: 5%;"><strong>{{ salesman_grand_totals.pcs }}</strong></td>
                <td colspan="2" style="width: 15%;"></td>
                <td style="width: 10%;" class="text-right"><strong>{{ salesman_grand_totals.gross_amount|floatformat:0 }}</strong></td>
                <td style="width: 8%;" class="text-right"><strong>{{ salesman_grand_totals.trade_offer|floatformat:0 }}</strong></td>
                <td style="width: 7%;" class="text-right"><strong>{{ salesman_grand_totals.disc|floatformat:0 }}</strong></td>
                <td style="width: 9%;" class="text-right"><strong>{{ salesman_grand_totals.net_amount|floatformat:0 }}</strong></td>
                <td style="width: 12%;" class="remarks-col"></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      {% endif %}
    {% endif %}
  </div>
</div>

{% endblock content %}

{% block javascripts %}

<script>
$(function(){
  // Invoice list (comma-separated) from backend
  const invoiceCsv = "{{ invoice_numbers_csv|default:'' }}";
  const tplId = "{{ bulk_invoice_tpl_id|default:'a1'|escapejs }}";

  // Bulk Invoice Print
  $("#btn-bulk-print").on("click", function(){
    if (!invoiceCsv) {
      alert("No invoices found for current filters.");
      return;
    }

    const encInv = invoiceCsv;
    const url = `/invoices/invoice-templates/${tplId}/${encInv}/sale/`;
    window.open(url, "_blank");
  });
});

function getQueryList(name){
  const url = new URL(window.location.href);
  const allVals = url.searchParams.getAll(name);
  if (!allVals.length) return [];

  const out = [];
  allVals.forEach(function(v){
    if (!v) return;
    v.split(',').forEach(function(part){
      const t = part.trim();
      if (t) out.push(t);
    });
  });

  return Array.from(new Set(out));
}

function setSelect2($el, url, selectedList, placeholder){
  $el.select2({
    theme: 'bootstrap4',
    placeholder: placeholder || 'Select...',
    allowClear: true,
    width: '100%',
    ajax:{
      delay: 300,
      url: url,
      data: function(params){
        const u = new URL(window.location.href);
        return {
          q: params.term || '',
          date_from: u.searchParams.get('date_from') || '',
          date_to: u.searchParams.get('date_to') || '',
          inv_from: u.searchParams.get('inv_from') || '',
          inv_to: u.searchParams.get('inv_to') || '',
          skip_invoices: u.searchParams.get('skip_invoices') || '',
          inv_list: u.searchParams.get('inv_list') || ''
        };
      },
      cache: true
    }
  });
  if(selectedList.length){
    $.ajax({url: url, data:{q:''}}).done(function(resp){
      const map = {};
      (resp.results || []).forEach(x=>map[String(x.id)] = x.text);
      selectedList.forEach(id=>{
        const txt = map[String(id)] || String(id);
        const option = new Option(txt, id, true, true);
        $el.append(option).trigger('change');
      });
    });
  }
}

$(function(){
  setSelect2($("#customers"), "{% url 'sales:options_customers' %}", getQueryList('customers'), ' ');
  setSelect2($("#areas"), "{% url 'sales:options_areas' %}", getQueryList('areas'), ' ');
  setSelect2($("#bookers"), "{% url 'sales:options_bookers' %}", getQueryList('bookers'), ' ');
  setSelect2($("#companies"), "{% url 'sales:options_companies' %}", getQueryList('companies'), ' ');
  setSelect2($("#categories"), "{% url 'sales:options_categories' %}", getQueryList('categories'), ' ');
  setSelect2($("#products"), "{% url 'sales:options_products' %}", getQueryList('products'), ' ');
  // Sync hidden field with checkbox
    $("#opt_load_sheet").on("change", function(){
      $("#show_load_sheet_hidden").val(this.checked ? "1" : "0");
    });
  // Form submit -> server-side compression
  $("#filters-form").on("submit", function(){
      function compress(id, name){
        const vals = $(id).val() || [];
        $(this).find("input[name='"+name+"']").remove();
        $('<input>').attr({type:'hidden', name:name, value: vals.join(',')}).appendTo(this);
      }
      compress.call(this, "#customers", "customers");
      compress.call(this, "#areas", "areas");
      compress.call(this, "#bookers", "bookers");
      compress.call(this, "#companies", "companies");
      compress.call(this, "#categories", "categories");
      compress.call(this, "#products", "products");
      
  });

  $("#clear-filters").on("click", function(){
    window.location = "{% url 'sales:ss01' %}";
  });

  // PDF handler with show_load_sheet support
  $("#btn-pdf").on("click", function(){
    const form = document.getElementById('filters-form');
    const fd = new FormData(form);

    // Compression logic
    function compress(selectId, name){
      const vals = $(selectId).val() || [];
      fd.delete(name);
      if (vals.length){
        fd.append(name, vals.join(','));
      }
    }

    compress("#customers", "customers");
    compress("#areas", "areas");
    compress("#bookers", "bookers");
    compress("#companies", "companies");
    compress("#categories", "categories");
    compress("#products", "products");

    // Page param
    fd.delete('page');
    fd.append('page', document.getElementById('pdf_page').value);
    
    // Handle show_load_sheet checkbox
    // Handle show_load_sheet - use hidden field value
    fd.delete('show_load_sheet');
    fd.append('show_load_sheet', document.getElementById('show_load_sheet_hidden').value);

    // Build query string
    const params = new URLSearchParams();
    for (const [k, v] of fd.entries()){
      params.append(k, v);
    }

    window.open("{% url 'sales:ss01_pdf' %}?"+params.toString(), "_blank");
  });
});
</script>
{% endblock javascripts %}