<?php
session_start();
// Same sticky time logic as index.php just to keep variables if header uses them
$now = time(); 
$stickyNow = floor($now / 60) * 60; 

// Static Upcoming Games Data
$upcoming_games = [
    ['name' => 'Money Coming', 'img' => 'https://ossimg.fantasygemsapipicture.com/FantasyGems/gamelogo/JILI/51.png'],
    ['name' => 'Vortex', 'img' => 'https://ossimg.fantasygemsapipicture.com/FantasyGems/gamelogo/TB_Chess/124.png'],
    ['name' => 'Fortune King Jackpot', 'img' => 'https://ossimg.fantasygemsapipicture.com/FantasyGems/gamelogo/JILI/464.png'],
    ['name' => 'Chicken Road 2', 'img' => 'https://ossimg.fantasygemsapipicture.com/FantasyGems/gamelogo/TB_Chess/121.png'],
    ['name' => 'Fortune Gems 3', 'img' => 'https://ossimg.fantasygemsapipicture.com/FantasyGems/gamelogo/JILI/300.png'],
    ['name' => 'Ali baba', 'img' => 'https://ossimg.fantasygemsapipicture.com/FantasyGems/gamelogo/JILI/110.png'],
    ['name' => 'Fortune Dragon', 'img' => 'https://ossimg.fantasygemsapipicture.com/FantasyGems/gamelogo/PG/1695365.png'],
    ['name' => 'Ocean King Jackpot', 'img' => 'https://ossimg.fantasygemsapipicture.com/FantasyGems/gamelogo/JILI/289.png']
];

// Static Providers Data
$providers = [
    'https://ossimg.fantasygemsapipicture.com/FantasyGems/vendorlogo/vendorlogo_20250909163143s64h.png',
    'https://ossimg.fantasygemsapipicture.com/FantasyGems/vendorlogo/vendorlogo_20250204163924lin7.png',
    'https://ossimg.fantasygemsapipicture.com/FantasyGems/vendorlogo/vendorlogo_20250909163157kowf.png',
    'https://ossimg.fantasygemsapipicture.com/FantasyGems/vendorlogo/vendorlogo_20250204163957p4ko.png',
    'https://ossimg.fantasygemsapipicture.com/FantasyGems/vendorlogo/vendorlogo_20250204164011mikx.png',
    'https://ossimg.fantasygemsapipicture.com/FantasyGems/vendorlogo/vendorlogo_202502041713263hg5.png'
];

