<?php
/**
 * Main Account Dashboard (Flat Layout)
 */
require_once 'includes/db.php';

// Check if user is logged in
if (!isset($_SESSION['user_id'])) { 
    header("Location: login"); 
    exit; 
}
$user_id = $_SESSION['user_id'];

// Fetch User Data
$u = $pdo->prepare("SELECT * FROM users WHERE id = ?");
$u->execute([$user_id]);
$user = $u->fetch();

// Fetch Total Orders & Total Spend Amount
$stats_query = $pdo->prepare("SELECT COUNT(id) as total_orders, SUM(amount) as total_spend FROM orders WHERE user_id = ?");
$stats_query->execute([$user_id]);
$stats = $stats_query->fetch();

$total_orders = $stats['total_orders'] ? $stats['total_orders'] : 0;
$total_spend = $stats['total_spend'] ? $stats['total_spend'] : 0;

$page_title = 'My Account';
require_once 'includes/header.php';
?>

<style>
    @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=Noto+Serif+Bengali:wght@300;400;500;600;700&display=swap');

    /* Scoped strictly to the account wrapper to prevent overwriting global styles */
    .account-wrapper { 
        font-family: 'Roboto', 'Noto Serif Bengali', sans-serif !important;
        max-width: 1000px; 
        margin: 30px auto 100px; 
        padding: 0 15px; 
        box-sizing: border-box;
        width: 100%;
        color: #334155;
    }

    .account-wrapper * {
        box-sizing: border-box;
    }

    .flat-card {
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        padding: 20px;
        box-shadow: none !important;
        margin-bottom: 25px;
        width: 100%;
    }

    /* Profile Header - Centered */
    .profile-header-centered {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin-bottom: 20px;
        padding-bottom: 20px;
        border-bottom: 1px dashed #e2e8f0;
    }
    
    .profile-avatar-img {
        width: 70px;
        height: 70px;
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid #e2e8f0;
        background: #f1f5f9;
        display: block;
        margin-bottom: 12px;
    }
    
    .profile-name {
        font-size: 1.25rem;
        font-weight: 700;
        color: #00059E;
        margin: 0 0 4px 0;
    }
    
    .profile-email {
        font-size: 0.9rem;
        color: #64748b;
        margin: 0;
    }

    /* Stats Grid - 3 Columns */
    .stats-grid-3 { 
        display: grid; 
        grid-template-columns: repeat(3, 1fr); 
        gap: 10px; 
        width: 100%;
    }
    
    .stat-box { 
        padding: 15px 10px; 
        border-radius: 8px; 
        border: 1px solid #e2e8f0; 
        background: #f8fafc; 
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
    }
    
    .stat-info {
        width: 100%;
    }

    .stat-value { 
        font-size: 1.1rem; 
        font-weight: 700; 
        color: #0f172a; 
        margin: 0 0 4px 0; 
        line-height: 1; 
        word-break: break-all;
    }

    .stat-label { 
        font-size: 0.7rem; 
        color: #64748b; 
        font-weight: 600; 
        margin: 0;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    /* Vertical Navigation Menu */
    .menu-list {
        display: flex;
        flex-direction: column;
    }
    
    .menu-list-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 20px;
        border-bottom: 1px solid #f1f5f9;
        text-decoration: none;
        color: #334155;
        font-weight: 600;
        font-size: 1rem;
        transition: all 0.3s;
    }
    
    .menu-list-item:last-child {
        border-bottom: none;
    }
    
    .menu-list-item:hover {
        background: #f8fafc;
        color: #00059E;
    }
    
    .menu-list-left {
        display: flex;
        align-items: center;
        gap: 12px;
    }
    
    .menu-list-left svg {
        width: 20px;
        height: 20px;
        color: #94a3b8;
        transition: color 0.3s;
    }
    
    .menu-list-item:hover .menu-list-left svg {
        color: #00059E;
    }
    
    .menu-list-arrow {
        width: 16px;
        height: 16px;
        color: #cbd5e1;
    }
    
    .menu-list-item:hover .menu-list-arrow {
        color: #00059E;
    }

    .menu-list-item.logout {
        color: #ef4444;
    }
    
    .menu-list-item.logout .menu-list-left svg {
        color: #ef4444;
    }
    
    .menu-list-item.logout:hover {
        background: #fee2e2;
    }
    
    .menu-list-item.logout:hover .menu-list-arrow {
        color: #ef4444;
    }
</style>

<div class="account-wrapper">
    
    <div class="flat-card">
        <div class="profile-header-centered">
            <?php if(!empty($user['avater'])): ?>
                <img src="<?php echo (strpos($user['avater'], 'http') === 0) ? htmlspecialchars($user['avater']) : get_image_url('users', $user['avater']); ?>" alt="Avatar" class="profile-avatar-img">
            <?php else: ?>
                <img src="https://i.supaimg.com/d25ec2bf-78c6-492d-a44f-f0d52090f6c0/22513d31-b9ec-4651-944a-e298ba75a748.png" alt="Avatar" class="profile-avatar-img">
            <?php endif; ?>
            <h2 class="profile-name"><?php echo htmlspecialchars($user['name']); ?></h2>
            <p class="profile-email"><?php echo htmlspecialchars($user['email']); ?></p>
        </div>

        <div class="stats-grid-3">
            <div class="stat-box">
                <div class="stat-info">
                    <p class="stat-value"><?php echo $total_orders; ?></p>
                    <h4 class="stat-label">Orders</h4>
                </div>
            </div>

            <div class="stat-box">
                <div class="stat-info">
                    <p class="stat-value"><?php echo (defined('CURRENCY_SYMBOL') ? CURRENCY_SYMBOL : '৳') . number_format($user['balance'] ?? 0, 2); ?></p>
                    <h4 class="stat-label">Balance</h4>
                </div>
            </div>
            
            <div class="stat-box">
                <div class="stat-info">
                    <p class="stat-value"><?php echo (defined('CURRENCY_SYMBOL') ? CURRENCY_SYMBOL : '৳') . number_format($total_spend, 2); ?></p>
                    <h4 class="stat-label">Spent</h4>
                </div>
            </div>
        </div>
    </div>
    
    <div class="flat-card" style="padding: 0; overflow: hidden;">
        <div class="menu-list">
            <a href="account_orders" class="menu-list-item">
                <div class="menu-list-left">
                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" /></svg>
                    <span>My Purchases</span>
                </div>
                <svg class="menu-list-arrow" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" /></svg>
            </a>
            
            <a href="account_tickets" class="menu-list-item">
                <div class="menu-list-left">
                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z" /></svg>
                    <span>Support Center</span>
                </div>
                <svg class="menu-list-arrow" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" /></svg>
            </a>
            
            <a href="account_settings" class="menu-list-item">
                <div class="menu-list-left">
                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
                    <span>Settings</span>
                </div>
                <svg class="menu-list-arrow" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" /></svg>
            </a>
            
            <a href="logout" class="menu-list-item logout">
                <div class="menu-list-left">
                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" /></svg>
                    <span>Sign Out</span>
                </div>
                <svg class="menu-list-arrow" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" /></svg>
            </a>
        </div>
    </div>
    
</div>

<?php require_once 'includes/footer.php'; ?>
<?php require_once 'includes/mobile-nav.php'; ?>
