{% extends 'base.html' %}
{% block title %}Finance — Shiba Meals{% endblock %}
{% block page_title %}Finance{% endblock %}
{% block content %}
<div class="page-title">Finance & Reconciliation</div>
<div class="page-sub">{{ today }} · Cash + MPesa vs Expected Sales · Profit Engine</div>

<!-- Live Profit Engine pull -->
<div class="card" style="margin-bottom:.75rem" id="profit-engine-card">
  <div class="card-title">Daily Profit Engine — {{ today }}
    <button class="btn btn-sm" style="float:right" onclick="loadProfitEngine()">↺ Refresh</button>
  </div>
  <div id="profit-engine-body">
    <div style="color:var(--text3);padding:.5rem">Loading profit breakdown…</div>
  </div>
</div>

<!-- Reconciliation Lock Panel -->
<div class="card" style="margin-bottom:.75rem">
  <div class="card-title">⚖ Daily Reconciliation — Lock &amp; Close</div>
  <div class="alert alert-info" style="margin-bottom:.5rem">
    Once locked, a day's reconciliation cannot be changed without manager override. Lock only when all cashiers have submitted their EOD counts.
  </div>
  <div id="recon-panels">
    {% for outlet in outlets %}
    <div style="margin-bottom:.75rem;padding:.65rem;border:1px solid var(--border);border-radius:var(--r)" id="recon-outlet-{{ outlet.id }}">
      <div style="font-weight:700;font-size:.88rem;margin-bottom:.5rem">{{ outlet.name }}</div>
      <div id="recon-data-{{ outlet.id }}" style="color:var(--text3);font-size:.8rem">Loading…</div>
      <button class="btn btn-sm btn-success" style="margin-top:.5rem" onclick="lockRecon({{ outlet.id }})">🔒 Lock Reconciliation</button>
    </div>
    {% endfor %}
  </div>
</div>

<div class="grid-4" style="margin-bottom:.875rem">
  <div class="metric {% if profit >= 0 %}green{% else %}red{% endif %}">
    <div class="metric-label">Net Profit</div>
    <div class="metric-value">KES {{ "{:,.0f}".format(profit) }}</div>
    <div class="metric-sub">Revenue − daily cost</div>
  </div>
  <div class="metric blue">
    <div class="metric-label">Expected Revenue</div>
    <div class="metric-value">KES {{ "{:,.0f}".format(total_rev) }}</div>
    <div class="metric-sub">Stock movement × price</div>
  </div>
  <div class="metric amber">
    <div class="metric-label">Daily Cost</div>
    <div class="metric-value">KES {{ "{:,.0f}".format(ing_cost + other_total) }}</div>
    <div class="metric-sub">Requisitions + expenses</div>
  </div>
  {% if payroll %}
  <div class="metric">
    <div class="metric-label">Payroll (est. daily)</div>
    <div class="metric-value">KES {{ "{:,.0f}".format(payroll.daily) }}</div>
    <div class="metric-sub">Add to expenses when paid</div>
  </div>
  {% else %}
  <div class="metric">
    <div class="metric-label">Outlets Active</div>
    <div class="metric-value" style="font-size:1.5rem">{{ recon|length }}</div>
    <div class="metric-sub">Today</div>
  </div>
  {% endif %}
</div>

{% if payroll %}
<div class="card">
  <div class="card-title">Payroll Summary</div>
  <div class="grid-3" style="margin-bottom:.75rem">
    <div class="metric"><div class="metric-label">Daily</div><div class="metric-value" style="font-size:1.2rem">KES {{ "{:,.0f}".format(payroll.daily) }}</div><div class="metric-sub">today</div></div>
    <div class="metric"><div class="metric-label">Weekly</div><div class="metric-value" style="font-size:1.2rem">KES {{ "{:,.0f}".format(payroll.weekly) }}</div><div class="metric-sub">this week</div></div>
    <div class="metric"><div class="metric-label">Monthly</div><div class="metric-value" style="font-size:1.2rem">KES {{ "{:,.0f}".format(payroll.monthly) }}</div><div class="metric-sub">this month</div></div>
  </div>
  <div class="table-wrap">
  <table>
    <tr><th>Name</th><th>Role</th><th>Pay Period</th><th>Amount</th><th>Daily</th><th>Weekly</th><th>Monthly</th></tr>
    {% for u in payroll.breakdown %}
    <tr>
      <td style="font-weight:600">{{ u.name }}</td>
      <td><span class="badge badge-blue">{{ u.role.replace('_',' ') }}</span></td>
      <td><span class="badge badge-gray">{{ u.pay_period }}</span></td>
      <td>KES {{ "{:,.0f}".format(u.pay_amount) }}</td>
      <td>KES {{ "{:,.0f}".format(u.daily) }}</td>
      <td>KES {{ "{:,.0f}".format(u.weekly) }}</td>
      <td>KES {{ "{:,.0f}".format(u.monthly) }}</td>
    </tr>
    {% endfor %}
  </table>
  </div>
