{% extends 'base.html' %}
{% block title %}Production — Shiba Meals{% endblock %}
{% block page_title %}Production{% endblock %}
{% block extra_head %}
<style>
.slot-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:.4rem;margin:.5rem 0}
.slot-col{text-align:center}
.slot-label{font-size:.65rem;font-weight:700;letter-spacing:.03em;color:var(--text3);margin-bottom:3px;text-transform:uppercase}
.slot-input{width:100%;text-align:center;padding:5px 4px;font-size:.83rem;border:1px solid var(--border2);border-radius:var(--r)}
.slot-input:focus{border-color:var(--accent);outline:none}
.finished-total{font-weight:700;color:var(--green);font-size:.92rem;min-width:44px;text-align:center}
@media(max-width:700px){.slot-grid{grid-template-columns:1fr 1fr}.slot-col:last-child{grid-column:1/-1}}
</style>
{% endblock %}
{% block content %}
<div class="page-title">Production</div>
<div class="page-sub">{{ today }} · Targets · Output · Requisition</div>

{% if role == 'chef' %}
<div class="card" style="padding:.5rem 1rem;margin-bottom:.75rem">
  <label class="form-label" style="display:inline;margin-right:.5rem">Filter by line:</label>
  <select id="line-filter" onchange="filterByLine()" style="width:auto;display:inline-block;font-size:.82rem;padding:4px 10px">
    <option value="">All Products</option>
    {% set lines_seen = [] %}{% for p in products %}{% if p.category not in lines_seen %}{{ lines_seen.append(p.category) or '' }}<option value="{{ p.category }}">{{ p.category }}</option>{% endif %}{% endfor %}
  </select>
  <span style="font-size:.78rem;color:var(--text3);margin-left:.75rem">Your records only — other chefs' output is independent</span>
</div>
{% endif %}

<div class="tab-bar">
  <div class="tab active" data-tab="targets">Today's Targets</div>
  <div class="tab" data-tab="tomorrow">Tomorrow</div>
  {% if role == 'chef' %}
  <div class="tab" data-tab="orders" style="position:relative">🍽 My Orders <span id="orders-badge" style="display:none;background:var(--red);color:#fff;border-radius:99px;font-size:.65rem;padding:1px 6px;position:absolute;top:-4px;right:-6px"></span></div>
  {% endif %}
  <div class="tab" data-tab="portions">Record Output</div>
  <div class="tab" data-tab="req-status">📋 Requisition Status</div>
</div>

<!-- TODAY'S TARGETS -->
<div class="tab-panel active" data-panel="targets">
<div class="card">
  <div class="card-title">Today's Targets — {{ today }}
    <span id="lock-badge" style="float:right"></span>
    <span id="carry-msg" style="float:right;font-size:.78rem;color:var(--green);margin-right:.75rem"></span>
  </div>

  {% if role in ('general_manager','manager') %}
  <div class="alert alert-info">Targets are set by chefs each evening for the following day.</div>
  <div class="table-wrap"><table>
    <tr><th>Product</th><th>Category</th><th>Target</th><th>Potential Revenue<br><span style="font-size:.68rem;font-weight:400;color:var(--text3)">(target × price)</span></th><th>Real Expected Revenue<br><span style="font-size:.68rem;font-weight:400;color:var(--text3)">(finished portions × price)</span></th></tr>
    {% for p in products %}
    <tr class="prod-row" data-category="{{ p.category }}">
      <td style="font-weight:600">{{ p.name }}</td>
      <td><span class="badge badge-gray">{{ p.category }}</span></td>
      <td id="tgt-disp-{{ p.id }}">—</td>
      <td id="rev-disp-{{ p.id }}">—</td>
      <td id="real-rev-{{ p.id }}" style="color:var(--green);font-weight:600">—</td>
    </tr>
    {% endfor %}
    <tr class="hl">
      <td colspan="3" style="color:var(--text3)">Totals</td>
      <td id="total-rev-mgr" style="font-weight:700">—</td>
      <td id="total-real-rev-mgr" style="font-weight:800;color:var(--green)">—</td>
    </tr>
  </table></div>

  {% else %}
  <div class="alert alert-success" id="carry-info" style="display:none"></div>
  <div class="alert alert-info">
    Today's targets are <strong>automatically carried forward</strong> from what you entered last evening as Tomorrow's Targets.
    Edit below if needed, then click <strong>Save Today's Targets</strong>.
    To set tomorrow's targets and auto-send the ingredient requisition, use the <strong>Tomorrow</strong> tab.
  </div>
  <div class="table-wrap"><table>
    <tr><th>Product</th><th>Category</th><th>Target Qty</th></tr>
    {% for p in products %}
    <tr class="prod-row" data-category="{{ p.category }}">
      <td style="font-weight:600">{{ p.name }}</td>
      <td><span class="badge badge-gray">{{ p.category }}</span></td>
      <td><input type="number" min="0" value="0" style="width:80px" id="tgt-{{ p.id }}" data-pid="{{ p.id }}" data-price="{{ p.price }}" oninput="onTargetChange({{ p.id }})"></td>
    </tr>
    {% endfor %}
  </table></div>
  <div style="margin-top:.75rem">
    <button class="btn btn-primary" onclick="saveTodayTargets()">💾 Save Today's Targets</button>
    <span id="today-tgt-status" style="font-size:.78rem;color:var(--green);margin-left:.5rem"></span>
  </div>
  {% endif %}
