{% extends "base.html" %}
{% block content %}
<style>
  .dash-hero {
    background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 55%, #1e40af 100%);
    border-radius: 16px;
    color: #ffffff !important;
    padding: 14px 22px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.22);
    position: relative;
    overflow: hidden;
    margin-top: -6px;
  }
  .dash-hero h1, .dash-hero h2, .dash-hero h3, .dash-hero h4 {
    color: #ffffff !important;
    margin-bottom: 0px;
    letter-spacing: -0.01em;
  }
  .dash-hero-badge {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #e0e7ff !important;
    padding: 3px 12px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
  }
  .dash-filter .btn {
    border-radius: 10px;
    font-weight: 600;
  }

  /* PREMIUM DISTINCT PASTEL CARDS WITH SOFT FLOATING SHADOWS */
  .metric-card-custom {
    border-radius: 18px;
    padding: 20px;
    height: 100%;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.07), 0 4px 6px -2px rgba(15, 23, 42, 0.03);
    position: relative;
    overflow: hidden;
  }
  .metric-card-custom:hover {
    box-shadow: 0 18px 35px -6px rgba(15, 23, 42, 0.14), 0 8px 10px -4px rgba(15, 23, 42, 0.06);
    transform: translateY(-4px);
  }
  .metric-icon-box {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-size: 1.35rem;
    flex-shrink: 0;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
  }
  .metric-title-custom {
    font-size: 0.73rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    opacity: 0.92;
  }
  .metric-num-custom {
    font-size: 1.58rem;
    font-weight: 800;
    margin-top: 2px;
    line-height: 1.2;
    letter-spacing: -0.02em;
  }

  /* 8 Distinct Color Schemes (Zero overlap top vs bottom) */

  /* 1. Stock Value (Soft Electric Indigo/Blue) */
  .card-stock {
    background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
    border: 1px solid #c7d2fe;
  }
  .card-stock .metric-icon-box { background: #4f46e5; color: #ffffff; }
  .card-stock .metric-title-custom { color: #3730a3; }
  .card-stock .metric-num-custom { color: #1e1b4b; }

  /* 2. Sales Amount (Soft Emerald Green) */
  .card-sales {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border: 1px solid #a7f3d0;
  }
  .card-sales .metric-icon-box { background: #059669; color: #ffffff; }
  .card-sales .metric-title-custom { color: #047857; }
  .card-sales .metric-num-custom { color: #064e3b; }

  /* 3. Due Amount (Soft Warm Coral Amber) */
  .card-due {
    background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
    border: 1px solid #fed7aa;
  }
  .card-due .metric-icon-box { background: #ea580c; color: #ffffff; }
  .card-due .metric-title-custom { color: #c2410c; }
  .card-due .metric-num-custom { color: #7c2d12; }

  /* 4. Customers (Soft Fuchsia Magenta) */
  .card-customers {
    background: linear-gradient(135deg, #fdf4ff 0%, #fae8ff 100%);
    border: 1px solid #f5d0fe;
  }
  .card-customers .metric-icon-box { background: #c026d3; color: #ffffff; }
  .card-customers .metric-title-custom { color: #a21caf; }
  .card-customers .metric-num-custom { color: #701a75; }

  /* 5. Invoices (Soft Cyan Teal) */
  .card-invoices {
    background: linear-gradient(135deg, #ecfeff 0%, #cffafe 100%);
    border: 1px solid #a5f3fc;
  }
  .card-invoices .metric-icon-box { background: #0891b2; color: #ffffff; }
  .card-invoices .metric-title-custom { color: #0e7490; }
  .card-invoices .metric-num-custom { color: #164e63; }

  /* 6. Gross Profit (Soft Lime Mint Green) */
  .card-gprofit {
    background: linear-gradient(135deg, #f7fee7 0%, #ecfccb 100%);
    border: 1px solid #d9f99d;
  }
  .card-gprofit .metric-icon-box { background: #65a30d; color: #ffffff; }
  .card-gprofit .metric-title-custom { color: #4d7c0f; }
  .card-gprofit .metric-num-custom { color: #1a2e05; }

  /* 7. Expense (Soft Crimson Rose) */
  .card-expense {
    background: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 100%);
    border: 1px solid #fecdd3;
  }
  .card-expense .metric-icon-box { background: #e11d48; color: #ffffff; }
  .card-expense .metric-title-custom { color: #be123c; }
  .card-expense .metric-num-custom { color: #881337; }

  /* 8. Net Profit (Soft Royal Sapphire Blue) */
  .card-nprofit {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 1px solid #bae6fd;
  }
  .card-nprofit .metric-icon-box { background: #0284c7; color: #ffffff; }
  .card-nprofit .metric-title-custom { color: #0369a1; }
  .card-nprofit .metric-num-custom { color: #0c4a6e; }

  .dashboard-panel {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    overflow: hidden;
    height: 100%;
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.05);
    display: flex;
    flex-direction: column;
  }
  .dashboard-panel .panel-head {
    padding: 18px 22px;
    border-bottom: 1px solid #f1f5f9;
    background: #fafafa;
  }
  .chart-canvas-box {
    position: relative;
    height: 250px;
    width: 100%;
  }
  .pie-legend-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.85rem;
    padding: 6px 10px;
    border-radius: 8px;
    background: #f8fafc;
    margin-bottom: 5px;
    transition: background 0.15s;
  }
  .pie-legend-item:hover {
    background: #f1f5f9;
  }
  .pie-color-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 8px;
    flex-shrink: 0;
  }
</style>

<div class="container-fluid py-2 px-3">
  <!-- Compact Hero Section -->
  <div class="dash-hero mb-3 d-flex flex-wrap align-items-center justify-content-between gap-2">
    <div class="d-flex align-items-center gap-3">
      <span class="dash-hero-badge"><i class="bi bi-shop me-1 text-info"></i>{{ current_user.shop.shop_name if current_user.shop else l('Your Shop', 'আপনার দোকান') }}</span>
      <h3 class="fw-bold mb-0 text-white fs-5" style="color: #ffffff !important;">
        <i class="bi bi-speedometer2 text-warning me-1.5"></i>{{ l("Today's shop summary", 'আজকের দোকানের হিসাব') }}
      </h3>
    </div>
    {% if can('sell') %}
    <a href="{{ url_for('sell') }}" class="btn btn-light fw-bold px-3 py-1.5 shadow-sm rounded-pill d-inline-flex align-items-center gap-1.5" style="color: #1e40af; border: 1.5px solid rgba(255,255,255,0.85); background: #ffffff;">
      <i class="bi bi-cart-plus-fill fs-6 text-primary"></i> <span class="small">{{ l('New Sale', 'নতুন বিক্রি') }}</span>
    </a>
    {% endif %}
  </div>

  <!-- Filter Bar -->
  {% if can('reports') %}
  <form method="GET" class="dash-filter bg-white border rounded-4 p-2 mb-3 d-flex flex-wrap align-items-center gap-2 shadow-sm">
    <a href="{{ url_for('dashboard', filter='today') }}" class="btn btn-sm {{ 'btn-primary' if request.args.get('filter') == 'today' or not request.args.get('filter') else 'btn-outline-primary' }}">{{ l('Today', 'আজ') }}</a>
    <a href="{{ url_for('dashboard', filter='month') }}" class="btn btn-sm {{ 'btn-primary' if request.args.get('filter') == 'month' else 'btn-outline-primary' }}">{{ l('This month', 'এই মাস') }}</a>
    <a href="{{ url_for('dashboard', filter='year') }}" class="btn btn-sm {{ 'btn-primary' if request.args.get('filter') == 'year' else 'btn-outline-primary' }}">{{ l('This year', 'এই বছর') }}</a>
    <a href="{{ url_for('dashboard', filter='all') }}" class="btn btn-sm {{ 'btn-primary' if request.args.get('filter') == 'all' else 'btn-outline-primary' }}">{{ l('All time', 'সব সময়') }}</a>
    <span class="vr mx-1"></span>
    <input type="date" name="from_date" value="{{ request.args.get('from_date','') }}" class="form-control form-control-sm" style="width:auto">
    <span class="text-muted small">{{ l('to', 'থেকে') }}</span>
    <input type="date" name="to_date" value="{{ request.args.get('to_date','') }}" class="form-control form-control-sm" style="width:auto">
    <button class="btn btn-sm btn-dark px-3">{{ l('Filter', 'ফিল্টার') }}</button>
  </form>

  <!-- Metric Cards Row 1 (8 Distinct Colors & Soft Floating Shadows) -->
  <div class="row g-3 mb-3">
    <!-- 1. Stock Value (Indigo Blue) -->
    <div class="col-xl-3 col-md-6">
      <div class="metric-card-custom card-stock d-flex gap-3 align-items-center">
        <div class="metric-icon-box"><i class="bi bi-box-seam"></i></div>
        <div>
          <div class="metric-title-custom">{{ l('Stock value','স্টক মূল্য') }}</div>
          <div class="metric-num-custom">৳ {{ '%.2f'|format(stock_value or 0) }}</div>
        </div>
      </div>
    </div>

    <!-- 2. Sales Amount (Emerald Green) -->
    <div class="col-xl-3 col-md-6">
      <div class="metric-card-custom card-sales d-flex gap-3 align-items-center">
        <div class="metric-icon-box"><i class="bi bi-cash-stack"></i></div>
        <div>
          <div class="metric-title-custom">{{ l('Sales amount','বিক্রির টাকা') }}</div>
          <div class="metric-num-custom">৳ {{ '%.2f'|format(total_sales_amount or 0) }}</div>
        </div>
      </div>
    </div>

    <!-- 3. Due Amount (Warm Coral Amber) -->
    <div class="col-xl-3 col-md-6">
      <div class="metric-card-custom card-due d-flex gap-3 align-items-center">
        <div class="metric-icon-box"><i class="bi bi-wallet2"></i></div>
        <div>
          <div class="metric-title-custom">{{ l('Due amount','বাকি টাকা') }}</div>
          <div class="metric-num-custom">৳ {{ '%.2f'|format(total_due_amount or 0) }}</div>
        </div>
      </div>
    </div>

    <!-- 4. Customers (Fuchsia Magenta) -->
    <div class="col-xl-3 col-md-6">
      <div class="metric-card-custom card-customers d-flex gap-3 align-items-center">
        <div class="metric-icon-box"><i class="bi bi-people"></i></div>
        <div>
          <div class="metric-title-custom">{{ l('Customers','গ্রাহক') }}</div>
          <div class="metric-num-custom">{{ customer_count or 0 }} {{ l('customers', 'জন') }}</div>
        </div>
      </div>
    </div>
  </div>

  <!-- Metric Cards Row 2 (8 Distinct Colors & Soft Floating Shadows) -->
  <div class="row g-3 mb-3">
    <!-- 5. Invoices (Cyan Teal) -->
    <div class="col-xl-3 col-md-6">
      <div class="metric-card-custom card-invoices d-flex gap-3 align-items-center">
        <div class="metric-icon-box"><i class="bi bi-receipt"></i></div>
        <div>
          <div class="metric-title-custom">{{ l('Invoices', 'মোট ইনভয়েস') }}</div>
          <div class="metric-num-custom">{{ total_sales or 0 }} <small class="font-monospace opacity-75" style="font-size:0.75rem !important;">(Avg ৳ {{ '%.0f'|format(avg_order_value or 0) }})</small></div>
        </div>
      </div>
    </div>

    <!-- 6. Gross Profit (Lime Mint Green) -->
    <div class="col-xl-3 col-md-6">
      <div class="metric-card-custom card-gprofit d-flex gap-3 align-items-center">
        <div class="metric-icon-box"><i class="bi bi-graph-up-arrow"></i></div>
        <div>
          <div class="metric-title-custom">{{ l('Gross profit', 'মোট লাভ') }}</div>
          <div class="metric-num-custom">৳ {{ '%.2f'|format(gross_profit or 0) }}</div>
        </div>
      </div>
    </div>

    <!-- 7. Expense (Crimson Rose) -->
    <div class="col-xl-3 col-md-6">
      <div class="metric-card-custom card-expense d-flex gap-3 align-items-center">
        <div class="metric-icon-box"><i class="bi bi-dash-circle"></i></div>
        <div>
          <div class="metric-title-custom">{{ l('Expense', 'খরচ') }}</div>
          <div class="metric-num-custom">৳ {{ '%.2f'|format(monthly_expense or 0) }}</div>
        </div>
      </div>
    </div>

    <!-- 8. Net Profit (Royal Sapphire Blue) -->
    <div class="col-xl-3 col-md-6">
      <div class="metric-card-custom card-nprofit d-flex gap-3 align-items-center">
        <div class="metric-icon-box"><i class="bi bi-trophy"></i></div>
        <div>
          <div class="metric-title-custom">{{ l('Net profit', 'নিট লাভ') }}</div>
          <div class="metric-num-custom">৳ {{ '%.2f'|format(net_profit or 0) }}</div>
        </div>
      </div>
    </div>
  </div>
  {% endif %}

  <!-- Charts Row: Business Growth (8 cols) + Pie Chart Breakdown (4 cols) -->
  {% if can('reports') %}
  <div class="row g-3 mb-3">
    <!-- Left Column: Business Growth Bar Chart -->
    <div class="col-lg-8">
      <div class="dashboard-panel">
        <div class="panel-head d-flex flex-wrap justify-content-between align-items-center gap-2">
          <div>
            <h5 class="mb-0 fw-bold"><i class="bi bi-graph-up-arrow me-2 text-primary"></i>{{ l('Business growth', 'ব্যবসার প্রবৃদ্ধি') }}</h5>
            <small class="text-muted">{{ l('30-Day Daily & 12-Month Trend Analytics', 'দৈনিক (৩০ দিন), মাসিক ও বাৎসরিক বিবরণ') }}</small>
          </div>
          <div class="d-flex flex-wrap align-items-center gap-2">
            <span id="growthBadge" class="badge rounded-pill px-3 py-1.5" style="font-size:.8rem"></span>
            <div class="btn-group btn-group-sm" role="group">
              <button type="button" class="btn btn-outline-success active" id="chartSalesBtn" onclick="setChartType('sales')">
                <i class="bi bi-cash-stack me-1"></i>{{ l('Sales','বিক্রি') }}
              </button>
              <button type="button" class="btn btn-outline-danger" id="chartExpenseBtn" onclick="setChartType('expense')">
                <i class="bi bi-receipt me-1"></i>{{ l('Expense','খরচ') }}
              </button>
              <button type="button" class="btn btn-outline-primary" id="chartProfitBtn" onclick="setChartType('profit')">
                <i class="bi bi-graph-up me-1"></i>{{ l('Profit','লাভ') }}
              </button>
            </div>
            <div class="vr mx-1"></div>
            <div class="btn-group btn-group-sm" role="group">
              <button type="button" class="btn btn-outline-secondary" id="growthDailyBtn" onclick="setGrowthMode('daily')">{{ l('Daily (30D)','দৈনিক (৩০ দিন)') }}</button>
              <button type="button" class="btn btn-outline-secondary active" id="growthMonthlyBtn" onclick="setGrowthMode('monthly')">{{ l('Monthly (12M)','মাসিক (১২ মাস)') }}</button>
              <button type="button" class="btn btn-outline-secondary" id="growthYearlyBtn" onclick="setGrowthMode('yearly')">{{ l('Yearly','বাৎসরিক') }}</button>
            </div>
          </div>
        </div>
        <div class="p-3 flex-grow-1 d-flex align-items-center">
          <div class="chart-canvas-box">
            <canvas id="growthChart"></canvas>
          </div>
        </div>
      </div>
    </div>

    <!-- Right Column: Pie / Doughnut Breakdown -->
    <div class="col-lg-4">
      <div class="dashboard-panel">
        <div class="panel-head d-flex flex-wrap justify-content-between align-items-center gap-2">
          <div>
            <h5 class="mb-0 fw-bold"><i class="bi bi-pie-chart-fill me-2" style="color: #6366f1;"></i>{{ l('Sales Distribution', 'বিক্রির অনুপাত') }}</h5>
            <small class="text-muted">{{ l('Categories, Payments & Top Products', 'ক্যাটাগরি, পেমেন্ট ও সেরা পণ্য') }}</small>
          </div>
          <div class="btn-group btn-group-sm" role="group">
            <button type="button" class="btn btn-outline-primary active" id="pieCategoryBtn" onclick="setPieMode('categories')">
              {{ l('Categories', 'ক্যাটাগরি') }}
            </button>
            <button type="button" class="btn btn-outline-primary" id="piePaymentBtn" onclick="setPieMode('payments')">
              {{ l('Payments', 'পেমেন্ট') }}
            </button>
            <button type="button" class="btn btn-outline-primary" id="pieProductBtn" onclick="setPieMode('products')">
              {{ l('Top Products', 'সেরা পণ্য') }}
            </button>
          </div>
        </div>
        <div class="p-3 flex-grow-1 d-flex flex-column align-items-center justify-content-between">
          <div style="position: relative; width: 175px; height: 175px;" class="my-1">
            <canvas id="salesPieChart"></canvas>
          </div>
          <!-- Custom Legend Container -->
          <div id="pieLegendWrap" class="w-100 px-1 mt-2" style="max-height: 125px; overflow-y: auto;"></div>
        </div>
      </div>
    </div>
  </div>
  {% endif %}

  <!-- Recent Sales Table -->
  {% if can('reports') %}
  <div class="dashboard-panel mb-3">
    <div class="panel-head d-flex justify-content-between align-items-center">
      <div>
        <h5 class="mb-0 fw-bold"><i class="bi bi-clock-history me-2 text-primary"></i>{{ l('Recent sales', 'সাম্প্রতিক বিক্রি') }}</h5>
        <small class="text-muted">{{ l('Latest 10 invoices', 'সর্বশেষ ১০টি ইনভয়েস') }}</small>
      </div>
      <a class="btn btn-sm btn-outline-primary fw-semibold px-3 rounded-pill" href="{{ url_for('sales') }}">{{ l('View all sales', 'সব বিক্রি দেখুন') }}</a>
    </div>
    <div class="table-responsive">
      <table class="table table-hover align-middle mb-0">
        <thead class="table-light">
          <tr>
            <th class="ps-3">{{ l('Invoice', 'ইনভয়েস') }}</th>
            <th>{{ l('Customer', 'গ্রাহক') }}</th>
            <th>{{ l('Amount', 'টাকা') }}</th>
            <th>{{ l('Due', 'বাকি') }}</th>
            <th>{{ l('Date', 'তারিখ') }}</th>
          </tr>
        </thead>
        <tbody>
          {% for invoice in recent_sales %}
          <tr>
            <td class="ps-3 fw-semibold">{{ invoice.invoice_no }}</td>
            <td>{{ invoice.customer.name if invoice.customer else l('Walk-in', 'সরাসরি বিক্রি') }}</td>
            <td class="fw-bold text-dark">৳ {{ '%.2f'|format(invoice.total_amount or 0) }}</td>
            <td class="{{ 'text-danger fw-semibold' if invoice.due_amount else 'text-muted' }}">৳ {{ '%.2f'|format(invoice.due_amount or 0) }}</td>
            <td class="text-muted small">{{ invoice.created_at.strftime('%d %b, %I:%M %p') if invoice.created_at else '' }}</td>
          </tr>
          {% else %}
          <tr>
            <td colspan="5" class="text-center text-muted py-4">{{ l('No sales yet.', 'এখনও কোনো বিক্রি হয়নি।') }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
  {% endif %}
</div>

<script src="{{ url_for('static', filename='js/chart.umd.min.js') }}"></script>
<script>
(function () {
  const chartEl = document.getElementById('growthChart');
  const pieChartEl = document.getElementById('salesPieChart');
  if (!chartEl) return;

  const badgeEl    = document.getElementById('growthBadge');
  const dailyBtn   = document.getElementById('growthDailyBtn');
  const monthlyBtn = document.getElementById('growthMonthlyBtn');
  const yearlyBtn  = document.getElementById('growthYearlyBtn');
  const salesBtn   = document.getElementById('chartSalesBtn');
  const expenseBtn = document.getElementById('chartExpenseBtn');
  const profitBtn  = document.getElementById('chartProfitBtn');

  const pieCatBtn  = document.getElementById('pieCategoryBtn');
  const piePayBtn  = document.getElementById('piePaymentBtn');
  const pieProdBtn = document.getElementById('pieProductBtn');
  const pieLegend  = document.getElementById('pieLegendWrap');

  let growthData = null;
  let chart = null;
  let pieChart = null;
  let mode      = 'daily';     // default to daily 30-day view
  let chartType = 'sales';     // sales | expense | profit
  let pieMode   = 'categories'; // categories | payments

  const modeLabel = {
    daily:   '30-day trend',
    monthly: '12-month trend',
    yearly:  '5-year trend'
  };

  const palette = [
    '#10b981', '#6366f1', '#f59e0b', '#ec4899', '#3b82f6', '#8b5cf6', '#14b8a6', '#f97316'
  ];

  function formatTaka(v) {
    return '৳ ' + Number(v).toLocaleString('en-US', { maximumFractionDigits: 0 });
  }

  function getGradients(ctx) {
    const gGreen = ctx.createLinearGradient(0, 0, 0, 240);
    gGreen.addColorStop(0, '#10b981');
    gGreen.addColorStop(1, '#059669');

    const gRed = ctx.createLinearGradient(0, 0, 0, 240);
    gRed.addColorStop(0, '#ef4444');
    gRed.addColorStop(1, '#b91c1c');

    const gBlue = ctx.createLinearGradient(0, 0, 0, 240);
    gBlue.addColorStop(0, '#3b82f6');
    gBlue.addColorStop(1, '#1d4ed8');

    return {
      sales: gGreen,
      expense: gRed,
      profit: gBlue
    };
  }

  function renderGrowthChart() {
    const d   = growthData[mode];
    const key = chartType === 'sales' ? 'sales' : (chartType === 'expense' ? 'expenses' : 'profits');
    const labelText = chartType === 'sales' ? 'Sales / বিক্রি' : (chartType === 'expense' ? 'Expense / খরচ' : 'Profit / লাভ');
    const vals = d[key] || d.sales;

    const isUp = d.growth_percent >= 0;
    badgeEl.textContent = (isUp ? '▲ +' : '▼ ') + d.growth_percent + '% ' + modeLabel[mode];
    badgeEl.className   = 'badge rounded-pill px-3 py-1.5 ' + (isUp ? 'bg-success-subtle text-success border border-success-subtle' : 'bg-danger-subtle text-danger border border-danger-subtle');

    const ctx = chartEl.getContext('2d');
    const grads = getGradients(ctx);
    const mainGradient = grads[chartType];

    if (chart) chart.destroy();
    chart = new Chart(chartEl, {
      type: 'bar',
      data: {
        labels: d.labels,
        datasets: [{
          label: labelText,
          data: vals,
          backgroundColor: mainGradient,
          borderRadius: 5,
          borderSkipped: false,
          maxBarThickness: mode === 'daily' ? 18 : 34,
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
          legend: { display: false },
          tooltip: {
            padding: 10,
            cornerRadius: 8,
            callbacks: { label: (ctx) => ' ' + formatTaka(ctx.parsed.y) }
          }
        },
        scales: {
          x: {
            grid: { display: false },
            ticks: {
              font: { size: mode === 'daily' ? 10 : 11 },
              maxRotation: mode === 'daily' ? 45 : 0
            }
          },
          y: {
            beginAtZero: true,
            grid: { color: '#f1f5f9' },
            ticks: {
              callback: (v) => formatTaka(v),
              font: { size: 11 }
            }
          }
        }
      }
    });
  }

  function renderPieChart() {
    if (!pieChartEl || !growthData) return;
    const target = growthData[pieMode] || { labels: ['No Data'], values: [0] };
    const labels = target.labels.length ? target.labels : ['No Data'];
    const values = target.values.length ? target.values : [0];

    const totalVal = values.reduce((a, b) => a + b, 0) || 1;
    const bgColors = labels.map((_, idx) => palette[idx % palette.length]);

    if (pieChart) pieChart.destroy();
    pieChart = new Chart(pieChartEl, {
      type: 'doughnut',
      data: {
        labels: labels,
        datasets: [{
          data: values,
          backgroundColor: bgColors,
          borderWidth: 2,
          borderColor: '#ffffff',
          hoverOffset: 6
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        cutout: '72%',
        plugins: {
          legend: { display: false },
          tooltip: {
            padding: 10,
            cornerRadius: 8,
            callbacks: {
              label: function(ctx) {
                const val = ctx.parsed;
                const pct = ((val / totalVal) * 100).toFixed(1);
                return ' ' + ctx.label + ': ' + formatTaka(val) + ' (' + pct + '%)';
              }
            }
          }
        }
      }
    });

    // Custom HTML Legend render
    let legendHtml = '';
    labels.forEach((lbl, idx) => {
      const val = values[idx] || 0;
      const pct = ((val / totalVal) * 100).toFixed(0);
      const color = bgColors[idx];
      legendHtml += `
        <div class="pie-legend-item">
          <div class="d-flex align-items-center overflow-hidden">
            <span class="pie-color-dot" style="background-color: ${color}"></span>
            <span class="text-truncate fw-semibold text-dark" style="max-width: 130px;" title="${lbl}">${lbl}</span>
          </div>
          <span class="fw-bold text-dark font-monospace">${pct}%</span>
        </div>
      `;
    });
    pieLegend.innerHTML = legendHtml;
  }

  window.setGrowthMode = function (m) {
    mode = m;
    [dailyBtn, monthlyBtn, yearlyBtn].forEach(b => b && b.classList.remove('active'));
    if (m === 'daily' && dailyBtn) dailyBtn.classList.add('active');
    if (m === 'monthly' && monthlyBtn) monthlyBtn.classList.add('active');
    if (m === 'yearly' && yearlyBtn) yearlyBtn.classList.add('active');
    if (growthData) renderGrowthChart();
  };

  window.setChartType = function (t) {
    chartType = t;
    [salesBtn, expenseBtn, profitBtn].forEach(b => b && b.classList.remove('active'));
    if (t === 'sales' && salesBtn) salesBtn.classList.add('active');
    if (t === 'expense' && expenseBtn) expenseBtn.classList.add('active');
    if (t === 'profit' && profitBtn) profitBtn.classList.add('active');
    if (growthData) renderGrowthChart();
  };

  window.setPieMode = function (p) {
    pieMode = p;
    [pieCatBtn, piePayBtn, pieProdBtn].forEach(b => b && b.classList.remove('active'));
    if (p === 'categories' && pieCatBtn) pieCatBtn.classList.add('active');
    if (p === 'payments' && piePayBtn) piePayBtn.classList.add('active');
    if (p === 'products' && pieProdBtn) pieProdBtn.classList.add('active');
    if (growthData) renderPieChart();
  };

  fetch('/api/dashboard-growth')
    .then(r => r.json())
    .then(data => {
      growthData = data;
      renderGrowthChart();
      renderPieChart();
    })
    .catch(err => {
      console.error('Failed to load growth chart data:', err);
    });
})();
</script>
{% endblock %}