</div>
{% endif %}

<!-- RECONCILIATION -->
<div class="card">
  <div class="card-title">Daily Reconciliation by Outlet</div>
  <div class="alert alert-info" style="margin-bottom:.75rem;font-size:.78rem">
    <strong>Variance</strong> = Total Collected − Expected Revenue.
    When recording M-Pesa manually, enter the M-Pesa reference number to prevent double-counting with auto-IPN entries.
  </div>
  {% for r in recon %}
  <div class="card" style="border:1px solid var(--border2)">
    <div class="card-title">{{ r.outlet.name }} <span style="font-size:.75rem;color:var(--text3)">Till: {{ r.outlet.till_number or '—' }}</span></div>
    <div class="grid-4" style="margin-bottom:.75rem">
      <div class="metric">
        <div class="metric-label">Expected Revenue</div>
        <div class="metric-value" style="font-size:1.1rem">KES {{ "{:,.0f}".format(r.exp_rev) }}</div>
        <div class="metric-sub">From stock movement</div>
      </div>
      <div class="metric">
        <div class="metric-label">M-Pesa / Bank
          <span style="font-weight:400;color:var(--text3)"> (auto: KES {{ "{:,.0f}".format(r.manual_mpesa) }} manual + {{ "{:,.0f}".format(r.mpesa - r.manual_mpesa) }} IPN)</span>
        </div>
        <div class="metric-value" style="font-size:1.1rem" id="mpesa-val-{{ r.outlet.id }}">KES {{ "{:,.0f}".format(r.mpesa) }}</div>
        <div style="margin-top:6px">
          <div style="display:flex;gap:4px;margin-bottom:4px">
            <input type="number" id="mpesa-input-{{ r.outlet.id }}" placeholder="Amount" style="font-size:.8rem;padding:4px 8px;flex:1">
            <button class="btn btn-sm btn-primary" onclick="addMpesa({{ r.outlet.id }})">Add</button>
          </div>
          <input type="text" id="mpesa-ref-{{ r.outlet.id }}" placeholder="M-Pesa Ref (e.g. QGJ6DZ4U5N)" style="font-size:.75rem;padding:3px 8px">
          <div style="font-size:.68rem;color:var(--text3);margin-top:2px">Enter ref to prevent double-counting with auto IPN</div>
        </div>
      </div>
      <div class="metric">
        <div class="metric-label">Cash Revenue</div>
        <div class="metric-value" style="font-size:1.1rem">KES {{ "{:,.0f}".format(r.cp.cash_revenue) }}</div>
        <div class="metric-sub">Declared − Float + Drop + Till Exp</div>
      </div>
      <div class="metric {% if r.variance|abs < 5 %}green{% elif r.variance < 0 %}red{% else %}amber{% endif %}">
        <div class="metric-label">Variance</div>
        <div class="metric-value" style="font-size:1.1rem">{% if r.variance >= 0 %}+{% endif %}KES {{ "{:,.0f}".format(r.variance) }}</div>
        <div class="metric-sub" id="var-hint-{{ r.outlet.id }}">
          {% if r.variance|abs < 5 %}Balanced
          {% elif r.variance < 0 %}Shortfall — check cash count, M-Pesa sync, or wastage records
          {% else %}Surplus — possible unrecorded M-Pesa or float error{% endif %}
        </div>
      </div>
    </div>
    <div class="table-wrap">
    <table>
      <tr><th>Float</th><th>Cash Declared</th><th>Till Exp.</th><th>Cash Drop</th><th>Total Collected</th></tr>
      <tr>
        <td>KES {{ "{:,.0f}".format(r.cp.float) }}</td>
        <td>KES {{ "{:,.0f}".format(r.cp.declared) }}</td>
        <td>KES {{ "{:,.0f}".format(r.cp.till_exp) }}</td>
        <td>{% if r.cp.drop %}KES {{ "{:,.0f}".format(r.cp.drop) }}{% else %}<span style="color:var(--text3)">pending EOD</span>{% endif %}</td>
        <td style="font-weight:700">KES {{ "{:,.0f}".format(r.tc) }}</td>
      </tr>
    </table>
    </div>
  </div>
  {% endfor %}
