@extends('backoffice.layouts.app')

@section('content')
    <div class="container-xxl container-p-y">
        <div class="row g-3">

            {{-- HEADER --}}
            <div class="col-12">

                <div class="card border-0 shadow-sm overflow-hidden position-relative">

                    {{-- glow background --}}
                    <div class="position-absolute top-0 end-0"
                        style="
                width:240px;
                height:240px;
                background:
                radial-gradient(
                    circle,
                    rgba(99,102,241,.14) 0%,
                    transparent 72%
                );
                pointer-events:none;
                z-index:0;">
                    </div>

                    <div
                        class="card-body position-relative z-1 d-flex justify-content-between align-items-center flex-wrap gap-3">

                        <div>

                            <div class="d-flex align-items-center gap-2 mb-1">

                                <span class="badge rounded-pill bg-label-primary px-3 py-2">

                                    <i class="ti tabler-layout-dashboard me-1"></i>
                                    Dashboard

                                </span>

                                <span class="badge rounded-pill bg-label-success px-3 py-2">

                                    <i class="ti tabler-activity-heartbeat me-1"></i>
                                    Live

                                </span>

                            </div>

                            <small class="text-body-secondary">
                                Overview dashboard realtime
                            </small>

                        </div>

                        {{-- right stats --}}
                        <div class="d-flex align-items-center flex-wrap gap-2">

                            <div class="rounded-3 px-3 py-2"
                                style="
                        min-width:120px;
                        background: rgba(255,255,255,.03);
                        border:1px solid rgba(148,163,184,.08);">

                                <small class="d-block text-body-secondary mb-1">
                                    Total User
                                </small>

                                <div class="fw-semibold text-info">
                                    {{ number_format($totalUser ?? 0) }}
                                </div>

                            </div>

                            <div class="rounded-3 px-3 py-2"
                                style="
                        min-width:120px;
                        background: rgba(255,255,255,.03);
                        border:1px solid rgba(148,163,184,.08);">

                                <small class="d-block text-body-secondary mb-1">
                                    Profit
                                </small>

                                <div class="fw-semibold text-success">
                                    Rp {{ number_format($profit ?? 0) }}
                                </div>

                            </div>

                        </div>

                    </div>

                </div>

            </div>
            {{-- KPI + MINI SPARKLINES --}}
            <div class="col-12">
                <div class="row g-3">
                    @php
                        $kpis = [
                            [
                                'id' => 'sparkUsers',
                                'label' => 'Total User',
                                'value' => number_format($totalUser),
                                'icon' => 'tabler-users',
                                'color' => '#60a5fa',
                            ],
                            [
                                'id' => 'sparkDeposit',
                                'label' => 'Total Deposit',
                                'value' => 'Rp ' . number_format($totalDeposit),
                                'icon' => 'tabler-wallet',
                                'color' => '#22c55e',
                            ],
                            [
                                'id' => 'sparkWithdraw',
                                'label' => 'Total Withdraw',
                                'value' => 'Rp ' . number_format($totalWithdraw),
                                'icon' => 'tabler-arrow-down',
                                'color' => '#f43f5e',
                            ],
                            [
                                'id' => 'sparkProfit',
                                'label' => 'Net Profit',
                                'value' => 'Rp ' . number_format($profit),
                                'icon' => 'tabler-chart-line',
                                'color' => '#f59e0b',
                            ],
                        ];
                    @endphp

                    @foreach ($kpis as $kpi)
                        <div class="col-12 col-sm-6 col-xl-3">
                            <div class="card h-100 border shadow-sm">
                                <div class="card-body">
                                    <div class="d-flex justify-content-between align-items-start mb-2">
                                        <div>
                                            <small class="text-muted d-block">{{ $kpi['label'] }}</small>
                                            <h5 class="mb-0 fw-bold">{{ $kpi['value'] }}</h5>
                                        </div>
                                        <span class="badge p-2"
                                            style="background: {{ $kpi['color'] }}22; color: {{ $kpi['color'] }}">
                                            <i class="icon-base ti {{ $kpi['icon'] }}" style="font-size:20px;"></i>
                                        </span>
                                    </div>
                                    <div id="{{ $kpi['id'] }}" style="height:60px;"></div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>

            {{-- RINGKASAN OPERASIONAL --}}
            <div class="col-12 col-xl-4 d-flex">
                <div class="card h-100 w-100 border-0 shadow-sm overflow-hidden position-relative">

                    {{-- background glow --}}
                    <div class="position-absolute top-0 end-0"
                        style="
                width:180px;
                height:180px;
                background:
                radial-gradient(
                    circle,
                    rgba(34,211,238,.16) 0%,
                    transparent 72%
                );
                pointer-events:none;
                z-index:0;">
                    </div>

                    <div class="card-header border-0 bg-transparent position-relative z-1 pb-0">

                        <div class="d-flex justify-content-between align-items-start flex-wrap gap-2">

                            <div>

                                <h6 class="mb-1 fw-semibold text-white">
                                    Pending Ratio
                                </h6>

                                <small class="text-body-secondary">
                                    Deposit vs withdraw overview
                                </small>

                            </div>

                            <span class="badge rounded-pill px-3 py-2"
                                style="
                        background: rgba(56,189,248,.12);
                        color:#67e8f9;
                        border:1px solid rgba(56,189,248,.18);">

                                <i class="ti tabler-clock-hour-4 me-1"></i>
                                Live Status

                            </span>

                        </div>

                    </div>

                    <div class="card-body position-relative z-1">

                        {{-- radial chart --}}
                        <div id="opsRadial" style="height:220px;"></div>

                        {{-- stats --}}
                        <div class="row g-2 mt-1">

                            <div class="col-6">

                                <div class="rounded-3 p-2 text-center"
                                    style="
                            background: rgba(255,255,255,.03);
                            border:1px solid rgba(148,163,184,.08);">

                                    <small class="d-block text-body-secondary mb-1">
                                        Pending Deposit
                                    </small>

                                    <div class="fw-semibold" style="color:#22d3ee;">

                                        {{ number_format($pendingDeposit ?? 0) }}

                                    </div>

                                </div>

                            </div>

                            <div class="col-6">

                                <div class="rounded-3 p-2 text-center"
                                    style="
                            background: rgba(255,255,255,.03);
                            border:1px solid rgba(148,163,184,.08);">

                                    <small class="d-block text-body-secondary mb-1">
                                        Pending Withdraw
                                    </small>

                                    <div class="fw-semibold" style="color:#a78bfa;">

                                        {{ number_format($pendingWithdraw ?? 0) }}

                                    </div>

                                </div>

                            </div>

                        </div>

                        @php
                            $pendingDepositValue = (int) ($pendingDeposit ?? 0);
                            $pendingWithdrawValue = (int) ($pendingWithdraw ?? 0);

                            $pendingTotal = $pendingDepositValue + $pendingWithdrawValue;

                            $depositPercent =
                                $pendingTotal > 0 ? round(($pendingDepositValue / $pendingTotal) * 100) : 0;

                            $withdrawPercent =
                                $pendingTotal > 0 ? round(($pendingWithdrawValue / $pendingTotal) * 100) : 0;
                        @endphp

                        {{-- progress section --}}
                        <div class="mt-4 d-flex flex-column gap-3">

                            {{-- deposit --}}
                            <div>

                                <div class="d-flex justify-content-between align-items-center mb-2">

                                    <small class="text-body-secondary">
                                        Deposit Queue
                                    </small>

                                    <small class="fw-semibold" style="color:#22d3ee;">

                                        {{ $depositPercent }}%

                                    </small>

                                </div>

                                <div class="progress pending-progress">

                                    <div class="progress-bar pending-deposit-bar" role="progressbar"
                                        data-width="{{ $depositPercent }}">
                                    </div>

                                </div>

                            </div>

                            {{-- withdraw --}}
                            <div>

                                <div class="d-flex justify-content-between align-items-center mb-2">

                                    <small class="text-body-secondary">
                                        Withdraw Queue
                                    </small>

                                    <small class="fw-semibold" style="color:#a78bfa;">

                                        {{ $withdrawPercent }}%

                                    </small>

                                </div>

                                <div class="progress pending-progress">

                                    <div class="progress-bar pending-withdraw-bar" role="progressbar"
                                        data-width="{{ $withdrawPercent }}">
                                    </div>

                                </div>

                            </div>

                        </div>

                    </div>
                </div>
            </div>
            {{-- TOP USER (MODERN) --}}
            <div class="col-12 col-xl-4 d-flex">
                <div class="card h-100 w-100 border-0 shadow-sm overflow-hidden position-relative">

                    {{-- background glow --}}
                    <div class="position-absolute top-0 end-0"
                        style="
                width:180px;
                height:180px;
                background: radial-gradient(circle,
                rgba(56,189,248,.16) 0%,
                transparent 72%);
                pointer-events:none;
                z-index:0;">
                    </div>

                    <div class="card-header border-0 bg-transparent position-relative z-1 pb-0">
                        <div class="d-flex justify-content-between align-items-start flex-wrap gap-2">

                            <div>
                                <h6 class="mb-1 fw-semibold text-white">
                                    Top Deposit User
                                </h6>

                                <small class="text-body-secondary">
                                    Leaderboard transaksi deposit
                                </small>
                            </div>

                            <span class="badge rounded-pill px-3 py-2"
                                style="
                        background: rgba(56,189,248,.12);
                        color:#7dd3fc;
                        border:1px solid rgba(56,189,248,.18);">

                                <i class="ti tabler-trophy me-1"></i>
                                Top Rank

                            </span>

                        </div>
                    </div>

                    <div class="card-body position-relative z-1 pt-3">

                        @php
                            // ambil maksimal 4 user
                            $topUsers = array_slice($topUsers ?? [], 0, 4);

                            $maxTop =
                                collect($topUsers)
                                    ->map(function ($u) {
                                        return (float) preg_replace('/[^0-9.]/', '', (string) ($u['total'] ?? 0));
                                    })
                                    ->max() ?? 0;
                        @endphp

                        {{-- top users --}}
                        <div class="d-flex flex-column gap-3">

                            @forelse($topUsers as $i => $user)
                                @php
                                    $username = (string) ($user['username'] ?? '-');

                                    $initial = strtoupper(substr($username, 0, 1));

                                    $totalRaw = (float) preg_replace('/[^0-9.]/', '', (string) ($user['total'] ?? 0));

                                    $pct = $maxTop > 0 ? max(10, min(100, round(($totalRaw / $maxTop) * 100))) : 10;

                                    $rank = $i + 1;

                                    $rankBg = match ($rank) {
                                        1 => 'rgba(250,204,21,.16)',
                                        2 => 'rgba(148,163,184,.16)',
                                        3 => 'rgba(251,146,60,.16)',
                                        default => 'rgba(99,102,241,.16)',
                                    };

                                    $rankColor = match ($rank) {
                                        1 => '#fde047',
                                        2 => '#cbd5e1',
                                        3 => '#fdba74',
                                        default => '#a5b4fc',
                                    };
                                @endphp

                                <div class="rounded-4 p-3"
                                    style="
                            background: rgba(255,255,255,.025);
                            border:1px solid rgba(148,163,184,.08);
                         ">

                                    <div class="d-flex align-items-center justify-content-between mb-2">

                                        <div class="d-flex align-items-center gap-2">

                                            {{-- rank --}}
                                            <span class="badge rounded-pill px-2 py-1"
                                                style="
                                        background: {{ $rankBg }};
                                        color: {{ $rankColor }};
                                        min-width:42px;
                                      ">

                                                #{{ $rank }}

                                            </span>

                                            {{-- avatar --}}
                                            <span
                                                class="d-inline-flex align-items-center justify-content-center rounded-circle fw-semibold"
                                                style="
                                        width:34px;
                                        height:34px;
                                        background: rgba(99,102,241,.16);
                                        color:#c7d2fe;
                                        font-size:.85rem;
                                      ">

                                                {{ $initial }}

                                            </span>

                                            {{-- username --}}
                                            <div class="d-flex flex-column">

                                                <span class="fw-semibold text-white" style="line-height:1.1;">

                                                    {{ $username }}

                                                </span>

                                                <small class="text-body-secondary">
                                                    Deposit Member
                                                </small>

                                            </div>

                                        </div>

                                        {{-- amount --}}
                                        <div class="text-end">

                                            <div class="fw-bold text-info">
                                                {{ $user['total'] }}
                                            </div>

                                            <small class="text-body-secondary">
                                                Volume
                                            </small>

                                        </div>

                                    </div>

                                    {{-- progress --}}
                                    <div class="progress"
                                        style="
                                height:6px;
                                background: rgba(255,255,255,.05);
                             ">

                                        <div class="progress-bar" role="progressbar"
                                            style="
                                    width: {{ $pct }}%;
                                    border-radius:999px;
                                    background:
                                    linear-gradient(
                                        90deg,
                                        #38bdf8,
                                        #6366f1,
                                        #8b5cf6
                                    );
                                 "
                                            aria-valuenow="{{ $pct }}" aria-valuemin="0" aria-valuemax="100">
                                        </div>

                                    </div>

                                </div>

                            @empty

                                <div class="d-flex flex-column align-items-center justify-content-center text-center py-5">

                                    <div class="mb-3 rounded-circle d-flex align-items-center justify-content-center"
                                        style="
                                width:58px;
                                height:58px;
                                background: rgba(148,163,184,.12);
                                color:#94a3b8;
                             ">

                                        <i class="ti tabler-users" style="font-size:24px;"></i>

                                    </div>

                                    <div class="fw-semibold text-white mb-1">
                                        No Leaderboard Data
                                    </div>

                                    <small class="text-body-secondary">
                                        Data deposit belum tersedia
                                    </small>

                                </div>
                            @endforelse

                        </div>

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

            {{-- PERFORMANCE SNAPSHOT --}}
            <div class="col-12 col-xl-4 d-flex">
                <div class="card h-100 w-100 border-0 shadow-sm overflow-hidden position-relative">

                    {{-- background glow --}}
                    <div class="position-absolute top-0 end-0"
                        style="
                    width:180px;
                    height:180px;
                    background: radial-gradient(circle,
                    rgba(129,140,248,.18) 0%,
                    transparent 72%);
                    pointer-events:none;
                    z-index:0;">
                    </div>

                    <div class="card-header border-0 bg-transparent position-relative z-1 pb-0">
                        <div class="d-flex justify-content-between align-items-start flex-wrap gap-2">

                            <div>
                                <h6 class="mb-1 fw-semibold text-white">
                                    Performance Snapshot
                                </h6>

                                <small class="text-body-secondary">
                                    Live analytic overview
                                </small>
                            </div>

                            <span class="badge rounded-pill px-3 py-2"
                                style="
                            background: rgba(34,197,94,.12);
                            color:#4ade80;
                            border:1px solid rgba(34,197,94,.18);">
                                <i class="ti tabler-trending-up me-1"></i>
                                +18.4%
                            </span>

                        </div>
                    </div>

                    <div class="card-body position-relative z-1">

                        {{-- radar chart --}}
                        <div id="overviewRadar" style="height:220px;"></div>

                        @php

                            /*
                        |--------------------------------------------------------------------------
                        | REAL PERFORMANCE CALCULATION
                        |--------------------------------------------------------------------------
                        */

                            $totalUserCount = (int) ($totalUser ?? 0);

                            $depositAmount = (float) ($totalDeposit ?? 0);

                            $withdrawAmount = (float) ($totalWithdraw ?? 0);

                            $profitAmount = (float) ($profit ?? 0);

                            /*
                        |--------------------------------------------------------------------------
                        | TRANSACTION ARRAY SAFE
                        |--------------------------------------------------------------------------
                        */

                            $trxData = is_array($transactions ?? null) ? $transactions : [];

                            /*
                        |--------------------------------------------------------------------------
                        | ACTIVE USER
                        |--------------------------------------------------------------------------
                        */

                            $uniqueUsers = collect($trxData)->pluck('username')->unique()->count();

                            $activeUser = min($totalUserCount, $uniqueUsers);

                            /*
                        |--------------------------------------------------------------------------
                        | SUCCESS RATE
                        |--------------------------------------------------------------------------
                        */

                            $totalTransaction = count($trxData);

                            $successTransaction = collect($trxData)->where('status', 'Delivered')->count();

                            $successRate =
                                $totalTransaction > 0 ? round(($successTransaction / $totalTransaction) * 100, 1) : 0;

                            /*
                        |--------------------------------------------------------------------------
                        | GROWTH RATE
                        |--------------------------------------------------------------------------
                        */

                            $growthRate = $withdrawAmount > 0 ? round(($profitAmount / $withdrawAmount) * 100, 1) : 0;

                        @endphp

                        {{-- quick stats --}}
                        <div class="row g-2 mt-1">

                            {{-- ACTIVE --}}
                            <div class="col-4">

                                <div class="rounded-3 p-2 text-center"
                                    style="
                                    background: rgba(255,255,255,.03);
                                    border:1px solid rgba(148,163,184,.08);">

                                    <small class="d-block text-body-secondary mb-1">
                                        Active
                                    </small>

                                    <div class="fw-semibold text-info">
                                        {{ number_format($activeUser) }}
                                    </div>

                                </div>

                            </div>

                            {{-- SUCCESS --}}
                            <div class="col-4">

                                <div class="rounded-3 p-2 text-center"
                                    style="
                                    background: rgba(255,255,255,.03);
                                    border:1px solid rgba(148,163,184,.08);">

                                    <small class="d-block text-body-secondary mb-1">
                                        Success
                                    </small>

                                    <div class="fw-semibold text-success">
                                        {{ $successRate }}%
                                    </div>

                                </div>

                            </div>

                            {{-- GROWTH --}}
                            <div class="col-4">

                                <div class="rounded-3 p-2 text-center"
                                    style="
                                    background: rgba(255,255,255,.03);
                                    border:1px solid rgba(148,163,184,.08);">

                                    <small class="d-block text-body-secondary mb-1">
                                        Growth
                                    </small>

                                    <div class="fw-semibold text-warning">

                                        {{ $growthRate >= 0 ? '+' : '' }}{{ $growthRate }}%

                                    </div>

                                </div>

                            </div>

                        </div>
                        {{-- mini progress --}}
                        <div class="mt-3">

                            <div class="d-flex justify-content-between mb-1">
                                <small class="text-body-secondary">
                                    Server Performance
                                </small>

                                <small class="fw-semibold text-white">
                                    82%
                                </small>
                            </div>

                            <div class="progress"
                                style="
                                height:7px;
                                background: rgba(255,255,255,.06);">

                                <div class="progress-bar"
                                    style="
                                    width:82%;
                                    border-radius:999px;
                                    background:
                                    linear-gradient(
                                        90deg,
                                        #3b82f6,
                                        #6366f1,
                                        #8b5cf6
                                    );">
                                </div>

                            </div>
                        </div>

                    </div>
                </div>
            </div>
            {{-- TABLE TRANSAKSI --}}
            <div class="col-12">
                <div class="card h-100 border shadow-sm">

                    <div class="card-header d-flex justify-content-between align-items-center">

                        <div>
                            <h6 class="mb-1">User Transaction</h6>
                            <small class="text-body-secondary">
                                Realtime transaction activity
                            </small>
                        </div>

                        <span class="badge bg-label-primary">
                            Live
                        </span>

                    </div>

                    <div class="card-body p-0">

                        <div class="table-responsive">

                            <table class="table table-hover mb-0 align-middle text-nowrap">

                                <thead class="table-dark">

                                    <tr>

                                        <th width="70">#</th>

                                        <th>User</th>

                                        <th>Amount</th>

                                        <th>Type</th>

                                        <th>Status</th>

                                        <th class="text-center" width="90">
                                            Action
                                        </th>

                                    </tr>

                                </thead>

                                <tbody>

                                    @forelse($transactions as $i => $trx)
                                        <tr>

                                            <td class="text-body-secondary fw-semibold">
                                                {{ $i + 1 }}
                                            </td>

                                            <td class="fw-semibold">
                                                {{ $trx['username'] }}
                                            </td>

                                            <td class="fw-semibold text-warning">
                                                {{ $trx['amount'] }}
                                            </td>

                                            <td>

                                                <span class="badge bg-label-info">
                                                    {{ $trx['type'] }}
                                                </span>

                                            </td>

                                            <td>

                                                <span
                                                    class="badge
                                            {{ $trx['status'] == 'Delivered'
                                                ? 'bg-success'
                                                : ($trx['status'] == 'Pending'
                                                    ? 'bg-warning'
                                                    : ($trx['status'] == 'Canceled'
                                                        ? 'bg-danger'
                                                        : 'bg-secondary')) }}">

                                                    {{ $trx['status'] }}

                                                </span>

                                            </td>

                                            <td class="text-center">

                                                <div class="dropdown">

                                                    <button class="btn btn-sm btn-icon btn-text-secondary rounded-pill"
                                                        type="button" data-bs-toggle="dropdown" aria-expanded="false">

                                                        <i class="ti tabler-dots-vertical"></i>

                                                    </button>

                                                    <ul class="dropdown-menu dropdown-menu-end">

                                                        <li>
                                                            <a class="dropdown-item" href="transaction/all">

                                                                <i class="ti tabler-eye me-2"></i>
                                                                Detail

                                                            </a>
                                                        </li>

                                                    </ul>

                                                </div>

                                            </td>

                                        </tr>

                                    @empty

                                        <tr>

                                            <td colspan="6" class="text-center py-4 text-body-secondary">

                                                Tidak ada data

                                            </td>

                                        </tr>
                                    @endforelse

                                </tbody>

                            </table>

                        </div>

                    </div>

                </div>
            </div>

        </div>
    </div>
