<?php
// ==========================================
// 1. CEK SESSION & INISIALISASI (Login Strict)
// ==========================================
session_start();

// Sistem Deteksi Login: Redirect paksa jika tidak ada session
if (!isset($_SESSION['username'])) {
    header("Location: index.php");
    exit();
}

$username = htmlspecialchars($_SESSION['username']);

// ==========================================
// 2. INTEGRASI PLUGIN (DUMMY FUNCTION)
// ==========================================
function cekRankServer($user) {
    // Simulasi: User saat ini memiliki rank 'adventurer'
    return 'adventurer'; 
}

$current_rank_key = cekRankServer($username);

// ==========================================
// 3. ARRAY DATA RANK
// ==========================================
$ranks = [
    'scout' => [
        'name' => '[SCOUT] Rank', 
        'tier' => 1, 
        'price' => 10000, 
        'discount' => 0,
        'features' => '<b>Fitur Scout:</b><br><br>- Akses kit Scout (/kit scout)<br>- Prefix [Scout] di chat<br>- 1 Home tambahan<br>- Akses ke /hat<br><br><i>Sangat cocok untuk pemain baru yang ingin memulai petualangan!</i>',
        'image' => 'https://mc-heads.net/body/MHF_OakLog/100.png'
    ],
    'adventurer' => [
        'name' => '[ADVENTURER] Rank', 
        'tier' => 2, 
        'price' => 20000,
        'discount' => 10, 
        'features' => '<b>Fitur Adventurer:</b><br><br>- Semua fitur Scout<br>- Akses kit Adventurer<br>- 3 Home tambahan<br>- Bisa menggunakan warna di chat<br>- Prioritas login saat server penuh',
        'image' => 'https://mc-heads.net/body/MHF_Stone/100.png' 
    ],
    'vip' => [
        'name' => '[VIP] Rank', 
        'tier' => 3, 
        'price' => 30000, 
        'discount' => 20,
        'features' => '<b>Fitur VIP:</b><br><br>- Semua fitur Adventurer<br>- Akses kit VIP harian<br>- 5 Home tambahan<br>- Perintah /fly di lobby<br>- Nickname custom (/nick)',
        'image' => 'https://mc-heads.net/body/MHF_GoldBlock/100.png' 
    ],
    'mvp' => [
        'name' => '[MVP] Rank', 
        'tier' => 4, 
        'price' => 50000, 
        'discount' => 82,
        'features' => '<b>Fitur MVP (Rank Tertinggi):</b><br><br>- Seluruh fitur VIP<br>- Akses kit MVP (Legendary)<br>- Home tidak terbatas<br>- /fly di semua world<br>- /heal & /feed gratis tanpa cooldown<br>- Glow effect eksklusif<br><br><i>Rank tertinggi dengan kekuatan tak terbatas!</i>',
        'image' => 'https://mc-heads.net/body/MHF_DiamondBlock/100.png' 
    ]
];

// Ambil Tier dan Harga dari rank user saat ini
$current_tier = isset($ranks[$current_rank_key]) ? $ranks[$current_rank_key]['tier'] : 0;
$current_price = isset($ranks[$current_rank_key]) ? $ranks[$current_rank_key]['price'] : 0;
$current_rank_name = isset($ranks[$current_rank_key]) ? $ranks[$current_rank_key]['name'] : 'Player';

