<!--
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣀⡤⠴⠒⠒⠒⢒⡶⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣠⠞⠁⠀⠀⠀⠀⠀⡾⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡴⠁⠀⠀⠀⠀⠀⠀⠀⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⠞⠁⠀⢀⣀⣀⣀⡀⠀⠀⢧⠀⠀⠀⠀⠀⡴⣄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⢀⣰⠿⠒⠋⠉⠉⠀⠀⠀⠈⠉⠓⠾⢄⣀⠀⠀⢠⡇⠸⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⣩⠏⠉⠒⢒⣲⡤⠤⣀⣀⠀⠀⠀⠀⠀⠈⠑⢤⡘⡄⠀⢳⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣀⠀
⠀⠀⠀⠀⠀⢰⠾⣣⠴⠚⠉⠉⠀⠀⠀⠀⠀⠉⠓⠀⠀⠀⠀⠀⠀⠙⣧⠀⠀⢣⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣀⡤⣔⡿⡍⡇
⠀⠀⠀⠀⠀⢸⡼⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠘⠆⠀⠀⢳⡀⠀⠀⠀⠀⠀⣀⡤⠞⠋⣡⠞⠉⠀⣇⡇
⠀⠀⠀⠀⣴⠋⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⡠⠴⠒⠛⠓⠚⠉⠉⠉⠁⠀⣴⡟⠁⠀⠀⠀⣿⠁
⠀⠀⠀⣼⣁⣠⡤⢴⠖⠒⠒⠦⠤⢴⣶⣢⠤⠤⠔⠚⠃⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣞⡞⠀⠀⠀⠀⢰⢿⠀
⠀⠀⠀⠉⠉⢙⣦⠞⠀⡠⠞⠉⢉⡷⡄⠉⢙⡶⠃⠀⠀⠀⢀⣠⣦⣤⣄⡀⠀⠀⠀⠀⠀⠀⠀⠀⢀⡎⡼⠀⠀⠀⠀⠀⡜⡞⠀
⠀⠀⠀⣤⡖⠛⠀⠀⡜⠁⠀⡴⢋⣀⣹⣠⠋⠀⠀⠀⠀⣰⣿⠿⠛⠛⠿⣿⣷⣄⡀⠀⠀⠀⠀⠀⡼⢰⠃⠀⠀⠀⠀⡼⢱⠃⠀
⠀⢀⣴⠛⠀⠀⠀⢼⠁⠀⣼⢁⣿⡬⣿⠃⠀⠀⠀⠀⠐⠋⠁⠀⠀⠀⠀⠀⠙⢿⣷⣄⠀⠀⠀⣸⢃⡏⠀⠀⠀⢀⡜⢡⠏⠀⠀
⠀⠸⡿⠀⠀⠀⠀⢻⡀⠀⠀⠀⠉⢠⠇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⣿⠁⣀⡜⠁⡼⠀⠀⠀⡠⠋⣰⠋⠀⠀⠀
⠀⠀⣧⠀⠀⠀⠀⠈⢳⣀⣙⣦⡤⠋⠀⠀⠀⠀⠀⠀⠀⣰⠄⠀⠀⠀⠀⠀⠀⢤⠀⣹⠌⢩⠏⢠⣇⣠⠴⠊⢀⡼⠁⠀⠀⠀⠀
⠀⠀⠘⡆⢀⡴⠖⠋⠉⠉⠀⠀⠀⠀⠀⠀⠀⠘⢧⣤⣾⣷⣿⣿⣿⣷⣦⡀⠀⢸⠀⠻⣾⠉⠀⠀⠀⠀⢀⣠⠋⠀⠀⠀⠀⠀⠀
⠀⠀⢠⡟⣥⠤⠦⠤⠤⢤⣀⣀⠀⠀⠀⠀⠀⠀⠀⠉⠁⠀⠀⠉⠛⠿⣿⣿⣄⣸⠀⠈⠻⣇⠀⢀⣀⠤⠟⠓⠃⠀⠀⠀⠀⠀⠀
⠀⠀⠸⡆⢧⡀⠀⠀⠀⠀⠀⠈⠙⠲⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠉⠉⠁⠀⠀⠀⣸⡍⠉⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⢳⡄⠙⢦⡀⠀⠀⠀⣀⡤⠞⠁⠀⠀⠀⠀⢀⣀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣠⡿⠃⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠙⢦⣀⣉⣷⡚⠉⠀⠀⠀⠀⠀⠀⠀⢀⡾⠋⠀⠀⠀⠀⠀⠀⠀⠀⠀⣠⠼⣿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⣦⣴⠚⢁⡾⠋⠉⠳⢤⣀⢀⣀⣀⣠⠔⠋⠀⠀⠀⠀⠀⠀⣀⣠⠤⠖⠋⠁⢀⣺⣆⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⢰⣷⡇⠀⡞⠀⠀⠀⠀⠀⡼⠋⠉⠁⠀⠀⣀⣀⠤⠴⠒⠊⠉⠉⠀⠀⠀⠀⠀⣼⣿⠻⠃⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠈⢯⡛⢦⡀⠀⠀⠀⢀⡾⠥⠤⠔⠒⠊⠉⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠰⡆⣸⣹⠛⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⢠⡿⠀⢹⣶⣶⣖⡋⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠹⡟⠋⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⢀⡿⠿⠉⠉⠋⠀⠀⠉⠙⠶⣄⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢠⡀⠹⢤⣀⣀⣀⣀⣀⡠⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⡰⠋⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠉⠢⣄⠀⠀⠀⡀⠀⠀⠀⠀⠀⠀⠀⣼⠇⠀⠀⠀⠀⠀⠙⠋⠩⠿⢿⣁⠀⠀⠀⠀⠀⠀
⡼⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠳⡄⠀⠉⠑⠶⢤⣀⣀⣠⣴⡟⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠘⠿⣅⠀⠀⠀⠀⠀
⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⠂⠀⠀⠀⠀⠀⠉⠉⠉⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⢦⠀⠀⠀⠀
⡅⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡇⠀⠀⠀
⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣇⠀⠀⠀
⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠉⠀⠀⠀
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_halloween_by_peasley.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/kafYcjct8r6cNZRlXdAPB">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 - ✧ villicola&#039;s hair shop ✧</title>
<link rel="stylesheet" href="shop.css">
<style>
.swal2-btn-success {
    background-color: #4CAF50 !important;
}
.swal2-btn-danger {
    background-color: #d33 !important;
    border-radius: 15px !important;
}
.swal2-btn-secondary {
    background-color: #6c757d !important;
}
.item-edit-popup .swal2-html-container {
    margin: 0.5em 1em;
}
.swal2-title {
    font-size: 1.5em !important;
}
.swal2-html-container {
    font-size: 13px !important;
}
.swal2-popup input, .swal2-popup textarea, .swal2-popup label, .swal2-popup select {
    font-size: 13px !important;
}
.swal2-confirm, .swal2-cancel, .swal2-deny {
    font-size: 14px !important;
}
</style>
<script>
const shop = {
    openEditPopup(i=null) {
        const shopData = {"name":"\u2727 villicola&#039;s hair shop \u2727","desc":"hair items from different gopacks and events. just send me trade for the item\/s you want!","public":"1"};
        
        if (i === null) {
            Swal.fire({
                title: 'Edit Shop',
                html: `
                    <div style="text-align:left;padding:5px 10px">
                        <label for="n" style="font-weight:600;margin-bottom:3px;display:block">Shop Name</label>
                        <input id="n" class="swal2-input" value="${shopData.name}" maxlength="60" style="width:100%;margin:5px 0 10px 0;padding:6px;border-radius:6px;border:1px solid #ddd">
                        
                        <label for="d" style="font-weight:600;margin-bottom:3px;display:block">Description</label>
                        <textarea id="d" class="swal2-textarea" rows="3" maxlength="240" style="width:100%;margin:5px 0;padding:6px;border-radius:6px;border:1px solid #ddd;resize:none">${shopData.desc}</textarea>
                        
                        <div style="display:flex;align-items:center;margin-top:10px">
                            <input type="checkbox" id="p" ${shopData.public == 1 ? 'checked' : ''} style="margin-right:6px;width:14px;height:14px">
                            <label for="p" style="margin:0;cursor:pointer;font-size:12px">Make Shop Public</label>
                    </div>
                </div>
                    <div style="font-size:11px;margin-top:10px;background:#f8f9fa;padding:6px;border-radius:6px;color:#666">
                        <b>NOTE:</b> Inactive shops will be deleted after one month
                </div>
                `,
                background: '#ffffff',
                showCancelButton: true,
                confirmButtonText: 'Save Changes',
                cancelButtonText: 'Cancel',
                showDenyButton: true,
                denyButtonText: 'Delete Shop',
                denyButtonColor: '#d33',
                confirmButtonColor: '#4CAF50',
                cancelButtonColor: '#6c757d',
                focusConfirm: false,
                customClass: {
                    confirmButton: 'swal2-btn-success',
                    cancelButton: 'swal2-btn-secondary',
                    denyButton: 'swal2-btn-danger'
                },
                preConfirm: () => ({
                    shop_name: document.getElementById('n').value.trim(),
                    shop_description: document.getElementById('d').value.trim(),
                    makeshopPublic: document.getElementById('p').checked
                })
            }).then(r => {
                if (r.isConfirmed) this.saveShop(r.value);
                if (r.isDenied) this.deleteShop();
            });
    } else {
            const itemData = this.getItemData(i);
            Swal.fire({
                title: `Edit Item ${i}`,
                width: 420,
                html: `
                    <div style="text-align:left;padding:5px 0">
                        <label for="link" style="font-weight:600;margin-bottom:5px;display:block">Item Link</label>
                        <input id="link" class="swal2-input" value="${itemData.itemLink || ''}" 
                          placeholder="https://gosupermodel.com/item/s__4Y209KSmz" 
                          oninput="shop.updatePreview(this)" 
                          style="width:100%;margin:5px 0;border-radius:6px;border:1px solid #ddd">
                        
                        <div id="preview" style="margin:12px 0;min-height:90px;display:flex;justify-content:center;align-items:center;background:#f8f9fa;border-radius:8px"></div>
                        
                        <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0;">
                            <div>
                                <label for="gm" style="font-weight:600;margin-bottom:3px;display:block">goMoney</label>
                                <div style="display:flex;align-items:center">
                                    <img src="../static/icons/money.png" style="width:16px;height:16px;margin-right:5px">
                                    <input id="gm" class="swal2-input" style="flex:1;margin:0;padding:3px;height:24px;border-radius:4px;border:1px solid #ddd;font-size:12px;width:50%" 
                                      oninput="this.value=this.value.replace(/[^0-9]/g,'')" value="${itemData.goMoney || ''}" maxlength="7">
                </div>
                    </div>
                            <div>
                                <label for="dia" style="font-weight:600;margin-bottom:3px;display:block">Diamonds</label>
                                <div style="display:flex;align-items:center">
                                    <img src="../static/icons/dia.png" style="width:16px;height:16px;margin-right:5px">
                                    <input id="dia" class="swal2-input" style="flex:1;margin:0;padding:3px;height:24px;border-radius:4px;border:1px solid #ddd;font-size:12px;width:50%" 
                                      oninput="this.value=this.value.replace(/[^0-9]/g,'')" value="${itemData.diamonds || ''}" maxlength="6">
                    </div>
                    </div>
                            <div>
                                <label for="vip" style="font-weight:600;margin-bottom:3px;display:block">VIP days</label>
                                <div style="display:flex;align-items:center">
                                    <img src="../static/icons/vip.png" style="width:16px;height:16px;margin-right:5px">
                                    <input id="vip" class="swal2-input" style="flex:1;margin:0;padding:3px;height:24px;border-radius:4px;border:1px solid #ddd;font-size:12px;width:50%" 
                                      oninput="this.value=this.value.replace(/[^0-9]/g,'')" value="${itemData.vipDays || ''}" maxlength="6">
                    </div>
                </div>
                            <div>
                                <label for="greet" style="font-weight:600;margin-bottom:3px;display:block">Greetings</label>
                                <div style="display:flex;align-items:center">
                                    <img src="../static/icons/greet.png" style="width:16px;height:16px;margin-right:5px">
                                    <input id="greet" class="swal2-input" style="flex:1;margin:0;padding:3px;height:24px;border-radius:4px;border:1px solid #ddd;font-size:12px;width:50%" 
                                      oninput="this.value=this.value.replace(/[^0-9]/g,'')" value="${itemData.greetings || ''}" maxlength="6">
                    </div>
                    </div>
                </div>
                        
                        <div style="display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:10px;background:#f8f9fa;padding:8px;border-radius:6px;color:#333333;">
                            <div style="display:flex;align-items:center">
                                <input type="checkbox" id="off" ${itemData.makeAnOffer?'checked':''} style="margin-right:6px;width:14px;height:14px">
                                <label for="off" style="margin:0;cursor:pointer;font-size:12px">Make an Offer</label>
                    </div>
                            <div style="display:flex;align-items:center">
                                <input type="checkbox" id="sold" ${itemData.markAsSold?'checked':''} style="margin-right:6px;width:14px;height:14px">
                                <label for="sold" style="margin:0;cursor:pointer;font-size:12px">Mark as Sold</label>
                    </div>
                            <div style="display:flex;align-items:center">
                                <input type="checkbox" id="res" ${itemData.reserved?'checked':''} style="margin-right:6px;width:14px;height:14px">
                                <label for="res" style="margin:0;cursor:pointer;font-size:12px">Reserved</label>
                </div>
                            <div style="display:flex;align-items:center">
                                <input type="checkbox" id="both" ${itemData.bothlayer?'checked':''} style="margin-right:6px;width:14px;height:14px">
                                <label for="both" style="margin:0;cursor:pointer;font-size:12px">Include Backlayer</label>
                </div>
            </div>
        </div>
                `,
                background: '#ffffff',
                showCancelButton: true,
                confirmButtonText: 'Save Item',
                cancelButtonText: 'Cancel',
                showDenyButton: true,
                denyButtonText: 'Clear Item',
                denyButtonColor: '#d33',
                confirmButtonColor: '#4CAF50',
                cancelButtonColor: '#6c757d',
                focusConfirm: false,
                customClass: {
                    confirmButton: 'swal2-btn-success',
                    cancelButton: 'swal2-btn-secondary',
                    denyButton: 'swal2-btn-danger',
                    container: 'item-edit-popup'
                },
                didOpen: () => this.updatePreview(document.getElementById('link')),
                preConfirm: () => {
                    const itemLink = document.getElementById('link').value.trim();
                    
                    if (itemLink && !this.validateItemLink(itemLink)) {
                        Swal.showValidationMessage('Item link must start with "https://gosupermodel.com/item/" or "https://gosuper.tools/item/"');
                        return false;
                    }
                    
                    return {
                        itemLink: itemLink,
                        goMoney: document.getElementById('gm').value.trim(),
                        diamonds: document.getElementById('dia').value.trim(),
                        vipDays: document.getElementById('vip').value.trim(),
                        greetings: document.getElementById('greet').value.trim(),
                        makeAnOffer: document.getElementById('off').checked,
                        markAsSold: document.getElementById('sold').checked,
                        reserved: document.getElementById('res').checked,
                        bothlayer: document.getElementById('both').checked
                    };
                }
            }).then(r => {
                if (r.isConfirmed) this.saveItem(i, r.value);
                if (r.isDenied) this.clearItem(i);
            });
        }
    },
    
    updatePreview(input) {
        const prev = document.getElementById('preview');
        const url = input.value.trim();
        const match = url.match(/\/item\/([a-zA-Z0-9_\-]{12})/);
        const code = match ? match[1] : '';
        
        prev.innerHTML = '';
        prev.className = 'preview-container';
        
        if (!code) {
            prev.innerHTML = '<div class="preview-empty">Enter item link</div>';
            return;
        }
        
        const mediaContainer = document.createElement('div');
        mediaContainer.className = 'media-container';
        prev.appendChild(mediaContainer);
        
        const img = document.createElement('img');
        img.src = `https://gosupermodel.com/item/${code}`;
        img.className = 'preview-image';
        mediaContainer.appendChild(img);
        
        const btnContainer = document.createElement('div');
        btnContainer.className = 'button-container';
        mediaContainer.appendChild(btnContainer);
        
        const openBtn = document.createElement('a');
        openBtn.href = `../item/${code}`;
        openBtn.target = '_blank';
        openBtn.className = 'item-action-btn';
        openBtn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" fill="white"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h560v-280h80v280q0 33-23.5 56.5T760-120H200Zm188-212-56-56 372-372H560v-80h280v280h-80v-144L388-332Z"/></svg> Open Item';
        btnContainer.appendChild(openBtn);
        
        const priceEstimate = document.createElement('div');
        priceEstimate.id = 'price-estimate';
        priceEstimate.className = 'price-estimate';
        priceEstimate.innerHTML = '<div class="price-estimate-loading">Fetching price data...</div>';
        prev.appendChild(priceEstimate);
        
        fetch(`../api/sale/get_price_estimate.php?uiid=${code}`)
            .then(response => response.json())
            .then(data => {
                if (!data.success) {
                    priceEstimate.innerHTML = '<div class="price-estimate-loading">Error fetching price data</div>';
                    return;
                }
                
                if (!data.has_data) {
                    priceEstimate.innerHTML = '<div class="price-estimate-loading">No price data available</div>';
                    return;
                }
                
                const priceData = data.data;
                
                const medianBtn = document.createElement('button');
                medianBtn.type = 'button';
                medianBtn.className = 'item-action-btn median-btn';
                medianBtn.innerHTML = `<img src="../static/icons/money.png" class="currency-icon"> Use Median (${priceData.median})`;
                medianBtn.addEventListener('click', () => {
                    const goMoney = document.getElementById('gm');
                    if (goMoney) {
                        goMoney.value = priceData.median;
                        medianBtn.textContent = 'Applied!';
                        setTimeout(() => {
                            medianBtn.innerHTML = `<img src="../static/icons/money.png" class="currency-icon"> Use Median (${priceData.median})`;
                        }, 1000);
                    }
                });
                btnContainer.appendChild(medianBtn);
                
                if (priceData.count === 1) {
                    priceEstimate.innerHTML = `
                        <div class="price-estimate-header">
                            <span>Price estimate</span>
                            <span class="price-sale-count">1 sale</span>
                        </div>
                        
                        <div class="price-single-value">
                            <img src="../static/icons/money.png" class="currency-icon">${priceData.median}
                        </div>
                    `;
                } else {
                    const range = priceData.p90 - priceData.p10;
                    const medianPos = Math.max(0, Math.min(100, ((priceData.median - priceData.p10) / range) * 100));
                    
                    priceEstimate.innerHTML = `
                        <div class="price-estimate-header">
                            <span>Price estimate</span>
                            <span class="price-sale-count">${priceData.count} sales</span>
                        </div>
                        
                        <div class="price-range-bar">
                            <div class="price-median-marker" style="left:${medianPos}%;"></div>
                            <div class="price-median" style="left:${medianPos}%;" title="Median price"><img src="../static/icons/money.png" class="currency-icon">${priceData.median}</div>
                            <div class="price-range-values">
                                <div class="price-p10" title="10th percentile"><img src="../static/icons/money.png" class="currency-icon">${priceData.p10}</div>
                                <div class="price-p90" title="90th percentile"><img src="../static/icons/money.png" class="currency-icon">${priceData.p90}</div>
                            </div>
                        </div>
                    `;
                }
            })
            .catch(error => {
                console.error('Error fetching price estimate:', error);
                priceEstimate.innerHTML = '<div class="price-estimate-loading">Error fetching price data</div>';
            });
    },
    
    validateItemLink(link) {
        if (!link) return true;
        
        const validPrefixes = [
            'https://gosupermodel.com/item/',
            'https://gosuper.tools/item/'
        ];
        
        for (const prefix of validPrefixes) {
            if (link.startsWith(prefix)) return true;
        }
        
        return false;
    },
    
    getItemData(num) {
        const items = {"1":{"goMoney":"1500","diamonds":"","vipDays":"","greetings":"","makeAnOffer":false,"markAsSold":false,"reserved":false,"bothlayer":false,"front_uiid":"vxFm5rhupVtHVGv4ZndNs","back_uiid":"szUDmu-lyrKBuMetRIs2h"},"2":{"goMoney":"100","diamonds":"","vipDays":"","greetings":"","makeAnOffer":false,"markAsSold":false,"reserved":false,"bothlayer":false,"front_uiid":"8ZvIz68_MSHPIi3vGuCAt","back_uiid":null},"3":{"goMoney":"3000","diamonds":"","vipDays":"","greetings":"","makeAnOffer":true,"markAsSold":false,"reserved":false,"bothlayer":false,"front_uiid":"4sFRqPO-OG8JwF9oAfxoR","back_uiid":"uwPIP9H-vgMKhGIM0OkNp"}};
        const defaultItem = {
            itemLink:'', goMoney:'', diamonds:'', vipDays:'', greetings:'',
            makeAnOffer:false, markAsSold:false, reserved:false, bothlayer:false
        };
        
        if (!items[num]) return defaultItem;
        
        const item = items[num];
        
        if (!item.itemLink) {
            if (item.back_uiid && item.back_uiid !== 'null') {
                item.itemLink = 'https://gosupermodel.com/item/' + item.back_uiid.substr(0, 12);
            } else if (item.front_uiid) {
                item.itemLink = 'https://gosupermodel.com/item/' + item.front_uiid.substr(0, 12);
            }
        }
        
        return item;
    },
    
    saveShop(data) {
        if (!data.shop_name || !data.shop_description) {
            return Swal.fire({icon:'error', text:'Please fill in all required fields'});
        }

        Swal.showLoading();
        fetch("../api/sale/save_item.php", {
            method: 'POST',
            headers: {'Content-Type':'application/json'},
            body: JSON.stringify({
                id: 1715,
                shop_name: data.shop_name,
                shop_description: data.shop_description,
                makeshopPublic: data.makeshopPublic
            })
        })
        .then(r => r.json())
        .then(response => {
            if (!response.success) {
                Swal.fire({icon:'error', text:response.message});
        } else {
                Swal.fire({
                    icon: 'success',
                    title: 'Shop saved!',
                    showConfirmButton: false,
                    timer: 1200,
                    timerProgressBar: true,
                    willClose: () => {
                        location.reload();
        }
    });
}
        })
        .catch(() => Swal.fire({icon:'error', text:'An error occurred'}));
    },
    
    deleteShop() {
        Swal.fire({
            title: 'Delete shop?',
            icon: 'warning',
            text: 'This will permanently delete your shop and all its items. This action cannot be undone.',
            showCancelButton: true,
            confirmButtonText: 'Yes, delete it',
            cancelButtonText: 'Cancel',
            cancelButtonColor: '#6c757d',
            confirmButtonColor: '#d33',
            focusCancel: true
        }).then(r => {
            if (r.isConfirmed) {
                Swal.showLoading();
                fetch("../api/sale/save_item.php", {
                    method: 'POST',
                    headers: {'Content-Type':'application/json'},
                    body: JSON.stringify({id:1715, delete:true})
                })
                .then(r => r.json())
                .then(response => {
                    if (!response.success) {
                        Swal.fire({icon:'error', text:response.message});
                    } else {
                        window.location.href = "/sale/";
                    }
                })
                .catch(() => Swal.fire({icon:'error', text:'An error occurred'}));
            }
        });
    },
    
    saveItem(num, data) {
        Swal.showLoading();
    fetch('../api/sale/save_item.php', {
        method: 'POST',
            headers: {'Content-Type':'application/json'},
            body: JSON.stringify({
                id: 1715,
                item_number: num,
                item_data: data
            })
        })
        .then(r => r.json())
        .then(response => {
            if (response.success) {
                Swal.fire({
                    icon: 'success',
                    title: 'Item saved!',
                    showConfirmButton: false,
                    timer: 1200,
                    timerProgressBar: true,
                    willClose: () => {
            location.reload();
                    }
                });
        } else {
                Swal.fire({icon:'error', text:response.message});
            }
        })
        .catch(() => Swal.fire({icon:'error', text:'An error occurred'}));
    },
    
    clearItem(num) {
        Swal.fire({
            title: 'Clear this item?',
            text: 'This will remove all data for this item slot. This action cannot be undone.',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Yes, clear it',
            cancelButtonText: 'Cancel',
            cancelButtonColor: '#6c757d',
            confirmButtonColor: '#d33',
            focusCancel: true
        }).then(r => {
            if (r.isConfirmed) {
                this.saveItem(num, {
                    itemLink:'', goMoney:'', diamonds:'', vipDays:'', greetings:'',
                    makeAnOffer:false, markAsSold:false, reserved:false, bothlayer:false
                });
            }
        });
    },
    
    findEmptySlot() {
        const items = {"1":{"goMoney":"1500","diamonds":"","vipDays":"","greetings":"","makeAnOffer":false,"markAsSold":false,"reserved":false,"bothlayer":false,"front_uiid":"vxFm5rhupVtHVGv4ZndNs","back_uiid":"szUDmu-lyrKBuMetRIs2h"},"2":{"goMoney":"100","diamonds":"","vipDays":"","greetings":"","makeAnOffer":false,"markAsSold":false,"reserved":false,"bothlayer":false,"front_uiid":"8ZvIz68_MSHPIi3vGuCAt","back_uiid":null},"3":{"goMoney":"3000","diamonds":"","vipDays":"","greetings":"","makeAnOffer":true,"markAsSold":false,"reserved":false,"bothlayer":false,"front_uiid":"4sFRqPO-OG8JwF9oAfxoR","back_uiid":"uwPIP9H-vgMKhGIM0OkNp"}};
        
        let nextSlot = 1;
        const maxItems = 100;
        
        while (items[nextSlot] && nextSlot <= maxItems) {
            nextSlot++;
        }
        
        if (nextSlot > maxItems) {
            Swal.fire({
                icon: 'error',
                title: 'Maximum Items Reached',
                text: 'You have reached the maximum limit of ' + maxItems + ' items per shop.'
            });
            return;
        }
        
        this.openEditPopup(nextSlot);
    },
    
    redirectToItem(link) {
        window.open("../item/" + link.split('/').pop(), '_blank');
    },
    
    tryItOn(primaryLink, secondaryLink) {
        const uiid = primaryLink.split('/').pop();
        window.open("https://gosupermodel.com/shopping/inventory.jsp?context=0&uiids=" + uiid, '_blank');
    },
    
    showImage(e, url) {
        const box = document.createElement('div');
        box.className = 'gray-box';
        box.style = 'position:fixed;z-index:1000;padding:20px;background:#ccc;border-radius:10px;';
        
        const img = document.createElement('img');
        img.src = url;
        img.style = 'max-width:100%;max-height:100%';
        box.appendChild(img);
        document.body.appendChild(box);
        
        const updatePos = evt => {
            box.style.top = `${evt.clientY+10}px`;
            box.style.left = `${evt.clientX+10}px`;
        };
        
        updatePos(e);
        document.addEventListener('mousemove', updatePos);
        e.target.addEventListener('mouseout', () => {
            document.removeEventListener('mousemove', updatePos);
            box.remove();
        });
    },
    
    init() {
        tippy('[data-tippy-content]');
        
        const owned = JSON.parse(localStorage.getItem('loggedUiids') || '[]');
        document.querySelectorAll('.owned-span').forEach(s => {
            if (owned.some(u => u.includes(s.id.replace('owned-', '')))) {
                s.classList.remove('hidden');
            }
        });
        
        const categoryData = [{"uiid":"vxFm5rhupVtH","tags":"Competition Item","hex":"#CD5151"},{"uiid":"8ZvIz68_MSHP","tags":"goPack Item","hex":"#78AFC1"},{"uiid":"4sFRqPO-OG8J","tags":"goPack Item","hex":"#78AFC1"}];
        
        const categoriesByUiid = {};
        categoryData.forEach(item => {
            if (!categoriesByUiid[item.uiid]) {
                categoriesByUiid[item.uiid] = [];
            }
            categoriesByUiid[item.uiid].push({
                tags: item.tags,
                hex: item.hex
            });
        });
        
        document.querySelectorAll('.tagcontainer').forEach(container => {
            const uiid = container.getAttribute('data-uiid');
            if (uiid && categoriesByUiid[uiid] && categoriesByUiid[uiid].length > 0) {
                const categoryInfo = categoriesByUiid[uiid][0];
                let tags = categoryInfo.tags;
                
                switch (tags) {
                    case 'Premium Advent Calendar 2023': tags = 'Pr. Adv. Calendar 2023'; break;
                    case 'Premium Advent Calendar 2024': tags = 'Pr. Adv. Calendar 2024'; break;
                    case 'Premium Refreshment 2023': tags = 'Pr. Refreshment 2023'; break;
                    case 'Premium Refreshment 2024': tags = 'Pr. Refreshment 2024'; break;
                    case 'Premium Refreshment 2025': tags = 'Pr. Refreshment 2025'; break;
                }
                
                container.innerHTML = tags;
                container.style.backgroundColor = categoryInfo.hex || '#CC934F';
            }
        });
    }
};

