<!--
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣀⡤⠴⠒⠒⠒⢒⡶⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣠⠞⠁⠀⠀⠀⠀⠀⡾⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡴⠁⠀⠀⠀⠀⠀⠀⠀⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⠞⠁⠀⢀⣀⣀⣀⡀⠀⠀⢧⠀⠀⠀⠀⠀⡴⣄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⢀⣰⠿⠒⠋⠉⠉⠀⠀⠀⠈⠉⠓⠾⢄⣀⠀⠀⢠⡇⠸⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⣩⠏⠉⠒⢒⣲⡤⠤⣀⣀⠀⠀⠀⠀⠀⠈⠑⢤⡘⡄⠀⢳⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣀⠀
⠀⠀⠀⠀⠀⢰⠾⣣⠴⠚⠉⠉⠀⠀⠀⠀⠀⠉⠓⠀⠀⠀⠀⠀⠀⠙⣧⠀⠀⢣⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣀⡤⣔⡿⡍⡇
⠀⠀⠀⠀⠀⢸⡼⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠘⠆⠀⠀⢳⡀⠀⠀⠀⠀⠀⣀⡤⠞⠋⣡⠞⠉⠀⣇⡇
⠀⠀⠀⠀⣴⠋⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⡠⠴⠒⠛⠓⠚⠉⠉⠉⠁⠀⣴⡟⠁⠀⠀⠀⣿⠁
⠀⠀⠀⣼⣁⣠⡤⢴⠖⠒⠒⠦⠤⢴⣶⣢⠤⠤⠔⠚⠃⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣞⡞⠀⠀⠀⠀⢰⢿⠀
⠀⠀⠀⠉⠉⢙⣦⠞⠀⡠⠞⠉⢉⡷⡄⠉⢙⡶⠃⠀⠀⠀⢀⣠⣦⣤⣄⡀⠀⠀⠀⠀⠀⠀⠀⠀⢀⡎⡼⠀⠀⠀⠀⠀⡜⡞⠀
⠀⠀⠀⣤⡖⠛⠀⠀⡜⠁⠀⡴⢋⣀⣹⣠⠋⠀⠀⠀⠀⣰⣿⠿⠛⠛⠿⣿⣷⣄⡀⠀⠀⠀⠀⠀⡼⢰⠃⠀⠀⠀⠀⡼⢱⠃⠀
⠀⢀⣴⠛⠀⠀⠀⢼⠁⠀⣼⢁⣿⡬⣿⠃⠀⠀⠀⠀⠐⠋⠁⠀⠀⠀⠀⠀⠙⢿⣷⣄⠀⠀⠀⣸⢃⡏⠀⠀⠀⢀⡜⢡⠏⠀⠀
⠀⠸⡿⠀⠀⠀⠀⢻⡀⠀⠀⠀⠉⢠⠇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⣿⠁⣀⡜⠁⡼⠀⠀⠀⡠⠋⣰⠋⠀⠀⠀
⠀⠀⣧⠀⠀⠀⠀⠈⢳⣀⣙⣦⡤⠋⠀⠀⠀⠀⠀⠀⠀⣰⠄⠀⠀⠀⠀⠀⠀⢤⠀⣹⠌⢩⠏⢠⣇⣠⠴⠊⢀⡼⠁⠀⠀⠀⠀
⠀⠀⠘⡆⢀⡴⠖⠋⠉⠉⠀⠀⠀⠀⠀⠀⠀⠘⢧⣤⣾⣷⣿⣿⣿⣷⣦⡀⠀⢸⠀⠻⣾⠉⠀⠀⠀⠀⢀⣠⠋⠀⠀⠀⠀⠀⠀
⠀⠀⢠⡟⣥⠤⠦⠤⠤⢤⣀⣀⠀⠀⠀⠀⠀⠀⠀⠉⠁⠀⠀⠉⠛⠿⣿⣿⣄⣸⠀⠈⠻⣇⠀⢀⣀⠤⠟⠓⠃⠀⠀⠀⠀⠀⠀
⠀⠀⠸⡆⢧⡀⠀⠀⠀⠀⠀⠈⠙⠲⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠉⠉⠁⠀⠀⠀⣸⡍⠉⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⢳⡄⠙⢦⡀⠀⠀⠀⣀⡤⠞⠁⠀⠀⠀⠀⢀⣀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣠⡿⠃⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠙⢦⣀⣉⣷⡚⠉⠀⠀⠀⠀⠀⠀⠀⢀⡾⠋⠀⠀⠀⠀⠀⠀⠀⠀⠀⣠⠼⣿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⣦⣴⠚⢁⡾⠋⠉⠳⢤⣀⢀⣀⣀⣠⠔⠋⠀⠀⠀⠀⠀⠀⣀⣠⠤⠖⠋⠁⢀⣺⣆⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⢰⣷⡇⠀⡞⠀⠀⠀⠀⠀⡼⠋⠉⠁⠀⠀⣀⣀⠤⠴⠒⠊⠉⠉⠀⠀⠀⠀⠀⣼⣿⠻⠃⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠈⢯⡛⢦⡀⠀⠀⠀⢀⡾⠥⠤⠔⠒⠊⠉⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠰⡆⣸⣹⠛⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⢠⡿⠀⢹⣶⣶⣖⡋⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠹⡟⠋⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⢀⡿⠿⠉⠉⠋⠀⠀⠉⠙⠶⣄⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢠⡀⠹⢤⣀⣀⣀⣀⣀⡠⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⡰⠋⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠉⠢⣄⠀⠀⠀⡀⠀⠀⠀⠀⠀⠀⠀⣼⠇⠀⠀⠀⠀⠀⠙⠋⠩⠿⢿⣁⠀⠀⠀⠀⠀⠀
⡼⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠳⡄⠀⠉⠑⠶⢤⣀⣀⣠⣴⡟⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠘⠿⣅⠀⠀⠀⠀⠀
⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⠂⠀⠀⠀⠀⠀⠉⠉⠉⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⢦⠀⠀⠀⠀
⡅⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡇⠀⠀⠀
⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣇⠀⠀⠀
⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠉⠀⠀⠀
Yep, this project is made by a furry owo >;3 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <meta http-equiv="X-Frame-Options" content="DENY">
    <meta http-equiv="Referrer-Policy" content="no-referrer">
    
    <link href="/static/css/main.css?v=1747838793" rel="stylesheet">
    <link href="/static/themes.php" rel="stylesheet">
    <link href="/static/css/fonts.css?v=1747740437" rel="stylesheet">
    <link href="/static/css/notifications.css?v=1747740437" rel="stylesheet">
    <link rel="stylesheet" href="/static/js/sweetalert2.min.css?v=1747740437">

    <script src="/static/js/sweetalert2.min.js?v=1747740437" defer></script>
    <script src="/static/header_scripts.js?v=1747740437" defer></script>
    <script src="/static/js/notifications.js?v=1747740437" defer></script>

    <link rel="stylesheet" href="/static/lib/tippy/tippy.css?v=1747740437">
    <script src="/static/lib/tippy/popper.min.js?v=1747740437"></script>
    <script src="/static/lib/tippy/tippy.umd.min.js?v=1747740437"></script>
    <script src="/static/lib/chart/chart.min.js?v=1747740437"></script>
    <link rel="stylesheet" href="/static/css/bootstrap-icons.css?v=1747740437">

    <script>
        if (localStorage.getItem("dark-mode") === "enabled") {
            document.documentElement.classList.add("dark-mode");
        }
    </script>
    
        
        <style>
        .dark-mode body {
            background-image: url('/static/backgrounds/GST-bg.jpg');
        }
    </style>
        
    <style>
            </style>
    
        
    <div class="topbar">
        <div class="topbar-container">
            <div class="logo-container">
                <div class="topbar-title logo">
                    <a href="/">
                        <img src="/static/logos/logo.png" alt="Logo" width="180">
                    </a>
                </div>
                <div id="banner" class="banner">
                    <div class="note" id="bannerNote"></div>
                    <button id="closeBanner" onclick="closeBanner()">&times;</button>
                </div>
                <div class="topbar-subtitle">goSupertools
                </div>
            </div>
            <div class="topbar-button-container">

                <a href="/" class="topbar-button">Home</a>
                <a href="/list/" class="topbar-button">Item
                    Database</a>
                <a href="/sale/"
                    class="topbar-button">Sales
                    Manager</a>
                <a href="/list/catwalk.php"
                    class="topbar-button">Catwalk</a>
                <a href="/analyzer-v2/"
                    class="topbar-button">Wardrobe
                    Analyzer</a>

                                </div>
                <div class="topbar-links">
                    <button id="registerButton" class="profile-button"><i class="bi bi-person-plus-fill" style="font-size: 18px; font-weight: bold; margin-right: 8px;"></i>Register</button>
                    <button id="loginButton" class="log-in"><i class="bi bi-box-arrow-in-right" style="font-size: 18px; font-weight: bold; margin-right: 8px;"></i>Login</button>
                                <div class="search-container">
                    <input type="text" id="linkInput" name="searchInput" class="search-input"
                        placeholder="Enter Item Link" autocomplete="off">
                    <button id="srchButton" class="search-button">
                        <i class="bi bi-search" style="font-size: 18px; font-weight: bold;"></i>
                    </button>
                </div>

                <div id="dark-mode-toggle" class="toggle-container">
                    <div class="toggle-switch">
                        <i class="bi bi-moon-fill moon-icon" style="font-size: 18px; color: #D9D9D9;"></i>
                        <i class="bi bi-sun-fill sun-icon" style="font-size: 18px; color: #606060;"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
        <div class="footer">    
    <div class="footer-links">
        <span><a href="/item/iY9HkP4oq7TQbd8pUjCBA">Random Item</a></span> | 
        <span><a href="/help/">Help</a></span> | 
        <span><a href="/help/info.php">Information</a></span> | 
        <span><a href="/help/safety.php">Safety</a></span> | 
        <span><a href="/help/terms.php">Terms</a></span> | 
        <span><a href="/help/rules.php">Rules</a></span> | 
        <span><a href="/help/thanks.php">Credits</a></span> | 
        <span><a href="/help/feedback.php">Feedback</a></span> | 
        <span><a href="/help/imprint.php">Imprint</a></span>
            </div>
    <div class="footer-note">
        <span>Thanks to © 2024 Momio Aps. All Rights Reserved. Used with permission.</span>
    </div>
</div>

<style>
    .gsm-ad-container {
        width: 100%;
        max-width: inherit;
        padding: 20px 0;
        text-align: center;
        margin: 10px auto 80px auto;
    }
    
    .gsm-ad-banner {
        background-color: var(--gst-background-columncontainer-opacity);
        border-radius: 25px;
        padding: 10px;
        display: inline-block;
        max-width: 100%;
    }
    
    .dark-mode .gsm-ad-banner {
        background-color: #2a2a2a;
        color: #e0e0e0;
    }
    
    .gsm-ad-content {
        min-height: 90px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
    }
    
    .column-container {
        margin-bottom: 100px;
    }
</style>


<title>goSupertools - Item Page</title>
<link rel="stylesheet" href="index.css?v=1755464972">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8337592855206537" crossorigin="anonymous"></script>
<style>
    .error-message {
        margin: 30px auto;
        max-width: 600px;
        background-color: var(--gst-background-white);
        border-radius: 8px;
        padding: 30px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        text-align: center;
    }

    .error-message h2 {
        color: var(--gst-text-pink);
        margin-bottom: 15px;
        font-family: 'Montserrat', sans-serif;
    }

    .error-message p {
        font-family: 'Poppins', sans-serif;
        font-size: 14px;
        line-height: 1.5;
    }
</style>
</head>

<body>
        <div class="page-content-wrapper">
        <div class="column-container">
            <div class="header">Item Page</div>
            <a href="/help/help.php?id="><div id="questionIcon">Help</div></a><a href="/help/"><div id="questionIcon">Help</div></a>

        <script>document.title = 'goSupertools - 4bXcYfiFm1dKrhNF6hmUQ';</script>

            <div id="reportError" style="margin-right: 135px;">Report Error</div>


            <div class="debug-container">
                <p class="trivia-info">ID: 31983 | Last Updated: 20.05.2025 18:04</p>            </div>


            <div class="preset-switcher">
                <button class="preset-button active" data-preset="general">General</button>
                <button class="preset-button" data-preset="fashionista">Fashionista</button>
                <button class="preset-button" data-preset="trading">Trading</button>
            </div>
                        <div class="box-container preset-general">
                <div class="test-box box-1">
                    <div class="boxheader">Item</div>
                    <div class="template-container">
                        <div class='mannequin-container'><div class='mannequin quality-0'><div class='jd-icon' style='z-index: 2;'></div><div class='mannequin-image-old'></div><div class='mannequin-image'></div><div class='generated-image' style='background-image: url("https://gosupermodel.com/item/4bXcYfiFm1dKrhNF6hmUQ"); left: 65px; top: 20px; width: 49px; height: 106px;'></div></div></div><div class="color-box-container"><div class="color-box-column" style="display: flex; flex-direction: column;"><div class='color-box-wrapper' style='display:flex;align-items:center;'><div class='color-box selected-color' style='background-color: #000000;' data-uiid='4bXcYfiFm1dKrhNF6hmUQ' data-backuiid=''><input type='checkbox' class='checkbox'></div><div id='owned-4bXcYfiFm1dK' class='owned-indicator hidden'><i class='bi bi-check-lg' style='font-size: 14px; font-weight: bold; color: #5EBD73; margin-left: 5px;' data-tippy-content='You own this color variant'></i></div></div></div></div><div class="visitorBox" onclick="redirectToLeaderboard()"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="var(--gst-svg-pink)"><path d="M480-320q75 0 127.5-52.5T660-500q0-75-52.5-127.5T480-680q-75 0-127.5 52.5T300-500q0 75 52.5 127.5T480-320Zm0-72q-45 0-76.5-31.5T372-500q0-45 31.5-76.5T480-608q45 0 76.5 31.5T588-500q0 45-31.5 76.5T480-392Zm0 192q-146 0-266-81.5T40-500q54-137 174-218.5T480-800q146 0 266 81.5T920-500q-54 137-174 218.5T480-200Zm0-300Zm0 220q113 0 207.5-59.5T832-500q-50-101-144.5-160.5T480-720q-113 0-207.5 59.5T128-500q50 101 144.5 160.5T480-280Z" /></svg><div style="margin-top: -2px;margin-left: 2px;">95</div></div><div class="eraBox"><div style="margin-top: -2px;margin-left: 2px;">gSm 1.0</div></div>
<script>
    function redirectToLeaderboard() {
        window.location.href = '/leaderboard/';
    }
    document.getElementById('reportError').addEventListener('click', function () {
        Swal.fire({
            title: 'Report Error',
            text: 'Did you find a mistake on the site? Let us know here:',
            input: 'textarea',
            inputPlaceholder: 'This item was never in the shop',
            showCancelButton: true,
            draggable: true,
            confirmButtonText: 'Send',
            preConfirm: (inputValue) => {
                if (!inputValue) {
                    Swal.showValidationMessage('You need to write something!');
                } else {
                    return fetch('/api/item/report_item.php', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded'
                        },
                        body: 'popupTextarea=' + encodeURIComponent(inputValue) +
                            '&uiid=' + encodeURIComponent('4bXcYfiFm1dKrhNF6hmUQ')
                    }).then(response => {
                        if (!response.ok) {
                            throw new Error(response.statusText);
                        }
                        return response.text();
                    }).catch(error => {
                        Swal.showValidationMessage(`Request failed: ${error}`);
                    });
                }
            }
        }).then((result) => {
            if (result.isConfirmed) {
                Swal.fire({
                    title: 'Thank you!',
                    text: 'Your report has been sent.',
                    icon: 'success'
                });
            }
        });
    });
    document.addEventListener('click', function (event) {
        var target = event.target;

        if (target.classList.contains('checkbox') && target.parentElement.classList.contains('color-box')) {
            target = target.parentElement;
        }

        if (target.classList.contains('color-box')) {
            var uiidValue = target.dataset.uiid;
            var backuiidValue = target.dataset.backuiid;

            var allColorBoxes = document.querySelectorAll('.color-box');
            allColorBoxes.forEach(function (colorBox) {
                colorBox.classList.remove('selected-color');
            });

            target.classList.add('selected-color');

            if (uiidValue) {
                var imageLink = 'https://gosupermodel.com/item/' + uiidValue;
                var mannequinContainer = document.querySelector('.mannequin-container');

                if (mannequinContainer) {
                    var generatedImage = mannequinContainer.querySelector('.generated-image');
                    generatedImage.style.backgroundImage = 'url("' + imageLink + '")';

                    var backImage = mannequinContainer.querySelector('.back-image');
                    
                    if (backImage) {
                        backImage.style.backgroundImage = '';
                        
                        if (backuiidValue) {
                            var backImageLink = 'https://gosupermodel.com/item/' + backuiidValue + '?back';
                            backImage.style.backgroundImage = 'url("' + backImageLink + '")';
                        }
                    }
                }
            }
        }
    });
    
    document.addEventListener('DOMContentLoaded', function() {
        if (typeof tippy !== 'undefined') {
            
            tippy('.owned-indicator [data-tippy-content]', {
                placement: 'right',
                arrow: true
            });
            
            tippy('.us-icon[data-tippy-content]', {
                placement: 'top',
                arrow: true
            });
        }
    });
