{% extends 'base.html' %}
{% block title %}Store — Shiba Meals{% endblock %}
{% block page_title %}Central Store{% endblock %}
{% block content %}
<div class="page-title">Central Store</div>
<div class="page-sub">Inventory · Requisitions · Stock receipts</div>

<div class="tab-bar">
  <div class="tab active" data-tab="inventory">Inventory</div>
  <div class="tab" data-tab="requisitions">Requisitions</div>
  <div class="tab" data-tab="receive">Receive Stock</div>
</div>

<!-- INVENTORY -->
<div class="tab-panel active" data-panel="inventory">
<div class="card">
  <div class="alert alert-info" style="margin-bottom:.75rem">
    <strong>Two separate lists:</strong>
    <strong>Ingredients</strong> (this page) = raw materials used in kitchen production — bananas, flour, oil, etc.
    <strong>Products</strong> (Admin panel) = finished menu items dispatched to outlets for sale — Chips, Black Tea, etc.
    Adding bananas here does NOT make them appear in Dispatch. To sell bananas, create a product called "Banana" in the Admin → Products tab.
  </div>
  <div class="card-title">Raw Materials & Consumables
    <button class="btn btn-sm btn-primary" style="float:right" onclick="openModal('add-ing-modal')">+ Add Item</button>
    <button class="btn btn-sm" style="float:right;margin-right:.5rem" onclick="openCatMgmt()">🗂 Categories</button>
  </div>
  <div class="tab-bar" style="margin-top:.5rem">
    <div class="tab active" data-tab="ing-tab">Ingredients</div>
    <div class="tab" data-tab="cons-tab">Consumables</div>
  </div>
  <div class="tab-panel active" data-panel="ing-tab">
  <div class="table-wrap">
  <table>
    <tr><th>Ingredient</th><th>Unit</th><th>Cost/Unit</th><th>In Stock</th><th>Value</th><th>Status</th><th></th></tr>
    {% for i in ingredients if i.category != 'consumable' %}
    <tr>
      <td style="font-weight:600">{{ i.name }}</td>
      <td>{{ i.unit }}</td>
      <td>KES {{ "{:,.0f}".format(i.cost_per_unit) }}</td>
      <td style="font-weight:600">{{ "{:.2f}".format(i.quantity or 0) }}</td>
      <td>KES {{ "{:,.0f}".format((i.quantity or 0) * i.cost_per_unit) }}</td>
      <td>
        {% if (i.quantity or 0) < 3 %}<span class="badge badge-red">Critical</span>
        {% elif (i.quantity or 0) < 10 %}<span class="badge badge-amber">Low</span>
        {% else %}<span class="badge badge-green">Good</span>{% endif %}
      </td>
      <td>
        <button class="btn btn-sm" onclick="restockModal({{ i.id }}, '{{ i.name }}', '{{ i.unit }}')">+ Restock</button>
        <button class="btn btn-sm" onclick="editIngModal({{ i.id }}, '{{ i.name }}', '{{ i.unit }}', {{ i.cost_per_unit }})">Edit</button>
      </td>
    </tr>
    {% endfor %}
  </table>
  </div>
  </div>
  <div class="tab-panel" data-panel="cons-tab">
  <div class="table-wrap">
  <table>
    <tr><th>Item</th><th>Unit</th><th>Cost/Unit</th><th>In Stock</th><th>Status</th><th></th></tr>
    {% for i in ingredients if i.category == 'consumable' %}
    <tr>
      <td style="font-weight:600">{{ i.name }}</td>
      <td>{{ i.unit }}</td>
      <td>KES {{ "{:,.0f}".format(i.cost_per_unit) }}</td>
      <td style="font-weight:600">{{ "{:.0f}".format(i.quantity or 0) }}</td>
      <td>
        {% if (i.quantity or 0) < 2 %}<span class="badge badge-red">Critical</span>
        {% elif (i.quantity or 0) < 5 %}<span class="badge badge-amber">Low</span>
        {% else %}<span class="badge badge-green">Good</span>{% endif %}
      </td>
      <td>
        <button class="btn btn-sm" onclick="restockModal({{ i.id }}, '{{ i.name }}', '{{ i.unit }}')">+ Restock</button>
      </td>
    </tr>
    {% endfor %}
  </table>
  </div>
  </div>
</div>
</div>

