{# templates/pos/dash_petrol.html #}
{# Matches the existing peaceful light theme exactly -- no dark backgrounds #}

<style>
/* Uses parent --bp-* CSS variables -- no custom colors needed */

.pt-hero-bar {
  background: var(--bp-card);
  border: 1px solid var(--bp-line);
  border-radius: 14px;
  box-shadow: var(--bp-shadow);
  padding: .85rem 1rem;
  margin-bottom: 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
}
.pt-hero-title {
  font-weight: 900; color: var(--bp-dark); font-size: 1rem;
  display: flex; align-items: center; gap: .5rem;
}
.pt-hero-title i { color: var(--bp-blue); }

.pt-today-pill {
  display: inline-flex; align-items: center; gap: .4rem;
  background: rgba(34,197,94,.08); border: 1px solid rgba(34,197,94,.22);
  color: #15803d; border-radius: 999px; padding: .25rem .7rem;
  font-size: .78rem; font-weight: 800;
}
.pt-today-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #22c55e; box-shadow: 0 0 6px rgba(34,197,94,.7);
  animation: pt-pulse 1.5s ease-in-out infinite;
}
@keyframes pt-pulse { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:.5;transform:scale(1.3);} }

.pt-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
  gap: .75rem; margin-bottom: 1rem;
}

