<!--
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣀⡤⠴⠒⠒⠒⢒⡶⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣠⠞⠁⠀⠀⠀⠀⠀⡾⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡴⠁⠀⠀⠀⠀⠀⠀⠀⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⠞⠁⠀⢀⣀⣀⣀⡀⠀⠀⢧⠀⠀⠀⠀⠀⡴⣄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⢀⣰⠿⠒⠋⠉⠉⠀⠀⠀⠈⠉⠓⠾⢄⣀⠀⠀⢠⡇⠸⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⣩⠏⠉⠒⢒⣲⡤⠤⣀⣀⠀⠀⠀⠀⠀⠈⠑⢤⡘⡄⠀⢳⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣀⠀
⠀⠀⠀⠀⠀⢰⠾⣣⠴⠚⠉⠉⠀⠀⠀⠀⠀⠉⠓⠀⠀⠀⠀⠀⠀⠙⣧⠀⠀⢣⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣀⡤⣔⡿⡍⡇
⠀⠀⠀⠀⠀⢸⡼⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠘⠆⠀⠀⢳⡀⠀⠀⠀⠀⠀⣀⡤⠞⠋⣡⠞⠉⠀⣇⡇
⠀⠀⠀⠀⣴⠋⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⡠⠴⠒⠛⠓⠚⠉⠉⠉⠁⠀⣴⡟⠁⠀⠀⠀⣿⠁
⠀⠀⠀⣼⣁⣠⡤⢴⠖⠒⠒⠦⠤⢴⣶⣢⠤⠤⠔⠚⠃⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣞⡞⠀⠀⠀⠀⢰⢿⠀
⠀⠀⠀⠉⠉⢙⣦⠞⠀⡠⠞⠉⢉⡷⡄⠉⢙⡶⠃⠀⠀⠀⢀⣠⣦⣤⣄⡀⠀⠀⠀⠀⠀⠀⠀⠀⢀⡎⡼⠀⠀⠀⠀⠀⡜⡞⠀
⠀⠀⠀⣤⡖⠛⠀⠀⡜⠁⠀⡴⢋⣀⣹⣠⠋⠀⠀⠀⠀⣰⣿⠿⠛⠛⠿⣿⣷⣄⡀⠀⠀⠀⠀⠀⡼⢰⠃⠀⠀⠀⠀⡼⢱⠃⠀
⠀⢀⣴⠛⠀⠀⠀⢼⠁⠀⣼⢁⣿⡬⣿⠃⠀⠀⠀⠀⠐⠋⠁⠀⠀⠀⠀⠀⠙⢿⣷⣄⠀⠀⠀⣸⢃⡏⠀⠀⠀⢀⡜⢡⠏⠀⠀
⠀⠸⡿⠀⠀⠀⠀⢻⡀⠀⠀⠀⠉⢠⠇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⣿⠁⣀⡜⠁⡼⠀⠀⠀⡠⠋⣰⠋⠀⠀⠀
⠀⠀⣧⠀⠀⠀⠀⠈⢳⣀⣙⣦⡤⠋⠀⠀⠀⠀⠀⠀⠀⣰⠄⠀⠀⠀⠀⠀⠀⢤⠀⣹⠌⢩⠏⢠⣇⣠⠴⠊⢀⡼⠁⠀⠀⠀⠀
⠀⠀⠘⡆⢀⡴⠖⠋⠉⠉⠀⠀⠀⠀⠀⠀⠀⠘⢧⣤⣾⣷⣿⣿⣿⣷⣦⡀⠀⢸⠀⠻⣾⠉⠀⠀⠀⠀⢀⣠⠋⠀⠀⠀⠀⠀⠀
⠀⠀⢠⡟⣥⠤⠦⠤⠤⢤⣀⣀⠀⠀⠀⠀⠀⠀⠀⠉⠁⠀⠀⠉⠛⠿⣿⣿⣄⣸⠀⠈⠻⣇⠀⢀⣀⠤⠟⠓⠃⠀⠀⠀⠀⠀⠀
⠀⠀⠸⡆⢧⡀⠀⠀⠀⠀⠀⠈⠙⠲⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠉⠉⠁⠀⠀⠀⣸⡍⠉⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⢳⡄⠙⢦⡀⠀⠀⠀⣀⡤⠞⠁⠀⠀⠀⠀⢀⣀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣠⡿⠃⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠙⢦⣀⣉⣷⡚⠉⠀⠀⠀⠀⠀⠀⠀⢀⡾⠋⠀⠀⠀⠀⠀⠀⠀⠀⠀⣠⠼⣿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⣦⣴⠚⢁⡾⠋⠉⠳⢤⣀⢀⣀⣀⣠⠔⠋⠀⠀⠀⠀⠀⠀⣀⣠⠤⠖⠋⠁⢀⣺⣆⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⢰⣷⡇⠀⡞⠀⠀⠀⠀⠀⡼⠋⠉⠁⠀⠀⣀⣀⠤⠴⠒⠊⠉⠉⠀⠀⠀⠀⠀⣼⣿⠻⠃⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠈⢯⡛⢦⡀⠀⠀⠀⢀⡾⠥⠤⠔⠒⠊⠉⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠰⡆⣸⣹⠛⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⢠⡿⠀⢹⣶⣶⣖⡋⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠹⡟⠋⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⢀⡿⠿⠉⠉⠋⠀⠀⠉⠙⠶⣄⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢠⡀⠹⢤⣀⣀⣀⣀⣀⡠⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⡰⠋⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠉⠢⣄⠀⠀⠀⡀⠀⠀⠀⠀⠀⠀⠀⣼⠇⠀⠀⠀⠀⠀⠙⠋⠩⠿⢿⣁⠀⠀⠀⠀⠀⠀
⡼⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠳⡄⠀⠉⠑⠶⢤⣀⣀⣠⣴⡟⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠘⠿⣅⠀⠀⠀⠀⠀
⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⠂⠀⠀⠀⠀⠀⠉⠉⠉⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⢦⠀⠀⠀⠀
⡅⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡇⠀⠀⠀
⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣇⠀⠀⠀
⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠉⠀⠀⠀
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=1777713660" rel="stylesheet">
    <link href="/static/themes.php?v=1777713660" rel="stylesheet">
    <link rel="stylesheet" href="/static/js/sweetalert2.min.css?v=1747740437">
    <link rel="stylesheet" href="/static/lib/tippy/tippy.css?v=1747740437">
    <link rel="stylesheet" href="/static/css/bootstrap-icons.css?v=1747740437">

    <script src="/static/js/sweetalert2.min.js?v=1747740437" defer></script>
    <script src="/static/header_scripts.js?v=1777713660" defer></script>
    <script src="/static/js/notifications.js?v=1747740437" defer></script>
    <script src="/static/lib/tippy/popper.min.js?v=1747740437" defer></script>
    <script src="/static/lib/tippy/tippy.umd.min.js?v=1747740437" defer></script>

    <link rel="icon" type="image/png" href="/static/favicon/favicon-96x96.png" sizes="96x96" />
    <link rel="icon" type="image/svg+xml" href="/static/favicon/favicon.svg" />
    <link rel="shortcut icon" href="/static/favicon/favicon.ico" />
    <link rel="apple-touch-icon" sizes="180x180" href="/static/favicon/apple-touch-icon.png" />
    <meta name="apple-mobile-web-app-title" content="goSupertools" />

    <script>
        if (localStorage.getItem("dark-mode") === "enabled") {
            document.documentElement.classList.add("dark-mode");
        }
    </script>
    
        
        <style>
        .dark-mode body {
            background-image: url('/static/backgrounds/testt.png');
        }
    </style>
        
        
    <style>
                
            </style>