<!-- REQUISITIONS -->
<div class="tab-panel" data-panel="requisitions">
<div class="card">
  <div class="card-title">Requisition Requests
    <select id="req-filter" style="float:right;width:auto;font-size:.75rem;padding:3px 8px" onchange="filterReqs()">
      <option value="all">All</option>
      <option value="pending" selected>Pending</option>
      <option value="approved">Approved</option>
      <option value="rejected">Rejected</option>
    </select>
  </div>
  <div class="table-wrap">
  <table id="req-table">
    <tr><th>Submitted</th><th>For Date</th><th>Requested By</th><th>Type</th><th>Items</th><th>Status</th><th>Approved/Rejected By</th><th>Action</th></tr>
    {% for r in requisitions %}
    <tr class="req-row" data-status="{{ r.status }}" id="req-row-{{ r.id }}">
      <td class="ts">{{ r.created_at[:16] }}</td>
      <td>{{ r.for_date }}{% if r.for_date > today %} <span class="badge badge-purple">tomorrow</span>{% endif %}</td>
      <td style="font-weight:600">{{ r.chef_name }}</td>
      <td><span class="badge badge-blue">{{ (r.req_type or 'kitchen').replace('_',' ') }}</span></td>
      <td><button class="btn btn-sm" onclick="viewReqItems({{ r.id }}, '{{ r.chef_name }}')">View Items</button></td>
      <td>
        <span class="badge {% if r.status=='approved' %}badge-green{% elif r.status=='rejected' %}badge-red{% else %}badge-amber{% endif %}">
          {{ r.status }}
        </span>
        {% if r.review_note %}<div style="font-size:.7rem;color:var(--text2);margin-top:2px">Note: {{ r.review_note }}</div>{% endif %}
      </td>
      <td style="font-size:.78rem">
        {% if r.reviewer_name %}
          {{ r.reviewer_name }}
          <span style="font-size:.7rem;color:var(--text3);display:block">
            {% if r.reviewer_role == 'general_manager' %}General Manager{% else %}Manager{% endif %}
          </span>
        {% else %}
          <span style="color:var(--text3)">—</span>
        {% endif %}
      </td>
      <td>
        {% if r.status == 'pending' %}
        <div style="display:flex;flex-direction:column;gap:4px">
          <div style="display:flex;gap:4px">
            <button class="btn btn-sm btn-success" onclick="reviewReq({{ r.id }}, 'approve')">✓ Approve</button>
            <button class="btn btn-sm btn-danger" onclick="reviewReq({{ r.id }}, 'reject')">✕ Reject</button>
          </div>
        </div>
        {% else %}
        <span style="font-size:.72rem;color:var(--text3)">{{ r.reviewed_at[:16] if r.reviewed_at else '' }}</span>
        {% endif %}
      </td>
    </tr>
    {% endfor %}
    {% if not requisitions %}<tr><td colspan="8" style="color:var(--text3);font-style:italic;padding:1rem">No requisitions yet.</td></tr>{% endif %}
  </table>
  </div>
</div>
<!-- Consumables Requests section -->
<div class="card" style="margin-top:.75rem">
  <div class="card-title">🧴 Consumable Requests from Kitchen
    <button class="btn btn-sm" style="float:right" onclick="loadConsumableReqs()">↻ Refresh</button>
  </div>
  <div id="consumable-reqs-store"><div style="color:var(--text3)">Loading…</div></div>
</div>
</div>

