<?php global $zon, $site_url, $socket;

if (isset($_GET) && isset($_GET['token'])) {
    $token = mysqli_real_escape_string($socket, $_GET['token']);
    if (mysqli_query($socket, "DELETE FROM zon_comments WHERE id=$token")) {
        echo "<script>window.location.href = '?'</script>";
    }
}

?>
<?php if ($zon['page'][1] == 'comments') { ?>
    <h1 class="text-3xl mb-8 mt-3 block page-heading">Your Comments</h1>
    <div class="mt-2">
        <?php
        if (getUserComments($zon['user']['id'])) {
            foreach (getUserComments($zon['user']['id']) as $comment) {
                ?>
                <div class="comment-card 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/' . $comment['user_pic'] ?>" />
                        <div class="uc-meta">
                            <div class="flex gap-4">
                                <span class="font-semibold ">
                                    <?= $comment['username'] ?>
                                </span>
                                <a class="text-red-600 text-sm" href="?token=<?= $comment['id'] ?>">Delete</a>
                            </div>
                            <p class="text-xs " style="color: var(--zon-muted-color);">
                                <?= $comment['date'] ?>
                            </p>
                            <p>
                                <?= $comment['subject'] ?>
                            </p>
                        </div>
                    </div>
                </div>
            <?php }
        } else {
            echo "You haven't commented in any games yet.";
        } ?>
    </div>
<?php }
?>
<?php if ($zon['page'][1] == 'likes') { ?>
    <h1 class="text-3xl mb-8 mt-3 block page-heading">Your Liked Games</h1>
    <?php
    if (getUserGame($zon['user']['id'])) {
        foreach (getUserGame($zon['user']['id']) as $game) { ?>
            <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4">
                <div class="game-card w-full">
                    <img src="<?= $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 }
    } else {
        echo "You haven't liked any games yet";
    } ?>
<?php } ?>

<?php if ($zon['page'][1] == 'settings') { ?>
    <h1 class="text-3xl mb-8 mt-3 block page-heading">Your Settings</h1>
    <div class="form-start">
        <form id="update-info" method="post" class="update-info-form w-[400px] ">
            <div class="input-group mb-4">
                <label for="" class="mb-2 transition duration-300  block font-medium">Profile Pic</label>
                <img class="w-20 mb-2" src="<?php echo $site_url ?>static/img/<?php echo $zon['user']['user_pic'] ?>" />
                <input name="avatar_img" type="file"  class="hover:border-[var(--zon-theme-color)] focus:outline-[var(--zon-theme-color)] px-4 w-full py-4 bg-transparent border border-[var(--zon-comment-input-b-color)] " />
            </div>
            <div class="input-group mb-4">
                <label for="" class="mb-2 transition duration-300  block font-medium">Full Name</label>
                <input required name="name" value="<?php echo $zon['user']['name'] ?>" type="text"
                    class="hover:border-[var(--zon-theme-color)] focus:outline-[var(--zon-theme-color)] px-4 w-full py-4 bg-transparent border border-[var(--zon-comment-input-b-color)] " />
            </div>
            <div class="input-group mb-4">
                <label for="" class="mb-2 transition duration-300  block font-medium">Email</label>
                <input required name="email" value="<?php echo $zon['user']['email'] ?>" type="email"
                    class="px-4 w-full py-4 hover:border-[var(--zon-theme-color)] focus:outline-[var(--zon-theme-color)]  bg-transparent border border-[var(--zon-comment-input-b-color)] " />
            </div>
            <div class="input-group mb-4">
                <label for="" class="mb-2 transition duration-300  block font-medium">Username</label>
                <input required name="username" value="<?php echo $zon['user']['username'] ?>" type="username"
                    class="px-4 w-full py-4 hover:border-[var(--zon-theme-color)] focus:outline-[var(--zon-theme-color)]  bg-transparent border border-[var(--zon-comment-input-b-color)] " />
            </div>
            <div class="input-group mb-4">
                <label for="" class="mb-2 transition duration-300  block font-medium">New password</label>
                <input name="new_password" placeholder="******" type="password"
                    class="px-4 w-full py-4 hover:border-[var(--zon-theme-color)] focus:outline-[var(--zon-theme-color)]  bg-transparent border border-[var(--zon-comment-input-b-color)] " />
            </div>
            <input type="hidden" name="change_settings" value="<?php echo $zon['user']['id'] ?>" />
            <button type="submit"
                class="w-full disabled:opacity-70 capitalize rounded-lg mt-3 py-3 text-white bg-[var(--zon-theme-color)] px-4">Update profile</button>
        </form>
    </div>
<?php } ?>