<?php /* reports/cashier_detail.php — Advanced Edition */
$sym = setting('currency_symbol','Rs.');
function curr2($v) { global $sym; return $sym.number_format((float)$v,2); }
$mClr = $margin>=20?'#16a34a':($margin>=10?'#d97706':'#dc2626');
?>
<?php include APP_PATH.'/views/partials/report_header.php'; ?>
<style>
.rpt-hero{background:#0f172a;border-radius:14px;padding:20px 26px;color:#fff;
  margin-bottom:18px;border:1px solid #1e293b;box-shadow:0 4px 20px rgba(0,0,0,.15)}
.rpt-hero .page-title{font-size:1.2rem;font-weight:800;display:flex;align-items:center;gap:10px;margin-bottom:4px}
.rpt-hero .page-meta{font-size:.78rem;color:#94a3b8;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rpt-hero .sep{color:#334155}
.hero-btn{border-radius:10px;font-weight:600;font-size:.8rem;padding:7px 14px;
  display:inline-flex;align-items:center;gap:6px;text-decoration:none;transition:all .15s;border:1px solid #334155;color:#94a3b8;background:transparent}
.hero-btn:hover{background:#1e293b;color:#fff;border-color:#475569}
.hero-back{background:#1e293b;color:#e2e8f0;border:1px solid #334155}
.hero-back:hover{background:#334155;color:#fff}

.kpi-tile{border-radius:12px;padding:16px 18px;height:100%;border:1.5px solid transparent}
.kpi-tile .kv{font-size:1.35rem;font-weight:900;line-height:1;margin-bottom:3px}
.kpi-tile .kl{font-size:.63rem;text-transform:uppercase;letter-spacing:.06em;font-weight:700;opacity:.75}
.kpi-tile .ks{font-size:.72rem;margin-top:5px;opacity:.8}

.date-btn{border-radius:8px;padding:4px 12px;font-size:.72rem;font-weight:600;
  border:1.5px solid #e2e8f0;background:#fff;color:#475569;text-decoration:none;transition:all .12s}
.date-btn.active,.date-btn:hover{background:#0f172a;color:#fff;border-color:#0f172a}

.status-pill{display:inline-flex;align-items:center;gap:4px;padding:5px 12px;
  border-radius:20px;font-size:.72rem;font-weight:700}

.inv-table th{font-size:.68rem;padding:8px 10px;white-space:nowrap}
.inv-table td{font-size:.77rem;padding:7px 10px;vertical-align:middle}
.inv-table tr:hover td{background:#fafbff}

.prog-bar{height:5px;border-radius:3px;background:#f1f5f9;overflow:hidden;margin-top:4px}
.prog-fill{height:5px;border-radius:3px}

.print-only{display:none}

@media print {
  @page{size:A4;margin:12mm 10mm}
  .no-print{display:none!important}
  .print-only{display:block!important}
  body{font-family:Arial,Helvetica,sans-serif;font-size:11pt;color:#000}
  .pdf-header{display:flex;justify-content:space-between;align-items:flex-start;
    padding-bottom:8pt;border-bottom:2pt solid #0f172a;margin-bottom:10pt}
  .pdf-header .shop-name{font-size:16pt;font-weight:900;color:#0f172a}
  .pdf-report-title{font-size:13pt;font-weight:800;color:#0f172a;margin-bottom:3pt}
  .pdf-meta{font-size:8.5pt;color:#475569}
  .pdf-kpi-row{display:flex;gap:0;margin:10pt 0;
    border:1pt solid #0f172a;border-radius:4pt;overflow:hidden}
  .pdf-kpi-cell{flex:1;padding:7pt 8pt;border-right:1pt solid #e2e8f0;text-align:center;background:#f8fafc}
  .pdf-kpi-cell:last-child{border-right:none}
  .pdf-kpi-val{font-size:11pt;font-weight:900;color:#0f172a;display:block}
  .pdf-kpi-lbl{font-size:6.5pt;text-transform:uppercase;letter-spacing:.04em;color:#64748b;display:block;margin-top:2pt}
  .pdf-status-row{display:flex;gap:6pt;margin-bottom:8pt}
  .pdf-status-cell{flex:1;padding:5pt 8pt;border-radius:4pt;text-align:center}
  .pdf-status-val{font-size:13pt;font-weight:900;display:block}
  .pdf-status-lbl{font-size:7pt;font-weight:700;text-transform:uppercase;display:block}
  .pdf-pmt-table{width:100%;border-collapse:collapse;font-size:9pt}
  .pdf-pmt-table th{background:#0f172a!important;color:#fff!important;padding:4pt 7pt;text-align:left;font-size:7.5pt;-webkit-print-color-adjust:exact;color-adjust:exact}
  .pdf-pmt-table td{padding:4pt 7pt;border-bottom:0.5pt solid #e2e8f0}
  .pdf-pmt-table .total-row td{font-weight:700;border-top:1.5pt solid #0f172a;border-bottom:none}
  .inv-table{width:100%;border-collapse:collapse;font-size:8pt}
  .inv-table th{background:#0f172a!important;color:#fff!important;padding:4.5pt 6pt;
    text-align:left;font-size:7pt;-webkit-print-color-adjust:exact;color-adjust:exact}
  .inv-table td{padding:4pt 6pt;border-bottom:0.4pt solid #e2e8f0}
  .inv-table .inv-row-even td{background:#fafafa!important}
  .inv-table tfoot td{font-weight:700;border-top:1.5pt solid #0f172a;
    background:#f1f5f9!important;-webkit-print-color-adjust:exact;color-adjust:exact}
  .card{break-inside:avoid;border:1pt solid #e2e8f0!important;border-radius:3pt!important;box-shadow:none!important;margin-bottom:8pt}
  .card-header{background:#f8fafc!important;color:#0f172a!important;border-bottom:1pt solid #e2e8f0!important;padding:5pt 10pt!important;font-size:8.5pt!important}
  .kpi-tile,.date-btn,.rpt-hero,.hero-btn,.status-pill,.prog-bar,.prog-fill{display:none!important}
  canvas{display:none!important}
}
</style>



<!-- PRINT-ONLY PDF HEADER -->
<div class="print-only">
  <div class="pdf-header">
    <div>
      <div class="shop-name"><?=e(setting('shop_name','MJPOS'))?></div>
      <div style="font-size:8pt;color:#475569;margin-top:2pt">
        <?=e(setting('shop_address',''))?><?php if(setting('shop_phone','')): ?> &middot; <?=e(setting('shop_phone',''))?><?php endif;?>
      </div>
      <div class="pdf-report-title" style="margin-top:8pt">Cashier Performance Report</div>
      <div class="pdf-meta">
        Cashier: <strong><?=e($cashier['name'])?></strong> (@<?=e($cashier['username'])?>)
        <?php if($cashier['phone']): ?> &middot; <?=e($cashier['phone'])?><?php endif;?>
        &nbsp;&middot;&nbsp; Period: <strong><?=date('d M Y',strtotime($from))?> &ndash; <?=date('d M Y',strtotime($to))?></strong> (<?=$days?> days)
        &nbsp;&middot;&nbsp; Printed: <?=date('d M Y H:i')?>
      </div>
    </div>
    <div style="font-size:8pt;color:#475569;text-align:right"><?=e(setting('shop_email',''))?></div>
  </div>

  <div class="pdf-kpi-row">
    <div class="pdf-kpi-cell">
      <span class="pdf-kpi-val"><?=number_format((int)$summary['bills'])?></span>
      <span class="pdf-kpi-lbl">Total Bills</span>
    </div>
    <div class="pdf-kpi-cell">
      <span class="pdf-kpi-val"><?=curr2($summary['total'])?></span>
      <span class="pdf-kpi-lbl">Revenue</span>
    </div>
    <div class="pdf-kpi-cell">
      <span class="pdf-kpi-val"><?=curr2($summary['gross_profit'])?></span>
      <span class="pdf-kpi-lbl">Gross Profit (<?=$margin?>%)</span>
    </div>
    <div class="pdf-kpi-cell">
      <span class="pdf-kpi-val"><?=curr2($summary['discount'])?></span>
      <span class="pdf-kpi-lbl">Discounts</span>
    </div>
    <div class="pdf-kpi-cell">
      <span class="pdf-kpi-val" style="color:<?=(float)$summary['balance']>0?'#dc2626':'#16a34a'?>">
        <?=(float)$summary['balance']>0?curr2($summary['balance']):'Clear'?>
      </span>
      <span class="pdf-kpi-lbl">Balance Due</span>
    </div>
    <div class="pdf-kpi-cell">
      <span class="pdf-kpi-val" style="color:#0891b2"><?=$margin?>%</span>
      <span class="pdf-kpi-lbl">Profit Margin</span>
    </div>
  </div>

  <div style="display:flex;gap:10pt;margin-bottom:10pt">
    <div style="flex:1;border:1pt solid #e2e8f0;border-radius:4pt;padding:8pt">
      <div style="font-size:7.5pt;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#475569;margin-bottom:6pt">Invoice Status</div>
      <div class="pdf-status-row">
        <?php foreach([
          ['#16a34a','#f0fdf4', (int)$summary['paid_count'],    'Paid'],
          ['#d97706','#fffbeb', (int)$summary['partial_count'], 'Partial'],
          ['#dc2626','#fef2f2', (int)$summary['due_count'],     'Due'],
          ['#6366f1','#f5f3ff', (int)$summary['return_count'],  'Returns'],
        ] as[$clr,$bg,$cnt,$lbl]):?>
        <div class="pdf-status-cell" style="background:<?=$bg?>">
          <span class="pdf-status-val" style="color:<?=$clr?>"><?=$cnt?></span>
          <span class="pdf-status-lbl" style="color:<?=$clr?>"><?=$lbl?></span>
        </div>
        <?php endforeach;?>
      </div>
    </div>
    <?php if(!empty($pmtTotals)): $pmtGrand=array_sum(array_column($pmtTotals,'total'));?>
    <div style="flex:1">
      <table class="pdf-pmt-table">
        <thead><tr><th>Payment Method</th><th style="text-align:right">Count</th><th style="text-align:right">Amount</th><th style="text-align:right">%</th></tr></thead>
        <tbody>
          <?php foreach($pmtTotals as $pm): $pct=$pmtGrand>0?round($pm['total']/$pmtGrand*100,1):0;?>
          <tr><td><?=ucfirst(str_replace('_',' ',$pm['payment_method']))?></td><td style="text-align:right"><?=$pm['count']?></td><td style="text-align:right;font-weight:600"><?=curr2($pm['total'])?></td><td style="text-align:right"><?=$pct?>%</td></tr>
          <?php endforeach;?>
          <tr class="total-row"><td>TOTAL</td><td></td><td style="text-align:right"><?=curr2($pmtGrand)?></td><td style="text-align:right">100%</td></tr>
        </tbody>
      </table>
    </div>
    <?php endif;?>
  </div>

  <div style="font-size:8.5pt;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
    color:#0f172a;border-bottom:1.5pt solid #0f172a;padding-bottom:4pt;margin-bottom:0">
    Invoice List &nbsp;&middot;&nbsp;
    <?=date('d M Y',strtotime($from))?> to <?=date('d M Y',strtotime($to))?>
    &nbsp;&middot;&nbsp; <?=count($invoices)?> records
  </div>
</div>
<!-- END PRINT-ONLY HEADER -->

<?= flashMessages() ?>

<!-- ── Filters ────────────────────────────────────────── -->
<div class="card mb-3 no-print">
  <div class="card-body py-2">
    <form method="GET" action="<?=APP_URL?>/reports/cashier/<?=$cashier['id']?>"
          class="d-flex gap-2 flex-wrap align-items-center">
      <input type="date" name="from" class="form-control form-control-sm"
             value="<?=e($from)?>" style="width:136px">
      <span class="text-muted small">to</span>
      <input type="date" name="to" class="form-control form-control-sm"
             value="<?=e($to)?>" style="width:136px">
      <select name="pmt" class="form-select form-select-sm" style="width:140px">
        <option value="all"     <?=$pmtFilter==='all'?    'selected':''?>>All Status</option>
        <option value="paid"    <?=$pmtFilter==='paid'?   'selected':''?>>✅ Paid</option>
        <option value="partial" <?=$pmtFilter==='partial'?'selected':''?>>⚠ Partial</option>
        <option value="due"     <?=$pmtFilter==='due'?    'selected':''?>>❌ Due</option>
      </select>
      <button class="btn btn-secondary btn-sm fw-semibold"><i class="bi bi-funnel me-1"></i>Filter</button>
      <?php foreach([
        'Today'      => [date('Y-m-d'),                         date('Y-m-d')],
        'This Week'  => [date('Y-m-d',strtotime('monday')),     date('Y-m-d')],
        'This Month' => [date('Y-m-01'),                        date('Y-m-d')],
        'Last Month' => [date('Y-m-01',strtotime('first day of last month')),
                         date('Y-m-t',strtotime('last month'))],
      ] as $lbl=>[$f,$t]):
        $act=($from===$f&&$to===$t);
      ?>
      <a href="?from=<?=$f?>&to=<?=$t?>&pmt=<?=e($pmtFilter)?>"
         class="date-btn <?=$act?'active':''?>"><?=$lbl?></a>
      <?php endforeach;?>
    </form>
  </div>
</div>

<!-- ── KPI Tiles ──────────────────────────────────────── -->
<div class="row g-3 mb-3">
  <div class="col-6 col-md-2">
    <div class="kpi-tile" style="background:#f5f3ff;border-color:#c4b5fd">
      <div class="kl" style="color:#7c3aed">Bills</div>
      <div class="kv" style="color:#7c3aed"><?=number_format((int)$summary['bills'])?></div>
      <div class="ks text-muted"><?=round($summary['bills']/$days,1)?>/day</div>
    </div>
  </div>
  <div class="col-6 col-md-2">
    <div class="kpi-tile" style="background:#eff6ff;border-color:#93c5fd">
      <div class="kl text-primary">Revenue</div>
      <div class="kv text-primary"><?=curr2($summary['total'])?></div>
      <div class="ks text-muted">Avg <?=curr2($summary['bills']>0?$summary['total']/$summary['bills']:0)?>/bill</div>
    </div>
  </div>
  <div class="col-6 col-md-2">
    <div class="kpi-tile" style="background:#ecfdf5;border-color:#6ee7b7">
      <div class="kl" style="color:#0891b2">Gross Profit</div>
      <div class="kv" style="color:#0891b2"><?=curr2($summary['gross_profit'])?></div>
      <div class="ks text-muted"><?=$margin?>% margin</div>
    </div>
  </div>
  <div class="col-6 col-md-2">
    <div class="kpi-tile" style="background:#fef2f2;border-color:#fca5a5">
      <div class="kl text-danger">Discounts</div>
      <div class="kv text-danger"><?=curr2($summary['discount'])?></div>
      <div class="ks text-muted">
        <?=$summary['total']>0?round($summary['discount']/$summary['total']*100,1):0?>% of sales
      </div>
    </div>
  </div>
  <div class="col-6 col-md-2">
    <div class="kpi-tile" style="background:<?=(float)$summary['balance']>0?'#fef2f2':'#f0fdf4'?>;
                                  border-color:<?=(float)$summary['balance']>0?'#fca5a5':'#86efac'?>">
      <div class="kl" style="color:<?=(float)$summary['balance']>0?'#dc2626':'#16a34a'?>">Balance Due</div>
      <div class="kv" style="color:<?=(float)$summary['balance']>0?'#dc2626':'#16a34a'?>">
        <?=(float)$summary['balance']>0?curr2($summary['balance']):'✅'?>
      </div>
    </div>
  </div>
</div>

<!-- ── Status pills + Charts ──────────────────────────── -->
<div class="row g-3 mb-3">

  <!-- Status + Payment Methods -->
  <div class="col-md-5">

    <!-- Status summary -->
    <div class="card mb-3">
      <div class="card-header fw-semibold small bg-transparent">
        <i class="bi bi-check-circle me-1 text-success"></i>Invoice Status Summary
      </div>
      <div class="card-body py-2">
        <div class="row g-2">
          <?php foreach([
            ['paid',    '#16a34a','#f0fdf4', $summary['paid_count'],    'Paid'],
            ['partial', '#d97706','#fffbeb', $summary['partial_count'], 'Partial'],
            ['due',     '#dc2626','#fef2f2', $summary['due_count'],     'Due'],
            ['returned','#6366f1','#f5f3ff', $summary['return_count'],  'Returns'],
          ] as[$k,$clr,$bg,$cnt,$lbl]):?>
          <div class="col-3 text-center">
            <div class="py-2 rounded" style="background:<?=$bg?>;border:1px solid <?=$clr?>22">
              <div class="fw-bold fs-5" style="color:<?=$clr?>"><?=$cnt?></div>
              <div style="font-size:.62rem;color:<?=$clr?>;font-weight:700"><?=$lbl?></div>
            </div>
          </div>
          <?php endforeach;?>
        </div>
      </div>
    </div>

    <!-- Payment Methods -->
    <div class="card">
      <div class="card-header fw-semibold small bg-transparent">
        <i class="bi bi-credit-card me-1 text-primary"></i>Payment Methods
      </div>
      <div class="card-body py-2">
        <?php if(!empty($pmtTotals)):
          $pmtGrand = array_sum(array_column($pmtTotals,'total'));
          $pmtIcons = ['cash'=>'💵','card'=>'💳','bank_transfer'=>'🏦',
                       'mobile'=>'📱','credit'=>'📒','cheque'=>'📝'];
          $pmtColors= ['cash'=>'#16a34a','card'=>'#1d4ed8','bank_transfer'=>'#0891b2',
                       'mobile'=>'#7c3aed','credit'=>'#d97706','cheque'=>'#64748b'];
          foreach($pmtTotals as $pm):
            $pct = $pmtGrand>0?round($pm['total']/$pmtGrand*100,1):0;
            $mc  = $pmtColors[$pm['payment_method']]??'#64748b';
        ?>
        <div class="mb-2">
          <div class="d-flex justify-content-between align-items-center mb-1">
            <span class="small fw-semibold" style="color:<?=$mc?>">
              <?=$pmtIcons[$pm['payment_method']]??'💰'?>
              <?=ucfirst(str_replace('_',' ',$pm['payment_method']))?>
            </span>
            <div class="text-end">
              <span class="fw-bold small"><?=curr2($pm['total'])?></span>
              <span class="text-muted" style="font-size:.65rem"> <?=$pct?>%</span>
            </div>
          </div>
          <div class="prog-bar">
            <div class="prog-fill" style="width:<?=$pct?>%;background:<?=$mc?>"></div>
          </div>
        </div>
        <?php endforeach;?>
        <?php else:?>
        <div class="text-center text-muted small py-2">No payment data</div>
        <?php endif;?>
      </div>
    </div>
  </div>

  <!-- Daily bar chart -->
  <div class="col-md-7 no-print">
    <div class="card h-100">
      <div class="card-header fw-semibold small bg-transparent">
        <i class="bi bi-bar-chart me-1 text-primary"></i>Daily Sales
      </div>
      <div class="card-body p-3">
        <?php if(!empty($daily)):?>
        <canvas id="dailyChart" height="120"></canvas>
        <?php else:?>
        <div class="text-center text-muted py-5 small">
          <i class="bi bi-bar-chart d-block fs-2 mb-2 opacity-25"></i>No daily data
        </div>
        <?php endif;?>
      </div>
    </div>
  </div>

</div>

<!-- ── Invoice List ───────────────────────────────────── -->
<div class="card">
  <div class="card-header bg-dark text-white d-flex justify-content-between align-items-center">
    <span class="fw-semibold small">
      <i class="bi bi-receipt me-1"></i>
      Invoices — <?=date('d M Y',strtotime($from))?> to <?=date('d M Y',strtotime($to))?>
    </span>
    <span class="badge bg-secondary"><?=count($invoices)?> records</span>
  </div>
  <div class="table-responsive">
    <table class="table table-sm table-hover mb-0 inv-table">
      <thead class="table-dark">
        <tr>
          <th class="ps-3">#</th>
          <th>Invoice</th>
          <th>Customer</th>
          <th>Date / Time</th>
          <th>Payment</th>
          <th class="text-end">Total</th>
          <th class="text-end">Balance</th>
          <th class="text-center">Status</th>
        </tr>
      </thead>
      <tbody>
        <?php if(empty($invoices)):?>
        <tr>
          <td colspan="8" class="text-center text-muted py-5">
            <i class="bi bi-receipt d-block fs-2 mb-2 opacity-25"></i>No invoices found
          </td>
        </tr>
        <?php endif;?>
        <?php foreach($invoices as $i=>$inv):
          $ps = $inv['payment_status'];
          $psClr = match($ps){
            'paid'   =>'#16a34a','partial'=>'#d97706',default=>'#dc2626'
          };
          $methods = array_filter(array_map('trim',explode(',',$inv['pmt_methods']??'')));
          $pmtIco  = ['cash'=>'💵','card'=>'💳','bank_transfer'=>'🏦',
                      'mobile'=>'📱','credit'=>'📒','cheque'=>'📝'];
        ?>
        <tr class="<?=($i%2===0)?'inv-row-even':''?>">
          <td class="ps-3 text-muted small"><?=$i+1?></td>
          <td>
            <a href="<?=APP_URL?>/sales/view/<?=$inv['id']?>"
               class="fw-semibold text-decoration-none text-dark small no-print">
              <?=e($inv['invoice_no'])?>
              <i class="bi bi-box-arrow-up-right ms-1" style="font-size:.5rem"></i>
            </a>
            <span class="print-only fw-semibold small"><?=e($inv['invoice_no'])?></span>
          </td>
          <td class="small"><?=e($inv['customer_name'])?></td>
          <td>
            <div class="small fw-semibold"><?=date('d M Y',strtotime($inv['sale_date']))?></div>
            <div style="font-size:.65rem;color:#94a3b8"><?=date('H:i',strtotime($inv['sale_date']))?></div>
          </td>
          <td>
            <?php foreach($methods as $m):?>
            <span style="font-size:.65rem"><?=$pmtIco[$m]??'💰'?></span>
            <?php endforeach;?>
            <span style="font-size:.68rem;color:#64748b">
              <?=implode(', ',array_map(fn($m)=>ucfirst(str_replace('_',' ',$m)),$methods))?>
            </span>
          </td>
          <td class="text-end fw-bold"><?=curr2($inv['total'])?></td>
          <td class="text-end">
            <?php
            $balAmt   = (float)$inv['balance'];
            $paidAmt  = (float)$inv['paid'];
            $totalAmt = (float)$inv['total'];
            $change   = round($paidAmt - $totalAmt, 2);
            if ($balAmt > 0.01):
            ?>
              <span style="color:#dc2626;font-weight:700"><?=curr2($balAmt)?></span>
            <?php elseif($change > 0.01): ?>
              <span style="color:#0891b2;font-size:.72rem">
                <i class="bi bi-arrow-left-right" style="font-size:.6rem"></i>
                <?=curr2($change)?>
              </span>
            <?php else: ?>
              <span style="color:#16a34a;font-size:.82rem">
                <i class="bi bi-check-circle-fill"></i>
              </span>
            <?php endif;?>
          </td>
          <td class="text-center">
            <span style="background:<?=$psClr?>12;color:<?=$psClr?>;border-radius:10px;
                         padding:2px 8px;font-size:.62rem;font-weight:700">
              <?=ucfirst($ps)?>
            </span>
          </td>
        </tr>
        <?php endforeach;?>
      </tbody>
      <?php if(!empty($invoices)):?>
      <tfoot class="table-secondary fw-bold" style="font-size:.73rem">
        <tr>
          <td colspan="5" class="ps-3">TOTAL (<?=count($invoices)?> invoices)</td>
          <td class="text-end"><?=curr2(array_sum(array_column($invoices,'total')))?></td>
          <td class="text-end">
            <?php $tb = array_sum(array_column($invoices,'balance')); ?>
            <?php if($tb > 0): ?>
              <span style="color:#dc2626"><?=curr2($tb)?></span>
            <?php else: ?>
              <span style="color:#16a34a">✅ —</span>
            <?php endif; ?>
          </td>
          <td></td>
        </tr>
      </tfoot>
      <?php endif;?>
    </table>
  </div>
</div>

<?php if(!empty($daily)):?>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script>
(function(){
  const labels  = <?=json_encode(array_map(fn($d)=>date('d M',strtotime($d['day'])),$daily))?>;
  const totals  = <?=json_encode(array_map(fn($d)=>(float)$d['total'],$daily))?>;
  const bills   = <?=json_encode(array_map(fn($d)=>(int)$d['bills'],$daily))?>;
  const maxV    = Math.max(...totals, 1);

  new Chart(document.getElementById('dailyChart'), {
    type: 'bar',
    data: {
      labels,
      datasets: [{
        data: totals,
        backgroundColor: totals.map(v => v === maxV ? '#4338ca' : '#6366f1'),
        borderRadius: 7,
        borderSkipped: false,
      }]
    },
    options: {
      plugins: {
        legend: { display: false },
        tooltip: {
          backgroundColor: '#0f172a',
          padding: 10,
          callbacks: {
            label: ctx => '  <?=$sym?> ' + ctx.parsed.y.toLocaleString() +
                          '  (' + bills[ctx.dataIndex] + ' bills)'
          }
        }
      },
      scales: {
        x: { grid: { display: false }, ticks: { font: { size: 10 } } },
        y: {
          beginAtZero: true,
          grid: { color: '#f1f5f9' },
          ticks: { callback: v => '<?=$sym?>' + v.toLocaleString(), font: { size: 10 } }
        }
      },
      responsive: true, animation: { duration: 500 }
    }
  });
})();
</script>
<?php endif;?>