<!-- RECEIVE -->
<div class="tab-panel" data-panel="receive">
<div class="card">
  <div class="card-title">Receive Stock from Supplier</div>
  <div class="alert alert-info">Record all supplier deliveries here. This updates stock levels and the cost audit trail.</div>
  <div class="form-grid">
    <div class="form-row">
      <label class="form-label">Ingredient / Item</label>
      <select id="recv-ing">{% for i in ingredients %}<option value="{{ i.id }}">{{ i.name }} ({{ i.unit }}) [{{ i.category }}]</option>{% endfor %}</select>
    </div>
    <div class="form-row"><label class="form-label">Quantity Received</label><input type="number" id="recv-qty" placeholder="0" step="0.01" min="0"></div>
    <div class="form-row"><label class="form-label">Unit Price (KES)</label><input type="number" id="recv-unit-price" placeholder="0" step="0.01" oninput="calcRecvTotal()"></div>
    <div class="form-row"><label class="form-label">Total Amount on Receipt (KES)</label><input type="number" id="recv-amt" placeholder="Auto-calculated" step="0.01" oninput="recvAmtManual=true"></div>
    <div class="form-row"><label class="form-label">Transport / Transaction Cost (KES)</label><input type="number" id="recv-tx" placeholder="0" value="0"></div>
    <div class="form-row"><label class="form-label">Delivery Date</label><input type="date" id="recv-date" value="{{ today }}"></div>
    <div class="form-row"><label class="form-label">Supplier Name</label><input id="recv-supplier" placeholder="e.g. Kamau Farmers Market"></div>
    <div class="form-row"><label class="form-label">Invoice / Receipt No.</label><input id="recv-invoice" placeholder="e.g. INV-2024-001"></div>
  </div>
  <div class="form-row" style="margin-top:.5rem"><label class="form-label">Additional Notes</label><input id="recv-note" placeholder="Any other details…"></div>
  <div style="margin-top:.75rem;padding:.5rem .75rem;background:var(--surface2);border-radius:6px;font-size:.85rem;display:flex;gap:1.5rem;flex-wrap:wrap">
    <span>Qty: <strong id="recv-summary-qty">—</strong></span>
    <span>Unit Price: <strong id="recv-summary-up">—</strong></span>
    <span>Total: <strong id="recv-summary-total">—</strong></span>
    <span>Transport: <strong id="recv-summary-tx">—</strong></span>
    <span>Grand Total: <strong id="recv-summary-grand">—</strong></span>
  </div>
  <button class="btn btn-primary" style="margin-top:.75rem" onclick="receiveStock()">📦 Record Stock Receipt</button>
  <div id="recv-confirm" class="alert alert-success" style="display:none;margin-top:.75rem"></div>
</div>
<div class="card" style="margin-top:.75rem">
  <div class="card-title">Recent Stock Receipts
    <button class="btn btn-sm" style="float:right" onclick="loadReceiptLog()">↻ Refresh</button>
  </div>
  <div id="receipt-log"><div style="color:var(--text3)">Loading…</div></div>
</div>
</div>

<!-- Modals -->
<div class="modal-backdrop" id="restock-modal">
  <div class="modal">
    <button class="modal-close" data-close-modal="restock-modal">✕</button>
    <div class="modal-title" id="restock-title">Restock</div>
    <input type="hidden" id="restock-id">
    <div class="form-row"><label class="form-label">Quantity to Add</label><input type="number" id="restock-qty" placeholder="0" step="0.01"></div>
    <div class="form-row"><label class="form-label">Receipt Amount (KES)</label><input type="number" id="restock-amt" placeholder="0"></div>
    <div class="form-row"><label class="form-label">Note</label><input id="restock-note" placeholder="Supplier / ref"></div>
    <button class="btn btn-primary" onclick="doRestock()">Record Restock</button>
  </div>
</div>

<div class="modal-backdrop" id="add-ing-modal">
  <div class="modal">
    <button class="modal-close" data-close-modal="add-ing-modal">✕</button>
    <div class="modal-title">Add New Ingredient / Item</div>
    <div class="form-row"><label class="form-label">Name</label><input id="new-ing-name" placeholder="e.g. Coriander"></div>
    <div class="form-grid">
      <div class="form-row"><label class="form-label">Unit</label><select id="new-ing-unit"><option>kg</option><option>g</option><option>L</option><option>ml</option><option>piece</option><option>pack</option><option>bunch</option><option>bottle</option><option>portion</option><option>cylinder</option><option>bag</option><option>roll</option><option>box</option></select></div>
      <div class="form-row"><label class="form-label">Category</label><select id="new-ing-cat"><option value="ingredient">Ingredient</option><option value="consumable">Consumable</option></select></div>
      <div class="form-row"><label class="form-label">Cost per Unit (KES)</label><input type="number" id="new-ing-cost" placeholder="0"></div>
      <div class="form-row"><label class="form-label">Reorder Level</label><input type="number" id="new-ing-reorder" placeholder="5" value="5"></div>
    </div>
    <button class="btn btn-primary" onclick="addIngredient()">Add Item</button>
  </div>
</div>

