<?php
global $zon, $site_url;
$gd = AutoPlay();
$game_url = $site_url . 'game/' . makeSlug($gd['game_name']) . '/' . $gd['id'];
?>
<div id="ShareModal" class="share-modal hidden">
    <div class="modal-dialog">
        <div class="flex items-center justify-between mb-6">
            <h2 style="color: var(--zon-common-text-color);" class="text-xl font-semibold ">Share</h2>
            <span onclick="this.parentNode.parentNode.parentNode.classList.toggle('hidden')"
                class="text-3xl cursor-pointer select-none ">&times;</span>
        </div>
        <div class="flex gap-2">
            <a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=<?php echo $game_url ?>"
                class="h-14 w-14 flex items-center justify-center bg-blue-800 rounded-full ">
                <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" fill="#fff" stroke-width="1.5"
                    viewBox="0 0 24 24" color="#000000">
                    <path stroke="#fff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
                        d="M17 2h-3a5 5 0 0 0-5 5v3H6v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3V2Z"></path>
                </svg>
            </a>
            <a target="_blank"
                href="https://twitter.com/intent/tweet?text=<?php echo $gd['game_name'] ?> <?php echo $game_url ?>"
                class="h-14 w-14 flex items-center justify-center bg-blue-400 rounded-full ">
                <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" fill="#fff" stroke-width="1.5"
                    viewBox="0 0 24 24" color="#000000">
                    <path stroke="#fff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
                        d="M23 3.01s-2.018 1.192-3.14 1.53a4.48 4.48 0 0 0-7.86 3v1a10.66 10.66 0 0 1-9-4.53s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5 0-.278-.028-.556-.08-.83C21.94 5.674 23 3.01 23 3.01Z">
                    </path>
                </svg>
            </a>
            <a target="_blank"
                href="https://www.pinterest.com/pin/create/button/?url=<?php echo $game_url ?>&media=<?php echo $gd['game_image_url'] ?>&description=<?php echo $gd['game_description'] ?>"
                class="h-14 w-14 flex items-center justify-center bg-red-600 rounded-full ">
                <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" fill="none" stroke-width="1.5"
                    viewBox="0 0 24 24" color="#000000">
                    <path stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                        d="M8 14.5c-3-4.5 1.462-8 4.5-8 3.038 0 5.5 1.654 5.5 5.5 0 3.038-2 5-4 5s-3-2-2.5-5M12 10 9 21.5">
                    </path>
                    <path stroke="transparent" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
                        d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Z"></path>
                </svg>
            </a>
            <a target="_blank"
                href="https://t.me/share/url?url=<?php echo $game_url ?>&text=<?php echo $gd['game_description'] ?>"
                class="h-14 w-14 flex items-center justify-center bg-blue-500 rounded-full ">
                <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" fill="none" stroke-width="1.5"
                    viewBox="0 0 24 24" color="#000000">
                    <path stroke="#fff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
                        d="M21 5 2 12.5l7 1M21 5l-2.5 15L9 13.5M21 5 9 13.5m0 0V19l3.249-3.277"></path>
                </svg>
            </a>
        </div>
        <div
            class="flex mt-8 border-2 rounded-md overflow-hidden hover:border-blue-500 border-[var(--zon-theme-color)] ">
            <input id="textToCopy" type="text" value="<?php echo $game_url ?>" placeholder="Game URL"
                class="w-full bg-transparent text-sm outline-none py-3 px-2 " />
            <button onclick="copyToURL()" class="px-4">
                <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" fill="none" stroke-width="1.5"
                    viewBox="0 0 24 24" color="#000000">
                    <path style="stroke: var(--zon-muted-color);" stroke="#000000" stroke-width="1.5"
                        stroke-linecap="round" stroke-linejoin="round"
                        d="M19.4 20H9.6a.6.6 0 0 1-.6-.6V9.6a.6.6 0 0 1 .6-.6h9.8a.6.6 0 0 1 .6.6v9.8a.6.6 0 0 1-.6.6Z">
                    </path>
                    <path style="stroke: var(--zon-muted-color);" stroke="#000000" stroke-width="1.5"
                        stroke-linecap="round" stroke-linejoin="round"
                        d="M15 9V4.6a.6.6 0 0 0-.6-.6H4.6a.6.6 0 0 0-.6.6v9.8a.6.6 0 0 0 .6.6H9"></path>
                </svg>
            </button>
        </div>
    </div>
