{% extends 'base.html' %}
{% block title %}Logistics — Shiba Meals{% endblock %}
{% block page_title %}Logistics{% endblock %}
{% block content %}
<div class="page-title">Logistics — Dispatch</div>
<div class="page-sub">Send finished products to outlets · Margin-aware decisions</div>

<div class="tab-bar">
  <div class="tab active" data-tab="dispatch">New Dispatch</div>
  <div class="tab" data-tab="history">Dispatch History</div>
  <div class="tab" data-tab="outlet-stock">Outlet Stock Monitor</div>
</div>

<!-- DISPATCH -->
<div class="tab-panel active" data-panel="dispatch">
<div class="card">
  <div class="card-title">Available at Production Centre</div>
  <div class="grid-4" id="available-grid">
    {% for p in products %}
    <div class="metric {% if available.get(p.id, 0) > 0 %}green{% endif %}">
      <div class="metric-label" style="font-size:.65rem">{{ p.name }}</div>
      <div class="metric-value" style="font-size:1.2rem">{{ available.get(p.id, 0) }}</div>
      <div class="metric-sub">available</div>
    </div>
    {% endfor %}
  </div>
</div>

<div class="card">
  <div class="card-title">Record Dispatch</div>
  <div class="form-grid">
    <div class="form-row"><label class="form-label">Outlet</label>
      <select id="dt-outlet">{% for o in outlets %}<option value="{{ o.id }}">{{ o.name }}</option>{% endfor %}</select>
    </div>
    <div class="form-row"><label class="form-label">Dispatch Type</label>
      <select id="dt-type"><option value="OPENING_DISPATCH">Opening Dispatch</option><option value="TOPUP">Top-up (Mid-day)</option></select>
    </div>
    <div class="form-row"><label class="form-label">Fuel Cost (KES, optional)</label>
      <input type="number" id="dt-fuel" value="0" placeholder="0" min="0">
    </div>
    <div class="form-row"><label class="form-label">Dispatch Ref (auto-generated)</label>
      <input id="dt-ref" readonly style="background:var(--surface2);color:var(--text3);font-family:monospace">
    </div>
  </div>
  <div class="sdiv">Units to dispatch — margin shown per product to guide priority</div>
  <div class="table-wrap">
  <table>
    <tr><th>Product</th><th>Category</th><th>Price</th><th>Margin</th><th>Margin %</th><th>Available</th><th>Qty to Dispatch</th></tr>
    {% for p in products %}
    {% set m = margins.get(p.id, {}) %}
    <tr>
      <td style="font-weight:600">{{ p.name }}</td>
      <td><span class="badge badge-gray" style="font-size:.65rem">{{ p.category }}</span></td>
      <td style="font-size:.82rem">KES {{ "{:,.0f}".format(p.price) }}</td>
      <td style="font-size:.82rem;color:var(--green);font-weight:600">KES {{ "{:,.0f}".format(m.get('margin', 0)) }}</td>
      <td>
        {% set mp = m.get('margin_pct', 0) %}
        <span class="badge {% if mp >= 70 %}badge-green{% elif mp >= 40 %}badge-amber{% else %}badge-red{% endif %}">{{ mp }}%</span>
      </td>
      <td style="font-weight:600;{% if available.get(p.id, 0) == 0 %}color:var(--text3){% endif %}">{{ available.get(p.id, 0) }}</td>
      <td><input type="number" id="dt-{{ p.id }}" placeholder="0" min="0" max="{{ available.get(p.id, 0) }}" data-pid="{{ p.id }}" data-avail="{{ available.get(p.id, 0) }}" style="width:80px" {% if available.get(p.id, 0) == 0 %}disabled{% endif %}></td>
    </tr>
    {% endfor %}
  </table>
  </div>
  <div style="display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin-top:.75rem">
    <button class="btn btn-primary" onclick="recordDispatch()">Record Dispatch</button>
    <span id="dispatch-ts" style="font-size:.78rem;color:var(--text3)"></span>
  </div>
  <div id="dispatch-confirm" class="alert alert-success" style="display:none;margin-top:.75rem"></div>