</script>                    </div>
                </div>

                <div class="test-box box-2">
                    <div class="boxheader">About</div>
                    <div class="template-container">
                        <script>
    document.addEventListener('DOMContentLoaded', function () {
        var copyLinkButton = document.querySelector('.copy-link-button');

        copyLinkButton.addEventListener('click', function () {
            var generatedImageUrl = document.querySelector('.generated-image').style.backgroundImage;

            var imageUrl = generatedImageUrl.replace('url("', '').replace('")', '');

            var tempInput = document.createElement("input");
            document.body.appendChild(tempInput);
            tempInput.setAttribute("value", imageUrl);
            tempInput.select();
            document.execCommand("copy");
            document.body.removeChild(tempInput);

            Swal.fire({
                icon: 'success',
                title: 'Copied!',
                text: 'Item URL has been copied to the clipboard!',
                timer: 2000,
                draggable: true,
                showConfirmButton: true
            });
        });
    });
    document.addEventListener('DOMContentLoaded', function () {
        var wishlistButton = document.querySelector('.wishlist-button');

        wishlistButton.addEventListener('click', function () {
            var uiidValue = "4bXcYfiFm1dKrhNF6hmUQ";

            var link = 'https://gosupermodel.com/shopping/inventory.jsp?context=0&uiids=' + uiidValue;
            window.open(link, '_blank');
        });
    });
    
    document.addEventListener('DOMContentLoaded', function() {
        const warningIcon = document.querySelector('.leaving-shop-warning');
        
        if (warningIcon) {
            tippy('.leaving-shop-warning', {
                content: 'Community items are available in the shop for a maximum of two weeks, but the designer can remove them at any time. The leaving date shown might not be accurate.',
                placement: 'right',
                arrow: true,
                theme: 'light'
            });
        }
        
        const designerButton = document.querySelector('.designer-page-button');
        
        if (designerButton) {
            tippy('.designer-page-button', {
                content: designerButton.getAttribute('data-tooltip'),
                placement: 'right',
                arrow: true,
                theme: 'light'
            });
        }
    });
</script>


<div class="facts-container">
                <div class="filter"><a href="/list/?l=1"><span>Wardrobe Category:</span>
            Hair        </a></div>
    <div class="filter"><a href="/list/?q=0"><span>Quality:</span>
            Good        </a></div>

    <div class="filter"><a href="/list/?by=15"><span>Designed:</span> by Larissa Star</a> <a href="/list/designer.php?id=15" class="designer-page-button" data-tooltip="Larissa Star designer page"><i class="bi bi-person-circle" style="margin-left: 5px; color: var(--gst-body-fontcolor); font-size: 1.2em; vertical-align: middle; border-radius: 50%; padding: 2px;"></i></a></div><div class="filter"><span>Designer:</span> <a href="/list/?d=0">Junior Designer Item</a></div></div>                    </div>
                    <div class="button-container">
                        <div class="wishlist-button">
                            <i class="bi bi-stars" style="font-size: 20px; font-weight: bold; margin-right: 8px;"></i>Try it on!
                        </div>
                        <div class="copy-link-button">
                            <i class="bi bi-share-fill" style="font-size: 20px; font-weight: bold; margin-right: 8px;"></i>Copy Link
                        </div>
                    </div>
                </div>

                <div class="test-box box-6">
                    <div class="boxheader">Relations</div>
                    <div class="template-container">
                        <div style="display: flex; flex-direction: column; width: 100%;">
        <div class="relatedwrapper" id="related-items-content">
        Loading...
    </div>
</div>

<script>
    const relationInfos = {"color":"<span style='display: block; margin-top: 5px;'><strong>Color<\/strong><\/span>","layer":"<span style='display: block; margin-top: 5px;'><strong>Layer<\/strong><\/span>","gopack":"<span style='display: block; margin-top: 5px;'><strong>Gopack<\/strong><\/span>","vipoutfit":"<span style='display: block; margin-top: 5px;'><strong>Vipoutfit<\/strong><\/span>","comp":"<span style='display: block; margin-top: 5px;'><strong>Comp<\/strong><\/span>","giftcard":"<span style='display: block; margin-top: 5px;'><strong>Giftcard<\/strong><\/span>","perk":"<span style='display: block; margin-top: 5px;'><strong>Perk<\/strong><\/span>","gocode":"<span style='display: block; margin-top: 5px;'><strong>Gocode<\/strong><\/span>","fullset":"<span style='display: block; margin-top: 5px;'><strong>Fullset<\/strong><\/span>","sptpassport":"<span style='display: block; margin-top: 5px;'><strong>Sptpassport<\/strong><\/span>","other":"<span style='display: block; margin-top: 5px;'><strong>Other<\/strong><\/span>","iconhunt":"<span style='display: block; margin-top: 5px;'><strong>Iconhunt<\/strong><\/span>","gsm1":"<span style='display: block; margin-top: 5px;'><strong>Gsm1<\/strong><\/span>","fashionpass":"<span style='display: block; margin-top: 5px;'><strong>Fashionpass<\/strong><\/span>"};

    function getRelationInfoHTML(reltype) {
        if (reltype === 'none') {
            return "<span style='display: block; margin-top: 5px;'>Relations allow you to group related items together for easier access.</span><span style='display: block; margin-top: 5px;'>To create a relation:</span><span style='display: block;'>• Add items by pasting their item links</span><span style='display: block;'>• Select the appropriate relation type</span><span style='display: block;'>• Click save to submit your relation</span>";
        }
        
        if (reltype === 'default') {
            return "<span style='display: block; margin-top: 5px;'>Relations allow you to group related items together for easier access.</span><span style='display: block; margin-top: 5px;'>To create a relation:</span><span style='display: block;'>• Add items by pasting their item links</span><span style='display: block;'>• Select the appropriate relation type</span><span style='display: block;'>• Click save to submit your relation</span>";
        }
        
        if (relationInfos[reltype]) {
            return relationInfos[reltype];
        }
        
        return "<span style='display: block; margin-top: 5px;'>Relations allow you to group related items together for easier access.</span><span style='display: block; margin-top: 5px;'>To create a relation:</span><span style='display: block;'>• Add items by pasting their item links</span><span style='display: block;'>• Select the appropriate relation type</span><span style='display: block;'>• Click save to submit your relation</span>";
    }

    function loadRelatedItems() {
        document.getElementById('related-items-content').innerHTML = '<div class="loading-indicator" style="text-align: center; padding: 20px;"><span style="font-size: 14px;">Loading relations...</span></div>';
        
        fetch('/api/item/fetch_related_items.php?id=31983')
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    renderRelatedItems(data.data);
                } else {
                    document.getElementById('related-items-content').innerHTML = 
                        '<div class="item-container" style="font-size: 13px; font-weight: normal; text-align: center; padding: 20px;">' + 
                        (data.message || 'No related items found.') + 
                        '</div>';
                }
            })
            .catch(error => {
                console.error('Error loading related items:', error);
                document.getElementById('related-items-content').innerHTML = 
                    '<div class="item-container" style="font-size: 13px; font-weight: normal; text-align: center; padding: 20px;">Error loading related items.</div>';
            });
    }
    
    function renderRelatedItems(data) {
        const relationsContainer = document.getElementById('related-items-content');
        const relations = data.relations;
        
        if (relations.length === 0) {
            relationsContainer.innerHTML = '<div class="item-container" style="font-size: 13px; font-weight: normal; text-align: center; padding: 20px;">No related items found.</div>';
            return;
        }
        
        let html = '';
        
        for (const relation of relations) {
            html += `<span style='font-size:15px; display: block; margin-bottom: 5px; margin-top: 10px;'>${relation.label}</span>`;
            html += `<div class="item-container" style="position:relative; margin-bottom: 15px;" data-relrowtype="${relation.reltype}">`;
            
            for (const itemValue of relation.items) {
                const imageUrl = `https://gosupermodel.com/item/${itemValue}`;
                const redirectUrl = `/item/${itemValue}`;
                html += `<a href="${redirectUrl}" class="uiid-link">
                    <div class="item-div"><img src="${imageUrl}" alt="Item Image"></div>
                </a>`;
            }
            
            html += `<button class="openingsmbutton" style="position: absolute; right: 10px;" onclick="openEditPopup(this)" data-relid="${relation.id}"><i class="bi bi-pencil-square" aria-hidden="true"></i></button>`;
            html += `<button class="openingsmbutton" style="position: absolute; right: 50px;" onclick="confirmRemoval(this)" data-relid="${relation.id}"><i class="bi bi-flag" aria-hidden="true"></i></button>`;
            
            const uiids = relation.items.join(',');
            const fullUrl = `https://gosupermodel.com/shopping/inventory.jsp?context=0&uiids=${encodeURIComponent(uiids)}`;
            html += `<button class="openingsmbutton" style="position: absolute; right: 90px;" onclick="window.open('${fullUrl}')"><i class="bi bi-box-arrow-up-right" aria-hidden="true"></i></button>`;
            
            html += '</div>';
        }
        
        relationsContainer.innerHTML = html;
    }

    document.addEventListener('DOMContentLoaded', loadRelatedItems);

    var items = [];

    function openEditPopup(button) {
        const itemContainer = button.parentElement;
        const itemDivs = itemContainer.getElementsByClassName('item-div');
        items = [];

        Array.from(itemDivs).forEach(itemDiv => {
            const imageUrl = itemDiv.querySelector('img').src;
            items.push(imageUrl.substring(imageUrl.lastIndexOf('/') + 1));
        });

        const relRowType = itemContainer.getAttribute('data-relrowtype');
        const reltype = relationInfos[relRowType] ? relRowType : 'none';
        
        const relID = button.getAttribute('data-relid');
        
        openRelationDialog('Edit Relation', reltype, relID);
    }

    function createItemPreview(itemList) {
        if (!itemList || itemList.length === 0) {
            return '';
        }
        
        let html = '';
        for (let i = 0; i < itemList.length; i++) {
            const itemId = itemList[i];
            html += `
                <div class="relation-item-div" data-itemid="${itemId}">
                    <img src="https://gosupermodel.com/item/${itemId}" alt="Item ${i+1}">
                    <button type="button" class="relation-remove-button" onclick="removeItem('${itemId}')" aria-label="Remove item">×</button>
            </div>
            `;
        }
        return html;
    }

    function removeItem(itemId) {
        var index = items.indexOf(itemId);
        if (index !== -1) {
            items.splice(index, 1);
            const itemElement = document.querySelector(`.relation-item-div[data-itemid="${itemId}"]`);
            if (itemElement) {
                itemElement.remove();
            } else {
                const container = document.getElementById('relation-items-container');
                if (container) {
                    container.innerHTML = createItemPreview(items);
                }
            }
        }
    }

    function addItemFromUrl() {
        const itemInput = document.getElementById('relation-item-input').value;
        const itemIndex = itemInput.indexOf('/item/');
        
        if (itemIndex !== -1) {
            const startIndex = itemIndex + 6;
            const itemId = itemInput.substring(startIndex).split('?')[0].split('&')[0];
            
            if (itemId.length >= 12 && itemId.length <= 21) {
                if (!items.includes(itemId)) {
                    items.push(itemId);
                    document.getElementById('relation-items-container').innerHTML = createItemPreview(items);
                }
                
                document.getElementById('relation-item-input').value = '';
                document.getElementById('item-preview-container').style.display = 'none';
            }
        }
    }

    function openRelationDialog(title, selectedReltype = 'none', relID = '') {
        const isLoggedIn = false;
        
        if (!isLoggedIn) {
            Swal.fire({
                title: 'Login Required',
                text: 'You need to be logged in to create or edit relations between items.',
                icon: 'info',
                confirmButtonText: 'OK'
            });
            return;
        }
        
        if (items.length === 0) {
            const uiid = "4bXcYfiFm1dK";
            items = [uiid];
        }
        
        if (selectedReltype && selectedReltype !== 'none') {
        } else {
            selectedReltype = 'none';
        }
        
        if (items.length > 1) {
            title = title || 'Edit Relation';
        }
        
        Swal.fire({
            title: title,
            draggable: true,
            html: `
                <div class="relation-info-box" style="background-color: var(--gst-background-white2); border-radius: 8px; padding: 12px; margin-bottom: 15px; text-align: left;">
                    <p style="font-size: 12px; margin: 0;">
                        <strong>Relation Types:</strong><br>
                        <span id="relation-type-info">
                            ${getRelationInfoHTML(selectedReltype === 'none' ? 'default' : selectedReltype)}
                        </span>
                    </p>
                </div>
                
                <div class="relation-section" style="text-align: left; margin-bottom: 15px;">
                    <div>
                        <label class="relation-label" for="reltype_dialog">Select type <span style="color: red;">*</span></label>
                        <select id="reltype_dialog" class="swal2-select" style="width: 100%; margin: 0; height: 32px; font-size: 14px;" onchange="updateRelationTypeInfo(this.value)">
                            <option value="none" ${selectedReltype === 'none' ? 'selected' : ''}>Select</option>
                                                        <option value="color" ${selectedReltype === 'color' ? 'selected' : ''}>Color</option>
                                                        <option value="layer" ${selectedReltype === 'layer' ? 'selected' : ''}>Layer</option>
                                                        <option value="gopack" ${selectedReltype === 'gopack' ? 'selected' : ''}>Gopack</option>
                                                        <option value="vipoutfit" ${selectedReltype === 'vipoutfit' ? 'selected' : ''}>Vipoutfit</option>
                                                        <option value="comp" ${selectedReltype === 'comp' ? 'selected' : ''}>Comp</option>
                                                        <option value="giftcard" ${selectedReltype === 'giftcard' ? 'selected' : ''}>Giftcard</option>
                                                        <option value="perk" ${selectedReltype === 'perk' ? 'selected' : ''}>Perk</option>
                                                        <option value="gocode" ${selectedReltype === 'gocode' ? 'selected' : ''}>Gocode</option>
                                                        <option value="fullset" ${selectedReltype === 'fullset' ? 'selected' : ''}>Fullset</option>
                                                        <option value="sptpassport" ${selectedReltype === 'sptpassport' ? 'selected' : ''}>Sptpassport</option>
                                                        <option value="other" ${selectedReltype === 'other' ? 'selected' : ''}>Other</option>
                                                        <option value="iconhunt" ${selectedReltype === 'iconhunt' ? 'selected' : ''}>Iconhunt</option>
                                                        <option value="gsm1" ${selectedReltype === 'gsm1' ? 'selected' : ''}>Gsm1</option>
                                                        <option value="fashionpass" ${selectedReltype === 'fashionpass' ? 'selected' : ''}>Fashionpass</option>
                                                    </select>
                    </div>
                </div>
                
                <div class="relation-section" style="text-align: left; margin-bottom: 15px;">
                    <label class="relation-label" for="relation-item-input">Add Item <span style="color: red;">*</span></label>
                    <div class="relation-item-input-container">
                        <input type="text" id="relation-item-input" class="swal2-input" placeholder="https://gosuper.tools/item/uBIJjtYhIma_YSeObgG64" style="flex: 1; margin: 0; height: 32px; font-size: 14px;">
                        <button type="button" class="swal2-confirm swal2-styled" onclick="addItemFromUrl()" style="margin: 0; width: auto; min-width: 60px; height: 32px; font-size: 12px;">Add</button>
                    </div>
                    
                    <div id="item-preview-container" class="relation-preview-container">
                        <p class="relation-preview-text">Item Preview:</p>
                        <img id="relation-preview-image" class="relation-preview-image" src="" alt="Preview">
                    </div>
                </div>
                
                <div style="text-align: left;">
                    <label class="relation-label">Items in this relation:</label>
                    <div id="relation-items-container" class="relation-items-container">
                        ${createItemPreview(items)}
                    </div>
                </div>
                
                <input type="hidden" id="relID" value="${relID || ''}">
            `,
            showCancelButton: true,
            confirmButtonText: 'Save Relation',
            cancelButtonText: 'Cancel',
            customClass: {
                container: 'relation-dialog-container',
                popup: 'relation-dialog-popup',
                confirmButton: 'relation-dialog-confirm',
                cancelButton: 'relation-dialog-cancel'
            },
            width: '500px',
            didOpen: () => {
                const reltypeSelect = document.getElementById('reltype_dialog');
                if (selectedReltype && selectedReltype !== 'none') {
                    reltypeSelect.value = selectedReltype;
                }
                
                const relIDField = document.getElementById('relID');
                if (relID) {
                    relIDField.value = relID;
                }
                
                window.updateRelationTypeInfo = function(reltype) {
                    const infoBox = document.querySelector('.relation-info-box');
                    const infoSpan = document.getElementById('relation-type-info');
                    
                    if (reltype === 'none') {
                        infoSpan.innerHTML = getRelationInfoHTML('default');
                    } else {
                        infoSpan.innerHTML = getRelationInfoHTML(reltype);
                    }
                };
                
                document.getElementById('relation-item-input').addEventListener('input', function() {
                    const itemInput = this.value;
                    const itemIndex = itemInput.indexOf('/item/');
                    const previewContainer = document.getElementById('item-preview-container');
                    
                    if (itemIndex !== -1) {
                        const startIndex = itemIndex + 6;
                        const itemId = itemInput.substring(startIndex, startIndex + 12);
                        if (itemId.length >= 12 && itemId.length <= 21) {
                            const imageUrl = 'https://gosupermodel.com/item/' + itemId;
                            document.getElementById('relation-preview-image').src = imageUrl;
                            previewContainer.style.display = 'block';
                        } else {
                            previewContainer.style.display = 'none';
                        }
                    } else {
                        previewContainer.style.display = 'none';
                    }
                });
                
                document.getElementById('relation-item-input').addEventListener('keypress', function(e) {
                    if (e.key === 'Enter') {
                        e.preventDefault();
                        addItemFromUrl();
                    }
                });
            },
            focusConfirm: false,
            preConfirm: () => {
                const reltype = document.getElementById('reltype_dialog').value;
                const relID = document.getElementById('relID').value;
                                
                if (!reltype || reltype === 'none' || reltype === 'Select') {
                    Swal.showValidationMessage('Please select a relation type');
                    return false;
                }
                
                if (items.length < 2) {
                    Swal.showValidationMessage('Please add at least two items');
                    return false;
                }
                
                if (!isLoggedIn) {
                    Swal.showValidationMessage('You must be logged in to create relations');
                    return false;
                }
                
                return { reltype, relID };
            }
        }).then((result) => {
            if (result.isConfirmed) {
                sendRelationData(result.value.reltype, result.value.relID);
            }
        });
    }

    function sendRelationData(reltype, relID) {
        const currentItems = [...items];
        const currentReltype = reltype;
        const currentRelID = relID;
        
        fetch('/api/item/save_relation.php', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                reltype: reltype,
                relmodelname: '',
                uiid: "4bXcYfiFm1dKrhNF6hmUQ",
                lines: items,
                relID: relID
            })
        })
        .then(response => response.json())
        .then(response => {
            if (response.error) {
                Swal.fire({
                    icon: 'error',
                    title: 'Error!',
                    text: response.error || 'An error occurred while processing your request.',
                    showConfirmButton: true,
                }).then(() => {
                    openRelationDialog(currentRelID ? 'Edit Relation' : 'Add Relation', currentReltype, currentRelID);
                });
            } else if (response.success) {
                items = [];
                Swal.fire({
                    icon: 'success',
                    title: 'Success!',
                    text: "Your Relation will show up after we approve it.",
                    showConfirmButton: true,
                }).then(() => {
                    loadRelatedItems();
                });
            } else {
                Swal.fire({
                    icon: 'error',
                    title: 'Error!',
                    text: 'An error occurred while processing your request.',
                    showConfirmButton: true,
                }).then(() => {
                    openRelationDialog(currentRelID ? 'Edit Relation' : 'Add Relation', currentReltype, currentRelID);
                });
            }
        })
        .catch(error => {
            console.error('Error:', error);
            Swal.fire({
                icon: 'error',
                title: 'Error!',
                text: 'An error occurred while processing your request.',
                showConfirmButton: true,
            }).then(() => {
                openRelationDialog(currentRelID ? 'Edit Relation' : 'Add Relation', currentReltype, currentRelID);
            });
        });
    }

    function confirmRemoval(button) {
        const relID = button.getAttribute('data-relid');

        Swal.fire({
            title: 'Request Removal',
            text: "Found a duplicate Entry? Click 'Confirm' and an admin will recheck the relation",
            icon: 'warning',
            input: 'text',
            inputPlaceholder: 'Optional: Why should this relation be removed?',
            showCancelButton: true,
            confirmButtonText: 'Confirm',
            draggable: true,
            cancelButtonText: 'Cancel'
        }).then(result => {
            if (result.isConfirmed) {
                const data = { 
                    relID: relID 
                };
                
                if (result.value) {
                    data.comment = result.value;
                }
                
                fetch('/api/item/removeRelation.php', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(data)
                })
                .then(response => response.json())
                .then(response => {
                    if (response.success) {
                        Swal.fire({
                            title: 'Thank you!', 
                            text: 'An Admin will recheck the relation and potentially remove it',
                            icon: 'success',
                            timer: 2000,
                            draggable: true,
                            showConfirmButton: false
                        }).then(() => {
                            loadRelatedItems();
                        });
                    } else {
                        Swal.fire('Error!', response.error || 'There was an error updating the item relation.', 'error');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    Swal.fire('Error!', 'There was an error connecting to the server.', 'error');
                });
            }
        });
    }

