@extends('admin::layouts.admin')

@section('title', 'Dashboard')

@section('content')
<div class="dashboard-page">
    {{-- Page Title --}}
    <h1 class="page-title">DASHBOARD</h1>

    {{-- Stats Cards Row --}}
    <div class="stats-row">
        {{-- Total Pengguna --}}
        <div class="stat-card stat-purple">
            <div class="stat-icon">
                <i class="fas fa-users"></i>
            </div>
            <div class="stat-content">
                <div class="stat-value">{{ $totalUsers ?? 110 }}</div>
                <div class="stat-label">Total Data Pengguna</div>
            </div>
        </div>

        {{-- Total Wallet --}}
        <div class="stat-card stat-purple">
            <div class="stat-icon icon-green">
                <i class="fas fa-wallet"></i>
            </div>
            <div class="stat-content">
                <div class="stat-value">{{ $totalWallets ?? 5 }}</div>
                <div class="stat-label">Total Data Wallet</div>
            </div>
        </div>

        {{-- Total Event --}}
        <div class="stat-card stat-purple">
            <div class="stat-icon icon-yellow">
                <i class="fas fa-calendar-alt"></i>
            </div>
            <div class="stat-content">
                <div class="stat-value">{{ $totalEvents ?? 21 }}</div>
                <div class="stat-label">Total Data Event</div>
            </div>
        </div>

        {{-- Total Academy --}}
        <div class="stat-card stat-purple">
            <div class="stat-icon icon-cyan">
                <i class="fas fa-graduation-cap"></i>
            </div>
            <div class="stat-content">
                <div class="stat-value">{{ $totalAcademy ?? 15 }}</div>
                <div class="stat-label">Total Data Academy</div>
            </div>
        </div>
    </div>

    {{-- Main Content Row --}}
    <div class="content-row">
        {{-- Token Info Card --}}
        <div class="token-card">
            <div class="token-header">
                <h2 class="token-title">AsetQu V.2</h2>
                <span class="token-price">Rp.{{ $tokenPrice ?? '27.53' }}</span>
            </div>

            <div class="token-metrics">
                <div class="metric-row">
                    <div class="metric-item">
                        <span class="metric-label">MARKET CAP</span>
                        <span class="metric-value">Rp.{{ $marketCap ?? '5.62' }}</span>
                    </div>
                    <div class="metric-item">
                        <span class="metric-label">UNLOCKED MKT CAP</span>
                        <span class="metric-value">Rp.{{ $unlockedMktCap ?? '275.222 JT' }}</span>
                    </div>
                </div>

                <div class="metric-row">
                    <div class="metric-item">
                        <span class="metric-label">VOLUME (24H)</span>
                        <span class="metric-value">Rp.{{ $volume24h ?? '0' }}</span>
                    </div>
                    <div class="metric-item">
                        <span class="metric-label">FDV</span>
                        <span class="metric-value">Rp.{{ $fdv ?? '27.50 M' }}</span>
                    </div>
                </div>

                <div class="metric-row">
                    <div class="metric-item">
                        <span class="metric-label">VOL/MKT CAP (24)</span>
                        <span class="metric-value">Rp.{{ $volMktCap ?? '0' }}</span>
                    </div>
                    <div class="metric-item">
                        <span class="metric-label">HOLDERS</span>
                        <span class="metric-value">{{ $holders ?? '2.12K' }}</span>
                    </div>
                </div>

                <div class="metric-row">
                    <div class="metric-item">
                        <span class="metric-label">MAX. SUPPLY</span>
                        <span class="metric-value">Rp.{{ $maxSupply ?? '4.499.999 ASETQU' }}</span>
                    </div>
                    <div class="metric-item">
                        <span class="metric-label">TOTAL SUPPLY</span>
                        <span class="metric-value">Rp.{{ $totalSupply ?? '9.999.999 ASETQU' }}</span>
                    </div>
                </div>

                <div class="metric-full">
                    <span class="metric-label">SELF-REPORTED CIRCULATING SUPPLY</span>
                    <span class="metric-value">{{ $circulatingSupply ?? '201.2K ASETQU' }}</span>
                </div>
            </div>
        </div>

        {{-- Active Users Card --}}
        <div class="users-card">
            <div class="users-header">
                <h2 class="users-title">Data Pengguna Aktif</h2>
            </div>

            <div class="users-summary">
                <div class="summary-content">
                    <span class="summary-label">Total Data</span>
                    <span class="summary-value">{{ $totalUsers ?? 110 }}</span>
                </div>
                <div class="summary-icon">
                    <i class="fas fa-users"></i>
                </div>
            </div>

            <div class="users-list">
                @if(isset($activeUsers) && count($activeUsers) > 0)
                    @foreach($activeUsers as $user)
                    <div class="user-item">
                        <div class="user-info">
                            <div class="user-avatar">
                                @if($user->avatar)
                                    <img src="{{ asset('storage/' . $user->avatar) }}" alt="{{ $user->name }}">
                                @else
                                    <div class="avatar-placeholder">
                                        <span>{{ strtoupper(substr($user->name, 0, 1)) }}</span>
                                    </div>
                                @endif
                            </div>
                            <span class="user-name">{{ $user->name }}</span>
                        </div>
                        <div class="user-wallet">
                            @switch($user->preferred_wallet)
                                @case('indodax')
                                    <img src="{{ asset('assets/images/wallets/indodax.png') }}" alt="Indodax" class="wallet-logo">
                                    @break
                                @case('metamask')
                                    <img src="{{ asset('assets/images/wallets/metamask.png') }}" alt="MetaMask" class="wallet-logo">
                                    @break
                                @case('trustwallet')
                                    <img src="{{ asset('assets/images/wallets/trustwallet.png') }}" alt="Trust Wallet" class="wallet-logo">
                                    @break
                                @case('coinbase')
                                    <img src="{{ asset('assets/images/wallets/coinbase.png') }}" alt="Coinbase" class="wallet-logo">
                                    @break
                                @case('phantom')
                                    <img src="{{ asset('assets/images/wallets/phantom.png') }}" alt="Phantom" class="wallet-logo">
                                    @break
                                @default
                                    <span class="wallet-text">{{ ucfirst($user->preferred_wallet ?? 'N/A') }}</span>
                            @endswitch
                        </div>
                    </div>
                    @endforeach
                @else
                    {{-- Sample Data --}}
                    <div class="user-item">
                        <div class="user-info">
                            <div class="user-avatar">
                                <div class="avatar-placeholder"><span>A</span></div>
                            </div>
                            <span class="user-name">Alex Martin</span>
                        </div>
                        <div class="user-wallet">
                            <img src="{{ asset('assets/images/wallets/indodax.png') }}" alt="Indodax" class="wallet-logo" onerror="this.outerHTML='<span class=\'wallet-badge indodax\'>INDODAX</span>'">
                        </div>
                    </div>
                    <div class="user-item">
                        <div class="user-info">
                            <div class="user-avatar">
                                <div class="avatar-placeholder"><span>X</span></div>
                            </div>
                            <span class="user-name">Xian Lestari Condrog</span>
                        </div>
                        <div class="user-wallet">
                            <img src="{{ asset('assets/images/wallets/metamask.png') }}" alt="MetaMask" class="wallet-logo" onerror="this.outerHTML='<span class=\'wallet-badge metamask\'>MetaMask</span>'">
                        </div>
                    </div>
                    <div class="user-item">
                        <div class="user-info">
                            <div class="user-avatar">
                                <div class="avatar-placeholder"><span>M</span></div>
                            </div>
                            <span class="user-name">Michel Xandria</span>
                        </div>
                        <div class="user-wallet">
                            <img src="{{ asset('assets/images/wallets/trustwallet.png') }}" alt="Trust Wallet" class="wallet-logo" onerror="this.outerHTML='<span class=\'wallet-badge trustwallet\'>Trust Wallet</span>'">
                        </div>
                    </div>
                    <div class="user-item">
                        <div class="user-info">
                            <div class="user-avatar">
                                <div class="avatar-placeholder"><span>Q</span></div>
                            </div>
                            <span class="user-name">Quartararo Xondic</span>
                        </div>
                        <div class="user-wallet">
                            <img src="{{ asset('assets/images/wallets/trustwallet.png') }}" alt="Trust Wallet" class="wallet-logo" onerror="this.outerHTML='<span class=\'wallet-badge trustwallet\'>Trust Wallet</span>'">
                        </div>
                    </div>
                    <div class="user-item">
                        <div class="user-info">
                            <div class="user-avatar">
                                <div class="avatar-placeholder"><span>C</span></div>
                            </div>
                            <span class="user-name">Christian Bonaco</span>
                        </div>
                        <div class="user-wallet">
                            <img src="{{ asset('assets/images/wallets/coinbase.png') }}" alt="Coinbase" class="wallet-logo" onerror="this.outerHTML='<span class=\'wallet-badge coinbase\'>Coinbase</span>'">
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection