<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Laporan GMV — <?php echo e($tahun); ?></title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet">
    <style>
        :root {
            --ink:        #0f172a;
            --ink-2:      #334155;
            --ink-3:      #64748b;
            --surface:    #ffffff;
            --surface-2:  #f8fafc;
            --surface-3:  #f1f5f9;
            --border:     #e2e8f0;
            --red:        #dc2626;
            --red-soft:   #fef2f2;
            --green:      #16a34a;
            --green-soft: #f0fdf4;
            --blue:       #1d4ed8;
            --blue-soft:  #eff6ff;
            --amber:      #d97706;
            --amber-soft: #fffbeb;
            --purple:     #7c3aed;
            --purple-soft:#f5f3ff;
            --r:          10px;
            --mono:       'JetBrains Mono', monospace;
        }

        * { box-sizing: border-box; }

        body {
            font-family: 'Inter', sans-serif;
            font-size: 12px;
            background: #f1f5f9;
            color: var(--ink);
            min-height: 100vh;
        }

        /* ── LAYOUT ── */
        .page-wrap { padding: 24px 28px 60px; max-width: 1600px; margin: 0 auto; }

        /* ── PAGE HEADER ── */
        .page-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            margin-bottom: 20px;
            gap: 16px;
            flex-wrap: wrap;
        }
        .page-title {
            font-size: 22px;
            font-weight: 700;
            letter-spacing: -.4px;
            color: var(--ink);
            margin: 0 0 3px;
            line-height: 1.2;
        }
        .page-sub { font-size: 11.5px; color: var(--ink-3); margin: 0; }

        /* ── FILTER CARD ── */
        .filter-card {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--r);
            padding: 16px 20px;
            margin-bottom: 20px;
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            align-items: flex-end;
        }
        .filter-label {
            font-size: 10px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .5px;
            color: var(--ink-3);
            margin-bottom: 6px;
        }
        .form-select-custom {
            border: 1.5px solid var(--border);
            border-radius: 7px;
            padding: 6px 10px;
            font-size: 11.5px;
            font-family: 'Inter', sans-serif;
            color: var(--ink);
            background: var(--surface);
            outline: none;
            transition: border-color .15s;
        }
        .form-select-custom:focus { border-color: var(--blue); }
        .check-pill {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            background: var(--surface-2);
            border: 1.5px solid var(--border);
            border-radius: 20px;
            padding: 4px 10px;
            cursor: pointer;
            transition: all .15s;
            font-size: 11.5px;
            font-weight: 500;
            user-select: none;
        }
        .check-pill input { accent-color: var(--blue); }
        .check-pill:has(input:checked) {
            background: var(--blue-soft);
            border-color: var(--blue);
            color: var(--blue);
            font-weight: 600;
        }
        .btn-filter {
            background: var(--ink);
            color: #fff;
            border: none;
            padding: 7px 18px;
            border-radius: 7px;
            font-size: 12px;
            font-weight: 600;
            font-family: 'Inter', sans-serif;
            cursor: pointer;
            transition: opacity .15s;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }
        .btn-filter:hover { opacity: .85; }
        .btn-export-xl {
            background: var(--green);
            color: #fff;
            border: none;
            padding: 7px 16px;
            border-radius: 7px;
            font-size: 12px;
            font-weight: 600;
            font-family: 'Inter', sans-serif;
            cursor: pointer;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            transition: opacity .15s;
        }
        .btn-export-xl:hover { opacity: .88; color: #fff; }

        /* Active month chips */
        .month-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; }
        .month-chip {
            background: var(--blue-soft);
            color: var(--blue);
            font-size: 10px;
            font-weight: 700;
            padding: 3px 10px;
            border-radius: 20px;
            letter-spacing: .3px;
            text-transform: uppercase;
        }

        /* ── SECTION LABEL ── */
        .section-label {
            font-size: 10px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: var(--ink-3);
            margin: 0 0 10px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .section-label::after {
            content: '';
            flex: 1;
            height: 2px;
            background: var(--ink);
            opacity: 0.15;
        }

        /* ── TABLE CARD ── */
        .tcard {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--r);
            overflow: hidden;
            margin-bottom: 20px;
            border-top: 3px solid var(--ink);
        }
        .tcard-scroll { overflow-x: auto; }

        /* ── TABLES ── */
        .tbl {
            border-collapse: collapse;
            width: 100%;
            font-size: 11.5px;
        }
        .tbl th, .tbl td {
            border-bottom: 1px solid var(--border);
            padding: 7px 13px;
            white-space: nowrap;
            vertical-align: middle;
        }
        .td-ch, .td-ch-link { white-space: normal; word-break: break-word; }
        .tbl thead tr:first-child th { border-bottom: none; }

        /* Group header rows */
        .th-group-red {
            background: #1e0a0a;
            color: #fca5a5;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: .6px;
            text-transform: uppercase;
            text-align: center;
            padding: 8px 13px;
        }
        .th-group-green {
            background: #071a0e;
            color: #86efac;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: .6px;
            text-transform: uppercase;
            text-align: center;
            padding: 8px 13px;
        }
        .th-group-purple {
            background: #130e2a;
            color: #c4b5fd;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: .6px;
            text-transform: uppercase;
            text-align: center;
            padding: 8px 13px;
        }

        /* Column header */
        .th-col {
            background: var(--surface-3);
            color: var(--ink-3);
            font-size: 10px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .4px;
            text-align: center;
            padding: 7px 13px;
        }

        /* Data rows */
        .tbl tbody tr:hover td { background: #f8faff; }
        .tbl tbody tr:last-of-type td { border-bottom: none; }
        .tbl tbody tr:nth-child(even) td { background: var(--surface-2); }
        .tbl tbody tr:nth-child(even):hover td { background: #f0f4ff; }

        /* ── LOCK GRAND TOTAL (ANTI OVERWRITE BOOTSTRAP STRIPING & HOVER) ── */
        .tbl tbody tr.tr-grand td,
        .tbl tbody tr.tr-grand:nth-child(even) td,
        .tbl tbody tr.tr-grand:hover td {
            background: #0f172a !important;
            color: #ffffff !important;
            font-weight: 700;
            font-size: 11.5px;
            border-bottom: none;
        }
        .tbl tbody tr.tr-grand td.td-label-grand {
            color: #94a3b8 !important;
        }
        .tbl tbody tr.tr-grand td.td-nominal-grand,
        .tbl tbody tr.tr-grand td.td-qty-grand {
            color: #fbbf24 !important;
            font-family: var(--mono);
        }
        .tbl tbody tr.tr-grand td.td-qty-grand {
            font-weight: 700;
            text-align: center;
        }

        /* Spacer column between month groups */
        .spacer-col { width: 10px; background: var(--surface-3) !important; border: none !important; padding: 0 !important; }

        /* Cell types */
        .td-no       { text-align: center; color: var(--ink-3); width: 32px; font-family: var(--mono); font-size: 10.5px; }
        .td-nominal  { text-align: right; font-family: var(--mono); font-weight: 600; color: var(--red); font-size: 11px; }
        .td-qty { text-align: center; font-family: var(--mono); font-weight: 600; color: var(--ink); }
        .td-ch       { font-weight: 600; color: var(--blue); }
        .td-ch-link  { font-weight: 600; color: var(--blue); cursor: pointer; text-decoration: none; }
        .td-ch-link:hover { color: #1e40af; background: var(--blue-soft); text-decoration: underline; }

        /* Rank badge */
        .rank-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            font-weight: 700;
            font-size: 11px;
            font-family: var(--mono);
        }
        .rank-1     { background: #fef3c7; color: #92400e; }
        .rank-2     { background: #e5e7eb; color: #374151; }
        .rank-3     { background: #fff7ed; color: #c2410c; }
        .rank-other { color: var(--ink-3); }

        /* Status badge */
        .status-badge {
            font-size: 9px;
            font-weight: 700;
            padding: 2px 8px;
            border-radius: 20px;
            text-transform: uppercase;
            letter-spacing: .3px;
        }
        .status-process { background: var(--green-soft); color: var(--green); }
        .status-reject  { background: var(--red-soft);   color: var(--red); }
        .status-pending { background: var(--amber-soft);  color: var(--amber); }

    </style>
</head>
<body>


<?php echo $__env->make('layouts.navbar', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>

<div class="page-wrap">

    
    <?php $totalAll = collect($gmvChannel)->sum('grand_total'); ?>
    <div class="page-header">
        <div>
            <p class="page-sub">Ringkasan & Benchmark</p>
            <h1 class="page-title">Laporan GMV</h1>
            <p class="page-sub">Tahun <?php echo e($tahun); ?> &middot; <?php echo e(date('d F Y')); ?></p>
        </div>
        <div style="background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:12px 22px;text-align:right;min-width:200px;border-left:4px solid #1d4ed8">
             <div style="font-size:10px;color:#94a3b8;text-transform:uppercase;letter-spacing:.05em;margin-bottom:3px">Grand Total GMV</div>
             <div style="font-size:22px;font-weight:700;color:#1d4ed8">Rp <?php echo e(number_format($totalAll, 0, ',', '.')); ?></div>
        </div>
    </div>

    
    <div class="filter-card">
        <form method="GET" action="<?php echo e(route('laporan.index')); ?>" class="d-flex flex-wrap gap-4 align-items-end w-100">
            <div>
                <div class="filter-label">📅 Tahun</div>
                <select name="tahun" class="form-select-custom" style="min-width:90px;font-weight:600">
                <?php for($y = date('Y') + 3; $y >= date('Y'); $y--): ?>
                    <option value="<?php echo e($y); ?>" <?php if($y == $tahun): echo 'selected'; endif; ?>><?php echo e($y); ?></option>
                    <?php endfor; ?>
                </select>
            </div>
            <div>
                <div class="filter-label">📊 Bulan GMV (multi)</div>
                <div class="d-flex flex-wrap gap-2">
                    <?php $__currentLoopData = $namaBulan; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $num => $nama): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <?php if(in_array($num, $bulanTersedia)): ?>
                        <label class="check-pill">
                            <input type="checkbox" name="bulan[]" value="<?php echo e($num); ?>" <?php if(in_array($num, $bulanDipilih)): echo 'checked'; endif; ?>>
                            <?php echo e(substr($nama, 0, 3)); ?>

                        </label>
                        <?php endif; ?>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </div>
            </div>
            <div>
                <div class="filter-label">📦 Bulan Qty & Channel Base</div>
                <select name="bulan_filter" class="form-select-custom" style="min-width:140px;font-weight:600">
                    <?php $__currentLoopData = $bulanTersedia; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $b): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <option value="<?php echo e($b); ?>" <?php if($b == $bulanFilter): echo 'selected'; endif; ?>><?php echo e($namaBulan[$b]); ?></option>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </select>
            </div>
            <div class="d-flex gap-2 align-items-end">
                <button type="submit" class="btn-filter">
                    <i class="ti ti-filter" style="font-size:14px"></i> Tampilkan
                </button>
                <a href="<?php echo e(route('laporan.exportCsv', request()->all())); ?>" class="btn-export-xl"
                   style="background:#16a34a">
                    <i class="ti ti-file-text" style="font-size:14px"></i> Export CSV
                </a>
                <a href="<?php echo e(route('laporan.export', request()->all())); ?>" class="btn-export-xl"
                   style="background:#1d4ed8">
                    <i class="ti ti-file-spreadsheet" style="font-size:14px"></i> Export Excel
                </a>
            </div>
        </form>
    </div>

    
    <div class="month-chips">
        <?php $__currentLoopData = $bulanDipilih; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $b): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
            <span class="month-chip"><?php echo e($namaBulan[$b]); ?></span>
        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
    </div>

    
    
    
    <div class="section-label">GMV per Channel</div>
    <div class="tcard mb-4">
        <div class="tcard-scroll">
            <table class="tbl">
                <thead>
                    <tr>
                        <?php $__currentLoopData = $bulanDipilih; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $bulan): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <th class="th-group-red" colspan="3" style="text-align:center">GMV — Channel · <?php echo e(strtoupper($namaBulan[$bulan])); ?></th>
                            <?php if(!$loop->last): ?><th class="spacer-col"></th><?php endif; ?>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </tr>
                    <tr>
                        <?php $__currentLoopData = $bulanDipilih; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $bulan): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <th class="th-col" style="min-width:50px">No</th>
                            <th class="th-col" style="min-width:180px">Channel</th>
                            <th class="th-col" style="min-width:170px">Nominal GMV</th>
                            <?php if(!$loop->last): ?><th class="spacer-col"></th><?php endif; ?>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </tr>
                </thead>
                <tbody>
                    <?php $maxCh = collect($bulanDipilih)->map(fn($b) => count($gmvChannel[$b]['rows'] ?? []))->max() ?: 0; ?>
                    <?php if($maxCh > 0): ?>
                        <?php for($i = 0; $i < $maxCh; $i++): ?>
                        <tr>
                            <?php $__currentLoopData = $bulanDipilih; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $bulan): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <td class="td-no"><?php echo e($i + 1); ?></td>
                                <?php $item = $gmvChannel[$bulan]['rows'][$i] ?? null; ?>
                                <td class="td-ch-link"
                                    onclick="bukaDetail(<?php echo e($item ? $item->channel_id : 0); ?>, '<?php echo e($item ? addslashes($item->channel->nama_channel ?? '') : ''); ?>', <?php echo e($tahun); ?>, <?php echo e($bulan); ?>)">
                                    <?php echo e($item ? ($item->channel->nama_channel ?? 'Channel ' . $item->channel_id) : ''); ?>

                                </td>
                                <td class="td-nominal"><?php echo e($item ? 'Rp ' . number_format($item->total_gmv, 0, ',', '.') : ''); ?></td>
                                <?php if(!$loop->last): ?><td class="spacer-col"></td><?php endif; ?>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        </tr>
                        <?php endfor; ?>
                    <?php else: ?>
                        <tr>
                            <td colspan="<?php echo e(count($bulanDipilih) * 4); ?>" class="text-center p-4 text-muted">Tidak ada data transaksi per Channel pada bulan ini.</td>
                        </tr>
                    <?php endif; ?>
                    <tr class="tr-grand">
                        <?php $__currentLoopData = $bulanDipilih; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $bulan): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <td></td>
                            <td class="td-label-grand" style="text-align:center;font-size:10px;text-transform:uppercase;letter-spacing:.5px">Grand Total</td>
                            <td class="td-nominal-grand" style="text-align:right">Rp <?php echo e(number_format($gmvChannel[$bulan]['grand_total'] ?? 0, 0, ',', '.')); ?></td>
                            <?php if(!$loop->last): ?><td class="spacer-col" style="background:#0f172a!important"></td><?php endif; ?>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    
    
    
    <div class="section-label">GMV Individu (Rank)</div>
    <div class="tcard mb-4">
        <table class="tbl">
            <thead>
                <tr>
                    <th class="th-group-purple" colspan="3">GMV — Individu</th>
                </tr>
                <tr>
                    <th class="th-col" style="width:70px">Rank</th>
                    <th class="th-col">CS / Admin</th>
                    <th class="th-col" style="min-width:200px; text-align:right;">Nominal GMV</th>
                </tr>
            </thead>
            <tbody>
                <?php if(count($gmvIndividu) > 0): ?>
                    <?php $__currentLoopData = $gmvIndividu; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $idx => $row): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <tr>
                        <td class="td-no">
                            <?php if($idx < 3): ?>
                                <span class="rank-badge rank-<?php echo e($idx + 1); ?>"><?php echo e($idx + 1); ?></span>
                            <?php else: ?>
                                <span class="rank-other"><?php echo e($idx + 1); ?></span>
                            <?php endif; ?>
                        </td>
                        <td style="font-weight:600">
                            <?php if($idx === 0): ?> 🥇 <?php elseif($idx === 1): ?> 🥈 <?php elseif($idx === 2): ?> 🥉 <?php endif; ?>
                            <?php echo e($row->nama_cs); ?>

                        </td>
                        <td class="td-nominal">Rp <?php echo e(number_format($row->total_gmv, 0, ',', '.')); ?></td>
                    </tr>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                <?php else: ?>
                    <tr>
                        <td colspan="3" class="text-center p-4 text-muted">Tidak ada data performa CS/Admin pada bulan ini.</td>
                    </tr>
                <?php endif; ?>
                <tr class="tr-grand">
                    <td></td>
                    <td class="td-label-grand" style="text-align:center;font-size:10px;text-transform:uppercase;letter-spacing:.5px">Grand Total</td>
                    <td class="td-nominal-grand" style="text-align:right">Rp <?php echo e(number_format($gmvIndividu->sum('total_gmv'), 0, ',', '.')); ?></td>
                </tr>
            </tbody>
        </table>
    </div>

    
    
    <div class="section-label">GMV per Base Customer (Tipe Pembelian)</div>
    <div class="tcard mb-4">
        <div class="tcard-scroll">
            <table class="tbl">
                <thead>
                    <tr>
                        <?php $__currentLoopData = $bulanDipilih; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $bulan): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <th class="th-group-red" colspan="4" style="text-align:center">GMV — Base Customer · <?php echo e(strtoupper($namaBulan[$bulan])); ?></th>
                            <?php if(!$loop->last): ?><th class="spacer-col"></th><?php endif; ?>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </tr>
                    <tr>
                        <?php $__currentLoopData = $bulanDipilih; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $bulan): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <th class="th-col" style="min-width:40px">No</th>
                            <th class="th-col" style="min-width:150px">Tipe Pembelian</th>
                            <th class="th-col" style="min-width:90px">Total Beli</th>
                            <th class="th-col" style="min-width:160px">Nominal GMV</th>
                            <?php if(!$loop->last): ?><th class="spacer-col"></th><?php endif; ?>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </tr>
                </thead>
                <tbody>
                    <?php
                        $maxTipe = collect($bulanDipilih)->map(function($b) use ($gmvBaseCust) {
                            if (isset($gmvBaseCust[$b]['rows'])) {
                                return count($gmvBaseCust[$b]['rows']);
                            }
                            return count(collect($gmvBaseCust[$b] ?? [])->except('grand_total'));
                        })->max() ?: 0;
                    ?>

                    <?php if($maxTipe > 0): ?>
                        <?php for($i = 0; $i < $maxTipe; $i++): ?>
                        <tr>
                            <?php $__currentLoopData = $bulanDipilih; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $bulan): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <?php 
                                    if (isset($gmvBaseCust[$bulan]['rows'])) {
                                        $item = $gmvBaseCust[$bulan]['rows'][$i] ?? null;
                                    } else {
                                        $filteredItems = collect($gmvBaseCust[$bulan] ?? [])->except('grand_total')->values();
                                        $item = $filteredItems[$i] ?? null;
                                    }
                                ?>

                                <td class="td-no"><?php echo e($item ? $i + 1 : ''); ?></td>
                                <td style="font-weight:600">
                                    <?php if($item): ?>
                                        <?php
                                            $tipeLabel = [
                                                'NL-CS'  => 'New Leads - CS',
                                                'NEW'    => 'New Customer',
                                                'RC-CS'  => 'Repeat Customer - CS',
                                                'REPEAT' => 'Repeat Customer',
                                            ][$item->tipe_pembelian] ?? $item->tipe_pembelian;
                                        ?>
                                        <span style="font-size:10px;background:#f1f5f9;padding:2px 7px;border-radius:4px;font-family:var(--mono)"><?php echo e($item->tipe_pembelian); ?></span>
                                        <span style="font-size:11px;color:var(--ink-3);margin-left:4px"><?php echo e($tipeLabel); ?></span>
                                    <?php endif; ?>
                                </td>
                                <td class="td-qty">
                                    <?php echo e($item ? number_format($item->total_beli ?? $item->total_transaksi ?? $item->jumlah_transaksi ?? 0, 0, ',', '.') : ''); ?>

                                </td>
                                <td class="td-nominal"><?php echo e($item ? 'Rp ' . number_format($item->total_gmv, 0, ',', '.') : ''); ?></td>
                                <?php if(!$loop->last): ?><td class="spacer-col"></td><?php endif; ?>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        </tr>
                        <?php endfor; ?>
                    <?php else: ?>
                        <tr>
                            <td colspan="<?php echo e(count($bulanDipilih) * 5); ?>" class="text-center p-4 text-muted">Tidak ada data base customer pada bulan ini.</td>
                        </tr>
                    <?php endif; ?>
                    <tr class="tr-grand">
                        <?php $__currentLoopData = $bulanDipilih; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $bulan): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <?php
                                if (isset($gmvBaseCust[$bulan]['rows'])) {
                                    $rowsData = $gmvBaseCust[$bulan]['rows'];
                                } else {
                                    $rowsData = collect($gmvBaseCust[$bulan] ?? [])->except('grand_total')->values();
                                }

                                $subTotalBeli = collect($rowsData)->sum(function($q) {
                                    return $q->total_beli ?? $q->total_transaksi ?? $q->jumlah_transaksi ?? 0;
                                });
                            ?>
                            <td></td>
                            <td class="td-label-grand" style="text-align:center;font-size:10px;text-transform:uppercase;letter-spacing:.5px">Grand Total</td>
                            <td class="td-qty-grand"><?php echo e(number_format($subTotalBeli, 0, ',', '.')); ?></td>
                            <td class="td-nominal-grand" style="text-align:right">Rp <?php echo e(number_format($gmvBaseCust[$bulan]['grand_total'] ?? 0, 0, ',', '.')); ?></td>
                            <?php if(!$loop->last): ?><td class="spacer-col" style="background:#0f172a!important"></td><?php endif; ?>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    
    <div class="section-label">Toples, Mini, Pouch — CS & Channel · <?php echo e($namaBulan[$bulanFilter] ?? 'Bulan Pilihan'); ?></div>
    <div class="tcard mb-4">
        <div class="tcard-scroll">
            <table class="tbl">
                <thead>
                    <tr>
                        <th class="th-group-purple" colspan="8">
                            Toples, Mini, Pouch — CS & Channel · <?php echo e(strtoupper($namaBulan[$bulanFilter] ?? 'PILIHAN')); ?>

                        </th>
                    </tr>
                    <tr>
                        <th class="th-col" style="min-width:120px">CS/Admin</th>
                        <th class="th-col" style="min-width:130px">Channel</th>
                        <th class="th-col" style="min-width:110px">Kue Keranjang</th>
                        <th class="th-col" style="min-width:90px">Cookies</th>
                        <th class="th-col" style="min-width:90px">Toples</th>
                        <th class="th-col" style="min-width:80px">Mini</th>
                        <th class="th-col" style="min-width:80px">Pouch</th>
                        <th class="th-col" style="min-width:90px">Total</th>
                    </tr>
                </thead>
                <tbody>
                    <?php $gkue=$gcook=$gtop=$gmin=$gpou=$gtot=0; ?>
                    <?php if(count($qtyCs) > 0): ?>
                        <?php $__currentLoopData = $qtyCs; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $row): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <tr>
                            <td style="font-weight:600"><?php echo e($row->nama_cs ?? ''); ?></td>
                            <td class="td-ch"><?php echo e($row->channel->nama_channel ?? ''); ?></td>
                            <td class="td-qty"><?php echo e(number_format($row->s_kue ?? 0)); ?></td>
                            <td class="td-qty"><?php echo e(number_format($row->s_cookies ?? 0)); ?></td>
                            <td class="td-qty" style="font-weight:700"><?php echo e(number_format($row->s_toples ?? 0)); ?></td>
                            <td class="td-qty"><?php echo e(number_format($row->s_mini ?? 0)); ?></td>
                            <td class="td-qty"><?php echo e(number_format($row->s_pouch ?? 0)); ?></td>
                            <td class="td-qty" style="font-weight:700;color:var(--blue)"><?php echo e(number_format($row->s_total ?? 0)); ?></td>
                        </tr>
                        <?php $gkue+=$row->s_kue; $gcook+=$row->s_cookies; $gtop+=$row->s_toples; $gmin+=$row->s_mini; $gpou+=$row->s_pouch; $gtot+=$row->s_total; ?>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    <?php else: ?>
                        <tr>
                            <td colspan="8" class="text-center p-4 text-muted">Tidak ada data kuantitas produk berdasarkan CS pada bulan ini.</td>
                        </tr>
                    <?php endif; ?>
                    <tr class="tr-grand">
                        <td></td>
                        <td class="td-label-grand" style="text-align:center;font-size:10px;text-transform:uppercase;letter-spacing:.5px">Grand Total</td>
                        <td class="td-qty-grand"><?php echo e(number_format($gkue)); ?></td>
                        <td class="td-qty-grand"><?php echo e(number_format($gcook)); ?></td>
                        <td class="td-qty-grand"><?php echo e(number_format($gtop)); ?></td>
                        <td class="td-qty-grand"><?php echo e(number_format($gmin)); ?></td>
                        <td class="td-qty-grand"><?php echo e(number_format($gpou)); ?></td>
                        <td class="td-qty-grand"><?php echo e(number_format($gtot)); ?></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    
    <div class="section-label">Toples, Mini, Pouch — Channel · <?php echo e($namaBulan[$bulanFilter] ?? 'Bulan Pilihan'); ?></div>
    <div class="tcard mb-4">
        <div class="tcard-scroll">
            <table class="tbl">
                <thead>
                    <tr>
                        <th class="th-group-green" colspan="7">
                            Toples, Mini, Pouch — Channel · <?php echo e(strtoupper($namaBulan[$bulanFilter] ?? 'PILIHAN')); ?>

                        </th>
                    </tr>
                    <tr>
                        <th class="th-col" style="min-width:140px">Channel</th>
                        <th class="th-col" style="min-width:110px">Kue Keranjang</th>
                        <th class="th-col" style="min-width:90px">Cookies</th>
                        <th class="th-col" style="min-width:90px">Toples</th>
                        <th class="th-col" style="min-width:80px">Mini</th>
                        <th class="th-col" style="min-width:80px">Pouch</th>
                        <th class="th-col" style="min-width:90px">Total</th>
                    </tr>
                </thead>
                <tbody>
                    <?php $gk2=$gc2=$gt2=$gm2=$gp2=$ga2=0; ?>
                    <?php if(count($qtyChannel) > 0): ?>
                        <?php $__currentLoopData = $qtyChannel; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $row): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <tr>
                            <td class="td-ch"><?php echo e($row->channel->nama_channel ?? ''); ?></td>
                            <td class="td-qty"><?php echo e(number_format($row->s_kue ?? 0)); ?></td>
                            <td class="td-qty"><?php echo e(number_format($row->s_cookies ?? 0)); ?></td>
                            <td class="td-qty" style="font-weight:700"><?php echo e(number_format($row->s_toples ?? 0)); ?></td>
                            <td class="td-qty"><?php echo e(number_format($row->s_mini ?? 0)); ?></td>
                            <td class="td-qty"><?php echo e(number_format($row->s_pouch ?? 0)); ?></td>
                            <td class="td-qty" style="font-weight:700;color:var(--blue)"><?php echo e(number_format($row->s_total ?? 0)); ?></td>
                        </tr>
                        <?php $gk2+=$row->s_kue; $gc2+=$row->s_cookies; $gt2+=$row->s_toples; $gm2+=$row->s_mini; $gp2+=$row->s_pouch; $ga2+=$row->s_total; ?>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    <?php else: ?>
                        <tr>
                            <td colspan="7" class="text-center p-4 text-muted">Tidak ada data kuantitas produk berdasarkan Channel pada bulan ini.</td>
                        </tr>
                    <?php endif; ?>
                    <tr class="tr-grand">
                        <td class="td-label-grand" style="text-align:center;font-size:10px;text-transform:uppercase;letter-spacing:.5px">Grand Total</td>
                        <td class="td-qty-grand"><?php echo e(number_format($gk2)); ?></td>
                        <td class="td-qty-grand"><?php echo e(number_format($gc2)); ?></td>
                        <td class="td-qty-grand"><?php echo e(number_format($gt2)); ?></td>
                        <td class="td-qty-grand"><?php echo e(number_format($gm2)); ?></td>
                        <td class="td-qty-grand"><?php echo e(number_format($gp2)); ?></td>
                        <td class="td-qty-grand"><?php echo e(number_format($ga2)); ?></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