</script>                        <script>
                            loadRelatedItems();
                        </script>
                    </div>
                    <div style="text-align: center; margin-top: 10px;">
                        <div class="addrelation" onclick="openRelationDialog('Add Relation')">Submit relation</div>
                    </div>
                </div>
                <div class="banner-ad">
                    <div class="ad-header">
                        <div class="ad-title">Advertisement</div>
                        <a href="https://gosuper.tools/news.php?id=45" class="ad-info-button" target="_blank">
                            <i class="bi bi-info-circle"></i>
                        </a>
                    </div>
                    <div class="ad-content">
                                                    <ins class="adsbygoogle banner-ad-unit" style="display:block;height:90px;max-height:90px;overflow:hidden;" data-ad-client="ca-pub-8337592855206537" data-ad-slot="2362811551" data-ad-format="horizontal"></ins>
                            <script>
                                try {
                                    (adsbygoogle = window.adsbygoogle || []).push({});
                                } catch (err) {
                                    console.log('AdSense failed to load:', err);
                                    const adElement = document.currentScript.previousElementSibling;
                                    adElement.style.display = 'none';
                                    adElement.parentNode.innerHTML += '<div style="display: flex; justify-content: center; align-items: center; height: 100px; opacity: 0.3;"><i class="bi bi-badge-ad" style="font-size: 48px; color: var(--gst-text-777);"></i></div>';
                                }
                            </script>
                                            </div>
                </div>

                <div class="test-box box-4">
                    <div class="boxheader">Tags</div>
                    <div class="template-container" style="align-items: baseline;">
                        <div class="box-4-container" style="width: inherit;">
    <div class="trivia-content">
        <div class="i-color-box-container category-tag" style="background-color:#CD5151;"><button class="close-button" onclick="showPopup(10696)">X</button><a href="/list/?type=3" style="text-decoration: none;color: inherit;">Competition Item</a></div><div class="t-color-box-container" onclick="openTriviaPopup()">Category</div>    </div>
    <div class="admin-tag">

        <div class="popup-overlay" id="popupOverlay"></div>
        <div class="popup" id="popup12" style="width: 400px;font-family: 'Poppins';">
            <span class="popup-close" style="font-weight: normal;" onclick="closePopup12()">
                <i class="bi bi-x-circle-fill" style="font-size: 24px; font-weight: bold; color: var(--gst-text-777);"></i>
            </span>
            <div
                style="font-size: 20px;font-weight:bold;margin-bottom:12px;text-align:center;font-family: 'Montserrat';">
                Remove Category</div>
            <p style="font-weight: normal;font-size: 14px;padding: 0px 16px 0px 16px;margin-bottom: -10px;">
                Did you spot an error? You can remove
                approved Category Tag here and an admin will recheck it.</p><br>
            <input type="text" id="popupId12" disabled style="display:none;">
            <div style="text-align: center;margin-bottom: 15px;">
                <div style="display: inline-block; text-align: left; margin: 0 auto;">
                    <label style="font-weight:500; font-size:14px;" for="popupNote">Please enter whats
                        wrong:</label><br>
                    <textarea style="font-family: 'Poppins';resize:none;width: 320px;" id="popupNote"
                        placeholder="This item is not Locked." rows="4" cols="50"></textarea><br>
                </div>
            </div>
            <div style="text-align:center;"><button class="savebutton" onclick="sendData1()">Send</button></div>
        </div>

    </div>
    
    <div style="border-top: 1px solid var(--gst-border-pink-hover); margin: 10px 0;"></div>
    
        
    <div class="tag-container">
    </div>


    <div class="popup-overlay" id="tagPopupOverlay"></div>
    <div class="popup" id="tagPopup" style="width:580px;">
        <span class="popup-close" onclick="closeTagPopup()"><i class="bi bi-x-circle-fill" style="font-size: 24px; font-weight: bold; color: var(--gst-text-777);"></i></span>
        <div style="font-size: 25px;text-align: center;margin: 5px;">Add tags</div>
        <div style="padding-top: 8px;font-size: 15px;color: #8D8D8D;text-align: center;">Select all
            tags that fit the displayed item!</div>
        <div style="padding:10px;font-size:13px;font-family: 'Poppins';font-weight: 500;">
            We are working on better tagging guidelines right now - for now, check out the <a
                style="color: var(--gst-text-pink);font-weight: 700;" href='/help/help.php?id=22'>HELP</a> page for
            tags. Also: 'Left hand' means the left
            hand of the displayed model/mannequin.
        </div>

        <div class="tag-form">
            <div>Search:<br><input type='text' id='tagSearch' name='tagSearch' autocomplete='off'
                    placeholder='Search tags'></div>
        </div>

        <div style='text-align:center;margin-top: 20px;'>
            <button type='button' id='tagButton' class='tag-switch-button' onclick='switchToTagDiv()'>Item Tags</button>
            <button type='button' id='vibeButton' class='tag-switch-button' onclick='switchToVibeDiv()'>Vibe
                Tags</button>
        </div>
        <div id='tagDiv' class='tagDiv'><h3 style='width: 530px;text-align: center;margin: 0;padding-top: 5px;font-size: 15px;color: #8D8D8D;'>Length</h3><div data-tag-id='1'>Very long</div><div data-tag-id='2'>Long</div><div data-tag-id='3'>Medium</div><div data-tag-id='4'>Short</div><div data-tag-id='5'>Very short</div><h3 style='width: 530px;text-align: center;margin: 0;padding-top: 5px;font-size: 15px;color: #8D8D8D;'>Color</h3><div data-tag-id='6'>Natural colors</div><div data-tag-id='7'>Unnatural colors</div><div data-tag-id='12'>Multicolored</div><div data-tag-id='23'>Ombre</div><div data-tag-id='13'>Roots</div><h3 style='width: 530px;text-align: center;margin: 0;padding-top: 5px;font-size: 15px;color: #8D8D8D;'>Texture</h3><div data-tag-id='16'>Curly</div><div data-tag-id='17'>Coily</div><div data-tag-id='18'>Straight</div><div data-tag-id='19'>Wavy</div><h3 style='width: 530px;text-align: center;margin: 0;padding-top: 5px;font-size: 15px;color: #8D8D8D;'>Type</h3><div data-tag-id='9'>Pigtails</div><div data-tag-id='11'>Bangs</div><div data-tag-id='8'>Braids</div><div data-tag-id='15'>Locs/Dreads</div><div data-tag-id='20'>Ponytail</div><div data-tag-id='21'>Bun</div><div data-tag-id='22'>Updo</div><div data-tag-id='24'>Half up/half down</div><div data-tag-id='26'>Afro</div><div data-tag-id='27'>Bob</div><h3 style='width: 530px;text-align: center;margin: 0;padding-top: 5px;font-size: 15px;color: #8D8D8D;'>Reference</h3><div data-tag-id='10'>Reference</div></div><div id='vibeDiv' class='vibeDiv' style='display:none;'><div data-tag-id="1001" class="vibe-tag"><img src="../static/vibe/Icons_C17888_V_Summer.svg" /> Summer</div><div data-tag-id="1002" class="vibe-tag"><img src="../static/vibe/Icons_C17888_V_Winter.svg" /> Winter</div><div data-tag-id="1003" class="vibe-tag"><img src="../static/vibe/Icons_C17888_V_Sexy.svg" /> Sexy</div><div data-tag-id="1004" class="vibe-tag"><img src="../static/vibe/Icons_C17888_V_Sweet.svg" /> Sweet</div><div data-tag-id="1005" class="vibe-tag"><img src="../static/vibe/Icons_C17888_V_Casual.svg" /> Casual</div><div data-tag-id="1006" class="vibe-tag"><img src="../static/vibe/Icons_C17888_V_Chic.svg" /> Chic</div><div data-tag-id="1007" class="vibe-tag"><img src="../static/vibe/Icons_C17888_V_Urban.svg" /> Urban</div><div data-tag-id="1008" class="vibe-tag"><img src="../static/vibe/Icons_C17888_V_Wacky.svg" /> Wacky</div><div data-tag-id="1009" class="vibe-tag"><img src="../static/vibe/Icons_C17888_V_Sci-fi.svg" /> Sci-fi</div><div data-tag-id="1010" class="vibe-tag"><img src="../static/vibe/Icons_C17888_V_Fantasy.svg" /> Fantasy</div><div data-tag-id="1011" class="vibe-tag"><img src="../static/vibe/Icons_C17888_V_Goth.svg" /> Goth</div><div data-tag-id="1012" class="vibe-tag"><img src="../static/vibe/Icons_C17888_V_Activities.svg" /> Activities</div><div data-tag-id="1013" class="vibe-tag"><img src="../static/vibe/Icons_C17888_V_Cultural.svg" /> Cultural</div><div data-tag-id="1014" class="vibe-tag"><img src="../static/vibe/Icons_C17888_V_Inclusivity.svg" /> Inclusivity</div><div data-tag-id="1015" class="vibe-tag"><img src="../static/vibe/Icons_C17888_V_Holiday.svg" /> Holiday</div><div data-tag-id="1016" class="vibe-tag"><img src="../static/vibe/Icons_C17888_V_Alternative.svg" /> Alternative</div><div data-tag-id="1017" class="vibe-tag"><img src="../static/vibe/Icons_C17888_V_Masculine.svg" /> Masculine</div><div data-tag-id="1018" class="vibe-tag"><img src="../static/vibe/Icons_C17888_V_Historic.svg" /> Historic</div><div data-tag-id="1019" class="vibe-tag"><img src="../static/vibe/Icons_C17888_V_Bohemian.svg" /> Bohemian</div><div data-tag-id="1020" class="vibe-tag"><img src="../static/vibe/Icons_C17888_V_Eccentric.svg" /> Eccentric</div></div>

        <div style='text-align:center;'><button type='button' id='submitBtn' class='savebutton'>Save</button></div>

    </div>
</div>


<div class="popup-overlay" id="triviaPopupOverlay"></div>
<div class="popup" id="triviaPopup"
    style="font-family: 'Poppins', sans-serif; max-width: 680px; width: 90%; border-radius: 12px; box-shadow: 0 4px 16px rgba(0,0,0,0.15);">
    <span class="popup-close" onclick="closeTriviaPopup()"><i class="bi bi-x-circle-fill" style="font-size: 24px; font-weight: bold; color: var(--gst-text-777);"></i></span>
    <h2 style="text-align: center; margin: 10px 0; font-family: 'Montserrat', sans-serif; font-size: 20px;">Add Category
    </h2>

    <div class="category-info-box"
        style="background-color: #f8f8f8; border-radius: 8px; padding: 12px; margin: 0 15px 15px 15px; font-size: 13px;color: #333333">
        <p style="margin: 0;">
            Please select a category for this item. You can also select specific color variants if needed.
            <br>Your username will be shown as contributor after admin approval.
        </p>
    </div>

    <div id="triviaForm" style="padding: 0 15px;">
        <div class="wizard-steps">
            <div class="wizard-step active" data-step="1">1. Categories & Colors</div>
            <div class="wizard-step" data-step="2">2. Details</div>
            <div class="wizard-step" data-step="3">3. Overview</div>
        </div>

        <div class="wizard-content active" data-step="1">
            <div class="form-layout">
                <div class="form-section">
                    <div class="form-field">
                        <label style="font-weight: 500; display: block; margin-bottom: 5px;">Primary Category:</label>
                        <div id="categories-container" class="category-container" style="max-height: 252px; overflow-y: auto; padding-right: 10px;">
                            <div id="categories-loading">loading...</div>
                        </div>
                    </div>
                </div>

                <div class="form-section">
                    <div class="form-field">
                        <label style="font-weight: 500; display: block; margin-bottom: 5px;">Colors:</label>
                        <div id="item-variants-container" class="item-variants-container">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="wizard-content" data-step="2">
            <div class="form-section" style="width: 100%; max-width: 500px; margin: 0 auto;">
                <div id="dynamic-fields">
                    <div class="info-message" style="text-align: center; color: #888; margin: 40px 0;">
                        Please select a category in the previous step
                    </div>
                </div>

                <div id="gocode-fields" style="display: none;">
                    <div class="form-field" style="margin-bottom: 15px;">
                        <label style="font-weight: 500; display: block; margin-bottom: 5px;" for="gocode-name">goCode Name:</label>
                        <input type="text" id="gocode-name" name="gocode-name" placeholder="e.g. SUMMER2024">
                    </div>

                    <div class="form-field">
                        <label style="font-weight: 500; display: block; margin-bottom: 5px;" for="gocode-release-date">Release Date:</label>
                        <input type="date" id="gocode-release-date" name="gocode-release-date">
                    </div>
                </div>

                <div id="gopack-fields" style="display: none;">
                    <div class="form-field" style="margin-bottom: 15px;">
                        <label style="font-weight: 500; display: block; margin-bottom: 5px;" for="gopack-price">Price (XX,XX€):</label>
                        <input type="text" id="gopack-price" name="gopack-price" placeholder="e.g. 25,99€" pattern="[0-9,.€]+" oninput="validatePriceInput(this)">
                    </div>

                    <div class="form-field">
                        <label style="font-weight: 500; display: block; margin-bottom: 5px;" for="gopack-release-date">Release Date:</label>
                        <input type="date" id="gopack-release-date" name="gopack-release-date">
                    </div>
                </div>

                <div id="giftcard-fields" style="display: none;">
                    <div class="form-field" style="margin-bottom: 15px;">
                        <label style="font-weight: 500; display: block; margin-bottom: 5px;" for="giftcard-price">Price (XX,XX€):</label>
                        <input type="text" id="giftcard-price" name="giftcard-price" placeholder="e.g. 25,99€" pattern="[0-9,.€]+" oninput="validatePriceInput(this)">
                    </div>

                    <div class="form-field" style="margin-bottom: 15px;">
                        <label style="font-weight: 500; display: block; margin-bottom: 5px;" for="giftcard-type">Type:</label>
                        <select id="giftcard-type" name="giftcard-type" style="width: 100%; padding: 8px; border-radius: 6px; border: 1px solid #ddd;">
                            <option value="two_weeks">Two weeks</option>
                            <option value="six_months">6 months</option>
                        </select>
                    </div>
                </div>

                <div id="monthly-reward-fields" style="display: none;">
                    <div class="form-field" style="margin-bottom: 15px;">
                        <label style="font-weight: 500; display: block; margin-bottom: 5px;">Release Month/Year:</label>
                        <div style="display: flex; gap: 10px;">
                            <select id="reward-month" style="flex: 1; padding: 8px; border-radius: 6px; border: 1px solid #ddd;">
                                <option value="1">January</option>
                                <option value="2">February</option>
                                <option value="3">March</option>
                                <option value="4">April</option>
                                <option value="5">May</option>
                                <option value="6">June</option>
                                <option value="7">July</option>
                                <option value="8">August</option>
                                <option value="9">September</option>
                                <option value="10">October</option>
                                <option value="11">November</option>
                                <option value="12">December</option>
                            </select>
                            <select id="reward-year" style="flex: 1; padding: 8px; border-radius: 6px; border: 1px solid #ddd;">
                            </select>
                        </div>
                    </div>
                </div>

                <div id="gospecials-fields" style="display: none;">
                    <div class="form-field">
                        <label style="font-weight: 500; display: block; margin-bottom: 5px;" for="gospecials-release-date">Release Date:</label>
                        <input type="date" id="gospecials-release-date" name="gospecials-release-date">
                    </div>
                </div>

                <div class="form-field" style="margin-top: 20px;">
                    <label style="font-weight: 500; display: block; margin-bottom: 5px;" for="moretags">Info for admins:</label>
                    <textarea id="moretags" name="moretags" rows="3" maxlength="240" placeholder='This Item is from the "Design a Space Suit" competition :)'></textarea>
                </div>
            </div>
        </div>

        <div class="wizard-content" data-step="3">
            <div class="overview-section">
                <h3>Category:</h3>
                <div id="overview-categories" class="overview-content">
                </div>
            </div>

            <div class="overview-section">
                <h3>Selected Colors</h3>
                <div id="overview-colors" class="overview-colors">
                </div>
            </div>

            <div class="overview-section">
                <h3>Additional Information</h3>
                <div id="overview-details" class="overview-content">
                </div>
            </div>
        </div>

        <div class="wizard-buttons">
            <button type="button" class="wizard-button" id="prevButton" style="display: none;">Previous</button>
            <button type="button" class="wizard-button" id="nextButton">Next</button>
            <button type="submit" class="savebutton" id="submitButton" style="display: none;">Save Category</button>
        </div>
    </div>