</div>
</div>

<!-- TOMORROW'S TARGETS -->
<div class="tab-panel" data-panel="tomorrow">
<div class="card">
  <div class="card-title">Tomorrow's Targets — {{ tomorrow_date if tomorrow_date else 'Next Day' }}
    <span style="font-size:.78rem;color:var(--text3);font-weight:400;float:right">Auto-loaded as Today's Targets at day start</span>
  </div>
  {% if role in ('general_manager','manager') %}
  <div id="tmr-view-content"><div style="color:var(--text3)">Loading…</div></div>
  {% else %}
  <div class="alert alert-info">
    Set quantities for tomorrow. Click <strong>Save &amp; Auto-Requisition</strong> to store targets AND send an ingredient requisition to the store overnight.
  </div>
  <div class="table-wrap"><table>
    <tr><th>Product</th><th>Category</th><th>Target Qty</th></tr>
    {% for p in products %}
    <tr class="prod-row" data-category="{{ p.category }}">
      <td style="font-weight:600">{{ p.name }}</td>
      <td><span class="badge badge-gray">{{ p.category }}</span></td>
      <td><input type="number" min="0" value="0" style="width:80px" id="tmr-{{ p.id }}" data-pid="{{ p.id }}" data-price="{{ p.price }}"></td>
    </tr>
    {% endfor %}
  </table></div>
  <div style="margin-top:.75rem;display:flex;gap:.5rem;flex-wrap:wrap;align-items:center">
    <button class="btn btn-success" onclick="saveTomorrow()">💾 Save &amp; Auto-Requisition</button>
    <button class="btn" onclick="calcRequirementsPreview('tmr-')">🔍 Preview Ingredients</button>
    <span id="tmr-status" style="font-size:.78rem;color:var(--green);font-weight:600"></span>
  </div>
  {% endif %}
</div>
<div class="card" id="req-card" style="display:none">
  <div class="card-title">Ingredient Requirements (Preview)</div>
  <div class="table-wrap"><table id="req-table"><tr><th>Ingredient</th><th>Required</th><th>Unit</th><th>In Stock</th><th>Status</th></tr></table></div>
  <div style="margin-top:.5rem;display:flex;justify-content:space-between">
    <span style="font-size:.85rem;color:var(--text2)">Est. ingredient cost</span>
    <span style="font-weight:700" id="req-total">KES 0</span>
  </div>
</div>
</div>