</div>

<!-- COST BREAKDOWN -->
<div class="card">
  <div class="card-title">Daily Cost Breakdown</div>
  <div class="table-wrap">
  <table>
    <tr><th>Component</th><th>Source</th><th>Note</th><th>Amount</th></tr>
    <tr style="background:var(--surface2)">
      <td style="font-weight:600">Ingredient Cost</td>
      <td><span class="badge badge-blue">Approved requisitions</span></td>
      <td style="font-size:.78rem;color:var(--text2)">Recipe-based reference prices</td>
      <td style="font-weight:700">KES {{ "{:,.0f}".format(ing_cost) }}</td>
    </tr>
    {% for e in other_exp %}
    <tr>
      <td>{{ e.category }}</td>
      <td><span class="badge badge-gray">Expense log</span></td>
      <td style="font-size:.78rem;color:var(--text2)">{{ e.note }}</td>
      <td>KES {{ "{:,.0f}".format(e.amount + e.tx_cost) }}</td>
    </tr>
    {% endfor %}
    <tr class="hl"><td colspan="3" style="font-weight:600">Total</td><td style="font-weight:700">KES {{ "{:,.0f}".format(ing_cost + other_total) }}</td></tr>
  </table>
  </div>
  <button class="btn btn-sm" style="margin-top:.75rem" onclick="openModal('add-expense-modal')">+ Add Expense</button>
</div>

<!-- INGREDIENT RECEIPTS -->
<div class="card">
  <div class="card-title">Ingredient Receipts (audit)</div>
  <div class="table-wrap">
  <table>
    <tr><th>Date</th><th>Ingredient</th><th>Note</th><th>Amount</th></tr>
    {% for r in receipts %}
    <tr><td>{{ r.date }}</td><td>{{ r.ing_name or '—' }}</td><td>{{ r.note }}</td><td>KES {{ "{:,.0f}".format(r.amount + r.tx_cost) }}</td></tr>
    {% else %}
    <tr><td colspan="4" style="color:var(--text3);font-style:italic">No receipts today.</td></tr>
    {% endfor %}
  </table>
  </div>
</div>

<!-- Add Expense Modal -->
<div class="modal-backdrop" id="add-expense-modal">
  <div class="modal">
    <button class="modal-close" data-close-modal="add-expense-modal">✕</button>
    <div class="modal-title">Add Expense</div>
    <div class="form-row"><label class="form-label">Category</label>
      <select id="exp-cat">
        {% for cat in exp_cats %}<option>{{ cat }}</option>{% endfor %}
      </select>
    </div>
    <div class="form-row"><label class="form-label">Note</label><input id="exp-note" placeholder="description"></div>
    <div class="form-grid">
      <div class="form-row"><label class="form-label">Amount (KES)</label><input type="number" id="exp-amount"></div>
      <div class="form-row"><label class="form-label">Transaction Cost</label><input type="number" id="exp-tx" value="0"></div>
    </div>
    <div class="alert alert-warning" style="font-size:.78rem">⚠ Do not log ingredient purchases here — use Store → Receive Stock to avoid double-counting.</div>
    <button class="btn btn-primary" onclick="addExpense()">Save Expense</button>
  </div>
</div>
{% endblock %}
{% block scripts %}
<script>
var TODAY  = '{{ today }}';
var OUTLETS = {{ outlets | tojson }};

async function addExpense(){
  var cat=document.getElementById('exp-cat').value,note=document.getElementById('exp-note').value,amount=parseFloat(document.getElementById('exp-amount').value||0),tx=parseFloat(document.getElementById('exp-tx').value||0);
  if(!amount){toast('Enter amount','error');return;}
  await api('/api/finance/expense','POST',{category:cat,amount,tx_cost:tx,note});
  toast('Expense saved ✓','success');closeModal('add-expense-modal');setTimeout(function(){location.reload();},800);
}

async function addMpesa(outlet_id){
  var amount=parseFloat(document.getElementById('mpesa-input-'+outlet_id).value||0);
  var mpesa_ref=(document.getElementById('mpesa-ref-'+outlet_id).value||'').trim();
  if(!amount){toast('Enter amount','error');return;}
  var note=prompt('Note (optional, e.g. settlement batch):','')??'';
  try{
    await api('/api/finance/mpesa','POST',{outlet_id,amount,note,mpesa_ref});
    toast('Amount recorded ✓','success');setTimeout(function(){location.reload();},800);
  }catch(e){
    var msg='Failed to save';
    try{var d=JSON.parse(e.message);msg=d.error||msg;}catch(_){}
    toast(msg,'error');
  }
}