// Map categories to FontAwesome icons
function getCategoryIcon($cat) {
    $map = [
        'All' => 'fa-solid fa-border-all',
        'Popular' => 'fa-solid fa-star',
        'Top Rated' => 'fa-solid fa-fire',
        'Lottery' => 'fa-solid fa-ticket',
        'Best Choice' => 'fa-solid fa-ranking-star',
        'Games' => 'fa-solid fa-gamepad',
        'Slots' => 'fa-solid fa-coins'
    ];
    return $map[$cat] ?? 'fa-solid fa-play'; // Default icon
}
?>
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Games Library - PAKclub</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            box-sizing: border-box;
            font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
        }
        body {
            background: linear-gradient(to right, #43210d, #140904);
            background-attachment: fixed; 
            color: #ffffff;
            margin: 0;
            padding: 0;
            padding-bottom: 120px; 
            min-height: 100vh;
        }

        /* Top Golden Separator */
        .top-divider {
            height: 1px;
            width: 85%;
            margin: 5px auto 10px auto;
            background: linear-gradient(to right, transparent, rgba(255, 207, 75, 0.5), transparent);
        }

        /* Games Header Title */
        .page-header {
            text-align: center;
            font-size: 22px;
            font-weight: 900;
            margin: 15px 0;
            color: #ffca28;
            text-shadow: 0 2px 4px rgba(0,0,0,0.8);
        }

        /* Section Titles */
        .section-title {
            font-size: 16px;
            font-weight: 700;
            color: #ff9800;
            margin: 25px 15px 15px 15px;
            text-transform: uppercase;
            letter-spacing: 1px;
            border-left: 3px solid #ffca28;
            padding-left: 10px;
        }

        /* Quick Action Filters (Replaces Pills) */
        .filter-container {
            display: flex;
            overflow-x: auto;
            gap: 15px;
            padding: 10px 15px;
            margin-bottom: 15px;
            -ms-overflow-style: none;
            scrollbar-width: none;
            align-items: flex-start;
        }
        .filter-container::-webkit-scrollbar {
            display: none;
        }
        .filter-action {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-width: 65px;
            cursor: pointer;
            opacity: 0.4; /* Dimmed state */
            transition: opacity 0.3s ease, transform 0.2s ease;
        }
        .filter-action:active {
            transform: scale(0.9);
        }
        .filter-action.active {
            opacity: 1; /* Bright state */
        }
        .filter-icon {
            font-size: 22px;
            color: #ffca28;
            margin-bottom: 8px;
            filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
            transition: filter 0.3s ease;
        }
        .filter-action.active .filter-icon {
            filter: drop-shadow(0 0 10px rgba(255, 202, 40, 0.6));
        }
        .filter-label {
            font-size: 11px;
            color: #e8dccc;
            font-weight: 500;
            white-space: nowrap;
            transition: color 0.3s ease;
        }
        .filter-action.active .filter-label {
            color: #ffffff;
            font-weight: 700;
        }

        /* Games Grid */
        .games-section {
            margin: 0 15px 20px 15px;
        }
        .games-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 12px;
        }
        .game-card {
            position: relative;
            border-radius: 12px;
            overflow: hidden;
            aspect-ratio: 1 / 1;
            background-color: #1a0f0a;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
            cursor: pointer;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }
        .game-card:active {
            transform: scale(0.95);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
        }
        .game-card img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        
        .game-title {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            padding: 42px 8px 8px 8px; 
            background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.7) 45%, transparent 100%); 
            color: #ffffff;
            font-size: 12px;
            font-weight: 600;
            text-align: left;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            z-index: 2;
        }

        .badge-tl {
            position: absolute;
            top: 0;
            left: 0;
            padding: 2px 8px;
            font-size: 10px;
            font-weight: bold;
            color: #fff;
            border-radius: 0 0 8px 0;
            z-index: 3;
        }
        .badge-top { background-color: #ff9800; border-right: 1px solid #fff; border-bottom: 1px solid #fff; }
        .badge-tb { background-color: #8bc34a; }
        .badge-mg { background-color: #2196f3; }
        .badge-jili { background-color: #e040fb; }

        .badge-tr {
            position: absolute;
            top: 6px;
            right: 6px;
            background-color: #000000;
            color: #ffffff;
            padding: 2px 6px;
            border-radius: 12px;
            font-size: 10px;
            font-weight: bold;
            z-index: 3;
        }

        /* Upcoming Games Specific Styles */
        .upcoming-card {
            filter: grayscale(40%);
            opacity: 0.9;
        }
        .badge-coming-soon {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) rotate(-15deg);
            background: rgba(230, 57, 70, 0.9);
            color: #fff;
            padding: 3px 8px;
            font-weight: 900;
            font-size: 11px;
            text-transform: uppercase;
            border: 1px solid #fff;
            border-radius: 4px;
            white-space: nowrap;
            z-index: 4;
            box-shadow: 0 4px 10px rgba(0,0,0,0.5);
            pointer-events: none;
        }

        /* Providers Grid (2 per row) - Full Width */
        .providers-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
            margin: 0 15px 20px 15px;
        }
        .provider-card {
            background-color: #1a0f0a;
            border: 1px solid #4a2814;
            border-radius: 8px;
            overflow: hidden;
            display: flex;
            box-shadow: 0 4px 8px rgba(0,0,0,0.4);
            cursor: pointer;
            transition: transform 0.2s ease;
        }
        .provider-card:active {
            transform: scale(0.95);
        }
        .provider-card img {
            width: 100%;
            height: auto;
            display: block;
            object-fit: cover;
        }

        /* Black Glassy iPhone Style Toast */
        .custom-toast {
            visibility: hidden;
            min-width: auto;
            background: rgba(20, 20, 20, 0.75); 
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px); 
            color: #fff;
            text-align: center;
            border-radius: 50px; 
            padding: 10px 24px;
            position: fixed;
            z-index: 9999;
            left: 50%;
            bottom: 50px; 
            transform: translateX(-50%);
            font-size: 13px;
            font-weight: 500;
            opacity: 0;
            transition: opacity 0.3s, bottom 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            border: 1px solid rgba(255, 255, 255, 0.15); 
            box-shadow: 0 4px 15px rgba(0,0,0,0.3);
            white-space: nowrap;
        }
        .custom-toast.show {
            visibility: visible;
            opacity: 1;
            bottom: 90px; 
        }

    </style>
</head>
<body>

    <?php include 'external/header.php'; ?>
    <?php
    // Fetch all games from DB
    $games_stmt = $pdo->query("SELECT * FROM games ORDER BY sort_order ASC, id DESC");
    $db_games = $games_stmt ? $games_stmt->fetchAll(PDO::FETCH_ASSOC) : [];
    
    // Extract unique categories
    $all_cats = [];
    foreach($db_games as $g) {
        $cats = explode(',', $g['categories']);
        foreach($cats as $c) {
            $c = trim($c);
            if(!empty($c) && !in_array($c, $all_cats)) {
                $all_cats[] = $c;
            }
        }
    }
    // Sort categories alphabetically but push generic ones to front
    sort($all_cats);
    $priority = ['Popular', 'Top Rated', 'Best Choice', 'Games', 'Slots', 'Lottery'];
    $final_cats = array_intersect($priority, $all_cats);
    foreach($all_cats as $c) {
        if(!in_array($c, $final_cats)) {
            $final_cats[] = $c;
        }
    }
    ?>

    <div class="top-divider"></div>
    
    <div class="page-header">Games Library</div>

    <div class="filter-container">
        <div class="filter-action active" onclick="filterCategory('All', this)">
            <i class="<?php echo getCategoryIcon('All'); ?> filter-icon"></i>
            <span class="filter-label">All</span>
        </div>
        
        <?php foreach($final_cats as $cat): ?>
            <div class="filter-action" onclick="filterCategory('<?php echo htmlspecialchars($cat); ?>', this)">
                <i class="<?php echo getCategoryIcon($cat); ?> filter-icon"></i>
                <span class="filter-label"><?php echo htmlspecialchars($cat); ?></span>
            </div>
        <?php endforeach; ?>
    </div>

    <div class="games-section">
        <div class="games-grid">
            
            <?php foreach($db_games as $g): ?>
            <?php 
                $catAttr = htmlspecialchars($g['categories']);
                $link = htmlspecialchars($g['link']);
                $onclick = strpos($link, 'javascript:') === 0 ? $link : "window.location.href='$link'";
            ?>
            <div class="game-card lib-card" 
                 data-categories="<?php echo $catAttr; ?>" 
                 data-popular="<?php echo $g['is_popular']; ?>"
                 data-top="<?php echo $g['is_top_rated']; ?>"
                 data-best="<?php echo $g['is_best_choice']; ?>"
                 onclick="<?php echo $onclick; ?>">
                
                <img src="<?php echo htmlspecialchars($g['image_url']); ?>" alt="<?php echo htmlspecialchars($g['name']); ?>">
                
                <?php if($g['badge_text']): ?>
                <div class="badge-tl <?php echo htmlspecialchars($g['badge_color']); ?>"><?php echo htmlspecialchars($g['badge_text']); ?></div>
                <?php endif; ?>
                
                <div class="badge-tr"><?php echo $g['rtp']; ?>%</div>
                <div class="game-title"><?php echo htmlspecialchars($g['name']); ?></div>
            </div>
            <?php endforeach; ?>
            
            <?php if(empty($db_games)): ?>
                <p style="color:#a0938a;grid-column:1/-1;text-align:center;">No games available.</p>
            <?php endif; ?>

        </div>
    </div>

    <div class="section-title">Upcoming Games</div>
    <div class="games-section">
        <div class="games-grid">
            <?php foreach($upcoming_games as $up): ?>
            <div class="game-card upcoming-card" onclick="showToast('Coming Soon!')">
                <img src="<?php echo htmlspecialchars($up['img']); ?>" alt="<?php echo htmlspecialchars($up['name']); ?>">
                <div class="badge-coming-soon">Soon</div>
                <div class="game-title"><?php echo htmlspecialchars($up['name']); ?></div>
            </div>
            <?php endforeach; ?>
        </div>
    </div>

    <div class="section-title">Game Providers</div>
    <div class="providers-grid">
        <?php foreach($providers as $logo): ?>
        <div class="provider-card">
            <img src="<?php echo htmlspecialchars($logo); ?>" alt="Game Provider Logo">
        </div>
        <?php endforeach; ?>
    </div>

    <?php include 'external/footer.php'; ?>

    <div id="customToast" class="custom-toast"></div>

    <script>
        function filterCategory(category, element) {
            // Update active state on quick-action buttons
            const actions = document.querySelectorAll('.filter-action');
            actions.forEach(action => action.classList.remove('active'));
            element.classList.add('active');

            // Filter cards
            const cards = document.querySelectorAll('.lib-card');
            cards.forEach(card => {
                if (category === 'All') {
                    card.style.display = 'block';
                    return;
                }

                const cats = card.getAttribute('data-categories') || '';
                const isPop = card.getAttribute('data-popular') === '1';
                const isTop = card.getAttribute('data-top') === '1';
                const isBest = card.getAttribute('data-best') === '1';
                
                let show = false;
                if (category === 'Popular' && isPop) show = true;
                else if (category === 'Top Rated' && isTop) show = true;
                else if (category === 'Best Choice' && isBest) show = true;
                else if (cats.includes(category)) show = true;
                
                if (show) {
                    card.style.display = 'block';
                } else {
                    card.style.display = 'none';
                }
            });
        }
        
        function showToast(message) {
            if (!message) return;
            var toast = document.getElementById("customToast");
            if(window.toastTimeout) {
                clearTimeout(window.toastTimeout);
                toast.className = "custom-toast"; 
            }
            toast.innerText = message;
            void toast.offsetWidth; // Force reflow
            toast.className = "custom-toast show";
            window.toastTimeout = setTimeout(function(){ 
                toast.className = toast.className.replace("show", ""); 
            }, 1500); 
        }
        <?php if(isset($_GET['err']) && $_GET['err'] === 'demo_restriction'): ?>
        document.addEventListener('DOMContentLoaded', function() {
            showToast('This account can only play WinGo');
        });
        <?php endif; ?>
    </script>
</body>
</html>