{% extends 'wfbo/_layout.html.twig' %}

{% block title %}Admin — WFBO{% endblock %}

{% block wfbo_title %}Dashboard{% endblock %}

{% block wfbo_content %}

    {# ── Overview row (static — no period filter) ── #}
    <div class="row g-3 mb-4">
        {% if is_granted('ROLE_OPERATIONS') %}
        <div class="col-12 col-sm-6 col-xl-3">
            <div class="card h-100" data-testid="stat-total-users">
                <div class="card-body">
                    <p class="stat-label">
                        Total Users
                    </p>
                    <p class="stat-value">
                        {{ totalUsers }}
                    </p>
                </div>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-xl-3">
            <div class="card h-100" data-testid="stat-total-master-agents">
                <div class="card-body">
                    <p class="stat-label">Total Master Agents</p>
                    <p class="stat-value">{{ masterAgentCount }}</p>
                </div>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-xl-3">
            <div class="card h-100" data-testid="stat-total-agents">
                <div class="card-body">
                    <p class="stat-label">Total Agents</p>
                    <p class="stat-value">{{ agentCount }}</p>
                </div>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-xl-3">
            <div class="card h-100" data-testid="stat-total-sub-agents">
                <div class="card-body">
                    <p class="stat-label">Total Sub Agents</p>
                    <p class="stat-value">{{ subAgentCount }}</p>
                </div>
            </div>
        </div>
        {% endif %}
        {% if is_granted('ROLE_FINANCE') %}
        <div class="col-12 col-sm-6 col-xl-3">
            <div class="card h-100" data-testid="stat-pending-deposits">
                <div class="card-body">
                    <p class="stat-label">
                        Pending Deposits
                    </p>
                    <p class="stat-value {% if pendingDeposits > 0 %}stat-value--pending{% endif %}"
                       data-wfbo-pending-target="pendingDepositsValue">
                        {{ pendingDeposits }}
                    </p>
                    <a href="{{ path('app_wfbo_deposits', {status: 'pending'}) }}"
                       class="stat-review-link"
                       data-wfbo-pending-target="pendingDepositsReview"
                       style="{{ pendingDeposits > 0 ? '' : 'display:none;' }}">
                        Review →
                    </a>
                </div>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-xl-3">
            <div class="card h-100" data-testid="stat-pending-withdrawals">
                <div class="card-body">
                    <p class="stat-label">
                        Pending Withdrawals
                    </p>
                    <p class="stat-value {% if pendingWithdrawals > 0 %}stat-value--pending{% endif %}"
                       data-wfbo-pending-target="pendingWithdrawalsValue">
                        {{ pendingWithdrawals }}
                    </p>
                    <a href="{{ path('app_wfbo_withdrawals', {status: 'pending'}) }}"
                       class="stat-review-link"
                       data-wfbo-pending-target="pendingWithdrawalsReview"
                       style="{{ pendingWithdrawals > 0 ? '' : 'display:none;' }}">
                        Review →
                    </a>
                </div>
            </div>
        </div>
        {% endif %}
        {# Cash on Hand — ROLE_AUDITOR only (not Finance/Admin/Super-Admin). #}
        {% if is_granted('ROLE_AUDITOR') %}
        <div class="col-12 col-sm-6 col-xl-3">
            <div class="card h-100" data-testid="stat-cash-on-hand">
                <div class="card-body">
                    <p class="stat-label">Cash on Hand</p>
                    <p class="stat-value {% if cashOnHand < 0 %}stat-value--pending{% endif %}"
                       data-wfbo-pending-target="cashOnHandValue">
                        ₱{{ cashOnHand|number_format(2) }}
                    </p>
                    <p class="stat-label" style="font-size: 11px; color: #9ca3af;">Today</p>
                    <a href="{{ path('app_wfbo_cashflow') }}" class="stat-review-link">
                        View Report →
                    </a>
                </div>
            </div>
        </div>
        {% endif %}
        {% if is_granted('ROLE_FINANCE') %}
        <div class="col-12 col-sm-6 col-xl-3">
            <div class="card h-100" style="border: 1px solid #d1fae5;" data-testid="stat-total-player-balance">
                <div class="card-body">
                    <p class="stat-label">Wallet Balances</p>
                    <p class="stat-value stat-value--green"
                       data-wfbo-pending-target="totalPlayerBalanceValue">
                        ₱{{ walletBalancesByRole.total|number_format(2) }}
                    </p>
                    <div style="font-size: 12px; color: #374151; margin-top: 6px;">
                        <div class="d-flex justify-content-between" data-testid="stat-player-balance-players">
                            <span style="color: #9ca3af;">Players</span>
                            <span>₱{{ walletBalancesByRole.player|number_format(2) }}</span>
                        </div>
                        <div class="d-flex justify-content-between" data-testid="stat-player-balance-sub-agents">
                            <span style="color: #9ca3af;">Sub Agents</span>
                            <span>₱{{ walletBalancesByRole.subAgent|number_format(2) }}</span>
                        </div>
                        <div class="d-flex justify-content-between" data-testid="stat-player-balance-agents">
                            <span style="color: #9ca3af;">Agents</span>
                            <span>₱{{ walletBalancesByRole.agent|number_format(2) }}</span>
                        </div>
                        <div class="d-flex justify-content-between" data-testid="stat-player-balance-master-agents">
                            <span style="color: #9ca3af;">Master Agents</span>
                            <span>₱{{ walletBalancesByRole.masterAgent|number_format(2) }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {% endif %}
    </div>

    {# ── Net revenue hourly trend (independent of the period filter below) ── #}
    {% if is_granted('ROLE_FINANCE') %}
    <div class="card mt-4" style="padding: 20px 24px 16px;" data-testid="wfbo-revenue-trend-chart">
        <p class="stat-label" style="margin-bottom: 12px;">Net Revenue Trend</p>
        <div style="height: 220px; position: relative;">
            <canvas data-controller="wfbo-revenue-trend"
                    data-wfbo-revenue-trend-url-value="{{ path('app_wfbo_revenue_chart') }}">
            </canvas>
        </div>
    </div>
    {% endif %}

    {# ── Approved vs Rejected (10 AM to midnight) ── #}
    {% if is_granted('ROLE_FINANCE') %}
    <div class="card mt-4" style="padding: 20px 24px 16px;" data-testid="wfbo-financial-chart"
         data-controller="wfbo-chart"
         data-wfbo-chart-url-value="{{ path('app_wfbo_dashboard_chart') }}"
         data-wfbo-chart-period-value="today_10_24">
            <div class="flex items-center justify-between gap-2" style="margin-bottom: 12px;">
                <p class="stat-label" style="margin: 0;">Approved Deposits & Withdrawals</p>
                <div class="flex gap-1" style="align-items: center;">
                    <button data-action="wfbo-chart#changePeriod"
                            data-wfbo-chart-period-param="today_10_24"
                            class="period-btn active">Today</button>
                    <button data-action="wfbo-chart#changePeriod"
                            data-wfbo-chart-period-param="yesterday_10_24"
                            class="period-btn">Yesterday</button>
                    <input type="date" data-wfbo-chart-target="dateInput"
                           data-action="change->wfbo-chart#changeDate"
                           style="font-size: 10px; padding: 3px 6px; border: 1px solid #d1d5db; border-radius: 4px;">
                </div>
            </div>
        <div style="height: 220px; position: relative;">
            <canvas data-wfbo-chart-target="canvas"></canvas>
        </div>
        <div style="margin-top: 12px; font-size: 10px; color: #6b7280;">
            <div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px;">
                <div style="text-align: center; background: rgba(59,130,246,0.08); padding: 4px 0; border-radius: 4px;">
                    <div style="font-weight: 600; margin-bottom: 2px;">1st Shift</div>
                    <div data-wfbo-chart-target="shift1"></div>
                </div>
                <div style="text-align: center; background: rgba(245,158,11,0.08); padding: 4px 0; border-radius: 4px;">
                    <div style="font-weight: 600; margin-bottom: 2px;">2nd Shift</div>
                    <div data-wfbo-chart-target="shift2"></div>
                </div>
                <div style="text-align: center; background: rgba(139,92,246,0.08); padding: 4px 0; border-radius: 4px;">
                    <div style="font-weight: 600; margin-bottom: 2px;">3rd Shift</div>
                    <div data-wfbo-chart-target="shift3"></div>
                </div>
            </div>
            <div style="text-align: center; margin-top: 6px; background: #f3f4f6; padding: 4px 0; border-radius: 4px;">
                <div style="font-weight: 600; margin-bottom: 2px;">Off Shift (12AM to 9AM)</div>
                <div data-wfbo-chart-target="shift0"></div>
            </div>
        </div>
        <div style="margin-top: 4px; font-size: 9px; color: #9ca3af; text-align: center;">
            Deposit = Deposit Approved &nbsp;·&nbsp; Withdraw = Withdrawal Approved
        </div>
    </div>
    {% endif %}

    <hr class="my-3" style="border-color: #e5e7eb;">

    {# ── Period filter bar ── #}
    {% set presets = [
        {key: 'today',      label: 'Today'},
        {key: 'yesterday',  label: 'Yesterday'},
        {key: 'this_week',  label: 'This Week'},
        {key: 'last_week',  label: 'Last Week'},
        {key: 'this_month', label: 'This Month'},
        {key: 'last_month', label: 'Last Month'},
        {key: 'this_year',  label: 'This Year'},
        {key: 'last_year',  label: 'Last Year'},
    ] %}
    <div class="period-filter-bar">
        {% for p in presets %}
            <a href="{{ path('app_wfbo_dashboard', {period: p.key}) }}"
               class="period-pill {% if period == p.key %}is-active{% endif %}"
               data-testid="period-{{ p.key }}">
                {{ p.label }}
            </a>
        {% endfor %}

        {# Custom month picker #}
        <form method="GET" action="{{ path('app_wfbo_dashboard') }}" style="display:inline-flex; align-items:center; gap:6px;" data-testid="form-custom-month">
            <input type="month" name="_month_val"
                   value="{{ period starts with 'month_' ? period|replace({'month_': '', '_': '-'}) : '' }}"
                   class="period-filter-input period-filter-input--light {% if period starts with 'month_' %}is-active{% endif %}"
                   data-testid="input-custom-month">
            <button type="submit"
                    class="period-filter-go period-filter-go--light {% if period starts with 'month_' %}is-active{% endif %}">
                Go
            </button>
            {# JS converts 'YYYY-MM' → period=month_YYYY_MM on submit #}
            <input type="hidden" name="period" id="hidden-period-month" value="">
        </form>

        {# Custom year picker #}
        <form method="GET" action="{{ path('app_wfbo_dashboard') }}" style="display:inline-flex; align-items:center; gap:6px;" data-testid="form-custom-year">
            <input type="number" name="_year_val" min="2020" max="2100" placeholder="Year"
                   value="{{ period starts with 'year_' ? period|replace({'year_': ''}) : '' }}"
                   class="period-filter-input period-filter-input--light {% if period starts with 'year_' %}is-active{% endif %}"
                   style="width:90px;"
                   data-testid="input-custom-year">
            <button type="submit"
                    class="period-filter-go period-filter-go--light {% if period starts with 'year_' %}is-active{% endif %}">
                Go
            </button>
            <input type="hidden" name="period" id="hidden-period-year" value="">
        </form>

        <a href="{{ path('app_wfbo_dashboard', {period: period}) }}"
           class="btn btn-sm btn-outline-secondary ms-auto"
           data-testid="btn-dashboard-refresh">
            ↻ Refresh
        </a>
    </div>

    <script>
    (function () {
        var monthForm = document.querySelector('[data-testid="form-custom-month"]');
        if (monthForm) {
            monthForm.addEventListener('submit', function (e) {
                var val = monthForm.querySelector('[data-testid="input-custom-month"]').value;
                if (!val) { e.preventDefault(); return; }
                var parts = val.split('-');
                document.getElementById('hidden-period-month').value = 'month_' + parts[0] + '_' + parts[1];
                monthForm.querySelector('[name="_month_val"]').disabled = true;
            });
        }
        var yearForm = document.querySelector('[data-testid="form-custom-year"]');
        if (yearForm) {
            yearForm.addEventListener('submit', function (e) {
                var val = yearForm.querySelector('[data-testid="input-custom-year"]').value;
                if (!val) { e.preventDefault(); return; }
                document.getElementById('hidden-period-year').value = 'year_' + val;
                yearForm.querySelector('[name="_year_val"]').disabled = true;
            });
        }
    })();
    </script>

    {# ── Financial stats row ── #}
    {% if is_granted('ROLE_FINANCE') or is_granted('ROLE_OPERATIONS') %}
    <div class="row g-3 mb-4">
        {% if is_granted('ROLE_OPERATIONS') %}
        <div class="col-12 col-sm-6 col-xl-3" data-testid="stat-gameCount">
            <div class="card h-100">
                <div class="card-body">
                    <p class="stat-label">Total Game Play</p>
                    <p class="stat-value--lg">{{ stats.raceCount }}</p>
                    <p class="stat-sub">{{ periodLabel }}</p>
                </div>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-xl-3" data-testid="stat-activePlayers">
            <div class="card h-100">
                <div class="card-body">
                    <p class="stat-label">Active Players</p>
                    <p class="stat-value--lg" data-testid="stat-activePlayers-value">{{ stats.activePlayers }}</p>
                    <p class="stat-sub" data-testid="stat-activePlayers-percent">
                        {{ stats.activePlayersPercent }}% of {{ stats.playerPopulation|number_format }} players
                    </p>
                    <p class="stat-sub">{{ periodLabel }}</p>
                </div>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-xl-3" data-testid="stat-playersRegistered">
            <div class="card h-100">
                <div class="card-body">
                    <p class="stat-label">Players Registered</p>
                    <p class="stat-value--lg">{{ stats.playersRegistered }}</p>
                    <p class="stat-sub">{{ periodLabel }}</p>
                </div>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-xl-3" data-testid="stat-playersLoggedIn">
            <div class="card h-100">
                <div class="card-body">
                    <p class="stat-label">Players Logged In</p>
                    <p class="stat-value--lg" data-testid="stat-playersLoggedIn-value">{{ stats.playersLoggedIn }}</p>
                    <p class="stat-sub">{{ periodLabel }}</p>
                </div>
            </div>
        </div>
        {% endif %}
        {% if is_granted('ROLE_FINANCE') %}
        {% set tooltip = {
            betAmount:   'Total amount wagered by all players. This is turnover, not revenue.',
            commissions: 'Share of bets earned by agents and master agents from their referrals.',
            revenue:     'Actual income: Total Bets − Total Payout − Commissions.',
            winAmount:   'Total amount paid back to players as winnings. This cycles back from total bets.',
            payoutRate:  'Percentage of total bets returned to players as winnings.',
        } %}
        {% set financeCards = [
            {key: 'betAmount',   label: 'Total Bets',     value: stats.betAmount,   race: raceStats.betAmount,   hl: hlStats.betAmount,   cg: cgStats.betAmount,   mn: mgStats.betAmount,   fk: fkStats.betAmount,   ez: ezStats.betAmount,   pk: pkStats.betAmount,   h2h: h2hStats.betAmount,   lr: lrStats.betAmount},
            {key: 'commissions', label: 'Commissions',     value: stats.commissions, race: raceStats.commissions, hl: hlStats.commissions, cg: cgStats.commissions, mn: mgStats.commissions, fk: fkStats.commissions, ez: ezStats.commissions, pk: pkStats.commissions, h2h: h2hStats.commissions, lr: lrStats.commissions},
            {key: 'revenue',     label: 'Net Revenue',     value: stats.revenue,     race: raceStats.revenue,     hl: hlStats.revenue,     cg: cgStats.revenue,     mn: mgStats.revenue,     fk: fkStats.revenue,     ez: ezStats.revenue,     pk: pkStats.revenue,     h2h: h2hStats.revenue,     lr: lrStats.revenue},
        ] %}
        {% for card in financeCards %}
            <div class="col-12 col-sm-6 col-xl-3" data-testid="stat-{{ card.key }}">
                <div class="card h-100">
                    <div class="card-body">
                        <p class="stat-label">
                            {{ card.label }}
                            <span data-bs-toggle="tooltip" data-bs-title="{{ tooltip[card.key] }}" class="stat-tooltip-icon">
                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
                            </span>
                        </p>
                        <p class="stat-value--lg">₱{{ card.value|number_format(2) }}</p>
                        <p class="stat-sub">{{ periodLabel }}</p>
                        <div class="stat-game-breakdown">
                            <span class="stat-game-badge">VK: ₱{{ card.race|number_format(2) }}</span>
                            <span class="stat-game-badge">PT: ₱{{ card.hl|number_format(2) }}</span>
                            <span class="stat-game-badge">CG: ₱{{ card.cg|number_format(2) }}</span>
                            <span class="stat-game-badge">MN: ₱{{ card.mn|number_format(2) }}</span>
                            <span class="stat-game-badge">FK: ₱{{ card.fk|number_format(2) }}</span>
                            <span class="stat-game-badge">EZ: ₱{{ card.ez|default(0)|number_format(2) }}</span>
                            <span class="stat-game-badge">PK: ₱{{ card.pk|default(0)|number_format(2) }}</span>
                            <span class="stat-game-badge">H2H: ₱{{ card.h2h|default(0)|number_format(2) }}</span>
                            <span class="stat-game-badge">LR: ₱{{ card.lr|default(0)|number_format(2) }}</span>
                        </div>

                    </div>
                </div>
            </div>
        {% endfor %}
        <div class="col-12 col-sm-6 col-xl-3" data-testid="stat-winAmount">
            <div class="card h-100">
                <div class="card-body">
                    <p class="stat-label">
                        Total Payout
                        <span data-bs-toggle="tooltip" data-bs-title="{{ tooltip.winAmount }}" class="stat-tooltip-icon">
                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
                        </span>
                    </p>
                    <p class="stat-value--lg">₱{{ stats.winAmount|number_format(2) }}</p>
                    <p class="stat-sub">{{ periodLabel }}</p>
                    <div class="stat-game-breakdown">
                        <span class="stat-game-badge">VK: ₱{{ raceStats.winAmount|number_format(2) }}</span>
                        <span class="stat-game-badge">PT: ₱{{ hlStats.winAmount|number_format(2) }}</span>
                        <span class="stat-game-badge">CG: ₱{{ cgStats.winAmount|number_format(2) }}</span>
                        <span class="stat-game-badge">MN: ₱{{ mgStats.winAmount|number_format(2) }}</span>
                        <span class="stat-game-badge">FK: ₱{{ fkStats.winAmount|number_format(2) }}</span>
                        <span class="stat-game-badge">EZ: ₱{{ ezStats.winAmount|number_format(2) }}</span>
                        <span class="stat-game-badge">PK: ₱{{ pkStats.winAmount|number_format(2) }}</span>
                        <span class="stat-game-badge">H2H: ₱{{ h2hStats.winAmount|number_format(2) }}</span>
                        <span class="stat-game-badge">LR: ₱{{ lrStats.winAmount|number_format(2) }}</span>
                    </div>
                    <p class="stat-sub" style="margin-top:4px;">
                        Payout Rate:
                        <span data-bs-toggle="tooltip" data-bs-title="{{ tooltip.payoutRate }}" class="stat-tooltip-icon">
                            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
                        </span>
                        <strong style="color:#2563eb;">{{ stats.winRate|number_format(2) }}%</strong>
                    </p>
                </div>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-xl-4" data-testid="stat-winLooseRate">
            <div class="card h-100">
                <div class="card-body">
                    <p class="stat-label">Win vs Loss Rate</p>
                    <p class="stat-sub">{{ periodLabel }}</p>
                    <div class="stat-rate-row">
                        <span class="stat-rate-label">Win Rate</span>
                        <span class="stat-rate-value" style="color:#059669;">{{ stats.winRateByCount|number_format(2) }}%</span>
                    </div>
                    <div class="stat-game-breakdown" style="margin-bottom:6px;">
                        <span class="stat-game-badge">VK: {{ raceWinRateByCount|number_format(2) }}%</span>
                        <span class="stat-game-badge">PT: {{ hlWinRateByCount|number_format(2) }}%</span>
                        <span class="stat-game-badge">CG: {{ cgWinRateByCount|number_format(2) }}%</span>
                        <span class="stat-game-badge">MN: {{ mgWinRateByCount|number_format(2) }}%</span>
                        <span class="stat-game-badge">FK: {{ fkWinRateByCount|number_format(2) }}%</span>
                        <span class="stat-game-badge">EZ: {{ ezWinRateByCount|number_format(2) }}%</span>
                        <span class="stat-game-badge">PK: {{ pkWinRateByCount|number_format(2) }}%</span>
                        <span class="stat-game-badge">H2H: {{ h2hWinRateByCount|number_format(2) }}%</span>
                        <span class="stat-game-badge">LR: {{ lrWinRateByCount|number_format(2) }}%</span>
                    </div>
                    <div class="stat-rate-row">
                        <span class="stat-rate-label">Loss Rate</span>
                        <span class="stat-rate-value" style="color:#dc2626;">{{ stats.looseRateByCount|number_format(2) }}%</span>
                    </div>
                    <div class="stat-game-breakdown">
                        <span class="stat-game-badge">VK: {{ (100 - raceWinRateByCount)|round(2) }}%</span>
                        <span class="stat-game-badge">PT: {{ (100 - hlWinRateByCount)|round(2) }}%</span>
                        <span class="stat-game-badge">CG: {{ (100 - cgWinRateByCount)|round(2) }}%</span>
                        <span class="stat-game-badge">MN: {{ (100 - mgWinRateByCount)|round(2) }}%</span>
                        <span class="stat-game-badge">FK: {{ (100 - fkWinRateByCount)|round(2) }}%</span>
                        <span class="stat-game-badge">EZ: {{ (100 - ezWinRateByCount)|round(2) }}%</span>
                        <span class="stat-game-badge">PK: {{ (100 - pkWinRateByCount)|round(2) }}%</span>
                        <span class="stat-game-badge">H2H: {{ (100 - h2hWinRateByCount)|round(2) }}%</span>
                        <span class="stat-game-badge">LR: {{ (100 - lrWinRateByCount)|round(2) }}%</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-xl-4" data-testid="stat-deposit-requests">
            <div class="card h-100">
                <div class="card-body">
                    <p class="stat-label">
                        Deposit Requests
                    </p>
                    <p class="stat-sub mb-3">{{ periodLabel }}</p>
                    <div class="d-flex">
                        <div class="flex-fill pe-3">
                            <p class="split-stat__label--success">Approved</p>
                            <p class="split-stat__value--success" data-testid="stat-deposits-approved">{{ depositsApproved }}</p>
                            <p class="split-stat__sub--success">₱{{ depositsApprovedAmount|number_format(2) }}</p>
                            <a href="{{ path('app_wfbo_deposits', {status: 'approved'}) }}"
                               class="split-stat__link--success">
                                View →
                            </a>
                        </div>
                        <div class="split-stat__divider"></div>
                        <div class="flex-fill ps-3">
                            <p class="split-stat__label--danger">Rejected</p>
                            <p class="split-stat__value--danger" data-testid="stat-deposits-rejected">{{ depositsRejected }}</p>
                            <p class="split-stat__sub--danger">₱{{ depositsRejectedAmount|number_format(2) }}</p>
                            <a href="{{ path('app_wfbo_deposits', {status: 'rejected'}) }}"
                               class="split-stat__link--danger">
                                View →
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-xl-4" data-testid="stat-withdrawal-requests">
            <div class="card h-100">
                <div class="card-body">
                    <p class="stat-label">
                        Withdrawal Requests
                    </p>
                    <p class="stat-sub mb-3">{{ periodLabel }}</p>
                    <div class="d-flex">
                        <div class="flex-fill pe-3">
                            <p class="split-stat__label--success">Approved</p>
                            <p class="split-stat__value--success" data-testid="stat-withdrawals-approved">{{ withdrawalsApproved }}</p>
                            <p class="split-stat__sub--success">₱{{ withdrawalsApprovedAmount|number_format(2) }}</p>
                            <a href="{{ path('app_wfbo_withdrawals', {status: 'approved'}) }}"
                               class="split-stat__link--success">
                                View →
                            </a>
                        </div>
                        <div class="split-stat__divider"></div>
                        <div class="flex-fill ps-3">
                            <p class="split-stat__label--danger">Rejected</p>
                            <p class="split-stat__value--danger" data-testid="stat-withdrawals-rejected">{{ withdrawalsRejected }}</p>
                            <p class="split-stat__sub--danger">₱{{ withdrawalsRejectedAmount|number_format(2) }}</p>
                            <a href="{{ path('app_wfbo_withdrawals', {status: 'rejected'}) }}"
                               class="split-stat__link--danger">
                                View →
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {% endif %}
    </div>
    {% endif %}

{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
    document.addEventListener('DOMContentLoaded', function () {
        document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(function (el) {
            new bootstrap.Tooltip(el);
        });
    });
    </script>
{% endblock %}