.pt-nozzle-card {
  background: #fff; border: 1px solid var(--bp-line); border-radius: 14px;
  box-shadow: var(--bp-shadow); padding: .9rem 1rem;
  transition: transform .08s ease, box-shadow .12s ease;
}
.pt-nozzle-card:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(16,24,40,.10); }
.pt-nozzle-name { font-weight: 900; color: var(--bp-dark); font-size: .88rem; }
.pt-nozzle-prod { color: var(--bp-muted); font-size: .75rem; margin-bottom: .65rem; display:flex; align-items:center; gap:.3rem; }
.pt-nozzle-stat { display:flex; justify-content:space-between; align-items:center; margin-bottom:.28rem; }
.pt-nozzle-stat .ns-l { color:var(--bp-muted); font-size:.74rem; font-weight:700; }
.pt-nozzle-stat .ns-v { font-weight:900; color:var(--bp-dark); font-size:.82rem; }
.pt-nozzle-bar { height:5px; background:#f1f5f9; border-radius:999px; overflow:hidden; margin-top:.55rem; }
.pt-nozzle-bar-fill { height:100%; border-radius:999px; background:linear-gradient(90deg, var(--bp-blue), #22c55e); transition:width .7s cubic-bezier(.4,0,.2,1); }
.pt-nozzle-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(190px,1fr)); gap:.7rem; }

.pt-cust-row { display:flex; align-items:center; gap:.75rem; padding:.6rem .7rem; border-radius:12px; border:1px solid var(--bp-line); margin-bottom:.45rem; background:#fff; transition:box-shadow .12s; }
.pt-cust-row:hover { box-shadow:0 4px 12px rgba(16,24,40,.07); }
.pt-cust-row:last-child { margin-bottom:0; }
.pt-rank { width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:.78rem;flex-shrink:0;background:#f1f5f9;color:var(--bp-dark); }
.pt-rank.r1 { background:rgba(245,158,11,.12);color:#b45309; }
.pt-rank.r2 { background:rgba(100,116,139,.12);color:#475569; }
.pt-rank.r3 { background:rgba(180,120,60,.12);color:#92400e; }
.pt-cust-name { font-weight:800;color:var(--bp-dark);font-size:.84rem;line-height:1.2; }
.pt-cust-sub  { color:var(--bp-muted);font-size:.74rem; }
.pt-cust-amt  { margin-left:auto;font-weight:900;font-size:.9rem;color:var(--bp-blue);white-space:nowrap; }

.pt-entries-table { width:100%;border-collapse:separate;border-spacing:0; }
.pt-entries-table th { font-size:.72rem;text-transform:uppercase;letter-spacing:.4px;color:var(--bp-muted);font-weight:800;padding:.55rem .8rem;border-bottom:2px solid var(--bp-line); }
.pt-entries-table td { padding:.6rem .8rem;font-size:.83rem;color:var(--bp-dark);border-bottom:1px solid var(--bp-line);vertical-align:middle; }
.pt-entries-table tr:last-child td { border-bottom:none; }
.pt-entries-table tr:hover td { background:rgba(0,86,184,.025); }
.pt-mono  { font-weight:800; }
.pt-green { color:#15803d;font-weight:900; }
.pt-red   { color:#dc2626;font-weight:900; }
.pt-blue  { color:var(--bp-blue);font-weight:900; }

.pt-act { border-radius:8px;padding:.28rem .55rem;font-size:.75rem;font-weight:800;border:1px solid var(--bp-line);background:#fff;color:var(--bp-dark);transition:background .12s;text-decoration:none; }
.pt-act:hover { background:var(--bp-blue);color:#fff;border-color:transparent;text-decoration:none; }

.pt-sk { background:linear-gradient(90deg,#f3f4f6,#e5e7eb,#f3f4f6);background-size:200% 100%;animation:sk 1.2s ease-in-out infinite;border-radius:.75rem; }

.pt-chart-box { position:relative;height:230px;max-height:230px; }
.pt-chart-box canvas { width:100% !important;height:100% !important;display:block; }
</style>




<div class="pt-kpi-grid">
  <div class="kpi">
    <div class="kpi-top">
      <div>
        <div class="kpi-l">Total Sales</div>
        <div id="ptKpiSales" class="kpi-v">—</div>
        <div class="kpi-mini"><span id="ptKpiEntries" class="mini-pill">— entries</span></div>
      </div>
      <div class="kpi-ic"><i class="fas fa-gas-pump"></i></div>
    </div>
  </div>

  <div class="kpi">
    <div class="kpi-top">
      <div>
        <div class="kpi-l">Liters Sold</div>
        <div id="ptKpiLiters" class="kpi-v">—</div>
        <div class="kpi-mini"><span id="ptKpiTesting" class="mini-pill">—</span></div>
      </div>
      <div class="kpi-ic"><i class="fas fa-tachometer-alt"></i></div>
    </div>
  </div>

  <div class="kpi">
    <div class="kpi-top">
      <div>
        <div class="kpi-l">Net Cash</div>
        <div id="ptKpiCash" class="kpi-v">—</div>
        <div class="kpi-mini"><span class="mini-pill">After credit &amp; exp</span></div>
      </div>
      <div class="kpi-ic" style="background:rgba(34,197,94,.08);color:#16a34a;"><i class="fas fa-money-bill-wave"></i></div>
    </div>
  </div>

  <div class="kpi">
    <div class="kpi-top">
      <div>
        <div class="kpi-l">Credit Sales</div>
        <div id="ptKpiCredit" class="kpi-v">—</div>
        <div class="kpi-mini"><span class="mini-pill">Customer AR</span></div>
      </div>
      <div class="kpi-ic"><i class="fas fa-users"></i></div>
    </div>
  </div>

  <div class="kpi">
    <div class="kpi-top">
      <div>
        <div class="kpi-l">Expenses</div>
        <div id="ptKpiExp" class="kpi-v">—</div>
        <div class="kpi-mini"><span class="mini-pill">Total deductions</span></div>
      </div>
      <div class="kpi-ic" style="background:rgba(239,68,68,.08);color:#dc2626;"><i class="fas fa-receipt"></i></div>
    </div>
  </div>

  <div class="kpi">
    <div class="kpi-top">
      <div>
        <div class="kpi-l">Bank Balance</div>
        <div id="ptKpiBank" class="kpi-v">—</div>
        <div class="kpi-mini"><span class="mini-pill">All accounts</span></div>
      </div>
      <div class="kpi-ic"><i class="fas fa-university"></i></div>
    </div>
  </div>
</div>


<div class="row mb-3">
  <div class="col-lg-8 mb-2">
    <div class="panel">
      <div class="panel-head">
        <div>
          <div class="panel-title">Sales · Net Cash · Expenses</div>
          <div class="panel-sub">Daily trend for selected range</div>
        </div>
        <span id="ptRangeLabel" class="badge-soft">—</span>
      </div>
      <div class="p-3">
        <div class="pt-chart-box"><canvas id="ptSalesChart"></canvas></div>
      </div>
    </div>
  </div>

  <div class="col-lg-4 mb-2">
    <div class="panel h-100">
      <div class="panel-head">
        <div>
          <div class="panel-title">Nozzle Performance</div>
          <div class="panel-sub">By sales in range</div>
        </div>
        <a href="{% url 'petrol:nozzle_list' %}" class="btn btn-outline-primary btn-sm btn-view">Manage</a>
      </div>
      <div class="p-3" style="overflow-y:auto;max-height:270px;">
        <div id="ptNozzleGrid" class="pt-nozzle-grid">
          <div class="pt-sk" style="height:90px;"></div>
          <div class="pt-sk" style="height:90px;"></div>
        </div>
      </div>
    </div>
  </div>
</div>


<div class="row">
  <div class="col-lg-7 mb-2">
    <div class="panel">
      <div class="panel-head">
        <div>
          <div class="panel-title">Recent Daily Entries</div>
          <div class="panel-sub">Latest 15 records</div>
        </div>
        <a href="{% url 'petrol:daily_list' %}" class="btn btn-outline-primary btn-sm btn-view">View All</a>
      </div>
      <div class="p-0">
        <div style="overflow-x:auto;">
          <table class="pt-entries-table">
            <thead>
              <tr>
                <th>#</th><th>Date</th>
                <th class="text-right">Sale</th>
                <th class="text-right">Credit</th>
                <th class="text-right">Expense</th>
                <th class="text-right">Net Cash</th>
                <th></th>
              </tr>
            </thead>
            <tbody id="ptRecentBody">
              <tr><td colspan="7"><div class="pt-sk" style="height:44px;"></div></td></tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>

  <div class="col-lg-5 mb-2">
    <div class="panel h-100">
      <div class="panel-head">
        <div>
          <div class="panel-title">Top Credit Customers</div>
          <div class="panel-sub">By amount in selected range</div>
        </div>
      </div>
      <div class="p-3" id="ptCustBody">
        <div class="pt-sk" style="height:52px;margin-bottom:.45rem;"></div>
        <div class="pt-sk" style="height:52px;margin-bottom:.45rem;"></div>
        <div class="pt-sk" style="height:52px;"></div>
      </div>
    </div>
  </div>
</div>


<script>
const ptUrls = {
  summary:         "{% url 'pos:petrol_dash_summary' %}",
  chartDaily:      "{% url 'pos:petrol_dash_chart_daily' %}",
  nozzleBreakdown: "{% url 'pos:petrol_dash_nozzle_breakdown' %}",
  topCustomers:    "{% url 'pos:petrol_dash_top_customers' %}",
  recent:          "{% url 'pos:petrol_dash_recent' %}",
};
const ptEditTmpl  = "{% url 'petrol:daily_entry_edit' 0 %}";
const ptPrintTmpl = "{% url 'petrol:daily_print' 0 %}";
let ptSalesChart;

function ptFmt(n,dec){ n=Number(n||0); if(dec) return n.toLocaleString(undefined,{minimumFractionDigits:dec,maximumFractionDigits:dec}); return Math.round(n).toLocaleString(); }
function ptParams(){ const r=getRange(); return `?from=${r.from}&to=${r.to}`; }

async function ptLoadSummary(){
  const r=await fetch(ptUrls.summary+ptParams()); const j=await r.json(); const k=j.kpis||{};
  document.getElementById("ptKpiSales").textContent   = ptFmt(k.total_nozzle);
  document.getElementById("ptKpiEntries").textContent = `${k.entry_count||0} entries`;
  document.getElementById("ptKpiLiters").textContent  = ptFmt(k.total_liters,1)+" L";
  document.getElementById("ptKpiTesting").textContent = ptFmt(k.testing_liters,1)+" L testing";
  document.getElementById("ptKpiCash").textContent    = ptFmt(k.net_cash);
  document.getElementById("ptKpiCredit").textContent  = ptFmt(k.total_customer);
  document.getElementById("ptKpiExp").textContent     = ptFmt(k.total_expense);
  document.getElementById("ptKpiBank").textContent    = ptFmt(k.bank_sum);
  const rng=j.range||{};
  document.getElementById("ptRangeLabel").textContent=`${rng.from||""} → ${rng.to||""}`;
  const td=j.today||{};
  if(td.has_entry&&td.invoice_no){
    document.getElementById("ptTodayPill").classList.remove("d-none");
    document.getElementById("ptTodayLink").href=ptEditTmpl.replace("/0/",`/${td.invoice_no}/`);
  }
}

async function ptLoadChart(){
  const r=await fetch(ptUrls.chartDaily+ptParams()); const j=await r.json();
  const ctx=document.getElementById("ptSalesChart").getContext("2d");
  if(ptSalesChart) ptSalesChart.destroy();
  ptSalesChart=new Chart(ctx,{
    type:"line",
    data:{ labels:j.labels||[], datasets:[
      {label:"Sales",    data:j.sales||[],    borderColor:"#0056B8",backgroundColor:"rgba(0,86,184,.10)",   fill:true, tension:.35,pointRadius:0,borderWidth:2},
      {label:"Net Cash", data:j.cash||[],     borderColor:"#22c55e",backgroundColor:"rgba(34,197,94,.08)",  fill:false,tension:.35,pointRadius:0,borderWidth:2},
      {label:"Expenses", data:j.expenses||[], borderColor:"#f59e0b",backgroundColor:"rgba(245,158,11,.06)", fill:false,tension:.35,pointRadius:0,borderWidth:1.5},
    ]},
    options:{responsive:true,maintainAspectRatio:false,animation:{duration:0},interaction:{mode:"index",intersect:false},
      plugins:{legend:{position:"bottom",labels:{usePointStyle:true,boxWidth:10}}},
      scales:{y:{beginAtZero:true},x:{grid:{display:false},ticks:{maxTicksLimit:10,maxRotation:0}}}
    }
  });
}

async function ptLoadNozzles(){
  const r=await fetch(ptUrls.nozzleBreakdown+ptParams()); const j=await r.json(); const items=j.items||[];
  const grid=document.getElementById("ptNozzleGrid"); grid.innerHTML="";
  if(!items.length){grid.innerHTML=`<div class="text-muted" style="font-weight:800;font-size:.84rem;">No nozzle data</div>`;return;}
  const maxAmt=Math.max(...items.map(x=>x.total_amount),1);
  items.forEach(nz=>{
    const pct=Math.round((nz.total_amount/maxAmt)*100);
    grid.insertAdjacentHTML("beforeend",`
      <div class="pt-nozzle-card">
        <div class="pt-nozzle-name">${nz.nozzle_name}</div>
        <div class="pt-nozzle-prod"><i class="fas fa-circle" style="font-size:.4rem;color:var(--bp-blue);"></i> ${nz.product_name}</div>
        <div class="pt-nozzle-stat"><span class="ns-l">Liters</span><span class="ns-v">${ptFmt(nz.total_liters,1)} L</span></div>
        <div class="pt-nozzle-stat"><span class="ns-l">Amount</span><span class="ns-v">${ptFmt(nz.total_amount)}</span></div>
        <div class="pt-nozzle-stat"><span class="ns-l">Avg/Day</span><span class="ns-v">${ptFmt(nz.avg_daily_liters,1)} L</span></div>
        <div class="pt-nozzle-bar"><div class="pt-nozzle-bar-fill" style="width:${pct}%"></div></div>
      </div>`);
  });
}

async function ptLoadTopCustomers(){
  const r=await fetch(ptUrls.topCustomers+ptParams()); const j=await r.json(); const items=j.items||[];
  const body=document.getElementById("ptCustBody"); body.innerHTML="";
  if(!items.length){body.innerHTML=`<div class="text-muted" style="font-weight:800;font-size:.84rem;">No credit sales in this range</div>`;return;}
  const rankCls=i=>i===0?"r1":i===1?"r2":i===2?"r3":"";
  items.forEach((c,i)=>{
    body.insertAdjacentHTML("beforeend",`
      <div class="pt-cust-row">
        <div class="pt-rank ${rankCls(i)}">${i+1}</div>
        <div><div class="pt-cust-name">${c.name}</div><div class="pt-cust-sub">${ptFmt(c.total_liters,1)} L &bull; ${c.visits} visit${c.visits!==1?"s":""}</div></div>
        <div class="pt-cust-amt">${ptFmt(c.total_amount)}</div>
      </div>`);
  });
}

async function ptLoadRecent(){
  const r=await fetch(ptUrls.recent); const j=await r.json(); const items=j.items||[];
  const body=document.getElementById("ptRecentBody"); body.innerHTML="";
  if(!items.length){body.innerHTML=`<tr><td colspan="7" class="text-muted" style="font-weight:800;padding:.75rem;">No entries yet</td></tr>`;return;}
  items.forEach(e=>{
    const cashCls=e.net_cash>=0?"pt-green":"pt-red";
    const editUrl=ptEditTmpl.replace("/0/",`/${e.invoice_no}/`);
    const printUrl=ptPrintTmpl.replace("/0/",`/${e.invoice_no}/`);
    body.insertAdjacentHTML("beforeend",`
      <tr>
        <td class="pt-mono" style="color:var(--bp-muted);">#${e.invoice_no}</td>
        <td style="white-space:nowrap;font-weight:700;">${e.entry_date}</td>
        <td class="text-right pt-mono">${ptFmt(e.total_nozzle)}</td>
        <td class="text-right pt-mono pt-blue">${ptFmt(e.total_customer)}</td>
        <td class="text-right pt-mono" style="color:var(--bp-muted);">${ptFmt(e.total_expense)}</td>
        <td class="text-right pt-mono ${cashCls}">${ptFmt(e.net_cash)}</td>
        <td style="white-space:nowrap;">
          <a href="${editUrl}" class="pt-act mr-1"><i class="fas fa-edit"></i></a>
          <a href="${printUrl}" class="pt-act" target="_blank"><i class="fas fa-print"></i></a>
        </td>
      </tr>`);
  });
}

async function tkRunAll(){
  await loadSummary().catch(()=>{});
  await Promise.all([ptLoadSummary(),ptLoadChart(),ptLoadNozzles(),ptLoadTopCustomers(),ptLoadRecent()].map(p=>p.catch(e=>console.error("[petrol]",e))));
}
tkRunAll();
</script>