@extends('user.layouts.app', ['title' => 'Merchant Dashboard'])

@section('content')
    @php
        $payinStats = $payinStats ?? [
            'total_amount' => 0,
            'weekly_amount' => 0,
            'total_orders' => 0,
            'weekly_orders' => 0,
            'success_orders' => 0,
            'failed_orders' => 0,
            'pending_orders' => 0,
        ];
        $payoutStats = $payoutStats ?? [
            'total_amount' => 0,
            'weekly_amount' => 0,
            'total_orders' => 0,
            'weekly_orders' => 0,
            'success_orders' => 0,
            'failed_orders' => 0,
            'pending_orders' => 0,
        ];
        $settlementDebitTotalAmount = $settlementDebitTotalAmount ?? 0;
        $manualDepositTotalAmount = $manualDepositTotalAmount ?? 0;
        $availableBalance = $availableBalance ?? 0;
        $parentRange = $parentRange ?? request('parent_range', 'overall');
        $transactionStats = $transactionStats ?? [
            'total_orders' => 0,
            'completed_orders' => 0,
            'pending_orders' => 0,
            'failed_orders' => 0,
        ];
        $transactionTotal = max(0, (int) ($transactionStats['total_orders'] ?? 0));
        $transactionCompleted = max(0, (int) ($transactionStats['completed_orders'] ?? 0));
        $transactionPending = max(0, (int) ($transactionStats['pending_orders'] ?? 0));
        $transactionFailed = max(0, (int) ($transactionStats['failed_orders'] ?? 0));
        $transactionTotalForPct = max(1, $transactionTotal);
        $transactionCompletedPct = (int) round(($transactionCompleted / $transactionTotalForPct) * 100);
        $transactionPendingPct = (int) round(($transactionPending / $transactionTotalForPct) * 100);
        $transactionFailedPct = max(0, 100 - $transactionCompletedPct - $transactionPendingPct);
    @endphp

    {{-- <div class="d-flex align-items-center justify-content-between flex-wrap gap-2 mb-3">
        <div>
            <h1 class="h4 mb-0">Merchant Dashboard</h1>
            <div class="text-muted small">Same layout as admin, with your own account information.</div>
        </div>
    </div> --}}

    <div class="d-flex justify-content-end mb-3">
        <form method="GET" class="user-dashboard-parent-toggle user-dashboard-parent-filter-form" data-realtime-search data-realtime-delay="0">
            @foreach (request()->except('parent_range') as $key => $value)
                @if (is_scalar($value))
                    <input type="hidden" name="{{ $key }}" value="{{ $value }}">
                @endif
            @endforeach
            <div class="btn-group" role="group" aria-label="Dashboard Range Toggle">
                <button type="submit" name="parent_range" value="daily" class="btn btn-sm {{ $parentRange === 'daily' ? 'btn-dark' : 'btn-outline-secondary' }}">Daily</button>
                <button type="submit" name="parent_range" value="overall" class="btn btn-sm {{ $parentRange === 'overall' ? 'btn-dark' : 'btn-outline-secondary' }}">Overall</button>
            </div>
        </form>
    </div>

    <div class="row g-3">
        <div class="col-12 col-xl-6">
            <div class="card admin-card h-100 user-payin-card">
                <div class="card-body">
                    <div class="d-flex align-items-start justify-content-between gap-3 user-payin-card-header">
                        <div>
                            <div class="admin-kpi-title">
                                <span class="admin-kpi-icon user-payin-title-icon"><i class="bi bi-wallet2"></i></span>
                                Total Payin
                            </div>
                            <div class="small mt-1">Quick financial snapshot</div>
                        </div>
                        {{-- <span class="user-payin-range-badge">Weekly</span> --}}
                    </div>

                    <div class="row g-2 mt-1">
                        <div class="col-12 col-md-6">
                            <div class="user-payin-mini-card">
                                <div class="user-payin-mini-icon is-total-amount"><i class="bi bi-cash-coin"></i></div>
                                <div>
                                    <div class="user-payin-mini-label">TOTAL PAYIN (PKR)</div>
                                    <div class="user-payin-mini-value">Rs {{ number_format((float) ($payinStats['total_amount'] ?? 0), 2) }}</div>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-md-6">
                            <div class="user-payin-mini-card">
                                <div class="user-payin-mini-icon is-weekly-amount"><i class="bi bi-calendar-week"></i></div>
                                <div>
                                    {{-- <div class="user-payin-mini-label">WEEKLY PAYIN (PKR)</div> --}}
                                    <div class="user-payin-mini-value">Rs {{ number_format((float) ($payinStats['weekly_amount'] ?? 0), 2) }}</div>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-md-6">
                            <div class="user-payin-mini-card">
                                <div class="user-payin-mini-icon is-total-orders"><i class="bi bi-receipt"></i></div>
                                <div>
                                    <div class="user-payin-mini-label">TOTAL PAYIN ORDERS</div>
                                    <div class="user-payin-mini-value">{{ number_format((int) ($payinStats['total_orders'] ?? 0)) }}</div>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-md-6">
                            <div class="user-payin-mini-card">
                                <div class="user-payin-mini-icon is-weekly-orders"><i class="bi bi-clock-history"></i></div>
                                <div>
                                    <div class="user-payin-mini-label">WEEKLY PAYIN ORDERS</div>
                                    <div class="user-payin-mini-value">{{ number_format((int) ($payinStats['weekly_orders'] ?? 0)) }}</div>
                                </div>
                            </div>
                        </div>
                        {{-- <div class="col-12 col-md-6">
                            <div class="user-payin-mini-card">
                                <div class="user-payin-mini-icon is-success"><i class="bi bi-check2-circle"></i></div>
                                <div>
                                    <div class="user-payin-mini-label">SUCCESS PAYIN ORDERS</div>
                                    <div class="user-payin-mini-value">{{ number_format((int) ($payinStats['success_orders'] ?? 0)) }}</div>
                                </div>
                            </div>
                        </div> --}}
                        {{-- <div class="col-12 col-md-6">
                            <div class="user-payin-mini-card">
                                <div class="user-payin-mini-icon is-pending"><i class="bi bi-hourglass-split"></i></div>
                                <div>
                                    <div class="user-payin-mini-label">PENDING PAYIN ORDERS</div>
                                    <div class="user-payin-mini-value">{{ number_format((int) ($payinStats['pending_orders'] ?? 0)) }}</div>
                                </div>
                            </div>
                        </div> --}}
                    </div>
                </div>
            </div>
        </div>

        <div class="col-12 col-xl-6">
            <div class="card admin-card h-100 user-payout-card">
                <div class="card-body">
                    <div class="d-flex align-items-start justify-content-between gap-3 user-payout-card-header">
                        <div>
                            <div class="admin-kpi-title">
                                <span class="admin-kpi-icon user-payout-title-icon"><i class="bi bi-bank2"></i></span>
                                Total Payout
                            </div>
                            <div class="small mt-1">Quick financial snapshot</div>
                        </div>
                        {{-- <span class="user-payout-range-badge">Weekly</span> --}}
                    </div>

                    <div class="row g-2 mt-1">
                        <div class="col-12 col-md-6">
                            <div class="user-payout-mini-card">
                                <div class="user-payout-mini-icon is-total-amount"><i class="bi bi-cash-coin"></i></div>
                                <div>
                                    <div class="user-payout-mini-label">TOTAL PAYOUT (PKR)</div>
                                    <div class="user-payout-mini-value">Rs {{ number_format((float) ($payoutStats['total_amount'] ?? 0), 2) }}</div>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-md-6">
                            <div class="user-payout-mini-card">
                                <div class="user-payout-mini-icon is-weekly-amount"><i class="bi bi-calendar-week"></i></div>
                                <div>
                                    <div class="user-payout-mini-label">WEEKLY PAYOUT (PKR)</div>
                                    <div class="user-payout-mini-value">Rs {{ number_format((float) ($payoutStats['weekly_amount'] ?? 0), 2) }}</div>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-md-6">
                            <div class="user-payout-mini-card">
                                <div class="user-payout-mini-icon is-total-orders"><i class="bi bi-receipt"></i></div>
                                <div>
                                    <div class="user-payout-mini-label">TOTAL PAYOUT ORDERS</div>
                                    <div class="user-payout-mini-value">{{ number_format((int) ($payoutStats['total_orders'] ?? 0)) }}</div>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-md-6">
                            <div class="user-payout-mini-card">
                                <div class="user-payout-mini-icon is-weekly-orders"><i class="bi bi-clock-history"></i></div>
                                <div>
                                    <div class="user-payout-mini-label">WEEKLY PAYOUT ORDERS</div>
                                    <div class="user-payout-mini-value">{{ number_format((int) ($payoutStats['weekly_orders'] ?? 0)) }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-12 col-xl-6">
            <div class="card admin-card h-100 user-settlement-card">
                <div class="card-body">
                    <div class="d-flex align-items-start justify-content-between gap-3 user-settlement-card-header">
                        <div>
                            <div class="admin-kpi-title">
                                <span class="admin-kpi-icon user-settlement-title-icon"><i class="bi bi-journal-check"></i></span>
                                Total Settlements
                            </div>
                            <div class="small mt-1">Only debit settlements</div>
                        </div>
                    </div>

                    <div class="row g-2 mt-1">
                        <div class="col-12 col-md-6">
                            <div class="user-settlement-mini-card">
                                <div class="user-settlement-mini-icon is-total-amount"><i class="bi bi-cash-stack"></i></div>
                                <div>
                                    <div class="user-settlement-mini-label">TOTAL SETTLEMENT DEBIT (PKR)</div>
                                    <div class="user-settlement-mini-value">Rs {{ number_format((float) $settlementDebitTotalAmount, 2) }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-12 col-xl-6">
            <div class="card admin-card h-100 user-manual-deposit-card">
                <div class="card-body">
                    <div class="d-flex align-items-start justify-content-between gap-3 user-manual-deposit-card-header">
                        <div>
                            <div class="admin-kpi-title">
                                <span class="admin-kpi-icon user-manual-deposit-title-icon"><i class="bi bi-piggy-bank"></i></span>
                                Manual Deposit
                            </div>
                            <div class="small mt-1">Only credit settlements</div>
                        </div>
                    </div>

                    <div class="row g-2 mt-1">
                        <div class="col-12 col-md-6">
                            <div class="user-manual-deposit-mini-card">
                                <div class="user-manual-deposit-mini-icon is-total-amount"><i class="bi bi-wallet2"></i></div>
                                <div>
                                    <div class="user-manual-deposit-mini-label">TOTAL MANUAL DEPOSIT (PKR)</div>
                                    <div class="user-manual-deposit-mini-value">Rs {{ number_format((float) $manualDepositTotalAmount, 2) }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-12 col-xl-6">
            <div class="card admin-card h-100 user-available-balance-card">
                <div class="card-body">
                    <div class="d-flex align-items-start justify-content-between gap-3 user-available-balance-card-header">
                        <div>
                            <div class="admin-kpi-title">
                                <span class="admin-kpi-icon user-available-balance-title-icon"><i class="bi bi-cash-coin"></i></span>
                                Available Balance
                            </div>
                            <div class="small mt-1">Formula will be added next</div>
                        </div>
                    </div>

                    <div class="row g-2 mt-1">
                        <div class="col-12 col-md-6">
                            <div class="user-available-balance-mini-card">
                                <div class="user-available-balance-mini-icon is-total-amount"><i class="bi bi-wallet2"></i></div>
                                <div>
                                    <div class="user-available-balance-mini-label">AVAILABLE BALANCE (PKR)</div>
                                    <div class="user-available-balance-mini-value">Rs {{ number_format((float) $availableBalance, 2) }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-12 col-xl-6">
            <div class="card admin-card h-100">
                <div class="card-body">
                    <div class="d-flex align-items-start justify-content-between gap-3">
                        <div>
                            <div class="admin-kpi-title">Transactions Overview</div>
                        </div>
                        {{-- <button class="btn btn-light btn-sm admin-icon-btn" type="button" aria-label="Menu">
                            <i class="bi bi-three-dots-vertical"></i>
                        </button> --}}
                    </div>

                    <div class="row align-items-center g-3 mt-2">
                        <div class="col-12 col-md-6">
                            <div class="admin-center">
                                <div class="admin-donut admin-donut-lg">
                                    <canvas
                                        id="revenueGoalChart"
                                        width="220"
                                        height="220"
                                        data-completed="{{ $transactionCompletedPct }}"
                                        data-pending="{{ $transactionPendingPct }}"
                                        data-failed="{{ $transactionFailedPct }}"
                                    ></canvas>
                                    <div class="admin-donut-text">
                                        <div class="admin-donut-value">{{ number_format($transactionTotal) }}</div>
                                        <div class="small text-muted">Total Txns</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-md-6">
                            <div class="admin-progress">
                                <div class="d-flex align-items-center justify-content-between">
                                    <div class="text-muted small">Completion rate</div>
                                    <div class="fw-semibold">{{ $transactionCompletedPct }}%</div>
                                </div>
                                <div class="progress mt-2" role="progressbar" aria-label="Completion rate" aria-valuenow="{{ $transactionCompletedPct }}" aria-valuemin="0" aria-valuemax="100">
                                    <div class="progress-bar bg-success" style="width: {{ $transactionCompletedPct }}%"></div>
                                </div>
                                <div class="row g-2 mt-3">
                                    <div class="col-3">
                                        <div class="admin-color-tile bg-primary text-white">
                                            <div class="admin-color-tile-value">{{ number_format($transactionTotal) }}</div>
                                            <div class="admin-color-tile-label">Total</div>
                                        </div>
                                    </div>
                                    <div class="col-3">
                                        <div class="admin-color-tile bg-success text-white">
                                            <div class="admin-color-tile-value">{{ number_format($transactionCompleted) }}</div>
                                            <div class="admin-color-tile-label">Done</div>
                                        </div>
                                    </div>
                                    <div class="col-3">
                                        <div class="admin-color-tile bg-warning text-dark">
                                            <div class="admin-color-tile-value">{{ number_format($transactionPending) }}</div>
                                            <div class="admin-color-tile-label">Pending</div>
                                        </div>
                                    </div>
                                    <div class="col-3">
                                        <div class="admin-color-tile bg-danger text-white">
                                            <div class="admin-color-tile-value">{{ number_format($transactionFailed) }}</div>
                                            <div class="admin-color-tile-label">Failed</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-12 col-xl-6">
            <div class="card admin-card h-100">
                <div class="card-body">
                    <div class="d-flex align-items-start justify-content-between gap-3">
                        <div>
                            <div class="admin-kpi-title">Security Overview</div>
                            <div class="admin-kpi-value mt-2">{{ $user->last_login_at?->format('H:i') ?: '--:--' }}</div>
                            <div class="small text-success">{{ $user->last_login_at?->format('Y-m-d') ?: 'First login pending' }}</div>
                        </div>
                        {{-- <div class="d-flex align-items-center gap-2">
                            <select class="form-select form-select-sm admin-select" aria-label="Range">
                                <option selected>Current</option>
                                <option>Recent</option>
                                <option>Archive</option>
                            </select>
                            <button class="btn btn-light btn-sm admin-icon-btn" type="button" aria-label="Menu">
                                <i class="bi bi-three-dots-vertical"></i>
                            </button>
                        </div> --}}
                    </div>
                    <div class="admin-chart-wrap mt-3">
                        <canvas id="ordersTrendChart" height="165"></canvas>
                    </div>
                    <div class="row g-2 mt-1 small">
                        <div class="col-12 col-sm-4">
                            <div class="admin-stat">
                                <div class="admin-stat-label">Last Login IP</div>
                                <div class="admin-stat-value">{{ $user->last_login_ip ?: 'N/A' }}</div>
                            </div>
                        </div>
                        <div class="col-12 col-sm-4">
                            <div class="admin-stat">
                                <div class="admin-stat-label">Password</div>
                                <div class="admin-stat-value">Hashed</div>
                            </div>
                        </div>
                        <div class="col-12 col-sm-4">
                            <div class="admin-stat">
                                <div class="admin-stat-label">Visibility</div>
                                <div class="admin-stat-value">Private</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-12 col-xl-6">
            <div class="card admin-card h-100 admin-equal-xl">
                <div class="card-body">
                    <div class="d-flex align-items-start justify-content-between">
                        <div class="admin-kpi-title">Profile Snapshot</div>
                        {{-- <button class="btn btn-light btn-sm admin-icon-btn" type="button" aria-label="Menu">
                            <i class="bi bi-three-dots-vertical"></i>
                        </button> --}}
                    </div>

                    <div class="row g-3 mt-2">
                        <div class="col-12 col-md-6">
                            <div class="admin-mini-card">
                                <div class="admin-mini-icon bg-primary-subtle text-primary"><i class="bi bi-envelope"></i></div>
                                <div>
                                    <div class="admin-mini-value">{{ $user->email }}</div>
                                    <div class="admin-mini-label">Email</div>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-md-6">
                            <div class="admin-mini-card">
                                <div class="admin-mini-icon bg-info-subtle text-info"><i class="bi bi-telephone"></i></div>
                                <div>
                                    <div class="admin-mini-value">{{ $user->phone ?: 'N/A' }}</div>
                                    <div class="admin-mini-label">Phone</div>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-md-6">
                            <div class="admin-mini-card">
                                <div class="admin-mini-icon bg-warning-subtle text-warning"><i class="bi bi-geo-alt"></i></div>
                                <div>
                                    <div class="admin-mini-value">{{ $user->city ?: 'N/A' }}</div>
                                    <div class="admin-mini-label">City</div>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-md-6">
                            <div class="admin-mini-card">
                                <div class="admin-mini-icon bg-danger-subtle text-danger"><i class="bi bi-globe"></i></div>
                                <div>
                                    <div class="admin-mini-value">{{ $user->country ?: 'N/A' }}</div>
                                    <div class="admin-mini-label">Country</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- <div class="col-12 col-xl-6">
            <div class="card admin-card h-100 admin-card-soft admin-equal-xl admin-clicks-card">
                <div class="card-body">
                    <div class="d-flex align-items-start justify-content-between">
                        <div>
                            <div class="admin-kpi-title">About Me</div>
                            <div class="admin-kpi-value mt-2">{{ $user->about_me ? 'Filled' : 'Pending' }}</div>
                        </div>
                         <button class="btn btn-light btn-sm admin-icon-btn" type="button" aria-label="Menu">
                            <i class="bi bi-three-dots-vertical"></i>
                        </button>
                    </div>
                    <div class="admin-chart-wrap mt-3">
                        <canvas id="clicksChart" height="140"></canvas>
                    </div>
                    <div class="small text-muted mt-2">{{ $user->about_me ?: 'You can add profile details later. For now this dashboard matches the admin design structure.' }}</div>
                </div>
            </div>
        </div> --}}

        {{-- <div class="col-12 col-sm-6 col-xl-3">
            <div class="card admin-card h-100">
                <div class="card-body">
                    <div class="d-flex align-items-start justify-content-between">
                        <div class="admin-kpi-title">Account Status</div>
                         <button class="btn btn-light btn-sm admin-icon-btn" type="button" aria-label="Menu">
                            <i class="bi bi-three-dots-vertical"></i>
                        </button>
                    </div>
                    <div class="admin-center mt-3">
                        <div class="admin-donut">
                            <canvas id="activeUsersChart" width="170" height="170"></canvas>
                            <div class="admin-donut-text">
                                <div class="admin-donut-value">{{ $user->status ? 'ON' : 'OFF' }}</div>
                            </div>
                        </div>
                        <div class="mt-2 text-center">
                            <div class="admin-kpi-subvalue">{{ $user->status ? 'Active' : 'Inactive' }}</div>
                            <div class="small text-success">{{ $user->email }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div> --}}

        {{-- <div class="col-12 col-xl-4">
            <div class="card admin-card h-100">
                <div class="card-body">
                    <div class="d-flex align-items-start justify-content-between">
                        <div class="admin-kpi-title">Login Activity</div>
                         <button class="btn btn-light btn-sm admin-icon-btn" type="button" aria-label="Menu">
                            <i class="bi bi-three-dots-vertical"></i>
                        </button>
                    </div>
                    <div class="admin-chart-wrap mt-3">
                        <canvas id="salesViewsChart" height="140"></canvas>
                    </div>
                    <div class="d-flex align-items-center justify-content-center gap-3 small text-muted mt-2">
                        <span class="d-inline-flex align-items-center gap-1"><span class="admin-legend admin-legend-primary"></span> This Week</span>
                        <span class="d-inline-flex align-items-center gap-1"><span class="admin-legend admin-legend-muted"></span> Last Week</span>
                    </div>
                </div>
            </div>
        </div> --}}

        <div class="col-12 col-xl-12">
            <div class="card admin-card h-100">
                <div class="card-body">
                    <div class="d-flex align-items-start justify-content-between">
                        <div>
                            <div class="admin-kpi-title">Overall Information</div>
                            <div class="small text-muted mt-1">
                                <span class="fw-semibold">{{ $user->city ?: 'City pending' }}</span>
                                <span class="mx-2 text-muted">|</span>
                                <span class="fw-semibold">{{ $user->country ?: 'Country pending' }}</span>
                            </div>
                        </div>
                        {{-- <button class="btn btn-light btn-sm admin-icon-btn" type="button" aria-label="Menu">
                            <i class="bi bi-three-dots-vertical"></i>
                        </button> --}}
                    </div>

                    <div class="row g-3 mt-2">
                        <div class="col-12 col-md-4">
                            <div class="admin-info-card bg-info-subtle border-info-subtle">
                                <div class="admin-info-icon text-info"><i class="bi bi-person-vcard"></i></div>
                                <div class="admin-info-value">{{ $user->username ?: '--' }}</div>
                                <div class="admin-info-label">Username</div>
                            </div>
                        </div>
                        <div class="col-12 col-md-4">
                            <div class="admin-info-card bg-warning-subtle border-warning-subtle">
                                <div class="admin-info-icon text-warning"><i class="bi bi-house-door"></i></div>
                                <div class="admin-info-value">{{ $user->address ? 'Saved' : 'Missing' }}</div>
                                <div class="admin-info-label">Address</div>
                            </div>
                        </div>
                        <div class="col-12 col-md-4">
                            <div class="admin-info-card bg-success-subtle border-success-subtle">
                                <div class="admin-info-icon text-success"><i class="bi bi-shield-lock"></i></div>
                                <div class="admin-info-value">{{ $user->status ? 'Active' : 'Locked' }}</div>
                                <div class="admin-info-label">Account</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('head')
    <style>
        .user-dashboard-parent-toggle .btn {
            min-width: 92px;
            font-weight: 600;
        }

        .user-payin-card {
            border: 0;
            border-radius: 16px;
            background: linear-gradient(145deg, #57a5d7 0%, #3d8dc8 58%, #2f7fc5 100%);
            color: #fff;
            position: relative;
            overflow: hidden;
        }

        .user-payin-card::before,
        .user-payin-card::after {
            content: '';
            position: absolute;
            border-radius: 999px;
            pointer-events: none;
            opacity: 0.2;
        }

        .user-payin-card::before {
            width: 180px;
            height: 180px;
            right: -45px;
            top: -62px;
            background: radial-gradient(circle at center, #8fd2f6 0%, #67b9e8 100%);
        }

        .user-payin-card::after {
            width: 230px;
            height: 230px;
            left: -130px;
            bottom: -135px;
            background: radial-gradient(circle at center, #8accf4 0%, #62afe2 100%);
        }

        .user-payin-card .card-body {
            position: relative;
            z-index: 1;
            padding: 1rem;
        }

        .user-payin-card-header .admin-kpi-title,
        .user-payin-card-header .small {
            color: #fff !important;
        }

        .user-payin-title-icon {
            background: rgba(255, 255, 255, 0.2) !important;
            color: #fff !important;
        }

        .user-payin-range-badge {
            border: 1px solid rgba(255, 255, 255, 0.36);
            color: #fff;
            background: rgba(255, 255, 255, 0.12);
            border-radius: 999px;
            padding: 0.32rem 0.75rem;
            font-size: 0.78rem;
            font-weight: 700;
        }

        .user-payin-mini-card {
            display: flex;
            align-items: center;
            gap: 0.72rem;
            background: rgba(255, 255, 255, 0.96);
            border-radius: 13px;
            padding: 0.82rem 0.8rem;
            min-height: 86px;
        }

        .user-payin-mini-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 0.93rem;
            flex-shrink: 0;
        }

        .user-payin-mini-icon.is-total-amount { background: #dbeafe; color: #2563eb; }
        .user-payin-mini-icon.is-weekly-amount { background: #d9f6ff; color: #0284c7; }
        .user-payin-mini-icon.is-total-orders { background: #fef3c7; color: #d97706; }
        .user-payin-mini-icon.is-weekly-orders { background: #ede9fe; color: #7c3aed; }
        .user-payin-mini-icon.is-success { background: #dcfce7; color: #16a34a; }
        .user-payin-mini-icon.is-pending { background: #fee2e2; color: #dc2626; }

        .user-payin-mini-label {
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.04em;
            color: #64748b;
            line-height: 1.2;
        }

        .user-payin-mini-value {
            font-size: 1.78rem;
            font-weight: 700;
            line-height: 1.04;
            color: #0f172a;
            margin-top: 0.08rem;
        }

        @media (max-width: 767.98px) {
            .user-payin-mini-value {
                font-size: 1.46rem;
            }
        }

        .user-payout-card {
            border: 0;
            border-radius: 16px;
            background: linear-gradient(145deg, #57a5d7 0%, #3d8dc8 58%, #2f7fc5 100%);
            color: #fff;
            position: relative;
            overflow: hidden;
        }

        .user-payout-card::before,
        .user-payout-card::after {
            content: '';
            position: absolute;
            border-radius: 999px;
            pointer-events: none;
            opacity: 0.2;
        }

        .user-payout-card::before {
            width: 180px;
            height: 180px;
            right: -45px;
            top: -62px;
            background: radial-gradient(circle at center, #8fd2f6 0%, #67b9e8 100%);
        }

        .user-payout-card::after {
            width: 230px;
            height: 230px;
            left: -130px;
            bottom: -135px;
            background: radial-gradient(circle at center, #8accf4 0%, #62afe2 100%);
        }

        .user-payout-card .card-body {
            position: relative;
            z-index: 1;
            padding: 1rem;
        }

        .user-payout-card-header .admin-kpi-title,
        .user-payout-card-header .small {
            color: #fff !important;
        }

        .user-payout-title-icon {
            background: rgba(255, 255, 255, 0.2) !important;
            color: #fff !important;
        }

        .user-payout-range-badge {
            border: 1px solid rgba(255, 255, 255, 0.36);
            color: #fff;
            background: rgba(255, 255, 255, 0.12);
            border-radius: 999px;
            padding: 0.32rem 0.75rem;
            font-size: 0.78rem;
            font-weight: 700;
        }

        .user-payout-mini-card {
            display: flex;
            align-items: center;
            gap: 0.72rem;
            background: rgba(255, 255, 255, 0.96);
            border-radius: 13px;
            padding: 0.82rem 0.8rem;
            min-height: 86px;
        }

        .user-payout-mini-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 0.93rem;
            flex-shrink: 0;
        }

        .user-payout-mini-icon.is-total-amount { background: #dbeafe; color: #2563eb; }
        .user-payout-mini-icon.is-weekly-amount { background: #d9f6ff; color: #0284c7; }
        .user-payout-mini-icon.is-total-orders { background: #fef3c7; color: #d97706; }
        .user-payout-mini-icon.is-weekly-orders { background: #ede9fe; color: #7c3aed; }
        .user-payout-mini-icon.is-success { background: #dcfce7; color: #16a34a; }
        .user-payout-mini-icon.is-pending { background: #fee2e2; color: #dc2626; }

        .user-payout-mini-label {
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.04em;
            color: #64748b;
            line-height: 1.2;
        }

        .user-payout-mini-value {
            font-size: 1.78rem;
            font-weight: 700;
            line-height: 1.04;
            color: #0f172a;
            margin-top: 0.08rem;
        }

        @media (max-width: 767.98px) {
            .user-payout-mini-value {
                font-size: 1.46rem;
            }
        }

        .user-settlement-card {
            border: 0;
            border-radius: 16px;
            background: linear-gradient(145deg, #2bb673 0%, #1f9f63 58%, #178753 100%);
            color: #fff;
            position: relative;
            overflow: hidden;
        }

        .user-settlement-card::before,
        .user-settlement-card::after {
            content: '';
            position: absolute;
            border-radius: 999px;
            pointer-events: none;
            opacity: 0.2;
        }

        .user-settlement-card::before {
            width: 180px;
            height: 180px;
            right: -45px;
            top: -62px;
            background: radial-gradient(circle at center, #7ce5b5 0%, #4fca96 100%);
        }

        .user-settlement-card::after {
            width: 230px;
            height: 230px;
            left: -130px;
            bottom: -135px;
            background: radial-gradient(circle at center, #7edfb0 0%, #4fbe8e 100%);
        }

        .user-settlement-card .card-body {
            position: relative;
            z-index: 1;
            padding: 1rem;
        }

        .user-settlement-card-header .admin-kpi-title,
        .user-settlement-card-header .small {
            color: #fff !important;
        }

        .user-settlement-title-icon {
            background: rgba(255, 255, 255, 0.2) !important;
            color: #fff !important;
        }

        .user-settlement-mini-card {
            display: flex;
            align-items: center;
            gap: 0.72rem;
            background: rgba(255, 255, 255, 0.96);
            border-radius: 13px;
            padding: 0.82rem 0.8rem;
            min-height: 86px;
        }

        .user-settlement-mini-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 0.93rem;
            flex-shrink: 0;
        }

        .user-settlement-mini-icon.is-total-amount { background: #dcfce7; color: #15803d; }

        .user-settlement-mini-label {
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.04em;
            color: #64748b;
            line-height: 1.2;
        }

        .user-settlement-mini-value {
            font-size: 1.78rem;
            font-weight: 700;
            line-height: 1.04;
            color: #0f172a;
            margin-top: 0.08rem;
        }

        @media (max-width: 767.98px) {
            .user-settlement-mini-value {
                font-size: 1.46rem;
            }
        }

        .user-manual-deposit-card {
            border: 0;
            border-radius: 16px;
            background: linear-gradient(145deg, #3f4f64 0%, #344559 58%, #2a3a4d 100%);
            color: #fff;
            position: relative;
            overflow: hidden;
        }

        .user-manual-deposit-card::before,
        .user-manual-deposit-card::after {
            content: '';
            position: absolute;
            border-radius: 999px;
            pointer-events: none;
            opacity: 0.2;
        }

        .user-manual-deposit-card::before {
            width: 180px;
            height: 180px;
            right: -45px;
            top: -62px;
            background: radial-gradient(circle at center, #6e7f93 0%, #55677c 100%);
        }

        .user-manual-deposit-card::after {
            width: 230px;
            height: 230px;
            left: -130px;
            bottom: -135px;
            background: radial-gradient(circle at center, #6b7b8f 0%, #506175 100%);
        }

        .user-manual-deposit-card .card-body {
            position: relative;
            z-index: 1;
            padding: 1rem;
        }

        .user-manual-deposit-card-header .admin-kpi-title,
        .user-manual-deposit-card-header .small {
            color: #fff !important;
        }

        .user-manual-deposit-title-icon {
            background: rgba(255, 255, 255, 0.2) !important;
            color: #fff !important;
        }

        .user-manual-deposit-mini-card {
            display: flex;
            align-items: center;
            gap: 0.72rem;
            background: rgba(255, 255, 255, 0.96);
            border-radius: 13px;
            padding: 0.82rem 0.8rem;
            min-height: 86px;
        }

        .user-manual-deposit-mini-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 0.93rem;
            flex-shrink: 0;
        }

        .user-manual-deposit-mini-icon.is-total-amount { background: #fef3c7; color: #b45309; }

        .user-manual-deposit-mini-label {
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.04em;
            color: #64748b;
            line-height: 1.2;
        }

        .user-manual-deposit-mini-value {
            font-size: 1.78rem;
            font-weight: 700;
            line-height: 1.04;
            color: #0f172a;
            margin-top: 0.08rem;
        }

        @media (max-width: 767.98px) {
            .user-manual-deposit-mini-value {
                font-size: 1.46rem;
            }
        }

        .user-available-balance-card {
            border: 0;
            border-radius: 16px;
            background: linear-gradient(145deg, #0f766e 0%, #0d8a80 58%, #0a9b8f 100%);
            color: #fff;
            position: relative;
            overflow: hidden;
        }

        .user-available-balance-card::before,
        .user-available-balance-card::after {
            content: '';
            position: absolute;
            border-radius: 999px;
            pointer-events: none;
            opacity: 0.2;
        }

        .user-available-balance-card::before {
            width: 180px;
            height: 180px;
            right: -45px;
            top: -62px;
            background: radial-gradient(circle at center, #6fd8d0 0%, #2dbab0 100%);
        }

        .user-available-balance-card::after {
            width: 230px;
            height: 230px;
            left: -130px;
            bottom: -135px;
            background: radial-gradient(circle at center, #64cfc7 0%, #20a69d 100%);
        }

        .user-available-balance-card .card-body {
            position: relative;
            z-index: 1;
            padding: 1rem;
        }

        .user-available-balance-card-header .admin-kpi-title,
        .user-available-balance-card-header .small {
            color: #fff !important;
        }

        .user-available-balance-title-icon {
            background: rgba(255, 255, 255, 0.2) !important;
            color: #fff !important;
        }

        .user-available-balance-mini-card {
            display: flex;
            align-items: center;
            gap: 0.72rem;
            background: rgba(255, 255, 255, 0.96);
            border-radius: 13px;
            padding: 0.82rem 0.8rem;
            min-height: 86px;
        }

        .user-available-balance-mini-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 0.93rem;
            flex-shrink: 0;
        }

        .user-available-balance-mini-icon.is-total-amount { background: #ccfbf1; color: #0f766e; }

        .user-available-balance-mini-label {
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.04em;
            color: #64748b;
            line-height: 1.2;
        }

        .user-available-balance-mini-value {
            font-size: 1.78rem;
            font-weight: 700;
            line-height: 1.04;
            color: #0f172a;
            margin-top: 0.08rem;
        }

        @media (max-width: 767.98px) {
            .user-available-balance-mini-value {
                font-size: 1.46rem;
            }
        }
    </style>
@endpush

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const canvas = document.getElementById('revenueGoalChart');
            if (!canvas || !window.Chart) {
                return;
            }

            const chart = window.Chart.getChart(canvas);
            if (!chart) {
                return;
            }

            const completed = Number(canvas.dataset.completed || 0);
            const pending = Number(canvas.dataset.pending || 0);
            const failed = Number(canvas.dataset.failed || 0);

            chart.data.labels = ['Completed', 'Pending', 'Failed'];
            chart.data.datasets[0].data = [completed, pending, failed];
            chart.data.datasets[0].backgroundColor = ['#22c55e', '#f59e0b', '#ef4444'];
            chart.update();
        });
    </script>
@endpush