@extends('layouts.main')

@section('content')
<style>
  /* ---- Cards ---- */
  .oc-card { border-radius:12px; padding:20px 24px; color:#fff; margin-bottom:16px; }
  .oc-card .oc-label { font-size:13px; opacity:.85; margin-bottom:4px; }
  .oc-card .oc-count { font-size:26px; font-weight:700; }
  .oc-card .oc-sub   { font-size:12px; opacity:.85; margin-top:2px; }
  .card-today  { background:linear-gradient(135deg,#1e88e5,#0d47a1); }
  .card-week   { background:linear-gradient(135deg,#43a047,#1b5e20); }
  .card-month  { background:linear-gradient(135deg,#fb8c00,#e65100); }
  .card-year   { background:linear-gradient(135deg,#8e24aa,#4a148c); }
  /* ---- Main 3 tabs ---- */
  .main-tabs { display:flex; gap:8px; margin:20px 0 0; flex-wrap:wrap; }
  .main-tab-btn { cursor:pointer; padding:11px 28px; border-radius:8px; background:#f0f2f5; font-size:14px; font-weight:600; border:2px solid transparent; transition:.2s; color:#555; }
  .main-tab-btn:hover { background:#e3edf7; color:#1e88e5; }
  .main-tab-btn.active { background:#1e88e5; color:#fff; border-color:#1565c0; }
  .main-tab-btn i { margin-left:6px; }
  .main-section { display:none; padding-top:20px; }
  .main-section.active { display:block; }
  /* ---- Period sub-tabs ---- */
  .period-tabs { display:flex; gap:6px; margin-bottom:16px; flex-wrap:wrap; }
  .period-btn { cursor:pointer; padding:7px 18px; border-radius:6px; background:#f7f7f7; font-size:12px; border:1px solid #ddd; color:#444; transition:.15s; }
  .period-btn.active { background:#1e88e5; color:#fff; border-color:#1e88e5; }
  .period-pane { display:none; }
  .period-pane.active { display:block; }
  /* ---- Titles & badges ---- */
  .sec-title { font-size:14px; font-weight:700; margin:0 0 14px; border-right:4px solid #1e88e5; padding-right:10px; color:#333; }
  .badge-up   { background:#e8f5e9; color:#2e7d32; border-radius:5px; padding:2px 7px; font-size:12px; }
  .badge-down { background:#ffebee; color:#c62828; border-radius:5px; padding:2px 7px; font-size:12px; }
  .badge-eq   { background:#f5f5f5; color:#555;    border-radius:5px; padding:2px 7px; font-size:12px; }
  .this-month-row { background:#fff8e1 !important; font-weight:700; }
</style>

<div class="col-lg-12 layout-spacing">
  <div class="statbox widget box box-shadow">
    <div class="widget-header">
      <div class="row">
        <div class="col-xl-12 col-md-12 col-sm-12 col-12 custom_add_button">
          <h4><i class="las la-truck" style="color:#1e88e5"></i> ڕاپۆرتی فرۆشی گەیاندن (ئۆنلاین)</h4>
          <a href="./statics" class="button_1" style="font-size:12px;padding:6px 14px;"><i class="las la-arrow-right"></i> گەڕانەوە</a>
        </div>
      </div>
    </div>

    <div class="widget-content widget-content-area">

      {{-- ========== Summary Cards ========== --}}
      <div class="row">
        <div class="col-md-3 col-sm-6">
          <div class="oc-card card-today">
            <div class="oc-label"><i class="las la-calendar-day"></i> ئەمرۆ</div>
            <div class="oc-count">{{ number_format($today->count ?? 0) }} <small style="font-size:13px">داواکاری</small></div>
            <div class="oc-sub">قازانج: {{ number_format($today->profit ?? 0) }} د.ع</div>
            <div class="oc-sub">گشتی: {{ number_format($today->total ?? 0) }} د.ع</div>
          </div>
        </div>
        <div class="col-md-3 col-sm-6">
          <div class="oc-card card-week">
            <div class="oc-label"><i class="las la-calendar-week"></i> ئەم هەفتەیە</div>
            <div class="oc-count">{{ number_format($this_week->count ?? 0) }} <small style="font-size:13px">داواکاری</small></div>
            <div class="oc-sub">قازانج: {{ number_format($this_week->profit ?? 0) }} د.ع</div>
            <div class="oc-sub">گشتی: {{ number_format($this_week->total ?? 0) }} د.ع</div>
          </div>
        </div>
        <div class="col-md-3 col-sm-6">
          <div class="oc-card card-month">
            <div class="oc-label"><i class="las la-calendar-alt"></i> ئەم مانگە</div>
            <div class="oc-count">{{ number_format($this_month->count ?? 0) }} <small style="font-size:13px">داواکاری</small></div>
            <div class="oc-sub">قازانج: {{ number_format($this_month->profit ?? 0) }} د.ع</div>
            <div class="oc-sub">گشتی: {{ number_format($this_month->total ?? 0) }} د.ع</div>
          </div>
        </div>
        <div class="col-md-3 col-sm-6">
          <div class="oc-card card-year">
            <div class="oc-label"><i class="las la-calendar"></i> ئەم ساڵە</div>
            <div class="oc-count">{{ number_format($this_year->count ?? 0) }} <small style="font-size:13px">داواکاری</small></div>
            <div class="oc-sub">قازانج: {{ number_format($this_year->profit ?? 0) }} د.ع</div>
            <div class="oc-sub">گشتی: {{ number_format($this_year->total ?? 0) }} د.ع</div>
          </div>
        </div>
      </div>

      {{-- ========== 3 Main Tabs ========== --}}
      <div class="main-tabs">
        <button class="main-tab-btn {{ $section==='sells'?'active':'' }}" onclick="switchMain('sells',this)">
          <i class="las la-chart-line"></i> فرۆشی ئۆنلاین
        </button>
        <button class="main-tab-btn {{ $section==='customers'?'active':'' }}" onclick="switchMain('customers',this)">
          <i class="las la-users"></i> کڕیارە ئۆنلاینەکان
        </button>
        <button class="main-tab-btn {{ $section==='compare'?'active':'' }}" onclick="switchMain('compare',this)">
          <i class="las la-balance-scale"></i> جیاوازی فرۆشی مانگانە
        </button>
      </div>

      {{-- ============================================================ --}}
      {{-- SECTION 1 : فرۆشی ئۆنلاین                                   --}}
      {{-- ============================================================ --}}
      <div id="sec-sells" class="main-section {{ $section==='sells'?'active':'' }}">
        <div class="period-tabs" style="margin-top:8px">
          <button class="period-btn active" onclick="switchPeriod('daily',this,'sells')">ڕۆژانە (٣٠ ڕۆژ)</button>
          <button class="period-btn" onclick="switchPeriod('weekly',this,'sells')">هەفتانە (١٦ هەفتە)</button>
          <button class="period-btn" onclick="switchPeriod('monthly',this,'sells')">مانگانە (٢٤ مانگ)</button>
          <button class="period-btn" onclick="switchPeriod('yearly',this,'sells')">ساڵانە</button>
        </div>

        {{-- Daily --}}
        <div id="sells-daily" class="period-pane active">
          <div class="sec-title">فرۆشی گەیاندن — ڕۆژانە (٣٠ ڕۆژی ڕابردوو)</div>
          @if($daily->count())
            <div id="chart-daily" style="height:300px;margin-bottom:14px"></div>
            <div class="table-responsive"><table class="table">
              <thead><tr>
                <th><div class="th-content">بەروار</div></th>
                <th><div class="th-content text-center">داواکاری</div></th>
                <th><div class="th-content text-center">گشتی (د.ع)</div></th>
                <th><div class="th-content text-center">قازانج (د.ع)</div></th>
              </tr></thead>
              <tbody>
                            @foreach($daily as $row)
                                <tr>
                  <td>{{ $row->date }}</td>
                  <td class="text-center">{{ $row->count }}</td>
                  <td class="text-center">{{ number_format($row->total) }}</td>
                  <td class="text-center">{{ number_format($row->profit) }}</td>
                </tr>
              @endforeach
              <tr style="font-weight:700;background:#f8f9fa">
                <td>کۆی گشتی</td>
                <td class="text-center">{{ $dc }} داواکاری</td>
                <td class="text-center">{{ number_format($dtt) }}</td>
                <td class="text-center">{{ number_format($dp) }}</td>
              </tr>
              </tbody>
            </table></div>
          @else
            <p class="text-center text-muted py-4">داتایەک نییە بۆ ٣٠ ڕۆژی ڕابردوو</p>
          @endif
        </div>

        {{-- Weekly --}}
        <div id="sells-weekly" class="period-pane">
          <div class="sec-title">فرۆشی گەیاندن — هەفتانە (١٦ هەفتەی ڕابردوو)</div>
          @if($weekly->count())
            <div id="chart-weekly" style="height:300px;margin-bottom:14px"></div>
            <div class="table-responsive"><table class="table">
              <thead><tr>
                <th><div class="th-content">هەفتە</div></th>
                <th><div class="th-content text-center">داواکاری</div></th>
                <th><div class="th-content text-center">گشتی (د.ع)</div></th>
                <th><div class="th-content text-center">قازانج (د.ع)</div></th>
              </tr></thead>
              <tbody>
                            @foreach($weekly as $row)
                                <tr>
                  <td>{{ $row->week_start }} (هەفتە {{ $row->week }})</td>
                  <td class="text-center">{{ $row->count }}</td>
                  <td class="text-center">{{ number_format($row->total) }}</td>
                  <td class="text-center">{{ number_format($row->profit) }}</td>
                </tr>
              @endforeach
              <tr style="font-weight:700;background:#f8f9fa">
                <td>کۆی گشتی</td>
                <td class="text-center">{{ $wc }} داواکاری</td>
                <td class="text-center">{{ number_format($wtt) }}</td>
                <td class="text-center">{{ number_format($wp) }}</td>
              </tr>
              </tbody>
            </table></div>
          @else
            <p class="text-center text-muted py-4">داتایەک نییە</p>
          @endif
        </div>

        {{-- Monthly --}}
        <div id="sells-monthly" class="period-pane">
          <div class="sec-title">فرۆشی گەیاندن — مانگانە (٢٤ مانگی ڕابردوو)</div>
          @if($monthly->count())
            <div id="chart-monthly" style="height:300px;margin-bottom:14px"></div>
            <div class="table-responsive"><table class="table">
              <thead><tr>
                <th><div class="th-content">مانگ</div></th>
                <th><div class="th-content text-center">داواکاری</div></th>
                <th><div class="th-content text-center">گشتی (د.ع)</div></th>
                <th><div class="th-content text-center">قازانج (د.ع)</div></th>
              </tr></thead>
              <tbody>
                            @foreach($monthly as $row)
                                <tr class="{{ $isc1?'this-month-row':'' }}">
                  <td>{{ $row->year }}-{{ str_pad($row->month,2,'0',STR_PAD_LEFT) }}
                    @if($isc1)<span style="font-size:11px;color:#fb8c00"> ← ئەم مانگە</span>@endif
                  </td>
                  <td class="text-center">{{ $row->count }}</td>
                  <td class="text-center">{{ number_format($row->total) }}</td>
                  <td class="text-center">{{ number_format($row->profit) }}</td>
                </tr>
              @endforeach
              <tr style="font-weight:700;background:#f8f9fa">
                <td>کۆی گشتی</td>
                <td class="text-center">{{ $mc }} داواکاری</td>
                <td class="text-center">{{ number_format($mtt) }}</td>
                <td class="text-center">{{ number_format($mp) }}</td>
              </tr>
              </tbody>
            </table></div>
          @else
            <p class="text-center text-muted py-4">داتایەک نییە</p>
          @endif
        </div>

        {{-- Yearly --}}
        <div id="sells-yearly" class="period-pane">
          <div class="sec-title">فرۆشی گەیاندن — ساڵانە</div>
          @if($yearly->count())
            <div id="chart-yearly" style="height:300px;margin-bottom:14px"></div>
            <div class="table-responsive"><table class="table">
              <thead><tr>
                <th><div class="th-content">ساڵ</div></th>
                <th><div class="th-content text-center">داواکاری</div></th>
                <th><div class="th-content text-center">گشتی (د.ع)</div></th>
                <th><div class="th-content text-center">قازانج (د.ع)</div></th>
              </tr></thead>
              <tbody>
                            @foreach($yearly as $row)
                                <tr>
                  <td>{{ $row->year }}</td>
                  <td class="text-center">{{ $row->count }}</td>
                  <td class="text-center">{{ number_format($row->total) }}</td>
                  <td class="text-center">{{ number_format($row->profit) }}</td>
                </tr>
              @endforeach
              <tr style="font-weight:700;background:#f8f9fa">
                <td>کۆی گشتی</td>
                <td class="text-center">{{ $yc }} داواکاری</td>
                <td class="text-center">{{ number_format($ytt) }}</td>
                <td class="text-center">{{ number_format($yp) }}</td>
              </tr>
              </tbody>
            </table></div>
          @else
            <p class="text-center text-muted py-4">داتایەک نییە</p>
          @endif
        </div>

        {{-- Recent 50 --}}
        <div class="sec-title" style="margin-top:28px">دوایین ٥٠ داواکاری گەیاندن</div>
        <div class="table-responsive"><table class="table">
          <thead><tr>
            <th>#</th>
            <th><div class="th-content">کڕیار</div></th>
            <th><div class="th-content text-center">مۆبایل</div></th>
            <th><div class="th-content text-center">گشتی (د.ع)</div></th>
            <th><div class="th-content text-center">قازانج (د.ع)</div></th>
            <th><div class="th-content text-center">کۆمپانیا</div></th>
            <th><div class="th-content text-center">بەروار</div></th>
            <th></th>
          </tr></thead>
          <tbody>
          @forelse($recent as $order)
            <tr>
              <td>{{ $order->id }}</td>
              <td>{{ optional($order->online_customer)->name ?? $order->name }}</td>
              <td class="text-center">{{ optional($order->online_customer)->phone ?? $order->phone }}</td>
              <td class="text-center">{{ number_format($order->real_total) }}</td>
              <td class="text-center" style="color:#388e3c;font-weight:700">{{ number_format($order->profit) }}</td>
              <td class="text-center">{{ optional($order->delivery->first())->company ?? '—' }}</td>
              <td class="text-center">{{ $order->created_at->format('Y-m-d') }}</td>
              <td class="text-center">
                <a href="../bill/{{ $order->id }}/edit" class="bs-tooltip font-20 text-primary" title="بینینی پسوڵە">
                  <i class="las la-eye"></i>
                </a>
              </td>
            </tr>
          @empty
            <tr><td colspan="8" class="text-center text-muted">هیچ داواکاریەک نییە</td></tr>
          @endforelse
          </tbody>
        </table></div>
      </div>{{-- /sec-sells --}}

      {{-- ============================================================ --}}
      {{-- SECTION 2 : کڕیارە ئۆنلاینەکان                             --}}
      {{-- ============================================================ --}}
      <div id="sec-customers" class="main-section {{ $section==='customers'?'active':'' }}">
        <div class="sec-title">چالاکترین کڕیارانی گەیاندن (٢٠ یەکەم)</div>
        @if($top_customers->count())
          <div class="row">
            <div class="col-md-5">
              <div id="chart-customers" style="height:380px"></div>
            </div>
            <div class="col-md-7">
              <div class="table-responsive"><table class="table">
                <thead><tr>
                  <th>#</th>
                  <th><div class="th-content">ناوی کڕیار</div></th>
                  <th><div class="th-content text-center">مۆبایل</div></th>
                  <th><div class="th-content text-center">داواکاری</div></th>
                  <th><div class="th-content text-center">گشتی (د.ع)</div></th>
                  <th><div class="th-content text-center">قازانج (د.ع)</div></th>
                </tr></thead>
                <tbody>
                @foreach($top_customers as $i => $cus)
                  <tr>
                    <td>{{ $i+1 }}</td>
                    <td>{{ optional($cus->online_customer)->name ?? '—' }}</td>
                    <td class="text-center">{{ optional($cus->online_customer)->phone ?? '—' }}</td>
                    <td class="text-center"><b>{{ $cus->count }}</b></td>
                    <td class="text-center">{{ number_format($cus->total) }}</td>
                    <td class="text-center" style="color:#388e3c;font-weight:700">{{ number_format($cus->profit) }}</td>
                  </tr>
                @endforeach
                </tbody>
              </table></div>
            </div>
          </div>
        @else
          <p class="text-center text-muted py-4">کڕیارێکی تۆمارکراو نییە</p>
        @endif
      </div>{{-- /sec-customers --}}

      {{-- ============================================================ --}}
      {{-- SECTION 3 : جیاوازی فرۆشی مانگانە                           --}}
      {{-- ============================================================ --}}
      <div id="sec-compare" class="main-section {{ $section==='compare'?'active':'' }}">
        <div class="sec-title">جیاوازی فرۆشی مانگانە — بەراوردی هەر مانگێک لەگەڵ مانگی پێشووی</div>
        @if($monthly->count() > 1)
          <div class="row" style="margin-bottom:10px">
            <div class="col-md-6">
              <div style="font-size:12px;color:#888;text-align:center;margin-bottom:4px">داواکاری بەپێی مانگ</div>
              <div id="chart-compare-count" style="height:280px"></div>
            </div>
            <div class="col-md-6">
              <div style="font-size:12px;color:#888;text-align:center;margin-bottom:4px">قازانج (د.ع) بەپێی مانگ</div>
              <div id="chart-compare-profit" style="height:280px"></div>
            </div>
          </div>
          <div style="font-size:12px;color:#888;margin-bottom:8px">
            <span style="display:inline-block;width:14px;height:14px;background:#fb8c00;border-radius:3px;vertical-align:middle;margin-left:4px"></span> ئەم مانگە &nbsp;&nbsp;
            <span style="display:inline-block;width:14px;height:14px;background:#1e88e5;border-radius:3px;vertical-align:middle;margin-left:4px"></span> مانگەکانی تر
          </div>
          <div class="table-responsive"><table class="table">
            <thead><tr>
              <th><div class="th-content">مانگ</div></th>
              <th><div class="th-content text-center">داواکاری</div></th>
              <th><div class="th-content text-center">گشتی (د.ع)</div></th>
              <th><div class="th-content text-center">قازانج (د.ع)</div></th>
              <th><div class="th-content text-center">گۆڕانی داواکاری</div></th>
              <th><div class="th-content text-center">گۆڕانی قازانج</div></th>
            </tr></thead>
            <tbody>
                        @foreach($monthly as $row)
                            <tr class="{{ $isc2 ? 'this-month-row' : '' }}">
                <td>{{ $ml }}@if($isc2)<span style="font-size:11px;color:#fb8c00"> ← ئەم مانگە</span>@endif</td>
                <td class="text-center">{{ $row->count }}</td>
                <td class="text-center">{{ number_format($row->total) }}</td>
                <td class="text-center">{{ number_format($row->profit) }}</td>
                <td class="text-center">
                  @if($dc2!==null)
                    @if($dc2>0)<span class="badge-up">▲ {{ $dc2 }} ({{ $pc2 }}%)</span>
                    @elseif($dc2<0)<span class="badge-down">▼ {{ abs($dc2) }} ({{ abs($pc2) }}%)</span>
                    @else<span class="badge-eq">— ماوەتەوە</span>@endif
                  @else—@endif
                </td>
                <td class="text-center">
                  @if($dp2!==null)
                    @if($dp2>0)<span class="badge-up">▲ {{ number_format($dp2) }} ({{ $pp2 }}%)</span>
                    @elseif($dp2<0)<span class="badge-down">▼ {{ number_format(abs($dp2)) }} ({{ abs($pp2) }}%)</span>
                    @else<span class="badge-eq">— ماوەتەوە</span>@endif
                  @else—@endif
                </td>
              </tr>
            @endforeach
            </tbody>
          </table></div>
        @else
          <p class="text-center text-muted py-4">داتای پێویست نییە بۆ بەراورد (کەمی دوو مانگ دەوێت)</p>
        @endif
      </div>{{-- /sec-compare --}}

    </div>{{-- widget-content --}}
  </div>{{-- statbox --}}
</div>{{-- col --}}

<script>
var CUR_YEAR = {{ date('Y') }}, CUR_MONTH = {{ date('n') }};

function switchMain(id, btn) {
  document.querySelectorAll('.main-section').forEach(s => s.classList.remove('active'));
  document.querySelectorAll('.main-tab-btn').forEach(b => b.classList.remove('active'));
  document.getElementById('sec-' + id).classList.add('active');
  btn.classList.add('active');
  if (id === 'compare') renderCompareCharts();
}
function switchPeriod(id, btn, prefix) {
  var p = document.getElementById('sec-' + prefix);
  p.querySelectorAll('.period-pane').forEach(s => s.classList.remove('active'));
  p.querySelectorAll('.period-btn').forEach(b => b.classList.remove('active'));
  document.getElementById(prefix + '-' + id).classList.add('active');
  btn.classList.add('active');
}

// Combo chart: bar orders + line profit
function buildCombo(elId, labels, counts, profits, hlIdx) {
  var el = document.querySelector('#' + elId);
  if (!el || !labels.length) return;
  new ApexCharts(el, {
    chart: { type:'bar', height:290, toolbar:{show:false}, fontFamily:'inherit' },
    series: [
      { name:'داواکاری',      type:'bar',  data: counts  },
      { name:'قازانج (د.ع)', type:'line', data: profits }
    ],
    xaxis: { categories: labels, labels:{ rotate:-35, style:{fontSize:'10px'} } },
    yaxis: [
      { title:{text:'داواکاری'}, labels:{formatter: v => Math.round(v)} },
      { opposite:true, title:{text:'قازانج'}, labels:{formatter: v => Number(v).toLocaleString()} }
    ],
    colors: ['#1e88e5','#43a047'],
    plotOptions:{ bar:{ borderRadius:4, columnWidth:'55%' } },
    dataLabels:{ enabled:false }, stroke:{ width:[0,3] },
    annotations: (hlIdx !== undefined && hlIdx >= 0) ? {
      xaxis:[{ x: labels[hlIdx], borderColor:'#fb8c00', strokeDashArray:0,
        label:{ text:'ئەم مانگە', style:{ color:'#fff', background:'#fb8c00' } } }]
    } : {},
    tooltip:{ y:[
      { formatter: v => v + ' داواکاری' },
      { formatter: v => Number(v).toLocaleString() + ' د.ع' }
    ]},
    legend:{ position:'top' }
  }).render();
}

// Distributed bar: one color per bar, highlight current month
function buildDistBar(elId, labels, data, hlIdx, suffix) {
  var el = document.querySelector('#' + elId);
  if (!el || !labels.length) return;
  var colors = labels.map(function(_, i) { return i === hlIdx ? '#fb8c00' : '#1e88e5'; });
  new ApexCharts(el, {
    chart: { type:'bar', height:270, toolbar:{show:false}, fontFamily:'inherit' },
    series: [{ name: suffix, data: data }],
    xaxis: { categories: labels, labels:{ rotate:-35, style:{fontSize:'10px'} } },
    yaxis: { labels:{ formatter: v => Number(v).toLocaleString() } },
    colors: colors,
    plotOptions:{ bar:{ borderRadius:4, columnWidth:'60%', distributed:true } },
    dataLabels:{ enabled:false }, legend:{ show:false },
    tooltip:{ y:{ formatter: v => Number(v).toLocaleString() + ' ' + suffix } }
  }).render();
}

// Donut for top customers
function buildDonut(elId, labels, data) {
  var el = document.querySelector('#' + elId);
  if (!el || !labels.length) return;
  new ApexCharts(el, {
    chart: { type:'donut', height:370, fontFamily:'inherit' },
    series: data, labels: labels,
    legend: { position:'bottom', fontSize:'11px' },
    dataLabels:{ enabled:true, formatter:(v,o)=> o.w.globals.series[o.seriesIndex] + ' د' },
    tooltip:{ y:{ formatter: v => v + ' داواکاری' } },
    plotOptions:{ pie:{ donut:{ size:'58%' } } }
  }).render();
}

// ---- Raw data from PHP ----
var daily   = {!! json_encode($daily->values()) !!};
var weekly  = {!! json_encode($weekly->values()) !!};
var monthly = {!! json_encode($monthly->values()) !!};
var yearly  = {!! json_encode($yearly->values()) !!};
var topCus  = {!! json_encode($top_customers->values()) !!};

var dLabels = daily.map(r => r.date);
var wLabels = weekly.map(r => r.week_start + ' (هـ' + r.week + ')');
var mLabels = monthly.map(r => r.year + '-' + String(r.month).padStart(2, '0'));
var yLabels = yearly.map(r => String(r.year));
var curLabel = CUR_YEAR + '-' + String(CUR_MONTH).padStart(2, '0');
var curMIdx  = mLabels.indexOf(curLabel);

// Section 1 charts
buildCombo('chart-daily',   dLabels, daily.map(r=>r.count),   daily.map(r=>r.profit));
buildCombo('chart-weekly',  wLabels, weekly.map(r=>r.count),  weekly.map(r=>r.profit));
buildCombo('chart-monthly', mLabels, monthly.map(r=>r.count), monthly.map(r=>r.profit), curMIdx);
buildCombo('chart-yearly',  yLabels, yearly.map(r=>r.count),  yearly.map(r=>r.profit));

// Section 2 donut
if (topCus.length) {
  var cusLabels = topCus.slice(0,10).map(r =>
    r.online_customer ? r.online_customer.name : ('کڕ ' + r.online_customer_id)
  );
  buildDonut('chart-customers', cusLabels, topCus.slice(0,10).map(r => r.count));
}

// Section 3 compare bars — lazy: render only when tab becomes visible
var compareRendered = false;
function renderCompareCharts() {
  if (compareRendered) return;
  compareRendered = true;
  buildDistBar('chart-compare-count',  mLabels, monthly.map(r=>r.count),  curMIdx, 'داواکاری');
  buildDistBar('chart-compare-profit', mLabels, monthly.map(r=>r.profit), curMIdx, 'د.ع');
}
// If compare section is already active on load (direct link ?section=compare)
if (document.getElementById('sec-compare').classList.contains('active')) {
  renderCompareCharts();
}
</script>
@endsection