<div class="modal-backdrop" id="edit-ing-modal">
  <div class="modal">
    <button class="modal-close" data-close-modal="edit-ing-modal">✕</button>
    <div class="modal-title">Edit Ingredient</div>
    <input type="hidden" id="edit-ing-id">
    <div class="form-row"><label class="form-label">Name</label><input id="edit-ing-name"></div>
    <div class="form-row"><label class="form-label">Unit</label><select id="edit-ing-unit"><option>kg</option><option>g</option><option>L</option><option>ml</option><option>piece</option><option>pack</option><option>bunch</option><option>bottle</option><option>portion</option></select></div>
    <div class="form-row"><label class="form-label">Cost per Unit (KES)</label><input type="number" id="edit-ing-cost"></div>
    <button class="btn btn-primary" onclick="saveIngredient()">Save</button>
  </div>
</div>

<div class="modal-backdrop" id="req-items-modal">
  <div class="modal">
    <button class="modal-close" data-close-modal="req-items-modal">✕</button>
    <div class="modal-title">Requisition Items</div>
    <div id="req-items-content"></div>
  </div>
</div>

<!-- Category Management Modal -->
<div class="modal-backdrop" id="cat-mgmt-modal">
  <div class="modal" style="max-width:520px">
    <button class="modal-close" data-close-modal="cat-mgmt-modal">✕</button>
    <div class="modal-title" id="cat-mgmt-title">Manage Categories</div>
    <div class="tab-bar" style="margin-bottom:.75rem">
      <div class="tab active" data-tab="pcat-tab" onclick="switchCatTab('product')">Product Categories</div>
      <div class="tab" data-tab="icat-tab" onclick="switchCatTab('ingredient')">Ingredient Categories</div>
    </div>
    <!-- Product Categories -->
    <div id="pcat-tab">
      <div style="display:flex;gap:.5rem;margin-bottom:.75rem">
        <input id="new-pcat-name" placeholder="New product category name…" style="flex:1">
        <button class="btn btn-primary btn-sm" onclick="addCategory('product')">+ Add</button>
      </div>
      <div id="pcat-list" style="max-height:280px;overflow-y:auto"></div>
    </div>
    <!-- Ingredient Categories -->
    <div id="icat-tab" style="display:none">
      <div style="display:flex;gap:.5rem;margin-bottom:.75rem">
        <input id="new-icat-name" placeholder="New ingredient category name…" style="flex:1">
        <button class="btn btn-primary btn-sm" onclick="addCategory('ingredient')">+ Add</button>
      </div>
      <div id="icat-list" style="max-height:280px;overflow-y:auto"></div>
    </div>
    <div id="cat-mgmt-note" style="font-size:.75rem;color:var(--text3);margin-top:.5rem"></div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
var ROLE = '{{ role }}';
var recvAmtManual = false;

// ── On load ─────────────────────────────────────────────────────────────────
document.addEventListener('DOMContentLoaded', function(){
  filterReqs();
  loadConsumableReqs();
  loadReceiptLog();
  // Wire up recv-qty and recv-unit-price for auto-total
  ['recv-qty','recv-unit-price','recv-tx'].forEach(function(id){
    var el = document.getElementById(id);
    if(el) el.addEventListener('input', calcRecvTotal);
  });
  document.getElementById('recv-amt').addEventListener('input', function(){ recvAmtManual = true; calcRecvTotal(); });
});

// ── Requisition helpers ──────────────────────────────────────────────────────
async function reviewReq(id, action) {
  var note = '';
  if (action === 'reject') {
    note = prompt('Reason for rejection (shown to requester):') || '';
    if (note === null) return;
  }
  await api('/api/store/approve/'+id,'POST', action === 'reject' ? {reject:true, note} : {note});
  var row = document.getElementById('req-row-'+id);
  if (row) {
    var badge = row.querySelector('.badge');
    if (badge) { badge.textContent = action === 'approve' ? 'approved' : 'rejected'; badge.className = 'badge ' + (action === 'approve' ? 'badge-green' : 'badge-red'); }
    var btns = row.querySelectorAll('.btn-success, .btn-danger');
    btns.forEach(function(b){ b.remove(); });
  }
  toast(action === 'approve' ? 'Approved ✓' : 'Rejected', 'success');
  loadConsumableReqs();
}
function filterReqs() {
  var val = document.getElementById('req-filter').value;
  document.querySelectorAll('.req-row').forEach(function(row) {
    row.style.display = (val === 'all' || row.dataset.status === val) ? '' : 'none';
  });
}
async function viewReqItems(id, requester) {
  var items = await api('/api/requisitions/'+id+'/items');
  var html = '<div style="font-size:.8rem;color:var(--text2);margin-bottom:.5rem">Requester: <strong>'+(requester||'')+'</strong></div>';
  html += '<table><tr><th>Item</th><th>Qty</th><th>Unit</th><th>Est. Cost</th></tr>';
  var total = 0;
  items.forEach(function(i){ var c=Math.round(i.qty_requested*i.cost_per_unit); total+=c; html+=`<tr><td>${i.ing_name}</td><td>${(i.qty_requested||0).toFixed(3)}</td><td>${i.unit}</td><td>KES ${c.toLocaleString()}</td></tr>`; });
  html += `<tr class="hl"><td colspan="3" style="font-weight:600">Estimated Total</td><td style="font-weight:700">KES ${total.toLocaleString()}</td></tr>`;
  html += '</table>';
  document.getElementById('req-items-content').innerHTML = html;
  openModal('req-items-modal');
}