<!-- RECORD OUTPUT -->
<div class="tab-panel" data-panel="portions">
<div class="card">
  <div class="card-title">Production Output — {{ today }}
    {% if role == 'chef' %}<span style="float:right;font-size:.75rem;color:var(--text3)">Your records only</span>{% endif %}
  </div>
  {% if role in ('general_manager','manager') %}
  <div class="alert alert-info">Showing summed output across all chefs. Wastage = Target − Finished. Efficiency = Finished ÷ Target × 100%.</div>
  {% else %}
  <div class="alert alert-info">
    Enter finished units from each production window (3 AM, 7 AM, 11 AM, 3 PM, 7 PM).
    <strong>Finished</strong> = total sellable units produced.
    <strong>Wastage</strong> is auto-calculated as Target − Finished.
    <strong>Efficiency</strong> = Finished ÷ Target.
  </div>
  {% endif %}

  <div class="table-wrap">
  <table>
    <thead>
      <tr>
        <th>Product</th>
        <th>Target</th>
        {% if role == 'chef' %}
        <th colspan="5" style="text-align:center;background:var(--blue-bg);color:var(--blue)">Finished — by Production Window</th>
        <th>Total Finished</th>
        {% else %}
        <th>Finished</th>
        {% endif %}
        <th>Wastage<br><span style="font-size:.65rem;font-weight:400">(Target−Finished)</span></th>
        <th>Efficiency</th>
        <th>Status</th>
        {% if role == 'chef' %}<th>Saved</th>{% endif %}
      </tr>
      {% if role == 'chef' %}
      <tr style="background:var(--blue-bg)">
        <th></th><th></th>
        <th style="font-size:.65rem;color:var(--blue)">3 AM</th>
        <th style="font-size:.65rem;color:var(--blue)">7 AM</th>
        <th style="font-size:.65rem;color:var(--blue)">11 AM</th>
        <th style="font-size:.65rem;color:var(--blue)">3 PM</th>
        <th style="font-size:.65rem;color:var(--blue)">7 PM</th>
        <th></th><th></th><th></th><th></th><th></th>
      </tr>
      {% endif %}
    </thead>
    <tbody>
    {% for p in products %}
    {% set rec = prod_map.get(p.id, {}) %}
    <tr id="prod-row-{{ p.id }}" class="prod-row" data-category="{{ p.category }}">
      <td style="font-weight:600">{{ p.name }}</td>
      <td id="target-{{ p.id }}" style="color:var(--text3);font-weight:600">0</td>
      {% if role in ('general_manager','manager') %}
        <td style="color:var(--green);font-weight:700">{{ rec.get('finished') or '—' }}</td>
        <td style="color:{{ 'var(--red)' if rec.get('wastage', 0) > 0 else 'var(--text3)' }}">{{ rec.get('wastage') or '—' }}</td>
      {% else %}
        <td><input type="number" min="0" style="width:58px" id="s3am-{{ p.id }}"  value="" placeholder="0" oninput="calcFinished({{ p.id }})"></td>
        <td><input type="number" min="0" style="width:58px" id="s7am-{{ p.id }}"  value="" placeholder="0" oninput="calcFinished({{ p.id }})"></td>
        <td><input type="number" min="0" style="width:58px" id="s11am-{{ p.id }}" value="" placeholder="0" oninput="calcFinished({{ p.id }})"></td>
        <td><input type="number" min="0" style="width:58px" id="s3pm-{{ p.id }}"  value="" placeholder="0" oninput="calcFinished({{ p.id }})"></td>
        <td><input type="number" min="0" style="width:58px" id="s7pm-{{ p.id }}"  value="" placeholder="0" oninput="calcFinished({{ p.id }})"></td>
        <td><span class="finished-total" id="finished-{{ p.id }}">0</span></td>
        <td><span id="wastage-{{ p.id }}" style="color:var(--text3)">—</span></td>
      {% endif %}
      <td id="yield-pct-{{ p.id }}">—</td>
      <td id="yield-badge-{{ p.id }}">—</td>
      {% if role == 'chef' %}<td class="ts" id="saved-at-{{ p.id }}"></td>{% endif %}
    </tr>
    {% endfor %}
    </tbody>
  </table>
  </div>

  {% if role == 'chef' %}
  <div style="margin-top:.75rem;display:flex;gap:.5rem;align-items:center">
    <button class="btn btn-primary" onclick="saveProduction()">💾 Save Production Record</button>
    <span id="save-status" style="font-size:.8rem;color:var(--text3)"></span>
  </div>
  {% endif %}