@endsection
<style>
    .pending-progress {
        height: 7px;
        overflow: hidden;
        border-radius: 999px;
        background: rgba(255, 255, 255, .06);
    }

    .pending-progress .progress-bar {
        width: 0;
        height: 100%;
        border-radius: 999px;
        transition: width 1.4s ease;
        background-size: 1rem 1rem;
        animation: pending-progress-stripes 1s linear infinite;
    }

    .pending-deposit-bar {
        background-image:
            linear-gradient(90deg,
                #06b6d4,
                #22d3ee),
            linear-gradient(45deg,
                rgba(255, 255, 255, .16) 25%,
                transparent 25%,
                transparent 50%,
                rgba(255, 255, 255, .16) 50%,
                rgba(255, 255, 255, .16) 75%,
                transparent 75%,
                transparent);
    }

    .pending-withdraw-bar {
        background-image:
            linear-gradient(90deg,
                #8b5cf6,
                #a78bfa),
            linear-gradient(45deg,
                rgba(255, 255, 255, .16) 25%,
                transparent 25%,
                transparent 50%,
                rgba(255, 255, 255, .16) 50%,
                rgba(255, 255, 255, .16) 75%,
                transparent 75%,
                transparent);
    }

    @keyframes pending-progress-stripes {
        0% {
            background-position: 1rem 0;
        }

        100% {
            background-position: 0 0;
        }
    }
</style>
@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {

            document.querySelectorAll('.pending-progress .progress-bar')
                .forEach(function(bar) {

                    const width = bar.dataset.width || 0;

                    requestAnimationFrame(() => {
                        bar.style.width = width + '%';
                    });

                });

        });
    </script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const darkText = '#e2e8f0';
            const darkMuted = '#94a3b8';
            const darkGrid = 'rgba(148,163,184,0.22)';

            const sparklineBase = {
                chart: {
                    type: 'line',
                    height: 60,
                    sparkline: {
                        enabled: true
                    },
                    toolbar: {
                        show: false
                    }
                },
                stroke: {
                    width: 3,
                    curve: 'smooth'
                },
                tooltip: {
                    enabled: false
                },
                markers: {
                    size: 0
                }
            };

            const makeSpark = (selector, color, data) => {
                const el = document.querySelector(selector);
                if (!el) return;
                new ApexCharts(el, {
                    ...sparklineBase,
                    colors: [color],
                    series: [{
                        data
                    }]
                }).render();
            };

            makeSpark('#sparkUsers', '#60a5fa', [12, 15, 14, 20, 18, 22, 26]);
            makeSpark('#sparkDeposit', '#22c55e', [30, 28, 35, 40, 38, 45, 50]);
            makeSpark('#sparkWithdraw', '#f43f5e', [18, 14, 16, 13, 15, 12, 10]);
            makeSpark('#sparkProfit', '#f59e0b', [10, 12, 11, 15, 14, 18, 20]);

            const opsRadialEl = document.querySelector('#opsRadial');
            if (opsRadialEl) {
                const pd = {{ (int) ($pendingDeposit ?? 0) }};
                const pw = {{ (int) ($pendingWithdraw ?? 0) }};
                const total = pd + pw;
                const pDep = total > 0 ? Math.round((pd / total) * 100) : 0;
                const pWdr = total > 0 ? Math.round((pw / total) * 100) : 0;

                const setArcOpacity = (activeIndex = null) => {
                    const arcs = opsRadialEl.querySelectorAll('.apexcharts-radialbar-area');
                    arcs.forEach((arc, idx) => {
                        arc.style.transition = 'opacity .2s ease';
                        if (activeIndex === null) {
                            arc.style.opacity = '0.72';
                        } else {
                            arc.style.opacity = (idx === activeIndex) ? '0.42' : '0.72';
                        }
                    });
                };

                const chart = new ApexCharts(opsRadialEl, {
                    chart: {
                        type: 'radialBar',
                        height: 220,
                        toolbar: {
                            show: false
                        },
                        foreColor: darkText,
                        events: {
                            mounted: function() {
                                setArcOpacity(null);
                            },
                            dataPointMouseEnter: function(event, chartCtx, config) {
                                setArcOpacity(config.seriesIndex);
                            },
                            dataPointMouseLeave: function() {
                                setArcOpacity(null);
                            }
                        }
                    },
                    series: [pDep, pWdr],
                    labels: ['Pending Deposit %', 'Pending Withdraw %'],
                    colors: ['#22d3ee', '#a78bfa'],
                    fill: {
                        type: 'gradient',
                        gradient: {
                            shade: 'dark',
                            type: 'diagonal1',
                            shadeIntensity: 0.45,
                            gradientToColors: ['#0ea5e9', '#7c3aed'],
                            stops: [0, 100]
                        }
                    },
                    stroke: {
                        lineCap: 'round'
                    },
                    plotOptions: {
                        radialBar: {
                            hollow: {
                                size: '42%',
                                background: 'rgba(15,23,42,0.85)'
                            },
                            track: {
                                background: 'rgba(148,163,184,0.20)',
                                strokeWidth: '100%'
                            },
                            dataLabels: {
                                name: {
                                    fontSize: '12px',
                                    fontWeight: 500,
                                    color: darkMuted
                                },
                                value: {
                                    fontSize: '18px',
                                    fontWeight: 700,
                                    color: '#f8fafc'
                                }
                            }
                        }
                    },
                    legend: {
                        show: true,
                        position: 'bottom',
                        fontSize: '12px',
                        labels: {
                            colors: darkText
                        },
                        markers: {
                            fillColors: ['#22d3ee', '#a78bfa']
                        }
                    }
                });

                chart.render();
            }

            const radarEl = document.querySelector('#overviewRadar');

            if (radarEl) {

                const totalUserData = Number({{ (int) ($totalUser ?? 0) }});
                const totalDepositData = Number({{ (float) ($totalDeposit ?? 0) }});
                const totalWithdrawData = Number({{ (float) ($totalWithdraw ?? 0) }});
                const totalProfitData = Number({{ (float) ($profit ?? 0) }});

                new ApexCharts(radarEl, {

                    chart: {
                        type: 'radar',
                        height: 260,
                        toolbar: {
                            show: false
                        },
                        background: 'transparent',
                        foreColor: darkText
                    },

                    series: [{
                        name: 'Performance',
                        data: [
                            totalUserData,
                            totalDepositData,
                            totalWithdrawData,
                            totalProfitData
                        ]
                    }],

                    labels: [
                        'Users',
                        'Deposit',
                        'Withdraw',
                        'Profit'
                    ],

                    colors: ['#6366f1'],

                    fill: {
                        opacity: 0.28,
                        colors: ['#6366f1']
                    },

                    stroke: {
                        width: 2.5,
                        curve: 'smooth'
                    },

                    markers: {
                        size: 4,
                        hover: {
                            size: 6
                        },
                        colors: ['#818cf8'],
                        strokeColors: '#0f172a',
                        strokeWidth: 2
                    },

                    plotOptions: {
                        radar: {
                            polygons: {
                                strokeColors: 'rgba(148,163,184,.12)',
                                connectorColors: 'rgba(148,163,184,.12)',
                                fill: {
                                    colors: [
                                        'rgba(255,255,255,.01)',
                                        'rgba(255,255,255,.03)'
                                    ]
                                }
                            }
                        }
                    },

                    yaxis: {
                        show: false
                    },

                    xaxis: {
                        labels: {
                            style: {
                                colors: [
                                    '#94a3b8',
                                    '#94a3b8',
                                    '#94a3b8',
                                    '#94a3b8'
                                ],
                                fontSize: '12px',
                                fontWeight: 500
                            }
                        }
                    },

                    dataLabels: {
                        enabled: false
                    },

                    tooltip: {
                        theme: 'dark',
                        y: {
                            formatter: function(val) {
                                return new Intl.NumberFormat().format(val);
                            }
                        }
                    },

                    grid: {
                        borderColor: 'rgba(148,163,184,.08)'
                    },

                    responsive: [{
                        breakpoint: 768,
                        options: {
                            chart: {
                                height: 220
                            }
                        }
                    }]

                }).render();
            }

        });
    </script>
@endpush