<?php
global $zon, $site_url, $socket;
$gd = [];

if ($zon['page'][0] == 'single') {
    $gd = getGamesById($zon['page'][1]);
}

if ($zon['page'][0] == 'game' && (count($zon['page']) == 3 || count($zon['page']) == 4)) {
    $gd = getGamesById($zon['page'][2]);
}
$game_url = $site_url . 'game/' . makeSlug($gd['game_name']) . '/' . $gd['id'];

add_views($gd['id']);

if (isset($_POST) && !empty($_POST)) {
    if (isset($_POST['comment'])) {
        $subject = htmlspecialchars(mysqli_real_escape_string($socket, $_POST['subject']));
        $date = date('D, d M Y');
        $user_id = $zon['user']['id'];
        $game_id = $gd['id'];
        $sql = "INSERT INTO zon_comments (user_id, game_id, subject, date) VALUES ($user_id, $game_id, '$subject', '$date')";

        if (mysqli_query($socket, $sql)) {
            redirect('');
        }
    }
}

if (isset($_POST) && !empty($_POST)) {
    if (isset($_POST['problem']) && !empty($_POST['problem'])) {
        $game_name = $gd['game_name'];
        $report_sub = mysqli_real_escape_string($socket, htmlspecialchars($_POST['problem']));
        $game_id = $gd['id'];
        if (mysqli_query($socket, "INSERT INTO " . T_ZON_REPORTS . " (game_name, report_subject, game_id) VALUES ('$game_name', '$report_sub', $game_id) ")) {
            echo "<script>window.location.href = ''</script>";
        }
    }
}

