{% extends "pos/base.html" %}
{% load static %}
{% block title %}FBR Digital Invoicing — Bulk Edit{% endblock %}
{% block heading %}FBR Digital Invoicing — Bulk Edit Products{% endblock %}

{% block stylesheets %}{{ block.super }}
<style>
:root {
  --fbr-green:   #0f7a3f;
  --fbr-teal:    #0d7a6b;
  --fbr-dark:    #0a2a1e;
  --fbr-mid:     #145c40;
  --fbr-accent:  #22c55e;
  --fbr-light:   #dcfce7;
  --fbr-border:  #bbf7d0;
  --gray-50:     #f9fafb;
  --gray-100:    #f3f4f6;
  --gray-200:    #e5e7eb;
  --gray-300:    #d1d5db;
  --gray-500:    #6b7280;
  --gray-700:    #374151;
  --gray-800:    #1f2937;
  --red:         #dc2626;
  --amber:       #d97706;
  --blue:        #2563eb;
  --shadow-sm:   0 1px 3px rgba(0,0,0,.08);
  --shadow-md:   0 4px 16px rgba(0,0,0,.10);
  --radius:      8px;
}
*{box-sizing:border-box;margin:0;padding:0;}

/* ── Page wrapper ── */
.di-wrap { padding: 16px; font-family: 'Segoe UI', system-ui, sans-serif; color: var(--gray-800); }

/* ── Page title bar ── */
.di-header {
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(135deg, var(--fbr-dark) 0%, var(--fbr-mid) 100%);
  color: #fff; border-radius: var(--radius); padding: 14px 20px; margin-bottom: 16px;
  box-shadow: var(--shadow-md);
}
.di-header .logo-badge {
  background: var(--fbr-accent); color: var(--fbr-dark); font-weight: 800;
  font-size: 11px; padding: 4px 8px; border-radius: 4px; letter-spacing: 1px;
}
.di-header h1 { font-size: 16px; font-weight: 700; letter-spacing: .3px; }
.di-header p  { font-size: 11px; opacity: .75; margin-top: 2px; }
.di-header .ms-auto { margin-left: auto; display: flex; gap: 8px; }

/* ── Cards ── */
.di-card {
  background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius);
  margin-bottom: 14px; box-shadow: var(--shadow-sm); overflow: hidden;
}
.di-card-head {
  background: var(--gray-50); border-bottom: 1px solid var(--gray-200);
  padding: 10px 16px; display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; color: var(--fbr-green); text-transform: uppercase;
  letter-spacing: .6px;
}
.di-card-head i { font-size: 13px; }
.di-card-body { padding: 14px 16px; }

/* ── Filter row ── */
.filter-grid {
  display: grid; grid-template-columns: 1fr 1fr 1.2fr auto auto;
  gap: 10px; align-items: flex-end;
}
@media(max-width:900px){ .filter-grid{ grid-template-columns:1fr 1fr; } }

.f-group { display: flex; flex-direction: column; gap: 4px; }
.f-label { font-size: 11px; font-weight: 600; color: var(--gray-500); text-transform: uppercase; letter-spacing: .5px; }
.f-ctrl {
  border: 1.5px solid var(--gray-300); border-radius: 6px;
  padding: 7px 10px; font-size: 12.5px; color: var(--gray-800);
  background: #fff; transition: border .15s, box-shadow .15s;
  width: 100%;
}
.f-ctrl:focus { outline: none; border-color: var(--fbr-green); box-shadow: 0 0 0 3px rgba(15,122,63,.12); }

/* ── Global apply bar ── */
.global-bar {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end;
  background: linear-gradient(135deg, #f0fdf4, #dcfce7);
  border: 1px solid var(--fbr-border); border-radius: var(--radius);
  padding: 12px 16px; margin-bottom: 14px;
}
.global-bar .g-label { font-size: 11px; font-weight: 700; color: var(--fbr-green); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; }
.global-bar .g-item { display: flex; flex-direction: column; gap: 4px; }
.global-bar .g-item.grow { flex: 1; min-width: 200px; }
.apply-btn {
  background: var(--fbr-green); color: #fff; border: none; border-radius: 6px;
  padding: 8px 14px; font-size: 12px; font-weight: 600; cursor: pointer;
  display: flex; align-items: center; gap: 6px; white-space: nowrap;
  transition: background .15s, transform .1s; margin-top: 18px;
}
.apply-btn:hover { background: var(--fbr-mid); }
.apply-btn:active { transform: scale(.97); }

/* ── Stats bar ── */
.stats-bar {
  display: flex; gap: 16px; align-items: center; margin-bottom: 12px;
  flex-wrap: wrap;
}
.stat-pill {
  background: var(--fbr-light); border: 1px solid var(--fbr-border);
  border-radius: 20px; padding: 4px 12px;
  font-size: 12px; font-weight: 600; color: var(--fbr-dark);
  display: flex; align-items: center; gap: 6px;
}
.stat-pill .num { font-size: 14px; font-weight: 800; color: var(--fbr-green); }
.search-live {
  margin-left: auto; position: relative;
}
.search-live input {
  border: 1.5px solid var(--gray-300); border-radius: 20px;
  padding: 6px 12px 6px 32px; font-size: 12.5px; width: 220px;
  transition: border .15s, box-shadow .15s;
}
.search-live input:focus { outline: none; border-color: var(--fbr-green); box-shadow: 0 0 0 3px rgba(15,122,63,.1); }
.search-live .si { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--gray-500); font-size: 12px; }