</div>

{% if role in ('general_manager','manager') %}
<div class="card">
  <div class="card-title">All Chefs Output Log
    <span style="float:right;font-size:.72rem;color:var(--text3);font-weight:400">Each chef's records listed separately</span>
  </div>
  <div id="chef-output-log"><div style="color:var(--text3)">Loading…</div></div>
</div>
{% endif %}
</div>

<!-- REQUISITION STATUS -->
<div class="tab-panel" data-panel="req-status">
<div class="card">
  <div class="card-title">📋 My Requisition Status</div>
  <div class="alert alert-info">The store or manager will Approve or Reject your requisitions. Check here for updates.</div>
  <div id="req-status-list"><div style="color:var(--text3);padding:.5rem">Loading…</div></div>
</div>
</div>

{% if role == 'chef' %}
<div class="tab-panel" data-panel="orders">
<div class="card">
  <div class="card-title">🍽 Orders Assigned to Me
    <button class="btn btn-sm" style="float:right" onclick="loadChefOrders()">↺ Refresh</button>
  </div>
  <div class="alert alert-info" style="margin-bottom:.5rem">
    Mark <strong>Prepare</strong> when you start, then <strong>Mark as Done</strong> when the dish is finished and ready for collection.
  </div>
  <div id="chef-orders-panel"><div style="color:var(--text3);padding:1rem;text-align:center">Loading…</div></div>
</div>
</div>
{% endif %}

{% endblock %}
{% block scripts %}
<script>
var products = {{ products | tojson }};
var TODAY = '{{ today }}';
var ROLE = '{{ role }}';
var TOMORROW = (function(){ var d=new Date(TODAY); d.setDate(d.getDate()+1); return d.toISOString().slice(0,10); })();

// ── Init ─────────────────────────────────────────────────────────────────────
(async function(){
  try {
    var data = await api('/api/production/targets?date='+TODAY);
    var hasTargets = Object.keys(data).some(function(pid){ return data[pid].qty > 0; });
    if(!hasTargets && ROLE==='chef'){
      var cf = await api('/api/production/carry_forward','POST',{date:TODAY});
      if(cf.copied > 0){
        var cm=document.getElementById('carry-msg'); if(cm) cm.textContent='✓ '+cf.copied+' targets auto-loaded from yesterday';
        var ci=document.getElementById('carry-info'); if(ci){ci.textContent='✓ '+cf.copied+' targets automatically loaded from your previous evening entry.';ci.style.display='block';}
        data = await api('/api/production/targets?date='+TODAY);
      }
    }
    applyTargets(data);
  }catch(e){ console.error('Targets load error:', e); }

  try {
    var recs = await api('/api/production/my_records?date='+TODAY);
    products.forEach(function(p){
      var r = recs[String(p.id)]; if(!r) return;
      // Restore slot values
      ['3am','7am','11am','3pm','7pm'].forEach(function(slot){
        var el=document.getElementById('s'+slot+'-'+p.id);
        if(el && r['slot_'+slot]) el.value = r['slot_'+slot];
      });
      calcFinished(p.id);
    });
  }catch(e){}

  var userLine = '{{ session.get("line") or "" }}';
  if(userLine && ROLE==='chef'){ var lf=document.getElementById('line-filter'); if(lf){lf.value=userLine;filterByLine();} }

  if(ROLE!=='chef'){ loadChefLog(); loadTmrView(); loadRealExpectedRevenue(); }
  loadReqStatus();
})();

