<div id="lux-loader" style="display:none;">
    <div class="lux-loader-text">Logging you out...</div>
</div>


<style>
/* ===== SAFE WRAPPER ===== */
.lux-container {
    display: flex;
    background: #f7f5f2;
    max-width: 1200px;
    margin: 60px auto;
    font-family: 'Inter', sans-serif;
}
/* CARD STYLE */
.lux-card {
    display: inline-block;
    background: #f7f5f2;
    padding: 22px;
    border-radius: 18px;
    text-decoration: none;
    color: #111;
    max-width: 1200px;
    margin: 6px auto;
    font-family: 'Inter', sans-serif;
    transition: all 0.3s ease;
}

/* ===== SIDEBAR (BLACK LUXURY) ===== */
.lux-sidebar {
    width: 260px;
    background: #0d0d0d;
    border-radius: 15px;
    padding: 40px 18px;
}

/* LOGO */
.lux-logo {
    font-size: 18px;
    letter-spacing: 4px;
    margin-bottom: 45px;
    margin-top: 30px;
    color: #fff;
}

/* MENU ITEM */
.lux-menu-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 8px;
    border-radius: 10px;
    text-decoration: none;
    color: #aaa;
    font-size: 15px;
    transition: all 0.3s ease;
}

/* ICON */
.lux-menu-item .icon {
    width: 18px;
    height: 18px;
    color: #b8964a;
}

.lux-menu-item svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
    stroke-width: 1.4;
    fill: none;
}

/* HOVER */
.lux-menu-item:hover {
    background: rgba(212,175,55,0.1);
    color: #fff;
}

.lux-menu-item:hover .icon {
    color: #d4af37;
}

/* ACTIVE */
.lux-menu-item.active {
    color: #d4af37;
}

/* ===== MAIN (WHITE / CREAM LUXURY) ===== */
.lux-main {
    flex: 1;
    margin-left: 15px;
    background: #f8f6f2; /* change to #ffffff if you want pure white */
    border-radius: 18px;
    padding: 33px;
    border: 1px solid rgba(0,0,0,0.05);
}

/* HEADER */
.lux-hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.lux-hero h1 {
    font-size: 38px;
    font-family: 'Playfair Display', serif;
    font-weight: 500;
    color: #000; /* ✅ ADD THIS */
}

.lux-hero h1::after {
    content: "";
    display: block;
    width: 300px;
    height: 2px;
    background: #d4af37;
    margin-top: 22px;
}

.lux-hero p {
    font-size: 18px;
    color: #777;
}

/* PROFILE */
.lux-profile {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* STATS */
.lux-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-bottom: 25px;
}

.lux-stats div {
    background: #ffffff;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,0.05);
}

.lux-stats h2 {
    font-size: 20px;
}

.lux-stats p {
    font-size: 15px;
    color: #777;
}

/* GRID */
.lux-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.lux-card {
    padding: 18px;
    background: #ffffff;
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,0.05);
    transition: 0.3s;
}

.lux-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(212,175,55,0.15);
}

.lux-card h3 {
    font-size: 16px;
    margin-bottom: 5px;
    color: #000; /* ✅ ADD THIS */
}

.lux-card span {
    font-size: 15px;
    color: #777;
}

.lux-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ffffff;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    z-index: 9999999;
}

