{% extends 'base.html' %}
{% block title %}Storekeeper Station — Shiba Meals{% endblock %}
{% block page_title %}Storekeeper{% endblock %}
{% block content %}
<div class="page-title">Storekeeper Station</div>
<div class="page-sub">{{ today }} · Inventory · Pending requisitions</div>

<div class="tab-bar">
  <div class="tab active" data-tab="pending">Pending Requisitions</div>
  <div class="tab" data-tab="inventory">Inventory Levels</div>
  <div class="tab" data-tab="restock">Receive Stock</div>
</div>

<!-- PENDING REQUISITIONS -->
<div class="tab-panel active" data-panel="pending">
<div class="card">
  <div class="card-title">Pending Requisitions <span id="pending-badge" class="badge badge-amber" style="float:right"></span></div>
  <div id="req-list">
    {% if requisitions %}
    <div class="table-wrap">
    <table>
      <tr><th>ID</th><th>Requested By</th><th>Type</th><th>For Date</th><th>Created</th><th>Items</th><th>Action</th></tr>
      {% for r in requisitions %}
      <tr id="req-row-{{ r.id }}">
        <td style="font-family:monospace">#{{ r.id }}</td>
        <td style="font-weight:600">{{ r.chef_name }}</td>
        <td><span class="badge badge-{% if r.req_type == 'kitchen' %}blue{% elif r.req_type == 'outlet' %}purple{% else %}gray{% endif %}">{{ r.req_type }}</span></td>
        <td>{{ r.for_date }}</td>
        <td class="ts">{{ r.created_at[:16] }}</td>
        <td><button class="btn btn-sm btn-view" onclick="viewReqItems({{ r.id }})">View Items</button></td>
        <td>
          <button class="btn btn-sm btn-success" onclick="approveReq({{ r.id }})">✓ Approve</button>
          <button class="btn btn-sm btn-danger" onclick="rejectReq({{ r.id }})">✕ Reject</button>
        </td>
      </tr>
      {% endfor %}
    </table>
    </div>
    {% else %}
    <div class="alert alert-success">✓ No pending requisitions at the moment.</div>
    {% endif %}
  </div>
</div>
</div>