// ── Consumable requests (kitchen → store) ────────────────────────────────────
async function loadConsumableReqs() {
  var div = document.getElementById('consumable-reqs-store'); if(!div) return;
  try {
    var reqs = await api('/api/requisitions/pending?type=kitchen_consumables');
    if(!reqs || !reqs.length){ div.innerHTML='<div class="alert alert-success">✓ No pending consumable requests from kitchen.</div>'; return; }
    var html='<div class="table-wrap"><table><tr><th>Chef</th><th>Submitted</th><th>Items</th><th>Action</th></tr>';
    reqs.forEach(function(r){
      html+=`<tr id="cons-req-row-${r.id}">
        <td style="font-weight:600">${r.chef_name}</td>
        <td class="ts">${(r.created_at||'').slice(0,16)}</td>
        <td style="font-size:.78rem;color:var(--text2)">${r.items||'—'}</td>
        <td>
          <button class="btn btn-sm btn-success" onclick="approveConsReq(${r.id})">✓ Approve</button>
          <button class="btn btn-sm btn-danger" onclick="rejectConsReq(${r.id})">✕ Reject</button>
        </td>
      </tr>`;
    });
    html+='</table></div>';
    div.innerHTML=html;
  } catch(e){ div.innerHTML='<div style="color:var(--text3)">Could not load.</div>'; }
}
async function approveConsReq(req_id){
  await api('/api/store/approve/'+req_id,'POST',{});
  toast('Consumable request approved ✓','success');
  loadConsumableReqs();
}
async function rejectConsReq(req_id){
  var note=prompt('Reason for rejection:')||'';
  await api('/api/store/approve/'+req_id,'POST',{reject:true,note});
  toast('Rejected','success');
  loadConsumableReqs();
}

// ── Inventory modals ──────────────────────────────────────────────────────────
function restockModal(id,name,unit){
  document.getElementById('restock-id').value=id;
  document.getElementById('restock-title').textContent='Restock — '+name+' ('+unit+')';
  document.getElementById('restock-qty').value=''; document.getElementById('restock-amt').value='';
  openModal('restock-modal');
}
async function doRestock(){
  var id=document.getElementById('restock-id').value,qty=parseFloat(document.getElementById('restock-qty').value||0),amt=parseFloat(document.getElementById('restock-amt').value||0),note=document.getElementById('restock-note').value;
  if(!qty||!amt){toast('Enter quantity and amount','error');return;}
  await api('/api/store/restock','POST',{ingredient_id:id,quantity:qty,amount:amt,note});
  toast('Restocked ✓','success'); closeModal('restock-modal'); setTimeout(()=>location.reload(),800);
}
function editIngModal(id,name,unit,cost){
  document.getElementById('edit-ing-id').value=id; document.getElementById('edit-ing-name').value=name;
  document.getElementById('edit-ing-unit').value=unit; document.getElementById('edit-ing-cost').value=cost;
  openModal('edit-ing-modal');
}
async function saveIngredient(){
  var id=document.getElementById('edit-ing-id').value;
  await api('/api/ingredients/'+id,'PUT',{name:document.getElementById('edit-ing-name').value,unit:document.getElementById('edit-ing-unit').value,cost:parseFloat(document.getElementById('edit-ing-cost').value)});
  toast('Saved ✓','success'); closeModal('edit-ing-modal'); setTimeout(()=>location.reload(),800);
}
async function addIngredient(){
  var name=document.getElementById('new-ing-name').value.trim(),unit=document.getElementById('new-ing-unit').value,cost=parseFloat(document.getElementById('new-ing-cost').value||0),cat=document.getElementById('new-ing-cat').value;
  if(!name||!cost){toast('Enter name and cost','error');return;}
  await api('/api/ingredients','POST',{name,unit,cost,reorder_level:parseFloat(document.getElementById('new-ing-reorder').value||5),category:cat});
  toast('Added ✓','success'); closeModal('add-ing-modal'); setTimeout(()=>location.reload(),800);
}

