//in here we will fetch the php script to load all the games
            window.addEventListener("load", (e) => {

               document.getElementById("bundles").innerHTML = `
            
            
        
                

        <input type="checkbox" name="" id="">
        <div class="shadow" bundleid="1">
            <h3 class="font-toy">Starter bundle!</h3>
            <div>
                <div>
                    <p class="font-roboto"> Kickstart your outdoor event with our Starter Bundle, featuring classic backyard games perfect for any gathering.</p>
                    <div class="bundle-games-section">
    
                        
    <div class="bundle-games-display">
    <div class="round-tiny" ><img src="/php/helper/get_image_raw.php?image=121" alt=""></div>
    <div>
        <p>Giant Jenga</p>
    </div>
</div>
 
    <div class="bundle-games-display">
    <div class="round-tiny" ><img src="/php/helper/get_image_raw.php?image=108" alt=""></div>
    <div>
        <p>Giant Connect 4</p>
    </div>
</div>
 
    <div class="bundle-games-display">
    <div class="round-tiny" ><img src="/php/helper/get_image_raw.php?image=117" alt=""></div>
    <div>
        <p>Corn Hole</p>
    </div>
</div>
    
                    </div>
                </div>
                <div>
                    <div><img width="100%" height="100%" src="/php/helper/get_image_raw.php?image=123"></div>
                    <div><p class="center" style="opacity:98%;color:white;font-weight:900;font-size: 25px;margin:5px 0px;">$90.00</p></div>
                    <div><button onclick="this.parentElement.parentElement.parentElement.parentElement.previousElementSibling.click();">Add Bundle</button></div>
                </div>
            </div>
        </div>
        <div class="space-tiny" style="opacity:0"></div>


                

        <input type="checkbox" name="" id="">
        <div class="shadow" bundleid="2">
            <h3 class="font-toy">Animal Bundle!</h3>
            <div>
                <div>
                    <p class="font-roboto">  Let the games begin with our Animal Bundle, a playful assortment of backyard favorites that will have everyone roaring with delight.</p>
                    <div class="bundle-games-section">
    
                        
    <div class="bundle-games-display">
    <div class="round-tiny" ><img src="/php/helper/get_image_raw.php?image=111" alt=""></div>
    <div>
        <p>Kan Jam</p>
    </div>
</div>
 
    <div class="bundle-games-display">
    <div class="round-tiny" ><img src="/php/helper/get_image_raw.php?image=107" alt=""></div>
    <div>
        <p>Washer Toss</p>
    </div>
</div>
 
    <div class="bundle-games-display">
    <div class="round-tiny" ><img src="/php/helper/get_image_raw.php?image=117" alt=""></div>
    <div>
        <p>Corn Hole</p>
    </div>
</div>
 
    <div class="bundle-games-display">
    <div class="round-tiny" ><img src="/php/helper/get_image_raw.php?image=129" alt=""></div>
    <div>
        <p>Pong Table</p>
    </div>
</div>
    
                    </div>
                </div>
                <div>
                    <div><img width="100%" height="100%" src="/php/helper/get_image_raw.php?image=124"></div>
                    <div><p class="center" style="opacity:98%;color:white;font-weight:900;font-size: 25px;margin:5px 0px;">$105.00</p></div>
                    <div><button onclick="this.parentElement.parentElement.parentElement.parentElement.previousElementSibling.click();">Add Bundle</button></div>
                </div>
            </div>
        </div>
        <div class="space-tiny" style="opacity:0"></div>


                

        <input type="checkbox" name="" id="">
        <div class="shadow" bundleid="4">
            <h3 class="font-toy">After Dark Bundle!</h3>
            <div>
                <div>
                    <p class="font-roboto">  Get the glow going with our Afterdark Bundle, featuring LED-lit backyard games that will keep the fun going well into the night.</p>
                    <div class="bundle-games-section">
    
                        
    <div class="bundle-games-display">
    <div class="round-tiny" ><img src="/php/helper/get_image_raw.php?image=118" alt=""></div>
    <div>
        <p>LED Corn Hole</p>
    </div>
</div>
 
    <div class="bundle-games-display">
    <div class="round-tiny" ><img src="/php/helper/get_image_raw.php?image=116" alt=""></div>
    <div>
        <p>LED Bocce Ball</p>
    </div>
</div>
 
    <div class="bundle-games-display">
    <div class="round-tiny" ><img src="/php/helper/get_image_raw.php?image=115" alt=""></div>
    <div>
        <p>LED Ring Toss</p>
    </div>
</div>
 
    <div class="bundle-games-display">
    <div class="round-tiny" ><img src="/php/helper/get_image_raw.php?image=110" alt=""></div>
    <div>
        <p>LED Tic Tac Toe</p>
    </div>
</div>
 
    <div class="bundle-games-display">
    <div class="round-tiny" ><img src="/php/helper/get_image_raw.php?image=112" alt=""></div>
    <div>
        <p>LED Kan Jam</p>
    </div>
</div>
    
                    </div>
                </div>
                <div>
                    <div><img width="100%" height="100%" src="/php/helper/get_image_raw.php?image=125"></div>
                    <div><p class="center" style="opacity:98%;color:white;font-weight:900;font-size: 25px;margin:5px 0px;">$110.00</p></div>
                    <div><button onclick="this.parentElement.parentElement.parentElement.parentElement.previousElementSibling.click();">Add Bundle</button></div>
                </div>
            </div>
        </div>
        <div class="space-tiny" style="opacity:0"></div>


            ` ;
});