</div>


<script>
    function validatePriceInput(input) {
        const value = input.value;
        const cleanedValue = value.replace(/[^0-9,.€]/g, '');
        
        if (value !== cleanedValue) {
            input.value = cleanedValue;
        }
    }

    const popupManager = {
        show: (popupId, overlayId) => {
            document.getElementById(overlayId || popupId + 'Overlay').style.display = 'block';
            document.getElementById(popupId).style.display = 'block';
        },
        
        hide: (popupId, overlayId) => {
            document.getElementById(overlayId || popupId + 'Overlay').style.display = 'none';
            document.getElementById(popupId).style.display = 'none';
        }
    };

    function sendRemoveRequest() {
        const id = document.getElementById('popupId12').value;
        const note = document.getElementById('popupNote').value;

        fetch("/api/item/edittrivia.php", {
            method: "POST",
            headers: { "Content-type": "application/x-www-form-urlencoded" },
            body: `id=${id}&note=${note}`
        })
        .then(() => {
            popupManager.hide('popup12', 'popupOverlay');
            location.reload();
        });
    }

    const showPopup = (id) => {
        document.getElementById('popupId12').value = id;
        popupManager.show('popup12', 'popupOverlay');
    };
    
    const closePopup12 = () => popupManager.hide('popup12', 'popupOverlay');
    
    const openTagPopup = () => {
                Swal.fire({
            title: 'Login Required',
            text: 'You need to be logged in to add tags to this item.',
            icon: 'info',
            confirmButtonText: 'OK'
        });
            };
    
    const closeTagPopup = () => popupManager.hide('tagPopup', 'tagPopupOverlay');
    
    const openTriviaPopup = () => {
                Swal.fire({
            title: 'Login Required',
            text: 'You need to be logged in to add categories to this item.',
            icon: 'info',
            confirmButtonText: 'OK'
        });
            };
    
    const closeTriviaPopup = () => popupManager.hide('triviaPopup', 'triviaPopupOverlay');
    
    function setActiveButton(buttonId) {
        document.querySelectorAll('.tag-switch-button').forEach(btn => btn.classList.remove('active'));
        document.getElementById(buttonId).classList.add('active');
    }
    
    function switchToTagDiv() {
        document.getElementById('tagDiv').style.display = 'flex';
        document.getElementById('vibeDiv').style.display = 'none';
        setActiveButton('tagButton');
    }

    function switchToVibeDiv() {
        document.getElementById('tagDiv').style.display = 'none';
        document.getElementById('vibeDiv').style.display = 'flex';
        setActiveButton('vibeButton');
    }
    
    function toggleVariant(index) {
        const checkbox = document.getElementById(`variant-${index}`);
        const variantDiv = document.querySelector(`.item-variant[data-index="${index}"]`);

        if (!checkbox || !variantDiv || document.querySelectorAll('.item-variant').length === 1) return;

        checkbox.checked = !checkbox.checked;
        variantDiv.classList.toggle('selected', checkbox.checked);
    }

    document.addEventListener('DOMContentLoaded', () => {
        initTagSystem();
        
        initCategorySystem();
        
        setActiveButton('tagButton');
        
        document.getElementById('popup12').querySelector('.savebutton').addEventListener('click', sendRemoveRequest);
    });
    
    function initTagSystem() {
        const state = {
            selectedVibeTags: [],
            createdAt: null,
            elements: {
                tagDiv: document.querySelectorAll('.tagDiv div'),
                vibeDiv: document.querySelectorAll('.vibeDiv div'),
                container: document.querySelector('.tag-container'),
                search: document.getElementById('tagSearch'),
                submit: document.getElementById('submitBtn'),
                vibeTags: document.querySelectorAll('.vibe-tag')
            },
            vibeTags: {
                1001: ["Summer", "V_Summer"],
                1002: ["Winter", "V_Winter"],
                1003: ["Sexy", "V_Sexy"],
                1004: ["Sweet", "V_Sweet"],
                1005: ["Casual", "V_Casual"],
                1006: ["Chic", "V_Chic"],
                1007: ["Urban", "V_Urban"],
                1008: ["Wacky", "V_Wacky"],
                1009: ["Sci-fi", "V_Sci-fi"],
                1010: ["Fantasy", "V_Fantasy"],
                1011: ["Goth", "V_Goth"],
                1012: ["Activities", "V_Activities"],
                1013: ["Cultural", "V_Cultural"],
                1014: ["Inclusivity", "V_Inclusivity"],
                1015: ["Holiday", "V_Holiday"],
                1016: ["Alternative", "V_Alternative"],
                1017: ["Masculine", "V_Masculine"],
                1018: ["Historic", "V_Historic"],
                1019: ["Bohemian", "V_Bohemian"],
                1020: ["Eccentric", "V_Eccentric"]            }
        };

        function handleSearch(event) {
            const searchTerm = event.target.value.toLowerCase();
            const elements = [...state.elements.tagDiv, ...state.elements.vibeDiv];
            elements.forEach(el => {
                el.style.display = el.textContent.toLowerCase().includes(searchTerm) ? 'block' : 'none';
            });
        }

        function updateVibeImage(tag, forceNormal = false) {
            const img = tag.querySelector('img');
            if (!img) return;
            
            const hasColor = img.src.includes('_C17888');
            const shouldHaveColor = !(tag.classList.contains('selected') || (!forceNormal && tag.matches(':hover')));

            if (hasColor !== shouldHaveColor) {
                img.src = img.src.replace(hasColor ? '_C17888_' : '_', hasColor ? '_' : '_C17888_');
            }
        }

        function handleVibeTagSelection(tag) {
            const isSelected = tag.classList.toggle('selected');
            const tagId = tag.dataset.tagId;

            state.selectedVibeTags = isSelected
                ? [...state.selectedVibeTags, tagId]
                : state.selectedVibeTags.filter(id => id !== tagId);

            state.elements.vibeTags.forEach(otherTag => {
                otherTag.style.pointerEvents = state.selectedVibeTags.length < 2 || otherTag.classList.contains('selected') ? 'auto' : 'none';
                otherTag.style.backgroundColor = state.selectedVibeTags.length === 2 && !otherTag.classList.contains('selected') ? 'gainsboro' : '';
            });

            updateVibeImage(tag);
        }

        function updateTagContainer(selectedTagIds) {
            const container = state.elements.container;
            container.innerHTML = '';
            const layerValue = 19 === 19 ? 1 : 19;
            
            selectedTagIds.filter(id => id >= 1001 && id <= 1020).forEach(id => {
                const [name, icon] = state.vibeTags[id] || [];
                if (name) {
                    const el = document.createElement('div');
                    el.className = 'vibeTag';
                    el.innerHTML = `<img src='../static/vibe/Icons_${icon}.svg'> ${name}`;
                    el.onclick = () => window.location.href = `/list/?tag=${id}`;
                    container.appendChild(el);
                }
            });

            selectedTagIds.filter(id => id < 1001 || id > 1020).forEach(id => {
                const tagEl = document.querySelector(`.tagDiv div[data-tag-id="${id}"]`);
                if (tagEl) {
                    const el = document.createElement('div');
                    el.className = 'publicTag';
                    el.textContent = tagEl.textContent;
                    el.onclick = () => window.location.href = `/list/?tag=${id}&l=${layerValue}`;
                    container.appendChild(el);
                }
            });

            const addTag = document.createElement('div');
            addTag.className = 'publicTag t-color-box-container';
            addTag.textContent = 'Tag';
            addTag.onclick = openTagPopup;
            container.appendChild(addTag);
        }

        state.elements.search.addEventListener('input', handleSearch);
        state.elements.tagDiv.forEach(el => el.addEventListener('click', () => el.classList.toggle('selected')));
        
        state.elements.vibeTags.forEach(tag => {
            tag.addEventListener('click', () => handleVibeTagSelection(tag));
            tag.addEventListener('mouseenter', () => updateVibeImage(tag));
            tag.addEventListener('mouseleave', () => updateVibeImage(tag, true));
        });

        state.elements.submit.addEventListener('click', function() {
            const selectedTags = document.querySelectorAll('.tagDiv .selected, .vibeDiv .selected');
            const tagIds = Array.from(selectedTags).map(tag => tag.dataset.tagId);
            const uiid = "4bXcYfiFm1dKrhNF6hmUQ";

            if (!tagIds.length) {
                return Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: 'Please select at least one tag before submitting.'
                });
            }

            fetch('/api/item/updateItemTags.php', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ tagIds, uiid })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    Swal.fire({
                        icon: 'success',
                        title: 'Thank you!',
                        text: 'Tags have been updated successfully.'
                    }).then(() => location.reload());
                } else {
                    throw new Error(data.error || 'Unknown error');
                }
            })
            .catch(error => {
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: error.message || 'An error occurred while updating the tags.'
                }).then(() => {
                    if (error.message === 'You must be logged in to create relations.') {
                    } else {
                        location.reload();
                    }
                });
            });
        });

        fetch('/api/item/getItemTags.php?uiid=' + "4bXcYfiFm1dKrhNF6hmUQ")
        .then(response => response.json())
        .then(data => {
            state.createdAt = data.pop();

            data.forEach(tagId => {
                const selector = tagId >= 1001 && tagId <= 1020
                    ? `.vibeDiv div[data-tag-id="${tagId}"]`
                    : `.tagDiv div[data-tag-id="${tagId}"]`;

                const element = document.querySelector(selector);
                if (element) {
                    element.classList.add('selected');
                    if (tagId >= 1001) state.selectedVibeTags.push(tagId.toString());
                }
            });

            if (state.selectedVibeTags.length === 2) {
                state.elements.vibeTags.forEach(el => {
                    if (!el.classList.contains('selected')) {
                        el.style.pointerEvents = 'none';
                        el.style.backgroundColor = 'gainsboro';
                    }
                });
            }

            updateTagContainer(data);
        });
    }
    
    function initCategorySystem() {
        const state = {
            elements: {
                triviaForm: document.getElementById('triviaForm'),
                variantsContainer: document.getElementById('item-variants-container'),
                categoriesContainer: document.getElementById('categories-container')
            }
        };

        async function loadCategories() {
            try {
                const response = await fetch('/api/item/get_categories.php');
                const data = await response.json();

                if (data.success && data.categories) {
                    const container = state.elements.categoriesContainer;
                    container.innerHTML = '';

                    data.categories.forEach(category => {
                        const categoryGroup = document.createElement('div');
                        categoryGroup.className = 'category-group';

                        const input = document.createElement('input');
                        input.type = category.is_radio ? 'radio' : 'checkbox';
                        input.id = `category-${category.id}`;
                        input.name = 'tags';
                        input.value = category.id;
                        input.className = 'main-category-radio';
                        input.setAttribute('data-category-id', category.id);
                        input.setAttribute('data-category-name', category.name);

                        if (category.subcategories?.length > 0) {
                            input.style.display = 'none';
                            input.disabled = true;
                        }

                        input.addEventListener('change', updateRadioStates);

                        const label = document.createElement('label');
                        label.htmlFor = `category-${category.id}`;
                        label.textContent = category.display_name;
                        
                        if (category.subcategories?.length > 0) {
                            label.style.cursor = 'pointer';
                            label.style.userSelect = 'none';
                            label.innerHTML = `▶ ${category.display_name}`;
                            label.addEventListener('click', () => {
                                const subcontainer = document.querySelector(`.subcategory-container[data-parent="${category.id}"]`);
                                if (subcontainer) {
                                    const isExpanded = subcontainer.style.display === 'block';
                                    subcontainer.style.display = isExpanded ? 'none' : 'block';
                                    label.innerHTML = `${isExpanded ? '▶' : '▼'} ${category.display_name}`;
                                }
                            });
                        }

                        categoryGroup.appendChild(input);
                        categoryGroup.appendChild(label);

                        if (category.subcategories?.length > 0) {
                            const subContainer = document.createElement('div');
                            subContainer.className = 'subcategory-container subcategory';
                            subContainer.style.display = 'none';
                            subContainer.setAttribute('data-parent', category.id);
                            subContainer.style.marginLeft = '20px';
                            subContainer.style.marginTop = '3px';

                            category.subcategories.forEach(subcat => createSubcategoryItem(subcat, subContainer));
                            
                            
                            categoryGroup.appendChild(subContainer);
                        }

                        container.appendChild(categoryGroup);
                    });

                    updateRadioStates();
                } else {
                    throw new Error('Failed to load categories');
                }
            } catch (error) {
                console.error('Error loading categories:', error);
                state.elements.categoriesContainer.innerHTML = 
                    '<div class="error-message">Error loading categories. Please reload the page.</div>';
            }
        }
        
        function createSubcategoryItem(subCategory, container) {
            const subItem = document.createElement('div');

            const subInput = document.createElement('input');
            subInput.type = subCategory.is_radio ? 'radio' : 'checkbox';
            subInput.id = `subcategory-${subCategory.id}`;
            subInput.name = 'tags';
            subInput.value = subCategory.id;
            subInput.className = 'subcategory-input';
            subInput.setAttribute('data-category-id', subCategory.id);
            subInput.setAttribute('data-category-name', subCategory.name);

            const subLabel = document.createElement('label');
            subLabel.htmlFor = `subcategory-${subCategory.id}`;
            subLabel.textContent = subCategory.display_name;

            subItem.appendChild(subInput);
            subItem.appendChild(subLabel);
            container.appendChild(subItem);
        }

        function loadVariants() {
            const colorData = ["4bXcYfiFm1dK"];

            if (colorData.length === 0) {
                state.elements.variantsContainer.innerHTML = '<p style="text-align: center; color: #777;">No variants available</p>';
                return;
            }

            const hasSingleVariant = colorData.length === 1;
            const container = state.elements.variantsContainer;
            container.innerHTML = '';
            
            if (colorData.length > 1) {
                const allVariantsDiv = document.createElement('div');
                allVariantsDiv.style.width = '100%';
                allVariantsDiv.style.marginBottom = '10px';
                allVariantsDiv.style.textAlign = 'center';
                
                const allVariantsCheckbox = document.createElement('input');
                allVariantsCheckbox.type = 'checkbox';
                allVariantsCheckbox.id = 'all-variants';
                allVariantsCheckbox.className = 'all-variants-checkbox';
                allVariantsCheckbox.style.marginRight = '5px';
                
                const allVariantsLabel = document.createElement('label');
                allVariantsLabel.htmlFor = 'all-variants';
                allVariantsLabel.textContent = 'All colors';
                allVariantsLabel.style.fontSize = '12px';
                allVariantsLabel.style.cursor = 'pointer';
                
                allVariantsCheckbox.addEventListener('change', (e) => {
                    const checkboxes = container.querySelectorAll('.color-variant-checkbox');
                    checkboxes.forEach(checkbox => {
                        checkbox.checked = e.target.checked;
                        const variantDiv = document.querySelector(`.item-variant[data-index="${checkbox.dataset.index}"]`);
                        if (variantDiv) {
                            variantDiv.classList.toggle('selected', e.target.checked);
                        }
                    });
                });
                
                allVariantsDiv.appendChild(allVariantsCheckbox);
                allVariantsDiv.appendChild(allVariantsLabel);
                container.appendChild(allVariantsDiv);
            }
            
            colorData.forEach((variant, index) => {
                const variantDiv = document.createElement('div');
                variantDiv.className = `item-variant${hasSingleVariant ? ' selected' : ''}`;
                variantDiv.dataset.index = index;
                if (!hasSingleVariant) {
                    variantDiv.onclick = () => toggleVariant(index);
                }
                
                const img = document.createElement('img');
                img.src = `https://gosupermodel.com/item/${variant}`;
                img.alt = `Item variant ${index + 1}`;
                img.loading = 'lazy';
                
                const checkbox = document.createElement('input');
                checkbox.type = 'checkbox';
                checkbox.id = `variant-${index}`;
                checkbox.className = 'item-variant-checkbox color-variant-checkbox';
                checkbox.dataset.index = index;
                checkbox.checked = hasSingleVariant;
                checkbox.disabled = hasSingleVariant;
                if (!hasSingleVariant) {
                    checkbox.onclick = (e) => {
                        e.stopPropagation();
                        variantDiv.classList.toggle('selected', e.target.checked);
                        const allVariantsCheckbox = document.getElementById('all-variants');
                        if (allVariantsCheckbox) {
                            const allCheckboxes = [...document.querySelectorAll('.color-variant-checkbox')];
                            allVariantsCheckbox.checked = allCheckboxes.every(cb => cb.checked);
                        }
                    };
                }
                
                variantDiv.appendChild(img);
                variantDiv.appendChild(checkbox);
                container.appendChild(variantDiv);
            });
        }

        function updateRadioStates() {
            document.querySelectorAll('.main-category-radio').forEach(radio => {
                if (radio.disabled) return;
                
                const subcontainer = document.querySelector(`.subcategory-container[data-parent="${radio.getAttribute('data-category-id')}"]`);
                if (subcontainer) {
                    subcontainer.style.display = radio.checked ? 'block' : 'none';
                }
            });
        }

        document.querySelectorAll('.tag-tab').forEach(tab => {
            tab.addEventListener('click', () => {
                document.querySelector('.tag-tab.active').classList.remove('active');
                document.querySelector('.tag-content.active').classList.remove('active');
                
                tab.classList.add('active');
                document.querySelector(`.tag-content[data-tab="${tab.dataset.tab}"]`).classList.add('active');
            });
        });

        state.elements.triviaForm.addEventListener('submit', async (event) => {
            event.preventDefault();

            const allVariantsCheckbox = document.getElementById('all-variants');
            const selectedIndexes = document.querySelectorAll('.item-variant').length === 1
                ? []
                : [...document.querySelectorAll('.color-variant-checkbox:checked')]
                    .map(checkbox => parseInt(checkbox.dataset.index));

            const selectedCategories = [...document.querySelectorAll('input[name="tags"]:checked')].map(input => ({
                id: parseInt(input.value),
                name: input.getAttribute('data-category-name')
            }));

            const formData = {
                uiid: "4bXcYfiFm1dKrhNF6hmUQ",
                categories: selectedCategories,
                moreTags: document.getElementById('moretags').value,
                selected_indexes: selectedIndexes,
                all: allVariantsCheckbox ? allVariantsCheckbox.checked : false,
                eventName: document.getElementById('event-name').value,
                designer: document.getElementById('designer').value,
                releaseDate: document.getElementById('release-date').value
            };

            if (!selectedCategories.length && !formData.moreTags) {
                return Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: 'Please select a category.'
                });
            }

            try {
                const response = await fetch('/api/item/save_category.php', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(formData)
                });

                const data = await response.json();

                if (data.success) {
                    await Swal.fire({
                        icon: 'success',
                        title: 'Thank you!',
                        text: 'Your category has been submitted successfully.'
                    });
                    location.reload();
                } else {
                    throw new Error(data.error || 'Unknown error');
                }
            } catch (error) {
                await Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: error.message || 'An error occurred while submitting your category.'
                });

                if (!error.message || error.message !== 'You must be logged in to save categories.') {
                    location.reload();
                }
            }
        });

        loadVariants();
        loadCategories();
        
        document.querySelectorAll('input[name="tags"]').forEach(radio => {
            radio.addEventListener('change', updateRadioStates);
        });
    }

    let currentStep = 1;
    const totalSteps = 3;
    
    const updateWizardUI = () => {
        document.querySelectorAll('.wizard-step').forEach(step => {
            const stepNum = parseInt(step.dataset.step);
            step.classList.remove('active', 'completed');
            if (stepNum === currentStep) {
                step.classList.add('active');
            } else if (stepNum < currentStep) {
                step.classList.add('completed');
            }
        });

        document.querySelectorAll('.wizard-content').forEach(content => {
            content.classList.toggle('active', parseInt(content.dataset.step) === currentStep);
        });

        const prevButton = document.getElementById('prevButton');
        const nextButton = document.getElementById('nextButton');
        const submitButton = document.getElementById('submitButton');

        prevButton.style.display = currentStep > 1 ? 'block' : 'none';
        nextButton.style.display = currentStep < totalSteps ? 'block' : 'none';
        submitButton.style.display = currentStep === totalSteps ? 'block' : 'none';
    };

    const updateDynamicFields = () => {
        const selectedCategory = document.querySelector('input[name="tags"]:checked');
        
        document.querySelectorAll('#gocode-fields, #gopack-fields, #giftcard-fields, #monthly-reward-fields, #gospecials-fields').forEach(
            field => field.style.display = 'none'
        );
        
        document.getElementById('dynamic-fields').style.display = selectedCategory ? 'none' : 'block';
        
        if (!selectedCategory) return;
        
        const categoryName = selectedCategory.getAttribute('data-category-name') || '';
        
        if (categoryName === 'gocode_item') {
            document.getElementById('gocode-fields').style.display = 'block';
        } else if (categoryName === 'gopack_item') {
            document.getElementById('gopack-fields').style.display = 'block';
        } else if (categoryName === 'giftcard_item') {
            document.getElementById('giftcard-fields').style.display = 'block';
        } else if (categoryName === 'vip_gift' || categoryName === 'fashion_point_reward') {
            document.getElementById('monthly-reward-fields').style.display = 'block';
        } else if (categoryName === 'gospecials_item') {
            document.getElementById('gospecials-fields').style.display = 'block';
        }
    };
    
    document.querySelectorAll('input[name="tags"]').forEach(radio => {
        radio.addEventListener('change', updateDynamicFields);
    });
    
    const populateYears = () => {
        const yearSelect = document.getElementById('reward-year');
        const currentYear = new Date().getFullYear();
        for (let year = 2022; year <= currentYear; year++) {
            const option = document.createElement('option');
            option.value = year;
            option.textContent = year;
            if (year === currentYear) option.selected = true;
            yearSelect.appendChild(option);
        }
    };
    
    populateYears();
    
    document.getElementById('nextButton').addEventListener('click', () => {
        if (currentStep === 1) {
            const hasCategories = document.querySelectorAll('input[name="tags"]:checked').length > 0;
            if (!hasCategories) {
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: 'Please select at least one category before proceeding.'
                });
                return;
            }
            
            updateDynamicFields();
        }
        
        currentStep = Math.min(currentStep + 1, totalSteps);
        if (currentStep === totalSteps) {
            updateOverview();
        }
        updateWizardUI();
    });

    document.getElementById('prevButton').addEventListener('click', () => {
        currentStep = Math.max(currentStep - 1, 1);
        updateWizardUI();
    });

    const updateOverview = () => {
        const selectedCategory = document.querySelector('input[name="tags"]:checked');
        const categoryLabel = selectedCategory ? selectedCategory.parentElement.textContent.trim() : 'No category selected';
        document.getElementById('overview-categories').innerHTML = `<div class="overview-value">${categoryLabel}</div>`;

        const selectedColors = [...document.querySelectorAll('.color-variant-checkbox:checked')].map(checkbox => {
            const variantDiv = document.querySelector(`.item-variant[data-index="${checkbox.dataset.index}"]`);
            return variantDiv.querySelector('img').cloneNode(true);
        });
        
        const colorsContainer = document.getElementById('overview-colors');
        colorsContainer.innerHTML = '';
        
        if (selectedColors.length === 0) {
            document.querySelectorAll('.item-variant').forEach(variantDiv => {
                const img = variantDiv.querySelector('img').cloneNode(true);
                const colorDiv = document.createElement('div');
                colorDiv.className = 'overview-color';
                colorDiv.appendChild(img);
                colorsContainer.appendChild(colorDiv);
            });
        } else {
            selectedColors.forEach(img => {
                const colorDiv = document.createElement('div');
                colorDiv.className = 'overview-color';
                colorDiv.appendChild(img);
                colorsContainer.appendChild(colorDiv);
            });
        }

        const detailsContent = document.getElementById('overview-details');
        detailsContent.innerHTML = '';
        
        if (selectedCategory) {
            const categoryName = selectedCategory.getAttribute('data-category-name') || '';
            
            if (categoryName === 'gocode_item') {
                const gocodeName = document.getElementById('gocode-name').value;
                const gocodeDate = document.getElementById('gocode-release-date').value;
                
                if (gocodeName) {
                    detailsContent.innerHTML += `
                        <div class="overview-label">goCode Name:</div>
                        <div class="overview-value">${gocodeName}</div>
                    `;
                }
                
                if (gocodeDate) {
                    detailsContent.innerHTML += `
                        <div class="overview-label">Release Date:</div>
                        <div class="overview-value">${gocodeDate}</div>
                    `;
                }
            } else if (categoryName === 'gopack_item') {
                const gopackPrice = document.getElementById('gopack-price').value;
                const gopackDate = document.getElementById('gopack-release-date').value;
                
                if (gopackPrice) {
                    detailsContent.innerHTML += `
                        <div class="overview-label">Price:</div>
                        <div class="overview-value">${gopackPrice}</div>
                    `;
                }
                
                if (gopackDate) {
                    detailsContent.innerHTML += `
                        <div class="overview-label">Release Date:</div>
                        <div class="overview-value">${gopackDate}</div>
                    `;
                }
            } else if (categoryName === 'giftcard_item') {
                const giftcardPrice = document.getElementById('giftcard-price').value;
                const giftcardType = document.getElementById('giftcard-type');
                const typeText = giftcardType.options[giftcardType.selectedIndex].text;
                
                if (giftcardPrice) {
                    detailsContent.innerHTML += `
                        <div class="overview-label">Price:</div>
                        <div class="overview-value">${giftcardPrice}</div>
                    `;
                }
                
                if (giftcardType) {
                    detailsContent.innerHTML += `
                        <div class="overview-label">Type:</div>
                        <div class="overview-value">${typeText}</div>
                    `;
                }
            } else if (categoryName === 'vip_gift' || categoryName === 'fashion_point_reward') {
                const month = document.getElementById('reward-month');
                const year = document.getElementById('reward-year');
                
                if (month && year) {
                    const monthName = month.options[month.selectedIndex].text;
                    const yearValue = year.value;
                    
                    detailsContent.innerHTML += `
                        <div class="overview-label">Release Month/Year:</div>
                        <div class="overview-value">${monthName} ${yearValue}</div>
                    `;
                }
            } else if (categoryName === 'gospecials_item') {
                const gospecialsDate = document.getElementById('gospecials-release-date').value;
                
                if (gospecialsDate) {
                    detailsContent.innerHTML += `
                        <div class="overview-label">Release Date:</div>
                        <div class="overview-value">${gospecialsDate}</div>
                    `;
                }
            }
        }
        
        const comment = document.getElementById('moretags').value;
        if (comment) {
            detailsContent.innerHTML += `
                <div class="overview-label">Info:</div>
                <div class="overview-value">${comment}</div>
            `;
        }
        
        if (detailsContent.innerHTML === '') {
            detailsContent.innerHTML = '<div class="overview-value">No additional information provided</div>';
        }
    };

    document.getElementById('submitButton').addEventListener('click', async (event) => {
        event.preventDefault();

        const allVariantsCheckbox = document.getElementById('all-variants');
        const selectedIndexes = document.querySelectorAll('.item-variant').length === 1
            ? []
            : [...document.querySelectorAll('.color-variant-checkbox:checked')]
                .map(checkbox => parseInt(checkbox.dataset.index));

        const selectedCategory = document.querySelector('input[name="tags"]:checked');
        const categoryName = selectedCategory ? selectedCategory.getAttribute('data-category-name') : '';
        
        const selectedCategories = selectedCategory ? [{
            id: parseInt(selectedCategory.value),
            name: categoryName
        }] : [];

        const formData = {
            uiid: "4bXcYfiFm1dKrhNF6hmUQ",
            categories: selectedCategories,
            moreTags: document.getElementById('moretags').value,
            selected_indexes: selectedIndexes,
            all: allVariantsCheckbox ? allVariantsCheckbox.checked : false
        };
        
        if (categoryName === 'gocode_item') {
            formData.gocodeName = document.getElementById('gocode-name').value;
            formData.releaseDate = document.getElementById('gocode-release-date').value;
        } else if (categoryName === 'gopack_item') {
            formData.gopackPrice = document.getElementById('gopack-price').value;
            formData.releaseDate = document.getElementById('gopack-release-date').value;
        } else if (categoryName === 'giftcard_item') {
            formData.giftcardPrice = document.getElementById('giftcard-price').value;
            const typeSelect = document.getElementById('giftcard-type');
            formData.giftcardType = typeSelect.value;
            formData.giftcardTypeText = typeSelect.options[typeSelect.selectedIndex].text;
        } else if (categoryName === 'vip_gift' || categoryName === 'fashion_point_reward') {
            const month = document.getElementById('reward-month');
            const year = document.getElementById('reward-year');
            formData.rewardMonth = month.options[month.selectedIndex].text;
            formData.rewardYear = year.value;
        } else if (categoryName === 'gospecials_item') {
            formData.releaseDate = document.getElementById('gospecials-release-date').value;
        }

        try {
            const response = await fetch('/api/item/save_category.php', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(formData)
            });

            const data = await response.json();

            if (data.success) {
                await Swal.fire({
                    icon: 'success',
                    title: 'Thank you!',
                    text: 'Your category has been submitted successfully.'
                });
                location.reload();
            } else {
                throw new Error(data.error || 'Unknown error');
            }
        } catch (error) {
            await Swal.fire({
                icon: 'error',
                title: 'Error',
                text: error.message || 'An error occurred while submitting your category.'
            });

            if (!error.message || error.message !== 'You must be logged in to save categories.') {
                location.reload();
            }
        }
    });

    document.addEventListener('DOMContentLoaded', function() {
        if (typeof tippy !== 'undefined') {
            tippy('.category-tag[data-tippy-content]', {
                allowHTML: true,
                theme: 'light-border',
                placement: 'top',
                arrow: true,
                maxWidth: 250,
                animation: 'fade',
                duration: 200
            });
            
            tippy('.i-color-box-container[data-tippy-content]', {
                allowHTML: true,
                theme: 'light-border',
                placement: 'top',
                arrow: true,
                maxWidth: 300,
                animation: 'fade',
                duration: 200
            });
        }
    });
