// ==============================
// FRONTEND BUILDER (ISOLATED)
// ==============================

add_shortcode('kitforge_builder', 'kf_render_builder');

function kf_render_builder(){

    if(get_post_meta(get_the_ID(), '_kf_enabled', true) !== 'yes'){
        return '';
    }

    ob_start();
?>

<div id="kf-builder">

    <!-- ==============================
         STEP 1 — PRODUCT BUILDER (LOCKED)
         ⚠️ DO NOT MODIFY THIS SECTION
    ============================== -->

    <!-- 🔒 PASTE YOUR EXACT STEP 1 CODE BELOW (UNCHANGED) -->

    


    <!-- ==============================
         STEP 2 — TEAM CONFIG
    ============================== -->

    <div id="kf-team-config">

        <h2>Team Details</h2>

        <!-- TEAM NAME -->
        <div class="kf-block">
            <label>Team Name</label>
            <input type="text" id="kf-team-name" placeholder="Enter team name">

            <label class="kf-inline">
                <input type="checkbox" id="kf-apply-all" checked>
                Apply to all shirts
            </label>
        </div>


        <!-- BADGE -->
        <div class="kf-block">
            <label class="kf-inline">
                <input type="checkbox" id="kf-badge-enable"> Add Badge
            </label>

            <div class="kf-sub" id="kf-badge-options">

                <select id="kf-badge-type">
                    <option value="print">Printed</option>
                    <option value="emb">Embroidered</option>
                </select>

                <select id="kf-badge-size">
                    <option value="small">Small</option>
                    <option value="large">Large</option>
                </select>

                <select id="kf-badge-pos">
                    <option value="left">Left Chest</option>
                    <option value="right">Right Chest</option>
                    <option value="center">Center Chest</option>
                    <option value="lsleeve">Left Sleeve</option>
                    <option value="rsleeve">Right Sleeve</option>
                </select>

                <input type="file">
            </div>
        </div>


        <!-- SPONSOR -->
        <div class="kf-block">
            <label class="kf-inline">
                <input type="checkbox" id="kf-sponsor-enable"> Add Sponsor
            </label>

            <div class="kf-sub" id="kf-sponsor-options">

                <select id="kf-sponsor-size">
                    <option value="small">Small</option>
                    <option value="large">Large</option>
                </select>

                <select id="kf-sponsor-pos">
                    <option value="front">Front</option>
                    <option value="back">Back</option>
                    <option value="sleeve">Sleeve</option>
                    <option value="nape">Nape</option>
                </select>

                <input type="file">
            </div>
        </div>


        <!-- PLAYER OPTIONS -->
        <div class="kf-block">

            <label class="kf-inline">
                <input type="checkbox" id="kf-number-enable"> Add Numbers
            </label>

            <div id="kf-number-options" class="kf-sub">
                Shirt:
                <select id="kf-number-shirt">
                    <option value="back">Back</option>
                    <option value="front">Front</option>
                </select>

                Shorts:
                <select id="kf-number-shorts">
                    <option value="left">Left Leg</option>
                    <option value="right">Right Leg</option>
                </select>
            </div>


            <label class="kf-inline">
                <input type="checkbox" id="kf-name-enable"> Add Names
            </label>

            <div id="kf-name-options" class="kf-sub">
                <select id="kf-name-pos">
                    <option value="above">Above Number</option>
                    <option value="below">Below Number</option>
                </select>
            </div>


            <label class="kf-inline">
                <input type="checkbox" id="kf-initials-enable"> Add Initials
            </label>

            <div id="kf-initials-options" class="kf-sub">
                <select id="kf-initials-pos">
                    <option value="chest">Chest</option>
                    <option value="sleeve">Sleeve</option>
                </select>
            </div>

        </div>


        <!-- LIVE PRICE -->
        <div class="kf-block kf-price">
            Total: £<span id="kf-total">0.00</span>
        </div>

    </div>

</div>



<style>

/* STEP 2 ONLY — SAFE */

#kf-team-config{
    margin-top:50px;
}

.kf-block{
    border:1px solid #e5e7eb;
    padding:15px;
    margin-bottom:15px;
    border-radius:12px;
    background:#fff;
}

.kf-inline{
    display:block;
    margin-top:10px;
}

.kf-sub{
    margin-top:10px;
    display:none;
}

.kf-price{
    font-size:18px;
    font-weight:600;
}

</style>



<script>
// ==============================
// STEP 2 LOGIC (SAFE)
// ==============================

(function(){

const prices = {
    name: 2,
    initials: 1.5,
    number: 3,
    number_shorts: 2,
    badge_small_print: 2,
    badge_large_print: 4,
    badge_small_emb: 3,
    badge_large_emb: 6,
    sponsor_small: 2.5,
    sponsor_large: 3.5
};

// toggle logic
function bindToggle(id, target){
    const el = document.getElementById(id);
    const box = document.getElementById(target);

    if(!el || !box) return;

    el.addEventListener('change', ()=>{
        box.style.display = el.checked ? 'block' : 'none';
        calc();
    });
}

bindToggle('kf-badge-enable','kf-badge-options');
bindToggle('kf-sponsor-enable','kf-sponsor-options');
bindToggle('kf-number-enable','kf-number-options');
bindToggle('kf-name-enable','kf-name-options');
bindToggle('kf-initials-enable','kf-initials-options');


// recalc trigger
document.querySelectorAll('#kf-team-config input, #kf-team-config select')
.forEach(el => el.addEventListener('change', calc));


function calc(){

    let total = 0;

    if(document.getElementById('kf-name-enable')?.checked){
        total += prices.name;
    }

    if(document.getElementById('kf-initials-enable')?.checked){
        total += prices.initials;
    }

    if(document.getElementById('kf-number-enable')?.checked){
        total += prices.number;
        total += prices.number_shorts;
    }

    if(document.getElementById('kf-badge-enable')?.checked){
        let type = document.getElementById('kf-badge-type').value;
        let size = document.getElementById('kf-badge-size').value;
        total += prices[`badge_${size}_${type}`] || 0;
    }

    if(document.getElementById('kf-sponsor-enable')?.checked){
        let size = document.getElementById('kf-sponsor-size').value;
        total += prices[`sponsor_${size}`] || 0;
    }

    document.getElementById('kf-total').innerText = total.toFixed(2);
}

})();
</script>
<br />
<b>Warning</b>:  Cannot modify header information - headers already sent by (output started at /home/u909679918/domains/kitforge.co.uk/public_html/wp-content/plugins/kitforge-builder/kitforge-builder.php:28) in <b>/home/u909679918/domains/kitforge.co.uk/public_html/wp-includes/sitemaps/class-wp-sitemaps-renderer.php</b> on line <b>126</b><br />
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="https://kitforge.co.uk/wp-sitemap-index.xsl" ?>
<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"><sitemap><loc>https://kitforge.co.uk/wp-sitemap-posts-post-1.xml</loc></sitemap><sitemap><loc>https://kitforge.co.uk/wp-sitemap-posts-page-1.xml</loc></sitemap><sitemap><loc>https://kitforge.co.uk/wp-sitemap-posts-product-1.xml</loc></sitemap><sitemap><loc>https://kitforge.co.uk/wp-sitemap-taxonomies-category-1.xml</loc></sitemap><sitemap><loc>https://kitforge.co.uk/wp-sitemap-taxonomies-product_cat-1.xml</loc></sitemap><sitemap><loc>https://kitforge.co.uk/wp-sitemap-users-1.xml</loc></sitemap></sitemapindex>