?>
<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="game-frame">
            <iframe id="zonFrame" class="absolute w-full h-full top-0 left-0 " src="<?= $gd['game_url'] ?>"
                scrolling="no" frameborder="0"></iframe>
        </div>
        <div class="flex px-2 py-2 game-meta-container justify-between gap-6">
            <div class="game-meta ">
                <h1 class="text-2xl font-bold">
                    <?= $gd['game_name'] ?>
                </h1>
                <div class="flex gap-4 mt-2 mb-2">
                    <a style="color: var(--zon-muted-color);" href="#" class="text-sm capitalize ">
                        <?= $gd['game_category'] ?>
                    </a>
                    <span style="color: var(--zon-muted-color);" class="text-sm">
                        <?= $gd['game_played'] ?> Played
                    </span>
                </div>
                <p style="color: var(--zon-muted-color);" class="text-sm mt-3">
                    <?= $gd['game_description'] ?>
                </p>
            </div>
            <div class="flex gap-2">
                <?php if (IsLoggedin) { ?>
                    <button id="LikeButton" onclick="LikeGame(<?php echo $gd['id']; ?>)"
                        class="game-action-buttons <?php echo num_rows(T_ZON_LIKES, "game_id=" . $gd['id']) > 0 ? 'liked' : ''; ?> whitespace-nowrap h-10 w-fit text-sm rounded-full px-4 gap-2 flex justify-center items-center ">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" 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-linejoin="round"
                                d="M22 8.862a5.95 5.95 0 0 1-1.654 4.13c-2.441 2.531-4.809 5.17-7.34 7.608-.581.55-1.502.53-2.057-.045l-7.295-7.562c-2.205-2.286-2.205-5.976 0-8.261a5.58 5.58 0 0 1 8.08 0l.266.274.265-.274A5.612 5.612 0 0 1 16.305 3c1.52 0 2.973.624 4.04 1.732A5.95 5.95 0 0 1 22 8.862Z">
                            </path>
                        </svg>
                        <span>
                            <?php echo num_rows(T_ZON_LIKES, "game_id=" . $gd['id']); ?>
                        </span> Like
                    </button>
                <?php } else { ?>
                    <a href="<?php echo $site_url ?>login"
                        class="game-action-buttons whitespace-nowrap h-10 w-fit text-sm rounded-full px-4 gap-2 flex justify-center items-center ">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" 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-linejoin="round"
                                d="M22 8.862a5.95 5.95 0 0 1-1.654 4.13c-2.441 2.531-4.809 5.17-7.34 7.608-.581.55-1.502.53-2.057-.045l-7.295-7.562c-2.205-2.286-2.205-5.976 0-8.261a5.58 5.58 0 0 1 8.08 0l.266.274.265-.274A5.612 5.612 0 0 1 16.305 3c1.52 0 2.973.624 4.04 1.732A5.95 5.95 0 0 1 22 8.862Z">
                            </path>
                        </svg>
                        <span>
                            <?php echo num_rows(T_ZON_LIKES, "game_id=" . $gd['id']); ?>
                        </span> Like
                    </a>
                <?php } ?>
                <button onclick="document.getElementById('ShareModal').classList.toggle('hidden')"
                    class="game-action-buttons h-10 w-fit text-sm rounded-full px-4 gap-4 flex justify-center items-center ">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" 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="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="1.5"
                            d="m15.5 6.5-7 4M8.5 13.5l7 4"></path>
                    </svg>
                    Share
                </button>
                <button title="report" onclick="document.getElementById('reportModal').classList.toggle('hidden')"
                    class="game-action-buttons h-10 w-10 rounded-full flex justify-center items-center ">
                    <svg width="16px" height="16px" stroke-width="1.1" viewBox="0 0 24 24" fill="none"
                        xmlns="http://www.w3.org/2000/svg" color="#000000">
                        <path  style="stroke: var(--zon-muted-color);"
                            d="M7 19.4V4.6C7 4.26863 7.26863 4 7.6 4H16.4C16.7314 4 17 4.26863 17 4.6V19.4C17 19.7314 16.7314 20 16.4 20H7.6C7.26863 20 7 19.7314 7 19.4Z"
                            stroke="#000000" stroke-width="1.1" stroke-linecap="round" stroke-linejoin="round"></path>
                        <path style="stroke: var(--zon-muted-color);" d="M14 20V22.5" stroke="#000000" stroke-width="1.1" stroke-linecap="round"
                            stroke-linejoin="round"></path>
                        <path style="stroke: var(--zon-muted-color);" d="M10 20V22.5" stroke="#000000" stroke-width="1.1" stroke-linecap="round"
                            stroke-linejoin="round"></path>
                        <path style="stroke: var(--zon-muted-color);" d="M14 4V1.5" stroke="#000000" stroke-width="1.1" stroke-linecap="round"
                            stroke-linejoin="round"></path>
                        <path style="stroke: var(--zon-muted-color);" d="M10 4V1.5" stroke="#000000" stroke-width="1.1" stroke-linecap="round"
                            stroke-linejoin="round"></path>
                        <path style="stroke: var(--zon-muted-color);" d="M7 12H4.5" stroke="#000000" stroke-width="1.1" stroke-linecap="round"
                            stroke-linejoin="round"></path>
                        <path style="stroke: var(--zon-muted-color);" d="M19.5 12H17" stroke="#000000" stroke-width="1.1" stroke-linecap="round"
                            stroke-linejoin="round"></path>
                        <path style="stroke: var(--zon-muted-color);" d="M7 6.5H4.5" stroke="#000000" stroke-width="1.1" stroke-linecap="round"
                            stroke-linejoin="round"></path>
                        <path style="stroke: var(--zon-muted-color);" d="M19.5 6.5H17" stroke="#000000" stroke-width="1.1" stroke-linecap="round"
                            stroke-linejoin="round"></path>
                        <path style="stroke: var(--zon-muted-color);" d="M7 17.5H4.5" stroke="#000000" stroke-width="1.1" stroke-linecap="round"
                            stroke-linejoin="round"></path>
                        <path style="stroke: var(--zon-muted-color);" d="M19.5 17.5H17" stroke="#000000" stroke-width="1.1" stroke-linecap="round"
                            stroke-linejoin="round"></path>
                    </svg>
                </button>
                <button title="full screen" id="fullscreenButton"
                    class="game-action-buttons h-10 w-10 rounded-full flex justify-center items-center "><svg
                        xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" 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" stroke-miterlimit="1.5"
                            d="M4.998 2H2v2.998h2.998V2ZM4.998 3.501h14M3.499 4.998V19M20.497 5v14.002M4.998 20.501h14M4.998 19H2v2.998h2.998V19ZM21.996 2.002h-2.998V5h2.998V2.002ZM21.996 19.002h-2.998V22h2.998v-2.998Z">
                        </path>
                    </svg></button>
            </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 } ?>
        <div class="smilar-games mt-8 ">
            <h2 class="page-heading font-bold text-2xl mb-8">Similar Games</h2>
            <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-4 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">
                                <img src="<?php echo $game['game_banner_url'] == '' ? $game['game_image_url'] : $game['game_banner_url'] ?>" />
                                <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
                                        class="game-meta rounded-lg mt-3 w-fit bg-[var(--zon-gmeta-bg-color)] px-2 py-0.5 flex items-center gap-2">
                                        <span>
                                            <svg xmlns="http://www.w3.org/2000/svg" width="19px" height="19px" fill="none"
                                                stroke-width="1.1" viewBox="0 0 24 24" color="#000000">
                                                <path stroke="#000000" stroke-width="1.1" stroke-linecap="round"
                                                    stroke-linejoin="round"
                                                    d="M17.5 17.5c2.5 3.5 6.449.915 5.5-2.5-1.425-5.129-2.2-7.984-2.603-9.492A2.032 2.032 0 0 0 18.438 4H5.562c-.918 0-1.718.625-1.941 1.515C2.78 8.863 2.033 11.802 1.144 15c-.948 3.415 3 6 5.5 2.5">
                                                </path>
                                                <path stroke="#000000" stroke-width="1.1" stroke-linecap="round"
                                                    stroke-linejoin="round"
                                                    d="M16 4v2a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2V4M8 16a2 2 0 1 0 0-4 2 2 0 0 0 0 4ZM16 16a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z">
                                                </path>
                                            </svg>
                                        </span>
                                        <span class="text-xs">
                                            <?= $game['game_played'] ?> Plays
                                        </span>
                                    </div>
                                </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-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-2 gap-4">
            <?php foreach (getGame(6) as $game) { ?>
                <div class="rounded-lg wow <?php echo $zon['config']['animate_class'] ?>">
                    <div class="game-card w-full">
                        <img src="<?php echo $game['game_banner_url'] == '' ? $game['game_image_url'] : $game['game_banner_url'] ?>" />
                        <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
                                class="game-meta rounded-lg mt-3 w-fit bg-[var(--zon-gmeta-bg-color)] px-2 py-0.5 flex items-center gap-2">
                                <span>
                                    <svg xmlns="http://www.w3.org/2000/svg" width="19px" height="19px" fill="none"
                                        stroke-width="1.1" viewBox="0 0 24 24" color="#000000">
                                        <path stroke="#000000" stroke-width="1.1" stroke-linecap="round"
                                            stroke-linejoin="round"
                                            d="M17.5 17.5c2.5 3.5 6.449.915 5.5-2.5-1.425-5.129-2.2-7.984-2.603-9.492A2.032 2.032 0 0 0 18.438 4H5.562c-.918 0-1.718.625-1.941 1.515C2.78 8.863 2.033 11.802 1.144 15c-.948 3.415 3 6 5.5 2.5">
                                        </path>
                                        <path stroke="#000000" stroke-width="1.1" stroke-linecap="round"
                                            stroke-linejoin="round"
                                            d="M16 4v2a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2V4M8 16a2 2 0 1 0 0-4 2 2 0 0 0 0 4ZM16 16a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z">
                                        </path>
                                    </svg>
                                </span>
                                <span class="text-xs">
                                    <?= $game['game_played'] ?> Plays
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            <?php } ?>
        </div>
    </div>
</div>

<script>
    var game_frame = document.getElementById("zonFrame");
    var game_frame_src = game_frame.src;
    if (game_frame_src.includes("gamedistribution")) {
        game_frame.src += "?gd_sdk_referrer_url=https://gamedistribution.com/games/cooking-festival";
    }
</script>