</head>
<body>
    
        
    <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">The new Marketplace is live! Be sure to check it out &lt;3 - more info in the newspost: https://gosuper.tools/news.php?id=75</div>
                    <button id="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">Marketplace</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/HaOd6JrOeFy7JLcWQXzfR">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=1788781070">
<script src="/static/lib/chart/chart.min.js"></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;
    }

    .request-item-button {
        margin-top: 20px;
        padding: 12px 24px;
        background-color: var(--gst-text-pink);
        color: white;
        border: none;
                        border-radius: 8px;
                        font-family: 'Poppins', sans-serif;
                        font-size: 14px;
                        font-weight: 600;
                        cursor: pointer;
    }
</style>
</head>

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

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

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


            <div class="debug-container">
                <p class="trivia-info">ID: 60302 | Last Updated: 02.09.2026 16:09</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-2'><div class='go-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/ETQarMDol7cWlq0JvJ5X5"); left: 59px; top: 19px; width: 59px; height: 54px;'></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: #5b3b12;' data-uiid='ETQarMDol7cWlq0JvJ5X5' data-backuiid='' data-color-uiid='ETQarMDol7cW' data-tippy-content='You own this color variant'><input type='checkbox' class='checkbox'></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;">20</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("ETQarMDol7cWlq0JvJ5X5")
                    }).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('.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 () {
    document.querySelector('.copy-link-button').addEventListener('click', function () {
        const generatedImageUrl = document.querySelector('.generated-image').style.backgroundImage;
        const imageUrl = generatedImageUrl.replace('url("', '').replace('")', '');

        const showCopied = () => Swal.fire({
            icon: 'success',
            title: 'Copied!',
            text: 'Item URL has been copied to the clipboard!',
            timer: 2000,
            draggable: true,
            showConfirmButton: true
        });

        if (navigator.clipboard) {
            navigator.clipboard.writeText(imageUrl).then(showCopied).catch(() => {
                fallbackCopy(imageUrl);
                showCopied();
            });
        } else {
            fallbackCopy(imageUrl);
            showCopied();
        }
    });

    document.querySelector('.wishlist-button').addEventListener('click', function () {
        const uiidValue = "ETQarMDol7cWlq0JvJ5X5";
        window.open('https://gosupermodel.com/shopping/inventory.jsp?context=0&uiids=' + uiidValue, '_blank');
    });

    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'
        });
    }
});