// ── Receive Stock (enhanced) ──────────────────────────────────────────────────
function calcRecvTotal(){
  var qty = parseFloat(document.getElementById('recv-qty').value||0);
  var up  = parseFloat(document.getElementById('recv-unit-price').value||0);
  var tx  = parseFloat(document.getElementById('recv-tx').value||0);
  var total = qty * up;
  if(!recvAmtManual && up > 0){
    document.getElementById('recv-amt').value = total > 0 ? total.toFixed(2) : '';
  }
  var amtVal = parseFloat(document.getElementById('recv-amt').value||0);
  document.getElementById('recv-summary-qty').textContent   = qty > 0 ? qty : '—';
  document.getElementById('recv-summary-up').textContent    = up > 0 ? 'KES '+up.toLocaleString() : '—';
  document.getElementById('recv-summary-total').textContent = amtVal > 0 ? 'KES '+amtVal.toLocaleString() : '—';
  document.getElementById('recv-summary-tx').textContent    = tx > 0 ? 'KES '+tx.toLocaleString() : '—';
  var grand = amtVal + tx;
  document.getElementById('recv-summary-grand').textContent = grand > 0 ? 'KES '+grand.toLocaleString() : '—';
}
async function receiveStock(){
  var ingId    = document.getElementById('recv-ing').value;
  var qty      = parseFloat(document.getElementById('recv-qty').value||0);
  var amt      = parseFloat(document.getElementById('recv-amt').value||0);
  var tx       = parseFloat(document.getElementById('recv-tx').value||0);
  var supplier = document.getElementById('recv-supplier').value.trim();
  var invoice  = document.getElementById('recv-invoice').value.trim();
  var recvDate = document.getElementById('recv-date').value;
  var note     = document.getElementById('recv-note').value.trim();
  if(!qty || !amt){ toast('Enter quantity and receipt amount','error'); return; }
  await api('/api/store/restock','POST',{
    ingredient_id: ingId, quantity: qty, amount: amt, tx_cost: tx,
    supplier: supplier, invoice_no: invoice, date: recvDate, note: note
  });
  var ingName = document.getElementById('recv-ing').options[document.getElementById('recv-ing').selectedIndex].text;
  var confirm = document.getElementById('recv-confirm');
  confirm.innerHTML = `✓ Received <strong>${qty}</strong> of <strong>${ingName}</strong> · KES ${amt.toLocaleString()}${tx>0?' + KES '+tx.toLocaleString()+' transport':''}${supplier?' · '+supplier:''}`;
  confirm.style.display = 'block';
  toast('Stock received ✓','success');
  // Clear fields
  ['recv-qty','recv-unit-price','recv-amt','recv-tx','recv-supplier','recv-invoice','recv-note'].forEach(function(id){
    var el=document.getElementById(id); if(el) el.value = id==='recv-tx'?'0':'';
  });
  recvAmtManual = false;
  calcRecvTotal();
  setTimeout(function(){ confirm.style.display='none'; },5000);
  loadReceiptLog();
}