function applyTargets(data){
  var potTotal=0, realTotal=0;
  for(var pid in data){
    var qty=data[pid].qty||0;
    var tEl=document.getElementById('target-'+pid); var iEl=document.getElementById('tgt-'+pid);
    if(tEl) tEl.textContent=qty>0?qty:0;
    if(iEl) iEl.value=qty>0?qty:0;
    if(data[pid].locked&&iEl){iEl.disabled=true; var lb=document.getElementById('lock-badge'); if(lb)lb.innerHTML='<span class="badge badge-amber">🔒 Locked</span>';}
    var dd=document.getElementById('tgt-disp-'+pid),rd=document.getElementById('rev-disp-'+pid);
    if(dd) dd.textContent=qty>0?qty:'—';
    if(rd&&qty>0){var pObj=products.find(function(x){return x.id==parseInt(pid);});if(pObj){var r=Math.round(qty*pObj.price);rd.textContent='KES '+r.toLocaleString();potTotal+=r;}}
    calcFinished(parseInt(pid));
  }
  var tr=document.getElementById('total-rev-mgr'); if(tr) tr.textContent=potTotal>0?'KES '+potTotal.toLocaleString():'—';
}

async function loadRealExpectedRevenue(){
  try{
    var data=await api('/api/production/real_expected_revenue?date='+TODAY);
    var totalEl=document.getElementById('total-real-rev-mgr');
    if(totalEl) totalEl.textContent=data.total>0?'KES '+Math.round(data.total).toLocaleString():'KES 0';
    (data.items||[]).forEach(function(item){
      var el=document.getElementById('real-rev-'+item.product_id);
      if(el) el.textContent=item.revenue>0?'KES '+Math.round(item.revenue).toLocaleString():'—';
    });
  }catch(e){}
}

function calcFinished(pid){
  var slots=['3am','7am','11am','3pm','7pm'];
  var total=0;
  slots.forEach(function(s){
    var el=document.getElementById('s'+s+'-'+pid);
    if(el) total+=parseInt(el.value||0);
  });
  var finEl=document.getElementById('finished-'+pid);
  if(finEl) finEl.textContent=total;
  var target=parseInt((document.getElementById('target-'+pid)||{}).textContent||0);
  var wastage=Math.max(0,target-total);
  var wEl=document.getElementById('wastage-'+pid);
  if(wEl){
    if(target>0){wEl.textContent=wastage;wEl.style.color=wastage>0?'var(--red)':'var(--green)';}
    else{wEl.textContent='—';wEl.style.color='var(--text3)';}
  }
  var yEl=document.getElementById('yield-pct-'+pid),bEl=document.getElementById('yield-badge-'+pid);
  if(target>0){
    var pct=Math.round(total/target*100);
    if(yEl) yEl.textContent=pct+'%';
    if(bEl) bEl.innerHTML=pct>=90?'<span class="badge badge-green">✓ On Track</span>':pct>=70?'<span class="badge badge-amber">△ Below</span>':'<span class="badge badge-red">⚠ Low</span>';
  } else {
    if(yEl) yEl.textContent='—'; if(bEl) bEl.innerHTML='—';
  }
}

function onTargetChange(pid){
  var el=document.getElementById('tgt-'+pid),tEl=document.getElementById('target-'+pid);
  if(tEl&&el) tEl.textContent=el.value||0;
}

function filterByLine(){
  var val=document.getElementById('line-filter')?.value||'';
  document.querySelectorAll('.prod-row').forEach(function(row){
    row.style.display=(val===''||row.dataset.category===val)?'':'none';
  });
}

async function saveTodayTargets(){
  var targets=getTargets('tgt-');
  if(!Object.keys(targets).length){toast('Set at least one target','error');return;}
  await api('/api/production/targets?date='+TODAY,'POST',{targets});
  var el=document.getElementById('today-tgt-status'); if(el) el.textContent='✓ Saved';
  toast("Today's targets saved ✓",'success');
  applyTargets(await api('/api/production/targets?date='+TODAY));
}