.lux-loader-text {
    font-family: 'Playfair Display', serif;
    font-size: 22px;
    letter-spacing: 2px;
    background: linear-gradient(90deg, #d4af37, #f5e6a8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* RESPONSIVE */
@media (max-width: 900px) {
    .lux-grid {
        grid-template-columns: 1fr;
    }
}

.status-text {
    color: #22c55e;
}

</style>

<div class="lux-container">

<!-- SIDEBAR -->
<div class="lux-sidebar">

    <div class="lux-logo">CFBYGS - Retailer</div>
    <div class="sidebar-status-strong">
    <div class="status-label">STATUS</div>
    <div class="status-main">
        <span class="status-text">
    <span class="status-dot">●</span> APPROVED
</span>
    </div>
</div>

    <a href="#" class="lux-menu-item active">
        <div class="icon"><svg viewBox="0 0 24 24"><path d="M3 13h8V3H3v10zm10 8h8V3h-8v18z"/></svg></div>
        <span>Dashboard</span>
    </a>

    <a href="#" class="lux-menu-item">
        <div class="icon"><svg viewBox="0 0 24 24"><path d="M3 6h18M3 12h18M3 18h18"/></svg></div>
        <span>Wholesale Orders</span>
    </a>

    <a href="#" class="lux-menu-item">
        <div class="icon"><svg viewBox="0 0 24 24"><path d="M4 4h16v16H4z"/></svg></div>
        <span>Retailer Resources</span>
    </a>

    <a href="#" class="lux-menu-item">
        <div class="icon"><svg viewBox="0 0 24 24"><path d="M12 12a5 5 0 1 0 0-10"/></svg></div>
        <span>Business Profile</span>
    </a>

    <a href="#" class="lux-menu-item">
       <div class="icon"><svg viewBox="0 0 24 24"><path d="M2 7h20v10H2z"/></svg></div>
        <span>Partnership Charter</span>
    </a>
    
    <a href="/credit-vault" class="lux-menu-item">
   <div class="icon"><svg viewBox="0 0 24 24"><path d="M2 7h20v10H2z"/></svg></div>
   <span>Credit Vault</span>
</a>
    
 <a href="#" onclick="luxLogout()" class="lux-menu-item">
    <div class="icon">
        <svg viewBox="0 0 24 24"><path d="M16 17l5-5-5-5M21 12H9M13 5v14"/></svg></div>
    <span>Logout</span>
</a>

</div>

<!-- MAIN -->
<div class="lux-main">

    <!-- DASHBOARD TAB -->
    <div id="tab-dashboard" class="tab-content active">

        <div class="lux-hero">
            <div>
                <h1>Retail Partner Dashboard</h1>
<p>Exclusive access to collections & orders</p>
<!-- ===== COLLECTION HIERARCHY UI ===== -->
<div class="lux-collections-hierarchy">

     <!-- CORE -->
    <div class="lux-collection-group">
        <span class="lux-group-title">Collections</span>

        <div class="lux-links">
            <a href="/product-category/bridal">Bridal</a>
            <a href="/product-category/bridesmaid">Bridesmaid</a>
            <a href="/product-category/cocktail">Cocktail</a>
            <a href="/product-category/evening">Evening</a>
            <a href="/product-category/prom">Prom</a>
            <a href="/product-category/pageant">Pageant</a>
        </div>
    </div>

    <!-- LIMITED -->
    <div class="lux-collection-group">
        <span class="lux-group-title limited">Limited Edition</span>

        <div class="lux-links">
            <a href="/product-category/limited-edition-couture">Limited Edition Couture</a>
        </div>
    </div>

</div>
                
            </div>
            

            <div class="lux-profile">
                <div class="top-right">
    <div class="user-info">
    <span class="welcome-text" id="dynamicGreeting">Welcome</span>
</div>
    <div class="partner-badge">GOLD PARTNER</div>
    <a href="/product-category/collection/dresses/all-dresses" class="explore-btn">Explore Collections</a>
</div>

</div>
        </div>

<div class="lux-stats">
            <div><h2>128</h2><p>Orders</p></div>
            <div><h2>$24K</h2><p>Revenue</p></div>
            <div><h2>12</h2><p>Pending</p></div>
            <div><h2>8</h2><p>Collections</p></div>
            
        </div>

<!-- CARDS -->
<div class="lux-card-grid">

    <a href="#" class="lux-card" data-tab="dashboard">
        <h3>Dashboard</h3>
        <span>Overview & insights</span>
    </a>

    <a href="#" class="lux-card" data-tab="orders">
        <h3>Wholesale Orders</h3>
        <span>Track & manage orders</span>
    </a>

    <a href="#" class="lux-card" data-tab="resources">
        <h3>Retailer Resources</h3>
        <span>Lookbooks & assets</span>
    </a>

    <a href="#" class="lux-card" data-tab="profile">
        <h3>Business Profile</h3>
        <span>Manage your brand</span>
    </a>

    <a href="#" class="lux-card" data-tab="credit">
        <h3>Credit Vault</h3>
        <span>Credits & transactions</span>
    </a>

    <a href="#" class="lux-card" data-tab="charter">
        <h3>Partnership Charter</h3>
        <span>Partner details</span>
    </a>

 </div>

  </div>

</div>


    <!-- ================= ORDERS ================= -->
    <div id="lux-overlay" style="display:none;">
        
    <div class="lux-overlay-content" id="lux-orders">

    <h2>Wholesale Orders</h2>
    <p>Track and manage all your partner orders</p>

               [cfbyg_real_orders]
    </div>
    <!-- ================= RESOURCES ================= -->
    <div class="lux-overlay-content" id="lux-resources">

        <h2>Retailer Tools</h2>
        <p>Manage your buying experience & product selections</p>

        <div class="lux-resources-grid">

            <div class="lux-resource-card">
                <div class="lux-icon">♡</div>
                <h3>My Wishlist</h3>
                <p>Save your favorite styles for bulk orders</p>
                <a href="/wishlist" class="lux-download">View Wishlist</a>
            </div>

            <div class="lux-resource-card">
                <div class="lux-icon">📘</div>
                <h3>Request Lookbook</h3>
                <p>Get latest collection catalog via email</p>
                <a href="/contact" class="lux-download">Request Now</a>
            </div>

            <div class="lux-resource-card">
                <div class="lux-icon">↻</div>
                <h3>Quick Reorder</h3>
                <p>Reorder previously purchased styles</p>
                <a href="/my-account/orders" class="lux-download">View Orders</a>
            </div>

        </div>

    </div>

<!-- ============== Business Profile ============== -->
    <div class="lux-overlay-content" id="lux-profile">

<h2>Business Profile</h2>
<p>Manage your showroom & retail details</p>

<div class="lux-profile-wrap">

    <!-- TOP ROW -->
    <div class="lux-row-3">

        <div class="lux-profile-card">
            <h3>Account Details</h3>
            <div id="luxAccount"></div>
        </div>

        <div class="lux-profile-card">
            <h3>Billing & Shipping</h3>
            <div id="luxAddress"></div>
        </div>

        <div class="lux-password-card">
            <h3>Password</h3>

            <div class="lux-field">
                <label>Current Password</label>
                <input type="password" id="current_pass">
            </div>

            <div class="lux-field">
                <label>New Password</label>
                <input type="password" id="new_pass">
            </div>

            <div class="lux-field">
                <label>Confirm Password</label>
                <input type="password" id="confirm_pass">
            </div>

            <button class="lux-save secondary">Update Password</button>
        </div>

    </div>

    <!-- 🔥 NEW SECOND ROW -->
    <div class="lux-row-bottom">

        <div class="lux-profile-card payment-wide">
            <h3>Payment History</h3>
            [lux_orders]
        </div>

        <div class="lux-profile-card card-box">
            <h3>Saved Card</h3>

            <div class="lux-card-ui">
                <div class="card-number">VISA •••• 4242</div>
            </div>

            <button class="lux-save secondary">Update Card</button>
            <p class="lux-note">Secured via Razorpay tokenization</p>
        </div>

    </div>

</div>


<script>
document.addEventListener("DOMContentLoaded", function () {

    const items = document.querySelectorAll(".lux-menu-item");

    items.forEach(item => {

        const text = item.innerText.trim();

        item.addEventListener("click", function (e) {

            if (text.includes("Wholesale Orders")) {
                e.preventDefault();
                openLux("lux-orders");
            }

            if (text.includes("Retailer Resources")) {
                e.preventDefault();
                openLux("lux-resources");
            }

            if (text.includes("Business Profile")) {
                e.preventDefault();
                openLux("lux-profile");
            }

            if (text.includes("Partnership Charter")) {
                e.preventDefault();
                openLux("lux-charter");
            }

        });

    });

});

function openLux(id) {

    const overlay = document.getElementById("lux-overlay");
    if (overlay) overlay.style.display = "block";

    document.querySelectorAll(".lux-overlay-content").forEach(el => {
        el.style.display = "none"; // 🔥 FORCE HIDE
        el.classList.remove("active");
    });

    const active = document.getElementById(id);
    if (active) {
        active.style.display = "block"; // 🔥 FORCE SHOW
        active.classList.add("active");
    }
}

// Close overlay on ESC
document.addEventListener("keydown", function(e){
    if(e.key === "Escape"){
        document.getElementById("lux-overlay").style.display = "none";
    }
});
</script>

<script>
// SAVE PROFILE
document.querySelector('.lux-save').addEventListener('click', function () {

    let data = new FormData();

    data.append('action', 'save_retailer_profile');
    data.append('business_name', document.querySelector('input[placeholder="Enter your business name"]').value);
    data.append('contact_person', document.querySelector('input[placeholder="Full name"]').value);
    data.append('phone', document.querySelector('input[placeholder="+1 234 567 890"]').value);
    data.append('store_location', document.querySelector('input[placeholder="City, Country"]').value);
    data.append('business_type', document.querySelector('select').value);
    data.append('about_business', document.querySelector('textarea').value);

    fetch('/wp-admin/admin-ajax.php', {
        method: 'POST',
        body: data
    })
    .then(res => res.json())
    .then(res => {
        alert(res.data);
    });

});


// CHANGE PASSWORD
document.querySelector('.lux-save.secondary').addEventListener('click', function () {

    let data = new FormData();
    data.append('action', 'change_user_password');

    data.append('current_password', document.getElementById('current_pass').value);
    data.append('new_password', document.getElementById('new_pass').value);
    data.append('confirm_password', document.getElementById('confirm_pass').value);

    fetch('/wp-admin/admin-ajax.php', {
        method: 'POST',
        body: data
    })
    .then(res => res.json())
    .then(res => {
        alert(res.data);

        if (res.success) {
            location.reload();
        }
    });

});

</script>


<!-- =============== PARTNERSHIP CHARTER ============= -->
<div class="lux-overlay-content" id="lux-charter">

    <h2>Partnership Charter</h2>
    <p>Guidelines that define our couture partnership and excellence.</p>

   <div class="cf-lux-wrap">

    <div class="cf-lux-header">
        <h1>The Couture Partnership Charter</h1>
        <p>A refined alliance designed to elevate your boutique’s prestige, profitability, and client experience.</p>
    </div>

    <div class="cf-lux-grid">

        <div class="cf-lux-block">
            <h3>✨ The Spirit of Partnership</h3>
            <p>This is not a transaction — it is a curated alliance. You represent a brand built on artistry and exclusivity.</p>
        </div>

        <div class="cf-lux-block">
            <h3>💎 Exclusive Access Advantage</h3>
            <p>Gain priority access to limited-edition designs and early releases — keeping you ahead in your market.</p>
        </div>

        <div class="cf-lux-block">
            <h3>📈 Profit-Driven Buying</h3>
            <p>Our pricing ensures strong margins while preserving couture value and repeat clientele.</p>
        </div>

        <div class="cf-lux-block">
            <h3>🎯 Smart Inventory Strategy</h3>
            <p>Curated designs reduce overstock risk and increase conversion.</p>
        </div>

        <div class="cf-lux-block">
            <h3>💳 Credits & Balances</h3>
            <p>Flexible credit support allows confident reinvestment into new collections.</p>
        </div>

        <div class="cf-lux-block">
            <h3>🤝 Sustaining Excellence</h3>
            <p>We maintain long-term balance through aligned performance and growth.</p>
        </div>

        <div class="cf-lux-block highlight">
            <h3>👑 Annual Privileges</h3>
            <p>Unlock couture credits, priority allocation, and exclusive benefits as you grow.</p>
        </div>

    </div>

</div>

<!-- ================= CREDIT VAULT ================= -->
<div class="lux-overlay-content" id="lux-wallet">

    <h2>Credit Vault</h2>
    <p>Your couture credits, transactions, and financial overview.</p>

    <div class="cf-wallet-wrap">

        <!-- WALLET BALANCE -->
        <div class="cf-wallet-card">
            <h3>Available Balance</h3>
            <div class="cf-balance">
                [mycred_my_balance] 
                <!-- OR your wallet shortcode -->
            </div>
        </div>

        <!-- WALLET ACTIONS -->
        <div class="cf-wallet-actions">
            <a href="/my-account/wallet" class="cf-btn">View Transactions</a>
        </div>

        <!-- FULL WALLET -->
        <div class="cf-wallet-history">
            [woo_wallet_transactions] 
        </div>

    </div>

</div>

<script>
document.addEventListener("DOMContentLoaded", function(){

    fetch('/wp-json/wp/v2/users/me', {
        credentials: 'include'
    })
    .then(res => res.json())
    .then(user => {

        // NOTE: basic fields only, meta requires plugin for REST
        document.querySelector('input[placeholder="Full name"]').value = user.name || '';

    });

});
</script>

<script>
fetch('/wp-admin/admin-ajax.php', {
    method: 'POST',
    body: new URLSearchParams({
        action: 'get_retailer_status'
    })
})
.then(res => res.json())
.then(res => {
    let box = document.getElementById('retailer-status');

    if(res.success){
        box.innerText = "Status: " + res.data;
        box.classList.add(res.data);
    }
});
</script>

<script>
// ===== LOAD RETAILER STATUS =====

document.addEventListener("DOMContentLoaded", function(){

    fetch('/wp-admin/admin-ajax.php', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        },
        body: 'action=get_retailer_status'
    })
    .then(res => res.json())
    .then(res => {

        const box = document.getElementById('retailer-status');

        if (!box) return; // safety

        if(res.success){

            let status = res.data;

            box.innerText = "Status: " + status;

            box.classList.add(status);

        } else {
            box.innerText = "Status: Pending";
        }

    })
    .catch(err => {
        console.log("Status error:", err);
    });

});
</script>

