@extends('nexus.layouts.app')

@section('page-title', 'Pilots')
@section('sys-mode', 'PILOT MODE')

@section('head')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.min.js"></script>
@endsection

@section('content')

    @php
        $ov = $overview ?? [];
        $rows = $pilotsTable ?? [];
        $wrDist = $rollingWrDist ?? [];
        $followsChart = $followsPerPilot ?? [];
        $capChart = $followerCapDist ?? [];
        $dailyChart = $dailyActivity ?? [];
        $followRows = $follows ?? [];

        $dateStart = $dates['start'] ?? now()->startOfMonth()->toDateString();
        $dateEnd   = $dates['end']   ?? now()->toDateString();
        $isToday   = $dateStart === now()->toDateString() && $dateEnd === now()->toDateString();

        if ($isToday) {
            $periodLabel = 'TODAY';
            $periodSuffix = 'Today';
        } elseif ($dateStart === now()->subDay()->toDateString() && $dateEnd === now()->subDay()->toDateString()) {
            $periodLabel = 'YESTERDAY';
            $periodSuffix = 'Yesterday';
        } elseif ($dateStart === $dateEnd) {
            $periodLabel = strtoupper(\Carbon\Carbon::parse($dateStart)->format('M j'));
            $periodSuffix = \Carbon\Carbon::parse($dateStart)->format('M j');
        } else {
            $periodLabel = strtoupper(\Carbon\Carbon::parse($dateStart)->format('M Y'));
            $periodSuffix = \Carbon\Carbon::parse($dateStart)->format('M Y');
        }

        $currentMonth = request()->input('month', now()->format('Y-m'));
        $activeRange = request()->input('range', '');
        $currentSort = $currentSort ?? request()->input('sort', 'wins');
        $currentDir = $currentDir ?? request()->input('dir', 'desc');
        $followStatusFilter = $followStatusFilter ?? request()->input('follow_status', 'all');

        $followStatusLabels = [
            'all'          => 'All',
            'active'       => 'Active',
            'stopped'      => 'Stopped',
            'auto_stopped' => 'Auto-Stopped',
        ];
    @endphp

    {{-- PAGE HEADER --}}
    <div class="page-header">
        <div>
            <h1>PILOT <em>MODE</em></h1>
            <p class="page-header-sub">Platform-owned automated traders and follower mirror activity</p>
        </div>
        <div class="page-header-right">
            <div>
                <div class="stat-label">Pilot Win Rate</div>
                <div class="stat-value {{ ($ov['pilot_win_rate'] ?? 0) >= 50 ? 'green' : 'orange' }}">{{ $ov['pilot_win_rate'] ?? 0 }}%</div>
            </div>
            <div class="date-controls" style="margin-top: 8px;">
                <div class="month-selector" id="monthSelector">
                    <button type="button" class="month-selector-btn" id="monthSelectorBtn">
                        {{ \Carbon\Carbon::parse($dateStart)->format('F Y') }}
                    </button>
                    <div class="month-selector-dropdown" id="monthSelectorDropdown">
                        @foreach ($availableMonths ?? [] as $m)
                            <div class="month-option {{ $currentMonth === $m ? 'active' : '' }}" data-month="{{ $m }}">
                                {{ \Carbon\Carbon::parse($m . '-01')->format('F Y') }}
                            </div>
                        @endforeach
                    </div>
                </div>
                <div class="quick-filters">
                    <button type="button" class="quick-filter {{ $activeRange === 'today' ? 'active' : '' }}" data-range="today">Today</button>
                    <button type="button" class="quick-filter {{ $activeRange === 'yesterday' ? 'active' : '' }}" data-range="yesterday">Yesterday</button>
                    <button type="button" class="quick-filter {{ $activeRange === '7days' ? 'active' : '' }}" data-range="7days">7 Days</button>
                </div>
            </div>
        </div>
    </div>

    {{-- STAT STRIP: Pilot roster --}}
    <div class="stat-strip">
        <div class="stat-cell">
            <div class="stat-label">Total Pilots</div>
            <div class="stat-value">{{ $ov['total_pilots'] ?? 0 }}</div>
            <div class="stat-sub-label">Active roster</div>
        </div>
        <div class="stat-cell">
            <div class="stat-label">Circuit Normal</div>
            <div class="stat-value green">{{ $ov['normal_count'] ?? 0 }}</div>
            <div class="stat-sub-label">Paused {{ $ov['paused_count'] ?? 0 }} / Cool {{ $ov['cooldown_count'] ?? 0 }}</div>
        </div>
        <div class="stat-cell">
            <div class="stat-label">Active Follows</div>
            <div class="stat-value orange">{{ number_format($ov['active_follows'] ?? 0) }}</div>
            <div class="stat-sub-label">{{ number_format($ov['unique_followers'] ?? 0) }} unique followers</div>
        </div>
        <div class="stat-cell">
            <div class="stat-label">Follower Capital</div>
            <div class="stat-value">${{ number_format($ov['follower_capital'] ?? 0, 2) }}</div>
            <div class="stat-sub-label">${{ number_format($ov['total_invested'] ?? 0, 2) }} invested</div>
        </div>
    </div>

    {{-- STAT STRIP: Pilot activity (period) --}}
    <div class="stat-strip">
        <div class="stat-cell">
            <div class="stat-label">Pilot Bids {{ $periodSuffix }}</div>
            <div class="stat-value">{{ number_format($ov['pilot_bids'] ?? 0) }}</div>
        </div>
        <div class="stat-cell">
            <div class="stat-label">Pilot Wins {{ $periodSuffix }}</div>
            <div class="stat-value green">{{ number_format($ov['pilot_wins'] ?? 0) }}</div>
        </div>
        <div class="stat-cell">
            <div class="stat-label">Pilot Losses {{ $periodSuffix }}</div>
            <div class="stat-value red">{{ number_format($ov['pilot_losses'] ?? 0) }}</div>
        </div>
        <div class="stat-cell">
            <div class="stat-label">Accepting Followers</div>
            <div class="stat-value {{ ($ov['accepting_count'] ?? 0) > 0 ? 'green' : 'yellow' }}">{{ $ov['accepting_count'] ?? 0 }} / {{ $ov['total_pilots'] ?? 0 }}</div>
            <div class="stat-sub-label">{{ $ov['stop_loss_triggered'] ?? 0 }} stop-loss lifetime</div>
        </div>
    </div>

    {{-- STAT STRIP: Mirror activity (period) --}}
    <div class="stat-strip">
        <div class="stat-cell">
            <div class="stat-label">Mirror Trades {{ $periodSuffix }}</div>
            <div class="stat-value">{{ number_format($ov['mirror_trades'] ?? 0) }}</div>
            <div class="stat-sub-label">{{ number_format($ov['mirror_skipped'] ?? 0) }} skipped</div>
        </div>
        <div class="stat-cell">
            <div class="stat-label">Mirror Win Rate</div>
            <div class="stat-value {{ ($ov['mirror_win_rate'] ?? 0) >= 50 ? 'green' : 'orange' }}">{{ $ov['mirror_win_rate'] ?? 0 }}%</div>
            <div class="stat-sub-label">{{ $ov['mirror_wins'] ?? 0 }}W / {{ $ov['mirror_losses'] ?? 0 }}L</div>
        </div>
        <div class="stat-cell">
            <div class="stat-label">Pilot Earnings {{ $periodSuffix }}</div>
            <div class="stat-value green">${{ number_format($ov['pilot_earnings'] ?? 0, 2) }}</div>
            <div class="stat-sub-label">From follower trades</div>
        </div>
        <div class="stat-cell">
            <div class="stat-label">Follower Gross {{ $periodSuffix }}</div>
            <div class="stat-value {{ ($ov['follower_gross'] ?? 0) >= 0 ? 'green' : 'red' }}">${{ number_format($ov['follower_gross'] ?? 0, 2) }}</div>
            <div class="stat-sub-label">Before pilot cut</div>
        </div>
    </div>

    {{-- CHARTS --}}
    <div class="chart-row" style="margin-top: 24px;">
        <div class="chart-panel">
            <div class="chart-title">Pilot Rolling WR Distribution</div>
            <div class="chart-wrap h250"><canvas id="pilotWrChart"></canvas></div>
        </div>
        <div class="chart-panel">
            <div class="chart-title">Daily Pilot Activity <span class="text-dim">&bull; {{ $periodSuffix }}</span></div>
            <div class="chart-wrap h250"><canvas id="pilotActivityChart"></canvas></div>
        </div>
    </div>

    <div class="chart-row" style="margin-top: 16px;">
        <div class="chart-panel">
            <div class="chart-title">Active Follows Per Pilot</div>
            <div class="chart-wrap h250"><canvas id="pilotFollowsChart"></canvas></div>
        </div>
        <div class="chart-panel">
            <div class="chart-title">Follower Capital Per Pilot</div>
            <div class="chart-wrap h250"><canvas id="pilotCapChart"></canvas></div>
        </div>
    </div>

    {{-- PILOTS TABLE --}}
    <div class="section-header">
        <span class="section-label">Pilots Leaderboard</span>
        <span class="section-right">{{ $periodSuffix }} &bull; 25 pilots</span>
    </div>

    <div class="data-table-wrap">
        <table class="data-table">
            <thead>
                <tr>
                    <th style="width: 40px;">#</th>
                    <th class="sortable {{ $currentSort === 'display_name' ? 'sort-active sort-' . $currentDir : '' }}" data-sort="display_name">
                        Pilot
                        <span class="sort-indicator"><span class="sort-indicator-up"></span><span class="sort-indicator-down"></span></span>
                    </th>
                    <th>Archetype</th>
                    <th class="sortable {{ $currentSort === 'circuit_state' ? 'sort-active sort-' . $currentDir : '' }}" data-sort="circuit_state">
                        Circuit
                        <span class="sort-indicator"><span class="sort-indicator-up"></span><span class="sort-indicator-down"></span></span>
                    </th>
                    <th class="col-right sortable {{ $currentSort === 'circuit_rolling_wr' ? 'sort-active sort-' . $currentDir : '' }}" data-sort="circuit_rolling_wr">
                        Rolling WR
                        <span class="sort-indicator"><span class="sort-indicator-up"></span><span class="sort-indicator-down"></span></span>
                    </th>
                    <th class="col-right sortable {{ $currentSort === 'wins' ? 'sort-active sort-' . $currentDir : '' }}" data-sort="wins">
                        Wins
                        <span class="sort-indicator"><span class="sort-indicator-up"></span><span class="sort-indicator-down"></span></span>
                    </th>
                    <th class="col-right sortable {{ $currentSort === 'losses' ? 'sort-active sort-' . $currentDir : '' }}" data-sort="losses">
                        Losses
                        <span class="sort-indicator"><span class="sort-indicator-up"></span><span class="sort-indicator-down"></span></span>
                    </th>
                    <th class="col-right sortable {{ $currentSort === 'win_rate' ? 'sort-active sort-' . $currentDir : '' }}" data-sort="win_rate">
                        WR
                        <span class="sort-indicator"><span class="sort-indicator-up"></span><span class="sort-indicator-down"></span></span>
                    </th>
                    <th class="col-right sortable {{ $currentSort === 'total_profit' ? 'sort-active sort-' . $currentDir : '' }}" data-sort="total_profit">
                        Profit
                        <span class="sort-indicator"><span class="sort-indicator-up"></span><span class="sort-indicator-down"></span></span>
                    </th>
                    <th class="col-right sortable {{ $currentSort === 'total_bids' ? 'sort-active sort-' . $currentDir : '' }}" data-sort="total_bids">
                        Bids
                        <span class="sort-indicator"><span class="sort-indicator-up"></span><span class="sort-indicator-down"></span></span>
                    </th>
                    <th class="col-right sortable {{ $currentSort === 'active_follows' ? 'sort-active sort-' . $currentDir : '' }}" data-sort="active_follows">
                        Followers
                        <span class="sort-indicator"><span class="sort-indicator-up"></span><span class="sort-indicator-down"></span></span>
                    </th>
                    <th class="col-right sortable {{ $currentSort === 'follower_capital' ? 'sort-active sort-' . $currentDir : '' }}" data-sort="follower_capital">
                        Follower Cap
                        <span class="sort-indicator"><span class="sort-indicator-up"></span><span class="sort-indicator-down"></span></span>
                    </th>
                    <th class="col-right sortable {{ $currentSort === 'mirror_trades' ? 'sort-active sort-' . $currentDir : '' }}" data-sort="mirror_trades">
                        Mirror
                        <span class="sort-indicator"><span class="sort-indicator-up"></span><span class="sort-indicator-down"></span></span>
                    </th>
                    <th class="col-right sortable {{ $currentSort === 'mirror_wins' ? 'sort-active sort-' . $currentDir : '' }}" data-sort="mirror_wins">
                        Mirror W/L
                        <span class="sort-indicator"><span class="sort-indicator-up"></span><span class="sort-indicator-down"></span></span>
                    </th>
                    <th class="col-right sortable {{ $currentSort === 'pilot_earned' ? 'sort-active sort-' . $currentDir : '' }}" data-sort="pilot_earned">
                        Pilot Earned
                        <span class="sort-indicator"><span class="sort-indicator-up"></span><span class="sort-indicator-down"></span></span>
                    </th>
                    <th class="col-right">Last Activity</th>
                </tr>
            </thead>
            <tbody>
                @if (!empty($rows) && count($rows) > 0)
                    @foreach ($rows as $idx => $p)
                        @php
                            $circuitClass = match ($p['circuit_state']) {
                                'normal'   => 'chip-completed',
                                'paused'   => 'chip-error',
                                'cooldown' => 'chip-warning',
                                default    => 'chip-pending',
                            };
                            $wr = $p['circuit_rolling_wr'];
                        @endphp
                        <tr>
                            <td class="col-num">{{ str_pad($idx + 1, 2, '0', STR_PAD_LEFT) }}</td>
                            <td>
                                <span class="user-link" onclick="nexus.showAuditTrail({{ $p['user_id'] }}, '{{ addslashes($p['display_name']) }}')">{{ $p['display_name'] }}</span>
                                @if ($p['is_in_warmup'])
                                    <span class="chip chip-sm chip-pending" style="margin-left: 6px;">WARMUP</span>
                                @endif
                            </td>
                            <td style="text-transform: capitalize;">{{ $p['archetype'] ?? '-' }}</td>
                            <td><span class="chip chip-sm {{ $circuitClass }}" style="text-transform: uppercase;">{{ $p['circuit_state'] }}</span></td>
                            <td class="col-right">{{ $wr !== null ? number_format($wr, 1) . '%' : '-' }}</td>
                            <td class="col-right text-green">{{ $p['wins'] }}</td>
                            <td class="col-right text-red">{{ $p['losses'] }}</td>
                            <td class="col-right">{{ $p['win_rate'] }}%</td>
                            <td class="col-right {{ $p['total_profit'] >= 0 ? 'text-green' : 'text-red' }}">${{ number_format($p['total_profit'], 2) }}</td>
                            <td class="col-right">{{ $p['total_bids'] }}</td>
                            <td class="col-right">{{ $p['active_follows'] }}</td>
                            <td class="col-right text-orange">${{ number_format($p['follower_capital'], 2) }}</td>
                            <td class="col-right">{{ $p['mirror_trades'] }}</td>
                            <td class="col-right">
                                <span class="text-green">{{ $p['mirror_wins'] }}</span> / <span class="text-red">{{ $p['mirror_losses'] }}</span>
                            </td>
                            <td class="col-right text-green">${{ number_format($p['pilot_earned'], 2) }}</td>
                            <td class="col-right text-muted">{{ $p['last_activity_relative'] }}</td>
                        </tr>
                    @endforeach
                @else
                    <tr><td colspan="16"><div class="table-empty"><span class="table-empty-text">No pilot data for this period</span></div></td></tr>
                @endif
            </tbody>
        </table>
    </div>

    {{-- ACTIVE FOLLOWS --}}
    <div class="section-header">
        <span class="section-label">Follow Records</span>
        <span class="section-right">{{ count($followRows) }} record(s)</span>
    </div>

    <div class="table-controls">
        <div class="table-controls-left">
            <div class="filter-select-wrap">
                Status
                <select class="filter-select {{ $followStatusFilter !== 'all' ? 'active' : '' }}" id="followStatusFilter">
                    @foreach ($followStatusLabels as $key => $label)
                        <option value="{{ $key }}" {{ $followStatusFilter === $key ? 'selected' : '' }}>{{ $label }}</option>
                    @endforeach
                </select>
            </div>
        </div>
    </div>

    <div class="data-table-wrap">
        <table class="data-table">
            <thead>
                <tr>
                    <th style="width: 40px;">#</th>
                    <th>Follower</th>
                    <th>Country</th>
                    <th>Pilot</th>
                    <th class="col-right">Starting</th>
                    <th class="col-right">Balance</th>
                    <th class="col-right">Net Profit</th>
                    <th class="col-right">Pilot Earned</th>
                    <th>Status</th>
                    <th class="col-right">Started</th>
                </tr>
            </thead>
            <tbody>
                @if (!empty($followRows) && count($followRows) > 0)
                    @foreach ($followRows as $idx => $f)
                        @php
                            $statusClass = match ($f['status']) {
                                'active'       => 'chip-completed',
                                'stopped'      => 'chip-pending',
                                'auto_stopped' => 'chip-error',
                                default        => 'chip-pending',
                            };
                            $netProfitClass = $f['net_profit'] >= 0 ? 'text-green' : 'text-red';
                        @endphp
                        <tr>
                            <td class="col-num">{{ str_pad($idx + 1, 2, '0', STR_PAD_LEFT) }}</td>
                            <td><span class="user-link" onclick="nexus.showAuditTrail({{ $f['follower_user_id'] }}, '{{ addslashes($f['follower_username']) }}')">{{ $f['follower_username'] }}</span></td>
                            <td>{{ $f['country_name'] }}</td>
                            <td>{{ $f['pilot_name'] }}</td>
                            <td class="col-right">${{ number_format($f['starting_amount'], 2) }}</td>
                            <td class="col-right text-orange">${{ number_format($f['current_balance'], 2) }}</td>
                            <td class="col-right {{ $netProfitClass }}">${{ number_format($f['net_profit'], 2) }}</td>
                            <td class="col-right text-green">${{ number_format($f['pilot_earned'], 2) }}</td>
                            <td><span class="chip chip-sm {{ $statusClass }}" style="text-transform: uppercase;">{{ str_replace('_', '-', $f['status']) }}</span></td>
                            <td class="col-right text-muted">{{ $f['started_relative'] }}</td>
                        </tr>
                    @endforeach
                @else
                    <tr><td colspan="10"><div class="table-empty"><span class="table-empty-text">No follow records{{ $followStatusFilter !== 'all' ? ' for status: ' . $followStatusLabels[$followStatusFilter] : '' }}</span></div></td></tr>
                @endif
            </tbody>
        </table>
    </div>