async function calcRequirementsPreview(prefix){
  prefix=prefix||'tmr-';
  var targets=getTargets(prefix);
  if(!Object.keys(targets).length){toast('Set at least one target','error');return;}
  var reqs={},reqMeta={};
  for(var pid in targets){
    try{var recipe=await api('/api/recipe/'+pid);recipe.forEach(function(r){var need=(r.qty_used/r.yields)*targets[pid];if(!reqs[r.ingredient_id]){reqs[r.ingredient_id]=0;reqMeta[r.ingredient_id]={name:r.ing_name,unit:r.unit,cost:r.cost_per_unit,stock:0};}reqs[r.ingredient_id]+=need;});}catch(e){}
  }
  try{var ings=await api('/api/ingredients');ings.forEach(function(i){if(reqMeta[i.id])reqMeta[i.id].stock=i.stock||0;});}catch(e){}
  var rows='<tr><th>Ingredient</th><th>Required</th><th>Unit</th><th>In Stock</th><th>Status</th></tr>',total=0;
  for(var iid in reqs){
    var m=reqMeta[iid],needed=reqs[iid];total+=needed*(m.cost||0);
    var ok=m.stock>=needed;
    rows+=`<tr><td>${m.name}</td><td style="font-weight:600">${needed.toFixed(3)}</td><td>${m.unit}</td><td>${m.stock.toFixed(2)}</td><td><span class="badge ${ok?'badge-green':'badge-red'}">${ok?'OK':'⚠ Short'}</span></td></tr>`;
  }
  document.getElementById('req-table').innerHTML=rows;
  document.getElementById('req-total').textContent='KES '+Math.round(total).toLocaleString();
  document.getElementById('req-card').style.display='block';
}

async function saveTomorrow(){
  var targets=getTargets('tmr-');
  if(!Object.keys(targets).length){toast('Set at least one target for tomorrow','error');return;}
  await api('/api/production/targets?date='+TOMORROW,'POST',{targets});
  var result=await api('/api/production/requisition?date='+TODAY,'POST',{for_date:TOMORROW,req_type:'kitchen',auto_from_recipe:true});
  var el=document.getElementById('tmr-status'); if(el) el.textContent='✓ Saved & Req #'+result.req_id+' sent';
  toast('Tomorrow targets saved & requisition sent ✓','success');
  products.forEach(function(p){var el=document.getElementById('tmr-'+p.id);if(el)el.value='';});
}

function getTargets(prefix){
  var targets={};
  document.querySelectorAll('[id^="'+prefix+'"]').forEach(function(el){if(el.dataset.pid&&parseFloat(el.value||0)>0)targets[el.dataset.pid]=parseFloat(el.value);});
  return targets;
}

async function saveProduction(){
  var records={}, hasData=false;
  products.forEach(function(p){
    var get=function(id){var el=document.getElementById(id);return el?parseInt(el.value||0):0;};
    var s3am=get('s3am-'+p.id),s7am=get('s7am-'+p.id),s11am=get('s11am-'+p.id),s3pm=get('s3pm-'+p.id),s7pm=get('s7pm-'+p.id);
    var finished=s3am+s7am+s11am+s3pm+s7pm;
    var target=parseInt((document.getElementById('target-'+p.id)||{}).textContent||0);
    var wastage=Math.max(0,target-finished);
    if(finished>0){records[p.id]={slot_3am:s3am,slot_7am:s7am,slot_11am:s11am,slot_3pm:s3pm,slot_7pm:s7pm,finished,wastage,expected:target};hasData=true;}
  });
  if(!hasData){toast('Enter finished units in at least one production window','error');return;}
  var btn=document.querySelector('[onclick="saveProduction()"]'),statusEl=document.getElementById('save-status');
  btnLoading(btn,true,'Saving…');
  try{
    await api('/api/production/record','POST',{date:TODAY,records});
    var ts=new Date().toLocaleTimeString('en-KE',{hour:'2-digit',minute:'2-digit'});
    toast('Saved ✓ Stock deducted from store','success');
    if(statusEl) statusEl.textContent='Saved '+ts;
    products.forEach(function(p){
      ['3am','7am','11am','3pm','7pm'].forEach(function(s){var el=document.getElementById('s'+s+'-'+p.id);if(el)el.value='';});
      var fEl=document.getElementById('finished-'+p.id);if(fEl)fEl.textContent='0';
      var wEl=document.getElementById('wastage-'+p.id);if(wEl){wEl.textContent='—';wEl.style.color='var(--text3)';}
      var saEl=document.getElementById('saved-at-'+p.id);if(saEl)saEl.textContent=ts;
      calcFinished(p.id);
    });
  }catch(e){toast('Save failed — check connection','error');}
  btnLoading(btn,false,'💾 Save Production Record');
}

