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

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

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

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

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

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

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

                <div id="dark-mode-toggle" class="toggle-container">
                    <div class="toggle-switch">
                        <i class="bi bi-moon-fill moon-icon" style="font-size: 18px; color: #D9D9D9;"></i>
                        <i class="bi bi-sun-fill sun-icon" style="font-size: 18px; color: #606060;"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
        <div class="footer">    
    <div class="footer-links">
        <span><a href="/item/y15Fshk7zPJQegI9xdZQx">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 - Sales Manager</title>
<style>
    .header-container {
        width: 2000px;
        text-align: center;
    }

    .header-container h2 {
        font-size: 36px;
        font-weight: 700;
        margin: 0;
        padding: 20px;
    }

    #createShopButton,
    .createShopButton {
        padding: 10px 0;
        background-color: var(--gst-background-pink);
        color: #fff;
        border-radius: 25px;
        cursor: pointer;
        text-align: center;
        text-decoration: none;
        width: 210px;
        height: 30px;
        transition: all 0.3s;
        font-size: 14px;
        font-weight: 500;
        border: 1px solid var(--gst-border-pink);
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 15px;
        position: relative;
    }

    #createShopButton i,
    .createShopButton i,
    #createWishButton i,
    .createWishButton i {
        position: absolute;
        left: 20px;
        font-size: 16px;
    }

    #createWishButton,
    .createWishButton {
        padding: 10px 0;
        background-color: var(--gst-background-pink);
        color: #fff;
        border-radius: 25px;
        cursor: pointer;
        text-align: center;
        text-decoration: none;
        width: 210px;
        height: 30px;
        transition: all 0.3s;
        font-size: 14px;
        font-weight: 500;
        border: 1px solid var(--gst-border-pink);
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 15px;
        position: relative;
    }

    #createWishButton:hover,
    .createWishButton:hover,
    #createShopButton:hover,
    .createShopButton:hover {
        background-color: white;
        font-weight: 700;
        color: var(--gst-text-pink);
        border: 1px solid var(--gst-border-pink);
    }

    .button-container {
        width: 230px;
        left: 0;
        position: absolute;
        margin: 20px;
        margin-top: 115px;
    }

    #shops {
        margin-left: auto;
        margin-right: 0;
        width: 683px;
        padding: 25px;
        margin-top: 30px;
    }

    th,
    td {
        border: 1px solid var(--gst-border-pink-hover);
        padding: 8px;
        min-width: 90px;
    }

    th {
        background-color: var(--gst-background-pink-hover);
        color: #fff;
        font-size: 13px;
        font-weight: 700;
        height: 20px;
    }

    table {
        border-collapse: collapse;
        margin: 15px auto;
        margin-right: 0;
        margin-bottom: 35px;
    }

    tr {
        transition: background-color 0.2s ease;
    }

    tr:hover {
        background-color: var(--gst-background-F5F5F5);
    }

    .unstyled-link {
        text-decoration: none;
        color: var(--gst-body-fontcolor);
        transition: color 0.1s;
        font-weight: bold;
        word-wrap: anywhere;
    }

    .unstyled-link:hover {
        color: #999;
    }

    #items-container {
        display: flex;
        flex-wrap: wrap;
        max-width: 512px;
    }

    #tooltip {
        display: none;
        position: fixed;
        padding: 10px;
        background-color: #ccc;
        border-radius: 10px;
        z-index: 1000;
    }

    .tooltip-item {
        margin-bottom: 5px;
        margin: 2px;
        background-color: #818181;
        padding: 5px;
        border-radius: 8px;
        width: 50px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .tooltip-item img {
        max-width: 100%;
        max-height: 100%;
    }

    .pagination-button {
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .pagination-button a {
        padding: 3px 5px 0 5px;
        background-color: var(--gst-background-pink);
        color: var(--gst-text-white);
        border: none;
        cursor: pointer;
        transition: 0.2s;
        width: 40px;
        height: 26px;
        border-radius: 15px;
    }

    .pagination-button a:hover {
        background-color: var(--gst-background-pink-hover);
    }

    .pagination-button a img {
        filter: invert(100%);
        display: inline-block;
    }

    .searchBox {
        position: absolute;
        margin-left: 403px;
        display: flex;
        align-items: center;
        background-color: #fff;
        border-radius: 30px;
        width: 201px;
        border: 1px solid #C9C9C9;
        height: 27px;
    }

    .wish-butt {
        padding: 3px 5px 0 5px;
        background-color: var(--gst-background-pink);
        color: var(--gst-text-on-pink);
        border: none;
        cursor: pointer;
        transition: 0.2s;
        width: 140px;
        height: 29px;
        border-radius: 15px;
        font-size: 13px;
        font-weight: 700;
        text-align: center;
        margin-left: 630px;
        position: absolute;
    }

    .wish-butt:hover {
        background-color: var(--gst-background-pink-hover);
    }

    .searchboxinput {
        border: none;
        outline: none;
        flex-grow: 1;
        border-radius: 30px;
        font-size: 16px;
        color: #666;
        padding-left: 20px;
    }

    .but {
        background: none;
        border: none;
        cursor: pointer;
        padding: 0;
        margin-right: 7px;
    }

    .type {
        color: #8E8E8E;
        font-size: 16px;
        font-weight: 400;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .pagwrapper {
        margin-top: 25px;
    }
    
    .swal2-popup {
        font-family: 'Montserrat', sans-serif;
    }
    .swal2-title {
        color: #333;
    }
    .swal2-input, .swal2-textarea {
        border: 1px solid #7C7C7C !important;
        border-radius: 3px !important;
        font-family: 'Montserrat' !important;
        margin: 0.5em auto !important;
    }
    .swal2-checkbox {
        margin: 1em auto !important;
    }
</style>
<script>
    function createShop() {
        var isLoggedIn = false;
        
        if (!isLoggedIn) {
            Swal.fire({
                title: 'Login Required',
                text: 'You must be logged in to create a shop.',
                icon: 'warning',
                confirmButtonColor: 'var(--gst-background-pink)'
            });
            return;
        }
        
        Swal.fire({
            title: 'Create Shop',
            html: `
                <div style="margin-bottom:15px; background-color:var(--gst-background-lightgray); padding:15px; border-radius:8px; font-size:13px;">
                    <strong>NOTE:</strong> Inactive shops will be deleted after one month
                </div>
                <div style="padding:5px 0;">
                    <label for="shop_name" style="font-weight:600; display:block; margin-bottom:3px;">Shop Name</label>
                    <input id="shop_name" class="swal2-input" placeholder="My Shop" maxlength="60">
                    
                    <label for="shop_description" style="font-weight:600; display:block; margin:8px 0 3px 0;">Shop Description</label>
                    <textarea id="shop_description" class="swal2-textarea" rows="4" placeholder="Describe your shop..." maxlength="240" style="resize:none;"></textarea>
                    
                    <div>
                        <input type="checkbox" id="makeShopPublic" class="swal2-checkbox" checked>
                        <label for="makeShopPublic" style="margin-left:8px; cursor:pointer;">Make shop public</label>
                </div>
                </div>
            `,
            showCancelButton: true,
            confirmButtonText: 'Create Shop',
            cancelButtonText: 'Cancel',
            confirmButtonColor: '#5EBD73',
            cancelButtonColor: '#6c757d',
            focusConfirm: false,
            preConfirm: () => {
                const shop_name = Swal.getPopup().querySelector('#shop_name').value.trim();
                const shop_description = Swal.getPopup().querySelector('#shop_description').value.trim();
                const makeShopPublic = Swal.getPopup().querySelector('#makeShopPublic').checked;
                
                if (!shop_name || !shop_description) {
                    Swal.showValidationMessage('Please fill in all required fields');
                    return false;
                }
                
                return { shop_name, shop_description, makeShopPublic };
            }
        }).then((result) => {
            if (result.isConfirmed) {
                saveData(result.value, 'shop');
            }
        });
    }

    function createWishlist() {
        var isLoggedIn = false;
        
        if (!isLoggedIn) {
            Swal.fire({
                title: 'Login Required',
                text: 'You must be logged in to create a wishlist.',
                icon: 'warning',
                confirmButtonColor: 'var(--gst-background-pink)'
            });
            return;
        }
        
        Swal.fire({
            title: 'Create Wishlist',
            html: `
                <div style="margin-bottom:15px; background-color:var(--gst-background-lightgray); padding:15px; border-radius:8px; font-size:13px;">
                    <strong>NOTE:</strong> Inactive wishlists will be deleted after two months
        </div>
                <div style="padding:5px 0;">
                    <label for="wish_name" style="font-weight:600; display:block; margin-bottom:3px;">Wishlist Name</label>
                    <input id="wish_name" class="swal2-input" placeholder="My Wishlist" maxlength="60">
                    
                    <label for="wish_description" style="font-weight:600; display:block; margin:8px 0 3px 0;">Wishlist Description</label>
                    <textarea id="wish_description" class="swal2-textarea" rows="4" placeholder="Describe your wishlist..." maxlength="240" style="resize:none;"></textarea>
                    
                    <div>
                        <input type="checkbox" id="makeWishPublic" class="swal2-checkbox" checked>
                        <label for="makeWishPublic" style="margin-left:8px; cursor:pointer;">Make wishlist public</label>
            </div>
        </div>
            `,
            showCancelButton: true,
            confirmButtonText: 'Create Wishlist',
            cancelButtonText: 'Cancel',
            confirmButtonColor: '#5EBD73',
            cancelButtonColor: '#6c757d',
            focusConfirm: false,
            preConfirm: () => {
                const wish_name = Swal.getPopup().querySelector('#wish_name').value.trim();
                const wish_description = Swal.getPopup().querySelector('#wish_description').value.trim();
                const makeWishPublic = Swal.getPopup().querySelector('#makeWishPublic').checked;
                
                if (!wish_name || !wish_description) {
                    Swal.showValidationMessage('Please fill in all required fields');
                    return false;
                }
                
                return { wish_name, wish_description, makeWishPublic };
            }
        }).then((result) => {
            if (result.isConfirmed) {
                saveData(result.value, 'wish');
            }
        });
    }

    function saveData(data, type) {
        const isShop = type === 'shop';
        
        Swal.fire({
            title: isShop ? 'Creating Shop...' : 'Creating Wishlist...',
            allowOutsideClick: false,
            didOpen: () => {
                Swal.showLoading();
            }
        });
        
        const apiData = {
            id: 'new',
            table_type: type
        };
        
        if (isShop) {
            apiData.shop_name = data.shop_name;
            apiData.shop_description = data.shop_description;
            apiData.makeshopPublic = data.makeShopPublic;
                            } else {
            apiData.wish_name = data.wish_name;
            apiData.wish_description = data.wish_description;
            apiData.makeWishPublic = data.makeWishPublic;
        }
        
        fetch("../api/sale/save_item.php", {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(apiData)
        })
        .then(response => response.json())
        .then(response => {
            if (response.success) {
                Swal.fire({
                    icon: 'success',
                    title: isShop ? 'Shop Created!' : 'Wishlist Created!',
                    text: isShop ? 'Your shop has been successfully created.' : 'Your wishlist has been successfully created.',
                    confirmButtonColor: '#5EBD73',
                    allowOutsideClick: true
                }).then((result) => {
                    window.location.href = isShop ? 
                        `/sale/show.php?id=${response.id}` : 
                        `/sale/wish.php?id=${response.id}`;
                });
            } else {
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: response.message || 'An unknown error occurred',
                    confirmButtonColor: 'var(--gst-background-pink)'
                });
            }
        })
        .catch(error => {
            console.error("Error:", error);
            Swal.fire({
                icon: 'error',
                title: 'Error',
                text: 'A network error occurred. Please try again later.',
                confirmButtonColor: 'var(--gst-background-pink)'
            });
        });
    }

    function showTooltip(rowData) {
        var tooltip = document.getElementById('tooltip');
        var itemsContainer = document.getElementById('items-container');
        itemsContainer.innerHTML = '';

        if (rowData.items) {
            const items = JSON.parse(rowData.items ?? '[]');
            for (const key in items) {
                if (items[key] && !items[key].markAsSold) {
                    const itemDiv = document.createElement('div');
                    itemDiv.className = 'tooltip-item';
                    
                    let uiidToUse = null;
                    if (items[key].back_uiid && items[key].back_uiid !== 'null') {
                        uiidToUse = items[key].back_uiid;
                    } else if (items[key].front_uiid) {
                        uiidToUse = items[key].front_uiid;
                    }
                    
                    if (uiidToUse) {
                        const shortUiid = uiidToUse.substring(0, 12);
                        const img = document.createElement('img');
                        img.src = 'https://gosupermodel.com/item/' + shortUiid;
                        
                        itemDiv.appendChild(img);
                        itemsContainer.appendChild(itemDiv);
                    }
                }
            }
        }

        tooltip.style.display = 'block';
        updateTooltipPosition(event);
    }

    function hideTooltip() {
        var tooltip = document.getElementById('tooltip');
        tooltip.style.display = 'none';
    }

    function updateTooltipPosition(event) {
        var tooltip = document.getElementById('tooltip');
        tooltip.style.left = event.clientX - tooltip.clientWidth - 10 + 'px';
        tooltip.style.top = event.clientY - tooltip.clientHeight - 10 + 'px';
    }

    document.addEventListener('mousemove', function (event) {
        updateTooltipPosition(event);
    });
    
    document.addEventListener('DOMContentLoaded', function() {
        document.getElementById('createShopButton').addEventListener('click', createShop);
        document.getElementById('createWishButton').addEventListener('click', createWishlist);
    });
</script>
</head>

<body>
    <div class="column-container">
        <a href="/help/help.php?id=7"><div id="questionIcon">Help</div></a>        <div class="header-container">
            <h2>Sales Manager</h2>
        </div>
        <div class="button-container">
            <div id="createShopButton"><i class="bi bi-cart-fill"></i>Create Shop</div>
            <div id="createWishButton"><i class="bi bi-heart-fill"></i>Create Wishlist</div>
        </div>

        <div class="header-container" style="margin-top: -10px;"><div class="type">Shops</div></div><div class="pagwrapper"><div class="searchBox"><form method="GET" action="" style="display: flex; align-items: center;"><input class="searchboxinput" type="text" name="search" style="width: 145px;" placeholder="Shop Name" value=""><button type="submit" class="but" style="position: relative; width: 40px; display: flex; justify-content: flex-start; padding-left: 20px;"><i class="bi bi-search" style="font-size: 15px; font-weight: bold; color: var(--gst-text-555);"></i></button></form></div><a href="?page=23&wish=true" style=""><button class="wish-butt">Wishlists</button></a><div class="pagination-button" style="margin-left: 333px;"><a href="?page=22&search="><i class="bi bi-chevron-left" style="font-size: 20px; font-weight: bold; color: white;"></i></a></div><div class="pagination-button" style="margin-left: 263px;"><a href="?page=1&search="><i class="bi bi-chevron-double-left" style="font-size: 20px; font-weight: bold; color: white;"></i></a></div></div><div id="shops"><table><tr><th style="width: 360px;">Shop Name</th><th style="width: 150px;background-color: var(--gst-background-pink);">Date</th><th>Items</th></tr></table></div>
        <div id="tooltip" class="tooltip">
            <div id="items-container"></div>
        </div>

    </div>
</body>

</html>