@endsection

@section('scripts')
<script>
    nexus.initMonthSelector('monthSelector', '/nexus/pilots');
    nexus.initQuickFilters('/nexus/pilots');

    // Sort headers reload the page with new sort/dir query params (preserves follow_status)
    document.querySelectorAll('.data-table th.sortable').forEach(function (th) {
        th.addEventListener('click', function () {
            var col = this.getAttribute('data-sort');
            var url = new URL(window.location.href);
            var curSort = url.searchParams.get('sort') || @json($currentSort);
            var curDir = url.searchParams.get('dir') || @json($currentDir);
            var newDir = (curSort === col && curDir === 'desc') ? 'asc' : 'desc';
            url.searchParams.set('sort', col);
            url.searchParams.set('dir', newDir);
            window.location.href = url.toString();
        });
    });

    // Follow status filter
    var followStatusFilter = document.getElementById('followStatusFilter');
    if (followStatusFilter) {
        followStatusFilter.addEventListener('change', function () {
            var url = new URL(window.location.href);
            url.searchParams.set('follow_status', this.value);
            window.location.href = url.toString();
        });
    }

    document.addEventListener('DOMContentLoaded', function () {
        var fontColor = '#7a7a7a';
        var gridColor = '#222222';
        var orange = '#e8842a';
        var green = '#3fa776';
        var red = '#cc4444';

        // Rolling WR Distribution
        var wr = @json($wrDist);
        if (wr && wr.length) {
            new Chart(document.getElementById('pilotWrChart').getContext('2d'), {
                type: 'bar',
                data: {
                    labels: wr.map(function (r) { return r.label; }),
                    datasets: [{
                        label: 'Pilots',
                        data: wr.map(function (r) { return r.count; }),
                        backgroundColor: function (ctx) {
                            var l = wr[ctx.dataIndex].label;
                            if (l === '0-50%') return red;
                            if (l === '50-70%') return '#ccaa00';
                            if (l === 'unrated') return '#888888';
                            return green;
                        },
                        borderWidth: 0,
                        barThickness: 22,
                    }]
                },
                options: {
                    responsive: true, maintainAspectRatio: false,
                    plugins: { legend: { display: false }, tooltip: { backgroundColor: '#141414', borderColor: gridColor, borderWidth: 1, cornerRadius: 4 } },
                    scales: {
                        x: { grid: { display: false }, ticks: { font: { size: 9 }, color: fontColor } },
                        y: { grid: { color: gridColor, drawBorder: false }, ticks: { font: { size: 9 }, color: fontColor, stepSize: 1, callback: function (v) { return Number.isInteger(v) ? v : ''; } } }
                    }
                }
            });
        }

        // Daily Activity (dual series: bids + sells)
        var da = @json($dailyChart);
        if (da && da.length) {
            new Chart(document.getElementById('pilotActivityChart').getContext('2d'), {
                type: 'line',
                data: {
                    labels: da.map(function (r) { return r.label; }),
                    datasets: [
                        { label: 'Bids', data: da.map(function (r) { return r.bids; }), borderColor: orange, backgroundColor: 'rgba(232,132,42,0.10)', borderWidth: 2, tension: 0.35, fill: true, pointRadius: 0 },
                        { label: 'Sells', data: da.map(function (r) { return r.sells; }), borderColor: green, backgroundColor: 'rgba(63,167,118,0.06)', borderWidth: 2, tension: 0.35, fill: false, pointRadius: 0 }
                    ]
                },
                options: {
                    responsive: true, maintainAspectRatio: false,
                    plugins: { legend: { display: true, labels: { color: fontColor, font: { size: 9 } } }, tooltip: { backgroundColor: '#141414', borderColor: gridColor, borderWidth: 1, cornerRadius: 4 } },
                    scales: {
                        x: { grid: { display: false }, ticks: { font: { size: 9 }, color: fontColor } },
                        y: { grid: { color: gridColor, drawBorder: false }, ticks: { font: { size: 9 }, color: fontColor, stepSize: 1, callback: function (v) { return Number.isInteger(v) ? v : ''; } } }
                    }
                }
            });
        }

        // Active Follows Per Pilot (horizontal bar)
        var fp = @json($followsChart);
        if (fp && fp.length) {
            new Chart(document.getElementById('pilotFollowsChart').getContext('2d'), {
                type: 'bar',
                data: {
                    labels: fp.map(function (r) { return r.label; }),
                    datasets: [{
                        label: 'Active Follows',
                        data: fp.map(function (r) { return r.count; }),
                        backgroundColor: orange,
                        borderWidth: 0,
                        barThickness: 12,
                    }]
                },
                options: {
                    indexAxis: 'y',
                    responsive: true, maintainAspectRatio: false,
                    plugins: { legend: { display: false }, tooltip: { backgroundColor: '#141414', borderColor: gridColor, borderWidth: 1, cornerRadius: 4 } },
                    scales: {
                        x: { grid: { color: gridColor, drawBorder: false }, ticks: { font: { size: 9 }, color: fontColor, stepSize: 1, callback: function (v) { return Number.isInteger(v) ? v : ''; } } },
                        y: { grid: { display: false }, ticks: { font: { size: 9 }, color: fontColor } }
                    }
                }
            });
        }

        // Follower Capital Per Pilot (horizontal bar, $)
        var cp = @json($capChart);
        if (cp && cp.length) {
            new Chart(document.getElementById('pilotCapChart').getContext('2d'), {
                type: 'bar',
                data: {
                    labels: cp.map(function (r) { return r.label; }),
                    datasets: [{
                        label: 'Follower Capital',
                        data: cp.map(function (r) { return r.count; }),
                        backgroundColor: green,
                        borderWidth: 0,
                        barThickness: 12,
                    }]
                },
                options: {
                    indexAxis: 'y',
                    responsive: true, maintainAspectRatio: false,
                    plugins: { legend: { display: false }, tooltip: { backgroundColor: '#141414', borderColor: gridColor, borderWidth: 1, cornerRadius: 4, callbacks: { label: function (c) { return '$' + Number(c.raw).toLocaleString(); } } } },
                    scales: {
                        x: { grid: { color: gridColor, drawBorder: false }, ticks: { font: { size: 9 }, color: fontColor, callback: function (v) { return '$' + Number(v).toLocaleString(); } } },
                        y: { grid: { display: false }, ticks: { font: { size: 9 }, color: fontColor } }
                    }
                }
            });
        }
    });
</script>
@endsection