<?php $__env->startSection('title', 'Dashboard'); ?>
<?php $__env->startSection('content'); ?>

<?php $isAdmin = Auth::user()->role_id == 1; ?>

<style>
:root {
    --brand-blue: #0071BC;
    --brand-blue-dk: #005A96;
    --brand-green: #39B54A;
    --brand-blue-lt: rgba(0, 113, 188, 0.10);
    --brand-green-lt: rgba(57, 181, 74, 0.10);
    --accent-purple: #7c6fcd;
    --accent-purple-lt: rgba(124, 111, 205, 0.10);
    --accent-orange: #f5a623;
    --accent-orange-lt: rgba(245, 166, 35, 0.12);
    --text: #1e293b;
    --text-mid: #475569;
    --muted: #94a3b8;
    --border: #e2e8f0;
    --white: #fff;
    --bg: #f8fafc;
    --sh: 0 1px 3px rgba(0,0,0,0.06);
    --sh-md: 0 4px 12px rgba(0,0,0,0.08);
}

body { background: var(--bg); color: var(--text); font-family: 'Inter', sans-serif; }

/* ── Header ── */
.dash-header { margin-bottom: 24px; }
.dash-header h1 { font-size: 22px; font-weight: 800; color: var(--text); margin: 0; letter-spacing: -0.4px; }
.dash-header .sub { font-size: 13px; color: var(--muted); margin-top: 5px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dash-header .sub .sep { color: var(--border); }

/* ── Section label ── */
.sec-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.9px;
    margin: 28px 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.sec-label::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.sec-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }

