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

{% block title %}Inventory Report{% endblock title %}

{% block stylesheets %}
<style>
:root{
  --inv-primary:#2f6feb;
  --inv-primary-dark:#1d4fc4;
  --inv-border:#e6e9f0;
  --inv-bg-soft:#f7f9fc;
  --inv-text:#1f2937;
  --inv-muted:#8a94a6;
  --inv-radius:14px;
}

/* ================= SUMMARY (moved to top) ================= */
.inv-summary-card{
  background:linear-gradient(135deg,#ffffff 0%,#f5f8ff 100%);
  border:1px solid var(--inv-border);
  border-radius:var(--inv-radius);
  padding:20px 22px 16px;
  margin-bottom:18px;
  box-shadow:0 2px 10px rgba(30,41,59,.05);
}
.inv-summary-card h6{
  display:flex;align-items:center;gap:8px;
  font-weight:700;letter-spacing:.4px;color:var(--inv-text);
  margin-bottom:16px;font-size:13px;text-transform:uppercase;
}
.inv-summary-card h6 i{color:var(--inv-primary)}
.inv-metric{
  background:#fff;border:1px solid var(--inv-border);border-radius:12px;
  padding:14px 16px;height:100%;position:relative;overflow:hidden;
  transition:.15s ease;
}
.inv-metric:hover{box-shadow:0 4px 14px rgba(30,41,59,.08);transform:translateY(-1px)}
.inv-metric::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--inv-primary)}
.inv-metric.metric-sale::before{background:#12793d}
.inv-metric.metric-profit::before{background:#8a3ffc}
.inv-metric.metric-items::before{background:#f59e0b}
.inv-metric.metric-units::before{background:#0891b2}
.inv-metric.metric-weight::before{background:#64748b}
.inv-metric .label{font-size:10.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--inv-muted);font-weight:700;margin-bottom:4px}
.inv-metric .value{font-size:19px;font-weight:800;color:var(--inv-text);white-space:nowrap}
.inv-metric .value.positive{color:#12793d}
.inv-metric .value.negative{color:#c22a2a}

/* ================= FILTER PANEL ================= */
.inv-filter-panel{
  background:#fff;border:1px solid var(--inv-border);border-radius:var(--inv-radius);
  padding:18px 20px 16px;margin-bottom:18px;box-shadow:0 1px 4px rgba(30,41,59,.04);
}
.inv-filter-panel .panel-title{
  font-size:12.5px;font-weight:700;color:var(--inv-text);text-transform:uppercase;
  letter-spacing:.4px;margin-bottom:14px;display:flex;align-items:center;gap:8px;
}
.inv-filter-panel .panel-title i{color:var(--inv-primary)}

.stock-toggle-group{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px;padding-bottom:16px;border-bottom:1px dashed var(--inv-border)}
.stock-toggle{
  display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;
  background:var(--inv-bg-soft);border:1.5px solid var(--inv-border);border-radius:22px;
  padding:7px 14px;cursor:pointer;transition:.15s ease;user-select:none;color:#475569;
}
.stock-toggle:hover{border-color:#c7d7fb;background:#eef3ff}
.stock-toggle input{accent-color:var(--inv-primary);cursor:pointer;width:15px;height:15px;margin:0}
.stock-toggle.active{background:#eaf1ff;border-color:var(--inv-primary);color:var(--inv-primary)}
.stock-toggle--zero.active{background:#fff8e6;border-color:#e0b400;color:#8a6d00}
.stock-toggle--neg.active{background:#fdecec;border-color:#e05252;color:#a12626}
.stock-toggle--avg.active{background:#eef7ee;border-color:#3ba55c;color:#1e7d3a}

.filter-fields-row{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end}
.filter-field{display:flex;flex-direction:column;gap:6px;min-width:150px;flex:1 1 150px}
.filter-field.field-wide{flex:1 1 190px}
.filter-field.field-date{flex:0 1 170px;min-width:170px}
.filter-field-label{
  display:flex;align-items:center;justify-content:space-between;
  font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--inv-muted);
}
.field-switch{width:30px;height:16px;position:relative;display:inline-block;flex:0 0 auto}
.field-switch input{opacity:0;width:0;height:0;position:absolute}
.field-switch .slider{position:absolute;inset:0;background:#d7dde6;border-radius:20px;transition:.15s;cursor:pointer}
.field-switch .slider::before{content:'';position:absolute;height:12px;width:12px;left:2px;top:2px;background:#fff;border-radius:50%;transition:.15s;box-shadow:0 1px 2px rgba(0,0,0,.3)}
.field-switch input:checked + .slider{background:var(--inv-primary)}
.field-switch input:checked + .slider::before{transform:translateX(14px)}

.filter-field .form-control{border:1.5px solid var(--inv-border);border-radius:9px;font-size:13px;height:36px;transition:.15s ease;width:100%}
.filter-field .form-control:focus{border-color:var(--inv-primary);box-shadow:0 0 0 3px rgba(47,111,235,.12)}
.filter-field .select2-container .select2-selection--single{height:36px;border:1.5px solid var(--inv-border);border-radius:9px}
.filter-field .select2-container--default .select2-selection--single .select2-selection__rendered{line-height:34px;font-size:13px}
.filter-field .select2-container--default .select2-selection--single .select2-selection__arrow{height:34px}

.btn-inv-search{
  background:var(--inv-primary);border:none;color:#fff;font-weight:600;font-size:13px;
  border-radius:9px;padding:0 22px;height:36px;display:flex;align-items:center;gap:6px;
  transition:.15s ease;white-space:nowrap;
}
.btn-inv-search:hover{background:var(--inv-primary-dark);color:#fff}

/* ================= TOOLBAR + TABLE ================= */
.inv-toolbar{display:flex;gap:10px;margin-bottom:14px}
.inv-toolbar .btn{border-radius:9px;font-weight:600;font-size:13px}

.inv-table-card{background:#fff;border:1px solid var(--inv-border);border-radius:var(--inv-radius);padding:6px;box-shadow:0 1px 4px rgba(30,41,59,.04);overflow:hidden}
#reportTable{margin-bottom:0}
#reportTable thead th{background:#1f2937;color:#fff;font-size:11px;text-transform:uppercase;letter-spacing:.4px;font-weight:600;border-color:#1f2937;white-space:nowrap}
#reportTable tfoot td{background:var(--inv-bg-soft);font-weight:700}
#reportTable tbody td{font-size:13px;vertical-align:middle}
.icon-btn{margin-left:4px}

/* ================= COLUMN VISIBILITY TOGGLES ================= */
.col-toggle-pill{background:var(--inv-bg-soft)}
.col-toggle-pill.active{background:#eaf1ff;border-color:var(--inv-primary);color:var(--inv-primary)}
.col-toggle-pill span{font-weight:600}

/* ================= COLLAPSIBLE SECTION TOGGLE BAR ================= */
.inv-toggle-bar{display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.inv-toggle-btn{
  display:flex;align-items:center;gap:8px;background:#fff;border:1.5px solid var(--inv-border);
  border-radius:10px;padding:8px 16px;font-size:13px;font-weight:600;color:#475569;
  cursor:pointer;transition:.15s ease;box-shadow:0 1px 3px rgba(30,41,59,.04);
}
.inv-toggle-btn:hover{border-color:#c7d7fb;background:#f5f8ff}
.inv-toggle-btn.open{background:var(--inv-primary);border-color:var(--inv-primary);color:#fff}
.inv-toggle-btn .toggle-caret{transition:transform .18s ease;font-size:11px}
.inv-toggle-btn.open .toggle-caret{transform:rotate(180deg)}
.inv-collapsible{display:none}
.inv-bare-icon{
  font-size:20px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:9px;transition:.15s ease;
}
.inv-bare-icon--excel{color:#1e7d3a}
.inv-bare-icon--excel:hover{background:#eaf7ee;color:#12793d}
.inv-bare-icon--pdf{color:#c22a2a}
.inv-bare-icon--pdf:hover{background:#fdecec;color:#a12626}
</style>
{% endblock %}

{% block content %}

<!-- ========================================================
     INVESTMENT / PROFIT SUMMARY  (moved to the top)
     ======================================================== -->
<div class="inv-summary-card">
  <h6><i class="fas fa-chart-pie"></i> Current Stock Summary</h6>
  <div class="row">
    <div class="col-6 col-md-2 mb-2"><div class="inv-metric">
      <div class="label">Investment By Purchase</div><div class="value" id="sumPurchaseInv">-</div></div></div>
    <div class="col-6 col-md-2 mb-2"><div class="inv-metric metric-sale">
      <div class="label">Investment By Sale</div><div class="value" id="sumSaleInv">-</div></div></div>
    <div class="col-6 col-md-2 mb-2"><div class="inv-metric metric-profit">
      <div class="label">Profit Margin</div><div class="value" id="sumProfitMargin">-</div></div></div>
    <div class="col-6 col-md-2 mb-2"><div class="inv-metric metric-items">
      <div class="label">Total No. of Items</div><div class="value" id="sumTotalItems">-</div></div></div>
    <div class="col-6 col-md-2 mb-2"><div class="inv-metric metric-units">
      <div class="label">Total Units</div><div class="value" id="sumTotalUnits">-</div></div></div>
    {% if show_weight %}
    <div class="col-6 col-md-2 mb-2"><div class="inv-metric metric-weight">
      <div class="label">Total Weight (Tons)</div><div class="value" id="sumTotalWeight">-</div></div></div>
    {% endif %}
  </div>
</div>

<!-- ========================================================
     SECTION TOGGLES (Filters / Table Columns — hidden by default)
     ======================================================== -->
<div class="inv-toggle-bar">
  <button type="button" class="inv-toggle-btn" id="btnToggleFilters" data-target="#invFiltersPanel">
    <i class="fas fa-sliders-h"></i> Filters <i class="fas fa-chevron-down toggle-caret"></i>
  </button>
  <button type="button" class="inv-toggle-btn" id="btnToggleColumns" data-target="#invColumnsPanel">
    <i class="fas fa-columns"></i> Table Columns <i class="fas fa-chevron-down toggle-caret"></i>
  </button>
  <i class="fas fa-file-excel inv-bare-icon inv-bare-icon--excel" data-toggle="modal" data-target="#invExcelModal" title="Export Excel"></i>
  <i class="fas fa-file-pdf inv-bare-icon inv-bare-icon--pdf" data-toggle="modal" data-target="#invPdfModal" title="Export PDF"></i>
</div>

<!-- ========================================================
     FILTERS
     ======================================================== -->
<div class="inv-filter-panel inv-collapsible" id="invFiltersPanel">
  <div class="panel-title"><i class="fas fa-sliders-h"></i> Filters</div>

  <form method="get" id="invFilterForm">

    <!-- Row 1: stock visibility + compute avg + as-of -->
    <div class="stock-toggle-group">
      <label class="stock-toggle" id="lblShowAll">
        <input type="checkbox" name="show_all" id="show_all" {% if params.show_all %}checked{% endif %}>
        <span>Show All Products</span>
      </label>
      <label class="stock-toggle stock-toggle--zero" id="lblZeroStock">
        <input type="checkbox" name="zero_stock" id="zero_stock" {% if params.zero_stock %}checked{% endif %}>
        <span>Show Zero Stock Items</span>
      </label>
      <label class="stock-toggle stock-toggle--neg" id="lblNegStock">
        <input type="checkbox" name="negative_stock" id="negative_stock" {% if params.negative_stock %}checked{% endif %}>
        <span>Show Negative Stock</span>
      </label>
      <label class="stock-toggle stock-toggle--avg" id="lblComputeAvg">
        <input type="checkbox" name="compute_avg" id="compute_avg" {% if params.compute_avg %}checked{% endif %}>
        <span>Compute Average Investment</span>
      </label>
      <label class="stock-toggle" id="lblAsOf">
        <input type="checkbox" name="use_as_of" id="use_as_of" {% if params.use_as_of %}checked{% endif %}>
        <span>As-of Date</span>
      </label>
      <input type="date" name="as_of" id="as_of" class="form-control form-control-sm"
             value="{{ params.as_of|date:'Y-m-d' }}" style="width:160px;height:34px;border-radius:20px;">
    </div>

    <!-- Row 2: search fields -->
    <div class="filter-fields-row">

      <div class="filter-field">
        <label class="filter-field-label">
          <span>Product Code</span>
          <span class="field-switch">
            <input type="checkbox" name="filter_code" id="filter_code" {% if params.filter_code %}checked{% endif %}>
            <span class="slider"></span>
          </span>
        </label>
        <input type="text" name="product_code" class="form-control" placeholder="e.g. PRD-1024" value="{{ params.product_code }}">
      </div>

      <div class="filter-field field-wide">
        <label class="filter-field-label">
          <span>Product Name</span>
          <span class="field-switch">
            <input type="checkbox" name="filter_name" id="filter_name" {% if params.filter_name %}checked{% endif %}>
            <span class="slider"></span>
          </span>
        </label>
        <select id="product_name" name="product_name" class="form-control" style="width:100%;"></select>
      </div>

      <div class="filter-field">
        <label class="filter-field-label">
          <span>Company</span>
          <span class="field-switch">
            <input type="checkbox" name="filter_company" id="filter_company" {% if params.filter_company %}checked{% endif %}>
            <span class="slider"></span>
          </span>
        </label>
        <select name="company" class="form-control">
          <option value="">-- Company --</option>
          {% for c in companies %}
            <option value="{{ c }}" {% if params.company == c %}selected{% endif %}>{{ c }}</option>
          {% endfor %}
        </select>
      </div>

      <div class="filter-field">
        <label class="filter-field-label">
          <span>Category</span>
          <span class="field-switch">
            <input type="checkbox" name="filter_category" id="filter_category" {% if params.filter_category %}checked{% endif %}>
            <span class="slider"></span>
          </span>
        </label>
        <select name="category" class="form-control">
          <option value="">-- Category --</option>
          {% for c in categories %}
            <option value="{{ c }}" {% if params.category == c %}selected{% endif %}>{{ c }}</option>
          {% endfor %}
        </select>
      </div>

      <div class="filter-field">
        <label class="filter-field-label">
          <span>Department</span>
          <span class="field-switch">
            <input type="checkbox" name="filter_department" id="filter_department" {% if params.filter_department %}checked{% endif %}>
            <span class="slider"></span>
          </span>
        </label>
        <select name="department" class="form-control">
          <option value="all" {% if params.department == 'all' %}selected{% endif %}>ALL</option>
          <option value="">-- Department --</option>
          {% for d in departments %}
            <option value="{{ d.id }}" {% if params.department == d.id|stringformat:"s" %}selected{% endif %}>{{ d.name }}</option>
          {% endfor %}
        </select>
      </div>

      <div class="filter-field">
        <label class="filter-field-label">
          <span>Warehouse</span>
          <span class="field-switch">
            <input type="checkbox" name="filter_warehouse" id="filter_warehouse" {% if params.filter_warehouse %}checked{% endif %}>
            <span class="slider"></span>
          </span>
        </label>
        <select name="warehouse" class="form-control">
          <option value="all" {% if params.warehouse == 'all' or not params.warehouse %}selected{% endif %}>All Warehouses</option>
          {% for w in warehouses %}
            <option value="{{ w.id }}" {% if params.warehouse == w.id|stringformat:"s" %}selected{% endif %}>{{ w.name }}</option>
          {% endfor %}
        </select>
      </div>

      <div class="filter-field" style="flex:0 0 auto;">
        <label class="filter-field-label">&nbsp;</label>
        <button type="submit" class="btn-inv-search">
          <i class="fas fa-search"></i> Search
        </button>
      </div>

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

<!-- ========================================================
     TABLE COLUMN VISIBILITY
     ======================================================== -->
<div class="inv-filter-panel inv-collapsible" id="invColumnsPanel">
  <div class="panel-title"><i class="fas fa-columns"></i> Table Columns</div>
  <div class="stock-toggle-group" id="colToggleContainer" style="margin-bottom:0;padding-bottom:0;border-bottom:none;">
    <!-- populated by JS from INV_COLUMN_DEFS, so it always matches the actual table columns -->
  </div>
</div>

<!-- (Export Excel / Export PDF buttons now live in the toggle bar above, next to Filters / Table Columns) -->

<!-- ===== MAIN TABLE ===== -->
<div class="inv-table-card">
  <div class="table-responsive">
    <table id="reportTable" class="table table-bordered table-hover table-sm">
      <thead class="thead-dark">
        <tr>
          <th>Prod ID</th>
          <th>Code</th>
          <th>Name</th>
          <th>Company</th>
          <th>Category</th>
          <th>Department</th>
          <th>Pur Price</th>
          <th>Local Sale</th>
          <th>Whole Sale</th>
          <th>Pieces/Pack</th>
          <th>Stock</th>
          <th>New Invest</th>
          <th>Avg Invest</th>
          {% if show_weight %}<th>Weight (Tons)</th>{% endif %}
          <th>Action</th>
        </tr>
      </thead>
      <tbody>
        <!-- ⚡ Rows ab yahan server-side render nahi hotin — DataTables
             neeche 'inventory_report_data' AJAX endpoint se page-by-page
             (25/50/100 rows) khud bhar deta hai. -->
      </tbody>
      <tfoot>
        <tr class="font-weight-bold">
          <td colspan="11" class="text-right" id="invTotalsLabel">Totals:</td>
          <td id="footTotalNew">…</td>
          <td id="footTotalAvg">…</td>
          {% if show_weight %}<td id="footTotalWeight">…</td>{% endif %}
          <td></td>
        </tr>
      </tfoot>
    </table>
  </div>
</div>


<!-- ========================================================
     EXCEL EXPORT MODAL
     ======================================================== -->
<div class="modal fade" id="invExcelModal" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-xl" role="document">
    <div class="modal-content">

      <div class="modal-header">
        <div>
          <h5 class="modal-title mb-0">
            <i class="fas fa-file-excel text-success mr-2"></i>
            Please Select Excel Product Columns
          </h5>
          <small class="text-muted">Sirf selected columns Excel mein export honge</small>
        </div>
        <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
      </div>

      <div class="modal-body">

        <!-- Select All / None + search -->
        <div class="d-flex align-items-center justify-content-between mb-3">
          <div class="btn-group btn-group-sm">
            <button type="button" class="btn btn-outline-success" id="xlColsAll">
              <i class="fas fa-check-square mr-1"></i> Select All
            </button>
            <button type="button" class="btn btn-outline-secondary" id="xlColsNone">
              <i class="far fa-square mr-1"></i> Clear All
            </button>
          </div>
          <span class="badge badge-secondary" id="xlColCount">0 selected</span>
        </div>

        <!-- Columns grouped -->
        <div class="border rounded p-3" style="max-height: 420px; overflow-y: auto;">
          {% for group_label, group_keys in xl_groups %}
            <p class="text-uppercase font-weight-bold text-muted mb-2" style="font-size:11px; letter-spacing:1px;">
              {{ group_label }}
            </p>
            <div class="row mb-3">
              {% for key, label in all_columns %}
                {% if key in group_keys %}
                <div class="col-md-3 col-sm-4 col-6 mb-1">
                  <div class="custom-control custom-checkbox">
                    <input class="custom-control-input xl-col"
                           type="checkbox"
                           value="{{ key }}"
                           id="xl_{{ key }}"
                           {% if key in default_pdf_columns %}checked{% endif %}>
                    <label class="custom-control-label small" for="xl_{{ key }}">{{ label }}</label>
                  </div>
                </div>
                {% endif %}
              {% endfor %}
            </div>
          {% endfor %}
        </div><!-- /border rounded -->

      </div><!-- /modal-body -->

      <div class="modal-footer">
        <span class="text-muted small mr-auto">
          <i class="fas fa-info-circle"></i>
          Current filters automatically carry over to export.
        </span>
        <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-success" id="xlExportBtn">
          <i class="fas fa-file-excel mr-1"></i> Export Excel
        </button>
      </div>

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


<!-- ========================================================
     PDF EXPORT MODAL
     ======================================================== -->
<div class="modal fade" id="invPdfModal" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <form method="get" action="{{ export_pdf_url }}" target="_blank">
      <div class="modal-content">

        <div class="modal-header">
          <div>
            <h5 class="modal-title mb-0">
              <i class="fas fa-file-pdf text-danger mr-2"></i>
              PDF Export Options
            </h5>
            <small class="text-muted">Columns + layout settings</small>
          </div>
          <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
        </div>

        <div class="modal-body">

          <!-- carry existing filters -->
          {% for k, vlist in request.GET.lists %}
            {% if k not in pdf_exclude_params %}
              {% for v in vlist %}
                <input type="hidden" name="{{ k }}" value="{{ v }}">
              {% endfor %}
            {% endif %}
          {% endfor %}

          <div class="row">
            <!-- LEFT: Columns -->
            <div class="col-md-6">
              <div class="d-flex align-items-center justify-content-between mb-2">
                <h6 class="mb-0">Select Columns</h6>
                <div class="btn-group btn-group-sm">
                  <button type="button" class="btn btn-outline-secondary" id="invColsAll">All</button>
                  <button type="button" class="btn btn-outline-secondary" id="invColsNone">None</button>
                </div>
              </div>
              <div class="border rounded p-2" style="max-height:360px; overflow:auto;">
                {% for key, label in all_columns %}
                  {% if key in pdf_allowed_col_keys %}
                  <div class="custom-control custom-checkbox mb-1">
                    <input class="custom-control-input inv-pdf-col"
                           type="checkbox"
                           name="columns"
                           value="{{ key }}"
                           id="inv_col_{{ key }}"
                           {% if key in default_pdf_columns %}checked{% endif %}>
                    <label class="custom-control-label" for="inv_col_{{ key }}">{{ label }}</label>
                  </div>
                  {% endif %}
                {% endfor %}
              </div>
              <small class="text-muted d-block mt-2">Columns zyada hon to Landscape better hota hai.</small>
            </div>

            <!-- RIGHT: Settings -->
            <div class="col-md-6">
              <h6 class="mb-2">PDF Settings</h6>
              <div class="form-group">
                <label class="mb-1">Page Size</label>
                <select name="page_size" class="form-control">
                  <option value="A4">A4</option>
                  <option value="A5">A5</option>
                  <option value="Thermal">Thermal (58mm)</option>
                </select>
              </div>
              <div class="form-group">
                <label class="mb-1">Orientation</label>
                <select name="orientation" class="form-control">
                  <option value="portrait">Portrait</option>
                  <option value="landscape">Landscape</option>
                </select>
                <small class="text-muted">Thermal par orientation ignore hoti hai.</small>
              </div>
              <div class="form-group">
                <label class="mb-1">Group By</label>
                <select name="group_by" class="form-control">
                  <option value="">None</option>
                  <option value="category">Category</option>
                  <option value="company">Company</option>
                  <option value="department">Department</option>
                </select>
              </div>
              <div class="alert alert-light border small mb-0">
                Grouping: Har group separate table mein print hoga subtotal ke sath, aur end par grand totals.
              </div>
            </div>
          </div>

        </div>

        <div class="modal-footer">
          <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-danger">
            <i class="fas fa-file-pdf mr-1"></i> Generate PDF
          </button>
        </div>

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


<!-- ========================================================
     BARCODE STICKER MODAL
     ======================================================== -->
<div class="modal fade" id="stickerModal" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header py-2">
        <h6 class="modal-title">Barcode Sticker Settings</h6>
        <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
      </div>
      <div class="modal-body">
        <form onsubmit="return false;" class="small">
          <div class="form-row">
            <div class="col-md-3">
              <label class="mb-1">Width (in)</label>
              <input type="number" step="0.01" min="0.5" class="form-control form-control-sm" id="sm_w" value="1.5">
            </div>
            <div class="col-md-3">
              <label class="mb-1">Height (in)</label>
              <input type="number" step="0.01" min="0.5" class="form-control form-control-sm" id="sm_h" value="1.0">
            </div>
            <div class="col-md-6 d-flex align-items-end">
              <small class="text-muted">Default: 1.5" × 1.0"</small>
            </div>
          </div>
          <div class="form-row mt-2">
            <div class="col-md-6">
              <div class="form-group mb-2">
                <label class="mb-1">Business Name</label>
                <input type="text" class="form-control form-control-sm" id="sm_header" value="{{ shop_name_default }}">
              </div>
              <div class="form-group mb-2">
                <label class="mb-1">Product Code</label>
                <input type="text" class="form-control form-control-sm" id="sm_code">
              </div>
              <div class="form-group mb-0">
                <label class="mb-1">Product Name</label>
                <input type="text" class="form-control form-control-sm" id="sm_name">
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-group mb-2"><label class="mb-1">Line 1</label><input type="text" class="form-control form-control-sm" id="sm_l1"></div>
              <div class="form-group mb-2"><label class="mb-1">Line 2</label><input type="text" class="form-control form-control-sm" id="sm_l2"></div>
              <div class="form-group mb-2"><label class="mb-1">Line 3</label><input type="text" class="form-control form-control-sm" id="sm_l3"></div>
              <div class="form-group mb-0"><label class="mb-1">Line 4</label><input type="text" class="form-control form-control-sm" id="sm_l4"></div>
            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer py-2">
        <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary btn-sm" id="sm_generate">Generate</button>
      </div>
    </div>
  </div>
</div>

{% endblock %}


{% block javascripts %}
<script>
$(function () {

  // ── Collapsible Filters / Table Columns panels (hidden by default) ──
  $('.inv-toggle-btn').on('click', function () {
    var $btn = $(this);
    var $target = $($btn.data('target'));
    $target.stop(true, true).slideToggle(180);
    $btn.toggleClass('open');
  });

  // ── As-of toggle ──
  function toggleAsOf() {
    $('#as_of').prop('disabled', !$('#use_as_of').is(':checked'));
  }
  toggleAsOf();
  $('#use_as_of').on('change', toggleAsOf);
  $('#as_of').on('change', function () {
    if ($(this).val().trim()) { $('#use_as_of').prop('checked', true); toggleAsOf(); }
  });

  // ── Select2 product name ──
  $.ajaxSetup({ headers: { 'X-CSRFToken': '{{ csrf_token }}' } });
  $('#product_name').select2({
    placeholder: 'Search product by name',
    allowClear: true,
    minimumInputLength: 1,
    ajax: {
      url: "{% url 'products:get_products' %}",
      type: 'POST',
      dataType: 'json',
      delay: 250,
      data: params => ({ term: params.term }),
      processResults: data => ({ results: data.map(i => ({ id: i.text, text: i.text })) }),
      cache: true
    }
  });

  // ── Feature flags / config ──
  var CAN_SEE_PRICE      = {% if 'show_purchase_price_inventory' in allowed_features %}true{% else %}false{% endif %};
  var CAN_EDIT_PRODUCT   = {% if 'products_edit' in allowed_features %}true{% else %}false{% endif %};
  var CAN_DELETE_PRODUCT = {% if 'products_delete' in allowed_features %}true{% else %}false{% endif %};
  var DEPARTEMENT_WISE_CLASSIFICATION = {% if departement_wise_classification %}true{% else %}false{% endif %};
  var SHOW_WEIGHT = {% if show_weight %}true{% else %}false{% endif %};
  var CURRENT_DEPARTMENT = "{{ params.department|escapejs }}";
  var CURRENT_DEPARTMENT_FILTER_ON = {% if params.filter_department %}true{% else %}false{% endif %};

  // ── Single source of truth for every visible table column: order here
  // MUST match the <thead> order exactly. Both the DataTables `columns`
  // config and the "Table Columns" checkboxes are generated from this
  // same array, so they can never drift out of sync with each other.
  var INV_COLUMN_DEFS = [
    { key:'prod_id',    label:'Prod ID',      data:'prod_id',                orderable:true,  toggleable:true,  defaultVisible:false, mergedInTotals:true },
    { key:'code',       label:'Code',         data:'product_code',           orderable:true,  toggleable:true,  defaultVisible:true,  mergedInTotals:true },
    { key:'name',       label:'Name',         data:'name',                   orderable:true,  toggleable:true,  defaultVisible:true,  mergedInTotals:true },
    { key:'company',    label:'Company',      data:'prod_company',           orderable:true,  toggleable:true,  defaultVisible:false, mergedInTotals:true },
    { key:'category',   label:'Category',     data:'prod_category',          orderable:true,  toggleable:true,  defaultVisible:false, mergedInTotals:true },
    { key:'department', label:'Department',   data:'department',             orderable:false, toggleable:true,  defaultVisible:false, mergedInTotals:true },
    { key:'purchase',   label:'Purchase',     data:'purchase_price',         orderable:true,  toggleable:true,  defaultVisible:true,  mergedInTotals:true },
    { key:'local_sale', label:'Local Sale',   data:'l_sale_price',           orderable:true,  toggleable:true,  defaultVisible:true,  mergedInTotals:true },
    { key:'whole_sale', label:'Whole Sale',   data:'whole_sale_price',       orderable:true,  toggleable:true,  defaultVisible:false, mergedInTotals:true },
    { key:'pieces_pack',label:'Pieces/Pack',  data:'pieces_per_pack',        orderable:true,  toggleable:true,  defaultVisible:false, mergedInTotals:true },
    { key:'stock',      label:'Stock',        data:'present_stock',          orderable:true,  toggleable:true,  defaultVisible:true,  mergedInTotals:true },
    { key:'investment', label:'Investment',   data:'new_rate_investment',    orderable:false, toggleable:true,  defaultVisible:true,  mergedInTotals:false, footerId:'footTotalNew' },
    { key:'avg_investment', label:'Avg Investment', data:'average_rate_investment', orderable:false, toggleable:true, defaultVisible:false, mergedInTotals:false, footerId:'footTotalAvg' }
  ];
  if (SHOW_WEIGHT) {
    INV_COLUMN_DEFS.push({ key:'weight', label:'Weight (Tons)', data:'weight_tons', orderable:false, toggleable:true, defaultVisible:false, mergedInTotals:false, footerId:'footTotalWeight' });
  }
  INV_COLUMN_DEFS.push({ key:'action', label:'Action', data:null, orderable:false, toggleable:false, defaultVisible:true, mergedInTotals:false });

  // Cell renderers keyed by the `data` field — reused by every column
  // built from INV_COLUMN_DEFS below.
  var INV_RENDERERS = {
    product_code: escHtml,
    name: escHtml,
    prod_company: escHtml,
    prod_category: escHtml,
    department: escHtml,
    purchase_price: function (d) { return CAN_SEE_PRICE ? escHtml(d) : '-'; },
    l_sale_price: escHtml,
    whole_sale_price: escHtml,
    pieces_per_pack: escHtml,
    present_stock: escHtml,
    new_rate_investment: function (d) { return CAN_SEE_PRICE ? escHtml(d) : '-'; },
    average_rate_investment: function (d) { return CAN_SEE_PRICE ? (d === null ? '-' : escHtml(d)) : '-'; },
    weight_tons: escHtml
  };

  // Build the "Table Columns" checkbox pills straight from INV_COLUMN_DEFS,
  // so the list can never drift out of sync with the actual table columns.
  function buildColumnToggles() {
    var $box = $('#colToggleContainer').empty();
    INV_COLUMN_DEFS.forEach(function (def, idx) {
      if (!def.toggleable) return;
      var $pill = $('<label class="stock-toggle col-toggle-pill"></label>');
      var $input = $('<input type="checkbox" class="col-toggle-checkbox">')
        .attr('data-col-idx', idx)
        .prop('checked', def.defaultVisible);
      var $span = $('<span></span>').text(def.label);
      $pill.append($input).append($span);
      if (def.defaultVisible) $pill.addClass('active');
      $box.append($pill);
    });
  }

  // Keeps the "Totals:" label colspan and the New/Avg/Weight footer cells
  // in sync with whichever columns are currently visible.
  function updateFooterForColumns() {
    if (!$.fn.DataTable.isDataTable('#reportTable')) return;
    var dt = $('#reportTable').DataTable();
    var mergedCount = 0;
    INV_COLUMN_DEFS.forEach(function (def, idx) {
      if (def.mergedInTotals && dt.column(idx).visible()) mergedCount++;
    });
    $('#invTotalsLabel').attr('colspan', Math.max(mergedCount, 1));
    INV_COLUMN_DEFS.forEach(function (def, idx) {
      if (def.footerId) $('#' + def.footerId).toggle(dt.column(idx).visible());
    });
  }

  // A highly distinctive placeholder (instead of plain "0") so the
  // later string-replace can never be ambiguous about trailing
  // slashes or match the wrong "0" in the URL — this is what was
  // actually still broken (the previous '/0/' replace silently did
  // nothing whenever a URL had no trailing slash, e.g. ".../update/0").
  var ID_PLACEHOLDER = '999999999';
  var URL_TPL = {
    stockHistory:    "{% url 'reports:stock_history' 999999999 %}",
    fifoLayers:      "{% url 'reports:fifo_layers' 999999999 %}",
    purchaseHistory: "{% url 'reports:purchase_history' 999999999 %}",
    saleHistory:     "{% url 'reports:sale_history' 999999999 %}",
    productEditWith: "{% url 'products:products_edit_with_id' 999999999 %}",
    productUpdate:   "{% url 'products:products_update' 999999999 %}",
    productDelete:   "{% url 'products:products_delete_from_inventory' 999999999 %}"
  };
  function withId(tpl, id) { return tpl.replace(ID_PLACEHOLDER, String(id)); }

  function escHtml(s) {
    if (s === null || s === undefined) return '';
    return String(s)
      .replace(/&/g, '&amp;')
      .replace(/</g, '&lt;')
      .replace(/>/g, '&gt;')
      .replace(/"/g, '&quot;');
  }

  function renderActionCell(row) {
    // History links use product_details.prod_id (business/product-domain ID).
    // Edit / Quick Edit / Delete use product_details.id (the actual row pk) —
    // that's what those views expect, per confirmation.
    var histId = row.prod_id;
    var editId = row.id;
    var html = '<div class="dropdown">';
    html += '<button class="btn btn-secondary btn-sm dropdown-toggle" data-toggle="dropdown">Action</button>';
    html += '<div class="dropdown-menu">';
    html += '<a class="dropdown-item" href="' + withId(URL_TPL.stockHistory, histId) + '">Stock History</a>';
    html += '<a class="dropdown-item" href="' + withId(URL_TPL.fifoLayers, histId) + '">FIFO Layers</a>';
    html += '<a class="dropdown-item" href="' + withId(URL_TPL.purchaseHistory, histId) + '">Purchase History</a>';
    html += '<a class="dropdown-item" href="' + withId(URL_TPL.saleHistory, histId) + '">Sale History</a>';
    html += '<div class="dropdown-divider"></div>';
    if (CAN_EDIT_PRODUCT) {
      html += '<a class="dropdown-item" href="' + withId(URL_TPL.productEditWith, editId) + '">Edit Product</a>';
    }
    if (CAN_DELETE_PRODUCT) {
      html += '<a class="dropdown-item text-danger btn-delete-product" data-delete-url="' + withId(URL_TPL.productDelete, editId) + '">Delete Product</a>';
    }
    html += '</div>';
    if (CAN_EDIT_PRODUCT) {
      html += '<a class="btn btn-sm btn-outline-dark icon-btn" href="' + withId(URL_TPL.productUpdate, editId) + '" title="Quick Edit"><i class="fas fa-pen"></i></a>';
    }
    html += '<a class="btn btn-sm btn-outline-dark icon-btn btn-sticker" href="#" ' +
            'data-code="' + escHtml(row.product_code) + '" ' +
            'data-name="' + escHtml(row.name) + '" ' +
            'data-price="' + escHtml(row.l_sale_price) + '" ' +
            'title="Print Barcode Sticker"><i class="fas fa-barcode"></i></a>';
    html += '</div>';
    return html;
  }

  // ── DataTable (server-side: sirf current page ka data AJAX se aata hai,
  //    isliye 5,000/15,000+ items par bhi report fast khulti hai) ──
  function initReportTable() {

    // Column definitions built FIRST, then passed into DataTable() —
    // declaring a `var` inside the config object literal is invalid JS
    // and was the cause of "Unexpected identifier 'invColumns'".
    // Built from INV_COLUMN_DEFS so the "Table Columns" checkboxes and the
    // actual DataTables columns can never fall out of sync with each other.
    var invColumns = INV_COLUMN_DEFS.map(function (def) {
      if (def.key === 'action') {
        return { data: null, orderable: false, visible: true, render: function (data, type, row) { return renderActionCell(row); } };
      }
      return {
        data: def.data,
        orderable: def.orderable,
        visible: def.defaultVisible,
        render: INV_RENDERERS[def.data] || escHtml
      };
    });

    $('#reportTable').DataTable({
      serverSide: true,
      processing: true,
      searching: true,        // upar wala filter form hi search/filter karta hai
      lengthMenu: [25, 50, 100, 200],
      pageLength: 50,
      order: [],
      ajax: {
        url: "{{ data_url }}",
        type: 'GET',
        data: function (d) {
          var extra = {};
          $('#invFilterForm').find('input, select').each(function () {
            var $el = $(this);
            var name = $el.attr('name');
            if (!name) return;
            if ($el.is(':checkbox')) {
              if ($el.is(':checked')) extra[name] = 'on';
            } else {
              extra[name] = $el.val();
            }
          });
          return $.extend({}, d, extra);
        }
      },
      columns: invColumns,
      drawCallback: function (settings) {
        var json = (settings && settings.json) || {};
        if (json.total_new !== undefined) {
          $('#footTotalNew').text(json.total_new);
        }
        if (json.total_avg !== undefined) {
          $('#footTotalAvg').text(json.total_avg === null ? '-' : json.total_avg);
        }
        if (SHOW_WEIGHT && json.summary) {
          $('#footTotalWeight').text(json.summary.total_weight_tons);
        }
        if (json.summary) {
          var s = json.summary;
          $('#sumPurchaseInv').text(Number(s.total_purchase_investment).toLocaleString());
          $('#sumSaleInv').text(Number(s.total_sale_investment).toLocaleString());
          var pm = Number(s.profit_margin_percent);
          $('#sumProfitMargin').text(pm.toFixed(2) + '%')
            .toggleClass('positive', pm >= 0).toggleClass('negative', pm < 0);
          $('#sumTotalItems').text(Number(s.total_items).toLocaleString());
          $('#sumTotalUnits').text(Number(s.total_units).toLocaleString());
          if (SHOW_WEIGHT) $('#sumTotalWeight').text(Number(s.total_weight_tons).toLocaleString());
        }
      },
      initComplete: function () { updateFooterForColumns(); }
    });

    $('#reportTable').on('column-visibility.dt', function () { updateFooterForColumns(); });
  }

  // Build the column-toggle checkboxes once (independent of the
  // department-classification gate below, since the checkboxes
  // themselves don't depend on any department being chosen yet).
  buildColumnToggles();
  $(document).on('change', '.col-toggle-checkbox', function () {
    var idx = parseInt($(this).attr('data-col-idx'), 10);
    var checked = $(this).is(':checked');
    $(this).closest('.col-toggle-pill').toggleClass('active', checked);
    if ($.fn.DataTable.isDataTable('#reportTable')) {
      $('#reportTable').DataTable().column(idx).visible(checked);
    }
  });

  // ✅ Department select + checkbox disable, taake classification
  // True hone par user department change na kar sake.
  function lockDepartment(deptId) {
    $('select[name="department"]').val(deptId);
    $('#filter_department').prop('checked', true);
    $('select[name="department"]').prop('disabled', true);
    $('#filter_department').prop('disabled', true);
  }

  // ✅ "Search" button (real GET submit) se pehle locked fields ko
  // dobara enable karte hain — disabled fields browser submit mein
  // include nahi hotay, warna department URL se gir jaata aur dialog
  // baar baar aata rehta.
  $('#invFilterForm').on('submit', function () {
    $('select[name="department"], #filter_department').prop('disabled', false);
  });

  // ✅ Department-wise classification gate: jab tak department
  // select na ho, koi item load nahi hoga.
  if (DEPARTEMENT_WISE_CLASSIFICATION) {
    if (CURRENT_DEPARTMENT && CURRENT_DEPARTMENT_FILTER_ON) {
      lockDepartment(CURRENT_DEPARTMENT);
      initReportTable();
    } else {
      Swal.fire({
        title: 'Please Select Departement First',
        html: '<select id="swalDeptSelect" class="form-control">' +
              $('select[name="department"]').html() + '</select>',
        confirmButtonText: 'Continue',
        allowOutsideClick: false,
        allowEscapeKey: false,
        showCancelButton: false,
        preConfirm: function () {
          var val = $('#swalDeptSelect').val();
          if (!val) {
            Swal.showValidationMessage('Please select a department to continue.');
            return false;
          }
          return val;
        }
      }).then(function (result) {
        if (result.isConfirmed) {
          $('select[name="department"]').val(result.value);
          $('#filter_department').prop('checked', true);
          $('#invFilterForm').trigger('submit');
        }
      });
    }
  } else {
    initReportTable();
  }

  // ── Live-apply filters without needing the Search button ──
  function reloadInvTable() {
    var dt = $.fn.DataTable.isDataTable('#reportTable') ? $('#reportTable').DataTable() : null;
    if (dt) dt.ajax.reload();
  }

  // Visual "active" state for the pill toggles.
  function refreshPill($checkbox, $label) {
    $label.toggleClass('active', $checkbox.is(':checked'));
  }
  refreshPill($('#show_all'), $('#lblShowAll'));
  refreshPill($('#zero_stock'), $('#lblZeroStock'));
  refreshPill($('#negative_stock'), $('#lblNegStock'));
  refreshPill($('#compute_avg'), $('#lblComputeAvg'));
  refreshPill($('#use_as_of'), $('#lblAsOf'));

  // Show All / Zero Stock / Negative Stock are mutually exclusive
  // and apply immediately on click.
  $('#zero_stock, #negative_stock').on('change', function () {
    if ($(this).is(':checked')) { $('#show_all').prop('checked', false); refreshPill($('#show_all'), $('#lblShowAll')); }
    refreshPill($(this), $(this).closest('.stock-toggle'));
    reloadInvTable();
  });
  $('#show_all').on('change', function () {
    if ($(this).is(':checked')) {
      $('#zero_stock, #negative_stock').prop('checked', false);
      refreshPill($('#zero_stock'), $('#lblZeroStock'));
      refreshPill($('#negative_stock'), $('#lblNegStock'));
    }
    refreshPill($(this), $('#lblShowAll'));
    reloadInvTable();
  });
  $('#compute_avg').on('change', function () { refreshPill($(this), $('#lblComputeAvg')); reloadInvTable(); });
  $('#use_as_of').on('change', function () { refreshPill($(this), $('#lblAsOf')); reloadInvTable(); });
  $('#as_of').on('change', function () { reloadInvTable(); });

  // Search-by-code: apply on Enter key or after a short pause typing.
  var codeDebounce;
  $('input[name="product_code"]').on('input', function () {
    $('#filter_code').prop('checked', !!$(this).val().trim());
    clearTimeout(codeDebounce);
    codeDebounce = setTimeout(reloadInvTable, 450);
  });
  $('input[name="product_code"]').on('keydown', function (e) {
    if (e.key === 'Enter') { e.preventDefault(); clearTimeout(codeDebounce); reloadInvTable(); }
  });

  // Search-by-name (select2) applies immediately on select/clear.
  $('#product_name').on('select2:select select2:clear', function () {
    $('#filter_name').prop('checked', $(this).val() ? true : false);
    reloadInvTable();
  });

  // Company / Category / Department apply immediately on change.
  $('select[name="company"]').on('change', function () {
    $('#filter_company').prop('checked', !!$(this).val().trim());
    reloadInvTable();
  });
  $('select[name="category"]').on('change', function () {
    $('#filter_category').prop('checked', !!$(this).val().trim());
    reloadInvTable();
  });
  $('select[name="department"]').on('change', function () {
    $('#filter_department').prop('checked', !!$(this).val().trim());
    reloadInvTable();
  });
  $('select[name="warehouse"]').on('change', function () {
    $('#filter_warehouse').prop('checked', $(this).val() && $(this).val() !== 'all');
    reloadInvTable();
  });

  // ── PDF Modal: All / None ──
  $('#invColsAll').on('click', function () { $('.inv-pdf-col').prop('checked', true); });
  $('#invColsNone').on('click', function () { $('.inv-pdf-col').prop('checked', false); });

  // ── Excel Modal: counter ──
  function updateXlCount() {
    const n = $('.xl-col:checked').length;
    $('#xlColCount').text(n + ' selected');
  }
  updateXlCount();
  $(document).on('change', '.xl-col', updateXlCount);

  // ── Excel Modal: All / None ──
  $('#xlColsAll').on('click', function () { $('.xl-col').prop('checked', true); updateXlCount(); });
  $('#xlColsNone').on('click', function () { $('.xl-col').prop('checked', false); updateXlCount(); });

  // ── Excel Export ──
  $('#xlExportBtn').on('click', function () {
    const selected = [];
    $('.xl-col:checked').each(function () { selected.push($(this).val()); });

    if (selected.length === 0) {
      alert('Please select at least one column.');
      return;
    }

    const base   = "{{ export_excel_url }}";
    const params = new URLSearchParams("{{ query_string|escapejs }}");
    params.delete('columns');
    selected.forEach(c => params.append('columns', c));

    window.location.href = base + '?' + params.toString();
    $('#invExcelModal').modal('hide');
  });

  // ── Delete product ──
  $(document).on('click', '.btn-delete-product', function (e) {
    e.preventDefault();
    const url = $(this).data('delete-url');
    Swal.fire({
      title: 'Are you sure?',
      text: 'Do you want to delete this product?',
      icon: 'warning',
      showCancelButton: true,
      confirmButtonText: 'Yes, delete it!',
      cancelButtonText: 'Cancel'
    }).then(result => { if (result.isConfirmed) window.location.href = url; });
  });

  // ── Barcode Sticker ──
  $(document).on('click', '.btn-sticker', function (e) {
    e.preventDefault();
    $('#sm_w').val('1.5');
    $('#sm_h').val('1.0');
    $('#sm_header').val('{{ shop_name_default|escapejs }}');
    $('#sm_code').val($(this).data('code') || '');
    $('#sm_name').val($(this).data('name') || '');
    $('#sm_l1').val('Price: ' + ($(this).data('price') || 0) + ' PKR');
    $('#sm_l2, #sm_l3, #sm_l4').val('');
    $('#stickerModal').modal('show');
  });

  $('#sm_generate').on('click', function () {
    const qs = new URLSearchParams();
    qs.set('w',  $('#sm_w').val()      || '1.5');
    qs.set('h',  $('#sm_h').val()      || '1.0');
    const fields = { header:'sm_header', code:'sm_code', name:'sm_name',
                     l1:'sm_l1', l2:'sm_l2', l3:'sm_l3', l4:'sm_l4' };
    Object.entries(fields).forEach(([k, id]) => {
      const v = ($('#' + id).val() || '').trim();
      if (v) qs.set(k, v);
    });
    window.open("{% url 'invoices:barcode_sticker_preview' %}?" + qs.toString(), '_blank');
  });

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