<?php
require_once 'config/protect.php'; 
require_once 'config/database.php'; 

$eitaa_id = $eitaaUser['id'] ?? 0;
$first_name = $eitaaUser['first_name'] ?? 'کاربر';
$last_name = $eitaaUser['last_name'] ?? '';

try {
    $stmtUser = $pdo->prepare("SELECT id FROM users WHERE eitaa_id = ? LIMIT 1");
    $stmtUser->execute([$eitaa_id]);
    $userRow = $stmtUser->fetch();

    if (!$userRow) {
        $insert = $pdo->prepare("INSERT INTO users (eitaa_id, first_name, last_name) VALUES (?, ?, ?)");
        $insert->execute([$eitaa_id, $first_name, $last_name]);
        $internal_user_id = $pdo->lastInsertId();
    } else {
        $internal_user_id = $userRow['id'];
    }

    if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action']) && $_POST['action'] === 'toggle_fav') {
        $game_id = intval($_POST['game_id']);
        
        $checkFav = $pdo->prepare("SELECT id FROM favorites WHERE user_id = ? AND game_id = ?");
        $checkFav->execute([$internal_user_id, $game_id]);
        
        if ($checkFav->fetch()) {
            $pdo->prepare("DELETE FROM favorites WHERE user_id = ? AND game_id = ?")->execute([$internal_user_id, $game_id]);
            echo json_encode(['status' => 'removed']);
        } else {
            $pdo->prepare("INSERT INTO favorites (user_id, game_id) VALUES (?, ?)")->execute([$internal_user_id, $game_id]);
            echo json_encode(['status' => 'added']);
        }
        exit;
    }

    $favQuery = "SELECT g.* FROM games g JOIN favorites f ON g.id = f.game_id WHERE f.user_id = ?";
    $stmtFav = $pdo->prepare($favQuery);
    $stmtFav->execute([$internal_user_id]);
    $favoriteGames = $stmtFav->fetchAll();

    $fav_game_ids = array_column($favoriteGames, 'id');

    $stmtAll = $pdo->query("SELECT * FROM games ORDER BY id DESC");
    $allGames = $stmtAll->fetchAll();

} catch (PDOException $e) {
    die("Error SQL : " . $e->getMessage());
}
?>

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="theme-color" content="#FAF6F0">
    
    <link href="assets/font/main.css" rel="stylesheet" type="text/css" />
    <script src="https://developer.eitaa.com/eitaa-web-app.js"></script>

    <style>
        :root {
            --bg-pastel: #FAF6F0;
            --brown-soft: #5C4B37;
            --accent-latte: #D7C0AE;
            --card-white: #FFFFFF;
            --red-heart: #E57373;
            --gold-lb: #FFD93D;
        }

        * { box-sizing: border-box; -webkit-tap-highlight-color: transparent;  user-select: none; -webkit-user-select: none; -ms-user-select: none;}

        body {
            font-family: 'Kalameh', sans-serif;
            background-color: var(--bg-pastel);
            color: var(--brown-soft);
            margin: 0; padding: 20px;
            display: flex; flex-direction: column; align-items: center;
            min-height: 100vh;
            user-select: none; 
        }
    

        .container { width: 100%; max-width: 480px; position: relative; margin-top:60px; }

        .app-header {
            display: flex; justify-content: space-between; align-items: center;
            background: var(--card-white); padding: 12px 20px;
            border-radius: 20px; margin-bottom: 25px;
            box-shadow: 0 4px 15px rgba(92, 75, 55, 0.04);
            border: 1px solid rgba(215, 192, 174, 0.3);
        }
        .header-text h1 { font-size: 1.1rem; margin: 0; color: var(--brown-soft); }
        .header-text p { font-size: 0.75rem; margin: 3px 0 0; color: #967E76; }

        .profile-btn {
            width: 42px; height: 42px; border-radius: 50%;
            background: var(--accent-latte);
            display: flex; align-items: center; justify-content: center;
            color: white; font-weight: bold; font-size: 1.2rem;
            cursor: pointer; box-shadow: 0 2px 8px rgba(215, 192, 174, 0.5);
            transition: transform 0.2s;
        }
        .profile-btn:active { transform: scale(0.9); }

        .leaderboard-btn {
            width: 42px; height: 42px; border-radius: 50%;
            background: var(--gold-lb);
            display: flex; align-items: center; justify-content: center;
            cursor: pointer; box-shadow: 0 2px 8px rgba(255, 217, 61, 0.4);
            transition: transform 0.2s; margin-left: 10px;
        }
        .leaderboard-btn:active { transform: scale(0.9); }
        .leaderboard-btn svg { width: 22px; height: 22px; fill: white; }
        
        @keyframes pulse-attention {
            0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 179, 0, 0.7); }
            70% { transform: scale(1.1); box-shadow: 0 0 0 12px rgba(255, 179, 0, 0); }
            100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 179, 0, 0); }
        }
        
        .channel-btn {
            width: 45px; height: 45px; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            cursor: pointer; 
            border: 2px solid var(--gold-lb);
            animation: pulse-attention 2s infinite; 
            margin-left: 10px;
            overflow: hidden;
            text-decoration: none;
            background: white;
            flex-shrink: 0;
        }
        .channel-btn img {
            width: 100%; height: 100%; object-fit: cover;
        }

        h2 { font-size: 1rem; margin: 0 0 15px; display: flex; align-items: center; }
        h2::before { content: ''; width: 4px; height: 18px; background: var(--accent-latte); margin-left: 10px; border-radius: 10px; }

        .favorites-box {
            background: var(--card-white);
            border-radius: 22px;
            padding: 20px 15px;
            margin-bottom: 30px;
            border: 2px solid rgba(215, 192, 174, 0.3);
            box-shadow: 0 8px 25px rgba(92, 75, 55, 0.06);
        }

        .game-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }

        .game-card {
            background: var(--card-white); border-radius: 18px; padding: 15px 12px;
            display: flex; flex-direction: column; align-items: center; text-align: center;
            text-decoration: none; color: inherit; border: 1px solid rgba(215, 192, 174, 0.2);
            box-shadow: 0 4px 12px rgba(92, 75, 55, 0.03); transition: transform 0.1s; cursor: pointer; 
        }
        .game-card:active { transform: scale(0.96); }
        
        .game-card img { 
            width: 65px; height: 65px; border-radius: 14px; object-fit: cover; 
            margin: 0 0 12px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.05);
        }
        .game-info { width: 100%; margin-bottom: 12px; }
        .game-info b { font-size: 0.9rem; display: block; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .game-info span { font-size: 0.75rem; color: #967E76; }
        
        .play-btn { 
            background: var(--bg-pastel); color: var(--brown-soft); padding: 8px 0; width: 100%; 
            border-radius: 12px; font-size: 0.8rem; font-weight: bold; border: 1px solid var(--accent-latte); margin-top: auto; 
        }

        .modal-overlay {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(92, 75, 55, 0.6); backdrop-filter: blur(4px);
            display: none; justify-content: center; align-items: center;
            z-index: 1000; opacity: 0; transition: opacity 0.3s ease;
        }
        .modal-overlay.active { display: flex; opacity: 1; }
        
        .modal-box {
            background: var(--bg-pastel); border-radius: 25px; padding: 35px 20px 20px;
            width: 280px; text-align: center; position: relative;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15); border: 2px solid white;
            transform: scale(0.8) translateY(20px); transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        .modal-overlay.active .modal-box { transform: scale(1) translateY(0); }

        .close-btn {
            position: absolute; top: -15px; right: -15px;
            width: 36px; height: 36px; border-radius: 50%; background: #FFFFFF;
            color: #b54a4a; display: flex; align-items: center; justify-content: center;
            font-size: 1.2rem; font-weight: bold; cursor: pointer;
            box-shadow: 0 4px 10px rgba(0,0,0,0.15); border: 2px solid #FAF6F0;
        }

        .rank-item {
            display: flex; justify-content: space-between; align-items: center;
            padding: 12px 10px; border-bottom: 1px solid rgba(0,0,0,0.05);
        }
        .rank-number { width: 30px; font-weight: bold; color: var(--accent-latte); text-align: right; }
        .rank-name { flex: 1; text-align: right; padding-right: 10px; font-size: 0.9rem; }
        .rank-score { font-weight: bold; color: var(--brown-soft); font-size: 0.9rem; }
        
        .user-own-rank {
            padding: 12px; border-radius: 12px; margin-bottom: 15px; font-size: 0.9rem;
        }

        .modal-profile-img {
            width: 80px; height: 80px; border-radius: 50%; background: var(--accent-latte);
            margin: 0 auto 15px; border: 4px solid white; box-shadow: 0 5px 15px rgba(215, 192, 174, 0.5);
            display: flex; align-items: center; justify-content: center; color: white; font-size: 2.5rem; font-weight: bold;
        }
        .modal-name { font-size: 1.2rem; font-weight: 900; color: var(--brown-soft); margin: 0 0 5px 0; }
        .modal-id { font-size: 0.85rem; color: #967E76; margin: 0; background: white; padding: 4px 12px; border-radius: 20px; display: inline-block; }

        .modal-game-img {
            width: 90px; height: 90px; border-radius: 20px; object-fit: cover;
            margin: 0 auto 15px; border: 3px solid white; box-shadow: 0 5px 15px rgba(92, 75, 55, 0.15);
        }
        
        .modal-action-buttons { display: flex; gap: 10px; margin-top: 20px; }
        
        .start-game-btn {
            flex: 1; text-decoration: none; background: var(--brown-soft); color: white;
            padding: 12px 0; border-radius: 14px; font-size: 1rem; font-weight: bold;
            box-shadow: 0 4px 10px rgba(92, 75, 55, 0.2); transition: transform 0.1s;
            display: flex; justify-content: center; align-items: center;
        }
        .start-game-btn:active { transform: scale(0.95); }

        .fav-btn {
            width: 50px; height: 50px; background: var(--card-white);
            border: 2px solid rgba(215, 192, 174, 0.3); border-radius: 14px; 
            display: flex; justify-content: center; align-items: center;
            cursor: pointer; transition: transform 0.1s; box-shadow: 0 4px 10px rgba(92, 75, 55, 0.05);
        }
        .fav-btn:active { transform: scale(0.95); }
        .fav-btn svg { width: 24px; height: 24px; fill: none; stroke: var(--brown-soft); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: all 0.2s ease; }
        .fav-btn.active svg { fill: var(--red-heart); stroke: var(--red-heart); }
    </style>
</head>
<body>

    <div class="container">
        
        <div class="app-header">
            <div class="header-text">
                <h1><?php echo htmlspecialchars($first_name); ?></h1>
            </div>
            <div style="display: flex; align-items: center;">
                <div class="leaderboard-btn" onclick="openLeaderboardModal()">
                    <svg viewBox="0 0 24 24"><path d="M7.5 21H2V9h5.5v12zm7.25 0h-5.5V3h5.5v18zM22 21h-5.5V12H22v9z"/></svg>
                </div>
                                
                <div class="channel-btn" onclick="goToChannel()">
                    <img src="uploads/logo.png" alt="کانال ما">
                </div>
            </div>
        </div>

        <?php if (!empty($favoriteGames)): ?>
            <div class="favorites-box">
                <h2>بازی های مورد علاقه</h2>
                <div class="game-grid">
                    <?php foreach ($favoriteGames as $game): ?>
                        <div class="game-card" onclick="openGameModal(<?php echo $game['id']; ?>, '<?php echo htmlspecialchars($game['title'], ENT_QUOTES); ?>', '<?php echo htmlspecialchars($game['image_url'], ENT_QUOTES); ?>', '<?php echo htmlspecialchars("games/" . $game['game_url'], ENT_QUOTES); ?>', true)">
                            <img src="<?php echo htmlspecialchars($game['image_url']); ?>" alt="icon">
                            <div class="game-info">
                                <b><?php echo htmlspecialchars($game['title']); ?></b>
                                <span>بازی محبوب شما</span>
                            </div>
                            <div class="play-btn">شروع</div>
                        </div>
                    <?php endforeach; ?>
                </div>
            </div>
        <?php endif; ?>

        <h2 style="margin-top: <?php echo empty($favoriteGames) ? '0' : '15px'; ?>;">همه ی بازی ها</h2>
        <div class="game-grid">
            <?php if (!empty($allGames)): ?>
                <?php foreach ($allGames as $game): ?>
                    <?php $isFav = in_array($game['id'], $fav_game_ids) ? 'true' : 'false'; ?>
                    <div class="game-card" onclick="openGameModal(<?php echo $game['id']; ?>, '<?php echo htmlspecialchars($game['title'], ENT_QUOTES); ?>', '<?php echo htmlspecialchars($game['image_url'], ENT_QUOTES); ?>', '<?php echo htmlspecialchars("games/" . $game['game_url'], ENT_QUOTES); ?>', <?php echo $isFav; ?>)">
                        <img src="<?php echo htmlspecialchars($game['image_url']); ?>" alt="icon">
                        <div class="game-info">
                            <b><?php echo htmlspecialchars($game['title']); ?></b>
                            <span>آماده برای بازی</span>
                        </div>
                        <div class="play-btn">شروع</div>
                    </div>
                <?php endforeach; ?>
            <?php else: ?>
                <div style="text-align: center; color: #967E76; font-size: 0.85rem; margin-top: 20px;">بازی در دیتابیس یافت نشد!</div>
            <?php endif; ?>
        </div>
    </div>

    <div class="modal-overlay" id="profileModal" onclick="closeProfileModal(event)">
        <div class="modal-box" onclick="event.stopPropagation()">
            <div class="close-btn" onclick="closeProfileModal(event)">✕</div>
            <div class="modal-profile-img">
                <?php echo mb_substr($first_name, 0, 1, "utf-8"); ?>
            </div>
            <p class="modal-name"><?php echo htmlspecialchars($first_name . ' ' . $last_name); ?></p>
            <p class="modal-id">شناسه: <?php echo htmlspecialchars($eitaa_id); ?></p>
        </div>
    </div>

    <div class="modal-overlay" id="leaderboardModal" onclick="closeLeaderboardModal(event)">
        <div class="modal-box" style="width: 320px;" onclick="event.stopPropagation()">
            <div class="close-btn" onclick="closeLeaderboardModal(event)">✕</div>
            <h2 id="lbTitle">وضعیت بازی‌ها</h2>
            <div id="lbContent" style="max-height: 400px; overflow-y: auto;">
                <p>در حال بارگذاری...</p>
            </div>
        </div>
    </div>

    <div class="modal-overlay" id="gameModal" onclick="closeGameModal(event)">
        <div class="modal-box" onclick="event.stopPropagation()">
            <div class="close-btn" onclick="closeGameModal(event)">✕</div>
            <img id="modalGameImage" src="" class="modal-game-img" alt="Game Icon">
            <p class="modal-name" id="modalGameTitle">نام بازی</p>
            <p class="modal-id">آماده برای رقابت و هیجان؟</p>
            <div class="modal-action-buttons">
                <button id="modalFavBtn" class="fav-btn" onclick="toggleFavorite()">
                    <svg viewBox="0 0 24 24"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
                </button>
                <a href="#" id="modalGameLink" class="start-game-btn">شروع بازی</a>
            </div>
        </div>
    </div>

<script>

    function goToChannel() {
        const channelId = 'bazikhoone_channel'; 
        const channelUrl = `https://eitaa.com/${channelId}`;
    
        if (window.Eitaa && window.Eitaa.WebApp && typeof window.Eitaa.WebApp.openEitaaLink === 'function') {
            window.Eitaa.WebApp.openEitaaLink(channelUrl);
        } else {
            window.open(channelUrl, '_blank');
        }
    }
    const profileModal = document.getElementById('profileModal');
    function openProfileModal() {
        profileModal.style.display = 'flex';
        setTimeout(() => { profileModal.classList.add('active'); }, 10);
    }
    function closeProfileModal(e) {
        if(e) e.stopPropagation();
        profileModal.classList.remove('active');
        setTimeout(() => { profileModal.style.display = 'none'; }, 300);
    }

    const lbModal = document.getElementById('leaderboardModal');
    const lbContent = document.getElementById('lbContent');

    function openLeaderboardModal() {
        document.getElementById('lbTitle').innerText = 'وضعیت بازی‌ها';
        lbContent.innerHTML = '<p>در حال بارگذاری...</p>';
        lbModal.style.display = 'flex';
        setTimeout(() => { lbModal.classList.add('active'); }, 10);
        
        fetch(`leaderboard_logic.php?action=get_games&user_id=<?php echo $internal_user_id; ?>`)
            .then(res => res.json())
            .then(games => {
                let html = '<p style="font-size:0.85rem; margin-bottom:15px; color:#967E76;">بازی‌هایی که انجام داده‌اید:</p>';
                
                if(games.length === 0) {
                    html = '<div style="background: #fff3cd; border: 1px dashed #ffeeba; color: #856404; padding: 15px; border-radius: 12px; font-size: 0.9rem;">شما هنوز هیچ بازی‌ای انجام نداده‌اید! برای ثبت در لیدربورد ابتدا بازی کنید.</div>';
                } else {
                    games.forEach(g => {
                        html += `<div class="game-card" style="flex-direction:row; justify-content:flex-start; margin-bottom:10px; padding:10px; width:100%; text-align:right;" onclick="loadRank(${g.id}, '${g.title}')">
                                    <img src="${g.image_url}" style="width:45px; height:45px; margin:0 0 0 15px; border-radius:8px;">
                                    <div style="flex:1;">
                                        <b style="display:block; font-size:0.95rem; margin-bottom:4px;">${g.title}</b>
                                        <span style="font-size:0.75rem; color:#28a745; font-weight:bold;">مشاهده رتبه و رکورد شما 🏆</span>
                                    </div>
                                 </div>`;
                    });
                }
                lbContent.innerHTML = html;
            });
    }

    function loadRank(gameId, title) {
        document.getElementById('lbTitle').innerText = 'برترین‌های ' + title;
        lbContent.innerHTML = '<p>در حال دریافت رتبه‌ها...</p>';

        const url = `leaderboard_logic.php?action=get_ranks&game_id=${gameId}&user_id=<?php echo $internal_user_id; ?>&t=${Date.now()}`;

        fetch(url)
            .then(res => res.text())
            .then(text => {
                try {
                    const data = JSON.parse(text);
                    
                    if(data.status === 'error') {
                        lbContent.innerHTML = `<div style="background:#f8d7da; color:#721c24; padding:10px; border-radius:8px; font-size:0.9rem;"><b>ارور دیتابیس:</b><br>${data.message}</div>`;
                        return;
                    }

                    let html = '';

                    let uRank = data.userRank !== undefined ? data.userRank : 'ثبت نشده';
                    let uScore = (data.userScore !== undefined && data.userScore !== null) ? data.userScore : '0';
                    let suffix = data.isTimeBased ? ' ثانیه' : ' امتیاز';
                    
                    if (uScore !== '0') uScore += suffix;

                    if (uRank === 'ثبت نشده') {
                        html += `<div class="user-own-rank" style="background: #f8d7da; border: 1px dashed #f5c6cb; color: #721c24;">
                                    <b>شما هنوز این بازی را انجام نداده‌اید!</b>
                                 </div>`;
                    } else {
                        html += `<div class="user-own-rank" style="background: #d4edda; border: 1px dashed #c3e6cb; color: #155724; display:flex; justify-content:space-between; align-items:center;">
                                    <span>رتبه شما: <b style="font-size:1.2rem;">${uRank}</b></span>
                                    <span style="font-size:0.85rem;">رکورد: <b>${uScore}</b></span>
                                 </div>`;
                    }

                    if(!data.topTen || data.topTen.length === 0) {
                        html += '<p>امتیازی برای این بازی ثبت نشده است.</p>';
                    } else {
                        data.topTen.forEach((item, index) => {
                            let bestScore = item.best_score !== undefined ? item.best_score : (item.max_score !== undefined ? item.max_score : 0);
                            html += `<div class="rank-item">
                                        <span class="rank-number">#${index + 1}</span>
                                        <span class="rank-name">${item.first_name} ${item.last_name || ''}</span>
                                        <span class="rank-score" style="direction: ltr; display: inline-block;">${bestScore} ${suffix}</span>
                                     </div>`;
                        });
                    }
                    lbContent.innerHTML = html;

                } catch (e) {
                    console.error("متن دریافتی از سرور خراب است:", text);
                    lbContent.innerHTML = `<div style="background:#f8d7da; color:#721c24; padding:10px; border-radius:8px; font-size:0.8rem; text-align:left; direction:ltr;">
                        <b>خطای سرور (PHP Error):</b><br>${text.substring(0, 150)}...
                    </div>`;
                }
            })
            .catch(error => {
                lbContent.innerHTML = '<p style="color: #E57373; font-weight: bold; padding:10px;">خطا در ارتباط با سرور!</p>';
            });
    }

    function closeLeaderboardModal(e) {
        if(e) e.stopPropagation();
        lbModal.classList.remove('active');
        setTimeout(() => { 
            lbModal.style.display = 'none';
        }, 300);
    }

    const gameModal = document.getElementById('gameModal');
    const modalGameImage = document.getElementById('modalGameImage');
    const modalGameTitle = document.getElementById('modalGameTitle');
    const modalGameLink = document.getElementById('modalGameLink');
    const modalFavBtn = document.getElementById('modalFavBtn');
    
    let currentGameId = null;

    function openGameModal(id, title, imageUrl, gameUrl, isFav) {
        currentGameId = id;
        localStorage.setItem('active_game_id', id);
        
        modalGameTitle.innerText = title;
        modalGameImage.src = imageUrl;
        modalGameLink.href = gameUrl;
        
        if (isFav) {
            modalFavBtn.classList.add('active');
        } else {
            modalFavBtn.classList.remove('active');
        }
        
        gameModal.style.display = 'flex';
        setTimeout(() => { gameModal.classList.add('active'); }, 10);
    }

    function closeGameModal(e) {
        if(e) e.stopPropagation();
        gameModal.classList.remove('active');
        setTimeout(() => { gameModal.style.display = 'none'; }, 300);
    }

    function toggleFavorite() {
        if (!currentGameId) return;
        const isCurrentlyFav = modalFavBtn.classList.contains('active');
        modalFavBtn.classList.toggle('active');
        
        let formData = new FormData();
        formData.append('action', 'toggle_fav');
        formData.append('game_id', currentGameId);

        fetch(window.location.href, {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            window.location.reload();
        })
        .catch(error => {
            modalFavBtn.classList.toggle('active');
        });
    }

    document.addEventListener("DOMContentLoaded", () => {
        try {
            if (window.Eitaa && window.Eitaa.WebApp) {
                const wa = window.Eitaa.WebApp;
                wa.ready();
                wa.expand();
                
                if (typeof wa.requestFullscreen === 'function') wa.requestFullscreen();
                if (typeof wa.disableVerticalSwipes === 'function') wa.disableVerticalSwipes();
                if (wa.BackButton) wa.BackButton.hide();
    
                window.history.pushState({page: 'root'}, "", "");
                window.onpopstate = function(event) { wa.close(); };
            }
        } catch (error) {
            console.error("Error Eitaa Init:", error);
        }
    });
    
    document.addEventListener("visibilitychange", () => {
        if (document.visibilityState === 'visible' && window.Eitaa?.WebApp?.requestFullscreen) {
            window.Eitaa.WebApp.requestFullscreen();
        }
    });
</script>

</body>
</html>
