<div style="margin-left:auto; margin-right:auto; width:55%;">
    <div class="card" style="max-width: 100%">
        <div class="card-body">
            <h5 class="card-title"><b>Demo VR Environment by GOTOVIAR</b></h5>
            <p></p>
            <p class="card-subtitle mb-2 text-body-secondary">At GOTOVIAR, we understand that you first want to experience how our VR plugin works and what it can bring to your website. That’s why we’ve developed a free demo tool that lets you easily test our VR environment.</p>
            <p class="card-text"><b>Tutorial on YouTube</b></p>
            <p class="card-text">Watch our step-by-step setup video on YouTube! This guide shows you exactly how to use the demo VR environment feature.</p>
            <iframe width="845" height="448" src="https://www.youtube.com/embed/oWrDqDjcgps" title="Gotoviar WordPress Plugin VR Demo Setup Guide: Step-by-Step" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
            <p></p>
            <p class="card-text"><b>Step 1: Choose Your Demo VR Environment</b></p>
            <p class="card-text">Select a demo VR environment that best suits your sector and that you’d like to link to your website. Our demo models are designed to give you a preview of what’s possible without including your own video, logo, or multi-user functionality. This way, you can explore the environment at your own pace.</p>
            <!--<a href="#" class="card-link">Card link</a>-->
        </div>
  
        <div id="scenes_list" class="carousel slide">
            <div class="carousel-indicators">
                <button type="button" data-bs-target="#scenes_list" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1" onclick="ChangeJSCode('vr-shoe-store')"></button>
                <button type="button" data-bs-target="#scenes_list" data-bs-slide-to="1" aria-label="Slide 2" onclick="ChangeJSCode('vr-real-estate-office')"></button>
                <button type="button" data-bs-target="#scenes_list" data-bs-slide-to="2" aria-label="Slide 3" onclick="ChangeJSCode('vr-art-gallery-city')"></button>
                <button type="button" data-bs-target="#scenes_list" data-bs-slide-to="3" aria-label="Slide 2" onclick="ChangeJSCode('vr-meditation-room-jungle')"></button>
                <button type="button" data-bs-target="#scenes_list" data-bs-slide-to="4" aria-label="Slide 3" onclick="ChangeJSCode('vr-meeting-room-city')"></button>         
            </div>

            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img src=<?php echo plugin_dir_url( dirname( __FILE__, 2 ) ).'assets/project_selector/shoes-1500-1500.39.jpg' ?> class="d-block w-100" alt="...">
                    <div class="carousel-caption d-none d-md-block">
                        <h5>VR Shoe Store</h5>
                        <p>Retailers, Present Your Shoe Collection in a New Way.</p>
                    </div>
                </div>
                <div class="carousel-item">
                    <img src=<?php echo plugin_dir_url( dirname( __FILE__, 2 ) ).'assets/project_selector/realst2-1500-1500.4.jpg' ?> class="d-block w-100" alt="...">
                    <div class="carousel-caption d-none d-md-block">
                        <h5>VR Real Estate Office</h5>
                        <p>Real Estate Agents, Present Your Property Listings in a New Way.</p>
                    </div>
                </div>
                <div class="carousel-item">
                    <img src=<?php echo plugin_dir_url( dirname( __FILE__, 2 ) ).'assets/project_selector/art-city-1500-1500.6.jpg' ?> class="d-block w-100" alt="...">
                    <div class="carousel-caption d-none d-md-block">
                        <h5>VR Art Gallery in a City Setting</h5>
                        <p>Artists and Photographers, Present Your Work in a New Way.</p>
                    </div>
                </div>
                <div class="carousel-item">
                    <img src=<?php echo plugin_dir_url( dirname( __FILE__, 2 ) ).'assets/project_selector/Yoga-1500-1500.8.jpg' ?> class="d-block w-100" alt="...">
                    <div class="carousel-caption d-none d-md-block">
                        <h5>VR Meditation Room in a Jungle Setting</h5>
                        <p>Wellness Centers, Present Your Workshops in a New Way.</p>
                    </div>
                </div>
                <div class="carousel-item">
                    <img src=<?php echo plugin_dir_url( dirname( __FILE__, 2 ) ).'assets/project_selector/meat3-1500-1500.24.jpg' ?> class="d-block w-100" alt="...">
                    <div class="carousel-caption d-none d-md-block">
                        <h5>VR Meeting Room in a City Setting</h5>
                        <p>For All Businesses, Present Your Brand in a New Way.</p>
                    </div>
                </div>                            
            </div>              
        
            <button class="carousel-control-prev" type="button" data-bs-target="#scenes_list" data-bs-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Previous</span>
            </button>

            <button class="carousel-control-next" type="button" data-bs-target="#scenes_list" data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Next</span>
            </button>
        </div>

        <p></p>
        <p class="card-text"><b>Step 2: Generate the Javascript</b></p>
        <p class="card-text">Once you’ve made your selection, the corresponding Javascript will appear below. Place this script on your website to activate the demo VR environment. Note: you’ll just need to add the CSS selector to the script to specify which button will link to the VR model. See the attached video guide for step-by-step instructions.</p>
        <br>
        <code style="display: block; white-space: pre-wrap" id ="gtvr_include_code"></code>

        <p></p>
        <p class="card-text"><b>Connection Complete</b></p>
        <p class="card-text">After completing these steps, the demo VR environment will be linked and visible on your website, ready for you to share with visitors.</p>

        <p class="card-text"><b>Support</b></p>

        <p class="card-text">If you have any questions or need assistance, please don’t hesitate to reach out to our support team at wpactivate@gotoviar.com. We’re here to help!

        <p class="card-text"><b>Create Your Own Customized VR Environment with GOTOVIAR</b></p>

        <p class="card-text">Ready to take the next step with a fully customized VR environment? Or would you like a completely bespoke VR world, including all the interactive features that will captivate your customers? Our experts are here to guide and support you at every stage of the process. Whether you want a tailored version of an existing model or a brand-new custom environment, we ensure that your VR experience aligns perfectly with your brand and goals.</p>

        <p class="card-text"><b>Contact us today at wpactivate@gotoviar.com</b> to explore how you can let your customers experience, explore, and connect like never before!</p>
        <p class="card-text"><b>Disclaimer</b></p>
        <p class="card-text">By using this tool, you agree to the terms outlined in this <a href="https://gotoviar.com/disclaimer-demo-tool-wordpress-plugin/" target="_blank">disclaimer</a>.</p>

    </div>