</div>
</div>

<!-- DISPATCH HISTORY -->
<div class="tab-panel" data-panel="history">
<div class="card">
  <div class="card-title">Dispatch History
    <div style="float:right;display:flex;gap:.5rem;align-items:center">
      <select id="hist-outlet" style="width:auto;font-size:.75rem;padding:3px 8px" onchange="loadDispatchHistory()">
        <option value="">All Outlets</option>
        {% for o in outlets %}<option value="{{ o.id }}">{{ o.name }}</option>{% endfor %}
      </select>
      <select id="hist-days" style="width:auto;font-size:.75rem;padding:3px 8px" onchange="loadDispatchHistory()">
        <option value="1">Today</option>
        <option value="7" selected>Last 7 days</option>
        <option value="30">Last 30 days</option>
      </select>
    </div>
  </div>
  <div id="dispatch-history-wrap"><div style="color:var(--text3);padding:.5rem">Loading…</div></div>
</div>
</div>

<!-- OUTLET STOCK MONITOR -->
<div class="tab-panel" data-panel="outlet-stock">
<div class="card">
  <div class="card-title">Outlet Stock Monitor</div>
  <div class="alert alert-info">Items below 20% of dispatched quantity or fewer than 5 units are flagged 🔴</div>
  <div style="display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:.75rem">
    {% for o in outlets %}
    <button class="btn btn-sm" onclick="loadOutletStock({{ o.id }}, '{{ o.name }}')">{{ o.name }}</button>
    {% endfor %}
  </div>
  <div id="outlet-stock-title" style="font-weight:600;margin-bottom:.5rem"></div>
  <div id="outlet-stock-content"></div>
</div>
</div>

{% block scripts %}
<script>
var PRODUCTS = {{ products | tojson }};
var MARGINS  = {{ margins | tojson }};
var TODAY = '{{ today }}';

function genRef(){
  var ts=Date.now().toString().slice(-8);
  var ref='DISP-'+ts;
  var el=document.getElementById('dt-ref');if(el)el.value=ref;
  return ref;
}
genRef();
document.getElementById('dt-outlet')?.addEventListener('change',genRef);
document.getElementById('dt-type')?.addEventListener('change',genRef);

async function recordDispatch(){
  var outlet_id=parseInt(document.getElementById('dt-outlet').value);
  var event_type=document.getElementById('dt-type').value;
  var fuel=parseFloat(document.getElementById('dt-fuel').value||0);
  var ref=document.getElementById('dt-ref').value||genRef();
  var items={},overLimit=[];
  PRODUCTS.forEach(function(p){
    var el=document.getElementById('dt-'+p.id);
    if(!el||el.disabled)return;
    var qty=parseInt(el.value||0),avail=parseInt(el.dataset.avail||0);
    if(qty>0){if(qty>avail&&avail>=0){overLimit.push(p.name+' (have '+avail+', tried '+qty+')');return;}items[p.id]=qty;}
  });
  if(overLimit.length){toast('Over available: '+overLimit.join(', '),'error');return;}
  if(!Object.keys(items).length){toast('Enter at least one quantity','error');return;}
  var result=await api('/api/logistics/dispatch','POST',{outlet_id,event_type,items,ref,fuel_cost:fuel});
  var ts=result.timestamp||new Date().toLocaleString('en-KE');
  var outName=document.getElementById('dt-outlet').options[document.getElementById('dt-outlet').selectedIndex].text;
  var total=Object.values(items).reduce(function(a,b){return a+b;},0);
  var dc=document.getElementById('dispatch-confirm');
  dc.innerHTML=`✓ Dispatched <strong>${total} units</strong> to <strong>${outName}</strong><br><span class="ts">At: ${ts} &nbsp;·&nbsp; Ref: <code>${ref}</code></span>`;
  dc.style.display='block';
  document.getElementById('dispatch-ts').textContent='Last dispatch: '+ts;
  toast('Dispatch recorded ✓'+(fuel>0?' · Fuel logged':''),'success');
  PRODUCTS.forEach(function(p){var el=document.getElementById('dt-'+p.id);if(el)el.value='';});
  genRef();
  setTimeout(function(){location.reload();},2500);
}

