{# templates/pos/dash_restaurant.html #}
{# Matches existing peaceful light theme — uses parent --bp-* CSS variables #}

<style>
/* ── Restaurant Dashboard Styles ─────────────────────────────── */

.rs-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;
}
.rs-hero-title {
  font-weight: 900;
  color: var(--bp-dark);
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.rs-hero-title i { color: var(--bp-blue); }

.rs-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;
}
.rs-today-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 6px rgba(34,197,94,.7);
  animation: rs-pulse 1.5s ease-in-out infinite;
}
@keyframes rs-pulse { 0%,100%{opacity:1;transform:scale(1);}50%{opacity:.5;transform:scale(1.3);} }

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

/* Type Badge */
.rs-type-badge {
  display: inline-flex;
  align-items: center;
  padding: .18rem .5rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 900;
  white-space: nowrap;
  border: 1px solid transparent;
}
.rs-type-badge.dining    { background: rgba(0,86,184,.10);   color: #0056b8;  border-color: rgba(0,86,184,.18); }
.rs-type-badge.takeaway  { background: rgba(245,158,11,.10); color: #b45309;  border-color: rgba(245,158,11,.25); }
.rs-type-badge.delivery  { background: rgba(239,68,68,.09);  color: #b91c1c;  border-color: rgba(239,68,68,.20); }
.rs-type-badge.app       { background: rgba(139,92,246,.10); color: #6d28d9;  border-color: rgba(139,92,246,.22); }
.rs-type-badge.credit    { background: rgba(100,116,139,.10);color: #475569;  border-color: rgba(100,116,139,.22); }
.rs-type-badge.drive     { background: rgba(20,184,166,.10); color: #0f766e;  border-color: rgba(20,184,166,.22); }
.rs-type-badge.other     { background: rgba(100,116,139,.06);color: #64748b;  border-color: rgba(100,116,139,.15); }

/* Status Badge */
.rs-status {
  display: inline-block;
  padding: .18rem .5rem;
  border-radius: 999px;
  font-size: .70rem;
  font-weight: 900;
}
.rs-status.settled      { background: rgba(34,197,94,.12);  color: #15803d; }
.rs-status.pending      { background: rgba(245,158,11,.12); color: #b45309; }
.rs-status.complimentary{ background: rgba(139,92,246,.10); color: #6d28d9; }
.rs-status.cancelled    { background: rgba(239,68,68,.10);  color: #b91c1c; }
.rs-status.shifted      { background: rgba(0,86,184,.10);   color: #0056b8; }
.rs-status.default      { background: rgba(100,116,139,.10);color: #64748b; }

/* Type breakdown table */
.rs-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.rs-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);
}
.rs-table td {
  padding: .6rem .8rem; font-size: .83rem;
  color: var(--bp-dark); border-bottom: 1px solid var(--bp-line);
  vertical-align: middle;
}
.rs-table tr:last-child td { border-bottom: none; }
.rs-table tr:hover td { background: rgba(0,86,184,.025); }
.rs-mono  { font-weight: 800; }
.rs-green { color: #15803d; font-weight: 900; }
.rs-red   { color: #dc2626; font-weight: 900; }
.rs-blue  { color: var(--bp-blue); font-weight: 900; }
.rs-muted { color: var(--bp-muted); }

/* Top items bar */
.rs-item-row {
  display: flex; align-items: center; gap: .65rem;
  padding: .55rem .65rem; border-radius: 11px;
  border: 1px solid var(--bp-line); margin-bottom: .4rem;
  background: #fff; transition: box-shadow .12s;
}
.rs-item-row:hover { box-shadow: 0 4px 12px rgba(16,24,40,.07); }
.rs-item-row:last-child { margin-bottom: 0; }
.rs-item-rank {
  width: 26px; height: 26px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: .75rem; flex-shrink: 0;
  background: #f1f5f9; color: var(--bp-dark);
}
.rs-item-rank.r1 { background: rgba(245,158,11,.14); color: #b45309; }
.rs-item-rank.r2 { background: rgba(100,116,139,.12); color: #475569; }
.rs-item-rank.r3 { background: rgba(180,120,60,.12);  color: #92400e; }
.rs-item-name { font-weight: 800; color: var(--bp-dark); font-size: .84rem; line-height: 1.2; }
.rs-item-sub  { color: var(--bp-muted); font-size: .73rem; }
.rs-item-qty  { margin-left: auto; font-weight: 900; font-size: .88rem; color: var(--bp-blue); white-space: nowrap; }
.rs-item-bar  { width: 100%; height: 4px; background: #f1f5f9; border-radius: 999px; overflow: hidden; margin-top: .35rem; }
.rs-item-bar-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--bp-blue), #22c55e); transition: width .7s cubic-bezier(.4,0,.2,1); }

/* Chart box */
.rs-chart-box { position: relative; height: 230px; max-height: 230px; }
.rs-chart-box canvas { width: 100% !important; height: 100% !important; display: block; }

/* Pie chart box */
.rs-pie-box { position: relative; height: 220px; max-height: 220px; }
.rs-pie-box canvas { width: 100% !important; height: 100% !important; display: block; }

/* Category row */
.rs-cat-row {
  display: flex; align-items: center; gap: .65rem;
  padding: .5rem .65rem; border-radius: 11px;
  border: 1px solid var(--bp-line); margin-bottom: .4rem;
  background: #fff;
}
.rs-cat-row:last-child { margin-bottom: 0; }
.rs-cat-name { font-weight: 800; color: var(--bp-dark); font-size: .84rem; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rs-cat-amt  { font-weight: 900; font-size: .88rem; color: var(--bp-blue); white-space: nowrap; }
.rs-cat-sub  { color: var(--bp-muted); font-size: .73rem; }
.rs-cat-bar  { width: 100%; height: 4px; background: #f1f5f9; border-radius: 999px; overflow: hidden; margin-top: .3rem; }
.rs-cat-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #f59e0b, var(--bp-blue)); transition: width .7s cubic-bezier(.4,0,.2,1); }

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

/* action link */
.rs-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; }
.rs-act:hover { background: var(--bp-blue); color: #fff; border-color: transparent; text-decoration: none; }

@media (max-width: 576px) {
  .rs-kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .rs-table th, .rs-table td { padding: .45rem .5rem; font-size: .77rem; }
}
</style>


<!-- ── Hero bar ─────────────────────────────────────────────── -->
<div class="rs-hero-bar">
  <div>
    <div class="rs-hero-title">
      <i class="fas fa-utensils"></i>
      Restaurant Dashboard
    </div>
    <div style="font-size:.82rem;color:var(--bp-muted);margin-top:.2rem;">
      Dining · Take Away · Delivery · Food App · Credit
    </div>
  </div>

  <div class="d-flex align-items-center gap-2 flex-wrap">
    <div class="rs-today-pill">
      <div class="rs-today-dot"></div>
      Today: <strong id="rsTodayCount">—</strong> orders &nbsp;·&nbsp;
      Rs <strong id="rsTodayRevenue">—</strong>
    </div>
    <a href="{% url 'restaurant:reports:restaurant_sales_report_list' %}" class="btn btn-outline-primary btn-sm" style="border-radius:10px;font-weight:800;">
      <i class="fas fa-file-alt mr-1"></i> Sales Report
    </a>
    <a href="{% url 'restaurant:sales:pos' %}" class="btn btn-bp btn-sm">
      <i class="fas fa-cash-register mr-1"></i> Open POS
    </a>
  </div>
</div>
 

<!-- ── KPI cards ─────────────────────────────────────────────── -->
<div class="rs-kpi-grid">

  <div class="kpi">
    <div class="kpi-top">
      <div>
        <div class="kpi-l">Net Revenue</div>
        <div id="rsKpiRevenue" class="kpi-v">—</div>
        <div class="kpi-mini">
          <span id="rsKpiOrders" class="mini-pill">— orders</span>
          <span id="rsKpiRangeLabel" class="mini-pill" style="background:rgba(0,86,184,.07);color:var(--bp-blue);">—</span>
        </div>
      </div>
      <div class="kpi-ic"><i class="fas fa-chart-line"></i></div>
    </div>
  </div>

  <div class="kpi">
    <div class="kpi-top">
      <div>
        <div class="kpi-l">Received</div>
        <div id="rsKpiReceived" class="kpi-v" style="color:#15803d;">—</div>
        <div class="kpi-mini">
          <span id="rsKpiDue" class="mini-pill" style="background:rgba(239,68,68,.08);color:#b91c1c;">Due: —</span>
        </div>
      </div>
      <div class="kpi-ic" style="background:rgba(34,197,94,.10);color:#15803d;"><i class="fas fa-wallet"></i></div>
    </div>
  </div>

  <div class="kpi">
    <div class="kpi-top">
      <div>
        <div class="kpi-l">Gross Sales</div>
        <div id="rsKpiGross" class="kpi-v">—</div>
        <div class="kpi-mini">
          <span id="rsKpiItemDisc" class="mini-pill">Item disc: —</span>
        </div>
      </div>
      <div class="kpi-ic"><i class="fas fa-receipt"></i></div>
    </div>
  </div>

  <div class="kpi">
    <div class="kpi-top">
      <div>
        <div class="kpi-l">Total Discount</div>
        <div id="rsKpiDiscount" class="kpi-v" style="color:#b45309;">—</div>
        <div class="kpi-mini">
          <span id="rsKpiFlatDisc" class="mini-pill">Flat: —</span>
        </div>
      </div>
      <div class="kpi-ic" style="background:rgba(245,158,11,.10);color:#b45309;"><i class="fas fa-tag"></i></div>
    </div>
  </div>

  <div class="kpi">
    <div class="kpi-top">
      <div>
        <div class="kpi-l">Tax Collected</div>
        <div id="rsKpiTax" class="kpi-v">—</div>
        <div class="kpi-mini">
          <span id="rsKpiService" class="mini-pill">Service: —</span>
        </div>
      </div>
      <div class="kpi-ic" style="background:rgba(139,92,246,.10);color:#6d28d9;"><i class="fas fa-percent"></i></div>
    </div>
  </div>

  <div class="kpi">
    <div class="kpi-top">
      <div>
        <div class="kpi-l">Other / Delivery</div>
        <div id="rsKpiOther" class="kpi-v">—</div>
        <div class="kpi-mini">
          <span id="rsKpiComp" class="mini-pill" style="background:rgba(139,92,246,.08);color:#6d28d9;">Comp: —</span>
        </div>
      </div>
      <div class="kpi-ic" style="background:rgba(20,184,166,.10);color:#0f766e;"><i class="fas fa-motorcycle"></i></div>
    </div>
  </div>

  <div class="kpi">
    <div class="kpi-top">
      <div>
        <div class="kpi-l">Bank Balance</div>
        <div id="rsKpiBank" class="kpi-v">—</div>
        <div class="kpi-mini">
          <span class="mini-pill">All accounts</span>
        </div>
      </div>
      <div class="kpi-ic" style="background:rgba(0,86,184,.08);color:var(--bp-blue);"><i class="fas fa-university"></i></div>
    </div>
  </div>

</div>


<!-- ── Row: Daily Chart + Order Type Pie ─────────────────────── -->
<div class="row mb-3">

  <div class="col-lg-7 mb-2">
    <div class="panel">
      <div class="panel-head">
        <div>
          <div class="panel-title">Daily Sales · Received</div>
          <div class="panel-sub">Revenue trend for selected date range</div>
        </div>
        <span id="rsRangeLabel" class="badge-soft">—</span>
      </div>
      <div class="p-3">
        <div class="rs-chart-box">
          <canvas id="rsDailyChart"></canvas>
        </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">Order Type Split</div>
          <div class="panel-sub">By revenue in range</div>
        </div>
      </div>
      <div class="p-3">
        <div class="rs-pie-box">
          <canvas id="rsTypePieChart"></canvas>
        </div>
      </div>
    </div>
  </div>

</div>


<!-- ── Order Type Breakdown Table ───────────────────────────── -->
<div class="row mb-3">
  <div class="col-12">
    <div class="panel">
      <div class="panel-head">
        <div>
          <div class="panel-title">Order Channel Breakdown</div>
          <div class="panel-sub">Revenue, received, due, tax & charges per channel</div>
        </div>
      </div>
      <div class="p-0">
        <div style="overflow-x:auto;">
          <table class="rs-table">
            <thead>
              <tr>
                <th>Channel</th>
                <th class="text-right">Orders</th>
                <th class="text-right">Revenue</th>
                <th class="text-right">Received</th>
                <th class="text-right">Due</th>
                <th class="text-right">Discount</th>
                <th class="text-right">Service</th>
                <th class="text-right">Tax</th>
                <th class="text-right">Other / Del</th>
              </tr>
            </thead>
            <tbody id="rsBreakdownBody">
              <tr><td colspan="9"><div class="rs-sk" style="height:44px;"></div></td></tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>


<!-- ── Category Sales + Top Items ──────────────────────────── -->
<div class="row mb-3">

  <div class="col-lg-5 mb-2">
    <div class="panel h-100">
      <div class="panel-head">
        <div>
          <div class="panel-title">Category Sales</div>
          <div class="panel-sub">Revenue grouped by product category</div>
        </div>
      </div>
      <div class="p-3" id="rsCatBody" style="overflow-y:auto;max-height:340px;">
        <div class="rs-sk" style="height:54px;margin-bottom:.4rem;"></div>
        <div class="rs-sk" style="height:54px;margin-bottom:.4rem;"></div>
        <div class="rs-sk" style="height:54px;"></div>
      </div>
    </div>
  </div>

  <div class="col-lg-7 mb-2">
    <div class="panel h-100">
      <div class="panel-head">
        <div>
          <div class="panel-title">Top Selling Items</div>
          <div class="panel-sub">By quantity sold in selected range</div>
        </div>
      </div>
      <div class="p-3" id="rsTopItemsBody" style="overflow-y:auto;max-height:340px;">
        <div class="rs-sk" style="height:48px;margin-bottom:.4rem;"></div>
        <div class="rs-sk" style="height:48px;margin-bottom:.4rem;"></div>
        <div class="rs-sk" style="height:48px;"></div>
      </div>
    </div>
  </div>

</div>


<!-- ── Recent Orders Table ─────────────────────────────────── -->
<div class="row mb-3">
  <div class="col-12">
    <div class="panel">
      <div class="panel-head">
        <div>
          <div class="panel-title">Recent Orders</div>
          <div class="panel-sub">Latest 15 orders across all channels</div>
        </div>
        <a href="{% url 'restaurant:reports:restaurant_sales_report_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="rs-table">
            <thead>
              <tr>
                <th>#</th>
                <th>Date / Time</th>
                <th>Channel</th>
                <th>Customer / Table</th>
                <th>Status</th>
                <th>Pay</th>
                <th class="text-right">Total</th>
                <th class="text-right">Received</th>
                <th class="text-right">Due</th>
                <th></th>
              </tr>
            </thead>
            <tbody id="rsRecentBody">
              <tr><td colspan="10"><div class="rs-sk" style="height:44px;"></div></td></tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>


<!-- ════════════════ JAVASCRIPT ════════════════════════════════ -->
<script>
(function () {

/* ── URL config ─────────────────────────────────────────────── */
const rsUrls = {
  summary:   "{% url 'pos:rest_dash_summary' %}",
  chartDaily:"{% url 'pos:rest_dash_chart_daily' %}",
  breakdown: "{% url 'pos:rest_dash_type_breakdown' %}",
  category:  "{% url 'pos:rest_dash_category' %}",
  topItems:  "{% url 'pos:rest_dash_top_items' %}",
  recent:    "{% url 'pos:rest_dash_recent' %}",
};
const rsPosUrl    = "{% url 'restaurant:sales:pos' %}";
const rsReportUrl = "{% url 'restaurant:reports:restaurant_sales_report_list' %}";

/* ── Shared state ───────────────────────────────────────────── */
let rsDailyChart = null;
let rsTypePieChart = null;

/* ── Helpers ────────────────────────────────────────────────── */
function rsFmt(n, dec) {
  n = Number(n || 0);
  if (dec) return n.toLocaleString(undefined, { minimumFractionDigits: dec, maximumFractionDigits: dec });
  return Math.round(n).toLocaleString();
}

function rsParams() {
  if (typeof getRange === "function") {
    const r = getRange();
    return `?from=${r.from}&to=${r.to}`;
  }
  // Fallback: current month
  const now = new Date();
  const y = now.getFullYear(), m = String(now.getMonth() + 1).padStart(2, "0");
  return `?from=${y}-${m}-01&to=${y}-${m}-${String(new Date(y, now.getMonth()+1, 0).getDate()).padStart(2,"0")}`;
}

function rsTypeBadgeClass(otype) {
  const map = {
    DINING: "dining", TAKEAWAY: "takeaway", DELIVERY: "delivery",
    APP: "app", CREDIT: "credit", DRIVE: "drive",
    ROOM: "other", BOARD: "other", WEB: "other",
  };
  return map[otype] || "other";
}

function rsTypePieColor(otype) {
  const map = {
    DINING:   "#0056B8",
    TAKEAWAY: "#f59e0b",
    DELIVERY: "#ef4444",
    APP:      "#8b5cf6",
    CREDIT:   "#64748b",
    DRIVE:    "#14b8a6",
    ROOM:     "#22c55e",
    BOARD:    "#ec4899",
    WEB:      "#f97316",
  };
  return map[otype] || "#94a3b8";
}

function rsStatusBadge(status) {
  const map = {
    settled:       "settled",
    pending:       "pending",
    complimentary: "complimentary",
    cancelled:     "cancelled",
    shifted:       "shifted",
  };
  const cls = map[(status || "").toLowerCase()] || "default";
  const label = status ? status.charAt(0).toUpperCase() + status.slice(1) : "—";
  return `<span class="rs-status ${cls}">${label}</span>`;
}

/* ── 1) Summary ─────────────────────────────────────────────── */
async function rsLoadSummary() {
  const res = await fetch(rsUrls.summary + rsParams());
  const j   = await res.json();
  const k   = j.kpis || {};
  const rng = j.range || {};
  const td  = j.today || {};

  document.getElementById("rsKpiRevenue").textContent  = rsFmt(k.net_revenue);
  document.getElementById("rsKpiOrders").textContent   = `${k.total_orders || 0} orders`;
  document.getElementById("rsKpiRangeLabel").textContent = `${rng.from || ""} → ${rng.to || ""}`;
  document.getElementById("rsRangeLabel").textContent  = `${rng.from || ""} → ${rng.to || ""}`;

  document.getElementById("rsKpiReceived").textContent = rsFmt(k.received);
  document.getElementById("rsKpiDue").textContent      = `Due: ${rsFmt(k.due)}`;

  document.getElementById("rsKpiGross").textContent    = rsFmt(k.gross_sales);
  document.getElementById("rsKpiItemDisc").textContent = `Item disc: ${rsFmt(k.item_discount)}`;

  document.getElementById("rsKpiDiscount").textContent = rsFmt(k.total_discount);
  document.getElementById("rsKpiFlatDisc").textContent = `Flat: ${rsFmt(k.flat_discount)}`;

  document.getElementById("rsKpiTax").textContent      = rsFmt(k.tax_amount);
  document.getElementById("rsKpiService").textContent  = `Service: ${rsFmt(k.service_amount)}`;

  document.getElementById("rsKpiOther").textContent    = rsFmt(k.other_charges);
  document.getElementById("rsKpiComp").textContent     = `Comp: ${k.comp_count || 0} (${rsFmt(k.comp_amount)})`;

  document.getElementById("rsKpiBank").textContent     = rsFmt(k.bank_sum);

  // Today pill
  document.getElementById("rsTodayCount").textContent  = td.order_count || 0;
  document.getElementById("rsTodayRevenue").textContent = rsFmt(td.revenue);
}

/* ── 2) Daily Chart ─────────────────────────────────────────── */
async function rsLoadChart() {
  const res = await fetch(rsUrls.chartDaily + rsParams());
  const j   = await res.json();
  const ctx = document.getElementById("rsDailyChart").getContext("2d");

  if (rsDailyChart) rsDailyChart.destroy();

  rsDailyChart = new Chart(ctx, {
    type: "line",
    data: {
      labels: j.labels || [],
      datasets: [
        {
          label: "Net Sales",
          data: j.sales || [],
          borderColor: "#0056B8",
          backgroundColor: "rgba(0,86,184,.10)",
          fill: true, tension: .35, pointRadius: 0, borderWidth: 2,
        },
        {
          label: "Received",
          data: j.received || [],
          borderColor: "#22c55e",
          backgroundColor: "rgba(34,197,94,.07)",
          fill: false, tension: .35, pointRadius: 0, borderWidth: 2,
        },
      ],
    },
    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, ticks: { callback: v => Math.round(v).toLocaleString() } },
        x: { grid: { display: false }, ticks: { maxTicksLimit: 10, maxRotation: 0 } },
      },
    },
  });
}

/* ── 3) Order Type Breakdown ────────────────────────────────── */
async function rsLoadBreakdown() {
  const res   = await fetch(rsUrls.breakdown + rsParams());
  const j     = await res.json();
  const items = j.items || [];
  const tbody = document.getElementById("rsBreakdownBody");
  tbody.innerHTML = "";

  if (!items.length) {
    tbody.innerHTML = `<tr><td colspan="9" class="text-muted rs-muted" style="padding:.75rem;font-weight:800;">No orders in this range</td></tr>`;

    // Also build empty pie
    rsRenderTypePie([]);
    return;
  }

  items.forEach(row => {
    const bc  = rsTypeBadgeClass(row.order_type);
    const dueCls = row.due > 0 ? "rs-red" : "rs-green";
    tbody.insertAdjacentHTML("beforeend", `
      <tr>
        <td>
          <span class="rs-type-badge ${bc}">
            <i class="fas ${rsTypeIcon(row.order_type)} mr-1" style="font-size:.7rem;"></i>
            ${row.label || row.order_type}
          </span>
        </td>
        <td class="text-right rs-mono">${row.count}</td>
        <td class="text-right rs-mono rs-blue">${rsFmt(row.grand)}</td>
        <td class="text-right rs-mono rs-green">${rsFmt(row.received)}</td>
        <td class="text-right rs-mono ${dueCls}">${rsFmt(row.due)}</td>
        <td class="text-right rs-mono" style="color:#b45309;">${rsFmt(row.discount)}</td>
        <td class="text-right rs-mono rs-muted">${rsFmt(row.service)}</td>
        <td class="text-right rs-mono rs-muted">${rsFmt(row.tax)}</td>
        <td class="text-right rs-mono rs-muted">${rsFmt(row.other)}</td>
      </tr>`);
  });

  rsRenderTypePie(items);
}

function rsTypeIcon(otype) {
  const map = {
    DINING:"fa-chair", TAKEAWAY:"fa-shopping-bag", DELIVERY:"fa-motorcycle",
    APP:"fa-mobile-alt", CREDIT:"fa-user-clock", DRIVE:"fa-car",
    ROOM:"fa-bed", BOARD:"fa-briefcase", WEB:"fa-globe",
  };
  return map[otype] || "fa-utensils";
}

function rsRenderTypePie(items) {
  const ctx = document.getElementById("rsTypePieChart").getContext("2d");
  if (rsTypePieChart) rsTypePieChart.destroy();

  const labels  = items.map(r => r.label || r.order_type);
  const vals    = items.map(r => r.grand);
  const colors  = items.map(r => rsTypePieColor(r.order_type));

  rsTypePieChart = new Chart(ctx, {
    type: "doughnut",
    data: {
      labels,
      datasets: [{
        data: vals,
        backgroundColor: colors,
        borderColor: "#fff",
        borderWidth: 2,
        hoverOffset: 8,
      }],
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      animation: { duration: 300 },
      cutout: "58%",
      plugins: {
        legend: {
          position: "bottom",
          labels: {
            usePointStyle: true, boxWidth: 9,
            font: { size: 11, weight: "800" },
            padding: 10,
          },
        },
        tooltip: {
          callbacks: {
            label: ctx => ` ${ctx.label}: Rs ${Math.round(ctx.parsed).toLocaleString()}`,
          },
        },
      },
    },
  });
}

/* ── 4) Category Sales ──────────────────────────────────────── */
async function rsLoadCategory() {
  const res   = await fetch(rsUrls.category + rsParams());
  const j     = await res.json();
  const items = j.items || [];
  const body  = document.getElementById("rsCatBody");
  body.innerHTML = "";

  if (!items.length) {
    body.innerHTML = `<div class="rs-muted" style="font-weight:800;font-size:.84rem;">No item data in this range</div>`;
    return;
  }

  const maxNet = Math.max(...items.map(x => x.net), 1);
  items.forEach(row => {
    const pct = Math.round((row.net / maxNet) * 100);
    body.insertAdjacentHTML("beforeend", `
      <div class="rs-cat-row">
        <div style="flex:1;min-width:0;">
          <div class="rs-cat-name">${row.category}</div>
          <div class="rs-cat-sub">
            ${rsFmt(row.qty, 1)} qty &bull; ${row.count} lines
            ${row.discount > 0 ? ` &bull; <span style="color:#b45309;">Disc ${rsFmt(row.discount)}</span>` : ""}
          </div>
          <div class="rs-cat-bar"><div class="rs-cat-fill" style="width:${pct}%"></div></div>
        </div>
        <div class="rs-cat-amt">Rs ${rsFmt(row.net)}</div>
      </div>`);
  });
}

/* ── 5) Top Items ───────────────────────────────────────────── */
async function rsLoadTopItems() {
  const res   = await fetch(rsUrls.topItems + rsParams());
  const j     = await res.json();
  const items = j.items || [];
  const body  = document.getElementById("rsTopItemsBody");
  body.innerHTML = "";

  if (!items.length) {
    body.innerHTML = `<div class="rs-muted" style="font-weight:800;font-size:.84rem;">No item data in this range</div>`;
    return;
  }

  const maxQty = Math.max(...items.map(x => x.qty), 1);
  const rankCls = i => i === 0 ? "r1" : i === 1 ? "r2" : i === 2 ? "r3" : "";

  items.forEach((item, i) => {
    const pct = Math.round((item.qty / maxQty) * 100);
    body.insertAdjacentHTML("beforeend", `
      <div class="rs-item-row">
        <div class="rs-item-rank ${rankCls(i)}">${i + 1}</div>
        <div style="flex:1;min-width:0;">
          <div class="rs-item-name">${item.name}</div>
          <div class="rs-item-sub">
            ${item.category}
            &bull; Rs ${rsFmt(item.net)} revenue
            &bull; ${item.orders_count} order${item.orders_count !== 1 ? "s" : ""}
          </div>
          <div class="rs-item-bar"><div class="rs-item-bar-fill" style="width:${pct}%"></div></div>
        </div>
        <div class="rs-item-qty">${rsFmt(item.qty, 1)} <span style="font-size:.7rem;font-weight:700;color:var(--bp-muted);">qty</span></div>
      </div>`);
  });
}

/* ── 6) Recent Orders ───────────────────────────────────────── */
async function rsLoadRecent() {
  const res   = await fetch(rsUrls.recent);
  const j     = await res.json();
  const items = j.items || [];
  const tbody = document.getElementById("rsRecentBody");
  tbody.innerHTML = "";

  if (!items.length) {
    tbody.innerHTML = `<tr><td colspan="10" class="rs-muted" style="font-weight:800;padding:.75rem;">No orders found</td></tr>`;
    return;
  }

  items.forEach(order => {
    const bc     = rsTypeBadgeClass(order.order_type);
    const dueCls = order.due > 0 ? "rs-red" : "rs-green";
    const posUrl = `${rsPosUrl}?mode=${rsOrderMode(order.order_type)}&order_no=${order.order_no}`;
    const detUrl = `{% url 'restaurant:reports:restaurant_sales_report_list' %}`.replace(
      "/sales/", `/sales/${order.order_no}/`
    );

    tbody.insertAdjacentHTML("beforeend", `
      <tr>
        <td class="rs-mono rs-muted">#${order.order_no}</td>
        <td style="white-space:nowrap;font-weight:700;">${order.date}</td>
        <td>
          <span class="rs-type-badge ${bc}">
            <i class="fas ${rsTypeIcon(order.order_type)} mr-1" style="font-size:.65rem;"></i>
            ${order.type_label}
          </span>
        </td>
        <td style="max-width:140px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:700;">${order.label}</td>
        <td>${rsStatusBadge(order.status)}</td>
        <td style="font-size:.75rem;font-weight:800;color:var(--bp-muted);">${order.pay_mode}</td>
        <td class="text-right rs-mono rs-blue">${rsFmt(order.grand)}</td>
        <td class="text-right rs-mono rs-green">${rsFmt(order.received)}</td>
        <td class="text-right rs-mono ${dueCls}">${rsFmt(order.due)}</td>
        <td style="white-space:nowrap;">
          <a href="${posUrl}" class="rs-act mr-1" title="Edit in POS"><i class="fas fa-edit"></i></a>
          <a href="{% url 'restaurant:reports:restaurant_sales_report_list' %}${order.order_no}/" class="rs-act" title="View Detail"><i class="fas fa-eye"></i></a>
        </td>
      </tr>`);
  });
}

function rsOrderMode(otype) {
  const map = {
    DINING:"dining", TAKEAWAY:"takeaway", DELIVERY:"delivery",
    APP:"foodapp", CREDIT:"credit", DRIVE:"dining",
    ROOM:"dining", BOARD:"dining", WEB:"delivery",
  };
  return map[otype] || "dining";
}

/* ── Run all ────────────────────────────────────────────────── */
async function rsRunAll() {
  // Summary first (fast feedback), then charts in parallel
  await rsLoadSummary().catch(e => console.error("[rs:summary]", e));
  await Promise.all([
    rsLoadChart(),
    rsLoadBreakdown(),
    rsLoadCategory(),
    rsLoadTopItems(),
    rsLoadRecent(),
  ].map(p => p.catch(e => console.error("[rs:dash]", e))));
}

/*
 * Chart.js loads in the javascripts block which runs AFTER the content
 * block where this include lives. We wait for window 'load' so that
 * Chart.js is guaranteed to be available before new Chart() is called.
 * We also hook into the parent range-change callback for live refresh.
 */
function rsInit() {
  // Re-run when parent date range changes
  const _prev = window.onDashRangeChange;
  window.onDashRangeChange = function () {
    if (typeof _prev === "function") _prev();
    rsRunAll();
  };

  rsRunAll();
}

// Wait until ALL scripts (including Chart.js) are fully loaded
if (document.readyState === "complete") {
  rsInit();
} else {
  window.addEventListener("load", rsInit);
}

})();
</script>