function fallbackCopy(text) {
    const el = document.createElement('input');
    el.value = text;
    document.body.appendChild(el);
    el.select();
    document.execCommand('copy');
    document.body.removeChild(el);
}
</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=2"><span>Quality:</span>
            Unique        </a></div>

    <div class="filter"><a href="/list/?by=164"><span>Designed:</span> by St4rlet</a> <a href="/list/designer.php?id=164" class="designer-page-button" data-tooltip="St4rlet 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"><a href="/list/?d=3"><span>Designer:</span> goDesigner 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=60302')
            .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.trim();
        let itemId = null;
        
        const itemIndex = itemInput.indexOf('/item/');
        if (itemIndex !== -1) {
            const startIndex = itemIndex + 6;
            itemId = itemInput.substring(startIndex).split('?')[0].split('&')[0];
        } else {
            itemId = itemInput;
        }
        
        if (itemId && itemId.length >= 12 && itemId.length <= 21) {
            if (!items.includes(itemId)) {
                items.push(itemId);
                document.getElementById('relation-items-container').innerHTML = createItemPreview(items);
                
                fetch(`/api/get_item.php?uiid=${encodeURIComponent(itemId)}`)
                    .then(response => response.json())
                    .then(data => {
                        console.log('Item data fetched/updated:', data);
                    })
                    .catch(error => {
                        console.error('Error fetching item data:', error);
                    });
            }
            
            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 = "ETQarMDol7cW";
            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="Item URL or ID (e.g., 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.trim();
                    const previewContainer = document.getElementById('item-preview-container');
                    let itemId = null;
                    
                    const itemIndex = itemInput.indexOf('/item/');
                    if (itemIndex !== -1) {
                        const startIndex = itemIndex + 6;
                        itemId = itemInput.substring(startIndex).split('?')[0].split('&')[0];
                    } else {
                        itemId = itemInput;
                    }
                    
                    if (itemId && 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';
                    }
                });
                
                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: "ETQarMDol7cWlq0JvJ5X5",
                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>                    </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">
                                                    <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>
                                            </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:#78AFC1;"><button class="close-button" onclick="showPopup(18670)">X</button><a href="/list/?type=25" style="text-decoration: none;color: inherit;">goPack 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;'>Color</h3><div data-tag-id='70'>Natural colors</div><div data-tag-id='85'>Unnatural colors</div><div data-tag-id='94'>Multicolored</div><div data-tag-id='106'>Ombre</div><div data-tag-id='115'>Roots</div><h3 style='width: 530px;text-align: center;margin: 0;padding-top: 5px;font-size: 15px;color: #8D8D8D;'>Length</h3><div data-tag-id='20'>Very long</div><div data-tag-id='28'>Long</div><div data-tag-id='40'>Medium</div><div data-tag-id='51'>Short</div><div data-tag-id='62'>Very short</div><h3 style='width: 530px;text-align: center;margin: 0;padding-top: 5px;font-size: 15px;color: #8D8D8D;'>Reference</h3><div data-tag-id='108'>Reference</div><h3 style='width: 530px;text-align: center;margin: 0;padding-top: 5px;font-size: 15px;color: #8D8D8D;'>Texture</h3><div data-tag-id='123'>Curly</div><div data-tag-id='135'>Coily</div><div data-tag-id='155'>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='1'>Add-ons</div><div data-tag-id='4'>Extensions</div><div data-tag-id='254'>Face-framing</div><div data-tag-id='140'>Straight</div><div data-tag-id='160'>Pigtails</div><div data-tag-id='161'>Bangs</div><div data-tag-id='168'>Braids</div><div data-tag-id='174'>Locs/Dreads</div><div data-tag-id='181'>Ponytail</div><div data-tag-id='185'>Bun</div><div data-tag-id='191'>Updo</div><div data-tag-id='193'>Half up/half down</div><div data-tag-id='198'>Afro</div><div data-tag-id='202'>Bob</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 id="icon-hunt-fields" style="display: none;">
                    <div class="form-field">
                        <label style="font-weight: 500; display: block; margin-bottom: 5px;" for="icon-hunt-release-date">Release Date:</label>
                        <input type="date" id="icon-hunt-release-date" name="icon-hunt-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="button" 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(tagData) {
            const container = state.elements.container;
            container.innerHTML = '';
            const layerValue = 19 === 19 ? 1 : 19;
            
            tagData.forEach(tag => {
                const id = tag.id;
                const name = tag.name;
                
                if (id >= 1001 && id <= 1020) {
                    const el = document.createElement('div');
                    el.className = 'vibeTag';
                    // Strip prefix and restrict to safe filename characters (alphanumeric + underscore)
                    const vibeTagName = name.replace(/^V_/, '').replace(/[^a-zA-Z0-9_]/g, '');
                    const img = document.createElement('img');
                    img.src = `../static/vibe/Icons_V_${vibeTagName}.svg`;
                    img.alt = vibeTagName;
                    el.appendChild(img);
                    el.appendChild(document.createTextNode(' ' + vibeTagName));
                    el.addEventListener('click', () => window.location.href = `/list/?tag=${encodeURIComponent(id)}`);
                    container.appendChild(el);
                } else {
                    const el = document.createElement('div');
                    el.className = 'publicTag';
                    el.textContent = name;
                    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 = "ETQarMDol7cWlq0JvJ5X5";

            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=' + "ETQarMDol7cWlq0JvJ5X5")
        .then(response => response.json())
        .then(data => {
            state.createdAt = data.pop();

            data.forEach(tag => {
                const tagId = tag.id;
                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 = ["ETQarMDol7cW"];

            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');
            });
        });

        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, #icon-hunt-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';
        } else if (categoryName === 'icon_hunt') {
            document.getElementById('icon-hunt-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>
                    `;
                }
            } else if (categoryName === 'icon_hunt') {
                const iconHuntDate = document.getElementById('icon-hunt-release-date').value;
                
                if (iconHuntDate) {
                    detailsContent.innerHTML += `
                        <div class="overview-label">Release Date:</div>
                        <div class="overview-value">${iconHuntDate}</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: "ETQarMDol7cWlq0JvJ5X5",
            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;
        } else if (categoryName === 'icon_hunt') {
            formData.releaseDate = document.getElementById('icon-hunt-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-13">
                <div class="boxheader">Additional Information</div>
                <div class="template-container">
                    <div class="additional-info-container" style="font-family: 'Poppins', sans-serif; font-size: 13px; padding: 0 10px; width: 100%;">
            <div class="info-item" style="margin-bottom: 8px; background-color: var(--gst-background-white2); border-radius: 6px; padding: 6px 10px;">
            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 3px;">
                <span style="font-weight: 600; color: var(--gst-text-pink);">goPack Item</span>
                
                            </div>
            
            <div style="display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; font-weight: normal;">
                                    <span>
                        <b>Price:</b> 
                        11.95€                    </span>
                                
                                    <span>
                        <b>Release:</b> 02.09.2026                    </span>
                                
                            </div>
            
                    </div>
    </div>

                </div>
            </div>

            <script>
/**
 * Shared price-log utilities — used by trades.php, auctions.php and combined_trades.php.
 * Included once from index.php before the individual price templates.
 */

/**
 * Show a small image tooltip on a log-color swatch.
 * @param {HTMLElement} element
 * @param {string} uiid
 */
function showTooltip(element, uiid) {
    const 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;
    }
}

/**
 * Open the "Report Suspicious Price" dialog for a single log entry.
 * @param {string} trade_id
 * @param {string|number} display_price
 * @param {string} timestamp
 * @param {string} colorHex
 * @param {string} uiid
 * @param {number|null} itemQuality  Optional. Pass 4 for diamond items.
 */
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: () => {
            const img = document.getElementById('item-preview');
            if (uiid) {
                img.onload  = () => {
                    document.getElementById('loading-spinner').style.display = 'none';
                    img.style.display = 'block';
                };
                img.onerror = () => {
                    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: () => ({
            reason:  document.getElementById('report-reason').value,
            details: document.getElementById('report-details').value,
        })
    }).then(result => {
        if (!result.isConfirmed) return;

        fetch('/api/item/report_trade.php', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ trade_id, reason: result.value.reason, details: result.value.details })
        })
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                Swal.fire({ title: 'Reported!', text: 'Thank you for your report. An administrator will review it soon.', icon: 'success' });
            } else {
                Swal.fire('Error', data.message || 'An error occurred while submitting your report.', 'error');
            }
        })
        .catch(() => Swal.fire('Error', 'An error occurred while submitting your report.', 'error'));
    });
}
</script>

            <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>
    // Data is fetched centrally by combined_trades.php; this template only renders.
    let auctionData = null;

    document.addEventListener('auction_data_loaded', function () {
        const auctionsLoading = document.getElementById('auctions-loading');
        const auctionsContent = document.getElementById('auctions-content');

        auctionData = window.auctionData ?? null;

        if (auctionData && auctionData.has_auctions) {
            auctionsLoading.style.display = 'none';
            renderAuctions(auctionData, auctionsContent);
        } else {
            auctionsLoading.textContent = 'This item has not been auctioned yet.';
        }
    });

    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) {
            const uiidPrefix = (color.front_uiid || color.back_uiid || '').slice(0, 12);
            const colorLogs = data.log_entries
                ? data.log_entries.filter(e => (e.uiid || '').slice(0, 12) === uiidPrefix)
                : [];

            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" style="position:relative;">
                    <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>
                    ${colorLogs.length > 0 ? `<button
                        onclick="viewColorAuctionLog('${uiidPrefix}', ${quality})"
                        title="Price history for this color"
                        style="position:absolute;bottom:4px;right:4px;background:none;border:none;cursor:pointer;padding:2px 4px;color:var(--gst-text-777,#777);font-size:14px;line-height:1;"
                    ><i class="bi bi-info-circle"></i></button>` : ''}
                </div>
            </div>`;
        }

        html += `</div>`;
        auctionsContent.innerHTML = html;
    }

    /**
     * Show the auction log filtered to a single color hex.
     * @param {string} colorHex
     * @param {number} quality
     */
    function viewColorAuctionLog(uiidPrefix, quality) {
        if (!auctionData) return;

        const currencyType = quality == 4 ? 'Dias' : 'gM';
        const entries = auctionData.log_entries.filter(e => (e.uiid || '').slice(0, 12) === uiidPrefix);
        let logHtml = entries.length
            ? '<div class="modern-log">' + entries.map(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>'
            : '<p>No auctions found for this color.</p>';

        Swal.fire({
            title: 'Auction History',
            html: logHtml,
            width: 650,
            padding: '2em',
            background: '#fff',
            draggable: true
        });
    }
    
    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
        });
    }
    
    // showTooltip, hideTooltip and reportSuspiciousPrice are defined in price_shared.php
</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>
    // shops.php is the central fetcher for both shops and wishlists.
    // wishlists.php renders from window.wishlistsData once 'wish_data_loaded' fires.
    document.addEventListener('DOMContentLoaded', function () {
        fetch('/api/item/fetch_shop_wish_data.php?id=60302')
            .then(r => r.json())
            .then(data => {
                window.shopsData     = data.shops     ?? [];
                window.wishlistsData = data.wishlists ?? [];

                renderActiveShops(window.shopsData);
                document.dispatchEvent(new CustomEvent('wish_data_loaded'));
            })
            .catch(err => {
                console.error('Error loading shop/wish data:', err);
                document.getElementById('activeShopsContent').innerHTML =
                    "<div class='empty-state'>Error loading data.</div>";
                document.dispatchEvent(new CustomEvent('wish_data_loaded'));
            })
            .finally(() => {
                document.getElementById('loadingMessage1').style.display = 'none';
            });
    });

    /** Escape a string for safe HTML insertion. */
    function escHtml(str) {
        return String(str ?? '')
            .replace(/&/g, '&amp;').replace(/</g, '&lt;')
            .replace(/>/g, '&gt;').replace(/"/g, '&quot;');
    }

    function renderActiveShops(shops) {
        const activeShopsContent = document.getElementById('activeShopsContent');

        if (!shops || shops.length === 0) {
            activeShopsContent.innerHTML =
                "<span style='font-size:13px;font-weight:normal;text-align:center;display:block;'>No shops found.</span>";
            return;
        }

        let html = "<div class='card-container'>";

        shops.forEach(function (item) {
            const hasPrice = item.goMoney || item.diamonds || item.vipDays || item.greetings;

            html += "<div class='item-card'>" +
                    "<div class='card-color' style='background-color:#" + escHtml(item.color_hex) + ";'></div>" +
                    "<a href='/sale/show.php?id=" + parseInt(item.shop_id, 10) + "' class='card-link'>" +
                    "<div class='card-content'>" +
                    "<div class='shop-name'>"  + escHtml(item.shop_name) + "</div>" +
                    "<div class='username'>by " + escHtml(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>"   + escHtml(item.goMoney)   + "</span></div>";
                    if (item.diamonds)  html += "<div class='price-item'><img src='../static/icons/dia.png'   alt='diamonds'><span>"  + escHtml(item.diamonds)  + "</span></div>";
                    if (item.vipDays)   html += "<div class='price-item'><img src='../static/icons/vip.png'   alt='vipDays'><span>"   + escHtml(item.vipDays)   + "</span></div>";
                    if (item.greetings) html += "<div class='price-item'><img src='../static/icons/greet.png' alt='greetings'><span>" + escHtml(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;">
                        <span style="font-size: 13px; font-weight: normal; text-align: center; display: block;">No Comment found.</span>
<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 = "60302";
        var uiid = "ETQarMDol7cWlq0JvJ5X5";
        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>
    // Data is fetched centrally by combined_trades.php; this template only renders.
    let tradeData = null;

    document.addEventListener('trade_data_loaded', function () {
        const tradesLoading = document.getElementById('trades-loading');
        const tradesContent = document.getElementById('trades-content');

        tradeData = window.tradeData ?? null;

        if (tradeData && tradeData.has_trades) {
            tradesLoading.style.display = 'none';
            renderTrades(tradeData, tradesContent);
        } else {
            tradesLoading.textContent = 'This item has not been traded yet.';
        }
    });

    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) {
            const uiidPrefix = (color.front_uiid || color.back_uiid || '').slice(0, 12);
            const colorLogs = data.log_entries
                ? data.log_entries.filter(e => (e.uiid || '').slice(0, 12) === uiidPrefix)
                : [];

            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" style="position:relative;">
                    <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>
                    ${colorLogs.length > 0 ? `<button
                        onclick="viewColorTradeLog('${uiidPrefix}')"
                        title="Price history for this color"
                        style="position:absolute;bottom:4px;right:4px;background:none;border:none;cursor:pointer;padding:2px 4px;color:var(--gst-text-777,#777);font-size:14px;line-height:1;"
                    ><i class="bi bi-info-circle"></i></button>` : ''}
                </div>
            </div>`;
        }

        html += `</div>`;
        tradesContent.innerHTML = html;
    }

    /**
     * Show the trade log filtered to a single color hex.
     * @param {string} colorHex
     */
    /**
     * Validate and sanitize a log entry's fields.
     * Returns null if any required field fails validation.
     */
    function sanitizeLogEntry(entry) {
        const id    = parseInt(entry.id, 10);
        const price = parseInt(entry.display_price, 10);
        const color = /^[0-9a-fA-F]{6}$/.test(entry.color || '') ? entry.color : '999999';
        const uiid  = /^[a-zA-Z0-9_-]{1,30}$/.test(entry.uiid || '') ? entry.uiid : '';
        const ts    = String(entry.timestamp || '').replace(/[<>"'&]/g, '');
        return { id, price, color, uiid, ts };
    }

    /** Build a safe log-entry DOM element using data-* attributes (no inline JS). */
    function buildLogEntry(entry) {
        const s = sanitizeLogEntry(entry);
        const actionText = entry.direction === 'sell' ? 'sold' : 'bought';

        const row = document.createElement('div');
        row.className = 'log-entry';

        const colorDiv = document.createElement('div');
        colorDiv.className = 'log-color';
        colorDiv.style.backgroundColor = '#' + s.color;
        colorDiv.dataset.uiid = s.uiid;
        colorDiv.addEventListener('mouseover', function () { showTooltip(this, s.uiid); });
        colorDiv.addEventListener('mouseout',  function () { hideTooltip(this); });

        const content = document.createElement('div');
        content.className = 'log-content';

        const action = document.createElement('span');
        action.className = 'log-action';
        action.textContent = actionText;

        const priceSpan = document.createElement('span');
        priceSpan.className = 'log-price';
        priceSpan.textContent = price + ' gM';

        const dateSpan = document.createElement('span');
        dateSpan.className = 'log-date';
        dateSpan.textContent = s.ts;

        content.append(action, document.createTextNode(' for '), priceSpan,
                        document.createTextNode(' on '), dateSpan);

        const btn = document.createElement('button');
        btn.className = 'log-report';
        btn.dataset.id    = s.id;
        btn.dataset.price = s.price;
        btn.dataset.ts    = s.ts;
        btn.dataset.color = s.color;
        btn.dataset.uiid  = s.uiid;
        btn.innerHTML = '<i class="bi bi-flag"></i>';
        btn.addEventListener('click', function (e) {
            e.stopPropagation();
            reportSuspiciousPrice(this.dataset.id, this.dataset.price,
                                  this.dataset.ts, this.dataset.color, this.dataset.uiid);
        });

        row.append(colorDiv, content, btn);
        return row;
    }

    function buildLogContainer(entries) {
        if (!entries.length) return null;
        const wrap = document.createElement('div');
        wrap.className = 'modern-log';
        entries.forEach(e => wrap.appendChild(buildLogEntry(e)));
        return wrap;
    }

    function viewColorTradeLog(uiidPrefix) {
        if (!tradeData) return;

        const entries = tradeData.log_entries.filter(e => (e.uiid || '').slice(0, 12) === uiidPrefix);
        const container = document.createElement('div');
        const inner = buildLogContainer(entries);
        if (inner) {
            container.appendChild(inner);
        } else {
            container.textContent = 'No trades found for this color.';
        }

        Swal.fire({
            title: 'Trade History',
            html: container,
            width: 650,
            padding: '2em',
            background: '#fff',
            draggable: true
        });
    }
    
    function viewTradeLog() {
        if (!tradeData) return;
        
        const logEntries = tradeData.log_entries;
        const container  = document.createElement('div');
        const inner = buildLogContainer(logEntries);
        if (inner) {
            container.appendChild(inner);
        } else {
            container.textContent = 'No trades found.';
        }
        
        Swal.fire({
            title: 'Trade History',
            html: container,
            width: 650,
            padding: '2em',
            background: '#fff',
            draggable: true
        });
    }
    
    // showTooltip, hideTooltip and reportSuspiciousPrice are defined in price_shared.php
</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>
    // Data is fetched centrally by shops.php; this template only renders.
    document.addEventListener('wish_data_loaded', function () {
        document.getElementById('loadingMessage2').style.display = 'none';
        renderWishlists(window.wishlistsData ?? []);
    });

    function renderWishlists(wishlists) {
        const wishlistsContent = document.getElementById('wishlistsContent');

        if (!wishlists || wishlists.length === 0) {
            wishlistsContent.innerHTML =
                "<span style='font-size:13px;font-weight:normal;text-align:center;display:block;'>No wishlists found.</span>";
            return;
        }

        let html = "<div class='card-container'>";

        wishlists.forEach(function (item) {
            const hasPrice = item.goMoney || item.diamonds || item.vipDays || item.greetings;

            html += "<div class='item-card'>" +
                    "<div class='card-color' style='background-color:#" + escHtml(item.color_hex) + ";'></div>" +
                    "<a href='/sale/wish.php?id=" + parseInt(item.wish_id, 10) + "' class='card-link'>" +
                    "<div class='card-content'>" +
                    "<div class='shop-name'>"  + escHtml(item.wish_name) + "</div>" +
                    "<div class='username'>by " + escHtml(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>"   + escHtml(item.goMoney)   + "</span></div>";
                    if (item.diamonds)  html += "<div class='price-item'><img src='../static/icons/dia.png'   alt='diamonds'><span>"  + escHtml(item.diamonds)  + "</span></div>";
                    if (item.vipDays)   html += "<div class='price-item'><img src='../static/icons/vip.png'   alt='vipDays'><span>"   + escHtml(item.vipDays)   + "</span></div>";
                    if (item.greetings) html += "<div class='price-item'><img src='../static/icons/greet.png' alt='greetings'><span>" + escHtml(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 () {
        const combinedLoading = document.getElementById('combined-loading');
        const combinedContent = document.getElementById('combined-content');

        fetch('/api/item/fetch_price_data.php?id=60302')
            .then(r => r.json())
            .then(data => {
                // Populate globals consumed by trades.php, auctions.php and price_chart.php
                window.tradeData   = data.trades   ?? null;
                window.auctionData = data.auctions ?? null;

                window.hasTradeLogs   = !!(data.trades?.log_entries?.length);
                window.hasAuctionLogs = !!(data.auctions?.log_entries?.length);

                // Notify trades.php and auctions.php so they can render
                document.dispatchEvent(new CustomEvent('trade_data_loaded'));
                document.dispatchEvent(new CustomEvent('auction_data_loaded'));
                document.dispatchEvent(new CustomEvent('trade_logs_available',
                    { detail: { available: window.hasTradeLogs } }));
                document.dispatchEvent(new CustomEvent('auction_logs_available',
                    { detail: { available: window.hasAuctionLogs } }));

                // Render combined view
                combinedData = combineTradingData(window.auctionData, window.tradeData);

                const hasCombinedData = combinedData?.colors?.some(c => c.has_combined);
                window.hasCombinedLogs = !!(combinedData?.log_entries?.length);

                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.';
                }
            })
            .catch(err => {
                console.error('Error loading price data:', err);
                combinedLoading.textContent = 'Error loading price data.';
                // Dispatch empty events so dependent boxes don't stay in "Loading..." state
                document.dispatchEvent(new CustomEvent('trade_data_loaded'));
                document.dispatchEvent(new CustomEvent('auction_data_loaded'));
            });
    });

    /**
     * Standard median of a numeric array (sorts a copy).
     * @param {number[]} values
     * @returns {number|null}
     */
    function medianOf(values) {
        if (!values || !values.length) return null;
        const prices = values.slice().sort((a, b) => a - b);
        const count = prices.length;
        if (count % 2 === 0) {
            return Math.round((prices[(count / 2) - 1] + prices[count / 2]) / 2);
        }
        return prices[Math.floor(count / 2)];
    }

    /**
     * Merge trade + auction color stats into one card per UIID variant.
     * High/low come from source highs/lows. Median uses real log prices when
     * the log covers all transactions; otherwise falls back to the single-source
     * median or a count-weighted median of the two source medians.
     * (Previously high/low/median were stuffed into a fake price list — wrong.)
     *
     * @param {object|null} auctionData
     * @param {object|null} tradeData
     * @returns {object|null}
     */
    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();

        /**
         * @param {object} color
         * @param {'trade'|'auction'} source
         */
        function ingestColor(color, source) {
            const hasKey = source === 'trade' ? 'has_trades' : 'has_auctions';
            const countKey = source === 'trade' ? 'num_trades' : 'num_auctions';
            if (!color[hasKey]) return;

            const key = `${color.front_uiid || ''}|${color.back_uiid || ''}`;
            const uiidPrefix = (color.front_uiid || color.back_uiid || '').slice(0, 12);
            if (!colorMap.has(key)) {
                colorMap.set(key, {
                    color_hex: color.color_hex,
                    front_uiid: color.front_uiid,
                    back_uiid: color.back_uiid,
                    uiid_prefix: uiidPrefix,
                    last_sold: null,
                    trade_count: 0,
                    auction_count: 0,
                    trade_high: null,
                    trade_low: null,
                    trade_median: null,
                    auction_high: null,
                    auction_low: null,
                    auction_median: null,
                });
            }

            const colorData = colorMap.get(key);
            const count = parseInt(color[countKey], 10) || 0;
            if (source === 'trade') {
                colorData.trade_count = count;
                colorData.trade_high = color.high != null ? parseInt(color.high, 10) : null;
                colorData.trade_low = color.low != null ? parseInt(color.low, 10) : null;
                colorData.trade_median = color.median != null ? parseInt(color.median, 10) : null;
            } else {
                colorData.auction_count = count;
                colorData.auction_high = color.high != null ? parseInt(color.high, 10) : null;
                colorData.auction_low = color.low != null ? parseInt(color.low, 10) : null;
                colorData.auction_median = color.median != null ? parseInt(color.median, 10) : null;
            }

            if (color.last_sold && (!colorData.last_sold
                || new Date(color.last_sold) > new Date(colorData.last_sold))) {
                colorData.last_sold = color.last_sold;
            }

            combined.has_combined = true;
        }

        if (auctionData && auctionData.colors) {
            auctionData.colors.forEach((color) => ingestColor(color, 'auction'));
            if (auctionData.log_entries) {
                auctionData.log_entries.forEach((entry) => {
                    combined.log_entries.push({ ...entry, type: 'Auction' });
                });
            }
        }

        if (tradeData && tradeData.colors) {
            tradeData.colors.forEach((color) => ingestColor(color, 'trade'));
            if (tradeData.log_entries) {
                tradeData.log_entries.forEach((entry) => {
                    combined.log_entries.push({ ...entry, type: 'Trade' });
                });
            }
        }

        // Prices from logs, grouped by 12-char UIID (for true median when complete)
        const logPricesByPrefix = new Map();
        combined.log_entries.forEach((entry) => {
            const prefix = (entry.uiid || '').slice(0, 12);
            const price = parseInt(entry.display_price, 10);
            if (!prefix || Number.isNaN(price)) return;
            if (!logPricesByPrefix.has(prefix)) logPricesByPrefix.set(prefix, []);
            logPricesByPrefix.get(prefix).push(price);
        });

        colorMap.forEach((colorData) => {
            const totalTransactions = (colorData.trade_count || 0)
                + (colorData.auction_count || 0);
            if (totalTransactions <= 0) return;

            const highs = [colorData.trade_high, colorData.auction_high]
                .filter((v) => v != null && !Number.isNaN(v));
            const lows = [colorData.trade_low, colorData.auction_low]
                .filter((v) => v != null && !Number.isNaN(v));
            if (!highs.length || !lows.length) return;

            const prefix = colorData.uiid_prefix
                || (colorData.front_uiid || colorData.back_uiid || '').slice(0, 12);
            const logPrices = logPricesByPrefix.get(prefix) || [];

            let median = null;
            // Prefer real prices from logs when they cover every transaction
            if (logPrices.length >= totalTransactions) {
                median = medianOf(logPrices);
            } else if (colorData.trade_count > 0 && colorData.auction_count === 0) {
                median = colorData.trade_median;
            } else if (colorData.auction_count > 0 && colorData.trade_count === 0) {
                median = colorData.auction_median;
            } else {
                // Both sources, incomplete logs: count-weighted median of source medians
                const weighted = [];
                if (colorData.trade_median != null) {
                    for (let i = 0; i < colorData.trade_count; i++) {
                        weighted.push(colorData.trade_median);
                    }
                }
                if (colorData.auction_median != null) {
                    for (let i = 0; i < colorData.auction_count; i++) {
                        weighted.push(colorData.auction_median);
                    }
                }
                median = medianOf(weighted);
            }

            combined.colors.push({
                color_hex: colorData.color_hex,
                front_uiid: colorData.front_uiid,
                back_uiid: colorData.back_uiid,
                uiid_prefix: prefix,
                has_combined: true,
                high: Math.max(...highs),
                low: Math.min(...lows),
                median,
                num_combined: totalTransactions,
                last_sold: colorData.last_sold,
            });
        });

        combined.log_entries.sort((a, b) => {
            return new Date(b.timestamp) - new Date(a.timestamp);
        });

        // Fallback: log-only cards when color stats are missing (e.g. backlayer-only)
        if (combined.colors.length === 0 && combined.log_entries.length > 0) {
            const byPrefix = new Map();
            combined.log_entries.forEach((entry) => {
                const hex = entry.color;
                const prefix = (entry.uiid || '').slice(0, 12);
                if (!hex || !prefix) return;
                const price = parseInt(entry.display_price, 10);
                if (Number.isNaN(price)) return;
                if (!byPrefix.has(prefix)) {
                    byPrefix.set(prefix, {
                        color_hex: hex,
                        uiid_prefix: prefix,
                        uiid_sample: entry.uiid,
                        prices: [],
                    });
                }
                byPrefix.get(prefix).prices.push(price);
            });

            byPrefix.forEach((v) => {
                if (!v.prices.length) return;
                combined.colors.push({
                    color_hex: v.color_hex,
                    front_uiid: v.uiid_sample || null,
                    back_uiid: null,
                    uiid_prefix: v.uiid_prefix,
                    has_combined: true,
                    high: Math.max(...v.prices),
                    low: Math.min(...v.prices),
                    median: medianOf(v.prices),
                    num_combined: v.prices.length,
                    last_sold: null,
                });
            });
            combined.has_combined = combined.colors.length > 0;
        }

        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) {
            const colorLogs = data.log_entries
                ? data.log_entries.filter(e => (e.uiid || '').slice(0, 12) === color.uiid_prefix)
                : [];

            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" style="position:relative;">
                    <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>
                    ${colorLogs.length > 0 ? `<button
                        onclick="viewColorCombinedLog('${color.uiid_prefix}')"
                        title="Price history for this color"
                        style="position:absolute;bottom:4px;right:4px;background:none;border:none;cursor:pointer;padding:2px 4px;color:var(--gst-text-777,#777);font-size:14px;line-height:1;"
                    ><i class="bi bi-info-circle"></i></button>` : ''}
                </div>
            </div>`;
        }

        html += `</div>`;
        combinedContent.innerHTML = html;
    }

    /**
     * Show the combined log filtered to a single UIID prefix (front/back).
     * @param {string} uiidPrefix
     */
    function viewColorCombinedLog(uiidPrefix) {
        if (!combinedData) return;

        const entries = combinedData.log_entries.filter(e => (e.uiid || '').slice(0, 12) === uiidPrefix);
        let logHtml = entries.length
            ? '<div class="modern-log">' + entries.map(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>'
            : '<p>No price history found for this color.</p>';

        Swal.fire({
            title: 'Price History',
            html: logHtml,
            width: 650,
            padding: '2em',
            background: '#fff',
            draggable: true
        });
    }
    
    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
        });
    }
    
    // showTooltip, hideTooltip and reportSuspiciousPrice are defined in price_shared.php

</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 = '60302';
    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>
                const currentItemUiid = 'ETQarMDol7cW';
                
                function saveToRecentlyViewed(uiid) {
                    let recentlyViewed = JSON.parse(localStorage.getItem('recentlyViewed') || '[]');
                    
                    recentlyViewed = recentlyViewed.filter(item => item.uiid !== uiid);
                    
                    recentlyViewed.unshift({
                        uiid: uiid,
                        timestamp: Date.now()
                    });
                    
                    recentlyViewed = recentlyViewed.slice(0, 20);
                    
                    localStorage.setItem('recentlyViewed', JSON.stringify(recentlyViewed));
                }
                
                if (currentItemUiid && currentItemUiid.length >= 12) {
                    saveToRecentlyViewed(currentItemUiid);
                }
                
                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('.color-box[data-color-uiid]').forEach(colorBox => {
                        const uiid = colorBox.getAttribute('data-color-uiid');
                        if (owned.some(u => u.includes(uiid))) {
                            colorBox.classList.add('color-box-owned');
                        }
                    });
                    
                    if (typeof tippy !== 'undefined') {
                        tippy('.color-box-owned[data-tippy-content]', {
                            placement: 'right',
                            arrow: true
                        });
                    }

                    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;Item Relations:&lt;/b&gt; Andrea.P
                    &lt;/div&gt;">
                    <span>Thanks to:</span> Andrea.P
                </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>