</script>                    </div>
                </div>


                <div class="test-box box-7" id="auctions-container">
                    <div class="boxheader">Auctions</div>
                    <button class="info-button" id="auction-info-button"><i class="bi bi-info-circle"></i></button>
                    <button class="log-button" id="auction-log-button" onclick="viewAuctionLog()" style="display: none;">
                            <i class="bi bi-list-ul"></i> Show Log
                        </button>
                    <div class="template-container"
                        style="height: calc(100% - 60px); display: flex; flex-direction: column; position: relative;">

                        <span style="font-size: 13px; font-weight: normal; text-align: center; display: block;" id="auctions-loading">Loading...</span>
<div id="auctions-content" class="modern-list"></div>

<script>
    let auctionData = null;
    
    document.addEventListener('DOMContentLoaded', function () {
        fetch('/api/item/fetch_auctions.php?id=31983')
            .then(response => response.json())
            .then(data => {
                const auctionsLoading = document.getElementById('auctions-loading');
                const auctionsContent = document.getElementById('auctions-content');
                
                auctionData = data.data;
                window.auctionData = data.data;
                
                window.hasAuctionLogs = data.success && 
                    data.data && 
                    data.data.log_entries && 
                    data.data.log_entries.length > 0;
                
                document.dispatchEvent(new CustomEvent('auction_logs_available', {
                    detail: { available: window.hasAuctionLogs }
                }));
                
                if (data.success && data.data.has_auctions) {
                    auctionsLoading.style.display = 'none';
                    renderAuctions(data.data, auctionsContent);
                } else {
                    auctionsLoading.textContent = data.message || 'This item has not been auctioned yet.';
                }
                
                document.dispatchEvent(new CustomEvent('auction_data_loaded'));
            })
            .catch(error => {
                console.error('Error loading auctions:', error);
                document.getElementById('auctions-loading').textContent = 'Error loading auction data.';
                
                window.hasAuctionLogs = false;
                document.dispatchEvent(new CustomEvent('auction_logs_available', {
                    detail: { available: false }
                }));
            });
    });

    function renderAuctions(data, auctionsContent) {
        const colors = data.colors.filter(color => color.has_auctions);
        const quality = data.quality;
        const currencyType = quality == 4 ? 'Diamonds' : 'goMoney';
        let html = '<div class="card-container price-card-container">';
        
        for (const color of colors) {
            html += `<div class="price-card">
                <div class="color-box" style="background-color: #${color.color_hex};height:auto;margin-bottom:unset;border-radius:10px 0 0 10px;width: 25px;" 
                     data-uiid="${color.front_uiid}" data-backuiid="${color.back_uiid}"><input type="checkbox" class="checkbox"></div>
                <div class="price-content">
                    <div class="price-details-grid">
                        <div class="price-row">
                            <div class="price-label">High:</div>
                            <div class="price-value">${color.high} ${currencyType}</div>
                        </div>
                        <div class="price-row">
                            <div class="price-label">Median:</div>
                            <div class="price-value">${color.median} ${currencyType}</div>
                        </div>
                        <div class="price-row">
                            <div class="price-label">Low:</div>
                            <div class="price-value">${color.low} ${currencyType}</div>
                        </div>
                    </div>
                    <div class="price-metadata">
                        <div>Based on ${color.num_auctions} auctions</div>
                        <div>Last sold on ${color.last_sold}</div>
                    </div>
                </div>
            </div>`;
        }
        
        html += `</div>`;
        auctionsContent.innerHTML = html;
    }
    
    function viewAuctionLog() {
        if (!auctionData) return;
        
        const logEntries = auctionData.log_entries;
        const quality = auctionData.quality;
        const currencyType = quality == 4 ? 'Dias' : 'gM';
        let logHtml = '';
        
        if (logEntries.length > 0) {
            logHtml = '<div class="modern-log">' + logEntries.map(function(entry) {
                const actionText = entry.direction === 'sell' ? 'sold' : 'bought';
                
                return `<div class="log-entry">
                    <div class="log-color" style="background-color: #${entry.color};"
                         onmouseover="showTooltip(this, '${entry.uiid}')" 
                         onmouseout="hideTooltip(this)"></div>
                    <div class="log-content">
                        <span class="log-action">${actionText}</span> for 
                        <span class="log-price">${entry.display_price} ${currencyType}</span>
                        on <span class="log-date">${entry.timestamp}</span>
                    </div>
                    <button onclick="event.stopPropagation(); reportSuspiciousPrice('${entry.id}', '${entry.display_price}', '${entry.timestamp}', '${entry.color}', '${entry.uiid}', ${quality})" 
                            class="log-report">
                        <i class="bi bi-flag"></i>
                    </button>
                </div>`;
            }).join('') + '</div>';
        } else {
            logHtml = '<p>No auctions found.</p>';
        }
        
        Swal.fire({
            title: 'Auction History',
            html: logHtml,
            width: 650,
            padding: '2em',
            background: '#fff',
            draggable: true
        });
    }
    
    function showTooltip(element, uiid) {
        var tooltip = document.createElement('div');
        tooltip.className = 'item-tooltip';
        tooltip.innerHTML = '<img src="https://gosupermodel.com/item/' + uiid + '" alt="Item preview"/>';
        element.appendChild(tooltip);
        element._tooltip = tooltip;
    }
    
    function hideTooltip(element) {
        if (element._tooltip) {
            element.removeChild(element._tooltip);
            element._tooltip = null;
        }
    }
    
    function reportSuspiciousPrice(trade_id, display_price, timestamp, colorHex, uiid, itemQuality) {
        const itemName = 'Item';
        const currencyType = itemQuality == 4 ? 'Dias' : 'gM';
        
        Swal.fire({
            title: 'Report Suspicious Price',
            html: `
                <div class="report-dialog">
                    <div class="report-preview">
                        <div class="report-color" style="background-color: #${colorHex};"></div>
                        <div id="item-preview-container">
                            <img id="item-preview" src="" alt="${itemName}">
                            <div id="loading-spinner">Loading item image...</div>
                        </div>
                        <div class="report-details">
                            <div><strong>Price:</strong> ${display_price} ${currencyType}</div>
                            <div><strong>Date:</strong> ${timestamp}</div>
                        </div>
                    </div>
                    <p>Please provide a reason why you believe this price is suspicious:</p>
                    <select id="report-reason" class="swal2-input">
                        <option value="too_high">Price seems too high</option>
                        <option value="too_low">Price seems too low</option>
                        <option value="duplicate">Duplicate entry</option>
                        <option value="other">Other</option>
                    </select>
                    <textarea id="report-details" class="swal2-textarea" placeholder="Additional details (optional)"></textarea>
                </div>
            `,
            showCancelButton: true,
            confirmButtonText: 'Submit Report',
            cancelButtonText: 'Cancel',
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            didOpen: () => {
                if (uiid) {
                    const img = document.getElementById('item-preview');
                    img.onload = function() {
                        document.getElementById('loading-spinner').style.display = 'none';
                        img.style.display = 'block';
                    };
                    img.onerror = function() {
                        document.getElementById('loading-spinner').innerHTML = 'Could not load image';
                    };
                    img.src = 'https://gosupermodel.com/item/' + uiid;
                } else {
                    document.getElementById('loading-spinner').innerHTML = 'Item image not available';
                }
            },
            preConfirm: () => {
                const reason = document.getElementById('report-reason').value;
                const details = document.getElementById('report-details').value;
                
                return { reason: reason, details: details };
            }
        }).then((result) => {
            if (result.isConfirmed) {
                fetch('/api/item/report_trade.php', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        trade_id: trade_id,
                        reason: result.value.reason,
                        details: result.value.details
                    })
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        Swal.fire({
                            title: 'Reported!',
                            text: 'Thank you for your report. An administrator will review it soon.',
                            icon: 'success',
                            confirmButtonText: 'OK'
                        });
                    } else {
                        Swal.fire(
                            'Error',
                            data.message || 'An error occurred while submitting your report.',
                            'error'
                        );
                    }
                })
                .catch(error => {
                    Swal.fire(
                        'Error',
                        'An error occurred while submitting your report.',
                        'error'
                    );
                });
            }
        });
    }