/* ── Hero summary row ── */
.hero-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 14px;
    margin-bottom: 10px;
}
.hero-main {
    background: linear-gradient(135deg, var(--brand-blue) 0%, #0096d6 100%);
    border-radius: 16px;
    padding: 24px 28px;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 130px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0, 113, 188, 0.22);
}
.hero-main::before {
    content: '';
    position: absolute;
    top: -40px; right: -30px;
    width: 200px; height: 200px;
    background: rgba(255,255,255,0.06);
    border-radius: 50%;
}
.hero-main .h-label { font-size: 12px; opacity: 0.85; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.hero-main .h-val { font-size: 36px; font-weight: 900; letter-spacing: -1px; line-height: 1; margin-top: 8px; }
.hero-main .h-meta { font-size: 12px; opacity: 0.75; margin-top: 10px; display: flex; gap: 16px; flex-wrap: wrap; }
.hero-main .h-meta span { display: flex; align-items: center; gap: 4px; }

.hero-side {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 18px 20px;
    box-shadow: var(--sh);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.hero-side .hs-label { font-size: 11px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.hero-side .hs-val { font-size: 24px; font-weight: 800; color: var(--text); margin-top: 6px; line-height: 1; }
.hero-side .hs-sub { font-size: 12px; color: var(--muted); margin-top: 6px; }

/* ── Stat cards ── */
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.sc {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px;
    position: relative;
    transition: transform .25s ease, box-shadow .25s ease;
    box-shadow: var(--sh);
}
.sc:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }

.sc-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.sc-icon {
    width: 42px; height: 42px;
    border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
    background: var(--ic);
    color: var(--ac);
}
.sc-badge {
    font-size: 10px; font-weight: 700;
    padding: 3px 8px;
    border-radius: 20px;
    background: var(--ic); color: var(--ac);
    text-transform: uppercase; letter-spacing: 0.3px;
}
.sc-val { font-size: 24px; font-weight: 800; color: var(--text); line-height: 1.2; }
.sc-lbl { font-size: 13px; font-weight: 600; color: var(--text-mid); margin-top: 3px; }
.sc-sub {
    font-size: 11px; color: var(--muted);
    margin-top: 10px; padding-top: 10px;
    border-top: 1px solid #f1f5f9;
    display: flex; align-items: center; gap: 4px;
}

/* ── Card wrapper ── */
.card { background: var(--white); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; box-shadow: var(--sh); }
.card-hdr {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    background: #fafbfc;
}
.card-title { font-size: 13px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 7px; }

/* ── Two-column row ── */
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 18px; }

/* ── Mini table ── */
.mini-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.mini-tbl th {
    padding: 11px 14px;
    background: #f8fafc;
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border);
}
.mini-tbl td { padding: 11px 14px; border-bottom: 1px solid #f4f6f9; color: var(--text); vertical-align: middle; }
.mini-tbl tbody tr:last-child td { border-bottom: none; }
.mini-tbl tbody tr:hover td { background: #fafbfd; }

/* ── Type badge ── */
.type-tag { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 20px; }
.type-qr  { background: var(--brand-green-lt); color: var(--brand-green); }
.type-pos { background: var(--brand-blue-lt); color: var(--brand-blue); }

/* ── Bar chart rows ── */
.bar-row { margin-bottom: 13px; }
.bar-meta { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 5px; }
.bar-name { font-weight: 600; color: var(--text); }
.bar-amount { color: var(--muted); }
.bar-track { background: #f1f5f9; height: 5px; border-radius: 10px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 10px; transition: width 1.2s cubic-bezier(0.4,0,0.2,1); }

/* ── Split donut legend ── */
.donut-wrap { display: flex; align-items: center; justify-content: center; padding: 28px; gap: 28px; }
.donut-legend { display: flex; flex-direction: column; gap: 10px; }
.legend-row { font-size: 13px; color: var(--text-mid); display: flex; align-items: center; gap: 8px; }
.legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

/* ── Empty state ── */
.empty-state { text-align: center; padding: 40px; color: var(--muted); }
.empty-state i { font-size: 36px; display: block; margin-bottom: 8px; }

/* ── Responsive ── */
@media(max-width: 1024px) {
    .hero-grid { grid-template-columns: 1fr 1fr; }
    .hero-main { grid-column: span 2; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
}
@media(max-width: 700px) {
    .hero-grid { grid-template-columns: 1fr; }
    .hero-main { grid-column: span 1; }
    .stats-grid { grid-template-columns: 1fr; }
    .row2 { grid-template-columns: 1fr; }
}
</style>


<div class="dash-header">
    <h1>
        <?php if($isAdmin): ?>
            <i class="las la-chart-bar" style="color:var(--brand-blue)"></i> System Analytics
        <?php else: ?>
            <i class="las la-store" style="color:var(--brand-blue)"></i> Merchant Dashboard
        <?php endif; ?>
    </h1>
    <div class="sub">
        <i class="las la-user-circle"></i>
        <?php echo e(Auth::user()->name); ?>

        <span class="sep">|</span>
        <i class="las la-calendar-alt"></i>
        <?php echo e(now()->format('l, d M Y')); ?>

        <?php if(!$isAdmin): ?>
            <span class="sep">|</span>
            Merchant ID: <strong style="color:var(--brand-blue)"><?php echo e(Auth::user()->terminal_id); ?></strong>
        <?php endif; ?>
    </div>
</div>


<div class="sec-label">
    <span class="sec-dot" style="background:var(--brand-blue)"></span>
    Combined Overview
</div>

<div class="hero-grid">

    
    <div class="hero-main">
        <div>
            <div class="h-label">
                <?php echo e($isAdmin ? 'Total Amount — All Channels' : 'My Total Amount'); ?>

            </div>
            <div class="h-val"><?php echo e(number_format($grandTotal)); ?></div>
        </div>
        <div class="h-meta">
            <span><i class="las la-exchange-alt"></i> <?php echo e(number_format($grandCount)); ?> total transactions</span>
            <span><i class="las la-sun"></i> Today: <?php echo e(number_format($grandToday)); ?></span>
        </div>
    </div>

    
    <div class="hero-side">
        <div class="hs-label">Total Transactions</div>
        <div class="hs-val"><?php echo e(number_format($grandCount)); ?></div>
        <div class="hs-sub">QR + POS combined</div>
    </div>

    
    <div class="hero-side">
        <div class="hs-label">Today's Amount</div>
        <div class="hs-val"><?php echo e(number_format($grandToday)); ?></div>
        <div class="hs-sub"><?php echo e(now()->format('d M Y')); ?></div>
    </div>

</div>


<div class="sec-label">
    <span class="sec-dot" style="background:var(--brand-green)"></span>
    QR Code Channel
</div>

<div class="stats-grid">

    
    <div class="sc" style="--ac:var(--brand-green);--ic:var(--brand-green-lt)">
        <div class="sc-top">
            <div class="sc-icon"><i class="las la-qrcode"></i></div>
            <span class="sc-badge">Gross</span>
        </div>
        <div class="sc-val"><?php echo e(number_format($qrTotal)); ?></div>
        <div class="sc-lbl">QR Total Amount</div>
        <div class="sc-sub">
            <i class="las la-exchange-alt"></i> <?php echo e(number_format($qrCount)); ?> transactions
        </div>
    </div>

    
    <div class="sc" style="--ac:var(--brand-blue);--ic:var(--brand-blue-lt)">
        <div class="sc-top">
            <div class="sc-icon"><i class="las la-sun"></i></div>
            <span class="sc-badge">Today</span>
        </div>
        <div class="sc-val"><?php echo e(number_format($qrToday)); ?></div>
        <div class="sc-lbl">Today's QR Amount</div>
        <div class="sc-sub">
            <i class="las la-list"></i> <?php echo e(number_format($qrTodayCount)); ?> transactions today
        </div>
    </div>

    <?php if($isAdmin): ?>

        
        <div class="sc" style="--ac:var(--accent-purple);--ic:var(--accent-purple-lt)">
            <div class="sc-top">
                <div class="sc-icon"><i class="las la-store"></i></div>
                <span class="sc-badge">Merchants</span>
            </div>
            <div class="sc-val"><?php echo e($qrTerminals); ?></div>
            <div class="sc-lbl">Active QR Merchants</div>
            <div class="sc-sub">
                <i class="las la-id-card"></i> Unique merchant IDs
            </div>
        </div>

        
        <div class="sc" style="--ac:var(--accent-orange);--ic:var(--accent-orange-lt)">
            <div class="sc-top">
                <div class="sc-icon"><i class="las la-medal"></i></div>
                <span class="sc-badge">Top</span>
            </div>
            <div class="sc-val" style="font-size:15px; line-height:1.4">
                <?php echo e(Str::limit($qrTopTerminals->first()->terminal_name ?? '—', 18)); ?>

            </div>
            <div class="sc-lbl">Top QR Merchant</div>
            <div class="sc-sub">
                <i class="las la-chart-line"></i>
                <?php echo e($qrTopTerminals->first() ? number_format($qrTopTerminals->first()->total) . ' this month' : 'No data yet'); ?>

            </div>
        </div>

    <?php else: ?>

        
        <div class="sc" style="--ac:var(--accent-purple);--ic:var(--accent-purple-lt)">
            <div class="sc-top">
                <div class="sc-icon"><i class="las la-calculator"></i></div>
                <span class="sc-badge">Avg</span>
            </div>
            <div class="sc-val"><?php echo e($qrCount > 0 ? number_format($qrTotal / $qrCount) : 0); ?></div>
            <div class="sc-lbl">Avg. Transaction Value</div>
            <div class="sc-sub"><i class="las la-info-circle"></i> Per QR transaction</div>
        </div>

        
        <div class="sc" style="--ac:var(--accent-orange);--ic:var(--accent-orange-lt)">
            <div class="sc-top">
                <div class="sc-icon"><i class="las la-calendar-check"></i></div>
                <span class="sc-badge">Month</span>
            </div>
            <?php
                $qrMonth = \App\Models\Transaction::where('terminal_id', Auth::user()->terminal_id)
                            ->whereMonth('created_at', now()->month)
                            ->whereYear('created_at', now()->year)
                            ->sum('amount');
            ?>
            <div class="sc-val"><?php echo e(number_format($qrMonth)); ?></div>
            <div class="sc-lbl">This Month's QR</div>
            <div class="sc-sub"><i class="las la-calendar"></i> <?php echo e(now()->format('F Y')); ?></div>
        </div>

    <?php endif; ?>
</div>


<div class="sec-label">
    <span class="sec-dot" style="background:var(--brand-blue)"></span>
    POS Terminal Channel
</div>

<div class="stats-grid">

    
    <div class="sc" style="--ac:var(--brand-blue);--ic:var(--brand-blue-lt)">
        <div class="sc-top">
            <div class="sc-icon"><i class="las la-cash-register"></i></div>
            <span class="sc-badge">Gross</span>
        </div>
        <div class="sc-val"><?php echo e(number_format($posTotal)); ?></div>
        <div class="sc-lbl">POS Total Amount</div>
        <div class="sc-sub">
            <i class="las la-credit-card"></i> <?php echo e(number_format($posCount)); ?> transactions
        </div>
    </div>

    
    <div class="sc" style="--ac:var(--brand-green);--ic:var(--brand-green-lt)">
        <div class="sc-top">
            <div class="sc-icon"><i class="las la-bolt"></i></div>
            <span class="sc-badge">Today</span>
        </div>
        <div class="sc-val"><?php echo e(number_format($posToday)); ?></div>
        <div class="sc-lbl">Today's POS Amount</div>
        <div class="sc-sub">
            <i class="las la-list"></i> <?php echo e(number_format($posTodayCount)); ?> transactions today
        </div>
    </div>

    <?php if($isAdmin): ?>

        
        <div class="sc" style="--ac:var(--accent-orange);--ic:var(--accent-orange-lt)">
            <div class="sc-top">
                <div class="sc-icon"><i class="las la-server"></i></div>
                <span class="sc-badge">Fleet</span>
            </div>
            <div class="sc-val"><?php echo e($posTerminals); ?></div>
            <div class="sc-lbl">Deployed POS Terminals</div>
            <div class="sc-sub"><i class="las la-hdd"></i> Active terminal units</div>
        </div>

        
        <div class="sc" style="--ac:var(--accent-purple);--ic:var(--accent-purple-lt)">
            <div class="sc-top">
                <div class="sc-icon"><i class="las la-trophy"></i></div>
                <span class="sc-badge">Top</span>
            </div>
            <div class="sc-val" style="font-size:18px; line-height:1.4">
                <?php echo e($posTopTerminals->first()->terminal_id ?? '—'); ?>

            </div>
            <div class="sc-lbl">Top POS Terminal</div>
            <div class="sc-sub">
                <i class="las la-chart-bar"></i>
                <?php echo e($posTopTerminals->first() ? number_format($posTopTerminals->first()->total) . ' this month' : 'No data yet'); ?>

            </div>
        </div>

    <?php else: ?>

        
        <div class="sc" style="--ac:var(--accent-orange);--ic:var(--accent-orange-lt)">
            <div class="sc-top">
                <div class="sc-icon"><i class="las la-percentage"></i></div>
                <span class="sc-badge">Avg</span>
            </div>
            <div class="sc-val"><?php echo e($posCount > 0 ? number_format($posTotal / $posCount) : 0); ?></div>
            <div class="sc-lbl">Avg. POS Sale</div>
            <div class="sc-sub"><i class="las la-info-circle"></i> Per POS transaction</div>
        </div>

        
        <div class="sc" style="--ac:var(--accent-purple);--ic:var(--accent-purple-lt)">
            <div class="sc-top">
                <div class="sc-icon"><i class="las la-calendar"></i></div>
                <span class="sc-badge">Month</span>
            </div>
            <?php
                $posMonth = \App\Models\PosTransaction::where('terminal_id', Auth::user()->terminal_id)
                            ->whereMonth('created_at', now()->month)
                            ->whereYear('created_at', now()->year)
                            ->sum('amount');
            ?>
            <div class="sc-val"><?php echo e(number_format($posMonth)); ?></div>
            <div class="sc-lbl">This Month's POS</div>
            <div class="sc-sub"><i class="las la-calendar"></i> <?php echo e(now()->format('F Y')); ?></div>
        </div>

    <?php endif; ?>
</div>


<div class="sec-label" style="margin-top:30px">
    <span class="sec-dot" style="background:var(--accent-purple)"></span>
    Performance & Activity
</div>

<div class="row2">

    
    <div class="card">
        <div class="card-hdr">
            <div class="card-title">
                <i class="las la-chart-area" style="color:var(--brand-blue)"></i>
                Amount Trend — Last 7 Days
            </div>
            <div style="display:flex;gap:12px;font-size:11px;font-weight:600">
                <span style="color:var(--brand-green)">● QR</span>
                <span style="color:var(--brand-blue)">● POS</span>
            </div>
        </div>
        <div style="padding:16px">
            <div style="height:260px"><canvas id="lineChart"></canvas></div>
        </div>
    </div>

    
    <div class="card">
        <div class="card-hdr">
            <div class="card-title">
                <i class="las la-history" style="color:var(--brand-green)"></i>
                Latest Transactions
            </div>
        </div>
        <table class="mini-tbl">
            <thead>
                <tr>
                    <th>Reference</th>
                    <th>Amount</th>
                    <th>Channel</th>
                    <th>Merchant</th>
                </tr>
            </thead>
            <tbody>
                <?php
                    if ($isAdmin) {
                        $recentQR  = \App\Models\Transaction::orderBy('id','desc')->limit(5)->get();
                        $recentPOS = \App\Models\PosTransaction::orderBy('id','desc')->limit(5)->get();
                    }
                    $combined = collect();
                    foreach(($recentQR ?? collect()) as $t) {
                        $combined->push(['ref' => $t->system_reference, 'amount' => $t->amount, 'type' => 'QR', 'merchant' => $t->terminal_name ?? '—', 'time' => $t->created_at]);
                    }
                    foreach(($recentPOS ?? collect()) as $t) {
                        $combined->push(['ref' => $t->ref, 'amount' => $t->amount, 'type' => 'POS', 'merchant' => $t->merchant ?? '—', 'time' => $t->created_at]);
                    }
                    $combined = $combined->sortByDesc('time')->take(8);
                ?>

                <?php $__empty_1 = true; $__currentLoopData = $combined; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $row): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                <tr>
                    <td style="font-family:monospace;font-size:12px;color:var(--brand-blue);font-weight:600">
                        #<?php echo e(substr($row['ref'], -6)); ?>

                    </td>
                    <td style="font-weight:700"><?php echo e(number_format($row['amount'])); ?></td>
                    <td>
                        <span class="type-tag <?php echo e($row['type'] === 'QR' ? 'type-qr' : 'type-pos'); ?>">
                            <?php echo e($row['type']); ?>

                        </span>
                    </td>
                    <td style="color:var(--text-mid)"><?php echo e(Str::limit($row['merchant'], 18)); ?></td>
                </tr>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                <tr>
                    <td colspan="4">
                        <div class="empty-state">
                            <i class="las la-inbox"></i>
                            No transactions yet
                        </div>
                    </td>
                </tr>
                <?php endif; ?>
            </tbody>
        </table>
    </div>

</div>


<?php if($isAdmin): ?>
<div class="row2" style="margin-top:16px">

    
    <div class="card">
        <div class="card-hdr">
            <div class="card-title">
                <i class="las la-chart-pie" style="color:var(--accent-purple)"></i>
                Channel Amount Split
            </div>
        </div>
        <div class="donut-wrap">
            <canvas id="splitDonut" style="max-width:160px;max-height:160px"></canvas>
            <div class="donut-legend">
                <div class="legend-row">
                    <span class="legend-dot" style="background:var(--brand-green)"></span>
                    QR Code &nbsp;
                    <strong><?php echo e(number_format(($qrTotal / ($grandTotal ?: 1)) * 100, 1)); ?>%</strong>
                </div>
                <div class="legend-row">
                    <span class="legend-dot" style="background:var(--brand-blue)"></span>
                    POS Terminal &nbsp;
                    <strong><?php echo e(number_format(($posTotal / ($grandTotal ?: 1)) * 100, 1)); ?>%</strong>
                </div>
                <div style="margin-top:10px;padding-top:10px;border-top:1px solid var(--border);font-size:12px;color:var(--muted)">
                    Total: <?php echo e(number_format($grandTotal)); ?>

                </div>
            </div>
        </div>
    </div>

    
    <div class="card">
        <div class="card-hdr">
            <div class="card-title">
                <i class="las la-medal" style="color:var(--accent-orange)"></i>
                Top QR Merchants — This Month
            </div>
        </div>
        <div style="padding:18px">
            <?php $maxQR = $qrTopTerminals->max('total') ?: 1; ?>
            <?php $__empty_1 = true; $__currentLoopData = $qrTopTerminals->take(5); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $t): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
            <div class="bar-row">
                <div class="bar-meta">
                    <span class="bar-name"><?php echo e($t->terminal_name); ?></span>
                    <span class="bar-amount"><?php echo e(number_format($t->total)); ?></span>
                </div>
                <div class="bar-track">
                    <div class="bar-fill" style="width:<?php echo e(($t->total / $maxQR) * 100); ?>%; background:var(--brand-green)"></div>
                </div>
            </div>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
            <div class="empty-state"><i class="las la-store-slash"></i> No merchant data available</div>
            <?php endif; ?>
        </div>
    </div>

</div>
<?php endif; ?>


<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
<script>
(function () {
    const lineCtx = document.getElementById('lineChart').getContext('2d');

    const gradGreen = lineCtx.createLinearGradient(0, 0, 0, 280);
    gradGreen.addColorStop(0, 'rgba(57,181,74,0.12)');
    gradGreen.addColorStop(1, 'rgba(57,181,74,0)');

    const gradBlue = lineCtx.createLinearGradient(0, 0, 0, 280);
    gradBlue.addColorStop(0, 'rgba(0,113,188,0.14)');
    gradBlue.addColorStop(1, 'rgba(0,113,188,0)');

    new Chart(lineCtx, {
        type: 'line',
        data: {
            labels: <?php echo json_encode($lineLabels, 15, 512) ?>,
            datasets: [
                {
                    label: 'QR Amount',
                    data: <?php echo json_encode($lineQR, 15, 512) ?>,
                    borderColor: '#39B54A',
                    backgroundColor: gradGreen,
                    fill: true,
                    tension: 0.4,
                    borderWidth: 2.5,
                    pointRadius: 3,
                    pointBackgroundColor: '#39B54A',
                    pointBorderWidth: 0,
                },
                {
                    label: 'POS Amount',
                    data: <?php echo json_encode($linePOS, 15, 512) ?>,
                    borderColor: '#0071BC',
                    backgroundColor: gradBlue,
                    fill: true,
                    tension: 0.4,
                    borderWidth: 2.5,
                    pointRadius: 3,
                    pointBackgroundColor: '#0071BC',
                    pointBorderWidth: 0,
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            interaction: { mode: 'index', intersect: false },
            plugins: {
                legend: { display: false },
                tooltip: {
                    backgroundColor: '#1e293b',
                    titleColor: '#94a3b8',
                    bodyColor: '#f8fafc',
                    padding: 10,
                    borderRadius: 8,
                    callbacks: {
                        label: function(ctx) {
                            return ' ' + ctx.dataset.label + ': ' + ctx.parsed.y.toLocaleString();
                        }
                    }
                }
            },
            scales: {
                y: {
                    border: { display: false },
                    grid: { color: '#f1f5f9' },
                    ticks: { color: '#94a3b8', font: { size: 11 } }
                },
                x: {
                    grid: { display: false },
                    ticks: { color: '#94a3b8', font: { size: 11 } }
                }
            }
        }
    });

    <?php if($isAdmin): ?>
    new Chart(document.getElementById('splitDonut'), {
        type: 'doughnut',
        data: {
            labels: ['QR Code', 'POS Terminal'],
            datasets: [{
                data: [<?php echo e($qrTotal); ?>, <?php echo e($posTotal); ?>],
                backgroundColor: ['#39B54A', '#0071BC'],
                hoverOffset: 5,
                borderWidth: 0,
            }]
        },
        options: {
            cutout: '78%',
            plugins: {
                legend: { display: false },
                tooltip: {
                    callbacks: {
                        label: function(ctx) {
                            return ' ' + ctx.label + ': ' + ctx.parsed.toLocaleString();
                        }
                    }
                }
            }
        }
    });
    <?php endif; ?>
})();
</script>

<?php $__env->stopSection(); ?>
<?php echo $__env->make('admin.layouts.app', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /home/erppanel/public_html/banknote.roayapay.com/resources/views/admin/index.blade.php ENDPATH**/ ?>