/* ── Table ── */
.di-table-wrap { overflow-x: auto; border-radius: 6px; border: 1px solid var(--gray-200); }
.di-table {
  width: 100%; border-collapse: collapse; font-size: 12px;
  min-width: 1300px;
}
.di-table thead th {
  background: linear-gradient(180deg, var(--fbr-dark) 0%, var(--fbr-mid) 100%);
  color: #fff; padding: 9px 8px; text-align: left; font-weight: 600;
  font-size: 11px; letter-spacing: .4px; white-space: nowrap; position: sticky; top: 0; z-index: 2;
}
.di-table thead th.col-fbr {
  background: linear-gradient(180deg, #0d4a2e 0%, #0f5e38 100%);
  border-left: 2px solid var(--fbr-accent);
}
.di-table thead th .th-sub { font-size: 10px; opacity: .7; font-weight: 400; display: block; }

.di-table tbody tr { border-bottom: 1px solid var(--gray-100); transition: background .1s; }
.di-table tbody tr:hover { background: #f0fdf4; }
.di-table tbody tr.dirty { background: #fefce8; }
.di-table tbody tr.hidden-row { display: none; }

.di-table td { padding: 5px 6px; vertical-align: middle; }
.di-table td.col-code { color: var(--gray-800); font-size: 12px; font-family: monospace; font-weight: 600; }
.di-table td.col-name { font-weight: 500; max-width: 180px; }
.di-table td.col-name .prod-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; max-width: 175px; }
.di-table td.col-meta { color: var(--gray-700); font-size: 12px; font-weight: 500; }
.di-table td.col-fbr-cell { border-left: 2px solid var(--fbr-border); background: rgba(220,252,231,.25); }

/* ── Editable cells ── */
.cell-input {
  border: 1.5px solid var(--gray-200); border-radius: 5px;
  padding: 4px 7px; font-size: 12px; width: 100%; background: transparent;
  transition: border .15s, background .15s; color: var(--gray-800);
}
.cell-input:focus { outline: none; border-color: var(--fbr-green); background: #fff; box-shadow: 0 0 0 2px rgba(15,122,63,.1); }
.cell-input.changed { background: #fefce8; border-color: var(--amber); }
.cell-input::placeholder { color: var(--gray-400); font-style: italic; }
.cell-input:not(:placeholder-shown) { color: var(--gray-800); font-weight: 500; }
.cell-input[type="number"] { text-align: right; }

.cell-select {
  border: 1.5px solid var(--gray-200); border-radius: 5px;
  padding: 4px 6px; font-size: 11.5px; width: 100%; background: transparent;
  cursor: pointer; color: var(--gray-800);
  transition: border .15s, background .15s;
}
.cell-select:focus { outline: none; border-color: var(--fbr-green); background: #fff; }
.cell-select.changed { background: #fefce8; border-color: var(--amber); }

/* Sale type badge colors */
.badge-standard { background: #dbeafe; color: #1e40af; }
.badge-3rd      { background: #dcfce7; color: #166534; }
.badge-reduced  { background: #fef3c7; color: #92400e; }
.badge-zero     { background: #f3f4f6; color: #374151; }
.badge-exempt   { background: #fce7f3; color: #9d174d; }
.sale-badge {
  display: inline-block; padding: 2px 7px; border-radius: 10px;
  font-size: 10px; font-weight: 700; letter-spacing: .3px;
}

/* ── Action row ── */
.action-bar {
  display: flex; align-items: center; gap: 10px; padding: 12px 0 4px;
  flex-wrap: wrap;
}
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: none; border-radius: 6px; cursor: pointer;
  font-size: 12.5px; font-weight: 600; padding: 8px 16px;
  transition: all .15s; white-space: nowrap;
}
.btn-primary   { background: var(--fbr-green); color: #fff; }
.btn-primary:hover   { background: var(--fbr-mid); }
.btn-secondary { background: var(--gray-200); color: var(--gray-700); }
.btn-secondary:hover { background: var(--gray-300); }
.btn-load   { background: var(--blue); color: #fff; }
.btn-load:hover   { background: #1d4ed8; }
.btn-danger { background: var(--red); color: #fff; }
.btn-danger:hover { background: #b91c1c; }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ── Empty state ── */
.empty-state {
  text-align: center; padding: 48px 20px; color: var(--gray-500);
}
.empty-state i { font-size: 36px; opacity: .3; margin-bottom: 12px; display: block; }
.empty-state p { font-size: 13px; }

/* ── Progress bar ── */
.save-progress { display: none; margin-top: 8px; }
.save-progress .bar-track {
  background: var(--gray-200); border-radius: 4px; height: 6px; overflow: hidden;
}
.save-progress .bar-fill {
  background: var(--fbr-accent); height: 100%; width: 0%; transition: width .3s;
}

/* ── Toast ── */
.toast-dock { position: fixed; top: 16px; right: 16px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; }
.toast {
  background: #fff; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,.15);
  padding: 10px 14px; min-width: 260px; max-width: 360px;
  display: flex; align-items: flex-start; gap: 10px;
  border-left: 4px solid var(--gray-300);
  animation: toastIn .25s ease; font-size: 12.5px;
}
.toast.success { border-left-color: var(--fbr-accent); }
.toast.error   { border-left-color: var(--red); }
.toast.info    { border-left-color: var(--blue); }
.toast .t-icon { font-size: 15px; margin-top: 1px; }
.toast.success .t-icon { color: var(--fbr-green); }
.toast.error   .t-icon { color: var(--red); }
.toast.info    .t-icon { color: var(--blue); }
.toast .t-body { flex: 1; }
.toast .t-title { font-weight: 700; color: var(--gray-800); margin-bottom: 2px; }
.toast .t-msg   { color: var(--gray-500); font-size: 11.5px; }
.toast .t-close { background: none; border: none; color: var(--gray-400); cursor: pointer; font-size: 14px; padding: 0 2px; }
@keyframes toastIn { from { transform: translateX(110%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* ── Loading overlay ── */
.overlay {
  position: fixed; inset: 0; background: rgba(255,255,255,.8);
  display: flex; align-items: center; justify-content: center;
  z-index: 9990; opacity: 0; visibility: hidden; transition: all .2s;
}
.overlay.show { opacity: 1; visibility: visible; }
.overlay .spin-box { text-align: center; }
.spin-ring {
  width: 40px; height: 40px; border: 3px solid var(--gray-200);
  border-top-color: var(--fbr-green); border-radius: 50%;
  animation: spin .7s linear infinite; margin: 0 auto 10px;
}
@keyframes spin { to { transform: rotate(360deg); } }
.overlay .spin-label { font-size: 13px; color: var(--gray-500); font-weight: 600; }

/* ── Dirty counter badge ── */
.dirty-badge {
  background: var(--amber); color: #fff; border-radius: 10px;
  padding: 2px 8px; font-size: 11px; font-weight: 700;
  display: none;
}
.dirty-badge.show { display: inline-block; }

/* ── Column widths ── */
.w-code  { width: 90px;  }
.w-name  { min-width: 160px; }
.w-comp  { width: 110px; }
.w-cat   { width: 110px; }
.w-num   { width: 80px;  }
.w-hs    { width: 110px; }
.w-st    { width: 180px; }
.w-sro   { width: 190px; }
.w-sros  { width: 80px;  }
.w-mrp   { width: 90px;  }

/* ── Analysis Panel ── */
.analysis-panel {
  border: 2px solid var(--fbr-border); border-radius: var(--radius);
  background: #fff; margin-bottom: 16px; overflow: hidden;
}
.analysis-panel .ap-head {
  background: linear-gradient(135deg, #064e3b, #065f46);
  color: #fff; padding: 12px 18px; display: flex; align-items: center; gap: 10px;
  cursor: pointer; user-select: none;
}
.analysis-panel .ap-head h3 { font-size: 13px; font-weight: 700; flex: 1; }
.analysis-panel .ap-head .badge-new {
  background: var(--fbr-accent); color: var(--fbr-dark);
  font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: 10px;
}
.analysis-panel .ap-body { padding: 16px; display: none; }
.analysis-panel .ap-body.open { display: block; }

.date-row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 14px; }
.date-row .f-group { flex: 1; min-width: 140px; max-width: 200px; }

.hs-grid { display: flex; flex-direction: column; gap: 12px; }
.hs-card {
  border: 1px solid var(--gray-200); border-radius: 8px; overflow: hidden;
}
.hs-card-head {
  background: var(--gray-50); padding: 10px 14px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.hs-code-badge {
  background: var(--fbr-dark); color: #fff; font-family: monospace;
  font-size: 13px; font-weight: 700; padding: 4px 10px; border-radius: 5px;
  letter-spacing: 1px;
}
.hs-stats { display: flex; gap: 12px; flex-wrap: wrap; }
.hs-stat { font-size: 11.5px; color: var(--gray-500); }
.hs-stat strong { color: var(--gray-800); font-weight: 700; }
.rate-badge {
  padding: 3px 10px; border-radius: 10px; font-size: 11px; font-weight: 700;
  margin-left: auto;
}
.rate-badge.reduced { background: #fef3c7; color: #92400e; }
.rate-badge.standard { background: #dbeafe; color: #1e40af; }

.hs-card-body { padding: 12px 14px; }
.sro-section { margin-top: 8px; }
.sro-title { font-size: 11px; font-weight: 700; color: var(--fbr-green); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px; }
.sro-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.sro-table th { background: var(--gray-100); padding: 5px 8px; text-align: left; font-size: 11px; color: var(--gray-500); font-weight: 600; }
.sro-table td { padding: 5px 8px; border-bottom: 1px solid var(--gray-100); }
.sro-table td:first-child { font-weight: 600; font-family: monospace; color: var(--fbr-green); width: 80px; }
.apply-sro-btn {
  background: var(--fbr-green); color: #fff; border: none; border-radius: 5px;
  padding: 3px 10px; font-size: 11px; font-weight: 600; cursor: pointer;
  float: right; margin-top: -2px; transition: background .15s;
}
.apply-sro-btn:hover { background: var(--fbr-mid); }

.no-sro-msg { color: var(--gray-500); font-size: 12px; font-style: italic; }

.date-summary {
  background: var(--fbr-light); border: 1px solid var(--fbr-border);
  border-radius: 6px; padding: 8px 12px; font-size: 12px; color: var(--fbr-dark);
  margin-bottom: 12px; display: none;
}
.date-summary strong { font-weight: 700; }


/* ── Invoice Table ── */
.inv-tabs { display: flex; gap: 2px; margin-bottom: 0; }
.inv-tab {
  padding: 7px 16px; font-size: 12px; font-weight: 600; cursor: pointer;
  border-radius: 6px 6px 0 0; border: 1px solid var(--gray-200); border-bottom: none;
  background: var(--gray-100); color: var(--gray-500); transition: all .15s;
}
.inv-tab.active { background: #fff; color: var(--fbr-green); border-color: var(--gray-200); }

.inv-tab-content { display: none; }
.inv-tab-content.active { display: block; }

.inv-table-wrap { overflow-x: auto; max-height: 420px; overflow-y: auto; border: 1px solid var(--gray-200); border-radius: 0 6px 6px 6px; }
.inv-table {
  width: 100%; border-collapse: collapse; font-size: 12px; min-width: 900px;
}
.inv-table thead th {
  background: var(--fbr-dark); color: #fff; padding: 8px 10px;
  text-align: left; font-size: 11px; font-weight: 600; position: sticky; top: 0; z-index: 2;
  white-space: nowrap;
}
.inv-table tbody tr { border-bottom: 1px solid var(--gray-100); transition: background .1s; }
.inv-table tbody tr:hover { background: #f0fdf4; }
.inv-table td { padding: 6px 10px; vertical-align: middle; }
.inv-table td.mono { font-family: monospace; font-size: 11px; color: var(--gray-500); }
.inv-table td.fiscal { font-family: monospace; font-size: 10.5px; color: var(--fbr-green); font-weight: 700; }
.inv-table td .val { font-weight: 600; }
.inv-table td .tax-val { color: var(--fbr-green); font-size: 11px; }
.hs-pill {
  display: inline-block; background: var(--fbr-light); color: var(--fbr-dark);
  border: 1px solid var(--fbr-border); border-radius: 4px;
  padding: 1px 6px; font-size: 10px; font-weight: 700; font-family: monospace;
  margin: 1px;
}
.ap-info-note {
  background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 6px;
  padding: 8px 12px; font-size: 12px; color: #1e40af; margin-bottom: 12px;
  display: flex; gap: 8px; align-items: flex-start;
}
.ap-info-note i { margin-top: 1px; flex-shrink: 0; }

/* ── IRIS Import Panel ── */
.iris-panel {
  border: 2px solid #c7d2fe; border-radius: var(--radius);
  background: #fff; margin-bottom: 16px; overflow: hidden;
}
.iris-panel .ip-head {
  background: linear-gradient(135deg, #1e1b4b, #312e81);
  color: #fff; padding: 12px 18px; display: flex; align-items: center; gap: 10px;
  cursor: pointer; user-select: none;
}
.iris-panel .ip-head h3 { font-size: 13px; font-weight: 700; flex: 1; }
.iris-panel .ip-head .badge-iris {
  background: #a5b4fc; color: #1e1b4b;
  font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: 10px;
}
.iris-panel .ip-body { padding: 16px; display: none; }
.iris-panel .ip-body.open { display: block; }

.upload-zone {
  border: 2px dashed #a5b4fc; border-radius: 8px;
  padding: 24px; text-align: center; cursor: pointer;
  transition: border .2s, background .2s; background: #f5f3ff;
  margin-bottom: 14px;
}
.upload-zone:hover { border-color: #6366f1; background: #ede9fe; }
.upload-zone.drag-over { border-color: #4f46e5; background: #e0e7ff; }
.upload-zone i { font-size: 28px; color: #6366f1; margin-bottom: 8px; display: block; }
.upload-zone p { font-size: 13px; color: #4338ca; margin: 0; }
.upload-zone .u-hint { font-size: 11px; color: #818cf8; margin-top: 4px; }

.iris-steps {
  background: #f5f3ff; border: 1px solid #c7d2fe; border-radius: 6px;
  padding: 10px 14px; margin-bottom: 14px; font-size: 12px; color: #3730a3;
}
.iris-steps ol { margin: 6px 0 0 16px; }
.iris-steps li { margin-bottom: 3px; }

.hs-freq-table { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 10px; }
.hs-freq-table th { background: #1e1b4b; color: #fff; padding: 6px 10px; text-align: left; font-size: 11px; }
.hs-freq-table td { padding: 6px 10px; border-bottom: 1px solid #e0e7ff; }
.hs-freq-table td:first-child { font-family: monospace; font-weight: 700; color: #4338ca; }
.hs-freq-table tr:hover { background: #f5f3ff; }
.freq-bar {
  display: inline-block; background: #818cf8; border-radius: 3px;
  height: 8px; vertical-align: middle; margin-left: 8px; transition: width .3s;
}
.apply-hs-btn {
  background: #4f46e5; color: #fff; border: none; border-radius: 5px;
  padding: 3px 10px; font-size: 11px; font-weight: 600; cursor: pointer;
  transition: background .15s; float: right;
}
.apply-hs-btn:hover { background: #3730a3; }

.iris-raw-table-wrap { overflow-x: auto; max-height: 300px; overflow-y: auto; margin-top: 12px; border: 1px solid #c7d2fe; border-radius: 6px; }
.iris-raw-table { width: 100%; border-collapse: collapse; font-size: 11px; min-width: 800px; }
.iris-raw-table th { background: #312e81; color: #fff; padding: 6px 8px; text-align: left; position: sticky; top: 0; white-space: nowrap; }
.iris-raw-table td { padding: 5px 8px; border-bottom: 1px solid #e0e7ff; }
.iris-raw-table tr:hover { background: #f5f3ff; }
.iris-msg { font-size: 12px; padding: 8px 12px; border-radius: 6px; margin-bottom: 10px; }
.iris-msg.ok { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.iris-msg.warn { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }

/* ── Page-level tab group ── */
.page-tabs {
  display: flex; gap: 3px; flex-wrap: wrap; margin-bottom: 0; align-items: flex-end;
}
.page-tab {
  padding: 6px 14px; font-size: 12px; font-weight: 600; cursor: pointer;
  border-radius: 6px 6px 0 0; border: 1px solid var(--gray-200); border-bottom: none;
  background: var(--gray-100); color: var(--gray-500); transition: all .15s;
  display: flex; align-items: center; gap: 5px;
}
.page-tab.active { background: #fff; color: var(--fbr-green); border-color: var(--gray-200); }
.page-tab .tab-badge {
  background: var(--fbr-accent); color: var(--fbr-dark);
  border-radius: 10px; padding: 0 6px; font-size: 10px; font-weight: 800;
}
.page-panel { display: none; }
.page-panel.active { display: block; }
.page-tabs-wrap {
  border-bottom: 1px solid var(--gray-200); margin-bottom: 14px;
  display: flex; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; gap: 4px;
}

/* ── Inline Add Panel ── */
.iadd-panel {
  background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); margin-bottom: 14px; overflow: hidden;
}
.iadd-head {
  background: linear-gradient(135deg, #0a2a1e 0%, #145c40 100%);
  color: #fff; padding: 10px 16px;
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 700;
}
.iadd-head .badge-inline {
  background: var(--fbr-accent); color: var(--fbr-dark);
  font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: 10px;
}
.iadd-body { padding: 12px 14px; }

.iadd-grid {
  display: grid;
  grid-template-columns: 110px 1fr 150px 150px 80px 70px;
  gap: 6px 8px; align-items: flex-end;
}
.iadd-grid-row2 {
  display: grid;
  grid-template-columns: 120px 200px 180px 80px 80px;
  gap: 6px 8px; align-items: flex-end; margin-top: 6px;
}
@media(max-width:1000px){
  .iadd-grid      { grid-template-columns: 110px 1fr 140px 140px; }
  .iadd-grid-row2 { grid-template-columns: 110px 1fr 140px 140px; }
}

.iadd-field { display: flex; flex-direction: column; gap: 3px; }
.iadd-label {
  font-size: 10px; font-weight: 700; color: var(--gray-500);
  text-transform: uppercase; letter-spacing: .4px; white-space: nowrap;
}
.iadd-label .req { color: var(--red); margin-left: 2px; }
.iadd-ctrl {
  border: 1.5px solid var(--gray-300); border-radius: 5px;
  padding: 6px 8px; font-size: 12px; color: var(--gray-800);
  background: #fff; transition: border .15s, box-shadow .15s; width: 100%;
}
.iadd-ctrl:focus {
  outline: none; border-color: var(--fbr-green);
  box-shadow: 0 0 0 3px rgba(15,122,63,.12);
}
.iadd-ctrl.inp-error { border-color: var(--red) !important; background: #fff0f0; }
.iadd-ctrl[type="number"] { text-align: right; }

/* select2 inside iadd */
.iadd-body .select2-container { width: 100% !important; }
.iadd-body .select2-selection--single {
  height: 32px !important; border: 1.5px solid var(--gray-300) !important; border-radius: 5px !important;
}
.iadd-body .select2-selection--single .select2-selection__rendered { line-height: 30px !important; font-size: 12px; padding-left: 8px; }
.iadd-body .select2-selection--single .select2-selection__arrow { height: 30px !important; }
.iadd-body .select2-container--focus .select2-selection--single,
.iadd-body .select2-container--open  .select2-selection--single {
  border-color: var(--fbr-green) !important;
  box-shadow: 0 0 0 3px rgba(15,122,63,.12) !important;
}

/* mrp-setting toggle row */
.iadd-mrp-row {
  display: flex; align-items: center; gap: 8px; margin-top: 10px;
  background: #f0fdf4; border: 1px solid var(--fbr-border); border-radius: 6px;
  padding: 6px 12px; font-size: 12px; color: var(--fbr-dark);
}
.iadd-mrp-row label { margin: 0; cursor: pointer; font-weight: 600; }
.iadd-mrp-row input[type="checkbox"] { width: 14px; height: 14px; accent-color: var(--fbr-green); cursor: pointer; }

.iadd-actions { display: flex; align-items: flex-end; gap: 6px; }
.btn-iadd-save {
  background: var(--fbr-green); color: #fff; border: none; border-radius: 6px;
  padding: 7px 14px; font-size: 12px; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; gap: 5px; white-space: nowrap;
  transition: background .15s, transform .1s;
}
.btn-iadd-save:hover { background: var(--fbr-mid); }
.btn-iadd-save:active { transform: scale(.97); }
.btn-iadd-clear {
  background: var(--gray-200); color: var(--gray-700); border: none; border-radius: 6px;
  padding: 7px 10px; font-size: 12px; font-weight: 600; cursor: pointer;
  transition: background .15s;
}
.btn-iadd-clear:hover { background: var(--gray-300); }

.iadd-status {
  font-size: 11.5px; color: var(--gray-500); margin-top: 6px; min-height: 18px;
  display: flex; align-items: center; gap: 6px;
}
.iadd-status.ok { color: var(--fbr-green); }
.iadd-status.err { color: var(--red); }

/* ── IRIS sub-tabs ── */
.iris-subtabs { display:flex; gap:2px; margin-bottom:0; }
.iris-subtab {
  padding:5px 13px; font-size:11.5px; font-weight:600; cursor:pointer;
  border-radius:5px 5px 0 0; border:1px solid var(--gray-200); border-bottom:none;
  background:var(--gray-100); color:var(--gray-500); transition:all .15s;
  display:flex; align-items:center; gap:5px;
}
.iris-subtab.active { background:#fff; color:var(--fbr-green); }
.iris-subpanel { display:none; }
.iris-subpanel.active { display:block; }
.iris-subtabs-wrap { border-bottom:1px solid var(--gray-200); margin-bottom:12px; }

/* ── Import Products ── */
.imp-upload-zone {
  border:2px dashed #a5b4fc; border-radius:8px; padding:20px; text-align:center;
  cursor:pointer; background:#f5f3ff; transition:all .2s; margin-bottom:10px;
}
.imp-upload-zone:hover, .imp-upload-zone.drag { border-color:#6366f1; background:#ede9fe; }
.imp-upload-zone i { font-size:24px; color:#6366f1; margin-bottom:6px; display:block; }
.imp-upload-zone p { margin:0; font-size:12px; color:#4338ca; font-weight:600; }
.imp-upload-zone .u-hint { color:#818cf8; font-size:11px; font-weight:400; margin-top:3px; }

.imp-preview { margin-top:10px; }
.imp-section-title {
  font-size:12px; font-weight:700; padding:7px 10px; border-radius:6px 6px 0 0;
  display:flex; align-items:center; gap:7px; margin-top:12px;
}
.imp-section-title.new-title  { background:#dcfce7; color:#166534; }
.imp-section-title.upd-title  { background:#dbeafe; color:#1e40af; }
.imp-section-title .imp-count { font-weight:800; }

.imp-table-wrap { overflow-x:auto; border:1px solid var(--gray-200); border-top:none; border-radius:0 0 6px 6px; margin-bottom:4px; }
.imp-table {
  width:100%; border-collapse:collapse; font-size:11.5px; min-width:760px;
}
.imp-table th {
  background:#f8fafc; color:var(--gray-600); font-weight:700; font-size:10.5px;
  text-transform:uppercase; letter-spacing:.3px; padding:6px 8px;
  border-bottom:1px solid var(--gray-200); white-space:nowrap; position:sticky; top:0;
}
.imp-table td { padding:5px 7px; border-bottom:1px solid #f1f5f9; vertical-align:middle; }
.imp-table tr:last-child td { border-bottom:none; }
.imp-table tr.unchecked td { opacity:.45; }
.imp-table input[type="text"],
.imp-table input[type="number"] {
  border:1px solid var(--gray-200); border-radius:4px; padding:3px 5px;
  font-size:11.5px; width:100%; background:#fff;
}
.imp-table input[type="text"]:focus,
.imp-table input[type="number"]:focus {
  outline:none; border-color:var(--fbr-green); box-shadow:0 0 0 2px rgba(15,122,63,.1);
}
.imp-table .stock-badge {
  background:#dbeafe; color:#1e40af; border-radius:10px;
  padding:1px 7px; font-size:10.5px; font-weight:700; white-space:nowrap;
}
.imp-table .new-badge {
  background:#dcfce7; color:#166534; border-radius:10px;
  padding:1px 7px; font-size:10.5px; font-weight:700;
}
.imp-table td.chk-col { width:28px; text-align:center; }
.imp-table input[type="checkbox"] { width:14px; height:14px; accent-color:var(--fbr-green); cursor:pointer; }

.imp-actions {
  display:flex; align-items:center; gap:10px; margin-top:10px; flex-wrap:wrap;
  padding:10px 0;
}
.btn-imp-run {
  background:var(--fbr-green); color:#fff; border:none; border-radius:6px;
  padding:8px 18px; font-size:12.5px; font-weight:700; cursor:pointer;
  display:flex; align-items:center; gap:6px; transition:background .15s;
}
.btn-imp-run:disabled { background:var(--gray-300); cursor:not-allowed; }
.btn-imp-run:not(:disabled):hover { background:var(--fbr-mid); }

.imp-result {
  margin-top:8px; padding:10px 14px; border-radius:7px; font-size:12px;
  display:none;
}
.imp-result.ok  { background:#dcfce7; color:#166534; border:1px solid #bbf7d0; }
.imp-result.err { background:#fee2e2; color:#991b1b; border:1px solid #fca5a5; }
.imp-progress { font-size:11.5px; color:var(--gray-500); display:flex; align-items:center; gap:6px; }

</style>
{% endblock %}

{% block content %}
<div class="di-wrap">

  <!-- Header -->
  <!-- dirtyBadge moved to tab bar area -->


  <!-- ── Page-level tabs ── -->
  <div class="page-tabs-wrap">
    <div class="page-tabs" id="pageTabs">
      <div class="page-tab active" data-tab="bulk" onclick="switchPageTab('bulk')">
        <i class="fas fa-table"></i> Bulk Edit
      </div>
      <div class="page-tab" data-tab="addprod" onclick="switchPageTab('addprod')">
        <i class="fas fa-plus-circle"></i> Add Inline Product
        <span class="tab-badge" id="tabAddBadge" style="display:none">NEW</span>
      </div>
      <div class="page-tab" data-tab="iris" onclick="switchPageTab('iris')">
        <i class="fas fa-file-import"></i> IRIS Import
      </div>
      <div class="page-tab" data-tab="analysis" onclick="switchPageTab('analysis')">
        <i class="fas fa-chart-bar"></i> HS Analysis
      </div>
    </div>
    <div style="margin-left:auto;display:flex;align-items:center;padding:0 4px 4px;">
      <span class="dirty-badge" id="dirtyBadge">0 unsaved</span>
    </div>
  </div>

  <!-- ════════════ ADD INLINE PRODUCT panel ════════ -->
  <div class="page-panel" id="panelAddprod">

    <div class="iadd-panel">
      <div class="iadd-head">
        <i class="fas fa-plus-circle" style="color:var(--fbr-accent);font-size:14px;"></i>
        Add Inline Product
        <span class="badge-inline">FBR-Ready</span>
        <small style="margin-left:auto;opacity:.65;font-weight:400;font-size:11px;">
          Enter → next field &nbsp;|&nbsp; Last field Enter / Ctrl+S → save
        </small>
      </div>
      <div class="iadd-body">

        <!-- Row 1: core fields -->
        <!-- Row 1: product identity + pricing -->
        <div class="iadd-grid" id="iaddGrid">

          <!-- product_code -->
          <div class="iadd-field">
            <label class="iadd-label">Code <span class="req">*</span></label>
            <input type="text" class="iadd-ctrl" id="iadd_code" placeholder="PRD-001" maxlength="50" autocomplete="off">
          </div>

          <!-- name (select2 tags+ajax) -->
          <div class="iadd-field">
            <label class="iadd-label">Name <span class="req">*</span></label>
            <select id="iadd_name" class="iadd-ctrl" style="width:100%;"></select>
          </div>

          <!-- company (select2 ajax) -->
          <div class="iadd-field">
            <label class="iadd-label">Company</label>
            <select id="iadd_company" class="iadd-ctrl" style="width:100%;"></select>
          </div>

          <!-- category (select2 ajax) -->
          <div class="iadd-field">
            <label class="iadd-label">Category</label>
            <select id="iadd_category" class="iadd-ctrl" style="width:100%;"></select>
          </div>

          <!-- l_sale_price -->
          <div class="iadd-field">
            <label class="iadd-label">Sale Price <span class="req">*</span></label>
            <input type="number" class="iadd-ctrl" id="iadd_lsp" placeholder="0" min="0" step="any">
          </div>

          <!-- gst -->
          <div class="iadd-field">
            <label class="iadd-label">GST %</label>
            <input type="number" class="iadd-ctrl" id="iadd_gst" placeholder="18" min="0" max="100" step="0.5" value="18">
          </div>

        </div><!-- /iadd-grid row1 -->

        <!-- Row 2: FBR-specific fields -->
        <div class="iadd-grid-row2" id="iaddGrid2">

          <!-- further_tax -->
          <div class="iadd-field">
            <label class="iadd-label">F.Tax %</label>
            <input type="number" class="iadd-ctrl" id="iadd_further_tax" placeholder="0" min="0" max="100" step="0.5" value="0">
          </div>

          <!-- fbr_hs_code -->
          <div class="iadd-field">
            <label class="iadd-label">HS Code <span style="color:var(--fbr-green);font-size:9px;">FBR</span></label>
            <input type="text" class="iadd-ctrl" id="iadd_hs_code" placeholder="8418.2190" maxlength="12" autocomplete="off">
          </div>

          <!-- fbr_sale_type -->
          <div class="iadd-field">
            <label class="iadd-label">Sale Type <span style="color:var(--fbr-green);font-size:9px;">FBR</span></label>
            <select class="iadd-ctrl" id="iadd_sale_type">
              <option value="">— Not Set —</option>
            </select>
          </div>

          <!-- fbr_sro_schedule -->
          <div class="iadd-field iadd-sro-wrap" id="iadd_sro_wrap">
            <label class="iadd-label">SRO Schedule</label>
            <input type="text" class="iadd-ctrl" id="iadd_sro_schedule" placeholder="EIGHTH SCHEDULE Table 1">
          </div>

          <!-- fbr_sro_item_serial -->
          <div class="iadd-field iadd-sro-wrap">
            <label class="iadd-label">SRO Item #</label>
            <input type="text" class="iadd-ctrl" id="iadd_sro_item" placeholder="19" maxlength="10">
          </div>

        </div><!-- /iadd-grid row2 -->

        <!-- MRP row — shows when sale type is 3rd/Reduced -->
        <div class="iadd-mrp-row" id="iaddMrpRow" style="margin-top:8px;display:none;">
          <i class="fas fa-tag" style="color:var(--fbr-green);font-size:12px;flex-shrink:0;"></i>
          <label class="iadd-label" style="margin:0;white-space:nowrap;">MRP Setting:</label>
          <select class="iadd-ctrl" id="iadd_mrp_setting" style="width:210px;flex-shrink:0;">
            <option value="same">Same as Sale Price (auto)</option>
            <option value="custom">Custom MRP</option>
          </select>
          <label class="iadd-label" style="margin:0;white-space:nowrap;" id="iaddMrpLabel">FBR MRP:</label>
          <input type="number" class="iadd-ctrl" id="iadd_mrp" placeholder="0" min="0" step="1"
            style="width:110px;" readonly>
          <!-- hidden checkbox kept for JS compat -->
          <input type="checkbox" id="iadd_mrp_same" checked style="display:none;">
        </div>

        <!-- action row -->
        <div style="display:flex;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap;">
          <button class="btn-iadd-save" id="btnIaddSave" onclick="iaddSave()">
            <i class="fas fa-save"></i> Save Product
          </button>
          <button class="btn-iadd-clear" onclick="iaddClear(true)">
            <i class="fas fa-times"></i> Clear
          </button>
          <div class="iadd-status" id="iaddStatus"></div>
        </div>

      </div><!-- /iadd-body -->
    </div><!-- /iadd-panel -->

  </div><!-- /panelAddprod -->

  <!-- ════════════ BULK EDIT panel ════════════ -->
  <!-- ════════════ ANALYSIS panel ════════════ -->
  <div class="page-panel" id="panelAnalysis">
  <!-- FBR HS Analysis Panel -->
  <div class="analysis-panel" id="analysisPanel">
    <div class="ap-head" id="apHead">
      <i class="fas fa-chart-bar" style="font-size:15px;color:var(--fbr-accent);"></i>
      <h3>FBR Invoice History Analysis &amp; SRO Lookup</h3>
      <span class="badge-new">TOOL</span>
      <i class="fas fa-chevron-down" id="apChevron" style="font-size:12px;transition:transform .2s;"></i>
    </div>
    <div class="ap-body" id="apBody">
      <div class="date-row">
        <div class="f-group">
          <label class="f-label">Date From</label>
          <input type="date" class="f-ctrl" id="hsDateFrom">
        </div>
        <div class="f-group">
          <label class="f-label">Date To</label>
          <input type="date" class="f-ctrl" id="hsDateTo">
        </div>
        <div style="display:flex;gap:8px;align-items:flex-end;">
          <button class="btn btn-load" id="btnAnalyze" style="padding:8px 16px;">
            <i class="fas fa-search"></i> Analyze Invoices
          </button>
          <button class="btn btn-secondary" onclick="setLastMonth()">
            <i class="fas fa-calendar-alt"></i> Last 30 Days
          </button>
        </div>
      </div>
      <div class="date-summary" id="apSummary"></div>
      <!-- Info note -->
      <div class="ap-info-note">
        <i class="fas fa-info-circle"></i>
        <span>Yeh tool aapke <strong>successfully posted FBR invoices</strong> ka analysis karta hai. Date range select karein aur Analyze karein — invoices list + HS code summary + SRO details milenge.</span>
      </div>

      <!-- Tabs -->
      <div class="inv-tabs" id="invTabs" style="display:none;">
        <div class="inv-tab active" onclick="switchTab('invoices')"><i class="fas fa-file-invoice" style="margin-right:5px;"></i>Invoice List <span id="tabInvCount" style="background:var(--fbr-accent);color:var(--fbr-dark);border-radius:10px;padding:1px 7px;font-size:10px;margin-left:5px;">0</span></div>
        <div class="inv-tab" onclick="switchTab('hs')"><i class="fas fa-barcode" style="margin-right:5px;"></i>HS Code Summary <span id="tabHsCount" style="background:var(--fbr-accent);color:var(--fbr-dark);border-radius:10px;padding:1px 7px;font-size:10px;margin-left:5px;">0</span></div>
      </div>

      <!-- Invoice List Tab -->
      <div class="inv-tab-content active" id="tabInvoices">
        <div class="inv-table-wrap">
          <table class="inv-table" id="invTable">
            <thead>
              <tr>
                <th>#</th>
                <th>Date</th>
                <th>Invoice No</th>
                <th>FBR Fiscal No</th>
                <th>Buyer</th>
                <th>CNIC</th>
                <th>HS Codes</th>
                <th>Items</th>
                <th style="text-align:right;">Sale Value</th>
                <th style="text-align:right;">Tax</th>
              </tr>
            </thead>
            <tbody id="invTableBody">
              <tr><td colspan="10" style="text-align:center;padding:30px;color:var(--gray-400);">
                <i class="fas fa-search" style="font-size:20px;opacity:.3;display:block;margin-bottom:8px;"></i>
                Select date range and click Analyze
              </td></tr>
            </tbody>
          </table>
        </div>
      </div>

      <!-- HS Summary Tab -->
      <div class="inv-tab-content" id="tabHs">
        <div class="hs-grid" id="hsGrid">
          <div style="color:var(--gray-400);font-size:13px;text-align:center;padding:20px;">
            <i class="fas fa-barcode" style="font-size:20px;opacity:.3;display:block;margin-bottom:8px;"></i>
            HS code summary will appear here after analysis.
          </div>
        </div>
      </div>
    </div>
  </div>


  </div><!-- /panelAnalysis -->

  <!-- ════════════ IRIS panel ════════════ -->
  <div class="page-panel" id="panelIris">
  <!-- IRIS Purchase Invoice Import -->
  <div class="iris-panel" id="irisPanel">
    <div class="ip-head" id="irisHead">
      <i class="fas fa-file-import" style="font-size:15px;color:#a5b4fc;"></i>
      <h3>IRIS Purchase Invoice Import — HS Code Extractor</h3>
      <span class="badge-iris">IRIS</span>
      <i class="fas fa-chevron-down" id="irisChevron" style="font-size:12px;transition:transform .2s;"></i>
    </div>
    <div class="ip-body" id="irisBody">

      <!-- Sub-tabs -->
      <div class="iris-subtabs-wrap">
        <div class="iris-subtabs">
          <div class="iris-subtab active" data-itab="hs" onclick="switchIrisTab('hs')">
            <i class="fas fa-barcode"></i> HS Extractor
          </div>
          <div class="iris-subtab" data-itab="import" onclick="switchIrisTab('import')">
            <i class="fas fa-file-import"></i> Import Products
          </div>
        </div>
      </div>

      <!-- ══ Sub-panel: HS Extractor (existing) ═══════════════════════════ -->
      <div class="iris-subpanel active" id="irisSubHs">

        <div class="iris-steps">
          <strong><i class="fas fa-list-ol" style="margin-right:5px;"></i>IRIS se Excel kaise download karein:</strong>
          <ol>
            <li>IRIS portal kholen → <strong>Sales Tax → Invoices</strong></li>
            <li>Trans Type: <strong>Purchase</strong> → Search karein</li>
            <li>Upar <strong>"Download Sales Invoice (Latest File Version)"</strong> button dabayein</li>
            <li>Downloaded Excel file yahan upload karein</li>
          </ol>
        </div>

        <!-- Upload Zone -->
        <div class="upload-zone" id="irisUploadZone" onclick="document.getElementById('irisFileInput').click()">
          <i class="fas fa-cloud-upload-alt"></i>
          <p><strong>Click to upload</strong> ya file yahan drag karein</p>
          <p class="u-hint">Supported: .xlsx, .xls, .csv (IRIS export)</p>
        </div>
        <input type="file" id="irisFileInput" accept=".xlsx,.xls,.csv" style="display:none;">

        <!-- Results -->
        <div id="irisResults" style="display:none;">
          <div id="irisMsg" class="iris-msg ok"></div>

          <div id="irisHsSection" style="display:none;">
            <div class="sro-title" style="margin-bottom:6px;">
              <i class="fas fa-barcode" style="margin-right:5px;"></i>
              HS Codes Found in Purchase Invoices
              <span style="font-weight:400;color:var(--gray-500);font-size:11px;margin-left:8px;">Click "Apply" to set HS code on loaded products</span>
            </div>
            <table class="hs-freq-table" id="irisHsTable">
              <thead><tr><th>HS Code / Sale Type</th><th>Items</th><th>Total Qty</th><th>Rate</th><th>Seller</th><th>Sample Products</th><th>Action</th></tr></thead>
              <tbody id="irisHsTbody"></tbody>
            </table>
          </div>

          <div style="margin-top:12px;">
            <button class="btn btn-secondary" style="font-size:11px;padding:5px 12px;" onclick="toggleIrisRaw()">
              <i class="fas fa-table"></i> Show Raw Data
            </button>
          </div>
          <div id="irisRawSection" style="display:none;">
            <div class="iris-raw-table-wrap">
              <table class="iris-raw-table" id="irisRawTable">
                <thead id="irisRawHead"></thead>
                <tbody id="irisRawBody"></tbody>
              </table>
            </div>
          </div>
        </div>

      </div><!-- /irisSubHs -->

      <!-- ══ Sub-panel: Import Products (new) ════════════════════════════ -->
      <div class="iris-subpanel" id="irisSubImport">

        <!-- Upload zone -->
        <div class="imp-upload-zone" id="impUploadZone" onclick="document.getElementById('impFileInput').click()">
          <i class="fas fa-file-excel"></i>
          <p><strong>Click to upload</strong> or drag IRIS Excel here</p>
          <p class="u-hint">.xlsx / .xls / .csv — IRIS Purchase Invoice export</p>
        </div>
        <input type="file" id="impFileInput" accept=".xlsx,.xls,.csv" style="display:none;">

        <!-- Status / progress -->
        <div id="impStatus" class="imp-progress" style="display:none;">
          <i class="fas fa-spinner fa-spin"></i> <span id="impStatusTxt">Parsing file...</span>
        </div>

        <!-- Preview -->
        <div id="impPreview" class="imp-preview" style="display:none;">

          <!-- NEW PRODUCTS section -->
          <div id="impNewSection" style="display:none;">
            <div class="imp-section-title new-title">
              <i class="fas fa-plus-circle"></i>
              New Products
              <span class="imp-count" id="impNewCount">0</span>
              <span style="font-weight:400;font-size:11px;margin-left:4px;">— will be created</span>
              <label style="margin-left:auto;font-size:11px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:5px;">
                <input type="checkbox" id="impCheckAllNew" checked onchange="impToggleAll('new',this.checked)"> Select All
              </label>
            </div>
            <div class="imp-table-wrap" style="max-height:320px;overflow-y:auto;">
              <table class="imp-table">
                <thead>
                  <tr>
                    <th class="chk-col"><i class="fas fa-check"></i></th>
                    <th>Product Name</th>
                    <th style="width:90px;">Code</th>
                    <th style="width:90px;">Sale Price</th>
                    <th style="width:50px;">GST%</th>
                    <th style="width:70px;">Qty</th>
                    <th style="width:90px;">HS Code</th>
                    <th>Sale Type</th>
                    <th>Seller / Company</th>
                  </tr>
                </thead>
                <tbody id="impNewBody"></tbody>
              </table>
            </div>
          </div>

          <!-- EXISTING PRODUCTS section -->
          <div id="impExistSection" style="display:none;">
            <div class="imp-section-title upd-title">
              <i class="fas fa-boxes"></i>
              Existing Products — Stock Update
              <span class="imp-count" id="impExistCount">0</span>
              <span style="font-weight:400;font-size:11px;margin-left:4px;">— present_stock will increase</span>
              <label style="margin-left:auto;font-size:11px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:5px;">
                <input type="checkbox" id="impCheckAllExist" checked onchange="impToggleAll('exist',this.checked)"> Select All
              </label>
            </div>
            <div class="imp-table-wrap" style="max-height:240px;overflow-y:auto;">
              <table class="imp-table">
                <thead>
                  <tr>
                    <th class="chk-col"><i class="fas fa-check"></i></th>
                    <th>Product Name</th>
                    <th>Code</th>
                    <th style="text-align:right;">Current Stock</th>
                    <th style="text-align:right;">+ Incoming</th>
                    <th style="text-align:right;">New Total</th>
                    <th>Seller</th>
                    <th>HS Code</th>
                  </tr>
                </thead>
                <tbody id="impExistBody"></tbody>
              </table>
            </div>
          </div>

          <!-- Action bar -->
          <div class="imp-actions">
            <button class="btn-imp-run" id="btnImpRun" onclick="impRun()" disabled>
              <i class="fas fa-file-import"></i>
              <span id="btnImpRunLabel">Import</span>
            </button>
            <button class="btn-iadd-clear" onclick="impReset()">
              <i class="fas fa-undo"></i> Reset
            </button>
            <span id="impSummaryLine" style="font-size:11.5px;color:var(--gray-500);"></span>
          </div>

          <!-- Result -->
          <div id="impResult" class="imp-result"></div>

        </div><!-- /impPreview -->

      </div><!-- /irisSubImport -->

    </div><!-- /ip-body -->
  </div><!-- /iris-panel -->

  </div><!-- /panelIris -->

  <!-- ════════════ BULK EDIT main ════════════ -->
  <div class="page-panel active" id="panelBulk">

  <!-- Filter Card -->
  <div class="di-card">
    <div class="di-card-head"><i class="fas fa-filter"></i> Load Products</div>
    <div class="di-card-body">
      <div class="filter-grid">
        <div class="f-group">
          <label class="f-label">Company</label>
          <select class="f-ctrl" id="filterCompany">
            <option value="">All Companies</option>
          </select>
        </div>
        <div class="f-group">
          <label class="f-label">Category</label>
          <select class="f-ctrl" id="filterCategory">
            <option value="">All Categories</option>
          </select>
        </div>
        <div class="f-group">
          <label class="f-label">Search by Name / Code</label>
          <input type="text" class="f-ctrl" id="filterSearch" placeholder="e.g. Dawlance, fridge...">
        </div>
        <div style="display:flex;align-items:flex-end;">
          <button class="btn btn-load" id="btnLoad">
            <i class="fas fa-cloud-download-alt"></i> Load Products
          </button>
        </div>
        <div style="display:flex;align-items:flex-end;">
          <button class="btn btn-secondary" id="btnClear" style="width:100%">
            <i class="fas fa-times"></i> Clear
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- Global Apply Bar -->
  <div class="global-bar" id="globalBar" style="display:none">
    <div class="g-item grow">
      <div class="g-label"><i class="fas fa-globe"></i> Apply HS Code to All</div>
      <div style="display:flex;gap:6px;">
        <input type="text" class="f-ctrl" id="globalHsCode" placeholder="e.g. 8418.2190" maxlength="12" style="flex:1;">
        <button class="apply-btn" id="btnApplyHs" title="Apply to all loaded products" style="margin-top:0;">
          <i class="fas fa-check-double"></i> Apply
        </button>
      </div>
    </div>
    <div class="g-item grow">
      <div class="g-label"><i class="fas fa-tags"></i> Apply Sale Type to All</div>
      <div style="display:flex;gap:6px;">
        <select class="f-ctrl" id="globalSaleType" style="flex:1;">
          <option value="">— Select Sale Type —</option>
        </select>
        <button class="apply-btn" id="btnApplySt" title="Apply to all loaded products" style="margin-top:0;">
          <i class="fas fa-check-double"></i> Apply
        </button>
      </div>
    </div>
    <div class="g-item grow">
      <div class="g-label"><i class="fas fa-percent"></i> Apply GST Rate to All</div>
      <div style="display:flex;gap:6px;">
        <input type="number" class="f-ctrl" id="globalGst" placeholder="e.g. 18" min="0" max="100" style="flex:1;">
        <button class="apply-btn" id="btnApplyGst" title="Apply to all loaded products" style="margin-top:0;">
          <i class="fas fa-check-double"></i> Apply
        </button>
      </div>
    </div>
  </div>

  <!-- Stats + Live Search -->
  <div class="stats-bar" id="statsBar" style="display:none">
    <div class="stat-pill"><span class="num" id="statTotal">0</span> loaded</div>
    <div class="stat-pill"><span class="num" id="statVisible">0</span> visible</div>
    <div class="stat-pill" id="statDirtyPill" style="display:none;background:#fef3c7;border-color:#fde68a;">
      <span class="num" id="statDirty" style="color:var(--amber)">0</span> changed
    </div>
    <div class="search-live">
      <i class="fas fa-search si"></i>
      <input type="text" id="liveSearch" placeholder="Filter visible rows...">
    </div>
  </div>

  <!-- Table -->
  <div class="di-card" id="tableCard" style="display:none">
    <div class="di-card-head">
      <i class="fas fa-table"></i> Products
      <span style="font-weight:400;color:var(--gray-500);margin-left:8px;font-size:11px;text-transform:none;">Click any cell to edit • Changed rows highlighted in yellow</span>
    </div>
    <div class="di-card-body" style="padding:0;">
      <div class="di-table-wrap">
        <table class="di-table" id="diTable">
          <thead>
            <tr>
              <th class="w-code">Code</th>
              <th class="w-name">Product Name</th>
              <th class="w-comp">Company</th>
              <th class="w-cat">Category</th>
              <th class="w-num">Buy Price</th>
              <th class="w-num">Sale Price</th>
              <th class="w-num col-fbr">GST %</th>
              <th class="w-num col-fbr">F.Tax %</th>
              <th class="w-hs col-fbr">HS Code<span class="th-sub">FBR Required</span></th>
              <th class="w-st col-fbr">Sale Type<span class="th-sub">FBR Required</span></th>
              <th class="w-sro col-fbr">SRO Schedule<span class="th-sub">Reduced Rate Only</span></th>
              <th class="w-sros col-fbr">SRO Item<span class="th-sub">Sr. No.</span></th>
              <th class="w-mrp col-fbr">MRP<span class="th-sub">3rd/Reduced</span></th>
            </tr>
          </thead>
          <tbody id="diTableBody">
            <tr>
              <td colspan="13">
                <div class="empty-state">
                  <i class="fas fa-box-open"></i>
                  <p>Use filters above and click <strong>Load Products</strong> to begin.</p>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <!-- Action Bar -->
  <div class="action-bar" id="actionBar" style="display:none">
    <button class="btn btn-primary" id="btnSave">
      <i class="fas fa-save"></i> Save Changes
    </button>
    <button class="btn btn-secondary" id="btnRevert">
      <i class="fas fa-undo"></i> Revert All
    </button>
    <span style="font-size:12px;color:var(--gray-500);margin-left:4px;" id="saveStatus"></span>
    <div class="save-progress" id="saveProgress" style="flex:1;">
      <div class="bar-track"><div class="bar-fill" id="barFill"></div></div>
    </div>
  </div>

</div><!-- /panelBulk -->

</div><!-- /di-wrap -->

<!-- Loading Overlay -->
<div class="overlay" id="overlay">
  <div class="spin-box">
    <div class="spin-ring"></div>
    <div class="spin-label" id="overlayLabel">Loading...</div>
  </div>
</div>

<!-- Toast Dock -->
<div class="toast-dock" id="toastDock"></div>
{% endblock %}

{% block javascripts %}{{ block.super }}
<script>
/* ════════════════════════════════════════════════════════════════
   FBR DI Bulk Edit — Main JS
   ════════════════════════════════════════════════════════════════ */

/* ── Global functions (called from HTML onclick / inline) ── */
function toggleAnalysis() {
  const body    = document.getElementById('apBody');
  const chevron = document.getElementById('apChevron');
  const open    = body.classList.toggle('open');
  chevron.style.transform = open ? 'rotate(180deg)' : '';
}

function setLastMonth() {
  const to   = new Date();
  const from = new Date(); from.setDate(from.getDate() - 30);
  document.getElementById('hsDateFrom').value = from.toISOString().split('T')[0];
  document.getElementById('hsDateTo').value   = to.toISOString().split('T')[0];
}

function applySroSchedule(hsCode, scheduleDesc) {
  const cleanHs = hsCode.replace('.','');
  let count = 0;
  document.querySelectorAll('input[data-field="fbr_hs_code"]').forEach(inp => {
    const rowHs = (inp.value || '').replace('.','');
    if (rowHs === cleanHs || inp.value === hsCode) {
      const id  = inp.dataset.id;
      const sroInp = document.querySelector(`input[data-field="fbr_sro_schedule"][data-id="${id}"]`);
      if (sroInp) {
        sroInp.value = scheduleDesc;
        sroInp.classList.add('changed');
        if (!window._dirtyRows) window._dirtyRows = {};
        if (!window._dirtyRows[id]) window._dirtyRows[id] = { id };
        window._dirtyRows[id].fbr_sro_schedule = scheduleDesc;
        sroInp.closest('tr').classList.add('dirty');
        count++;
      }
    }
  });
  if (window._updateDirtyCount) window._updateDirtyCount();
  if (window._toast) {
    if (count) window._toast('success', `Applied to ${count} product(s)`, `SRO Schedule: "${scheduleDesc}"`);
    else window._toast('info', 'No matching products in table', 'Load products with this HS code first.');
  }
}

function applySroItem(hsCode, itemDesc) {
  const cleanHs = hsCode.replace('.','');
  let count = 0;
  document.querySelectorAll('input[data-field="fbr_hs_code"]').forEach(inp => {
    const rowHs = (inp.value || '').replace('.','');
    if (rowHs === cleanHs || inp.value === hsCode) {
      const id  = inp.dataset.id;
      const sroInp = document.querySelector(`input[data-field="fbr_sro_item_serial"][data-id="${id}"]`);
      if (sroInp) {
        sroInp.value = itemDesc;
        sroInp.classList.add('changed');
        if (!window._dirtyRows) window._dirtyRows = {};
        if (!window._dirtyRows[id]) window._dirtyRows[id] = { id };
        window._dirtyRows[id].fbr_sro_item_serial = itemDesc;
        sroInp.closest('tr').classList.add('dirty');
        count++;
      }
    }
  });
  if (window._updateDirtyCount) window._updateDirtyCount();
  if (window._toast) {
    if (count) window._toast('success', `Applied to ${count} product(s)`, `SRO Item Sr. No: "${itemDesc}"`);
    else window._toast('info', 'No matching products in table', 'Load products with this HS code first.');
  }
}

function switchTab(tab) {
  document.querySelectorAll('.inv-tab').forEach((t,i) => {
    t.classList.toggle('active', (i===0 && tab==='invoices') || (i===1 && tab==='hs'));
  });
  document.getElementById('tabInvoices').classList.toggle('active', tab==='invoices');
  document.getElementById('tabHs').classList.toggle('active', tab==='hs');
}

function renderInvoiceTable(invoices) {
  const tbody2 = document.getElementById('invTableBody');
  if (!invoices.length) {
    tbody2.innerHTML = '<tr><td colspan="10" style="text-align:center;padding:20px;color:var(--gray-400);">No invoices found in this date range.</td></tr>';
    return;
  }
  tbody2.innerHTML = invoices.map((inv, i) => {
    const hsPills = (inv.hs_codes||'').split(',').map(h => h.trim()).filter(Boolean)
      .map(h => `<span class="hs-pill">${h}</span>`).join('');
    return `<tr>
      <td class="mono">${i+1}</td>
      <td style="white-space:nowrap;font-size:11.5px;">${inv.date||''}</td>
      <td class="mono">${inv.source_id||''}</td>
      <td class="fiscal">${inv.fiscal_no||'—'}</td>
      <td style="font-size:12px;">${inv.buyer||'Walk-in'}</td>
      <td class="mono">${inv.buyer_cnic||'—'}</td>
      <td>${hsPills}</td>
      <td style="text-align:center;">${inv.item_count||0}</td>
      <td style="text-align:right;"><span class="val">Rs.${(inv.total_value||0).toLocaleString()}</span></td>
      <td style="text-align:right;"><span class="tax-val">Rs.${(inv.total_tax||0).toLocaleString()}</span></td>
    </tr>`;
  }).join('');
}

function toggleIrisRaw() {
  const sec = document.getElementById('irisRawSection');
  sec.style.display = sec.style.display === 'none' ? '' : 'none';
}

(function(){
  'use strict';

  /* ── Config ── */
  const URLS = {
    load:   "{% url 'products:fbr_di_bulk_load' %}",
    save:   "{% url 'products:fbr_di_bulk_save' %}",
  };
  const SALE_TYPES = {{ sale_types|safe }};
  const COMPANIES  = {{ companies|safe }};
  const CATEGORIES = {{ categories|safe }};
  const CSRF_TOKEN = '{{ csrf_token }}';

  const SRO_TYPES = ['Goods at Reduced Rate'];
  const MRP_TYPES = ['3rd Schedule Goods', 'Goods at Reduced Rate'];

  /* ── State ── */
  let allRows   = [];      // raw product data from server
  let dirtyRows = {};      // {id: {field: value, ...}}
  window._dirtyRows = dirtyRows;
  let currentData = [];    // currently loaded rows

  /* ── DOM refs ── */
  const $ = id => document.getElementById(id);
  const filterCompany  = $('filterCompany');
  const filterCategory = $('filterCategory');
  const filterSearch   = $('filterSearch');
  const btnLoad        = $('btnLoad');
  const btnClear       = $('btnClear');
  const btnSave        = $('btnSave');
  const btnRevert      = $('btnRevert');
  const btnApplyHs     = $('btnApplyHs');
  const btnApplySt     = $('btnApplySt');
  const btnApplyGst    = $('btnApplyGst');
  const globalHsCode   = $('globalHsCode');
  const globalSaleType = $('globalSaleType');
  const globalGst      = $('globalGst');
  const liveSearch     = $('liveSearch');
  const tbody          = $('diTableBody');
  const overlay        = $('overlay');
  const dirtyBadge     = $('dirtyBadge');
  const statTotal      = $('statTotal');
  const statVisible    = $('statVisible');
  const statDirty      = $('statDirty');
  const statDirtyPill  = $('statDirtyPill');
  const globalBar      = $('globalBar');
  const statsBar       = $('statsBar');
  const tableCard      = $('tableCard');
  const actionBar      = $('actionBar');
  const saveStatus     = $('saveStatus');
  const saveProgress   = $('saveProgress');
  const barFill        = $('barFill');

  /* ── Init dropdowns ── */
  COMPANIES.forEach(c => {
    filterCompany.add(new Option(c.name, c.t_id));
  });
  CATEGORIES.forEach(c => {
    filterCategory.add(new Option(c.cat_name, c.cat_name));
  });
  SALE_TYPES.forEach(st => {
    globalSaleType.add(new Option(st, st));
  });

  /* ── Helpers ── */
  function showOverlay(msg='Loading...') {
    $('overlayLabel').textContent = msg;
    overlay.classList.add('show');
  }
  function hideOverlay() { overlay.classList.remove('show'); }

  window._toast = function(type, title, msg='', duration=3500) { toast(type, title, msg, duration); };
  function toast(type, title, msg='', duration=3500) {
    const icons = { success:'fa-check-circle', error:'fa-times-circle', info:'fa-info-circle' };
    const el = document.createElement('div');
    el.className = `toast ${type}`;
    el.innerHTML = `
      <i class="fas ${icons[type]||'fa-info-circle'} t-icon"></i>
      <div class="t-body"><div class="t-title">${title}</div><div class="t-msg">${msg}</div></div>
      <button class="t-close" onclick="this.closest('.toast').remove()"><i class="fas fa-times"></i></button>`;
    $('toastDock').prepend(el);
    setTimeout(() => el.remove(), duration);
  }

  function getSaleBadge(st) {
    if (!st) return '';
    let cls = 'badge-standard';
    if (st.includes('3rd')) cls = 'badge-3rd';
    else if (st.includes('Reduced')) cls = 'badge-reduced';
    else if (st.includes('zero')) cls = 'badge-zero';
    else if (st.includes('Exempt')) cls = 'badge-exempt';
    const short = st.replace('Goods at ','').replace(' (default)','').replace('Goods','Gds').replace('Schedule','Sched');
    return `<span class="sale-badge ${cls}">${short}</span>`;
  }

  function updateDirtyCount() {
    window._dirtyRows = dirtyRows;
    window._updateDirtyCount = updateDirtyCount;
    const count = Object.keys(dirtyRows).length;
    dirtyBadge.textContent = `${count} unsaved`;
    dirtyBadge.classList.toggle('show', count > 0);
    statDirty.textContent = count;
    statDirtyPill.style.display = count > 0 ? '' : 'none';
    btnSave.disabled = count === 0;
  }

  function markRowDirty(row, id) {
    if (!dirtyRows[id]) dirtyRows[id] = {};
    row.classList.add('dirty');
    updateDirtyCount();
  }

  function isSroType(saleType) { return SRO_TYPES.includes(saleType); }
  function isMrpType(saleType) { return MRP_TYPES.includes(saleType); }

  function updateRowSroVisibility(row) {
    const stSel = row.querySelector('.sel-sale-type');
    if (!stSel) return;
    const st = stSel.value;
    const sroInputs = row.querySelectorAll('.sro-field');
    const mrpInput  = row.querySelector('.mrp-field');
    sroInputs.forEach(el => {
      el.style.opacity = isSroType(st) ? '1' : '0.65';
      el.disabled = !isSroType(st) && !isMrpType(st) && el.classList.contains('mrp-field');
    });
    if (mrpInput) {
      mrpInput.style.opacity = isMrpType(st) ? '1' : '0.35';
    }
  }

  /* ── Render table ── */
  function renderTable(products) {
    if (!products.length) {
      tbody.innerHTML = `<tr><td colspan="13"><div class="empty-state"><i class="fas fa-search"></i><p>No products found for selected filters.</p></div></td></tr>`;
      return;
    }

    const rows = products.map(p => {
      const id = p.id;
      const stOptions = SALE_TYPES.map(st =>
        `<option value="${st}" ${p.fbr_sale_type===st?'selected':''}>${st}</option>`
      ).join('');

      return `<tr data-id="${id}" data-name="${(p.name||'').toLowerCase()}" data-code="${(p.product_code||'').toLowerCase()}">
        <td class="col-code w-code">${p.product_code||''}</td>
        <td class="col-name w-name"><span class="prod-name" title="${p.name||''}">${p.name||'—'}</span></td>
        <td class="col-meta w-comp">${p.prod_company||'—'}</td>
        <td class="col-meta w-cat">${p.prod_category||'—'}</td>
        <td class="w-num"><span style="font-size:12px;font-weight:600;color:var(--gray-800);">${p.purchase_price||0}</span></td>
        <td class="w-num"><span style="font-size:12px;font-weight:600;color:var(--gray-800);">${p.l_sale_price||0}</span></td>
        <td class="w-num col-fbr-cell">
          <input class="cell-input" type="number" data-field="gst" data-id="${id}"
            value="${p.gst||0}" min="0" max="100" step="0.5" style="width:64px;">
        </td>
        <td class="w-num col-fbr-cell">
          <input class="cell-input" type="number" data-field="further_tax" data-id="${id}"
            value="${p.further_tax||0}" min="0" max="100" step="0.5" style="width:64px;" readonly tabindex="-1" style="opacity:.6">
        </td>
        <td class="w-hs col-fbr-cell">
          <input class="cell-input" type="text" data-field="fbr_hs_code" data-id="${id}"
            value="${p.fbr_hs_code||''}" placeholder="0000.0000" maxlength="12" style="width:102px;">
        </td>
        <td class="w-st col-fbr-cell">
          <select class="cell-select sel-sale-type" data-field="fbr_sale_type" data-id="${id}">
            <option value="">— Not Set —</option>
            ${stOptions}
          </select>
        </td>
        <td class="w-sro col-fbr-cell">
          <input class="cell-input sro-field" type="text" data-field="fbr_sro_schedule" data-id="${id}"
            value="${p.fbr_sro_schedule||''}" placeholder="EIGHTH SCHEDULE Table 1" style="width:180px;">
        </td>
        <td class="w-sros col-fbr-cell">
          <input class="cell-input sro-field" type="text" data-field="fbr_sro_item_serial" data-id="${id}"
            value="${p.fbr_sro_item_serial||''}" placeholder="19" style="width:56px;">
        </td>
        <td class="w-mrp col-fbr-cell">
          <input class="cell-input mrp-field" type="number" data-field="fbr_mrp" data-id="${id}"
            value="${p.fbr_mrp||''}" placeholder="MRP" min="0" step="1" style="width:82px;">
        </td>
      </tr>`;
    }).join('');

    tbody.innerHTML = rows;

    // Setup SRO visibility + change listeners
    tbody.querySelectorAll('tr[data-id]').forEach(row => {
      updateRowSroVisibility(row);

      row.querySelectorAll('.cell-input, .cell-select').forEach(inp => {
        const origVal = inp.value;
        inp.addEventListener('change', () => {
          const id    = inp.dataset.id;
          const field = inp.dataset.field;
          const val   = inp.value;
          if (!dirtyRows[id]) dirtyRows[id] = { id };
          dirtyRows[id][field] = val;
          inp.classList.add('changed');
          markRowDirty(row, id);
          if (field === 'fbr_sale_type') updateRowSroVisibility(row);
        });
      });
    });
  }

  /* ── Live search (client-side) ── */
  liveSearch.addEventListener('input', () => {
    const q = liveSearch.value.trim().toLowerCase();
    let vis = 0;
    tbody.querySelectorAll('tr[data-id]').forEach(row => {
      const match = !q
        || (row.dataset.name||'').includes(q)
        || (row.dataset.code||'').includes(q);
      row.classList.toggle('hidden-row', !match);
      if (match) vis++;
    });
    statVisible.textContent = vis;
  });

  /* ── Load products ── */
  async function loadProducts() {
    showOverlay('Loading products...');
    dirtyRows = {};
    updateDirtyCount();

    const body = new URLSearchParams({
      csrfmiddlewaretoken: CSRF_TOKEN,
      company_id:    filterCompany.value,
      category_name: filterCategory.value,
      search:        filterSearch.value.trim(),
    });

    try {
      const r = await fetch(URLS.load, { method:'POST', body });
      const d = await r.json();
      if (!d.ok) { toast('error','Load Failed', d.message); return; }

      currentData = d.products;
      allRows = d.products;
      renderTable(d.products);

      statTotal.textContent   = d.count;
      statVisible.textContent = d.count;
      globalBar.style.display = '';
      statsBar.style.display  = '';
      tableCard.style.display = '';
      actionBar.style.display = '';
      liveSearch.value = '';

      toast('success', `${d.count} Products Loaded`, 'You can now edit FBR fields below.');
    } catch(e) {
      toast('error','Network Error', e.message);
    } finally {
      hideOverlay();
    }
  }

  btnLoad.addEventListener('click', loadProducts);
  filterSearch.addEventListener('keydown', e => { if(e.key==='Enter') loadProducts(); });

  btnClear.addEventListener('click', () => {
    filterCompany.value = '';
    filterCategory.value = '';
    filterSearch.value = '';
    liveSearch.value = '';
    tbody.innerHTML = `<tr><td colspan="13"><div class="empty-state"><i class="fas fa-box-open"></i><p>Use filters above and click <strong>Load Products</strong> to begin.</p></div></td></tr>`;
    globalBar.style.display = 'none';
    statsBar.style.display  = 'none';
    tableCard.style.display = 'none';
    actionBar.style.display = 'none';
    dirtyRows = {};
    updateDirtyCount();
  });

  /* ── Global apply ── */
  btnApplyHs.addEventListener('click', () => {
    const val = globalHsCode.value.trim();
    if (!val) { toast('info','Enter HS Code first'); return; }
    tbody.querySelectorAll('input[data-field="fbr_hs_code"]').forEach(inp => {
      const id = inp.dataset.id;
      inp.value = val;
      inp.classList.add('changed');
      if (!dirtyRows[id]) dirtyRows[id] = { id };
      dirtyRows[id].fbr_hs_code = val;
      inp.closest('tr').classList.add('dirty');
    });
    updateDirtyCount();
    toast('success', 'HS Code Applied', `"${val}" applied to all visible products.`);
  });

  btnApplySt.addEventListener('click', () => {
    const val = globalSaleType.value;
    if (!val) { toast('info','Select Sale Type first'); return; }
    tbody.querySelectorAll('select[data-field="fbr_sale_type"]').forEach(sel => {
      const id = sel.dataset.id;
      sel.value = val;
      sel.classList.add('changed');
      if (!dirtyRows[id]) dirtyRows[id] = { id };
      dirtyRows[id].fbr_sale_type = val;
      const row = sel.closest('tr');
      row.classList.add('dirty');
      updateRowSroVisibility(row);
    });
    updateDirtyCount();
    toast('success', 'Sale Type Applied', `"${val}" applied to all visible products.`);
  });

  btnApplyGst.addEventListener('click', () => {
    const val = globalGst.value.trim();
    if (!val) { toast('info','Enter GST Rate first'); return; }
    tbody.querySelectorAll('input[data-field="gst"]').forEach(inp => {
      const id = inp.dataset.id;
      inp.value = val;
      inp.classList.add('changed');
      if (!dirtyRows[id]) dirtyRows[id] = { id };
      dirtyRows[id].gst = val;
      inp.closest('tr').classList.add('dirty');
    });
    updateDirtyCount();
    toast('success', 'GST Rate Applied', `${val}% applied to all visible products.`);
  });

  /* ── Revert ── */
  btnRevert.addEventListener('click', () => {
    if (!Object.keys(dirtyRows).length) return;
    if (!confirm('Revert ALL unsaved changes?')) return;
    dirtyRows = {};
    loadProducts();
  });

  /* ── Save ── */
  btnSave.addEventListener('click', async () => {
    const rows = Object.values(dirtyRows);
    if (!rows.length) { toast('info','No changes to save'); return; }

    showOverlay(`Saving ${rows.length} product(s)...`);
    saveProgress.style.display = '';
    barFill.style.width = '30%';

    try {
      const r = await fetch(URLS.save, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-CSRFToken': CSRF_TOKEN,
        },
        body: JSON.stringify({ rows }),
      });
      barFill.style.width = '80%';
      const d = await r.json();
      barFill.style.width = '100%';

      setTimeout(() => {
        barFill.style.width = '0%';
        saveProgress.style.display = 'none';
      }, 600);

      if (d.ok) {
        toast('success', `Saved ${d.saved} Product(s)`, 'FBR fields updated successfully.');
        dirtyRows = {};
        updateDirtyCount();
        saveStatus.textContent = `Last saved: ${new Date().toLocaleTimeString()}`;
        // Clear dirty styling
        tbody.querySelectorAll('tr.dirty').forEach(r => r.classList.remove('dirty'));
        tbody.querySelectorAll('.changed').forEach(el => el.classList.remove('changed'));
      } else {
        const errMsg = (d.errors||[]).join(' | ') || d.message;
        toast('error', `Save Failed (${d.saved||0} saved)`, errMsg, 5000);
      }
    } catch(e) {
      toast('error','Network Error', e.message);
    } finally {
      hideOverlay();
    }
  });

  /* ── Keyboard shortcut: Ctrl+S ── */
  document.addEventListener('keydown', e => {
    if ((e.ctrlKey||e.metaKey) && e.key==='s') {
      e.preventDefault();
      if (!btnSave.disabled) btnSave.click();
    }
  });


  /* ── Keyboard Navigation (Enter / Arrow Keys) ──────────────────────────── */
  function getCellPosition(el) {
    const row   = el.closest('tr');
    const cells = Array.from(row.querySelectorAll('.cell-input, .cell-select'));
    const colIdx = cells.indexOf(el);
    const rows   = Array.from(document.querySelectorAll('#diTableBody tr[data-id]'));
    const rowIdx = rows.indexOf(row);
    return { rowIdx, colIdx, rows, cells };
  }

  function focusCell(rowIdx, colIdx, allRows) {
    if (rowIdx < 0 || rowIdx >= allRows.length) return;
    const targetRow   = allRows[rowIdx];
    const targetCells = Array.from(targetRow.querySelectorAll('.cell-input, .cell-select'));
    if (colIdx < 0 || colIdx >= targetCells.length) return;
    const target = targetCells[colIdx];
    target.focus();
    if (target.select) target.select();
    // Scroll into view smoothly
    target.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
  }

  // Delegate keydown on the table body
  document.getElementById('diTableBody').addEventListener('keydown', function(e) {
    const el = e.target;
    if (!el.classList.contains('cell-input') && !el.classList.contains('cell-select')) return;

    const { rowIdx, colIdx, rows } = getCellPosition(el);
    const allRows = Array.from(document.querySelectorAll('#diTableBody tr[data-id]'))
                        .filter(r => !r.classList.contains('hidden-row'));
    const visibleRowIdx = allRows.indexOf(el.closest('tr'));

    switch(e.key) {
      case 'Enter':
        e.preventDefault();
        focusCell(visibleRowIdx + 1, colIdx, allRows);
        break;
      case 'ArrowDown':
        e.preventDefault();
        focusCell(visibleRowIdx + 1, colIdx, allRows);
        break;
      case 'ArrowUp':
        e.preventDefault();
        focusCell(visibleRowIdx - 1, colIdx, allRows);
        break;
      case 'ArrowRight':
        // Only move right if at end of text (for inputs)
        if (el.tagName === 'SELECT') {
          e.preventDefault();
          focusCell(visibleRowIdx, colIdx + 1, allRows);
        } else if (el.selectionStart === el.value.length) {
          e.preventDefault();
          focusCell(visibleRowIdx, colIdx + 1, allRows);
        }
        break;
      case 'ArrowLeft':
        if (el.tagName === 'SELECT') {
          e.preventDefault();
          focusCell(visibleRowIdx, colIdx - 1, allRows);
        } else if (el.selectionStart === 0) {
          e.preventDefault();
          focusCell(visibleRowIdx, colIdx - 1, allRows);
        }
        break;
      case 'Tab':
        // Tab already works natively but we override to stay in table
        // Let browser handle Tab normally
        break;
    }
  });

  /* ── Init ── */
  updateDirtyCount();
  btnSave.disabled = true;
  document.getElementById('apHead').addEventListener('click', toggleAnalysis);


  /* ── Analysis Panel ── */
    const URLS_ANALYZE = "{% url 'products:fbr_di_hs_analysis' %}";

  // Set default dates
  setLastMonth();

  document.getElementById('btnAnalyze').addEventListener('click', async () => {
    const dateFrom = document.getElementById('hsDateFrom').value;
    const dateTo   = document.getElementById('hsDateTo').value;
    if (!dateFrom || !dateTo) { toast('info','Select date range first'); return; }

    showOverlay('Analyzing FBR invoices...');
    const grid    = document.getElementById('hsGrid');
    const summary = document.getElementById('apSummary');
    grid.innerHTML = '<div style="text-align:center;padding:20px;color:var(--gray-400)"><div class="spin-ring" style="margin:0 auto;"></div><p style="margin-top:10px;font-size:13px;">Fetching data from DB + FBR APIs...</p></div>';
    summary.style.display = 'none';

    try {
      const body = new URLSearchParams({
        csrfmiddlewaretoken: CSRF_TOKEN,
        date_from: dateFrom,
        date_to:   dateTo,
      });
      const r = await fetch(URLS_ANALYZE, { method:'POST', body });
      const d = await r.json();

      if (!d.ok) { toast('error','Analysis Failed', d.message); grid.innerHTML=''; return; }

      summary.style.display = '';
      summary.innerHTML = `<strong>${d.invoice_count}</strong> successful FBR invoices found &nbsp;|&nbsp; <strong>${(d.hs_summary||[]).length}</strong> unique HS codes &nbsp;|&nbsp; Period: <strong>${d.date_from}</strong> to <strong>${d.date_to}</strong>`;

      // Show tabs
      document.getElementById('invTabs').style.display = '';

      // Render invoice list
      renderInvoiceTable(d.invoices || []);
      document.getElementById('tabInvCount').textContent = (d.invoices||[]).length;

      // Render HS summary
      const grid2 = document.getElementById('hsGrid');
      if (!d.hs_summary || !d.hs_summary.length) {
        grid2.innerHTML = '<div style="text-align:center;padding:30px;color:var(--gray-400);">No HS codes found.</div>';
      } else {
        grid2.innerHTML = d.hs_summary.map(hs => renderHsCard(hs)).join('');
      }
      document.getElementById('tabHsCount').textContent = (d.hs_summary||[]).length;

      toast('success', 'Analysis Complete', d.message);

    } catch(e) {
      toast('error','Error', e.message);
      grid.innerHTML = '';
    } finally {
      hideOverlay();
    }
  });

  function renderHsCard(hs) {
    const hasReduced = hs.rate_value && hs.rate_value < 18;
    const rateBadge  = hs.rate_desc
      ? `<span class="rate-badge ${hasReduced?'reduced':'standard'}">${hs.rate_desc}</span>`
      : '<span class="rate-badge standard">18%</span>';

    // SRO Schedules
    let scheduleHtml = '';
    if (hs.sro_schedules && hs.sro_schedules.length) {
      scheduleHtml = `
        <div class="sro-section">
          <div class="sro-title"><i class="fas fa-file-contract" style="margin-right:5px;"></i>SRO Schedules (from FBR API)</div>
          <table class="sro-table">
            <thead><tr><th>SRO ID</th><th>Schedule Description</th><th></th></tr></thead>
            <tbody>
              ${hs.sro_schedules.map(s => `
                <tr>
                  <td>${s.id}</td>
                  <td>${s.desc}</td>
                  <td>
                    <button class="apply-sro-btn" onclick="applySroSchedule('${hs.hs_code}','${s.desc}')">
                      <i class="fas fa-check"></i> Use This
                    </button>
                  </td>
                </tr>`).join('')}
            </tbody>
          </table>
        </div>`;
    }

    // SRO Items
    let itemsHtml = '';
    if (hs.sro_items && hs.sro_items.length) {
      itemsHtml = `
        <div class="sro-section" style="margin-top:10px;">
          <div class="sro-title"><i class="fas fa-list-ol" style="margin-right:5px;"></i>SRO Item Serial Numbers</div>
          <table class="sro-table">
            <thead><tr><th>Item ID</th><th>Serial No.</th><th></th></tr></thead>
            <tbody>
              ${hs.sro_items.map(i => `
                <tr>
                  <td>${i.id}</td>
                  <td><strong>${i.desc}</strong></td>
                  <td>
                    <button class="apply-sro-btn" onclick="applySroItem('${hs.hs_code}','${i.desc}')">
                      <i class="fas fa-check"></i> Use This
                    </button>
                  </td>
                </tr>`).join('')}
            </tbody>
          </table>
        </div>`;
    } else if (hasReduced && hs.sro_schedules && hs.sro_schedules.length) {
      itemsHtml = `<div class="sro-section no-sro-msg"><i class="fas fa-exclamation-circle" style="color:var(--amber);margin-right:5px;"></i>SRO items not retrieved — check token validity.</div>`;
    }

    const noSro = !hs.sro_schedules || !hs.sro_schedules.length;

    return `
      <div class="hs-card" data-hs="${hs.hs_code}">
        <div class="hs-card-head">
          <span class="hs-code-badge">${hs.hs_code || 'No HS Code'}</span>
          <div class="hs-stats">
            <div class="hs-stat"><strong>${hs.invoice_count}</strong> invoices</div>
            <div class="hs-stat"><strong>${hs.item_count}</strong> line items</div>
            <div class="hs-stat"><strong>${hs.total_qty}</strong> units</div>
            <div class="hs-stat">Rs. <strong>${(hs.total_value||0).toLocaleString()}</strong> value</div>
            <div class="hs-stat" style="color:var(--gray-400);">${hs.first_date} → ${hs.last_date}</div>
          </div>
          ${rateBadge}
        </div>
        <div class="hs-card-body">
          ${noSro
            ? `<div class="no-sro-msg"><i class="fas fa-info-circle" style="color:var(--blue);margin-right:5px;"></i>Standard Rate or Zero Rate goods — no SRO required for this HS code.</div>`
            : scheduleHtml + itemsHtml
          }
        </div>
      </div>`;
  }

  /* applySroSchedule/applySroItem defined globally above IIFE */



/* ── IRIS Import ── */
const URLS_IRIS_IMPORT = "{% url 'products:fbr_iris_excel_import' %}";

document.getElementById('irisHead').addEventListener('click', function() {
  const body    = document.getElementById('irisBody');
  const chevron = document.getElementById('irisChevron');
  const open    = body.classList.toggle('open');
  chevron.style.transform = open ? 'rotate(180deg)' : '';
});

// Drag & drop
const uploadZone = document.getElementById('irisUploadZone');
uploadZone.addEventListener('dragover', e => { e.preventDefault(); uploadZone.classList.add('drag-over'); });
uploadZone.addEventListener('dragleave', () => uploadZone.classList.remove('drag-over'));
uploadZone.addEventListener('drop', e => {
  e.preventDefault();
  uploadZone.classList.remove('drag-over');
  const file = e.dataTransfer.files[0];
  if (file) processIrisFile(file);
});

document.getElementById('irisFileInput').addEventListener('change', function() {
  if (this.files[0]) processIrisFile(this.files[0]);
});

/* toggleIrisRaw defined globally */

async function processIrisFile(file) {
  showOverlay('Parsing IRIS Excel...');
  const form = new FormData();
  form.append('csrfmiddlewaretoken', CSRF_TOKEN);
  form.append('iris_excel', file);

  try {
    const r = await fetch(URLS_IRIS_IMPORT, { method: 'POST', body: form });
    const d = await r.json();

    const results  = document.getElementById('irisResults');
    const msgEl    = document.getElementById('irisMsg');
    const hsSection = document.getElementById('irisHsSection');
    results.style.display = '';

    msgEl.className = 'iris-msg ' + (d.ok ? 'ok' : 'warn');
    msgEl.innerHTML = `<i class="fas fa-${d.ok?'check-circle':'exclamation-triangle'}" style="margin-right:6px;"></i>${d.message || ''}`;

    if (!d.ok) { hideOverlay(); return; }

    // HS Code table
    hsSection.style.display = '';
    if (d.hs_summary && d.hs_summary.length) {
      const maxCount = d.hs_summary[0].count;
      document.getElementById('irisHsTbody').innerHTML = d.hs_summary.map(h => {
        const prods = (h.products||[]).slice(0,3).map(p=>`<div style="font-size:10px;color:#555;">${p}</div>`).join('');
        return `<tr>
          <td>
            <strong style="font-size:13px;">${h.hs_code}</strong>
            <div style="font-size:10px;color:#6366f1;margin-top:2px;">${h.fbr_sale_type||''}</div>
          </td>
          <td><strong>${h.count}</strong> items
            <span class="freq-bar" style="width:${Math.round((h.count/maxCount)*80)}px;"></span>
          </td>
          <td>
            <strong style="font-size:13px;color:#0f7a3f;">${h.total_qty||0}</strong>
            <span style="font-size:10px;color:#6b7280;margin-left:3px;">units</span>
          </td>
          <td>
            <span style="background:#dcfce7;color:#166534;padding:2px 7px;border-radius:10px;font-size:11px;font-weight:700;">
              ${h.rate_str||h.gst+'%'}
            </span>
          </td>
          <td style="font-size:11px;color:#555;">${(h.sellers||[]).join(', ')}</td>
          <td>
            <div style="font-size:10px;max-width:200px;">${prods}</div>
          </td>
          <td>
            <button class="apply-hs-btn" onclick="applyHsFromIris('${h.hs_code}','${h.fbr_sale_type}',${h.gst},'${h.sro_schedule||''}','${h.sro_item||''}')">
              <i class="fas fa-magic"></i> Apply
            </button>
          </td>
        </tr>`;
      }).join('');
    } else {
      document.getElementById('irisHsTbody').innerHTML = `
        <tr><td colspan="6" style="color:var(--gray-500);font-style:italic;padding:12px;">
          HS Code not found in file. Make sure to download item-level details from IRIS.
        </td></tr>`;
    }

    // Raw table — use flat invoice fields directly (no nested .raw)
    if (d.headers && d.invoices) {
      // Build cols from actual invoice keys
      const invKeys = ['date','invoice_no','seller','hs_code','sale_type','rate','qty','product'];
      const invLabels = ['Date','Invoice No','Seller','HS Code','Sale Type','Rate','Qty','Product'];
      document.getElementById('irisRawHead').innerHTML =
        '<tr>' + invLabels.map(h => `<th>${h}</th>`).join('') + '</tr>';
      document.getElementById('irisRawBody').innerHTML =
        d.invoices.slice(0, 100).map(inv =>
          '<tr>' + invKeys.map(k => `<td>${inv[k] || '—'}</td>`).join('') + '</tr>'
        ).join('');
    }

    toast('success', `${d.total_rows} rows parsed`, file.name);

  } catch(e) {
    toast('error', 'Parse Error', e.message);
  } finally {
    hideOverlay();
  }
}

function applyHsToTable(hsCode) {
  applyHsFromIris(hsCode, '', 0, '', '');
}

function applyHsFromIris(hsCode, saleType, gst, sroSchedule, sroItem) {
  let count = 0;
  document.querySelectorAll('tr[data-id]').forEach(row => {
    const id = row.dataset.id;
    if (!window._dirtyRows) window._dirtyRows = {};
    if (!window._dirtyRows[id]) window._dirtyRows[id] = { id };

    function setField(field, val) {
      if (!val && val !== 0) return;
      const inp = row.querySelector(`[data-field="${field}"]`);
      if (inp) {
        inp.value = val;
        inp.classList.add('changed');
        window._dirtyRows[id][field] = String(val);
        row.classList.add('dirty');
      }
    }

    setField('fbr_hs_code', hsCode);
    if (saleType) setField('fbr_sale_type', saleType);
    if (gst > 0)  setField('gst', gst);
    if (sroSchedule) setField('fbr_sro_schedule', sroSchedule);
    if (sroItem)     setField('fbr_sro_item_serial', sroItem);

    // Update SRO visibility
    if (typeof updateRowSroVisibility === 'function') updateRowSroVisibility(row);
    count++;
  });
  if (window._updateDirtyCount) window._updateDirtyCount();
  const fields = [hsCode, saleType, gst?gst+'%':'', sroSchedule, sroItem].filter(Boolean).join(', ');
  if (count) toast('success', `Applied to ${count} products`, fields);
  else toast('info', 'No products loaded', 'Load products first, then apply.');
}

})();

/* ════════════════════════════════════════════════════════════════
   Page-level tab switcher
   ════════════════════════════════════════════════════════════════ */
function switchPageTab(tab) {
  // tabs
  document.querySelectorAll('.page-tab').forEach(el => {
    el.classList.toggle('active', el.dataset.tab === tab);
  });
  // panels
  const panelMap = {
    bulk:     'panelBulk',
    addprod:  'panelAddprod',
    iris:     'panelIris',
    analysis: 'panelAnalysis',
  };
  Object.values(panelMap).forEach(id => {
    const el = document.getElementById(id);
    if (el) el.classList.toggle('active', panelMap[tab] === id);
  });
  // focus first field in addprod
  if (tab === 'addprod') {
    setTimeout(() => document.getElementById('iadd_code')?.focus(), 80);
  }
  // auto-open collapsed bodies when their tab is activated
  if (tab === 'iris') {
    const b = document.getElementById('irisBody');
    const c = document.getElementById('irisChevron');
    if (b && !b.classList.contains('open')) {
      b.classList.add('open');
      if (c) c.style.transform = 'rotate(180deg)';
    }
    // auto-activate Import sub-tab
    if (typeof switchIrisTab === 'function') switchIrisTab('import');
  }
  if (tab === 'analysis') {
    const b = document.getElementById('apBody');
    const c = document.getElementById('apChevron');
    if (b && !b.classList.contains('open')) {
      b.classList.add('open');
      if (c) c.style.transform = 'rotate(180deg)';
    }
  }
}

/* ════════════════════════════════════════════════════════════════
   Inline Add Product
   ════════════════════════════════════════════════════════════════ */
(function(){
  'use strict';

  const IADD_SAVE_URL = "{% url 'products:fbr_di_inline_add' %}";
  const CSRF_TOKEN_IADD = '{{ csrf_token }}';

  /* ── Populate sale type dropdown ── */
  const iaddSaleType = document.getElementById('iadd_sale_type');
  const IADD_SALE_TYPES_FALLBACK = [
    'Standard Rate Goods (default)',
    '3rd Schedule Goods',
    'Goods at Reduced Rate',
    'Zero Rated Goods',
    'Exempt Goods',
  ];
  const _saleTypeList = (typeof SALE_TYPES !== 'undefined' && SALE_TYPES.length)
    ? SALE_TYPES
    : IADD_SALE_TYPES_FALLBACK;
  _saleTypeList.forEach(st => { iaddSaleType.add(new Option(st, st)); });

  /* ── MRP / SRO visibility ── */
  const SRO_TYPES_IADD = ['Goods at Reduced Rate'];
  const MRP_TYPES_IADD = ['3rd Schedule Goods', 'Goods at Reduced Rate'];

  function updateIaddVisibility() {
    const st   = iaddSaleType.value;
    const sroW = document.getElementById('iadd_sro_wrap');
    const mrpR = document.getElementById('iaddMrpRow');
    const isSro = SRO_TYPES_IADD.includes(st);
    const isMrp = MRP_TYPES_IADD.includes(st);
    // SRO fields
    if (sroW) sroW.style.opacity = isSro ? '1' : '0.45';
    // MRP row
    if (mrpR) mrpR.style.display = isMrp ? 'flex' : 'none';
  }

  iaddSaleType.addEventListener('change', updateIaddVisibility);
  updateIaddVisibility();

  /* MRP setting dropdown → sync mrp input */
  const iaddMrpSame    = document.getElementById('iadd_mrp_same');   // hidden compat
  const iaddMrpSetting = document.getElementById('iadd_mrp_setting');
  const iaddLsp        = document.getElementById('iadd_lsp');
  const iaddMrp        = document.getElementById('iadd_mrp');

  function syncMrp() {
    const isSame = iaddMrpSetting.value === 'same';
    // keep hidden checkbox in sync (used by iaddClear + iaddSave)
    iaddMrpSame.checked = isSame;
    if (isSame) {
      iaddMrp.value    = iaddLsp.value || '';
      iaddMrp.readOnly = true;
      iaddMrp.style.opacity    = '0.55';
      iaddMrp.style.background = '#f3f4f6';
    } else {
      iaddMrp.readOnly = false;
      iaddMrp.style.opacity    = '1';
      iaddMrp.style.background = '';
      iaddMrp.focus();
      iaddMrp.select();
    }
  }

  iaddMrpSetting.addEventListener('change', syncMrp);

  // When l_sale_price changes and mode=same → mirror value
  iaddLsp.addEventListener('input', () => {
    if (iaddMrpSetting.value === 'same') syncMrp();
  });

  // When user manually edits mrp input → switch to Custom automatically
  iaddMrp.addEventListener('input', function() {
    if (iaddMrpSetting.value === 'same') {
      iaddMrpSetting.value = 'custom';
      iaddMrpSame.checked  = false;
      iaddMrp.readOnly     = false;
      iaddMrp.style.opacity    = '1';
      iaddMrp.style.background = '';
    }
  });

  syncMrp();

  /* ── Select2 init ── */
  // Name — tags + AJAX
  // ── Select2 inits ──────────────────────────────────────────────────
  // Navigation rule: user SELECTS an option (click or Enter on highlighted)
  //   → next select2 opens. BUT Enter in the search box without selecting
  //   just confirms current typed text (for tags) and also advances.
  // We use a single small state machine so the chain never double-fires.

  let iaddNavLock = false;   // prevents double-open when both select2:select AND keydown fire together

  function iaddOpenNext(current) {
    if (iaddNavLock) return;
    iaddNavLock = true;
    setTimeout(() => { iaddNavLock = false; }, 300);
    const seq = { name: 'company', company: 'category', category: null };
    const next = seq[current];
    if (next === 'company') {
      setTimeout(() => $('#iadd_company').select2('open'), 80);
    } else if (next === 'category') {
      setTimeout(() => $('#iadd_category').select2('open'), 80);
    } else {
      // after category → focus sale price
      setTimeout(() => { document.getElementById('iadd_lsp')?.focus(); }, 80);
    }
  }

  // Name — tags + AJAX
  $('#iadd_name').select2({
    dropdownParent: $('.iadd-body'),
    tags: true,
    tokenSeparators: [','],
    ajax: {
      url: '{% url "products:get_products" %}',
      type: 'POST',
      headers: { 'X-CSRFToken': CSRF_TOKEN_IADD },
      data: params => ({ term: params.term }),
      processResults: data => ({ results: data }),
    },
    placeholder: 'Type or select name',
    minimumInputLength: 1,
    createTag: params => ({ id: params.term, text: params.term, newTag: true }),
    templateResult: d => d.newTag
      ? $('<span style="font-style:italic;color:#666">Add "'+d.text+'"</span>')
      : d.text,
  }).on('select2:select', () => { iaddOpenNext('name'); });

  // Company — AJAX
  $('#iadd_company').select2({
    dropdownParent: $('.iadd-body'),
    ajax: {
      url: '{% url "products:companies_autocomplete" %}',
      data: params => ({ term: params.term }),
      processResults: data => ({ results: data }),
    },
    placeholder: 'Company',
    allowClear: true,
    minimumInputLength: 1,
  }).on('select2:select', () => { iaddOpenNext('company'); });

  // Category — AJAX
  $('#iadd_category').select2({
    dropdownParent: $('.iadd-body'),
    ajax: {
      url: '{% url "products:categories_autocomplete" %}',
      data: params => ({ term: params.term }),
      processResults: data => ({ results: data }),
    },
    placeholder: 'Category',
    allowClear: true,
    minimumInputLength: 1,
  }).on('select2:select', () => { iaddOpenNext('category'); });

  /* autofocus search on Select2 open */
  $(document).on('select2:open', () => {
    setTimeout(() => {
      document.querySelector('.select2-container--open .select2-search__field')?.focus();
    }, 0);
  });

  /* Enter inside Select2 search box — advance to next field */
  let lastIaddS2 = null;
  $('#iadd_name')    .on('select2:open', () => { lastIaddS2 = 'name'; });
  $('#iadd_company') .on('select2:open', () => { lastIaddS2 = 'company'; });
  $('#iadd_category').on('select2:open', () => { lastIaddS2 = 'category'; });

  $(document).on('keydown', '.select2-search--dropdown .select2-search__field', function(e) {
    if (e.key !== 'Enter' && e.which !== 13) return;
    const panelActive = document.getElementById('panelAddprod').classList.contains('active');
    if (!panelActive) return;
    // Let select2 handle the actual selection first (via its own keydown),
    // then we advance — we use a small delay so select2:select fires first if it will.
    // We only advance if the highlighted item was confirmed OR search text used as tag.
    // Simplest reliable approach: just check lastIaddS2 and advance after delay.
    e.preventDefault(); e.stopPropagation();
    setTimeout(() => { iaddOpenNext(lastIaddS2); }, 150);
  });

  /* ── Enter key navigation (plain inputs) ── */
  const IADD_ORDER = [
    'iadd_code',
    null,            // iadd_name (select2 — handled separately)
    null,            // iadd_company
    null,            // iadd_category
    'iadd_lsp',
    'iadd_gst',
    'iadd_further_tax',
    'iadd_hs_code',
    'iadd_sale_type',
    'iadd_sro_schedule',
    'iadd_sro_item',
    'iadd_mrp',      // last plain input → save on Enter
  ];
  // filtered plain ones
  const PLAIN_IDS = IADD_ORDER.filter(Boolean);

  document.getElementById('panelAddprod').addEventListener('keydown', function(e) {
    if (e.key !== 'Enter') return;
    const t = e.target;
    if (t.tagName === 'SELECT') return; // let select2 handle
    if (!t.classList.contains('iadd-ctrl')) return;
    e.preventDefault();

    const idx = PLAIN_IDS.indexOf(t.id);
    if (idx === -1) return;

    if (idx < PLAIN_IDS.length - 1) {
      // move to next plain field
      const nextId = PLAIN_IDS[idx + 1];
      const nextEl = document.getElementById(nextId);
      if (nextEl) { nextEl.focus(); if (nextEl.select) nextEl.select(); }
    } else {
      // last field → save
      iaddSave();
    }
  });

  /* ── code field: Enter → open name select2 ── */
  document.getElementById('iadd_code').addEventListener('keydown', function(e) {
    if (e.key !== 'Enter') return;
    e.preventDefault();
    $('#iadd_name').select2('open');
  });

  /* ── sale_type: Enter → move to sro or mrp ── */
  document.getElementById('iadd_sale_type').addEventListener('keydown', function(e) {
    if (e.key !== 'Enter') return;
    e.preventDefault();
    const st = this.value;
    const isSro = SRO_TYPES_IADD.includes(st);
    if (isSro) {
      document.getElementById('iadd_sro_schedule')?.focus();
    } else {
      document.getElementById('iadd_mrp')?.focus();
    }
  });

  /* ── Status helpers ── */
  const iaddStatus = document.getElementById('iaddStatus');
  function setStatus(type, msg) {
    iaddStatus.className = 'iadd-status ' + (type || '');
    iaddStatus.innerHTML = msg;
  }

  /* ── Clear form ── */
  window.iaddClear = function(focusCode) {
    document.getElementById('iadd_code').value = '';
    $('#iadd_name').val(null).trigger('change');
    $('#iadd_company').val(null).trigger('change');
    $('#iadd_category').val(null).trigger('change');
    document.getElementById('iadd_lsp').value = '';
    document.getElementById('iadd_gst').value = '18';
    document.getElementById('iadd_further_tax').value = '0';
    document.getElementById('iadd_hs_code').value = '';
    document.getElementById('iadd_sale_type').value = '';
    document.getElementById('iadd_sro_schedule').value = '';
    document.getElementById('iadd_sro_item').value = '';
    document.getElementById('iadd_mrp').value = '';
    document.getElementById('iadd_mrp_same').checked = true;
    const _ms = document.getElementById('iadd_mrp_setting');
    if (_ms) _ms.value = 'same';
    syncMrp();
    updateIaddVisibility();
    // remove error styling
    document.querySelectorAll('#panelAddprod .iadd-ctrl').forEach(el => el.classList.remove('inp-error'));
    setStatus('', '');
    if (focusCode) setTimeout(() => document.getElementById('iadd_code')?.focus(), 50);
  };

  /* ── Save ── */
  window.iaddSave = async function() {
    const code  = document.getElementById('iadd_code').value.trim();
    const nameEl = document.getElementById('iadd_name');
    const name  = nameEl.options[nameEl.selectedIndex]?.text || '';
    const lsp   = document.getElementById('iadd_lsp').value.trim();

    // Validate required
    let err = false;
    [['iadd_code', code], ['iadd_lsp', lsp]].forEach(([id, val]) => {
      const el = document.getElementById(id);
      if (!val) { el.classList.add('inp-error'); err = true; }
      else el.classList.remove('inp-error');
    });
    if (!name) {
      document.getElementById('iadd_name')?.closest('.iadd-field')
        ?.querySelector('label')?.style.setProperty('color', 'var(--red)');
      err = true;
    }
    if (err) { setStatus('err', '<i class="fas fa-exclamation-circle"></i> Required fields missing'); return; }

    const companyEl  = document.getElementById('iadd_company');
    const categoryEl = document.getElementById('iadd_category');
    const st         = document.getElementById('iadd_sale_type').value;
    const isMrp      = MRP_TYPES_IADD.includes(st);
    const mrpSame    = document.getElementById('iadd_mrp_same').checked;
    const mrpVal     = isMrp ? (mrpSame ? lsp : document.getElementById('iadd_mrp').value) : '';

    const payload = {
      product_code:        code,
      name:                name,
      prod_company:        companyEl.options[companyEl.selectedIndex]?.text || '',
      prod_category:       categoryEl.options[categoryEl.selectedIndex]?.text || '',
      l_sale_price:        lsp,
      gst:                 document.getElementById('iadd_gst').value || '0',
      further_tax:         document.getElementById('iadd_further_tax').value || '0',
      fbr_hs_code:         document.getElementById('iadd_hs_code').value.trim(),
      fbr_sale_type:       st,
      fbr_sro_schedule:    document.getElementById('iadd_sro_schedule').value.trim(),
      fbr_sro_item_serial: document.getElementById('iadd_sro_item').value.trim(),
      fbr_mrp:             mrpVal,
    };

    const btnSv = document.getElementById('btnIaddSave');
    btnSv.disabled = true;
    setStatus('', '<i class="fas fa-spinner fa-spin"></i> Saving...');

    try {
      const r = await fetch(IADD_SAVE_URL, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRFToken': CSRF_TOKEN_IADD },
        body: JSON.stringify(payload),
      });
      const d = await r.json();

      if (d.ok) {
        setStatus('ok', '<i class="fas fa-check-circle"></i> Saved: <strong>' + name + '</strong> [' + code + ']');
        if (typeof window._toast === 'function') window._toast('success', 'Product Added', name + ' (' + code + ')');
        // show NEW badge on tab
        const badge = document.getElementById('tabAddBadge');
        if (badge) { badge.style.display = ''; setTimeout(() => badge.style.display = 'none', 3000); }
        iaddClear(true);
      } else {
        setStatus('err', '<i class="fas fa-times-circle"></i> ' + (d.message || 'Save failed'));
        if (d.field === 'product_code') {
          document.getElementById('iadd_code').classList.add('inp-error');
          document.getElementById('iadd_code').focus();
        }
      }
    } catch(ex) {
      setStatus('err', '<i class="fas fa-times-circle"></i> Network error: ' + ex.message);
    } finally {
      btnSv.disabled = false;
    }
  };

  /* ── Ctrl+S in addprod panel ── */
  document.addEventListener('keydown', function(e) {
    if (!(e.ctrlKey || e.metaKey) || e.key !== 's') return;
    const panelActive = document.getElementById('panelAddprod').classList.contains('active');
    if (!panelActive) return;
    e.preventDefault();
    iaddSave();
  });

})();


/* ════════════════════════════════════════════════════════════════════════
   IRIS sub-tab switcher
   ════════════════════════════════════════════════════════════════════════ */
function switchIrisTab(tab) {
  document.querySelectorAll('.iris-subtab').forEach(el => {
    el.classList.toggle('active', el.dataset.itab === tab);
  });
  document.querySelectorAll('.iris-subpanel').forEach(el => {
    el.classList.toggle('active',
      (tab === 'hs'     && el.id === 'irisSubHs') ||
      (tab === 'import' && el.id === 'irisSubImport')
    );
  });
}

/* ════════════════════════════════════════════════════════════════════════
   Import Products
   ════════════════════════════════════════════════════════════════════════ */
(function(){
  'use strict';

  const CHECK_URL  = "{% url 'products:fbr_iris_product_check' %}";
  const IMPORT_URL = "{% url 'products:fbr_iris_product_import' %}";
  const CSRF       = '{{ csrf_token }}';

  let _impNewData   = [];   // parsed preview data
  let _impExistData = [];

  // ── Drag & drop ──────────────────────────────────────────────────────
  const zone = document.getElementById('impUploadZone');
  const inp  = document.getElementById('impFileInput');

  zone.addEventListener('dragover',  e => { e.preventDefault(); zone.classList.add('drag'); });
  zone.addEventListener('dragleave', () => zone.classList.remove('drag'));
  zone.addEventListener('drop', e => {
    e.preventDefault();
    zone.classList.remove('drag');
    const f = e.dataTransfer.files[0];
    if (f) impHandleFile(f);
  });
  inp.addEventListener('change', () => { if (inp.files[0]) impHandleFile(inp.files[0]); });

  // ── Parse & preview ──────────────────────────────────────────────────
  async function impHandleFile(file) {
    impReset(false);
    impShowStatus('Parsing file, checking against database...');

    const fd = new FormData();
    fd.append('iris_excel', file);
    fd.append('csrfmiddlewaretoken', CSRF);

    try {
      const r = await fetch(CHECK_URL, { method: 'POST', body: fd });
      const d = await r.json();
      impHideStatus();

      if (!d.ok) {
        impShowResult('err', '<i class="fas fa-times-circle"></i> ' + d.message);
        document.getElementById('impPreview').style.display = 'block';
        return;
      }

      _impNewData   = d.new_products   || [];
      _impExistData = d.existing_products || [];

      impRenderPreview(d);
    } catch(ex) {
      impHideStatus();
      impShowResult('err', 'Network error: ' + ex.message);
      document.getElementById('impPreview').style.display = 'block';
    }
  }

  // ── Render preview table ─────────────────────────────────────────────
  function impRenderPreview(d) {
    document.getElementById('impPreview').style.display = 'block';
    document.getElementById('impResult').style.display  = 'none';

    // NEW products
    const newSec  = document.getElementById('impNewSection');
    const newBody = document.getElementById('impNewBody');
    document.getElementById('impNewCount').textContent = _impNewData.length;

    if (_impNewData.length) {
      newSec.style.display = '';
      newBody.innerHTML = _impNewData.map((p, i) => `
        <tr id="impNR${i}" data-idx="${i}">
          <td class="chk-col"><input type="checkbox" class="imp-new-chk" data-idx="${i}" checked onchange="impRowToggle('new',${i},this.checked)"></td>
          <td style="max-width:180px;word-break:break-word;">${esc(p.name)}</td>
          <td><input type="text" id="impNCode${i}" value="${esc(p.product_code)}" style="width:80px;" oninput="_impNewData[${i}].product_code=this.value"></td>
          <td><input type="number" id="impNPrice${i}" value="${p.l_sale_price}" style="width:80px;" oninput="_impNewData[${i}].l_sale_price=+this.value;_impNewData[${i}].fbr_mrp=+this.value"></td>
          <td><input type="number" value="${p.gst}" style="width:44px;" oninput="_impNewData[${i}].gst=+this.value"></td>
          <td style="text-align:right;">${p.qty}</td>
          <td><small>${esc(p.hs_code||'—')}</small></td>
          <td><small>${esc(p.sale_type||'—')}</small></td>
          <td style="max-width:130px;word-break:break-word;"><small>${esc(p.seller||'—')}</small></td>
        </tr>`).join('');
    } else {
      newSec.style.display = 'none';
    }

    // EXISTING products
    const exSec  = document.getElementById('impExistSection');
    const exBody = document.getElementById('impExistBody');
    document.getElementById('impExistCount').textContent = _impExistData.length;

    if (_impExistData.length) {
      exSec.style.display = '';
      exBody.innerHTML = _impExistData.map((p, i) => `
        <tr id="impER${i}" data-idx="${i}">
          <td class="chk-col"><input type="checkbox" class="imp-exist-chk" data-idx="${i}" checked onchange="impRowToggle('exist',${i},this.checked)"></td>
          <td style="max-width:200px;word-break:break-word;">${esc(p.name)}</td>
          <td><small>${esc(p.product_code)}</small></td>
          <td style="text-align:right;"><span class="stock-badge">${p.current_stock}</span></td>
          <td style="text-align:right;color:#166534;font-weight:700;">+${p.incoming_qty}</td>
          <td style="text-align:right;"><span class="new-badge">${p.new_stock}</span></td>
          <td><small>${esc(p.seller||'—')}</small></td>
          <td><small>${esc(p.hs_code||'—')}</small></td>
        </tr>`).join('');
    } else {
      exSec.style.display = 'none';
    }

    impUpdateSummary();
  }

  // ── Toggle helpers ────────────────────────────────────────────────────
  window.impToggleAll = function(type, checked) {
    const cls = type === 'new' ? '.imp-new-chk' : '.imp-exist-chk';
    document.querySelectorAll(cls).forEach(cb => {
      cb.checked = checked;
      impRowToggle(type, +cb.dataset.idx, checked);
    });
  };

  window.impRowToggle = function(type, idx, checked) {
    const row = document.getElementById(type === 'new' ? `impNR${idx}` : `impER${idx}`);
    if (row) row.classList.toggle('unchecked', !checked);
    impUpdateSummary();
  };

  function impUpdateSummary() {
    const newChk  = document.querySelectorAll('.imp-new-chk:checked').length;
    const exChk   = document.querySelectorAll('.imp-exist-chk:checked').length;
    const total   = newChk + exChk;
    const btn     = document.getElementById('btnImpRun');
    const label   = document.getElementById('btnImpRunLabel');
    const summary = document.getElementById('impSummaryLine');

    btn.disabled = total === 0;
    label.textContent = total > 0
      ? `Import (${newChk} new + ${exChk} update)`
      : 'Import';
    summary.textContent = total > 0
      ? `${newChk} product(s) to create, ${exChk} stock(s) to update`
      : 'Select at least one row';
  }

  // ── Run import ────────────────────────────────────────────────────────
  window.impRun = async function() {
    const newSelected = [...document.querySelectorAll('.imp-new-chk:checked')]
      .map(cb => _impNewData[+cb.dataset.idx]);
    const exSelected  = [...document.querySelectorAll('.imp-exist-chk:checked')]
      .map(cb => _impExistData[+cb.dataset.idx]);

    if (!newSelected.length && !exSelected.length) return;

    const btn = document.getElementById('btnImpRun');
    btn.disabled = true;
    impShowStatus('Importing...');
    document.getElementById('impResult').style.display = 'none';

    try {
      const r = await fetch(IMPORT_URL, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRFToken': CSRF },
        body: JSON.stringify({
          new_products:      newSelected,
          existing_products: exSelected,
        }),
      });
      const d = await r.json();
      impHideStatus();

      if (d.ok) {
        const errHtml = d.errors && d.errors.length
          ? `<br><small style="color:#b45309;">Errors: ${d.errors.join('; ')}</small>`
          : '';
        impShowResult('ok',
          `<i class="fas fa-check-circle"></i> ${d.message}` + errHtml
        );
        impUpdateSummary();
      } else {
        impShowResult('err', '<i class="fas fa-times-circle"></i> ' + d.message);
        btn.disabled = false;
      }
    } catch(ex) {
      impHideStatus();
      impShowResult('err', 'Network error: ' + ex.message);
      btn.disabled = false;
    }
  };

  // ── Utilities ─────────────────────────────────────────────────────────
  function esc(s) {
    return String(s||'')
      .replace(/&/g,'&amp;').replace(/</g,'&lt;')
      .replace(/>/g,'&gt;').replace(/"/g,'&quot;');
  }
  function impShowStatus(msg) {
    const el = document.getElementById('impStatus');
    document.getElementById('impStatusTxt').textContent = msg;
    el.style.display = 'flex';
  }
  function impHideStatus() {
    document.getElementById('impStatus').style.display = 'none';
  }
  function impShowResult(type, html) {
    const el = document.getElementById('impResult');
    el.className = 'imp-result ' + type;
    el.innerHTML = html;
    el.style.display = 'block';
  }
  window.impReset = function(focusZone) {
    _impNewData   = [];
    _impExistData = [];
    document.getElementById('impPreview').style.display  = 'none';
    document.getElementById('impStatus').style.display   = 'none';
    document.getElementById('impResult').style.display   = 'none';
    document.getElementById('impNewSection').style.display  = 'none';
    document.getElementById('impExistSection').style.display = 'none';
    document.getElementById('impNewBody').innerHTML  = '';
    document.getElementById('impExistBody').innerHTML = '';
    document.getElementById('impSummaryLine').textContent = '';
    document.getElementById('btnImpRun').disabled = true;
    document.getElementById('btnImpRunLabel').textContent = 'Import';
    inp.value = '';
    if (focusZone !== false) zone.scrollIntoView({behavior:'smooth', block:'nearest'});
  };

  // Auto-switch to Import sub-tab when page tab is clicked
  // (already handled by switchPageTab — just ensure sub-tab state is correct)
  document.getElementById('panelIris')?.addEventListener('transitionend', () => {});

})();

</script>
{% endblock %}