<!-- INVENTORY -->
<div class="tab-panel" data-panel="inventory">
<div class="card">
  <div class="card-title">Current Stock Levels</div>
  <div class="tab-bar" style="margin-top:.25rem">
    <div class="tab active" data-tab="sk-ing">Ingredients</div>
    <div class="tab" data-tab="sk-cons">Consumables</div>
  </div>
  <div class="tab-panel active" data-panel="sk-ing">
  <div class="table-wrap">
  <table>
    <tr><th>Ingredient</th><th>Unit</th><th>In Stock</th><th>Reorder Level</th><th>Status</th></tr>
    {% for i in ingredients if i.category != 'consumable' %}
    <tr>
      <td style="font-weight:600">{{ i.name }}</td>
      <td>{{ i.unit }}</td>
      <td style="font-weight:600;{% if (i.quantity or 0) < i.reorder_level %}color:var(--red){% endif %}">{{ "{:.2f}".format(i.quantity or 0) }}</td>
      <td style="color:var(--text3)">{{ i.reorder_level }}</td>
      <td>
        {% if (i.quantity or 0) < 3 %}<span class="badge badge-red">Critical</span>
        {% elif (i.quantity or 0) < i.reorder_level %}<span class="badge badge-amber">Low — order soon</span>
        {% else %}<span class="badge badge-green">Good</span>{% endif %}
      </td>
    </tr>
    {% endfor %}
  </table>
  </div>
  </div>
  <div class="tab-panel" data-panel="sk-cons">
  <div class="table-wrap">
  <table>
    <tr><th>Item</th><th>Unit</th><th>In Stock</th><th>Status</th></tr>
    {% for i in ingredients if i.category == 'consumable' %}
    <tr>
      <td style="font-weight:600">{{ i.name }}</td>
      <td>{{ i.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>
    </tr>
    {% endfor %}
  </table>
  </div>
  </div>
</div>
</div>

<!-- RECEIVE STOCK -->
<div class="tab-panel" data-panel="restock">
<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-row"><label class="form-label">Ingredient / Item</label>
    <select id="rs-ing" style="max-width:400px">
      {% for i in ingredients %}<option value="{{ i.id }}" data-unit="{{ i.unit }}">{{ i.name }} ({{ i.unit }})</option>{% endfor %}
    </select>
  </div>
  <div class="form-grid">
    <div class="form-row"><label class="form-label">Quantity Received</label><input type="number" id="rs-qty" min="0" step="0.01" placeholder="0.00" oninput="calcSkRecvTotal()"></div>
    <div class="form-row"><label class="form-label">Unit Price (KES)</label><input type="number" id="rs-unit-price" min="0" step="0.01" placeholder="0.00" oninput="calcSkRecvTotal()"></div>
    <div class="form-row"><label class="form-label">Total Amount Paid (KES)</label><input type="number" id="rs-amount" min="0" placeholder="Auto-calculated" oninput="skAmtManual=true;calcSkRecvTotal()"></div>
    <div class="form-row"><label class="form-label">Transport/Tx Cost (KES)</label><input type="number" id="rs-tx" value="0" min="0" oninput="calcSkRecvTotal()"></div>
    <div class="form-row"><label class="form-label">Delivery Date</label><input type="date" id="rs-date" value="{{ today }}"></div>
    <div class="form-row"><label class="form-label">Supplier Name</label><input id="rs-supplier" placeholder="e.g. Kamau Farmers Market"></div>
    <div class="form-row"><label class="form-label">Invoice / Receipt No.</label><input id="rs-invoice" placeholder="e.g. INV-2024-001"></div>
    <div class="form-row"><label class="form-label">Additional Note</label><input id="rs-note" placeholder="Any other details…"></div>
  </div>
  <div style="margin-top:.5rem;padding:.5rem .75rem;background:var(--surface2);border-radius:6px;font-size:.85rem;display:flex;gap:1.5rem;flex-wrap:wrap">
    <span>Qty: <strong id="sk-summary-qty">—</strong></span>
    <span>Unit Price: <strong id="sk-summary-up">—</strong></span>
    <span>Total: <strong id="sk-summary-total">—</strong></span>
    <span>Transport: <strong id="sk-summary-tx">—</strong></span>
    <span>Grand Total: <strong id="sk-summary-grand">—</strong></span>
  </div>
  <button class="btn btn-primary" style="margin-top:.75rem" onclick="receiveStock()">📦 Record Receipt</button>
  <div id="rs-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="loadSkReceiptLog()">↻ Refresh</button>
  </div>
  <div id="sk-receipt-log"><div style="color:var(--text3)">Loading…</div></div>
</div>
</div>

<!-- Requisition Items Modal -->
<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" id="req-items-title">Requisition Items</div>
    <div id="req-items-body"><div style="color:var(--text3)">Loading…</div></div>
    <div style="margin-top:1rem;display:flex;gap:.5rem">
      <button class="btn btn-success" id="req-approve-btn" onclick="">✓ Approve</button>
      <button class="btn btn-danger" id="req-reject-btn" onclick="">✕ Reject</button>
    </div>
  </div>
</div>
{% endblock %}
{% block scripts %}
<script>
var pendingCount={{ requisitions|length }};
var badge=document.getElementById('pending-badge');
if(badge) badge.textContent=pendingCount+' pending';

async function viewReqItems(req_id){
  document.getElementById('req-items-title').textContent='Requisition #'+req_id+' — Items';
  document.getElementById('req-items-body').innerHTML='<div style="color:var(--text3)">Loading…</div>';
  document.getElementById('req-approve-btn').onclick=function(){approveReq(req_id);closeModal('req-items-modal');};
  document.getElementById('req-reject-btn').onclick=function(){rejectReq(req_id);closeModal('req-items-modal');};
  openModal('req-items-modal');
  try{
    var items=await api('/api/requisitions/'+req_id+'/items');
    var html='<div class="table-wrap"><table><tr><th>Ingredient</th><th>Qty Requested</th><th>Unit</th><th>Est. Cost</th></tr>';
    var total=0;
    items.forEach(function(i){var cost=i.qty_requested*(i.cost_per_unit||0);total+=cost;html+=`<tr><td style="font-weight:600">${i.ing_name}</td><td>${(i.qty_requested||0).toFixed(3)}</td><td>${i.unit}</td><td>KES ${Math.round(cost).toLocaleString()}</td></tr>`;});
    html+=`<tr class="hl"><td colspan="3" style="font-weight:600">Estimated Total</td><td style="font-weight:700">KES ${Math.round(total).toLocaleString()}</td></tr>`;
    html+='</table></div>';
    document.getElementById('req-items-body').innerHTML=html;
  }catch(e){document.getElementById('req-items-body').innerHTML='<div class="alert alert-danger">Could not load items.</div>';}
}

async function approveReq(req_id){
  await api('/api/store/approve/'+req_id,'POST',{});
  var row=document.getElementById('req-row-'+req_id);
  if(row) row.style.opacity='0.3';
  toast('Requisition #'+req_id+' approved','success');
  setTimeout(function(){if(row)row.remove();},1000);
}

async function rejectReq(req_id){
  var reason=prompt('Reason for rejection (optional):','');
  if(reason===null)return;
  await api('/api/store/approve/'+req_id,'POST',{reject:true,reason});
  var row=document.getElementById('req-row-'+req_id);
  if(row) row.style.opacity='0.3';
  toast('Requisition #'+req_id+' rejected','success');
  setTimeout(function(){if(row)row.remove();},1000);
}

var skAmtManual = false;

function calcSkRecvTotal(){
  var qty = parseFloat(document.getElementById('rs-qty').value||0);
  var up  = parseFloat(document.getElementById('rs-unit-price').value||0);
  var tx  = parseFloat(document.getElementById('rs-tx').value||0);
  var total = qty * up;
  if(!skAmtManual && up > 0){
    document.getElementById('rs-amount').value = total > 0 ? total.toFixed(2) : '';
  }
  var amtVal = parseFloat(document.getElementById('rs-amount').value||0);
  document.getElementById('sk-summary-qty').textContent   = qty > 0 ? qty : '—';
  document.getElementById('sk-summary-up').textContent    = up > 0 ? 'KES '+up.toLocaleString() : '—';
  document.getElementById('sk-summary-total').textContent = amtVal > 0 ? 'KES '+amtVal.toLocaleString() : '—';
  document.getElementById('sk-summary-tx').textContent    = tx > 0 ? 'KES '+tx.toLocaleString() : '—';
  var grand = amtVal + tx;
  document.getElementById('sk-summary-grand').textContent = grand > 0 ? 'KES '+grand.toLocaleString() : '—';
}

async function receiveStock(){
  var ing_id   = document.getElementById('rs-ing').value;
  var qty      = parseFloat(document.getElementById('rs-qty').value||0);
  var amount   = parseFloat(document.getElementById('rs-amount').value||0);
  var tx       = parseFloat(document.getElementById('rs-tx').value||0);
  var supplier = document.getElementById('rs-supplier').value.trim();
  var invoice  = document.getElementById('rs-invoice').value.trim();
  var extraNote= document.getElementById('rs-note').value.trim();
  var parts = [];
  if(supplier) parts.push('Supplier: '+supplier);
  if(invoice)  parts.push('Invoice: '+invoice);
  if(extraNote) parts.push(extraNote);
  var note = parts.join(' | ');
  if(!ing_id || qty<=0){ toast('Enter ingredient and quantity','error'); return; }
  await api('/api/store/restock','POST',{ingredient_id:parseInt(ing_id),quantity:qty,amount,tx_cost:tx,note});
  var ingName = document.getElementById('rs-ing').options[document.getElementById('rs-ing').selectedIndex].text;
  var confirmEl = document.getElementById('rs-confirm');
  confirmEl.innerHTML = `✓ Received <strong>${qty}</strong> of <strong>${ingName}</strong> · KES ${amount.toLocaleString()}${tx>0?' + KES '+tx.toLocaleString()+' transport':''}${supplier?' · '+supplier:''}`;
  confirmEl.style.display = 'block';
  toast('Stock received ✓','success');
  ['rs-qty','rs-unit-price','rs-amount','rs-supplier','rs-invoice','rs-note'].forEach(function(id){
    var el=document.getElementById(id); if(el) el.value = id==='rs-tx'?'0':'';
  });
  skAmtManual = false;
  calcSkRecvTotal();
  setTimeout(function(){ confirmEl.style.display='none'; },5000);
  loadSkReceiptLog();
}

async function loadSkReceiptLog(){
  var div = document.getElementById('sk-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>Amount (KES)</th><th>Transport</th><th>Note / Supplier</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||'—'}</td>
        <td>${r.quantity||'—'}</td>
        <td>KES ${(r.amount||0).toLocaleString()}</td>
        <td>${r.tx_cost>0?'KES '+r.tx_cost.toLocaleString():'—'}</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>'; }
}

document.addEventListener('DOMContentLoaded', function(){ loadSkReceiptLog(); });
</script>
{% endblock %}