@extends('core::layouts.dashboard')

@section('title', $title ?? 'Dashboard')

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

<div class="dashboard-container">
    {{-- Top Row: Total Poin + Game Reward --}}
    <div class="dashboard-top-row">
        {{-- Left: Total Poin Card --}}
        <div class="total-poin-card">
            <div class="poin-icon">
                <svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
                    {{-- Outer circle --}}
                    <circle cx="40" cy="45" r="22" stroke="#00e5a0" stroke-width="2" fill="none"/>
                    {{-- Inner circle --}}
                    <circle cx="40" cy="45" r="14" stroke="#00e5a0" stroke-width="2" fill="none"/>
                    {{-- Dollar sign --}}
                    <text x="40" y="50" text-anchor="middle" fill="#00e5a0" font-size="16" font-weight="bold">$</text>
                    {{-- Wings left --}}
                    <path d="M12 40 Q20 35 25 42" stroke="#00e5a0" stroke-width="2" fill="none"/>
                    <path d="M14 35 Q22 30 27 38" stroke="#00e5a0" stroke-width="2" fill="none"/>
                    <path d="M16 30 Q24 25 29 34" stroke="#00e5a0" stroke-width="2" fill="none"/>
                    {{-- Wings right --}}
                    <path d="M68 40 Q60 35 55 42" stroke="#00e5a0" stroke-width="2" fill="none"/>
                    <path d="M66 35 Q58 30 53 38" stroke="#00e5a0" stroke-width="2" fill="none"/>
                    <path d="M64 30 Q56 25 51 34" stroke="#00e5a0" stroke-width="2" fill="none"/>
                    {{-- Top decoration --}}
                    <line x1="40" y1="18" x2="40" y2="22" stroke="#00e5a0" stroke-width="2"/>
                    <line x1="32" y1="20" x2="34" y2="24" stroke="#00e5a0" stroke-width="2"/>
                    <line x1="48" y1="20" x2="46" y2="24" stroke="#00e5a0" stroke-width="2"/>
                    <circle cx="40" cy="15" r="2" fill="#00e5a0"/>
                    <circle cx="30" cy="17" r="2" fill="#00e5a0"/>
                    <circle cx="50" cy="17" r="2" fill="#00e5a0"/>
                </svg>
            </div>
            <h3 class="poin-title">Total Poin yang Didapat</h3>
            
            <div class="poin-display">
                <span class="poin-label">Total Poin</span>
                <div class="poin-value-row">
                    <span class="poin-value">{{ number_format($total_points ?? 1301) }}</span>
                    <button class="poin-refresh" title="Refresh">
                        <i class="fas fa-sync-alt"></i>
                    </button>
                </div>
            </div>
            
            <div class="wallet-address">
                <span class="address-label">Address: {{ $wallet_address ?? '2109076542' }}</span>
                <div class="wallet-row">
                    <img src="{{ asset('images/indodax-logo.png') }}" alt="INDODAX" class="exchange-logo" onerror="this.style.display='none'; this.nextElementSibling.style.display='block';">
                    <span class="exchange-name" style="display:none;">INDODAX</span>
                    <button class="btn-redeem">Redeem Poin</button>
                </div>
            </div>
        </div>
        
        {{-- Right: Game Reward Card --}}
        <div class="game-reward-card">
            <div class="reward-header">
                <i class="fas fa-gamepad"></i>
                <span>Game Reward</span>
            </div>
            <div class="reward-list">
                @forelse($game_rewards ?? [] as $reward)
                <div class="reward-item">
                    <div class="reward-info">
                        <h6>{{ $reward['title'] ?? 'Game Reward' }}</h6>
                        <span>{{ $reward['game'] ?? 'Puzzle Quest' }}</span>
                    </div>
                    <div class="reward-meta">
                        <span class="reward-date">{{ $reward['date'] ?? '' }}</span>
                        <span class="reward-points">+{{ $reward['amount'] ?? 0 }}</span>
                    </div>
                </div>
                @empty
                {{-- Default sample data --}}
                <div class="reward-item">
                    <div class="reward-info">
                        <h6>Game Reward</h6>
                        <span>Puzzle Quest</span>
                    </div>
                    <div class="reward-meta">
                        <span class="reward-date">16/12/2025</span>
                        <span class="reward-points">+25</span>
                    </div>
                </div>
                <div class="reward-item">
                    <div class="reward-info">
                        <h6>Game Reward</h6>
                        <span>Puzzle Quest</span>
                    </div>
                    <div class="reward-meta">
                        <span class="reward-date">17/12/2025</span>
                        <span class="reward-points">+10</span>
                    </div>
                </div>
                <div class="reward-item">
                    <div class="reward-info">
                        <h6>Game Reward</h6>
                        <span>Puzzle Quest</span>
                    </div>
                    <div class="reward-meta">
                        <span class="reward-date">17/12/2025</span>
                        <span class="reward-points">+5</span>
                    </div>
                </div>
                <div class="reward-item">
                    <div class="reward-info">
                        <h6>Game Reward</h6>
                        <span>Puzzle Quest</span>
                    </div>
                    <div class="reward-meta">
                        <span class="reward-date">20/12/2025</span>
                        <span class="reward-points">+15</span>
                    </div>
                </div>
                <div class="reward-item">
                    <div class="reward-info">
                        <h6>Game Reward</h6>
                        <span>Puzzle Quest</span>
                    </div>
                    <div class="reward-meta">
                        <span class="reward-date">20/12/2025</span>
                        <span class="reward-points">+15</span>
                    </div>
                </div>
                @endforelse
            </div>
        </div>
    </div>
    
    {{-- Bottom: Token Stats Card --}}
    <div class="token-stats-card">
        <div class="token-header">
            <h3 class="token-name">{{ $token['name'] ?? 'AsetQu V.2' }}</h3>
            <span class="token-price">Rp. {{ number_format($token['price'] ?? 27.53, 2) }}</span>
        </div>
        
        <div class="stats-grid">
            <div class="stat-item">
                <span class="stat-label">MARKET CAP</span>
                <span class="stat-value">Rp. {{ $token['market_cap'] ?? '5.62' }}</span>
            </div>
            <div class="stat-item">
                <span class="stat-label">UNLOCKED MKT CAP</span>
                <span class="stat-value">Rp. {{ $token['unlocked_market_cap'] ?? '275.222 JT' }}</span>
            </div>
            <div class="stat-item">
                <span class="stat-label">VOLUME (24H)</span>
                <span class="stat-value">Rp. {{ $token['volume_24h'] ?? '0' }}</span>
            </div>
            <div class="stat-item">
                <span class="stat-label">FDV</span>
                <span class="stat-value">Rp. {{ $token['fdv'] ?? '27.50 M' }}</span>
            </div>
            <div class="stat-item">
                <span class="stat-label">VOL/MKT CAP (24)</span>
                <span class="stat-value">Rp. {{ $token['vol_mkt_cap'] ?? '0' }}</span>
            </div>
            <div class="stat-item">
                <span class="stat-label">HOLDERS</span>
                <span class="stat-value">{{ $token['holders'] ?? '2.12K' }}</span>
            </div>
            <div class="stat-item">
                <span class="stat-label">MAX. SUPPLY</span>
                <span class="stat-value">{{ $token['max_supply'] ?? '4.999.999 ASETQU' }}</span>
            </div>
            <div class="stat-item">
                <span class="stat-label">TOTAL SUPPLY</span>
                <span class="stat-value">{{ $token['total_supply'] ?? '9.999.999 ASETQU' }}</span>
            </div>
            <div class="stat-item full-width">
                <span class="stat-label">SELF-REPORTED CIRCULATING SUPPLY</span>
                <span class="stat-value">{{ $token['circulating_supply'] ?? '201.2K ASETQU' }}</span>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
    .dashboard-container {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }
    
    /* Top Row Grid */
    .dashboard-top-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }
    
    /* Total Poin Card */
    .total-poin-card {
        background: linear-gradient(180deg, rgba(20, 10, 35, 0.95) 0%, rgba(15, 8, 30, 0.98) 100%);
        border: 1px solid rgba(139, 92, 246, 0.4);
        border-radius: 16px;
        padding: 32px;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        box-shadow: 0 0 30px rgba(139, 92, 246, 0.15);
    }
    
    .poin-icon {
        margin-bottom: 16px;
    }
    
    .poin-icon svg {
        width: 90px;
        height: 90px;
    }
    
    .poin-title {
        color: #fff;
        font-size: 20px;
        font-weight: 500;
        margin-bottom: 24px;
    }
    
    .poin-display {
        background: rgba(139, 92, 246, 0.15);
        border: 1px solid rgba(139, 92, 246, 0.5);
        border-radius: 8px;
        padding: 14px 20px;
        width: 100%;
        margin-bottom: 16px;
    }
    
    .poin-label {
        display: block;
        color: rgba(255, 255, 255, 0.5);
        font-size: 12px;
        text-align: left;
        margin-bottom: 4px;
    }
    
    .poin-value-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    
    .poin-value {
        color: #00e5a0;
        font-size: 32px;
        font-weight: 700;
    }
    
    .poin-refresh {
        background: transparent;
        border: 1px solid rgba(0, 229, 160, 0.5);
        border-radius: 50%;
        width: 36px;
        height: 36px;
        color: #00e5a0;
        cursor: pointer;
        transition: all 0.3s;
    }
    
    .poin-refresh:hover {
        background: rgba(0, 229, 160, 0.15);
    }
    
    .wallet-address {
        background: transparent;
        border: 1px solid rgba(139, 92, 246, 0.5);
        border-radius: 8px;
        padding: 14px 18px;
        width: 100%;
    }
    
    .address-label {
        display: block;
        color: rgba(255, 255, 255, 0.7);
        font-size: 13px;
        text-align: left;
        margin-bottom: 12px;
    }
    
    .wallet-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    
    .exchange-logo {
        height: 28px;
        object-fit: contain;
    }
    
    .exchange-name {
        color: #06b6d4;
        font-weight: 700;
        font-size: 18px;
        letter-spacing: 1px;
    }
    
    .btn-redeem {
        background: linear-gradient(135deg, #aa28c4 0%, #7d1595 100%);
        border: none;
        border-radius: 20px;
        padding: 10px 24px;
        color: #fff;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.3s;
    }
    
    .btn-redeem:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 20px rgba(236, 72, 153, 0.5);
    }
    
    /* Game Reward Card */
    .game-reward-card {
        background: linear-gradient(180deg, rgba(20, 10, 35, 0.95) 0%, rgba(15, 8, 30, 0.98) 100%);
        border: 1px solid rgba(139, 92, 246, 0.4);
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 0 30px rgba(168, 85, 247, 0.2);
    }
    
    .reward-header {
        background: linear-gradient(90deg, #2a045f 0%, #670e8d 50%, #5706a3 100%);
        padding: 14px 20px;
        display: flex;
        align-items: center;
        gap: 10px;
        color: #fff;
        font-weight: 600;
        font-size: 16px;
    }
    
    .reward-header i {
        font-size: 18px;
    }
    
    .reward-list {
        padding: 0;
        min-height: 200px;
        max-height: 400px;
        overflow-y: auto;
        background: linear-gradient(180deg, rgba(139, 92, 246, 0.15) 0%, rgba(88, 28, 135, 0.25) 100%);
    }
    
    .reward-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 14px 20px;
        border-bottom: 1px solid rgba(168, 85, 247, 0.35);
        background: transparent;
    }
    
    .reward-item:last-child {
        border-bottom: none;
    }
    
    /* Empty state styling */
    .reward-list:has(.reward-item:only-child) {
        min-height: auto;
    }
    
    .reward-list:has(.reward-item:nth-child(-n+3):last-child) {
        min-height: auto;
    }
    
    .reward-info h6 {
        color: #fff;
        font-size: 15px;
        font-weight: 500;
        margin: 0 0 4px 0;
    }
    
    .reward-info span {
        color: rgba(255, 255, 255, 0.5);
        font-size: 13px;
    }
    
    .reward-meta {
        text-align: right;
    }
    
    .reward-date {
        display: block;
        color: rgba(255, 255, 255, 0.5);
        font-size: 12px;
        margin-bottom: 4px;
    }
    
    .reward-points {
        color: #00e5a0;
        font-weight: 700;
        font-size: 18px;
    }
    
    /* Token Stats Card */
    .token-stats-card {
        background: linear-gradient(180deg, rgba(20, 10, 35, 0.95) 0%, rgba(15, 8, 30, 0.98) 100%);
        border: 1px solid rgba(139, 92, 246, 0.4);
        border-radius: 16px;
        padding: 24px;
        box-shadow: 0 0 30px rgba(139, 92, 246, 0.15);
    }
    
    .token-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        padding-bottom: 16px;
        border-bottom: 1px solid rgba(139, 92, 246, 0.2);
    }
    
    .token-name {
        color: #fff;
        font-size: 22px;
        font-weight: 600;
        margin: 0;
    }
    
    .token-price {
        color: #00e5a0;
        font-size: 32px;
        font-weight: 700;
    }
    
    .stats-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
    
    .stat-item {
        background: rgba(139, 92, 246, 0.12);
        border: 1px solid rgba(139, 92, 246, 0.35);
        border-radius: 8px;
        padding: 18px 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .stat-item.full-width {
        grid-column: 1 / -1;
        background: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, rgba(59, 130, 246, 0.15) 100%);
        border-color: rgba(59, 130, 246, 0.4);
    }
    
    .stat-label {
        color: rgba(255, 255, 255, 0.5);
        font-size: 11px;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 8px;
    }
    
    .stat-value {
        color: #ec4899;
        font-size: 17px;
        font-weight: 600;
    }
    
    .stat-item.full-width .stat-value {
        color: #06b6d4;
    }
    
    /* Scrollbar for reward list */
    .reward-list::-webkit-scrollbar {
        width: 4px;
    }
    
    .reward-list::-webkit-scrollbar-track {
        background: rgba(139, 92, 246, 0.1);
    }
    
    .reward-list::-webkit-scrollbar-thumb {
        background: rgba(139, 92, 246, 0.4);
        border-radius: 2px;
    }
    
    /* Responsive */
    @media (max-width: 991px) {
        .dashboard-top-row {
            grid-template-columns: 1fr;
        }
        
        .token-header {
            flex-direction: column;
            align-items: flex-start;
            gap: 8px;
        }
    }
    
    @media (max-width: 575px) {
        .stats-grid {
            grid-template-columns: 1fr;
        }
        
        .stat-item.full-width {
            grid-column: 1;
        }
        
        .poin-value {
            font-size: 26px;
        }
        
        .token-price {
            font-size: 24px;
        }
        
        .total-poin-card,
        .token-stats-card {
            padding: 20px;
        }
    }
</style>
@endpush