@extends('layouts.user')

@section('title', __('user.dashboard') . ' - ' . __('user.portal'))

@section('content')
<style>
/* Simple & Clean Dashboard - No Duplicates */
.dashboard {
    max-width: 500px;
    margin: 0 auto;
    padding: 1rem;
    padding-bottom: 100px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Welcome Section */
.welcome {
    background: #4f46e5;
    color: white;
    padding: 1.5rem;
    border-radius: 12px;
    text-align: center;
    margin-bottom: 1.5rem;
}

.welcome h1 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.welcome p {
    opacity: 0.9;
    font-size: 0.9rem;
}

/* Balance Card */
.balance {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.section-title {
    font-size: 1.1rem;
    color: #374151;
    margin-bottom: 1rem;
    font-weight: 600;
}

.balance-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.balance-item {
    text-align: center;
    padding: 1rem;
    background: #f8fafc;
    border-radius: 8px;
}

.balance-amount {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 0.25rem;
}

.balance-label {
    font-size: 0.8rem;
    color: #6b7280;
    font-weight: 500;
}

/* Quick Actions */
.actions {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.actions-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    border-radius: 8px;
    text-decoration: none;
    transition: transform 0.2s;
    font-weight: 500;
    font-size: 0.9rem;
}

.action-btn:hover {
    transform: translateY(-2px);
}

.action-btn i {
    font-size: 1.5rem;
    margin-bottom: 0.25rem;
}

.btn-primary { background: #4f46e5; color: white; }
.btn-success { background: #10b981; color: white; }
.btn-warning { background: #f59e0b; color: white; }
.btn-secondary { background: #6b7280; color: white; }

/* Stats */
.stats {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.stat-item {
    text-align: center;
    padding: 1rem;
    background: #f8fafc;
    border-radius: 8px;
}

.stat-number {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 0.25rem;
}

.stat-label {
    font-size: 0.8rem;
    color: #6b7280;
    font-weight: 500;
}

/* Bottom Navigation */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    border-top: 1px solid #e5e7eb;
    padding: 0.75rem;
    display: flex;
    justify-content: space-around;
    z-index: 100;
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    text-decoration: none;
    color: #6b7280;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.5rem;
    border-radius: 6px;
    min-width: 60px;
}

.nav-item.active {
    color: #4f46e5;
    background: #eef2ff;
}

.nav-item i {
    font-size: 1.2rem;
}

/* Desktop Responsive */
@media (min-width: 768px) {
    .dashboard {
        max-width: 800px;
        padding: 2rem;
    }
    
    .balance-grid,
    .actions-grid,
    .stats-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .bottom-nav {
        display: none;
    }
}
</style>

<div class="dashboard">
    <!-- Welcome -->
    <div class="welcome">
        <h1>🎮 Chào mừng, {{ $stats['username'] ?? 'User' }}!</h1>
        <p>Quản lý tài khoản game MU của bạn</p>
    </div>

    <!-- Balance -->
    <div class="balance">
        <h2 class="section-title">💰 Số dư tài khoản</h2>
        <div class="balance-grid">
            <div class="balance-item">
                <div class="balance-amount">{{ number_format($stats['web_coins'] ?? 0) }}</div>
                <div class="balance-label">Coins Web</div>
            </div>
            <div class="balance-item">
                <div class="balance-amount">{{ number_format($stats['coins'] ?? 0) }}</div>
                <div class="balance-label">Kim cương Game</div>
            </div>
        </div>
    </div>

    <!-- Quick Actions -->
    <div class="actions">
        <h2 class="section-title">⚡ Thao tác nhanh</h2>
        <div class="actions-grid">
            <a href="{{ route('user.recharge') }}" class="action-btn btn-primary">
                <i class="fas fa-gem"></i>
                Nạp tiền
            </a>
            <a href="{{ route('user.withdraw') }}" class="action-btn btn-success">
                <i class="fas fa-money-bill-transfer"></i>
                Rút tiền
            </a>
            <a href="{{ route('user.giftcode') }}" class="action-btn btn-warning">
                <i class="fas fa-gift"></i>
                Giftcode
            </a>
            <a href="{{ route('user.recharge.history') }}" class="action-btn btn-secondary">
                <i class="fas fa-history"></i>
                Lịch sử
            </a>
        </div>
    </div>

    <!-- Stats -->
    <div class="stats">
        <h2 class="section-title">📊 Thống kê</h2>
        <div class="stats-grid">
            <div class="stat-item">
                <div class="stat-number">{{ number_format($stats['total_characters'] ?? 0) }}</div>
                <div class="stat-label">Nhân vật</div>
            </div>
            <div class="stat-item">
                <div class="stat-number">{{ number_format($stats['total_recharged_vnd'] ?? 0) }}đ</div>
                <div class="stat-label">Tổng nạp</div>
            </div>
        </div>
    </div>
</div>

<!-- Bottom Navigation -->
<div class="bottom-nav">
    <a href="{{ route('user.dashboard') }}" class="nav-item active">
        <i class="fas fa-home"></i>
        <span>Trang chủ</span>
    </a>
    <a href="{{ route('user.recharge') }}" class="nav-item">
        <i class="fas fa-gem"></i>
        <span>Nạp tiền</span>
    </a>
    <a href="{{ route('user.withdraw') }}" class="nav-item">
        <i class="fas fa-money-bill-transfer"></i>
        <span>Rút tiền</span>
    </a>
    <a href="{{ route('user.recharge.history') }}" class="nav-item">
        <i class="fas fa-history"></i>
        <span>Lịch sử</span>
    </a>
</div>

@endsection