</script>                    </div>
                </div>

                <div class="test-box box-5">
                    <div class="boxheader">Shops</div>
                    <div class="template-container">
                        <div id="loadingMessage1" class="loading-spinner">Loading...</div>
<div id="activeShopsContent" class="modern-list"></div>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        fetch('/api/item/fetch_active_shops.php?id=31983')
            .then(response => response.json())
            .then(data => {
                renderActiveShops(data);
            })
            .catch(error => {
                console.error('Error loading shops:', error);
                document.getElementById('activeShopsContent').innerHTML = 
                    "<div class='empty-state'>Error loading data.</div>";
            })
            .finally(() => {
                document.getElementById('loadingMessage1').style.display = 'none';
            });
    });

    function renderActiveShops(data) {
        const activeShopsContent = document.getElementById('activeShopsContent');
        
        if (!data.success || data.data.length === 0) {
            activeShopsContent.innerHTML = "<span style='font-size: 13px; font-weight: normal; text-align: center; display: block;'>" + 
                (data.message || "No shops found.") + "</span>";
            return;
        }
        
        let html = "<div class='card-container'>";
            
        data.data.forEach(function(item) {
            let hasPrice = item.goMoney || item.diamonds || item.vipDays || item.greetings;
            
            html += "<div class='item-card'>" +
                    "<div class='card-color' style='background-color: #" + item.color_hex + ";'></div>" +
                    "<a href='/sale/show.php?id=" + item.shop_id + "' class='card-link'>" +
                    "<div class='card-content'>" +
                    "<div class='shop-name'>" + item.shop_name + "</div>" +
                    "<div class='username'>by " + item.username + "</div>";
            
            if (item.makeAnOffer || hasPrice) {
                html += "<div class='price-info'>";
                
                if (hasPrice) {
                    html += "<div class='price-details'>";
                    
                    if (item.goMoney) {
                        html += "<div class='price-item'>" +
                                "<img src='../static/icons/money.png' alt='goMoney'>" +
                                "<span>" + item.goMoney + "</span>" +
                                "</div>";
                    }
                    
                    if (item.diamonds) {
                        html += "<div class='price-item'>" +
                                "<img src='../static/icons/dia.png' alt='diamonds'>" +
                                "<span>" + item.diamonds + "</span>" +
                                "</div>";
                    }
                    
                    if (item.vipDays) {
                        html += "<div class='price-item'>" +
                                "<img src='../static/icons/vip.png' alt='vipDays'>" +
                                "<span>" + item.vipDays + "</span>" +
                                "</div>";
                    }
                    
                    if (item.greetings) {
                        html += "<div class='price-item'>" +
                                "<img src='../static/icons/greet.png' alt='greetings'>" +
                                "<span>" + item.greetings + "</span>" +
                                "</div>";
                    }
                    
                    html += "</div>";
                }

                if (item.makeAnOffer) {
                    html += "<div class='offer-badge'>Make an Offer!</div>";
                }
                
                html += "</div>";
            }
            
            html += "</div></a></div>";
        });
        
        html += "</div>";
        activeShopsContent.innerHTML = html;
    }
</script>                    </div>
                </div>
                <div class="test-box box-3">
                    <div class="boxheader">Comments</div>
                    <div class="template-container" style="margin-bottom: 20px; align-items: unset;">
                        <div class="admin-facts" style="align-items: unset;">Competition participation price for the &quot;Build a House Competition&quot;, hosted during SPT 2025. 8. July 2025</div>
<script>
    function openPopup() {
                Swal.fire({
            title: 'Login Required',
            text: 'You need to be logged in to submit information about this item.',
            icon: 'info',
            confirmButtonText: 'OK'
        });
            }
    function sendData(commentText) {
        if (!commentText) return;

        var xhr = new XMLHttpRequest();
        xhr.open('POST', '/api/item/save_comment.php', true);
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                try {
                    var response = JSON.parse(xhr.responseText);
                    
                    if (response.success) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Success',
                            text: 'Your comment was saved successfully!',
                        }).then(() => {
                            location.reload();
                        });
                    } else {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: response.message || 'There was an issue saving your comment. Please try again later.',
                        });
                    }
                } catch (e) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: 'There was an issue saving your comment. Please try again later.',
                    });
                }
            }
        };

        var id = "31983";
        var uiid = "4bXcYfiFm1dKrhNF6hmUQ";
        var data = 'id=' + encodeURIComponent(id) +
            '&uiid=' + encodeURIComponent(uiid) +
            '&popupTextarea=' + encodeURIComponent(commentText);

        xhr.send(data);
    }
</script>                    </div>
                    <div class="addrelation" onclick="openPopup()">Submit Info</div>

                </div>

                <div class="test-box box-10" id="trades-container">
                    <div class="boxheader">Trades</div>
                    <button class="info-button" id="trade-info-button"><i class="bi bi-info-circle"></i></button>
                    <button class="log-button" id="trade-log-button" onclick="viewTradeLog()" style="display: none;">
                            <i class="bi bi-list-ul"></i> Show Log
                        </button>
                    <div class="template-container"
                        style="height: calc(100% - 60px); display: flex; flex-direction: column; position: relative;">
                        
                        <span style="font-size: 13px; font-weight: normal; text-align: center; display: block;" id="trades-loading">Loading...</span>
<div id="trades-content" class="modern-list"></div>

<script>
    let tradeData = null;
    
    document.addEventListener('DOMContentLoaded', function () {
        fetch('/api/item/fetch_trades.php?id=31983')
            .then(response => response.json())
            .then(data => {
                const tradesLoading = document.getElementById('trades-loading');
                const tradesContent = document.getElementById('trades-content');
                
                tradeData = data.data;
                window.tradeData = data.data;
                
                window.hasTradeLogs = data.success && 
                    data.data && 
                    data.data.log_entries && 
                    data.data.log_entries.length > 0;
                
                document.dispatchEvent(new CustomEvent('trade_logs_available', {
                    detail: { available: window.hasTradeLogs }
                }));
                
                if (data.success && data.data.has_trades) {
                    tradesLoading.style.display = 'none';
                    renderTrades(data.data, tradesContent);
                } else {
                    tradesLoading.textContent = data.message || 'This item has not been traded yet.';
                }
                
                document.dispatchEvent(new CustomEvent('trade_data_loaded'));
            })
            .catch(error => {
                console.error('Error loading trades:', error);
                document.getElementById('trades-loading').textContent = 'Error loading trade data.';
                
                window.hasTradeLogs = false;
                document.dispatchEvent(new CustomEvent('trade_logs_available', {
                    detail: { available: false }
                }));
            });
    });

    function renderTrades(data, tradesContent) {
        const colors = data.colors.filter(color => color.has_trades);
        let html = '<div class="card-container price-card-container">';
        
        for (const color of colors) {
            html += `<div class="price-card">
                <div class="color-box" style="background-color: #${color.color_hex};height:auto;margin-bottom:unset;border-radius:10px 0 0 10px;width: 25px;" 
                     data-uiid="${color.front_uiid}" data-backuiid="${color.back_uiid}"><input type="checkbox" class="checkbox"></div>
                <div class="price-content">
                    <div class="price-details-grid">
                        <div class="price-row">
                            <div class="price-label">High:</div>
                            <div class="price-value">${color.high} goMoney</div>
                        </div>
                        <div class="price-row">
                            <div class="price-label">Median:</div>
                            <div class="price-value">${color.median} goMoney</div>
                        </div>
                        <div class="price-row">
                            <div class="price-label">Low:</div>
                            <div class="price-value">${color.low} goMoney</div>
                        </div>
                    </div>
                    <div class="price-metadata">
                        <div>Based on ${color.num_trades} trades</div>
                        <div>Last sold on ${color.last_sold}</div>
                    </div>
                </div>
            </div>`;
        }
        
        html += `</div>`;
        tradesContent.innerHTML = html;
    }
    
    function viewTradeLog() {
        if (!tradeData) return;
        
        const logEntries = tradeData.log_entries;
        let logHtml = '';
        
        if (logEntries.length > 0) {
            logHtml = '<div class="modern-log">' + logEntries.map(function(entry) {
                const actionText = entry.direction === 'sell' ? 'sold' : 'bought';
                
                return `<div class="log-entry">
                    <div class="log-color" style="background-color: #${entry.color};"
                         onmouseover="showTooltip(this, '${entry.uiid}')" 
                         onmouseout="hideTooltip(this)"></div>
                    <div class="log-content">
                        <span class="log-action">${actionText}</span> for 
                        <span class="log-price">${entry.display_price} gM</span>
                        on <span class="log-date">${entry.timestamp}</span>
                    </div>
                    <button onclick="event.stopPropagation(); reportSuspiciousPrice('${entry.id}', '${entry.display_price}', '${entry.timestamp}', '${entry.color}', '${entry.uiid}')" 
                            class="log-report">
                        <i class="bi bi-flag"></i>
                    </button>
                </div>`;
            }).join('') + '</div>';
        } else {
            logHtml = '<p>No trades found.</p>';
        }
        
        Swal.fire({
            title: 'Trade History',
            html: logHtml,
            width: 650,
            padding: '2em',
            background: '#fff',
            draggable: true
        });
    }
    
    function showTooltip(element, uiid) {
        var tooltip = document.createElement('div');
        tooltip.className = 'item-tooltip';
        tooltip.innerHTML = '<img src="https://gosupermodel.com/item/' + uiid + '" alt="Item preview"/>';
        element.appendChild(tooltip);
        element._tooltip = tooltip;
    }
    
    function hideTooltip(element) {
        if (element._tooltip) {
            element.removeChild(element._tooltip);
            element._tooltip = null;
        }
    }
    
    function reportSuspiciousPrice(trade_id, display_price, timestamp, colorHex, uiid, itemQuality) {
        const itemName = 'Item';
        const currencyType = 'gM';
        
        Swal.fire({
            title: 'Report Suspicious Price',
            html: `
                <div class="report-dialog">
                    <div class="report-preview">
                        <div class="report-color" style="background-color: #${colorHex};"></div>
                        <div id="item-preview-container">
                            <img id="item-preview" src="" alt="${itemName}">
                            <div id="loading-spinner">Loading item image...</div>
                        </div>
                        <div class="report-details">
                            <div><strong>Price:</strong> ${display_price} ${currencyType}</div>
                            <div><strong>Date:</strong> ${timestamp}</div>
                        </div>
                    </div>
                    <p>Please provide a reason why you believe this price is suspicious:</p>
                    <select id="report-reason" class="swal2-input">
                        <option value="too_high">Price seems too high</option>
                        <option value="too_low">Price seems too low</option>
                        <option value="duplicate">Duplicate entry</option>
                        <option value="other">Other</option>
                    </select>
                    <textarea id="report-details" class="swal2-textarea" placeholder="Additional details (optional)"></textarea>
                </div>
            `,
            showCancelButton: true,
            confirmButtonText: 'Submit Report',
            cancelButtonText: 'Cancel',
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            didOpen: () => {
                if (uiid) {
                    const img = document.getElementById('item-preview');
                    img.onload = function() {
                        document.getElementById('loading-spinner').style.display = 'none';
                        img.style.display = 'block';
                    };
                    img.onerror = function() {
                        document.getElementById('loading-spinner').innerHTML = 'Could not load image';
                    };
                    img.src = 'https://gosupermodel.com/item/' + uiid;
                } else {
                    document.getElementById('loading-spinner').innerHTML = 'Item image not available';
                }
            },
            preConfirm: () => {
                const reason = document.getElementById('report-reason').value;
                const details = document.getElementById('report-details').value;
                
                return { reason: reason, details: details };
            }
        }).then((result) => {
            if (result.isConfirmed) {
                fetch('/api/item/report_trade.php', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        trade_id: trade_id,
                        reason: result.value.reason,
                        details: result.value.details
                    })
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        Swal.fire({
                            title: 'Reported!',
                            text: 'Thank you for your report. An administrator will review it soon.',
                            icon: 'success',
                            confirmButtonText: 'OK'
                        });
                    } else {
                        Swal.fire(
                            'Error',
                            data.message || 'An error occurred while submitting your report.',
                            'error'
                        );
                    }
                })
                .catch(error => {
                    Swal.fire(
                        'Error',
                        'An error occurred while submitting your report.',
                        'error'
                    );
                });
            }
        });
    }
</script>                    </div>
                </div>

                <div class="test-box box-9">
                    <div class="boxheader">Wishlists</div>
                    <div class="template-container">
                        <div id="loadingMessage2" class="loading-spinner">Loading...</div>