<script>
function luxLogout() {
    const loader = document.getElementById('lux-loader');

    if (loader) {
        loader.innerHTML = '<div class="lux-loader-text">Logging you out...</div>';
        loader.style.display = 'flex';
    }

    setTimeout(function() {
        window.location.href = "/?cfbyg_logout=1";
    }, 1500);
}
</script>

<script>
(function checkTier() {
    if (typeof window.userTier !== "undefined") {

        const badge = document.getElementById("membershipTier");

        if (badge) {
            badge.className = "membership-badge " + window.userTier;

            const labels = {
                basic: "Basic Partner",
                silver: "Silver Partner",
                gold: "Gold Partner",
                platinum: "Platinum Elite"
            };

            badge.innerText = labels[window.userTier];
        }

    } else {
        setTimeout(checkTier, 200);
    }
})();
</script>

<script>
document.addEventListener("DOMContentLoaded", function () {

    const adminBar = document.querySelector("#wp-admin-bar-my-account .display-name");
    const userEl = document.getElementById("dynamicUserName");

    // 🔥 SAFETY CHECK (THIS WAS MISSING)
    if (!userEl) return;

    if (adminBar) {
        userEl.innerText = adminBar.innerText;
    } else {
        userEl.innerText = "Partner";
    }

});
</script>
<script>
(function () {

    function updateGreeting() {

        const el = document.getElementById("dynamicGreeting");
        if (!el) return;

        // Show instant fallback (VERY IMPORTANT)
        el.innerHTML = "Welcome, <strong>Partner</strong>";

        // Async update (non-blocking)
        fetch('/wp-admin/admin-ajax.php?action=get_current_user_name')
            .then(res => res.text())
            .then(name => {

                name = name.trim() || "Partner";

                const hour = new Date().getHours();
                let greeting = "Welcome";

                if (hour < 12) greeting = "Good Morning";
                else if (hour < 18) greeting = "Good Afternoon";
                else greeting = "Good Evening";

                el.innerHTML = greeting + ", <strong>" + name + "</strong>";
            })
            .catch(() => {});
    }

    document.addEventListener("DOMContentLoaded", updateGreeting);

})();
document.querySelectorAll('.lux-overlay-content').forEach(el => {
    el.addEventListener('click', function(e) {
        e.stopPropagation();
    });
});
</script>
<script>
document.addEventListener("DOMContentLoaded", function () {

    fetch('/wp-admin/admin-ajax.php?action=get_user_profile')
    .then(res => res.json())
    .then(data => {

        const acc = document.getElementById('luxAccount');
        const add = document.getElementById('luxAddress');

        // SAFETY CHECK
        if (!acc || !add) return;

        // ACCOUNT BOX
        acc.innerHTML = `
            <div class="lux-info-grid">

                <div class="info-box">
                    <span>Name</span>
                    <strong>${data.name || '—'}</strong>
                </div>

                <div class="info-box">
                    <span>Email</span>
                    <strong>${data.email || '—'}</strong>
                </div>

                <div class="info-box">
                    <span>Phone</span>
                    <strong>${data.phone || '—'}</strong>
                </div>

                <div class="info-box">
                    <span>Company</span>
                    <strong>${data.company || '—'}</strong>
                </div>

            </div>
        `;

        // ADDRESS BOX
        add.innerHTML = `
            <div class="lux-info-grid">

                <div class="info-box full">
                    <span>Address</span>
                    <strong>
                        ${data.address || ''} 
                        ${data.city ? ', ' + data.city : ''} 
                        ${data.country ? ', ' + data.country : ''}
                    </strong>
                </div>

                <div class="info-box">
                    <span>ZIP Code</span>
                    <strong>${data.zip || '—'}</strong>
                </div>

            </div>
        `;

    })
    .catch(err => {
        console.log("Profile load error:", err);
    });

});
</script>
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="https://retailer.couturefashionbyfg.com/wp-sitemap-index.xsl" ?>
<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"><sitemap><loc>https://retailer.couturefashionbyfg.com/wp-sitemap-posts-post-1.xml</loc></sitemap><sitemap><loc>https://retailer.couturefashionbyfg.com/wp-sitemap-posts-page-1.xml</loc></sitemap><sitemap><loc>https://retailer.couturefashionbyfg.com/wp-sitemap-posts-product-1.xml</loc></sitemap><sitemap><loc>https://retailer.couturefashionbyfg.com/wp-sitemap-posts-bzotech_header-1.xml</loc></sitemap><sitemap><loc>https://retailer.couturefashionbyfg.com/wp-sitemap-posts-bzotech_footer-1.xml</loc></sitemap><sitemap><loc>https://retailer.couturefashionbyfg.com/wp-sitemap-posts-bzotech_mega_item-1.xml</loc></sitemap><sitemap><loc>https://retailer.couturefashionbyfg.com/wp-sitemap-taxonomies-category-1.xml</loc></sitemap><sitemap><loc>https://retailer.couturefashionbyfg.com/wp-sitemap-taxonomies-post_tag-1.xml</loc></sitemap><sitemap><loc>https://retailer.couturefashionbyfg.com/wp-sitemap-taxonomies-post_format-1.xml</loc></sitemap><sitemap><loc>https://retailer.couturefashionbyfg.com/wp-sitemap-taxonomies-product_cat-1.xml</loc></sitemap><sitemap><loc>https://retailer.couturefashionbyfg.com/wp-sitemap-users-1.xml</loc></sitemap></sitemapindex>