</div>

<div id="reportModal" class="share-modal wow <?php echo $zon['config']['animate_class'] ?>  hidden">
    <div class="modal-dialog">
        <div class="flex items-center justify-between mb-6">
            <h2 style="color: var(--zon-common-text-color);" class="text-xl capitalize font-semibold ">report your
                problem</h2>
            <span onclick="this.parentNode.parentNode.parentNode.classList.toggle('hidden')"
                class="text-3xl cursor-pointer select-none">&times;</span>
        </div>
        <form action="" method="post" class="modal-body">
            <textarea name="problem" placeholder="Write your problem"
                class="w-full p-4  transition duration-300 border border-[var(--zon-comment-input-b-color)] hover:border-[var(--zon-theme-color)] focus:outline-[var(--zon-theme-color)]  "
                cols="30" rows="10"></textarea>
            <button
                class="px-4 mt-4 rounded-full py-2.5 bg-[var(--zon-theme-color)] capitalize text-sm text-white">submit
                your report</button>
        </form>
    </div>
</div>


<div class="flex game-play-container gap-5 ">
    <div class="main-gameplay">
        <div class="shadow-lg p-2 rounded-xl full-screen-container">
            <div style="z-index: 9999999 !important; position: fixed;"
                class="sticky-game-card0 shadow-xl active flex justify-between items-center bg-[var(--zon-body-bg-color)] px-4 py-2 fixed bottom-0 w-full left-0 items-center">
                <div class="flex gap-1 items-center">
                    <img src="<?= $gd['game_image_url'] ?>" class="h-[50px] rounded-md w-[50px] mr-4"
                        alt="<?= $gd['game_name'] ?>" />
                    <div class="game-meta">
                        <div class="text-md font-medium">
                            <?= $gd['game_name'] ?>
                            <div class="flex gap-4">
                                <p class="text-xs font-normal capitalize text-gray-500">
                                    <?= $gd['game_category'] ?>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>

                <a class="logo" href="<?php echo $site_url ?>">
                    <img style="display: var(--zon-dark-logo);"
                        src="<?php echo $site_url . 'static/img/logo/' . $zon['config']['site_logo_dark'] ?>"
                        width="140" class="logo" />
                    <img style="display: var(--zon-light-logo);"
                        src="<?php echo $site_url . 'static/img/logo/' . $zon['config']['site_logo_light'] ?>"
                        width="140" class="logo" />
                </a>

                <div class="w-label">
                    <button title="full screen" onclick="toggleFullScreen()"
                        class="game-action-buttons bg-blue-600 h-10 w-10 rounded-full flex justify-center items-center ">
                        <svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M33 6V15H42" stroke="#fff" stroke-width="6" stroke-linecap="round"
                                stroke-linejoin="round" />
                            <path d="M15 6V15H6" stroke="#fff" stroke-width="6" stroke-linecap="round"
                                stroke-linejoin="round" />
                            <path d="M15 42V33H6" stroke="#fff" stroke-width="6" stroke-linecap="round"
                                stroke-linejoin="round" />
                            <path d="M33 42V33H41.8995" stroke="#fff" stroke-width="6" stroke-linecap="round"
                                stroke-linejoin="round" />
                        </svg>
                    </button>
                    <span class="text-xs">Minimize</span>
                </div>

                <div class="flex gap-4 sticky-game-card0-shortcut ">
                    <button onclick="toggleFullScreen()" style="position: none !important;"
                        class="play-button position-none shadow-xl border zoom-animate2">
                        <svg style="pointer-events: none;" width="20px" height="20px" viewBox="0 0 24 24" fill="none"
                            xmlns="http://www.w3.org/2000/svg" color="#8c8c8c" stroke-width="3">
                            <path
                                d="M6.90588 4.53682C6.50592 4.2998 6 4.58808 6 5.05299V18.947C6 19.4119 6.50592 19.7002 6.90588 19.4632L18.629 12.5162C19.0211 12.2838 19.0211 11.7162 18.629 11.4838L6.90588 4.53682Z"
                                fill="#8c8c8c" style="fill: var(--zon-theme-color); stroke: var(--zon-theme-color);"
                                stroke="#8c8c8c" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"></path>
                        </svg>
                    </button>


                    <button onclick="this.parentNode.parentNode.classList.remove('active')"
                        class="bg-[var(--zon-search-bg-color)] active:bg-gray-300 shadow-lg  rounded-full flex items-center justify-center shadow-lg h-[40px] w-[40px]">
                        <svg style="pointer-events: none;" width="20px" height="20px" stroke-width="1.1"
                            viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#8c8c8c">
                            <path
                                d="M6.75827 17.2426L12.0009 12M17.2435 6.75736L12.0009 12M12.0009 12L6.75827 6.75736M12.0009 12L17.2435 17.2426"
                                stroke="#8c8c8c" stroke-width="1.1" stroke-linecap="round" stroke-linejoin="round">
                            </path>
                        </svg>
                    </button>

                </div>
            </div>
            <div class="game-frame">
                <div onclick="toggleFullScreen()" style="background-image: url(<?= $gd['game_image_url'] ?>);"
                    class="game-thumbnail cursor-pointer rounded-lg">
                    <!-- <div class="zoom-animate"> -->
                    <button style="pointer-events: none" onclick="toggleFullScreen()" class="play-button zoom-animate">
                        <svg style="pointer-events: none;" width="20px" height="20px" viewBox="0 0 24 24" fill="none"
                            xmlns="http://www.w3.org/2000/svg" color="#8c8c8c" stroke-width="1.1">
                            <path
                                d="M6.90588 4.53682C6.50592 4.2998 6 4.58808 6 5.05299V18.947C6 19.4119 6.50592 19.7002 6.90588 19.4632L18.629 12.5162C19.0211 12.2838 19.0211 11.7162 18.629 11.4838L6.90588 4.53682Z"
                                fill="#8c8c8c" style="fill: var(--zon-theme-color); stroke: var(--zon-theme-color);"
                                stroke="#8c8c8c" stroke-width="1.1" stroke-linecap="round" stroke-linejoin="round">
                            </path>
                        </svg>
                    </button>
                    <!-- </div> -->
                </div>
                <iframe id="zonFrame" class="absolute block w-full h-full top-0 left-0 " src="<?= $gd['game_url'] ?>"
                    scrolling="no" frameborder="0"></iframe>

                <button onclick="toggleFullScreen()"
                    style="z-index: 9999999 !important; position: fixed; top: 48px; left: 0; width: 75px; height: 50px; background: #fff; border-radius: 0 290486px 290486px 0; color: #000; padding: 0 10px; line-height: 50px; min-height: 50px; border: none; border-bottom: 3px solid #b5b5b5; align-items: center; justify-content: center;"
                    class="exit-button hidden flex">
                    <svg style="color: #b5b5b5;margin-right: 0.425rem;" aria-hidden="true" focusable="false"
                        data-prefix="fas" data-icon="chevron-left" role="img" xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 320 512" data-fa-i2svg="">
                        <path fill="currentColor"
                            d="M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z">
                        </path>
                    </svg>
                    <img src="https://k4.games/favicon.ico" width="32" height="32" alt="Logo">
                </button>

            </div>
            <div class="flex px-2 py-2 game-meta-container mt-2 justify-between gap-6">
                <div class="game-meta flex items-center ">
                    <img src="<?= $gd['game_image_url'] ?>" class="h-[40px] rounded-md w-[40px] mr-4"
                        alt="<?= $gd['game_name'] ?>" />
                    <div class="text-md font-medium">
                        <div class="line-2">
                            <?= $gd['game_name'] ?>
                        </div>
                        <div class="flex gap-4">
                            <p class="text-xs font-normal capitalize text-gray-500">
                                <!-- <?= $gd['game_category'] ?> -->
                            </p>
                        </div>
                    </div>
                </div>
                <div class="flex gap-2">
                    <button id="LikeButton" onclick="LikeGame(<?php echo $gd['id'] ?>)"
                        class="game-action-buttons <?php echo num_rows(T_ZON_LIKES, "game_id=" . $gd['id'] . " && user_id='" . $_SERVER['REMOTE_ADDR'] . "'") ? 'liked' : '' ?> whitespace-nowrap text-sm rounded-full px-4 gap-1 flex flex-col justify-center items-center ">
                        <svg width="24" height="24" viewBox="0 0 48 48" fill="#888" xmlns="http://www.w3.org/2000/svg">
                            <path
                                d="M27.6002 18.5998V11.3998C27.6002 8.41743 25.1826 5.99977 22.2002 5.99977L15.0002 22.1998V41.9998H35.9162C37.7113 42.0201 39.2471 40.7147 39.5162 38.9398L42.0002 22.7398C42.1587 21.6955 41.8506 20.6343 41.1576 19.8373C40.4645 19.0403 39.4564 18.5878 38.4002 18.5998H27.6002Z"
                                stroke="#888" fill="#888" stroke-width="3" stroke-linejoin="round" />
                            <path
                                d="M15 22.0001H10.194C8.08532 21.9628 6.2827 23.7095 6 25.7994V38.3994C6.2827 40.4894 8.08532 42.0367 10.194 41.9994H15V22.0001Z"
                                stroke="#fff" fill="#888" stroke-width="3" stroke-linejoin="round" />
                        </svg>
                        <span class="text-xs">
                            <?php
                            $like = num_rows(T_ZON_LIKES, "game_id=" . $gd['id']);
                            $dislike = num_rows(T_ZON_UNLIKES, "game_id=" . $gd['id']);
                            $total = $like + $dislike;
                            if ($like > 0 || $dislike > 0) {
                                $percentOfDislikes = ($dislike / $total) * 100;
                                $percentOfLikes = ($like / $total) * 100;
                                echo number_format($percentOfLikes, 0);
                            } else {
                                echo "0";
                            }
                            ?>%
                        </span>
                    </button>
                    <button id="UnLikeButton" onclick="UnLikeGame(<?php echo $gd['id']; ?>)"
                        class="game-action-buttons whitespace-nowrap text-sm rounded-full <?php echo num_rows(T_ZON_UNLIKES, "game_id=" . $gd['id'] . " && user_id='" . $_SERVER['REMOTE_ADDR'] . "'") ? 'liked' : '' ?> px-4 gap-1 flex flex-col justify-center items-center">
                        <svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path
                                d="M20.3793 29.4002V36.6002C20.3793 39.5826 22.7969 42.0002 25.7793 42.0002L32.9793 25.8002V6.00023H12.0633C10.2682 5.97994 8.73244 7.2853 8.46327 9.06023L5.97927 25.2602C5.82077 26.3045 6.12885 27.3657 6.82192 28.1627C7.51499 28.9597 8.52311 29.4122 9.57927 29.4002H20.3793Z"
                                stroke="#888" fill="#888" stroke-width="3" stroke-linejoin="round" />
                            <path
                                d="M32.9795 6.00017H37.7855C39.8942 5.96288 41.6968 7.51019 41.9795 9.60017V22.2002C41.6968 24.2901 39.8942 26.0375 37.7855 26.0002H32.9795V6.00017Z"
                                stroke="#fff" fill="#888" stroke-width="3" stroke-linejoin="round" />
                        </svg>
                        <span class="text-xs">
                            <?php
                            $like = num_rows(T_ZON_LIKES, "game_id=" . $gd['id']);
                            $dislike = num_rows(T_ZON_UNLIKES, "game_id=" . $gd['id']);
                            $total = $like + $dislike;
                            if ($like > 0 || $dislike > 0) {
                                $percentOfDislikes = ($dislike / $total) * 100;
                                $percentOfLikes = ($like / $total) * 100;
                                echo number_format($percentOfDislikes, 0);
                            } else {
                                echo "0";
                            }
                            // echo (num_rows(T_ZON_UNLIKES, "game_id=" . $gd['id']) / num_rows(T_ZON_VIEWS, "game_id=" . $gd['id'])) * 100; 
                            ?>%
                        </span>
                    </button>
                    <div class="for-mobile flex gap-2">
                        <button onclick="document.getElementById('ShareModal').classList.toggle('hidden')"
                            class="game-action-buttons text-sm rounded-full px-4 gap-1 flex flex-col justify-center items-center ">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"
                                stroke-width="1.5" viewBox="0 0 24 24" color="#000000">
                                <path style="stroke: var(--zon-muted-color);" stroke="#000000" stroke-width="3"
                                    stroke-linecap="round" stroke-linejoin="round"
                                    d="M18 22a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM18 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM6 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z">
                                </path>
                                <path style="stroke: var(--zon-muted-color);" stroke="#000000" stroke-width="3"
                                    d="m15.5 6.5-7 4M8.5 13.5l7 4"></path>
                            </svg>
                            <div class="text-xs">
                                Share
                            </div>
                        </button>
                        <button title="report"
                            onclick="document.getElementById('reportModal').classList.toggle('hidden')"
                            class="game-action-buttons rounded-full flex flex-col ml-3 gap-1 justify-center items-center ">
                            <svg width="24" height="24" viewBox="0 0 48 48" fill="#777"
                                xmlns="http://www.w3.org/2000/svg">
                                <path
                                    d="M24 42C36 42 38 31.5324 38 28C38 24.8379 38 20.1712 38 14H10C10 17.4423 10 22.109 10 28C10 31.4506 12 42 24 42Z"
                                    fill="#777" stroke="#777" stroke-width="3" stroke-linejoin="round" />
                                <path d="M4 8L10 14" stroke="#777" fill="#777" stroke-width="3" stroke-linecap="round"
                                    stroke-linejoin="round" />
                                <path d="M44 8L38 14" stroke="#777" fill="#777" stroke-width="3" stroke-linecap="round"
                                    stroke-linejoin="round" />
                                <path d="M4 27H10" stroke="#777" fill="#777" stroke-width="3" stroke-linecap="round"
                                    stroke-linejoin="round" />
                                <path d="M44 27H38" stroke="#777" fill="#777" stroke-width="3" stroke-linecap="round"
                                    stroke-linejoin="round" />
                                <path d="M7 44L13 38" stroke="#777" fill="#777" stroke-width="3" stroke-linecap="round"
                                    stroke-linejoin="round" />
                                <path d="M41 44L35 38" stroke="#777" fill="#777" stroke-width="3" stroke-linecap="round"
                                    stroke-linejoin="round" />
                                <path d="M24 42V14" stroke="#fff" fill="#fff" stroke-width="3" stroke-linecap="round"
                                    stroke-linejoin="round" />
                                <path
                                    d="M14.9204 39.0407C17.0024 40.783 19.9244 41.9998 23.9999 41.9998C28.1112 41.9998 31.0487 40.7712 33.1341 39.0137"
                                    stroke="#777" stroke-width="3" fill="#777" stroke-linecap="round"
                                    stroke-linejoin="round" />
                                <path
                                    d="M32 12.3333C32 7.73096 28.4183 4 24 4C19.5817 4 16 7.73096 16 12.3333V14H32V12.3333Z"
                                    stroke="#fff" fill="#777" stroke-width="3" stroke-linejoin="round" />
                            </svg>
                            <div class="text-xs">
                                Report
                            </div>
                        </button>
                        <button title="full screen" onclick="toggleFullScreen()" id="fullscreenButton00"
                            class="game-action-buttons rounded-full flex flex-col gap-1 justify-center items-center ml-4 ">
                            <svg width="24" height="24" viewBox="0 0 48 48" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <path d="M6 6L16 15.8995" stroke="#888" stroke-width="3" stroke-linecap="round"
                                    stroke-linejoin="round" />
                                <path d="M6 41.8995L16 32" stroke="#888" stroke-width="3" stroke-linecap="round"
                                    stroke-linejoin="round" />
                                <path d="M42.0001 41.8995L32.1006 32" stroke="#888" stroke-width="3"
                                    stroke-linecap="round" stroke-linejoin="round" />
                                <path d="M41.8995 6L32 15.8995" stroke="#888" stroke-width="3" stroke-linecap="round"
                                    stroke-linejoin="round" />
                                <path d="M33 6H42V15" stroke="#888" stroke-width="3" stroke-linecap="round"
                                    stroke-linejoin="round" />
                                <path d="M42 33V42H33" stroke="#888" stroke-width="3" stroke-linecap="round"
                                    stroke-linejoin="round" />
                                <path d="M15 42H6V33" stroke="#888" stroke-width="3" stroke-linecap="round"
                                    stroke-linejoin="round" />
                                <path d="M6 15V6H15" stroke="#888" stroke-width="3" stroke-linecap="round"
                                    stroke-linejoin="round" />
                            </svg>
                            <div class="text-xs">
                                Full screen
                            </div>
                        </button>
                    </div>
                    <button title="more options"
                        onclick="document.querySelector('.for-mobile').classList.toggle('active')"
                        class="game-action-buttons more-options rounded-full flex gap-1 flex-col justify-center items-center ml-4">
                        <svg style="pointer-events: none;" width="24" height="24" viewBox="0 0 48 48" stroke-width="3"
                            fill="none" xmlns="http://www.w3.org/2000/svg">
                            <circle cx="24" cy="12" r="5" fill="#666" />
                            <circle cx="24" cy="26" r="5" fill="#666" />
                            <circle cx="24" cy="40" r="5" fill="#666" />
                        </svg>
                        <div class="text-xs">
                            More options
                        </div>
                    </button>
                </div>
            </div>
        </div>

        <!--
        <div class="comment-section mt-4 mb-6">
            <h2 class="page-heading font-bold text-2xl mb-8">Comments</h2>
            <?php if (IsLoggedin) { ?>
                <form action="" method="post" class="comment-form">
                    <textarea name="subject" placeholder="Comment here." type="text"
                        class=" border transition duration-300 bg-transparent focus:outline-[var(--zon-theme-color)] hover:border-[var(--zon-theme-color)] rounded-md w-full p-2 border-[var(--zon-comment-input-b-color)] "></textarea>
                    <button name="comment" type="submit"
                        class="capitalize mt-4 px-4 py-2 text-white rounded-full text-sm bg-[var(--zon-theme-color)]">comment</button>
                </form>
                <hr class="mt-4 border-[var(--zon-comment-input-b-color)] mb-4" />
            <?php } ?>
            <?php foreach (getCommentsByGameId($gd['id']) as $comment) {
                $user = getUserDataById($comment['user_id']);
                ?>
                <div class="comment-card wow <?php echo $zon['config']['animate_class'] ?> mb-6 w-full">
                    <div class="flex w-full items-center gap-4">
                        <img class="w-20 h-8 rounded-full"
                            src="<?php echo $site_url . 'static/img/' . $user['user_pic'] ?>" />
                        <div class="uc-meta">
                            <span class="font-semibold ">
                                <?= $user['username'] ?>
                            </span>
                            <p class="text-xs " style="color: var(--zon-muted-color);">
                                <?= $comment['date'] ?>
                            </p>
                            <p>
                                <?= $comment['subject'] ?>
                            </p>
                        </div>
                    </div>
                </div>
            <?php } ?>
        </div>
  
        <?php if (getCommentsByGameId($gd['id'])) { ?>
            <hr class="mt-4 border-[var(--zon-comment-input-b-color)] mb-4" />
        <?php } ?>
       -->

        <?php if (getAd('1', 'status') !== 0) { ?>
            <div class="p-2">
                <div class="ads flex justify-center">
                    <?php echo getAd('1', 'code') ?>
                </div>
            </div>
        <?php } ?>


        <div class="smilar-games mt-4 ">
            <!-- <h2 class="page-heading font-bold text-2xl mb-8">Similar Games</h2> -->
            <div class="grid grid-cols-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4">
                <?php foreach (GameByCategoryWise($gd['game_category'], 20) as $game) {
                    ?>
                    <div class="rounded-lg wow <?php echo $zon['config']['animate_class'] ?>">
                        <div class="rounded-lg">
                            <div class="game-card w-full">
                                <a
                                    href="<?php echo $site_url . 'game/' . makeSlug($game['game_name']) . '/' . $game['id'] ?>"><img
                                        src="<?php echo $game['game_banner_url'] == '' ? $game['game_image_url'] : $game['game_banner_url'] ?>" /></a>
                                <div class="game-details gap-4">
                                    <a href="<?php echo $site_url . 'game/' . makeSlug($game['game_name']) . '/' . $game['id'] ?>"
                                        class="text-md line-clamp-2 font-semibold">
                                        <?= $game['game_name'] ?>
                                    </a>
                                    <a style="color: var(--zon-muted-color);" class="text-sm"
                                        href="<?php echo $site_url ?>category/?n=<?= urlencode($game['game_category']) ?>">
                                        <?= $game['game_category'] ?>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                <?php } ?>
            </div>
        </div>

        <?php if (getAd('2,3', 'status') == 0) { ?>
            <div class="p-2">
                <div class="ads wow <?php echo $zon['config']['animate_class'] ?> flex justify-center">
                    <?php echo getAd('2,3', 'code') ?>
                </div>
            </div>
        <?php } ?>

    </div>
    <div class="sidebar p-2">
        <div class="flex gap-4 mb-4">
            <?php if (getAd('1,2', 'status') == 0) { ?>
                <div class="p-0">
                    <div class="ads wow <?php echo $zon['config']['animate_class'] ?> flex justify-center">
                        <?php echo getAd('1,2', 'code') ?>
                    </div>
                </div>
            <?php } ?>
            <?php if (getAd('1,1', 'status') == 0) { ?>
                <div class="p-0">
                    <div class="ads wow <?php echo $zon['config']['animate_class'] ?> flex justify-center">
                        <?php echo getAd('1,1', 'code') ?>
                    </div>
                </div>
            <?php } ?>
        </div>
        <div class="grid grid-cols-2 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 gap-4">
            <?php foreach (getGame(24) as $game) { ?>
                <div class="rounded-lg wow <?php echo $zon['config']['animate_class'] ?>">
                    <div class="game-card w-full">
                        <a href="<?php echo $site_url . 'game/' . makeSlug($game['game_name']) . '/' . $game['id'] ?>"><img
                                src="<?php echo $game['game_banner_url'] == '' ? $game['game_image_url'] : $game['game_banner_url'] ?>" /></a>
                        <div class="game-details gap-4">
                            <a href="<?php echo $site_url . 'game/' . makeSlug($game['game_name']) . '/' . $game['id'] ?>"
                                class="text-md line-clamp-2 font-semibold">
                                <?= $game['game_name'] ?>
                            </a>
                            <a style="color: var(--zon-muted-color);" class="text-sm"
                                href="<?php echo $site_url ?>category/?n=<?= urlencode($game['game_category']) ?>">
                                <?= $game['game_category'] ?>
                            </a>
                        </div>
                    </div>
                </div>
            <?php } ?>
        </div>
    </div>
