<!-- app/Resources/views/base3d.html.php qqw--> 
<!DOCTYPE html> 
<html lang="cs"> 
    <head> 
 
        <title>{% block title %}e-Commerce Virtual Reality Portal{% endblock %}</title> 
 
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
        <meta name="description" content="{% block description %}E-Commerce Portal{% endblock %}"> 
        <meta name="keywords" content="E-Commerce, E-shop"> 
        <meta name="author" content="Webexciter.com"> 
        <meta name="viewport" content="width=device-width, initial-scale=1"> 
        <script src="{{ asset('assets/vendor/jquery/jquery.min.js') }}"></script> 
        <script src="{{ asset('assets/vendor/jquery.cycle.all.js') }}</script> 
        <script src="{{ asset('assets/vendor/x3d_webexciter.js') }}"></script> 
        <script src="{{ asset('assets/js/am.js') }}"></script> 
        <script type='text/javascript' src="{{ asset('assets/x3dom/x3dom.js') }}"> </script> 
 
  <!-- X_ICTE requirements --> 
    <link rel="stylesheet" type="text/css" href="https://create3000.github.io/code/x_ite/latest/dist/x_ite.css"/> 
    <script type="text/javascript" src="https://create3000.github.io/code/x_ite/latest/dist/x_ite.min.js"></script> 
 
    {# we set demo_standard.css as default stylesheet#} 
    {% if eshop is defined and eshop.eshopCss is defined and eshop.eshopCss != '' %} 
        {% set css = asset('css/' ~ eshop.eshopCss) %} 
    {% elseif externalCss is defined and externalCss == false %} 
        {% set css = null %} 
    {% elseif gallery3D is defined and gallery3D.gallery.galleryCss is defined %} 
        {% set css = asset('css/' ~ gallery3D.gallery.galleryCss) %} 
    {% else %} 
        {% set css = asset('css/demo_standard.css') %} 
    {% endif %} 
 
        <link rel="stylesheet" href="{{ css }}" /> 
 
      <script> 
       
      //Handle image gallery click 
      function imageGalleryClick(imagePath, linkUrl, serviceTitle, linkNewUrl=null, $galleryId) 
      { 
        document.getElementById('slideshow_texture').setAttribute('url', imagePath);  
        document.getElementById('slideshow_url').setAttribute('url', linkUrl);  
        // alert('linkUrl: ' + linkUrl);  
         
      }  
       
      function changeViewpoint(viewpointId) 
      { 
        document.getElementById(viewpointId).setAttribute('set_bind','true'); 
      }     
 
      function playSound(soundPath) 
      { 
        //alert('soundPath: ' + soundPath); 
        var audio = new Audio(soundPath); 
        audio.play(); 
      }        
       
      function setBasketCount(basketCount) 
      { 
        //alert('setBasketCount: ' + basketCount); 
          $('#eshop_basket_count').text(basketCount); 
      }     
 
      function openInfoMessage(message, isLinkToBasket=false) 
      { 
        $('#x3d_info_message').animate({ 
          height: 35 
        }, 500); 
        $('#x3d_info_message_text').text(message); 
        $('#button_info_message_close').show(); 
        $('#infoMessageTable').show(); 
      }             
       
      function addBasket(eshopId, productId, units, price, productName) 
      { 
        var xmlhttp = new XMLHttpRequest(); 
 
        //alert('addBasket 22: ' + eshopId + ' :: productId: ' + productId); 
 
        console.log('addBasket e-shop 22: ', eshopId); 
        console.log('addBasket productId: ', productId); 
         
        if (window.location.toString().indexOf('app_dev.php') !== -1) { 
            var url = '/app_dev.php/api/eshop/' + eshopId + '/addbasket'; 
        } else { 
            var url = '/api/eshop/' + eshopId + '/addbasket'; 
        }         
         
        var params = 'productId=' + productId + '&units=1&productPrice=' + price; 
        xmlhttp.open('POST', url, true); 
 
        //Send the proper header information along with the request 
        xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); 
 
        xmlhttp.onreadystatechange = function() {//Call a function when the state changes. 
            //alert('adding eshopId 2: ' + eshopId + ' :: productId: ' + productId); 
            if(xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
                //alert('response 110: ' +xmlhttp.responseText); 
                var responseData = JSON.parse(xmlhttp.responseText); 
                basketCount = responseData.basketCount; 
                setBasketCount(basketCount); 
                if(!productName) { 
                  productName = ''; 
                } 
 
                openInfoMessage("Ok, product " + productName + " inserted into basket.", true); 
                $('#button_info_message_cart_button').show(); 
            }  
        } 
        xmlhttp.send(params); 
 
      }       
 
      function getProductDetail(eshopId, productId) 
      { 
        //alert('getProductDetail 22: ' + eshopId + ' :: productId: ' + productId); 
         
        var xmlhttp = new XMLHttpRequest(); 
        //var url = '/app_dev.php/api/eshop/' + eshopId + '/product/' + productId; 
         
        if (window.location.toString().indexOf('app_dev.php') !== -1) { 
            var url = '/app_dev.php/api/eshop/' + eshopId + '/product/' + productId; 
        } else { 
            var url = '/api/eshop/' + eshopId + '/product/' + productId; 
        } 
         
        var productName = ''; 
        xmlhttp.open('GET', url); 
        xmlhttp.setRequestHeader("Content-Type", "application/json;charset=UTF-8"); 
 
        xmlhttp.onprogress = function () { 
          console.log('LOADING: ', xmlhttp.status); 
        }; 
 
        xmlhttp.onload = function () { 
          console.log('DONE: ', xmlhttp.status); 
        };         
 
        xmlhttp.onreadystatechange = function() {//Call a function when the state changes. 
            //alert('getProductDetail 108 :: productId: ' + productId); 
            if(xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
                //alert('response 110: ' +xmlhttp.responseText); 
                var productData = JSON.parse(xmlhttp.responseText); 
                productInfo = productData.product; 
                //productName = productInfo.productName; 
                //alert('window.location: ' + window.location + " :: url: " + url); 
                $('#x3d_product_id').val(productId);    
                $('#x3d_product_name').text(productInfo.productName); 
                $('#x3d_product_key').text(productInfo.productKey); 
                $('#x3d_product_price').text(productInfo.displayPrice);   
                $('#x3d_product_description').text(productInfo.productDescription);     
                 
                 
                //$('#x3d_product_image').text(productInfo.image1);      
                var imagePath = $(location).attr('protocol') + '//' + $(location).attr('hostname') + '/users/Kantona/images/' + productInfo.image1;    
                $('#x3d_product_image').attr("src", imagePath);  
            } 
        } 
 
        //xmlhttp.send(JSON.stringify({ "email": "hello@user.com", "response": { "name": "Tester" } })); 
        xmlhttp.send(); 
        //xmlhttp.send(params); 
         
        //x3d_menu 
         
        $('#x3d_product_detail').animate({ 
        width: 500 
          }, 500); 
           
      
         
        //alert('status 112: ' + xmlhttp.status + ' :: responseText: ' + xmlhttp.responseText + ' :: url: ' + url); 
 
      }        
 
      function getGaleryItemDetail(itemName, itemDescription) 
      { 
 
        //alert('itemName: ' + itemName + ' :: itemDescription: ' + itemDescription); 
 
        $('#x3d_item_name').text(itemName); 
        $('#x3d_item_description').text(itemDescription); 
         
        $('#x3d_item_detail').animate({ 
    width: 500 
        }, 500); 
 
      }        
 
      function getQuickBasket(eshopId)  
      { 
        //alert('getProductDetail 22: ' + eshopId + ' :: productId: ' + productId); 
         
        var xmlhttp = new XMLHttpRequest(); 
        //var url = '/app_dev.php/api/eshop/' + eshopId + '/product/' + productId; 
         
        if (window.location.toString().indexOf('app_dev.php') !== -1) { 
          var url = '/app_dev.php/api/eshop/' + eshopId + '/getbasket'; 
        } else { 
          var url = '/api/eshop/' + eshopId + '/getbasket'; 
        } 
 
        console.log('3D getQuickBasket 1: ', url); 
         
        var productName = ''; 
        xmlhttp.open('GET', url); 
        xmlhttp.setRequestHeader("Content-Type", "application/json;charset=UTF-8"); 
 
        xmlhttp.onprogress = function () { 
          console.log('LOADING: ', xmlhttp.status); 
        }; 
 
        xmlhttp.onload = function () { 
          console.log('DONE: ', xmlhttp.status); 
        };         
 
        xmlhttp.onreadystatechange = function() {//Call a function when the state changes. 
            //alert('getProductDetail 108 :: productId: ' + productId); 
            if(xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
                //alert('response 110: ' +xmlhttp.responseText); 
                var responseData = JSON.parse(xmlhttp.responseText); 
                basketItems = responseData.basketItems; 
                console.log('responseText: ', xmlhttp.responseText); 
                //productInfo = productData.product; 
                //productName = productInfo.productName; 
                //alert('window.location: ' + window.location + " :: url: " + url); 
 
                $('#x3d_quick_basket_text').html(""); 
 
                $('#x3d_quick_basket_text').append('<ul>'); 
 
                for (let index = 0; index < basketItems.length; ++index) { 
                    const element = basketItems[index]; 
 
                    console.log('element: ', element); 
 
                    $('#x3d_quick_basket_text').append('<li class="quickBasketRow">' 
                                                      +'<span class="quickBasketName">'+element.title+'</span>' 
                                                      +'<span class="quickBasketUnits">'+element.units+'</span>' 
                                                      +'<span class="quickBasketPrice">'+element.price+'</span>' 
                                                      +'</li>'); 
 
                  } 
 
                $('#x3d_quick_basket_text').append('</ul>'); 
 
                //$('#x3d_quick_basket_text').text('basket content ...'); 
 
            } 
        } 
 
        //xmlhttp.send(JSON.stringify({ "email": "hello@user.com", "response": { "name": "Tester" } })); 
        xmlhttp.send(); 
        //xmlhttp.send(params); 
         
        //x3d_menu 
 
        //alert('status 112: ' + xmlhttp.status + ' :: responseText: ' + xmlhttp.responseText + ' :: url: ' + url); 
 
      }           
       
      function loadModel(modelPath, inlineId) { 
            //alert(document.getElementById(inlineId).getAttribute("url")); 
          //var inline = document.createElement("Inline"); 
 
          var emptyString = ""; 
          var url = document.getElementById(inlineId).getAttribute("url").valueOf(); 
 
          //console.log('inlineId: ' + inlineId); 
          //console.log('url: -' + String(url).trim() + '-'); 
 
          //removeNode('x3d_inline_external'); 
          //document.getElementById('x3d_inline_external').setAttribute("url", modelPath); 
 
          //if (compareStrings(String(url).trim(), emptyString)) { 
 
            document.getElementById(inlineId).setAttribute("nameSpaceName", "ExtX3D"); 
            document.getElementById(inlineId).setAttribute("contentType", "model/x3d+xml"); 
            document.getElementById(inlineId).setAttribute('bboxSize','5 5 5'); 
            document.getElementById(inlineId).setAttribute('bboxCenter','0 0 0');       
            document.getElementById(inlineId).setAttribute("url", modelPath); 
          //} 
 
      }      
 
      function removeNode(inlineId) 
      { 
        var ot = document.getElementById(inlineId); 
        for (var i = 0; i < ot.childNodes.length; i++) { 
          // check if we have a real X3DOM Node; not just e.g. a Text-tag 
          if (ot.childNodes[i].nodeType === Node.ELEMENT_NODE) { 
            ot.removeChild(ot.childNodes[i]); 
          break; 
        } 
      } 
         
        return false; 
    }; 
 
       function compareStrings(a,b){ 
          if (a.length !== b.length) { 
               //alert('csrt: false'); 
               return false; 
          } 
           //alert('csrt: true'); 
          return a.localeCompare(b) === 0; 
      }   
       
      function changeColor() 
     { 
        if(document.getElementById("color").getAttribute('diffuseColor')=="1 0 0") 
           document.getElementById("color").setAttribute('diffuseColor', '0 0 1'); 
        else 
           document.getElementById("color").setAttribute('diffuseColor', '1 0 0'); 
     }    
 
      function pushCtrl() 
      { 
        alert('pushCtrl: '); 
      }  
 
 
     </script> 
      
     <script> 
           //resize x3d scene 
      $(document).ready(function() { 
        var $win = $(window); 
        var $discountHeight = 96; 
        $('#button_fullscreen').click(function() { 
          $('#x3d').animate({ 
        height: ($win.height() - $discountHeight), 
        width: $win.width() 
          }, 500); 
          $('#x3d_section').animate({ 
        height: ($win.height() - $discountHeight), 
        width: $win.width() 
          }, 500); 
          $('#x3dom-x3d_section-canvas').animate({ 
        height: ($win.height() - $discountHeight), 
        width: '100%' 
          }, 500);      
          $("#x3d_section").attr("height",($win.height() - $discountHeight)); 
        }); 
         
        $('#button_defaultscreen').click(function() { 
          $('#x3d').animate({ 
        height: "323px", 
        width: '100%' 
          }, 500); 
          $('#x3d_section').animate({ 
              height: "323px", 
              width: '100%' 
          }, 500);         
          $('#x3dom-x3d_section-canvas').animate({ 
              height: "323px", 
              width: '100%' 
          }, 500);           
          $("#x3d_section").attr("height","323px");   
        }); 
             
        $('#button_product_detail_close').click(function() { 
          $('#x3d_product_detail').animate({ 
              width: 0 
          }, 500); 
        }); 
        $('#button_product_detail_close2').click(function() { 
          $('#x3d_product_detail').animate({ 
              width: 0 
          }, 500); 
        });              
 
      $('#x3d_button_addcart').click(function() { 
 
        //alert('x3d_button_addcart: ' + $('#x3d_product_id').val()); 
         
        addBasket($('#x3d_eshop_id').val(), $('#x3d_product_id').val(), 1, $('#x3d_product_price').val(), $('#x3d_product_name').val()); 
        $('#x3d_info_message').animate({ 
          height: 35 
        }, 500); 
      });         
 
      $('#x3d_info_message_close').click(function() { 
        $('#x3d_info_message_text').text(''); 
        $('#button_info_message_close').hide(); 
        $('#infoMessageTable').hide();       
        $('#x3d_info_message').animate({ 
          height: 0 
        }, 500); 
      });   
 
      $('#basketPanel').mouseover(function() { 
        $('#x3d_quick_basket').animate({ 
          height: 150 
        }, 500); 
        $('#quickBasketTable').show();   
        $('#x3d_quick_basket_close').show(); 
        var full_url = document.URL;  
        var shopId = full_url.substring(full_url.lastIndexOf('/') + 1); 
        getQuickBasket(shopId); 
      }); 
 
      $('#x3d_quick_basket').mouseleave(function() { 
        $('#x3d_quick_basket').animate({ 
          height: 0 
        }, 500); 
        $('#quickBasketTable').hide();   
      });     
 
      $('#button_item_detail_close').click(function() { 
        $('#x3d_item_detail').animate({ 
          width: 0 
        }, 500); 
      }); 
      $('#button_item_detail_close2').click(function() { 
        $('#x3d_item_detail').animate({ 
          width: 0 
        }, 500); 
      });           
 
      }); 
    </script> 
 
         
    </head> 
    <body> 
 
 
        <div class="contentContainer"> 
          <div class="content"> 
              {% block content %}{% endblock %} 
          </div> 
        </div> 
    </body> 
</html>