async function loadTmrView(){
  var wrap=document.getElementById('tmr-view-content');if(!wrap)return;
  try{
    var data=await api('/api/production/targets?date='+TOMORROW);
    var rows=Object.keys(data).filter(function(pid){return data[pid].qty>0;});
    if(!rows.length){wrap.innerHTML='<div class="alert alert-info">No targets set for tomorrow yet.</div>';return;}
    var html='<div class="table-wrap"><table><tr><th>Product</th><th>Target Qty</th><th>Potential Revenue</th></tr>';
    var total=0;
    rows.forEach(function(pid){
      var p=products.find(function(x){return x.id==parseInt(pid);});
      if(p){var rev=data[pid].qty*p.price;total+=rev;html+=`<tr><td style="font-weight:600">${p.name}</td><td>${data[pid].qty}</td><td>KES ${Math.round(rev).toLocaleString()}</td></tr>`;}
    });
    html+=`<tr class="hl"><td colspan="2" style="font-weight:600">Total Potential</td><td style="font-weight:700">KES ${Math.round(total).toLocaleString()}</td></tr>`;
    html+='</table></div>';wrap.innerHTML=html;
  }catch(e){wrap.innerHTML='<div class="alert alert-warning">Could not load.</div>';}
}

async function loadChefLog(){
  var div=document.getElementById('chef-output-log');if(!div)return;
  try{
    var rows=await api('/api/production/chef_log?date='+TODAY);
    if(!rows||!rows.length){div.innerHTML='<div class="alert alert-info">No production records yet today.</div>';return;}
    var html='<div class="table-wrap"><table><tr><th>Chef</th><th>Product</th><th>Finished</th><th>Target</th><th>Wastage</th><th>Efficiency</th><th>Saved At</th></tr>';
    rows.forEach(function(r){
      var eff=r.expected_output>0?Math.round(r.finished/r.expected_output*100)+'%':'—';
      html+=`<tr><td style="font-weight:600">${r.chef_name}</td><td>${r.product_name}</td><td style="color:var(--green);font-weight:700">${r.finished}</td><td style="color:var(--text2)">${r.expected_output||'—'}</td><td style="${r.wastage>0?'color:var(--red)':'color:var(--text3)'}">${r.wastage}</td><td>${eff}</td><td class="ts">${r.recorded_at}</td></tr>`;
    });
    html+='</table></div>';div.innerHTML=html;
  }catch(e){div.innerHTML='<div style="color:var(--text3)">Could not load chef log.</div>';}
}

async function loadReqStatus(){
  var div=document.getElementById('req-status-list');if(!div)return;
  try{
    var reqs=await api('/api/my_requisitions');
    if(!reqs||!reqs.length){div.innerHTML='<div class="alert alert-info">No requisitions in the last 7 days.</div>';return;}
    var html='<div class="table-wrap"><table><tr><th>Date</th><th>For</th><th>Type</th><th>Items</th><th>Status</th><th>Reviewed By</th><th>Note</th></tr>';
    reqs.forEach(function(r){
      var sc=r.status==='approved'?'badge-green':r.status==='rejected'?'badge-red':'badge-amber';
      var si=r.status==='approved'?'✓ Approved':r.status==='rejected'?'✕ Rejected':'⏳ Pending';
      var approver=r.reviewer_name?r.reviewer_name:'<span style="color:var(--text3)">—</span>';
      html+=`<tr><td class="ts">${(r.created_at||'').slice(0,16)}</td><td>${r.for_date||'—'}</td><td><span class="badge badge-blue">${(r.req_type||'').replace('_',' ')}</span></td><td style="font-size:.78rem;color:var(--text2);max-width:200px">${r.items||'—'}</td><td><span class="badge ${sc}">${si}</span></td><td style="font-size:.78rem">${approver}</td><td style="font-size:.78rem;color:var(--text2)">${r.review_note||'—'}</td></tr>`;
    });
    html+='</table></div>';div.innerHTML=html;
  }catch(e){div.innerHTML='<div class="alert alert-warning">Could not load requisition status.</div>';}
}