<div id="wishlistsContent" class="modern-list"></div>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        fetch('/api/item/fetch_wish_info.php?id=31983')
            .then(response => response.json())
            .then(data => {
                renderWishlists(data);
            })
            .catch(error => {
                console.error('Error loading wishlists:', error);
                document.getElementById('wishlistsContent').innerHTML = 
                    "<div class='empty-state'>Error loading data.</div>";
            })
            .finally(() => {
                document.getElementById('loadingMessage2').style.display = 'none';
            });
    });

    function renderWishlists(data) {
        const wishlistsContent = document.getElementById('wishlistsContent');
        
        if (!data.success || data.data.length === 0) {
            wishlistsContent.innerHTML = "<span style='font-size: 13px; font-weight: normal; text-align: center; display: block;'>" + 
                (data.message || "No wishlists found.") + "</span>";
            return;
        }
        
        let html = "<div class='card-container'>";
            
        data.data.forEach(function(item) {
            let hasPrice = item.goMoney || item.diamonds || item.vipDays || item.greetings;
            
            html += "<div class='item-card'>" +
                    "<div class='card-color' style='background-color: #" + item.color_hex + ";'></div>" +
                    "<a href='/sale/wish.php?id=" + item.wish_id + "' class='card-link'>" +
                    "<div class='card-content'>" +
                    "<div class='shop-name'>" + item.wish_name + "</div>" +
                    "<div class='username'>by " + item.username + "</div>";
            
            if (item.makeAnOffer || hasPrice) {
                html += "<div class='price-info'>";
                
                if (hasPrice) {
                    html += "<div class='price-details'>";
                    
                    if (item.goMoney) {
                        html += "<div class='price-item'>" +
                                "<img src='../static/icons/money.png' alt='goMoney'>" +
                                "<span>" + item.goMoney + "</span>" +
                                "</div>";
                    }
                    
                    if (item.diamonds) {
                        html += "<div class='price-item'>" +
                                "<img src='../static/icons/dia.png' alt='diamonds'>" +
                                "<span>" + item.diamonds + "</span>" +
                                "</div>";
                    }
                    
                    if (item.vipDays) {
                        html += "<div class='price-item'>" +
                                "<img src='../static/icons/vip.png' alt='vipDays'>" +
                                "<span>" + item.vipDays + "</span>" +
                                "</div>";
                    }
                    
                    if (item.greetings) {
                        html += "<div class='price-item'>" +
                                "<img src='../static/icons/greet.png' alt='greetings'>" +
                                "<span>" + item.greetings + "</span>" +
                                "</div>";
                    }
                    
                    html += "</div>";
                }

                if (item.makeAnOffer) {
                    html += "<div class='offer-badge'>Name a price!</div>";
                }
                
                html += "</div>";
            }
            
            html += "</div></a></div>";
        });
        
        html += "</div>";
        wishlistsContent.innerHTML = html;
    }
</script>                    </div>
                </div>

                <div class="test-box box-8" id="price-chart-box" style="display: none;">
                    <div class="boxheader price-chart-header">Price Chart</div>
                    <div class="template-container" style="min-height: 290px;">
                        <div id="price-chart-container" style="width: 100%; height: 250px;">
    <div class="chart-controls" style="text-align: center; margin-bottom: 10px;">
        <button id="show-combined" class="chart-filter-btn active"
            style="margin:0 5px;padding:4px 8px;border-radius:4px;border:1px solid #ccc;cursor:pointer;background:#e0e0e0;font-weight:bold;box-shadow:0 0 5px rgba(0,0,0,0.2)">Show
            Combined</button>
        <button id="show-auctions" class="chart-filter-btn"
            style="margin:0 5px;padding:4px 8px;border-radius:4px;border:1px solid #ccc;cursor:pointer;background:#f0f0f0">Only
            Auctions</button>
        <button id="show-trades" class="chart-filter-btn"
            style="margin:0 5px;padding:4px 8px;border-radius:4px;border:1px solid #ccc;cursor:pointer;background:#f0f0f0">Only
            Trades</button>
    </div>
    <div id="no-price-data" style="text-align: center; display: none;font-size: 13px;font-weight: normal;">
        No Price data submitted yet
    </div>
    <canvas id="price-chart"></canvas>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    if (typeof renderPriceChart !== 'function') {
        window.renderPriceChart = function(filterType = 'combined') {
            if (typeof Chart === 'undefined') {
                setTimeout(() => renderPriceChart(filterType), 100);
                return;
            }

            ['combined', 'auctions', 'trades'].forEach(type => {
                const btn = document.getElementById(`show-${type}`);
                if (btn) {
                    const isActive = type === filterType;
                    btn.style.background = isActive ? '#e0e0e0' : '#f0f0f0';
                    btn.style.fontWeight = isActive ? 'bold' : 'normal';
                    btn.style.boxShadow = isActive ? '0 0 5px rgba(0,0,0,0.2)' : 'none';
                }
            });

            const chartContainer = document.getElementById('price-chart-container');
            const chartControls = document.querySelector('.chart-controls');
            const noDataMessage = document.getElementById('no-price-data');
            const canvas = document.getElementById('price-chart');
            const ctx = canvas.getContext('2d');

            if (!window.auctionData && !window.tradeData) {
                chartControls.style.display = 'none';
                noDataMessage.style.display = 'block';
                canvas.style.display = 'none';
                return;
            }

            const hasAnyAuctionData = window.auctionData && window.auctionData.log_entries && window.auctionData.log_entries.length > 0;
            const hasAnyTradeData = window.tradeData && window.tradeData.log_entries && window.tradeData.log_entries.length > 0;

            if (!hasAnyAuctionData && !hasAnyTradeData) {
                chartControls.style.display = 'none';
                noDataMessage.style.display = 'block';
                canvas.style.display = 'none';
                document.getElementById('price-chart-container').style.height = '100px';
                document.getElementById('price-chart-box').style.height = '100px';
                return;
            } else {
                document.getElementById('price-chart-container').style.height = '250px';
                document.getElementById('price-chart-box').style.height = '';
            }

            if (window.priceChart) window.priceChart.destroy();

            const { labels, datasets } = prepareData(filterType);

            if (labels.length === 0 || datasets.length === 0) {
                chartControls.style.display = 'block';
                
                if (filterType === 'auctions') {
                    noDataMessage.textContent = 'No Auction data submitted yet';
                } else if (filterType === 'trades') {
                    noDataMessage.textContent = 'No Trade data submitted yet';
                } else {
                    noDataMessage.textContent = 'No Price data submitted yet';
                }
                
                noDataMessage.style.display = 'block';
                canvas.style.display = 'none';
                return;
            }

            chartControls.style.display = 'block';
            noDataMessage.style.display = 'none';
            canvas.style.display = 'block';

            window.priceChart = new Chart(ctx, {
                type: 'line',
                data: { labels, datasets },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        title: {
                            display: false
                        },
                        tooltip: {
                            callbacks: {
                                title: function (tooltipItems) {
                                    const item = tooltipItems[0];
                                    try {
                                        const date = item.label;
                                        const [year, month, day] = date.split('-');
                                        const monthNames = [
                                            'January', 'February', 'March', 'April', 'May', 'June',
                                            'July', 'August', 'September', 'October', 'November', 'December'
                                        ];
                                        const monthName = monthNames[parseInt(month) - 1] || month;
                                        return `${day} ${monthName} ${year}`;
                                    } catch(e) {
                                        return item.label;
                                    }
                                },
                                label: function (ctx) {
                                    const value = ctx.raw;
                                    const currency = ctx.dataset.dataType === 'auction' &&
                                        window.auctionData?.quality === 4 ? 'Dias' : 'gM';
                                    const type = ctx.dataset.dataType === 'auction' ? 'Auction' : 'Trade';
                                    const colorName = ctx.dataset.label.split(' (')[0];

                                    if (colorName === 'Unknown Color') {
                                        return `${Math.round(value)} ${currency} (${type})`;
                                    }
                                    return `${colorName}: ${Math.round(value)} ${currency} (${type})`;
                                }
                            }
                        },
                        legend: {
                            display: false,
                            labels: {
                                color: 'var(--gst-graph)'
                            }
                        }
                    },
                    scales: {
                        x: {
                            title: { display: false },
                            grid: { display: false },
                            ticks: {
                                color: 'var(--gst-graph)',
                                callback: function(value, index, values) {
                                    const date = this.getLabelForValue(value);
                                    if (!date || typeof date !== 'string') return '';
                                    
                                    try {
                                        const [year, month, day] = date.split('-');
                                        return `${parseInt(day)}.${parseInt(month)}.${year}`;
                                    } catch (e) {
                                        return date;
                                    }
                                },
                                maxRotation: 45,
                                minRotation: 45
                            }
                        },
                        y: {
                            title: { display: true, text: 'Price', color: 'var(--gst-graph)' },
                            min: 0,
                            grid: { color: 'rgba(200,200,200,0.2)' },
                            ticks: {
                                color: 'var(--gst-graph)'
                            }
                        }
                    },
                    elements: {
                        line: { tension: 0 },
                        point: {
                            radius: 5,
                            hitRadius: 8,
                            hoverRadius: 7,
                            pointStyle: 'circle'
                        }
                    },
                    spanGaps: true
                }
            });
        };

        window.prepareData = function(filterType) {
            const allPoints = [];
            const dateSet = new Set();

            function extractPoints(source, type) {
                if (!source) return;
                
                if (source.log_entries && source.log_entries.length > 0) {
                    source.log_entries.forEach(entry => {
                        let price = 0;
                        try {
                            if (typeof entry.display_price === 'number') {
                                price = entry.display_price;
                            } else if (typeof entry.price === 'number') {
                                price = entry.price;
                            } else if (typeof entry.display_price === 'string') {
                                price = parseInt(entry.display_price.replace(/,/g, ''));
                            } else {
                                return;
                            }
                        } catch (e) {
                            console.error("Fehler beim Parsen des Preises:", e, entry);
                            return;
                        }
                        
                        if (price <= 0) return;
                        
                        let date = '';
                        if (entry.timestamp) {
                            try {
                                const timestampParts = entry.timestamp.split(' ');
                                if (timestampParts.length >= 3) {
                                    const day = timestampParts[0].padStart(2, '0');
                                    const monthName = timestampParts[1];
                                    let year = timestampParts[2].replace(',', '');
                                    
                                    const months = {
                                        'January': '01', 'February': '02', 'March': '03', 'April': '04', 
                                        'May': '05', 'June': '06', 'July': '07', 'August': '08', 
                                        'September': '09', 'October': '10', 'November': '11', 'December': '12'
                                    };
                                    
                                    const monthNum = months[monthName] || '01';
                                    
                                    date = `${year}-${monthNum}-${day}`;
                                }
                                
                                if (!date) {
                                    const d = new Date(entry.timestamp);
                                    if (!isNaN(d.getTime())) {
                                        date = `${d.getFullYear()}-${(d.getMonth() + 1).toString().padStart(2, '0')}-${d.getDate().toString().padStart(2, '0')}`;
                                    }
                                }
                            } catch (e) {
                                console.error("Fehler beim Parsen des Datums:", e, entry);
                            }
                        }

                        if (!date) {
                            const now = new Date();
                            date = `${now.getFullYear()}-${(now.getMonth() + 1).toString().padStart(2, '0')}-${now.getDate().toString().padStart(2, '0')}`;
                        }
                        
                        const colorHex = entry.color || '808080';
                        let colorName = 'Unknown Color';
                        if (source.colors && Array.isArray(source.colors)) {
                            const colorObj = source.colors.find(c => c.color_hex === colorHex);
                            if (colorObj && colorObj.color_name) {
                                colorName = colorObj.color_name;
                            }
                        }
                        
                        dateSet.add(date);
                        allPoints.push({
                            type,
                            date,
                            price,
                            color: colorHex,
                            colorName: colorName,
                            uiid: entry.uiid
                        });
                    });
                }
            }

            if (filterType === 'combined' || filterType === 'auctions') {
                extractPoints(window.auctionData, 'auction');
            }
            if (filterType === 'combined' || filterType === 'trades') {
                extractPoints(window.tradeData, 'trade');
            }

            if (allPoints.length === 0) {
                return { labels: [], datasets: [] };
            }

            const labels = Array.from(dateSet).sort((a, b) => {
                return a.localeCompare(b);
            });

            const colorGroups = {};

            allPoints.forEach(p => {
                const key = filterType === 'combined' 
                    ? `${p.color}-${p.type}`
                    : `${p.color}-${p.type}`;
                
                if (!colorGroups[key]) {
                    colorGroups[key] = {
                        color: p.color,
                        colorName: p.colorName, 
                        type: p.type,
                        points: []
                    };
                }
                colorGroups[key].points.push(p);
            });

            const datasets = Object.values(colorGroups).map(group => {
                const dataByDate = {};
                
                labels.forEach(date => {
                    dataByDate[date] = null;
                });
                
                group.points.forEach(point => {
                    if (!dataByDate[point.date]) {
                        dataByDate[point.date] = { sum: 0, count: 0 };
                    }
                    dataByDate[point.date].sum += point.price;
                    dataByDate[point.date].count += 1;
                });
                
                labels.forEach(date => {
                    if (dataByDate[date] && dataByDate[date].count > 0) {
                        dataByDate[date] = dataByDate[date].sum / dataByDate[date].count;
                    } else {
                        dataByDate[date] = null;
                    }
                });
                
                let type = group.type;
                let label = group.colorName;
                if (filterType === 'combined' || type !== 'combined') {
                    label += ` (${type === 'auction' ? 'Auction' : 'Trade'})`;
                }
                
                return {
                    label: label,
                    dataType: type,
                    data: labels.map(date => dataByDate[date]),
                    backgroundColor: `#${group.color}`,
                    borderColor: `#${group.color}`,
                    pointBackgroundColor: `#${group.color}`,
                    borderWidth: 2,
                    tension: 0,
                    fill: false,
                    pointStyle: 'circle',
                    spanGaps: true
                };
            }).filter(ds => ds.data.some(v => v !== null))
              .slice(0, 10);

            return { labels, datasets };
        };
    }

    ['combined', 'auctions', 'trades'].forEach(type => {
        const btn = document.getElementById(`show-${type}`);
        if (btn) {
            btn.addEventListener('click', () => renderPriceChart(type));
        }
    });
    
    document.addEventListener('auction_data_loaded', function () {
        if (document.querySelector('.preset-button.active')?.dataset.preset === 'trading') {
            renderPriceChart();
        }
    });

    document.addEventListener('trade_data_loaded', function () {
        if (document.querySelector('.preset-button.active')?.dataset.preset === 'trading') {
            renderPriceChart();
        }
    });
    
    document.addEventListener('presetChanged', function(event) {
        const presetType = event.detail.preset;
        if (presetType === 'trading') {
            document.getElementById('price-chart-box').style.display = 'block';
            document.getElementById('price-chart-container').style.display = 'block';
            document.querySelector('.price-chart-header').textContent = 'Price Chart';
            
            renderPriceChart('combined');
        } else {
            document.getElementById('price-chart-box').style.display = 'none';
            document.getElementById('price-chart-container').style.display = 'none';
        }
    });
    
    const currentPreset = document.querySelector('.preset-button.active')?.dataset.preset;
    if (currentPreset === 'trading') {
        document.getElementById('price-chart-box').style.display = 'block';
        document.getElementById('price-chart-container').style.display = 'block';
        document.querySelector('.price-chart-header').textContent = 'Price Chart';
        
        renderPriceChart('combined');
    } else {
        document.getElementById('price-chart-box').style.display = 'none';
        document.getElementById('price-chart-container').style.display = 'none';
    }
});
</script>                     </div>
                </div>
                
                <div class="test-box box-11" id="combined-container">
                    <div class="boxheader">Prices</div>
                    <button class="info-button" id="combined-info-button"><i class="bi bi-info-circle"></i></button>
                    <button class="log-button" id="combined-log-button" onclick="viewCombinedLog()" style="display: none;">
                            <i class="bi bi-list-ul"></i> Show Log
                        </button>
                    <div class="template-container"
                        style="height: calc(100% - 60px); display: flex; flex-direction: column; position: relative;">
                        
                        <span style="font-size: 13px; font-weight: normal; text-align: center; display: block;" id="combined-loading">Loading...</span>
<div id="combined-content" class="modern-list"></div>