// URL Store Base
$platform = isset($_SESSION['platform']) ? $_SESSION['platform'] : 'java';
$name_path = ($platform === 'bedrock') ? "bedrock-" . urlencode($username) : urlencode($username);
$store_base_url = "https://store.fanaesmc.me/" . $name_path;
?>
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>In-Game Ranks - ANYMHOST</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        /* CSS Reset & Basic Setup */
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background-color: #0f172a; 
            color: #f8fafc;
            line-height: 1.6;
        }

        /* HEADER NAVIGASI */
        header {
            background-color: #1e293b;
            padding: 15px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
            position: relative;
        }

        .logo-container {
            display: flex;
            align-items: center;
            gap: 10px;
            font-weight: bold;
            font-size: 1.2rem;
            text-transform: uppercase;
        }

        .logo-container img {
            max-height: 30px;
            width: auto;
        }

        /* Hamburger Menu */
        .hamburger-btn {
            background: transparent;
            border: 1px solid rgba(255, 255, 255, 0.1);
            color: white;
            font-size: 1.5rem;
            cursor: pointer;
            padding: 5px 10px;
            border-radius: 6px;
            transition: background 0.3s ease;
            width: 45px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .hamburger-btn:hover {
            background: rgba(255, 255, 255, 0.1);
        }

        /* Dropdown Menu dengan Animasi Naik-Turun */
        .dropdown-menu {
            display: block; 
            position: absolute;
            top: 100%;
            right: 20px;
            background-color: #1e293b;
            min-width: 200px;
            border-radius: 8px;
            box-shadow: 0 10px 25px rgba(0,0,0,0.5);
            border: 1px solid rgba(255, 255, 255, 0.05);
            z-index: 1000;
            overflow: hidden;
            margin-top: 10px;
            
            /* Animasi Setup */
            visibility: hidden;
            opacity: 0;
            transform: translateY(-15px);
            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
            pointer-events: none;
        }

        .dropdown-menu.active {
            visibility: visible;
            opacity: 1;
            transform: translateY(0);
            pointer-events: auto;
        }

        .dropdown-menu a {
            display: block;
            padding: 12px 20px;
            color: #f8fafc;
            text-decoration: none;
            transition: background 0.3s ease;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        }

        .dropdown-menu a:hover {
            background-color: rgba(255, 255, 255, 0.05);
        }

        /* MAIN CONTAINER */
        .container {
            max-width: 1000px;
            margin: 0 auto;
            padding: 20px;
        }

        /* INFO USER SECTION */
        .profile-card {
            background-color: #1e293b;
            border-radius: 12px;
            padding: 30px;
            text-align: center;
            margin-bottom: 30px;
            border: 1px solid rgba(255, 255, 255, 0.05);
        }

        .avatar {
            width: 90px;
            height: 90px;
            border-radius: 50%;
            margin: 0 auto 15px auto;
            border: 3px solid transparent;
            background: linear-gradient(#1e293b, #1e293b) padding-box, 
                        linear-gradient(135deg, #6366f1, #a855f7) border-box;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
        }

        .avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .rank-badge {
            background: linear-gradient(135deg, #ff7eb3, #ff758c);
            color: white;
            padding: 5px 15px;
            border-radius: 50px;
            font-size: 0.85rem;
            font-weight: bold;
            text-transform: uppercase;
            display: inline-block;
            margin-bottom: 10px;
            box-shadow: 0 4px 15px rgba(255, 117, 140, 0.4);
        }

        .username {
            font-size: 1.5rem;
            font-weight: bold;
            margin-bottom: 20px;
        }

        .profile-buttons {
            display: flex;
            flex-direction: column;
            gap: 10px;
            max-width: 300px;
            margin: 0 auto;
        }

        .btn-outline {
            background: transparent;
            border: 1px solid rgba(255, 255, 255, 0.1);
            color: #f8fafc;
            padding: 10px;
            border-radius: 8px;
            text-decoration: none;
            transition: background 0.3s ease;
        }

        .btn-outline:hover {
            background: rgba(255, 255, 255, 0.05);
        }

        .btn-outline.text-red {
            color: #ef4444;
            border-color: rgba(239, 68, 68, 0.3);
        }

        /* GRID RANK CARDS */
        .section-title {
            margin-bottom: 20px;
            font-size: 1.1rem;
            font-weight: 600;
        }

        .ranks-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 20px;
        }

        .rank-card {
            background-color: #1e293b;
            border-radius: 12px;
            padding: 25px 20px;
            text-align: center;
            border: 1px solid rgba(255, 255, 255, 0.05);
            display: flex;
            flex-direction: column;
            align-items: center;
            transition: transform 0.3s ease;
            position: relative; 
        }

        .rank-card:hover {
            transform: translateY(-5px);
        }

        .rank-card img {
            width: 120px;
            height: 120px;
            object-fit: contain;
            margin-bottom: 20px;
        }

        .rank-card h3 {
            font-size: 1.2rem;
            margin-bottom: 5px;
        }

        /* FITUR: INFO & DISCOUNT BADGE */
        .info-btn {
            position: absolute;
            top: 15px;
            left: 15px;
            background-color: #0f172a;
            color: white;
            width: 35px;
            height: 35px;
            border-radius: 50%;
            border: none;
            cursor: pointer;
            font-size: 1.1rem;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: opacity 0.2s;
        }
        .info-btn:hover { opacity: 0.8; }

        .discount-badge {
            position: absolute;
            top: 15px;
            right: 15px;
            background-color: #ef4444;
            color: white;
            padding: 5px 12px;
            border-radius: 50px;
            font-weight: bold;
            font-size: 0.9rem;
            box-shadow: 0 0 15px rgba(239, 68, 68, 0.5);
        }

        /* HARGA & TOMBOL BAWAH */
        .strike-price {
            text-decoration: line-through;
            color: #64748b;
            font-size: 1rem;
            font-weight: 600;
        }

        .final-price {
            color: #fbbf24;
            font-size: 1.8rem;
            font-weight: bold;
            margin: 5px 0 10px 0;
        }

        .savings-tag {
            background-color: rgba(34, 197, 94, 0.1);
            color: #22c55e;
            padding: 5px 15px;
            border-radius: 50px;
            font-size: 0.9rem;
            font-weight: bold;
            display: inline-flex;
            align-items: center;
            gap: 5px;
            margin-bottom: 15px;
        }

        .button-group {
            display: flex;
            gap: 10px;
            width: 100%;
            margin-top: auto;
        }

        .btn-action {
            flex: 1;
            padding: 12px;
            border-radius: 8px;
            border: none;
            font-weight: bold;
            font-size: 1rem;
            cursor: pointer;
            transition: opacity 0.3s ease;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 8px;
            width: 100%;
        }

        .btn-action:hover { opacity: 0.9; }

        .btn-upgrade {
            background: linear-gradient(135deg, #6366f1, #a855f7);
            color: white;
        }

        .btn-disabled-lower {
            background-color: #334155;
            color: #94a3b8;
            cursor: not-allowed;
        }

        .btn-owned {
            background-color: #9f1239; 
            color: white;
            cursor: not-allowed;
        }

        .btn-give {
            width: 50px;
            background-color: #fbbf24;
            color: #000;
            border: none;
            border-radius: 8px;
            font-size: 1.2rem;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: opacity 0.3s;
        }
        
        .btn-give:hover { opacity: 0.8; }

        /* MODAL POPUP */
        .modal {
            display: none; position: fixed; z-index: 2000; left: 0; top: 0; width: 100%; height: 100%;
            background-color: rgba(0,0,0,0.7); backdrop-filter: blur(5px);
            justify-content: center; align-items: center; padding: 20px;
        }
        .modal-content {
            background-color: #1e293b; border-radius: 12px; width: 100%; max-width: 500px;
            display: flex; flex-direction: column;
            border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 10px 30px rgba(0,0,0,0.5);
        }
        .modal-header {
            padding: 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.05);
            display: flex; justify-content: space-between; align-items: center;
        }
        .modal-header h2 { font-size: 1.3rem; color: #fbbf24; }
        .close-modal { color: #94a3b8; font-size: 1.5rem; cursor: pointer; background: none; border: none; }
        .close-modal:hover { color: white; }
        
        /* PEMBARUAN PENTING: AREA SCROLL MODAL */
        .modal-body { 
            padding: 20px; 
            max-height: 60vh; /* Membatasi tinggi agar bisa di-scroll */
            overflow-y: auto; /* Memunculkan scroll otomatis di dalam modal */
            color: #cbd5e1; 
            line-height: 1.8; 
            text-align: left; 
            overscroll-behavior: contain; /* Mencegah scroll tembus ke background */
        }

        /* Styling Scrollbar Khusus untuk Modal Body */
        .modal-body::-webkit-scrollbar { width: 8px; }
        .modal-body::-webkit-scrollbar-track { background: #0f172a; border-radius: 8px; }
        .modal-body::-webkit-scrollbar-thumb { background: #334155; border-radius: 8px; }
        .modal-body::-webkit-scrollbar-thumb:hover { background: #475569; }

        @media (max-width: 600px) {
            .ranks-grid {
                grid-template-columns: 1fr; 
            }
        }
    </style>
</head>
<body>

    <header>
        <div class="logo-container">
            <span><i class="fa-solid fa-crown" style="color:#ff7eb3;"></i> ANYMHOST</span>
        </div>
        
        <button class="hamburger-btn" onclick="toggleMenu()">
            <i id="hamburgerIcon" class="fa-solid fa-bars"></i>
        </button>

        <div class="dropdown-menu" id="navDropdown">
            <a href="<?php echo $store_base_url; ?>/dashboard">Home</a>
            <a href="<?php echo $store_base_url; ?>/ranks/">Ranks</a>
            <a href="<?php echo $store_base_url; ?>/money">Money</a>
            <a href="<?php echo $store_base_url; ?>/rules">Rules</a>
        </div>
    </header>

    <div class="container">
        <div class="profile-card">
            <div class="avatar">
                <img src="https://mc-heads.net/avatar/<?php echo str_replace('.', '', $username); ?>/100" alt="Avatar">
            </div>
            <div class="rank-badge"><?php echo $current_rank_key; ?></div>
            <div class="username"><?php echo $username; ?></div>

            <div class="profile-buttons">
                <a href="<?php echo $store_base_url; ?>/money" class="btn-outline"><i class="fa-solid fa-coins"></i> Credits</a>
                <a href="logout.php" class="btn-outline text-red"><i class="fa-solid fa-arrow-right-from-bracket"></i> Logout</a>
            </div>
        </div>

        <div class="section-title">
            <?php echo count($ranks); ?> products in ranks
        </div>

        <div class="ranks-grid">
            <?php foreach ($ranks as $key => $rank): ?>
                <?php 
                    // LOGIKA KALKULASI HARGA DISKON DAN ELIMINASI SEBELUM RENDER
                    $base_price = $rank['price'];
                    $is_upgrade = false;
                    
                    if ($rank['tier'] > $current_tier) {
                        $base_price = $rank['price'] - $current_price;
                        $is_upgrade = true;
                    }

                    $discount_amount = $base_price * ($rank['discount'] / 100);
                    $final_price = $base_price - $discount_amount;

                    // Tombol Give selalu tersedia di semua kondisi
                    $give_button_html = '<a href="give.php?rank=' . $key . '" style="text-decoration:none;"><button class="btn-give"><i class="fa-solid fa-gift"></i></button></a>';
                ?>
                
                <div class="rank-card">
                    
                    <button class="info-btn" onclick="openInfoModal('<?php echo $rank['name']; ?>', '<?php echo htmlspecialchars($rank['features'], ENT_QUOTES); ?>')">
                        <i class="fa-solid fa-info"></i>
                    </button>

                    <?php if ($rank['discount'] > 0 && $rank['tier'] > $current_tier): ?>
                        <div class="discount-badge"><?php echo $rank['discount']; ?>%</div>
                    <?php endif; ?>

                    <img src="<?php echo $rank['image']; ?>" alt="<?php echo $rank['name']; ?>">
                    <h3><?php echo $rank['name']; ?></h3>
                    
                    <?php 
                    if ($rank['tier'] < $current_tier) {
                        // 1. Rank Lebih Rendah (Eliminasi)
                        echo '<div class="strike-price">Rp ' . number_format($rank['price'], 0, ',', '.') . '</div>';
                        echo '<div class="final-price" style="color:#94a3b8;">Rp ' . number_format($final_price, 0, ',', '.') . '</div>';
                        
                        echo '<div class="button-group">';
                        echo '<button class="btn-action btn-disabled-lower" disabled>Rank Lebih Rendah</button>';
                        echo $give_button_html;
                        echo '</div>';
                    
                    } elseif ($rank['tier'] == $current_tier) {
                        // 2. Rank Sama (Sudah Dimiliki)
                        echo '<div class="final-price" style="margin-top:15px;">Rp ' . number_format($final_price, 0, ',', '.') . '</div>';
                        
                        echo '<div class="button-group">';
                        echo '<button class="btn-action btn-owned" disabled>Sudah Dibeli</button>';
                        echo $give_button_html;
                        echo '</div>';
                    
                    } else {
                        // 3. Rank Lebih Tinggi (Tersedia untuk dibeli / Upgrade) - Redirect ke Checkout
                        if ($rank['discount'] > 0 || $is_upgrade) {
                            echo '<div class="strike-price">Rp ' . number_format($base_price, 0, ',', '.') . '</div>';
                        }
                        echo '<div class="final-price">Rp ' . number_format($final_price, 0, ',', '.') . '</div>';
                        
                        if ($discount_amount > 0) {
                            echo '<div class="savings-tag"><i class="fa-solid fa-tag"></i> Hemat Rp ' . number_format($discount_amount, 0, ',', '.') . '</div>';
                        } else {
                            echo '<div style="margin-bottom:15px;"></div>'; 
                        }
                        
                        $btn_text = $is_upgrade ? "Upgrade Rank" : "Add to Cart";
                        
                        echo '<div class="button-group">';
                        echo '<a href="checkout.php?rank=' . $key . '" style="text-decoration:none; flex:1; display:flex;">';
                        echo '<button class="btn-action btn-upgrade"><i class="fa-solid fa-cart-plus"></i> ' . $btn_text . '</button>';
                        echo '</a>';
                        echo $give_button_html;
                        echo '</div>';
                    }
                    ?>
                </div>
            <?php endforeach; ?>
        </div>

    </div>

    <div id="infoModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h2 id="modalTitle">[NAMA] RANK</h2>
                <button class="close-modal" onclick="closeInfoModal()"><i class="fa-solid fa-xmark"></i></button>
            </div>
            <div class="modal-body" id="modalBody">
                </div>
        </div>
    </div>

    <script>
        // Fungsi untuk toggle menu hamburger dengan animasi ganti icon
        function toggleMenu() {
            var menu = document.getElementById("navDropdown");
            var icon = document.getElementById("hamburgerIcon");
            
            menu.classList.toggle("active");
            
            if (menu.classList.contains("active")) {
                icon.classList.remove("fa-bars");
                icon.classList.add("fa-xmark");
            } else {
                icon.classList.remove("fa-xmark");
                icon.classList.add("fa-bars");
            }
        }

        // Fitur Modal Popup dengan Kunci Scroll Background
        const modal = document.getElementById('infoModal');
        const modalTitle = document.getElementById('modalTitle');
        const modalBody = document.getElementById('modalBody');

        function openInfoModal(title, featuresHTML) {
            modalTitle.innerText = title;
            modalBody.innerHTML = featuresHTML; 
            modal.style.display = "flex";
            // Kunci scroll halaman utama
            document.body.style.overflow = "hidden";
        }

        function closeInfoModal() {
            modal.style.display = "none";
            // Kembalikan fungsi scroll halaman utama
            document.body.style.overflow = "auto";
        }

        // Menutup menu dan popup jika user mengklik area luar
        window.onclick = function(event) {
            if (event.target == modal) {
                closeInfoModal();
            }
            if (!event.target.matches('.hamburger-btn') && !event.target.closest('.hamburger-btn')) {
                var menu = document.getElementById("navDropdown");
                var icon = document.getElementById("hamburgerIcon");
                
                if (menu.classList.contains('active')) {
                    menu.classList.remove('active');
                    icon.classList.remove('fa-xmark');
                    icon.classList.add('fa-bars');
                }
            }
        }
    </script>
</body>
</html>