</div>



<style>
/* ── MODAL REDESIGN ── */
#modalDetail .modal-content {
    border: none;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0,0,0,.18);
}
.modal-head {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    padding: 20px 24px 16px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255,255,255,.07);
}
.modal-head-left { display:flex; align-items:center; gap:14px; }
.modal-head-icon {
    width: 40px; height: 40px;
    border-radius: 10px;
    background: rgba(255,255,255,.08);
    display: flex; align-items:center; justify-content:center;
    color: #94a3b8; font-size: 18px; flex-shrink:0;
}
.modal-head-title { font-size:15px; font-weight:700; color:#f1f5f9; line-height:1.3; }
.modal-head-sub   { font-size:11px; color:#64748b; margin-top:3px; font-family:var(--mono); }
.modal-close-btn {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
    color: #94a3b8;
    width: 32px; height: 32px;
    border-radius: 8px;
    cursor: pointer;
    display: flex; align-items:center; justify-content:center;
    font-size: 16px;
    transition: background .15s;
    flex-shrink: 0;
}
.modal-close-btn:hover { background: rgba(255,255,255,.12); color: #f1f5f9; }

.modal-filter-bar {
    background: #f8fafc;
    border-bottom: 1px solid var(--border);
    padding: 12px 20px;
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.modal-select {
    height: 34px;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0 10px;
    font-size: 12px;
    font-family: 'Inter', sans-serif;
    color: var(--ink);
    background: #fff;
    cursor: pointer;
    outline: none;
    transition: border-color .15s;
}
.modal-select:focus { border-color: var(--blue); }
.modal-filter-btn {
    height: 34px;
    padding: 0 14px;
    background: var(--ink);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    display: flex; align-items:center; gap:5px;
    transition: opacity .15s;
}
.modal-filter-btn:hover { opacity: .85; }
.modal-loading-chip {
    display: none;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--ink-3);
    padding: 0 10px;
    height: 34px;
    border-radius: 8px;
    background: var(--surface-3);
    font-style: italic;
}

/* Summary chips */
.modal-summary-bar {
    padding: 10px 20px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--border);
    background: #fff;
}
.summary-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 10.5px;
    font-weight: 600;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--ink-2);
}
.summary-chip i { font-size: 12px; color: var(--ink-3); }
.summary-chip.chip-gmv  { background: #fef2f2; border-color: #fecaca; color: #dc2626; }
.summary-chip.chip-trx  { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
.summary-chip.chip-toples {
    background: #f0fdf4; border-color: #bbf7d0; color: #16a34a;
    cursor: pointer; position: relative;
}
.summary-chip.chip-toples:hover { background: #dcfce7; }

/* Tooltip produk */
.prod-tooltip {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    background: #0f172a;
    border: 1px solid #1e293b;
    border-radius: 10px;
    padding: 10px 14px;
    min-width: 160px;
    z-index: 9999;
    box-shadow: 0 8px 24px rgba(0,0,0,.25);
    pointer-events: none;
}
.prod-tooltip::before {
    content: '';
    position: absolute;
    top: -5px; left: 16px;
    width: 9px; height: 9px;
    background: #0f172a;
    border-left: 1px solid #1e293b;
    border-top: 1px solid #1e293b;
    transform: rotate(45deg);
}
.prod-tooltip-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 3px 0;
    font-size: 11px;
    color: #94a3b8;
    border-bottom: 1px solid #1e293b;
}
.prod-tooltip-row:last-child { border-bottom: none; }
.prod-tooltip-row .pt-label { font-weight: 500; }
.prod-tooltip-row .pt-val   { font-family: var(--mono); font-weight: 700; color: #e2e8f0; }
.summary-chip.chip-toples:hover .prod-tooltip { display: block; }

/* Table */
.modal-table-wrap {
    overflow-x: auto;
    max-height: 400px;
    overflow-y: auto;
}
.tbl-detail-new {
    width: 100%;
    border-collapse: collapse;
    font-size: 11.5px;
}
.tbl-detail-new thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #1e293b;
    color: #94a3b8;
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: 9px 12px;
    border-bottom: 2px solid #0f172a;
    white-space: nowrap;
}
.tbl-detail-new thead th.th-ctr { text-align: center; }
.tbl-detail-new thead th.th-right { text-align: right; }
.tbl-detail-new tbody td {
    padding: 9px 12px;
    border-bottom: 1px solid #f1f5f9;
    color: var(--ink-2);
    vertical-align: middle;
}
.tbl-detail-new tbody tr:last-child td { border-bottom: none; }
.tbl-detail-new tbody tr:hover td { background: #f8faff !important; }
.tbl-detail-new tbody tr:nth-child(even) td { background: #fafbfd; }
.tbl-detail-new .tc { text-align: center; font-family: var(--mono); }
.tbl-detail-new .tr { text-align: right; font-family: var(--mono); }
.tbl-detail-new .td-cs { font-weight: 600; color: var(--ink); }
.tbl-detail-new .td-date { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); }
.tbl-detail-new .td-gmv { text-align:right; font-family:var(--mono); font-weight:700; color:#dc2626; }
.tbl-detail-new .td-qty-hi { text-align:center; font-family:var(--mono); font-weight:700; color:#0f172a; }
.tbl-detail-new .td-qty-lo { text-align:center; font-family:var(--mono); color:#64748b; }
.tbl-detail-new .td-reject { text-align:center; font-family:var(--mono); color:#dc2626; }

/* Status pills in modal */
.mpill {
    display: inline-flex; align-items:center; gap:4px;
    font-size: 9px; font-weight: 700;
    padding: 3px 9px; border-radius: 20px;
    text-transform: uppercase; letter-spacing: .3px;
    white-space: nowrap;
}
.mpill::before { content:''; width:5px; height:5px; border-radius:50%; flex-shrink:0; }
.mpill-ok   { background:#f0fdf4; color:#15803d; border:1px solid #bbf7d0; }
.mpill-ok::before { background:#22c55e; }
.mpill-ship { background:#eff6ff; color:#1d4ed8; border:1px solid #bfdbfe; }
.mpill-ship::before { background:#3b82f6; }
.mpill-done { background:#f5f3ff; color:#7c3aed; border:1px solid #ddd6fe; }
.mpill-done::before { background:#8b5cf6; }
.mpill-rej  { background:#fef2f2; color:#dc2626; border:1px solid #fecaca; }
.mpill-rej::before  { background:#ef4444; }
.mpill-pend { background:#fffbeb; color:#d97706; border:1px solid #fde68a; }
.mpill-pend::before { background:#f59e0b; }

/* Subtotal footer */
.tbl-detail-new tfoot tr td {
    background: #0f172a !important;
    color: #94a3b8;
    font-size: 10px;
    font-weight: 700;
    padding: 9px 12px;
    text-transform: uppercase;
    letter-spacing: .4px;
    border: none;
}
.tbl-detail-new tfoot .tfoot-gmv { color: #fbbf24 !important; text-align:right; font-family:var(--mono); }
.tbl-detail-new tfoot .tfoot-qty { color: #e2e8f0 !important; text-align:center; font-family:var(--mono); font-weight:700; }
.tbl-detail-new tfoot .tfoot-rej { color: #fca5a5 !important; text-align:center; font-family:var(--mono); }
</style>

<div class="modal fade" id="modalDetail" tabindex="-1">
    <div class="modal-dialog modal-xl modal-dialog-centered">
        <div class="modal-content">

            
            <div class="modal-head">
                <div class="modal-head-left">
                    <div class="modal-head-icon">
                        <i class="ti ti-chart-bar"></i>
                    </div>
                    <div>
                        <div class="modal-head-title" id="modalDetailTitle">Detail Transaksi</div>
                        <div class="modal-head-sub" id="modalDetailSub">— transaksi</div>
                    </div>
                </div>
                <button class="modal-close-btn" data-bs-dismiss="modal" aria-label="Tutup">
                    <i class="ti ti-x"></i>
                </button>
            </div>

            
            <div class="modal-filter-bar">
                <select id="filterBulanModal" class="modal-select" style="min-width:130px">
                    <?php $__currentLoopData = $namaBulan; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $num => $nama): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <?php if(in_array($num, $bulanTersedia)): ?>
                            <option value="<?php echo e($num); ?>" <?php if($num == $bulanFilter): echo 'selected'; endif; ?>><?php echo e($nama); ?></option>
                        <?php endif; ?>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </select>
                <select id="filterTahunModal" class="modal-select" style="min-width:90px">
                    <?php for($y = date('Y') + 3; $y >= 2023; $y--): ?>
                        <option value="<?php echo e($y); ?>" <?php if($y == $tahun): echo 'selected'; endif; ?>><?php echo e($y); ?></option>
                    <?php endfor; ?>
                </select>
                <button class="modal-filter-btn" onclick="refreshDetail()">
                    <i class="ti ti-filter" style="font-size:12px"></i> Terapkan
                </button>
                <div id="modalLoading" class="modal-loading-chip">
                    <i class="ti ti-loader-2" style="font-size:13px;animation:spin 1s linear infinite"></i> Memuat...
                </div>
            </div>

            
            <div class="modal-summary-bar" id="modalSummaryBar" style="display:none!important"></div>

            
            <div class="modal-table-wrap">
                <table class="tbl-detail-new">
                    <thead>
                        <tr>
                            <th style="min-width:36px">#</th>
                            <th style="min-width:95px">Tanggal</th>
                            <th style="min-width:120px">CS</th>
                            <th class="th-ctr" style="min-width:75px">Kue</th>
                            <th class="th-ctr" style="min-width:65px">Cookies</th>
                            <th class="th-ctr" style="min-width:65px">Toples</th>
                            <th class="th-ctr" style="min-width:55px">Mini</th>
                            <th class="th-ctr" style="min-width:55px">Pouch</th>
                            <th class="th-ctr" style="min-width:55px">Reject</th>
                            <th class="th-right" style="min-width:140px">Nominal GMV</th>
                            <th class="th-ctr" style="min-width:90px">Status</th>
                        </tr>
                    </thead>
                    <tbody id="modalDetailBody">
                        <tr>
                            <td colspan="11" style="text-align:center;color:var(--ink-3);padding:48px 0">
                                <i class="ti ti-database-off" style="font-size:28px;display:block;margin-bottom:8px;opacity:.3"></i>
                                Pilih channel untuk melihat detail
                            </td>
                        </tr>
                    </tbody>
                    <tfoot id="modalDetailFoot"></tfoot>
                </table>
            </div>

        </div>
    </div>
</div>
<style>
@keyframes spin { to { transform: rotate(360deg); } }
</style>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
let currentChannelId   = null;
let currentChannelName = '';

function bukaDetail(channelId, channelName, tahun, bulan) {
    currentChannelId   = channelId;
    currentChannelName = channelName;
    document.getElementById('modalDetailTitle').textContent = 'Detail Transaksi — ' + channelName;
    document.getElementById('filterBulanModal').value = bulan || <?php echo e($bulanFilter ?? 1); ?>;
    document.getElementById('filterTahunModal').value = tahun || <?php echo e($tahun); ?>;
    const modal = new bootstrap.Modal(document.getElementById('modalDetail'));
    modal.show();
    loadDetail(channelId, tahun, document.getElementById('filterBulanModal').value);
}

function refreshDetail() {
    if (!currentChannelId) return;
    loadDetail(
        currentChannelId,
        document.getElementById('filterTahunModal').value,
        document.getElementById('filterBulanModal').value
    );
}

function loadDetail(channelId, tahun, bulan) {
    const body    = document.getElementById('modalDetailBody');
    const foot    = document.getElementById('modalDetailFoot');
    const loading = document.getElementById('modalLoading');
    const sub     = document.getElementById('modalDetailSub');
    const summary = document.getElementById('modalSummaryBar');

    loading.style.display = 'inline-flex';
    body.innerHTML = '<tr><td colspan="11" style="text-align:center;color:#64748b;padding:48px 0"><i class="ti ti-loader-2" style="font-size:24px;display:block;margin-bottom:8px;opacity:.4;animation:spin 1s linear infinite"></i>Memuat data...</td></tr>';
    foot.innerHTML = '';
    summary.style.display = 'none';

    fetch(`/laporan/detail?channel_id=${channelId}&tahun=${tahun}&bulan=${bulan}`)
        .then(r => r.json())
        .then(data => {
            loading.style.display = 'none';
            sub.textContent = `${data.bulan_label} ${data.tahun} — ${data.total_rows} transaksi`;

            if (!data.rows.length) {
                body.innerHTML = '<tr><td colspan="11" style="text-align:center;color:#64748b;padding:48px 0"><i class="ti ti-database-off" style="font-size:28px;display:block;margin-bottom:8px;opacity:.3"></i>Tidak ada data untuk periode ini</td></tr>';
                summary.style.display = 'none';
                return;
            }

            // Summary chips
            const totalGmv    = data.rows.reduce((s,r) => s + Number(r.nominal_gmv), 0);
            const qToples = data.subtotal.qty_toples || 0;
            const qMini   = data.subtotal.qty_mini   || 0;
            const qPouch  = data.subtotal.qty_pouch  || 0;
            const totalToples  = qToples + qMini + qPouch;
            summary.style.removeProperty('display');
            summary.innerHTML = `
                <span class="summary-chip chip-trx"><i class="ti ti-list-numbers"></i>${data.total_rows} Transaksi</span>
                <span class="summary-chip chip-gmv"><i class="ti ti-currency-dollar"></i>Rp ${totalGmv.toLocaleString('id-ID')}</span>
                <span class="summary-chip chip-toples">
                    <i class="ti ti-box"></i>${totalToples} Produk
                    <i class="ti ti-chevron-down" style="font-size:10px;opacity:.6"></i>
                    <div class="prod-tooltip">
                        <div class="prod-tooltip-row"><span class="pt-label">Toples</span><span class="pt-val">${qToples}</span></div>
                        <div class="prod-tooltip-row"><span class="pt-label">Mini</span><span class="pt-val">${qMini}</span></div>
                        <div class="prod-tooltip-row"><span class="pt-label">Pouch</span><span class="pt-val">${qPouch}</span></div>
                    </div>
                </span>
            `;

            const statusPill = (s) => {
                const map = {
                    'dikirim'    : ['mpill mpill-ship', 'Dikirim'],
                    'siap_kirim' : ['mpill mpill-ok',   'Siap Kirim'],
                    'selesai'    : ['mpill mpill-done',  'Selesai'],
                    'reject'     : ['mpill mpill-rej',   'Reject'],
                    'pending'    : ['mpill mpill-pend',  'Pending'],
                };
                const key = (s||'').toLowerCase();
                const [cls, label] = map[key] ?? ['mpill mpill-pend', s ?? '-'];
                return `<span class="${cls}">${label}</span>`;
            };

            body.innerHTML = data.rows.map((row, i) => `<tr>
                <td class="tc" style="color:var(--ink-3);font-family:var(--mono);font-size:10.5px">${i + 1}</td>
                <td class="td-date">${row.tgl}</td>
                <td class="td-cs">${row.nama_cs ?? '-'}</td>
                <td class="td-qty-lo">${row.qty_kue_keranjang || 0}</td>
                <td class="td-qty-lo">${row.qty_cookies || 0}</td>
                <td class="td-qty-hi">${row.qty_toples || 0}</td>
                <td class="td-qty-lo">${row.qty_mini || 0}</td>
                <td class="td-qty-lo">${row.qty_pouch || 0}</td>
                <td class="td-reject">${row.qty_reject || 0}</td>
                <td class="td-gmv">Rp ${Number(row.nominal_gmv).toLocaleString('id-ID')}</td>
                <td class="tc">${statusPill(row.status)}</td>
            </tr>`).join('');

            foot.innerHTML = `<tr>
                <td colspan="3" style="text-align:right;font-size:9.5px;text-transform:uppercase;letter-spacing:.5px;color:#64748b">
                    Subtotal &nbsp;·&nbsp; ${data.total_rows} trx
                </td>
                <td class="tfoot-qty">${data.subtotal.qty_kue_keranjang || 0}</td>
                <td class="tfoot-qty">${data.subtotal.qty_cookies || 0}</td>
                <td class="tfoot-qty">${data.subtotal.qty_toples || 0}</td>
                <td class="tfoot-qty">${data.subtotal.qty_mini || 0}</td>
                <td class="tfoot-qty">${data.subtotal.qty_pouch || 0}</td>
                <td class="tfoot-rej">${data.subtotal.qty_reject || 0}</td>
                <td class="tfoot-gmv">Rp ${Number(data.subtotal.nominal_gmv).toLocaleString('id-ID')}</td>
                <td></td>
            </tr>`;
        })
        .catch(() => {
            loading.style.display = 'none';
            body.innerHTML = '<tr><td colspan="11" style="text-align:center;color:#dc2626;padding:48px 0"><i class="ti ti-wifi-off" style="font-size:24px;display:block;margin-bottom:8px;opacity:.5"></i>Gagal memuat data.</td></tr>';
        });
}
</script>
</body>
</html><?php /**PATH C:\laragon\www\laporanpenjualan\resources\views/laporan.blade.php ENDPATH**/ ?>