<script>
    let combinedData = null;
    
    document.addEventListener('DOMContentLoaded', function () {
        let auctionDataLoaded = false;
        let tradeDataLoaded = false;
        
        const combinedLoading = document.getElementById('combined-loading');
        const combinedContent = document.getElementById('combined-content');
        
        document.addEventListener('auction_data_loaded', function() {
            auctionDataLoaded = true;
            checkAndRenderCombined();
        });
        
        document.addEventListener('trade_data_loaded', function() {
            tradeDataLoaded = true;
            checkAndRenderCombined();
        });
        
        function checkAndRenderCombined() {
            if (!auctionDataLoaded || !tradeDataLoaded) return;
            
            combinedData = combineTradingData(window.auctionData, window.tradeData);
            
            const hasCombinedData = combinedData && combinedData.colors && 
                combinedData.colors.some(color => color.has_combined);
            
            window.hasCombinedLogs = combinedData && 
                combinedData.log_entries && 
                combinedData.log_entries.length > 0;
            
            document.dispatchEvent(new CustomEvent('combined_logs_available', {
                detail: { available: window.hasCombinedLogs }
            }));
            
            if (hasCombinedData) {
                combinedLoading.style.display = 'none';
                renderCombined(combinedData, combinedContent);
            } else {
                combinedLoading.textContent = 'No price data available for this item.';
            }
        }
    });

    function combineTradingData(auctionData, tradeData) {
        if (!auctionData && !tradeData) return null;
        
        const combined = {
            has_combined: false,
            colors: [],
            log_entries: [],
            quality: null
        };
        
        if (auctionData && auctionData.quality !== undefined) {
            combined.quality = auctionData.quality;
        } else if (tradeData && tradeData.quality !== undefined) {
            combined.quality = tradeData.quality;
        }
        
        const colorMap = new Map();
        
        if (auctionData && auctionData.colors) {
            auctionData.colors.forEach(color => {
                const key = color.color_hex;
                if (!colorMap.has(key)) {
                    colorMap.set(key, {
                        color_hex: color.color_hex,
                        front_uiid: color.front_uiid,
                        back_uiid: color.back_uiid,
                        has_combined: color.has_auctions || false,
                        prices: color.has_auctions ? [] : [],
                        last_sold: color.last_sold || null
                    });
                }
                
                const colorData = colorMap.get(key);
                if (color.has_auctions) {
                    if (color.high && color.median && color.low) {
                        colorData.prices.push(parseInt(color.high));
                        
                        const medianCount = Math.max(1, Math.floor(color.num_auctions / 2));
                        for (let i = 0; i < medianCount; i++) {
                            colorData.prices.push(parseInt(color.median));
                        }
                        
                        colorData.prices.push(parseInt(color.low));
                    } else if (color.median) {
                        colorData.prices.push(parseInt(color.median));
                    }
                    
                    if (color.last_sold && (!colorData.last_sold || 
                        new Date(color.last_sold) > new Date(colorData.last_sold))) {
                        colorData.last_sold = color.last_sold;
                    }
                    
                    colorData.has_combined = true;
                    combined.has_combined = true;
                    colorData.auction_count = color.num_auctions;
                }
            });
            
            if (auctionData.log_entries) {
                auctionData.log_entries.forEach(entry => {
                    combined.log_entries.push({
                        ...entry,
                        type: 'Auction'
                    });
                });
            }
        }
        
        if (tradeData && tradeData.colors) {
            tradeData.colors.forEach(color => {
                const key = color.color_hex;
                if (!colorMap.has(key)) {
                    colorMap.set(key, {
                        color_hex: color.color_hex,
                        front_uiid: color.front_uiid,
                        back_uiid: color.back_uiid,
                        has_combined: color.has_trades || false,
                        prices: color.has_trades ? [] : [],
                        last_sold: color.last_sold || null
                    });
                }
                
                const colorData = colorMap.get(key);
                if (color.has_trades) {
                    if (color.high && color.median && color.low) {
                        colorData.prices.push(parseInt(color.high));
                        
                        const medianCount = Math.max(1, Math.floor(color.num_trades / 2));
                        for (let i = 0; i < medianCount; i++) {
                            colorData.prices.push(parseInt(color.median));
                        }
                        
                        colorData.prices.push(parseInt(color.low));
                    } else if (color.median) {
                        colorData.prices.push(parseInt(color.median));
                    }
                    
                    if (color.last_sold && (!colorData.last_sold || 
                        new Date(color.last_sold) > new Date(colorData.last_sold))) {
                        colorData.last_sold = color.last_sold;
                    }
                    
                    colorData.has_combined = true;
                    combined.has_combined = true;
                    colorData.trade_count = color.num_trades;
                }
            });
            
            if (tradeData.log_entries) {
                tradeData.log_entries.forEach(entry => {
                    combined.log_entries.push({
                        ...entry,
                        type: 'Trade'
                    });
                });
            }
        }
        
        colorMap.forEach(colorData => {
            if (colorData.prices.length > 0) {
                const prices = colorData.prices.sort((a, b) => a - b);
                const totalTransactions = (colorData.auction_count || 0) + (colorData.trade_count || 0);
                
                const combinedColor = {
                    color_hex: colorData.color_hex,
                    front_uiid: colorData.front_uiid,
                    back_uiid: colorData.back_uiid,
                    has_combined: colorData.has_combined,
                    high: Math.max(...prices),
                    low: Math.min(...prices),
                    num_combined: totalTransactions > 0 ? totalTransactions : prices.length,
                    last_sold: colorData.last_sold
                };
                
                const count = prices.length;
                if (count % 2 === 0) {
                    combinedColor.median = Math.round((prices[(count / 2) - 1] + prices[count / 2]) / 2);
                } else {
                    combinedColor.median = prices[Math.floor(count / 2)];
                }
                
                combined.colors.push(combinedColor);
            }
        });
        
        combined.log_entries.sort((a, b) => {
            const dateA = new Date(a.timestamp);
            const dateB = new Date(b.timestamp);
            return dateB - dateA;
        });
        
        return combined;
    }

    function renderCombined(data, combinedContent) {
        const colors = data.colors.filter(color => color.has_combined);
        let html = '<div class="card-container price-card-container">';
        
        for (const color of colors) {
            html += `<div class="price-card">
                <div class="color-box" style="background-color: #${color.color_hex};height:auto;margin-bottom:unset;border-radius:10px 0 0 10px;width: 25px;" 
                     data-uiid="${color.front_uiid}" data-backuiid="${color.back_uiid}"><input type="checkbox" class="checkbox"></div>
                <div class="price-content">
                    <div class="price-details-grid">
                        <div class="price-row">
                            <div class="price-label">High:</div>
                            <div class="price-value">${color.high} gM</div>
                        </div>
                        <div class="price-row">
                            <div class="price-label">Median:</div>
                            <div class="price-value">${color.median} gM</div>
                        </div>
                        <div class="price-row">
                            <div class="price-label">Low:</div>
                            <div class="price-value">${color.low} gM</div>
                        </div>
                    </div>
                    <div class="price-metadata">
                        <div>Based on ${color.num_combined} transactions</div>
                        <div>Last sold on ${color.last_sold}</div>
                    </div>
                </div>
            </div>`;
        }
        
        html += `</div>`;
        combinedContent.innerHTML = html;
    }
    
    function viewCombinedLog() {
        if (!combinedData) return;
        
        const logEntries = combinedData.log_entries;
        let logHtml = '';
        
        if (logEntries.length > 0) {
            logHtml = '<div class="modern-log">' + logEntries.map(function(entry) {
                const actionText = entry.direction === 'sell' ? 'sold' : 'bought';
                const type = entry.type || 'Transaction';
                const currencyType = (combinedData.quality == 4 && entry.type === 'Auction') ? 'Dia' : 'gM';
                
                return `<div class="log-entry">
                    <div class="log-color" style="background-color: #${entry.color};"
                         onmouseover="showTooltip(this, '${entry.uiid}')" 
                         onmouseout="hideTooltip(this)"></div>
                    <div class="log-content">
                        <span class="log-action">${actionText}</span> for 
                        <span class="log-price">${entry.display_price} ${currencyType}</span>
                        on <span class="log-date">${entry.timestamp}</span>
                        <span class="log-type">${type}</span>
                    </div>
                    <button onclick="event.stopPropagation(); reportSuspiciousPrice('${entry.id}', '${entry.display_price}', '${entry.timestamp}', '${entry.color}', '${entry.uiid}')" 
                            class="log-report">
                        <i class="bi bi-flag"></i>
                    </button>
                </div>`;
            }).join('') + '</div>';
        } else {
            logHtml = '<p>No price data found.</p>';
        }
        
        Swal.fire({
            title: 'Price History',
            html: logHtml,
            width: 650,
            padding: '2em',
            background: '#fff',
            draggable: true
        });
    }
    
    function showTooltip(element, uiid) {
        var tooltip = document.createElement('div');
        tooltip.className = 'item-tooltip';
        tooltip.innerHTML = '<img src="https://gosupermodel.com/item/' + uiid + '" alt="Item preview"/>';
        element.appendChild(tooltip);
        element._tooltip = tooltip;
    }
    
    function hideTooltip(element) {
        if (element._tooltip) {
            element.removeChild(element._tooltip);
            element._tooltip = null;
        }
    }
</script>                     </div>
                </div>

                <div class="test-box box-12" id="saved-looks-box">
                    <div class="boxheader">Looks with this Item</div>
                    <div class="template-container"
                        style="height: calc(100% - 60px); display: flex; flex-direction: column; overflow-y: auto;">
                        <div id="saved-looks-content" style="width: 100%; max-height: 380px; overflow-y: auto;">
    <div id="saved-looks-loading" style="text-align: center; padding: 20px;">
        <i class="bi bi-hourglass-split"></i> Loading looks...
    </div>
    <div id="saved-looks-error" style="display: none; text-align: center; padding: 20px; color: var(--gst-text-pink);">
        <i class="bi bi-exclamation-triangle"></i> <span id="saved-looks-error-message">Error loading looks</span>
    </div>
    <div id="saved-looks-empty" style="display: none; font-size: 13px;font-weight: normal; text-align: center;">
       No looks found with this item
    </div>
    <div id="saved-looks-grid">
    </div>
</div>

<script>
let isLoading = false;

document.addEventListener('DOMContentLoaded', function() {
    if (!isLoading) {
        loadSavedLooks();
    }
    
    document.addEventListener('presetChanged', function(e) {
        if (e.detail.preset === 'fashionista' && !isLoading) {
            loadSavedLooks();
        }
    });
});

function loadSavedLooks() {
    if (isLoading) return;
    
    isLoading = true;
    const itemId = '31983';
    const container = document.getElementById('saved-looks-grid');
    const loading = document.getElementById('saved-looks-loading');
    const errorDiv = document.getElementById('saved-looks-error');
    const errorMessage = document.getElementById('saved-looks-error-message');
    const emptyDiv = document.getElementById('saved-looks-empty');
    
    container.innerHTML = '';
    loading.style.display = 'block';
    errorDiv.style.display = 'none';
    emptyDiv.style.display = 'none';
    
    fetch(`../api/item/get_looks_with_item.php?id=${itemId}`)
        .then(response => response.json())
        .then(data => {
            loading.style.display = 'none';
            
            if (!data.success) {
                errorMessage.textContent = data.message || 'Error loading looks';
                errorDiv.style.display = 'block';
                isLoading = false;
                return;
            }
            
            if (data.looks.length === 0) {
                emptyDiv.style.display = 'block';
                isLoading = false;
                return;
            }
            
            data.looks.forEach(look => {
                const lookElement = document.createElement('div');
                lookElement.className = 'saved-look-item';
                lookElement.innerHTML = `
                    <div class="look-title">${escapeHtml(look.title)}</div>
                    <div class="look-username">by <a href="/profile/?id=${look.owner}" class="profile-link">${escapeHtml(look.username)}</a></div>
                    <div class="look-content">
                        <div class="dressup-container">
                            ${look.content}
                        </div>
                    </div>
                `;
                container.appendChild(lookElement);
            });
            
            isLoading = false;
        })
        .catch(error => {
            loading.style.display = 'none';
            errorMessage.textContent = 'Network error';
            errorDiv.style.display = 'block';
            console.error('Error loading saved looks:', error);
            isLoading = false;
        });
}

function escapeHtml(unsafe) {
    return unsafe
        .replace(/&/g, "&amp;")
        .replace(/</g, "&lt;")
        .replace(/>/g, "&gt;")
        .replace(/"/g, "&quot;")
        .replace(/'/g, "&#039;");
}

function formatDate(dateString) {
    const date = new Date(dateString);
    return date.toLocaleDateString('de-DE', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit'
    });
}
</script>

<style>
#saved-looks-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    row-gap: 20px;
    padding: 10px;
}

.saved-look-item {
    width: 140px;
    padding: 10px;
    border-radius: 10px;
    background-color: var(--gst-background-lightgray);
    border: 1px solid var(--gst-border-pink);
    margin: 0 auto;
}

.look-title {
    color: var(--gst-text-pink);
        font-weight: 700;
        font-size: 14px;
        white-space: normal;
        word-wrap: break-word;
        overflow-wrap: break-word;
}

.look-username {
    color: var(--gst-text-555);
    font-weight: 500;
    font-size: 12px;
    margin-bottom: 5px;
}

.look-content {
    height: 300px;
    position: relative;
    margin-bottom: 5px;
    overflow: hidden;
}

.dressup-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.dressup-item, 
.dressup-back-item, 
.dressup-mannequin {
    position: absolute;
}

.dressup-mannequin {
    background-image: url('../static/images/mannequin.png');
    background-repeat: no-repeat;
    height: 300px;
    width: 140px;
    z-index: 1;
}

.dressup-back-item {
    z-index: 0 !important;
}

.dressup-item {
    z-index: 2;
    position:relative;
}

.look-username a.profile-link {
    color: var(--gst-text-555);
    text-decoration: underline;
    transition: color 0.2s;
}

.look-username a.profile-link:hover {
    color: var(--gst-text-pink);
}
</style>                     </div>
                </div>
            </div>

            <script>
                document.addEventListener('DOMContentLoaded', function () {
                    const presetButtons = document.querySelectorAll('.preset-button');
                    const boxContainer = document.querySelector('.box-container');

                    presetButtons.forEach(button => {
                        button.addEventListener('click', function () {
                            presetButtons.forEach(btn => btn.classList.remove('active'));
                            this.classList.add('active');

                            const presetType = this.dataset.preset;

                            boxContainer.classList.remove('preset-general', 'preset-fashionista', 'preset-trading');
                            boxContainer.classList.add('preset-' + presetType);

                            localStorage.setItem('itemPagePreset', presetType);

                            const event = new CustomEvent('presetChanged', {
                                detail: { preset: presetType }
                            });
                            document.dispatchEvent(event);

                            setTimeout(function () {
                                window.dispatchEvent(new Event('resize'));
                            }, 100);
                        });
                    });

                    const savedPreset = localStorage.getItem('itemPagePreset');
                    if (savedPreset) {
                        const savedButton = document.querySelector(`.preset-button[data-preset="${savedPreset}"]`);
                        if (savedButton) {
                            savedButton.click();
                        }
                    }

                    const owned = JSON.parse(localStorage.getItem('loggedUiids') || '[]');
                    document.querySelectorAll('.owned-indicator').forEach(indicator => {
                        const uiid = indicator.id.replace('owned-', '');
                        if (owned.some(u => u.includes(uiid))) {
                            indicator.classList.remove('hidden');
                        }
                    });

                    if (typeof ResizeObserver !== 'undefined') {
                        const resizeObserver = new ResizeObserver(entries => {
                            for (let entry of entries) {
                                const templateContainer = entry.target.querySelector('.template-container');
                                if (templateContainer) {
                                    const event = new CustomEvent('containerResized', {
                                        detail: {
                                            width: entry.contentRect.width,
                                            height: entry.contentRect.height
                                        }
                                    });
                                    templateContainer.dispatchEvent(event);
                                }
                            }
                        });

                        document.querySelectorAll('.test-box').forEach(box => {
                            resizeObserver.observe(box);
                        });
                    }

                    document.addEventListener('auction_logs_available', function(event) {
                        const logButton = document.getElementById('auction-log-button');
                        if (logButton) {
                            logButton.style.display = event.detail.available ? 'flex' : 'none';
                        }
                    });
                    
                    document.addEventListener('trade_logs_available', function(event) {
                        const logButton = document.getElementById('trade-log-button');
                        if (logButton) {
                            logButton.style.display = event.detail.available ? 'flex' : 'none';
                        }
                    });
                    
                    document.addEventListener('combined_logs_available', function(event) {
                        const logButton = document.getElementById('combined-log-button');
                        if (logButton) {
                            logButton.style.display = event.detail.available ? 'flex' : 'none';
                        }
                    });
                    
                    document.getElementById('auction-info-button').addEventListener('click', function() {
                        Swal.fire({
                            title: 'Auction Submission',
                            html: 'If you want to submit your own auctions, you will need the better goSupermodel Extension by Naddi. The extension adds a <b>submit this auction to goSupertools</b> button in your auction mails. Clicking the button will send the Item, the goMoney amount and the auction ID to goSupertools. Simply submit and your auction will be added to the database. When it is accepted, it will show up under <b>Auction prices</b>.',
                            icon: 'info'
                        });
                    });
                    
                    document.getElementById('trade-info-button').addEventListener('click', function() {
                        Swal.fire({
                            title: 'Trade Submission',
                            html: 'If you want to submit your own trades, you will need the better goSupermodel Extension by Naddi. The extension adds a <b>submit this trade to goSupertools</b> button in your trade log. Clicking the button will open a pop-up with the information it will send. Simply submit and your trade will be added to the database. When it is accepted, it will show up under <b>trade prices</b>.',
                            icon: 'info'
                        });
                    });
                    
                    document.getElementById('combined-info-button').addEventListener('click', function() {
                        Swal.fire({
                            title: 'Combined Prices',
                            html: 'If you want to submit your own auctions, you will need the better goSupermodel Extension by Naddi. The extension adds a <b>submit this auction to goSupertools</b> button in your auction mails. Clicking the button will send the Item, the goMoney amount and the auction ID to goSupertools. Simply submit and your auction will be added to the database. When it is accepted, it will show up under <b>Auction prices</b>.',
                            icon: 'info'
                        });
                    });
                });
            </script>

            <div class="submitted-by" data-tippy-content="&lt;div style=&#039;margin-bottom: 8px;&#039;&gt;
                        &lt;b&gt;Tags:&lt;/b&gt; Destroya
                    &lt;/div&gt;&lt;div style=&#039;margin-bottom: 8px;&#039;&gt;
                        &lt;b&gt;Item Relations:&lt;/b&gt; knobi
                    &lt;/div&gt;&lt;div style=&#039;margin-bottom: 8px;&#039;&gt;
                        &lt;b&gt;Categories:&lt;/b&gt; Inuka
                    &lt;/div&gt;&lt;div style=&#039;margin-bottom: 8px;&#039;&gt;
                        &lt;b&gt;Comments:&lt;/b&gt; Inuka
                    &lt;/div&gt;">
                    <span>Thanks to:</span> Destroya, Inuka, knobi
                </div><script>
                    document.addEventListener("DOMContentLoaded", function() {
                        if (typeof tippy !== "undefined") {
                            tippy(".submitted-by", {
                                allowHTML: true,
                                theme: "light-border",
                                placement: "top",
                                arrow: true,
                                maxWidth: 350,
                                interactive: true
                            });
                        }
                    });
                </script>
                </div>
    </div>
</body>


</html>