</div>

<script type="text/javascript">
    let carousel = document.querySelector("#scenes_list");
    carousel.addEventListener('slide.bs.carousel', function (e) {
        const scenes = ['vr-shoe-store', 'vr-real-estate-office', 'vr-art-gallery-city', 'vr-meditation-room-jungle', 'vr-meeting-room-city'];
        ChangeJSCode(scenes[e.to]);
    })

    function ChangeJSCode(project_name) {
        let elem = document.getElementById("gtvr_include_code");
        let project_url = 'https://ir-vrshop.s3.eu-west-1.amazonaws.com/shared';
        let js_code = "\
&lt;script type=\"module\"> \n\
import GTVRModule from '" + "<?php echo plugin_dir_url( dirname( __FILE__, 2 ) ).'assets/GTVRModule.js' ?>" + "'; \n\
\n\
window.addEventListener('load', (event) => { \n\
    let selector_id = ''; \n\
    const options = { \n\
        wasm_url: '" + "<?php echo plugin_dir_url( dirname( __FILE__, 2 ) ).'assets/wasm/webxr_app.wasm'?>" + "', \n\
        wasm_js_url: '" + "<?php echo plugin_dir_url( dirname( __FILE__, 2 ) ).'assets/wasm/webxr_app.js'?>" + "'\n\
    }; \n\
    let mod = new GTVRModule(options);  \n\
    mod.download(); \n\
    document.querySelector(selector_id)?.addEventListener( 'click', ()=> mod.run({'url':'" + project_url + "', 'name': '" + project_name + "'}), true); \n\
}); \n\
&lt;/script>";
        elem.innerHTML = js_code;
      };
    ChangeJSCode('vr-shoe-store');
</script> 