async function loadProfitEngine(){
  var div=document.getElementById('profit-engine-body');if(!div)return;
  try{
    var p=await api('/api/profit_engine?date='+TODAY);
    var kes=function(n){return 'KES '+Math.round(n).toLocaleString();};
    var html='<div class="grid-4" style="margin-bottom:.65rem">'
      +'<div class="metric green"><div class="metric-label">Net Profit</div><div class="metric-value" style="font-size:1.2rem;color:'+(p.net_profit>=0?'var(--green)':'var(--red)')+'">'+kes(p.net_profit)+'</div></div>'
      +'<div class="metric blue"><div class="metric-label">Gross Profit</div><div class="metric-value" style="font-size:1.2rem">'+kes(p.gross_profit)+'</div></div>'
      +'<div class="metric amber"><div class="metric-label">Total Revenue</div><div class="metric-value" style="font-size:1.2rem">'+kes(p.revenue.total)+'</div><div class="metric-sub">Cash: '+kes(p.revenue.cash)+' · MPesa: '+kes(p.revenue.mpesa)+'</div></div>'
      +'<div class="metric red"><div class="metric-label">Op. Expenses</div><div class="metric-value" style="font-size:1.2rem">'+kes(p.total_operating_expenses)+'</div></div>'
      +'</div>';
    html+='<div style="display:flex;flex-wrap:wrap;gap:.5rem;font-size:.8rem">';
    html+='<span class="badge badge-amber">Ingredient use: '+kes(p.direct_costs.ingredient_usage)+'</span>';
    html+='<span class="badge badge-amber">Purchases: '+kes(p.direct_costs.purchases)+'</span>';
    html+='<span class="badge badge-red">Waste cost: '+kes(p.direct_costs.waste)+'</span>';
    for(var cat in p.operating_expenses){
      html+='<span class="badge badge-gray">'+cat+': '+kes(p.operating_expenses[cat])+'</span>';
    }
    html+='</div>';
    div.innerHTML=html;
  }catch(e){div.innerHTML='<div style="color:var(--red)">Failed to load profit engine: '+e.message+'</div>';}
}

async function loadReconPanels(){
  for(var o of OUTLETS){
    var div=document.getElementById('recon-data-'+o.id);if(!div)continue;
    try{
      var r=await api('/api/reconciliation?outlet_id='+o.id+'&date='+TODAY);
      var kes=function(n){return 'KES '+Math.round(n).toLocaleString();};
      var varColor=r.variance>=0?'var(--green)':'var(--red)';
      var html='<div style="display:flex;flex-wrap:wrap;gap:.35rem;font-size:.78rem">'
        +'<span class="badge badge-gray">Dispatched: '+kes(r.opening_stock)+'</span>'
        +'<span class="badge badge-gray">Received: '+kes(r.received_stock)+'</span>'
        +'<span class="badge badge-amber">Expected Sold: '+kes(r.expected_sold)+'</span>'
        +'<span class="badge badge-blue">Cash: '+kes(r.cash_declared)+'</span>'
        +'<span class="badge badge-blue">MPesa: '+kes(r.mpesa_total)+'</span>'
        +'<span class="badge badge-'+(r.variance>=0?'green':'red')+'" style="font-weight:700">Variance: '+kes(r.variance)+'</span>'
        +'</div>';
      if(r.is_locked){
        html+='<div style="margin-top:.35rem"><span class="badge badge-green">🔒 Locked '+r.locked_at.slice(11,16)+'</span></div>';
        var lockBtn=document.querySelector('[onclick="lockRecon('+o.id+')"]');
        if(lockBtn){lockBtn.disabled=true;lockBtn.textContent='🔒 Already Locked';}
      }
      div.innerHTML=html;
    }catch(e){div.innerHTML='<div style="color:var(--text3)">No data yet</div>';}
  }
}

async function lockRecon(outletId){
  if(!confirm('Lock reconciliation for today? This cannot be undone without a manager override.'))return;
  try{
    var r=await api('/api/reconciliation?outlet_id='+outletId+'&date='+TODAY,'POST',{notes:''});
    toast('Reconciliation locked ✓','success');
    loadReconPanels();
  }catch(e){toast('Failed: '+e.message,'error');}
}

loadProfitEngine();
loadReconPanels();
</script>
{% endblock %}