document.addEventListener('click',function(e){
  var tab=e.target.closest('.tab'); if(!tab)return;
  if(tab.dataset.tab==='tomorrow'&&ROLE!=='chef') setTimeout(loadTmrView,50);
  if(tab.dataset.tab==='portions'&&ROLE!=='chef') setTimeout(loadChefLog,50);
  if(tab.dataset.tab==='req-status') setTimeout(loadReqStatus,50);
  if(tab.dataset.tab==='orders'&&ROLE==='chef') setTimeout(loadChefOrders,50);
  if(tab.dataset.tab==='targets'&&ROLE!=='chef') setTimeout(loadRealExpectedRevenue,50);
});

// ── Chef Orders ──────────────────────────────────────────────────────────────
async function loadChefOrders(){
  if(ROLE!=='chef')return;
  var div=document.getElementById('chef-orders-panel');if(!div)return;
  div.innerHTML='<div style="color:var(--text3);padding:1rem;text-align:center">Loading…</div>';
  try{
    var orders=await api('/api/orders?date='+TODAY);
    var badge=document.getElementById('orders-badge');
    var activeCount=orders.filter(function(o){return o.status==='pending'||o.status==='preparing';}).length;
    if(badge){if(activeCount>0){badge.textContent=activeCount;badge.style.display='inline';}else{badge.style.display='none';}}
    if(!orders.length){div.innerHTML='<div style="color:var(--text3);text-align:center;padding:1rem">No orders assigned to you today.</div>';return;}
    var SC={pending:'badge-amber',preparing:'badge-blue',ready:'badge-green',served:'badge-gray',cancelled:'badge-red'};
    var html='<div class="table-wrap"><table><tr><th>#</th><th>Table</th><th>Items</th><th>Notes</th><th>Status</th><th>Time</th><th>Action</th></tr>';
    orders.forEach(function(o){
      var items=(o.items||[]).map(function(i){return '<strong>'+i.qty+'×</strong> '+i.product_name+(i.notes?'<em style="color:var(--text3)"> ('+i.notes+')</em>':'');}).join('<br>');
      var sc=SC[o.status]||'badge-gray';
      var action='';
      if(o.status==='pending'){
        action='<button class="btn btn-sm btn-primary" onclick="chefUpdateOrder('+o.id+',\'preparing\')">▶ Prepare</button>';
      }else if(o.status==='preparing'){
        action='<button class="btn btn-sm btn-success" onclick="chefUpdateOrder('+o.id+',\'ready\')">✓ Mark as Done</button>';
      }else{
        action='<span style="color:var(--text3);font-size:.75rem">'+o.status+'</span>';
      }
      html+=`<tr><td style="color:var(--text3)">#${o.id}</td><td style="font-weight:600">${o.table_ref||'—'}</td><td style="font-size:.82rem;line-height:1.4">${items}</td><td style="font-size:.78rem;color:var(--text3)">${o.notes||'—'}</td><td><span class="badge ${sc}">${o.status}</span></td><td class="ts">${(o.created_at||'').slice(11,16)}</td><td>${action}</td></tr>`;
    });
    html+='</table></div>';div.innerHTML=html;
  }catch(e){div.innerHTML='<div style="color:var(--red);padding:1rem">Could not load orders: '+e.message+'</div>';}
}

async function chefUpdateOrder(id,status){
  try{
    await api('/api/orders/'+id,'PUT',{status});
    toast(status==='preparing'?'Preparing order ✓':'Order done — waiter notified ✓','success');
    setTimeout(loadChefOrders,400);
  }catch(e){toast('Failed: '+e.message,'error');}
}

if(ROLE==='chef'){setTimeout(loadChefOrders,500);}
</script>
{% endblock %}