document.addEventListener("DOMContentLoaded", () => shop.init());
</script>
</head>

<body>
<div class="column-container">
<a href="/help/help.php?id=8"><div id="questionIcon">Help</div></a>     

        
    <div class='shop-info'>
    <div class='modelBox'><img src='https://gosupermodel.com/dollservlet.png?model=33656&large=1' ></div><h3 style='margin-left:80px;'>✧ villicola&#039;s hair shop ✧</h3><p><a style='margin-left:80px;color:var(--gst-text-555);' href='/profile/?id=152'>by villicola</a> <a href='https://gosupermodel.com/profiles/?id=33656' target='_blank' class='gsm-visit-btn'>
                <i class="bi bi-box-arrow-up-right" style="font-size: 15px; font-weight: bold; color: white; margin-right: 8px; vertical-align: middle;"></i>Visit on GSM</a></p>    </div>
    
    <div class='last-updated-info'>
        <p><strong>Last Updated:</strong> 19 October 2025, 14:05</p>
    </div>
    
    <div class='visitorBox' data-tippy-content='Shop Visits'>
        <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;font-weight:bold;'>1053</div>
    </div>
    
    <div class='shopdesc-info'>
        <p>hair items from different gopacks and events. just send me trade for the item/s you want!</p>
    </div>

    <div class='items-info'>
    <div class='sales-box'><div class='sales-box-head'><div id='owned-vxFm5rhupVtH' class='owned-span hidden'><i class='bi bi-check-lg' style='font-size: 20px; font-weight: bold; color: #5EBD73;' data-tippy-content='You own this item'></i></div><div class='number'><svg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='var(--gst-text-pink)'><path d='M856-390 570-104q-12 12-27 18t-30 6q-15 0-30-6t-27-18L103-457q-11-11-17-25.5T80-513v-287q0-33 23.5-56.5T160-880h287q16 0 31 6.5t26 17.5l352 353q12 12 17.5 27t5.5 30q0 15-5.5 29.5T856-390ZM260-640q25 0 42.5-17.5T320-700q0-25-17.5-42.5T260-760q-25 0-42.5 17.5T200-700q0 25 17.5 42.5T260-640Z'/></svg><h4>Item 1</h4></div></div><div class='mannequin-wrapper'><div class='mannequin-container' data-uiid='vxFm5rhupVtH' onmouseover='shop.showImage(event, "https://gosupermodel.com/item/szUDmu-lyrKB")' onclick='shop.redirectToItem("https://gosupermodel.com/item/szUDmu-lyrKB")'><img class='back-image' src='https://gosupermodel.com/item/szUDmu-lyrKB' alt='Image'><div class='try-it-on-button' onclick='shop.tryItOn("https://gosupermodel.com/item/szUDmu-lyrKB", null); event.stopPropagation();'><svg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24'><path d='M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h560v-280h80v280q0 33-23.5 56.5T760-120H200Zm188-212-56-56 372-372H560v-80h280v280h-80v-144L388-332Z'/></svg> Try on!</div></div></div><div class='tagwrapper'><div class='tagcontainer' data-uiid='vxFm5rhupVtH'></div></div><div class='currency'><p title='goMoney'><strong><img src='../static/icons/money.png'></strong> 1500</p><p title='Diamonds'><strong><img src='../static/icons/dia.png'></strong> <span style="color:#ADADAD">---</span></p><p title='VIP days'><strong><img src='../static/icons/vip.png'></strong> <span style="color:#ADADAD">---</span></p><p title='Greetings'><strong><img src='../static/icons/greet.png'></strong> <span style="color:#ADADAD">---</span></p></div></div><div class='sales-box'><div class='sales-box-head'><div id='owned-8ZvIz68_MSHP' class='owned-span hidden'><i class='bi bi-check-lg' style='font-size: 20px; font-weight: bold; color: #5EBD73;' data-tippy-content='You own this item'></i></div><div class='number'><svg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='var(--gst-text-pink)'><path d='M856-390 570-104q-12 12-27 18t-30 6q-15 0-30-6t-27-18L103-457q-11-11-17-25.5T80-513v-287q0-33 23.5-56.5T160-880h287q16 0 31 6.5t26 17.5l352 353q12 12 17.5 27t5.5 30q0 15-5.5 29.5T856-390ZM260-640q25 0 42.5-17.5T320-700q0-25-17.5-42.5T260-760q-25 0-42.5 17.5T200-700q0 25 17.5 42.5T260-640Z'/></svg><h4>Item 2</h4></div></div><div class='mannequin-wrapper'><div class='mannequin-container' data-uiid='8ZvIz68_MSHP' onmouseover='shop.showImage(event, "https://gosupermodel.com/item/8ZvIz68_MSHP")' onclick='shop.redirectToItem("https://gosupermodel.com/item/8ZvIz68_MSHP")'><img class='generated-image' src='https://gosupermodel.com/item/8ZvIz68_MSHP' alt='Image'><div class='try-it-on-button' onclick='shop.tryItOn("https://gosupermodel.com/item/8ZvIz68_MSHP", null); event.stopPropagation();'><svg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24'><path d='M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h560v-280h80v280q0 33-23.5 56.5T760-120H200Zm188-212-56-56 372-372H560v-80h280v280h-80v-144L388-332Z'/></svg> Try on!</div></div></div><div class='tagwrapper'><div class='tagcontainer' data-uiid='8ZvIz68_MSHP'></div></div><div class='currency'><p title='goMoney'><strong><img src='../static/icons/money.png'></strong> 100</p><p title='Diamonds'><strong><img src='../static/icons/dia.png'></strong> <span style="color:#ADADAD">---</span></p><p title='VIP days'><strong><img src='../static/icons/vip.png'></strong> <span style="color:#ADADAD">---</span></p><p title='Greetings'><strong><img src='../static/icons/greet.png'></strong> <span style="color:#ADADAD">---</span></p></div></div><div class='sales-box'><div class='sales-box-head'><div id='owned-4sFRqPO-OG8J' class='owned-span hidden'><i class='bi bi-check-lg' style='font-size: 20px; font-weight: bold; color: #5EBD73;' data-tippy-content='You own this item'></i></div><div class='number'><svg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='var(--gst-text-pink)'><path d='M856-390 570-104q-12 12-27 18t-30 6q-15 0-30-6t-27-18L103-457q-11-11-17-25.5T80-513v-287q0-33 23.5-56.5T160-880h287q16 0 31 6.5t26 17.5l352 353q12 12 17.5 27t5.5 30q0 15-5.5 29.5T856-390ZM260-640q25 0 42.5-17.5T320-700q0-25-17.5-42.5T260-760q-25 0-42.5 17.5T200-700q0 25 17.5 42.5T260-640Z'/></svg><h4>Item 3</h4></div></div><div class='mannequin-wrapper'><div class='mannequin-container' data-uiid='4sFRqPO-OG8J' onmouseover='shop.showImage(event, "https://gosupermodel.com/item/uwPIP9H-vgMK")' onclick='shop.redirectToItem("https://gosupermodel.com/item/uwPIP9H-vgMK")'><img class='back-image' src='https://gosupermodel.com/item/uwPIP9H-vgMK' alt='Image'><div class='try-it-on-button' onclick='shop.tryItOn("https://gosupermodel.com/item/uwPIP9H-vgMK", null); event.stopPropagation();'><svg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24'><path d='M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h560v-280h80v280q0 33-23.5 56.5T760-120H200Zm188-212-56-56 372-372H560v-80h280v280h-80v-144L388-332Z'/></svg> Try on!</div></div></div><div class='tagwrapper'><div class='tagcontainer' data-uiid='4sFRqPO-OG8J'></div></div><div class='currency'><p title='goMoney'><strong><img src='../static/icons/money.png'></strong> 3000</p><p title='Diamonds'><strong><img src='../static/icons/dia.png'></strong> <span style="color:#ADADAD">---</span></p><p title='VIP days'><strong><img src='../static/icons/vip.png'></strong> <span style="color:#ADADAD">---</span></p><p title='Greetings'><strong><img src='../static/icons/greet.png'></strong> <span style="color:#ADADAD">---</span></p></div><p style='text-align:center;font-size:12px'><strong>Make an Offer!</strong></p></div>    </div>
    </div>
</body>
</html>