</div>


<script>
    var frame = document.getElementById("zonFrame");
    var stickyCard = document.querySelector(".sticky-game-card0");

    function toggleFullScreen() {
        open_fullscreen();
    }


    var is_fullscreen = false;

    function open_fullscreen() {
        let game = document.getElementById("zonFrame");

        if (is_fullscreen) {
            // Exit fullscreen
            is_fullscreen = false;
            exitFullscreen();
            document.querySelector(".exit-button").classList.add("hidden");
            game.classList.remove("active-frame");
            game.classList.add("block");
            stickyCard.classList.remove("on-frame");
        } else {
            // Enter fullscreen
            is_fullscreen = true;
            enterFullscreen(document.querySelector(".full-screen-container"));
            game.classList.add("active-frame");
            game.classList.remove("hidden");
            document.querySelector(".exit-button").classList.remove("hidden");
            stickyCard.classList.add("on-frame");
        }

    }

    function enterFullscreen(element) {
        if (element.requestFullscreen) {
            element.requestFullscreen();
        } else if (element.mozRequestFullScreen) { /* Firefox */
            element.mozRequestFullScreen();
        } else if (element.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
            element.webkitRequestFullscreen();
        } else if (element.msRequestFullscreen) { /* IE/Edge */
            element.msRequestFullscreen();
        }


    }

    function exitFullscreen() {
        if (document.fullscreenElement || document.webkitFullscreenElement ||
            document.mozFullScreenElement || document.msFullscreenElement) {
            if (document.exitFullscreen) {
                document.exitFullscreen().catch((error) => {
                    console.error('Failed to exit fullscreen:', error);
                });
            } else if (document.webkitExitFullscreen) {
                document.webkitExitFullscreen().catch((error) => {
                    console.error('Failed to exit fullscreen:', error);
                });
            } else if (document.mozCancelFullScreen) {
                document.mozCancelFullScreen().catch((error) => {
                    console.error('Failed to exit fullscreen:', error);
                });
            } else if (document.msExitFullscreen) {
                document.msExitFullscreen().catch((error) => {
                    console.error('Failed to exit fullscreen:', error);
                });
            }
        } else {
            // console.log('Document is not in fullscreen mode');
        }
    }


    function is_mobile_device() {
        return /Android|webOS|iPhone|iPad|iPod|BlackBerry|Windows Phone/i.test(navigator.userAgent);
    }

    // Event listener for exiting fullscreen
    document.addEventListener("fullscreenchange", function () {
        if (!document.fullscreenElement) {
            // Update UI when exiting fullscreen
            if (is_fullscreen) {
                document.getElementById("fullscreenButton00").click();
            }
            exitFullscreen();
            document.querySelector(".exit-button").classList.add("hidden");
            document.getElementById("zonFrame").classList.remove("active-frame");
            document.getElementById("zonFrame").classList.add("block");
            if (document.querySelector(".on-frame")) {
                document.querySelector(".on-frame").classList.remove("on-frame");
            }
        }
    });
</script>