@extends('layouts.user')

@section('title', __('user.profile_title'))

@section('content')
<style>
/* Clean Profile Page - Mobile First */
.profile {
    max-width: 500px;
    margin: 0 auto;
    padding: 1rem;
    padding-bottom: 100px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
    min-height: 100vh;
}

/* Page Header */
.page-header {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #1f2937;
    padding: 1.5rem;
    border-radius: 16px;
    text-align: center;
    margin-bottom: 1.5rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.page-header h1 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #8b5cf6;
}

.page-header p {
    color: #6b7280;
    font-size: 0.9rem;
}

/* Card Base */
.card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    animation: fadeIn 0.5s ease-out;
}

.section-title {
    font-size: 1.1rem;
    color: #374151;
    margin-bottom: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Profile Avatar */
.profile-avatar {
    text-align: center;
    margin-bottom: 1.5rem;
}

.avatar {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    box-shadow: 0 8px 25px rgba(139, 92, 246, 0.3);
}

.avatar i {
    font-size: 2rem;
    color: white;
}

.profile-name {
    font-size: 1.25rem;
    font-weight: 700;
    color: #374151;
    margin-bottom: 0.5rem;
}

.profile-subtitle {
    color: #6b7280;
    font-size: 0.875rem;
}

/* Info Grid */
.info-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.info-item {
    background: rgba(139, 92, 246, 0.05);
    border: 1px solid rgba(139, 92, 246, 0.1);
    border-radius: 12px;
    padding: 1rem;
}

.info-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #8b5cf6;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
}

.info-value {
    font-size: 1rem;
    font-weight: 600;
    color: #374151;
}

.info-value.empty {
    color: #9ca3af;
    font-style: italic;
}

/* Status Badge */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 500;
}

.status-active {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
}

.status-active::before {
    content: '●';
    color: #10b981;
}

/* Action Buttons */
.actions-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

.action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.btn-primary {
    background: #8b5cf6;
    color: white;
}

.btn-secondary {
    background: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
    border-color: rgba(139, 92, 246, 0.2);
}

.btn-danger {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
    border-color: rgba(239, 68, 68, 0.2);
}

/* Form */
.form-group {
    margin-bottom: 1rem;
}

.form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 0.5rem;
}

.form-input {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid rgba(139, 92, 246, 0.1);
    border-radius: 8px;
    font-size: 1rem;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.8);
}

.form-input:focus {
    outline: none;
    border-color: #8b5cf6;
    background: white;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

/* Bottom Navigation */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    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.7rem;
    font-weight: 500;
    padding: 0.5rem;
    border-radius: 8px;
    min-width: 55px;
    transition: all 0.3s ease;
}

.nav-item.active {
    color: #8b5cf6;
    background: rgba(139, 92, 246, 0.1);
}

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

/* Desktop */
@media (min-width: 768px) {
    .profile {
        max-width: 800px;
        padding: 2rem;
        background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
    }
    
    .info-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .actions-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .bottom-nav {
        display: none;
    }
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
</style>

<div class="profile">
    <!-- Page Header -->
    <div class="page-header">
        <h1>
            <i class="fas fa-user"></i>
            {{ __('user.profile') }}
        </h1>
        <p>{{ __('user.manage_account_info') }}</p>
    </div>

    <!-- Profile Info -->
    <div class="card">
        <div class="profile-avatar">
            <div class="avatar">
                <i class="fas fa-user"></i>
            </div>
            <div class="profile-name">{{ $user->UserName }}</div>
            <div class="profile-subtitle">{{ __('user.member_since') }} {{ $user->CreateTime ? $user->CreateTime->format('d/m/Y') : 'N/A' }}</div>
        </div>

        <div class="info-grid">
            <div class="info-item">
                <div class="info-label">{{ __('user.username_label') }}</div>
                <div class="info-value">{{ $user->UserName }}</div>
            </div>

            <div class="info-item">
                <div class="info-label">{{ __('user.email_label') }}</div>
                <div class="info-value {{ $user->Email ? '' : 'empty' }}">
                    {{ $user->Email ?: __('user.not_updated') }}
                </div>
            </div>

            <div class="info-item">
                <div class="info-label">{{ __('user.phone_number') }}</div>
                <div class="info-value {{ $user->Phone ? '' : 'empty' }}">
                    {{ $user->Phone ?: __('user.not_updated') }}
                </div>
            </div>

            <div class="info-item">
                <div class="info-label">{{ __('user.account_status') }}</div>
                <div class="info-value">
                    <span class="status-badge status-active">{{ __('user.active') }}</span>
                </div>
            </div>
        </div>


    </div>



    <!-- Game Stats -->
    @if(isset($gameStats))
    <div class="card">
        <h2 class="section-title">
            <i class="fas fa-gamepad"></i>
            Thống kê game
        </h2>
        <div class="info-grid">
            <div class="info-item">
                <div class="info-label">Tổng nhân vật</div>
                <div class="info-value">{{ $gameStats['total_characters'] ?? 0 }}</div>
            </div>

            <div class="info-item">
                <div class="info-label">Level cao nhất</div>
                <div class="info-value">{{ $gameStats['highest_level'] ?? 0 }}</div>
            </div>

            <div class="info-item">
                <div class="info-label">Tổng coins đã nạp</div>
                <div class="info-value">{{ number_format($gameStats['total_recharged'] ?? 0) }}</div>
            </div>

            <div class="info-item">
                <div class="info-label">Lần đăng nhập cuối</div>
                <div class="info-value">
                    {{ $user->LastLoginTime ? $user->LastLoginTime->format('d/m/Y H:i') : 'N/A' }}
                </div>
            </div>
        </div>
    </div>
    @endif




</div>

<!-- Bottom Navigation -->
<div class="bottom-nav">
    <a href="{{ route('user.dashboard') }}" class="nav-item">
        <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.profile') }}" class="nav-item active">
        <i class="fas fa-user"></i>
        <span>Hồ sơ</span>
    </a>
    <a href="{{ route('user.recharge.history') }}" class="nav-item">
        <i class="fas fa-history"></i>
        <span>Lịch sử</span>
    </a>
</div>

<script>
// Add touch feedback
document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('.nav-item').forEach(element => {
        element.addEventListener('touchstart', function() {
            if (navigator.vibrate) {
                navigator.vibrate(10);
            }
        });
    });
});
</script>

@endsection