// ── Receipt log ───────────────────────────────────────────────────────────────
async function loadReceiptLog(){
  var div = document.getElementById('receipt-log'); if(!div) return;
  try{
    var rows = await api('/api/store/receipts');
    if(!rows||!rows.length){ div.innerHTML='<div style="color:var(--text3);padding:.5rem">No receipts yet.</div>'; return; }
    var html='<div class="table-wrap"><table><tr><th>Date</th><th>Item</th><th>Qty</th><th>Unit Price</th><th>Total (KES)</th><th>Transport</th><th>Supplier</th><th>Invoice</th><th>Note</th></tr>';
    rows.forEach(function(r){
      html+=`<tr>
        <td class="ts">${(r.date||'').slice(0,10)}</td>
        <td style="font-weight:600">${r.ing_name||'—'} (${r.ing_unit||''})</td>
        <td>${r.quantity||'—'}</td>
        <td>${r.unit_price > 0 ? 'KES '+(r.unit_price||0).toLocaleString()+'/'+r.ing_unit : '—'}</td>
        <td>KES ${(r.amount||0).toLocaleString()}</td>
        <td>${r.tx_cost>0?'KES '+r.tx_cost.toLocaleString():'—'}</td>
        <td style="font-size:.78rem">${r.supplier||'—'}</td>
        <td style="font-size:.78rem">${r.invoice_no||'—'}</td>
        <td style="font-size:.78rem;color:var(--text2)">${r.note||'—'}</td>
      </tr>`;
    });
    html+='</table></div>';
    div.innerHTML=html;
  }catch(e){ div.innerHTML='<div style="color:var(--text3)">Could not load receipts.</div>'; }
}

// ── Category Management ───────────────────────────────────────────────────────
var _catTab = 'product';
function switchCatTab(type){
  _catTab = type;
  document.getElementById('pcat-tab').style.display = type==='product'?'':'none';
  document.getElementById('icat-tab').style.display = type==='ingredient'?'':'none';
  loadCategoryList(type);
}

async function openCatMgmt(){
  var note = document.getElementById('cat-mgmt-note');
  if(ROLE === 'general_manager'){
    note.textContent = 'As General Manager, you can add and delete categories.';
  } else {
    note.textContent = 'As Manager, you can add categories. Only the General Manager can delete categories.';
  }
  openModal('cat-mgmt-modal');
  switchCatTab('product');
}

async function loadCategoryList(type){
  var listId = type==='product' ? 'pcat-list' : 'icat-list';
  var div = document.getElementById(listId); if(!div) return;
  div.innerHTML='<div style="color:var(--text3);font-size:.82rem">Loading…</div>';
  try{
    var endpoint = type==='product' ? '/api/product_categories' : '/api/ingredient_categories';
    var data = await api(endpoint);
    var cats = data.categories || [];
    var staticCats = data.static || [];
    if(!cats.length){ div.innerHTML='<div style="color:var(--text3);font-size:.82rem">No categories yet.</div>'; return; }
    var html='';
    cats.forEach(function(c){
      var isStatic = staticCats.includes(c);
      html+=`<div style="display:flex;align-items:center;justify-content:space-between;padding:.35rem .5rem;border-bottom:1px solid var(--border);font-size:.85rem">
        <span>${c} ${isStatic?'<span style="font-size:.7rem;color:var(--text3)">(built-in)</span>':''}</span>
        ${ROLE==='general_manager' && !isStatic
          ? `<button class="btn btn-sm btn-danger" style="padding:2px 8px;font-size:.72rem" onclick="deleteCategory('${type}','${c.replace(/'/g,"\\'")}')">Delete</button>`
          : (ROLE==='general_manager' && isStatic ? '<span style="font-size:.7rem;color:var(--text3)">Cannot delete</span>' : '')
        }
      </div>`;
    });
    div.innerHTML=html;
  }catch(e){ div.innerHTML='<div style="color:var(--red);font-size:.82rem">Could not load.</div>'; }
}

async function addCategory(type){
  var inputId = type==='product' ? 'new-pcat-name' : 'new-icat-name';
  var name = document.getElementById(inputId).value.trim();
  if(!name){ toast('Enter a category name','error'); return; }
  var endpoint = type==='product' ? '/api/product_categories' : '/api/ingredient_categories';
  try{
    await api(endpoint,'POST',{name});
    document.getElementById(inputId).value='';
    toast('Category added ✓','success');
    loadCategoryList(type);
  }catch(e){ toast('Could not add category','error'); }
}

async function deleteCategory(type, name){
  if(!confirm('Delete category "'+name+'"?\nThis will fail if any items still use it.')){ return; }
  var endpoint = type==='product' ? '/api/product_categories/'+encodeURIComponent(name) : '/api/ingredient_categories/'+encodeURIComponent(name);
  try{
    await api(endpoint,'DELETE');
    toast('Category deleted ✓','success');
    loadCategoryList(type);
  }catch(e){ toast(e.message||'Could not delete — items may still be using this category','error'); }
}
</script>
{% endblock %}