async function loadDispatchHistory(){
  var outlet_id=document.getElementById('hist-outlet')?.value||'';
  var days=document.getElementById('hist-days')?.value||7;
  var wrap=document.getElementById('dispatch-history-wrap');if(!wrap)return;
  wrap.innerHTML='<div style="color:var(--text3);padding:.5rem">Loading…</div>';
  try{
    var url='/api/dispatch/history?days='+days+(outlet_id?'&outlet_id='+outlet_id:'');
    var data=await api(url);
    if(!data.length){wrap.innerHTML='<div class="alert alert-info">No dispatches in this period.</div>';return;}
    var refs={};
    data.forEach(function(d){
      var key=d.reference||d.timestamp;
      if(!refs[key])refs[key]={ts:d.timestamp,outlet:d.outlet_name,type:d.event_type,by:d.by_name,ref:d.reference,items:[]};
      refs[key].items.push({product:d.product_name,qty:d.qty_in});
    });
    var html='<div class="table-wrap"><table><tr><th>Timestamp</th><th>Outlet</th><th>Type</th><th>Products Dispatched</th><th>Total Units</th><th>By</th><th>Ref</th></tr>';
    Object.values(refs).forEach(function(r){
      var summary=r.items.map(function(i){return '<strong>'+i.product+'</strong>: '+i.qty;}).join(' · ');
      var total=r.items.reduce(function(a,i){return a+i.qty;},0);
      html+=`<tr><td class="ts">${r.ts}</td><td style="font-weight:600">${r.outlet}</td><td><span class="badge ${r.type==='TOPUP'?'badge-amber':'badge-blue'}">${r.type.replace('_',' ')}</span></td><td style="font-size:.78rem">${summary}</td><td style="font-weight:600">${total}</td><td>${r.by||'—'}</td><td style="font-family:monospace;font-size:.72rem">${r.ref||'—'}</td></tr>`;
    });
    html+='</table></div>';wrap.innerHTML=html;
  }catch(e){wrap.innerHTML='<div class="alert alert-danger">Failed to load dispatch history.</div>';}
}

async function loadOutletStock(outlet_id,name){
  document.getElementById('outlet-stock-title').textContent=name+' — Stock Levels';
  var div=document.getElementById('outlet-stock-content');
  div.innerHTML='<div style="color:var(--text3);padding:.5rem">Loading…</div>';
  try{
    var data=await api('/api/outlet/low_stock?outlet_id='+outlet_id);
    if(!data.length){div.innerHTML='<div class="alert alert-success">✓ All items have adequate stock at '+name+'.</div>';return;}
    var html='<div class="grid-3">';
    data.forEach(function(item){
      var m=MARGINS[item.product.id]||{};
      html+=`<div class="metric red"><div class="metric-label" style="font-size:.65rem">${item.product.name}</div><div class="metric-value" style="font-size:1.3rem">${item.remaining}</div><div class="metric-sub">of ${item.total_in} sent · ${item.pct}% left</div>${m.margin_pct?'<div style="font-size:.7rem;color:var(--red);margin-top:3px">Margin: '+m.margin_pct+'% · Request top-up</div>':''}</div>`;
    });
    html+='</div>';div.innerHTML=html;
  }catch(e){div.innerHTML='<div class="alert alert-danger">Failed to load.</div>';}
}

document.addEventListener('click',function(e){
  var tab=e.target.closest('.tab');
  if(tab&&tab.dataset.tab==='history') setTimeout(loadDispatchHistory,50);
  if(tab&&tab.dataset.tab==='outlet-stock'){
    var outlets={{ outlets | tojson }};
    if(outlets.length) setTimeout(function(){loadOutletStock(outlets[0].id,outlets[0].name);},50);
  }
});
window.addEventListener('load',function(){setTimeout(loadDispatchHistory,300);});
</script>
{% endblock %}
{% endblock %}