<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Movim.io - Encuesta de satisfacción</title>
                  <!--  <link href="/css/backend-ubold/bootstrap.min.css" rel="stylesheet" />
            <link href="/css/backend-ubold/core.css" rel="stylesheet" />
            <link href="/css/backend-ubold/components.css" rel="stylesheet" />
            <link href="/css/backend-ubold/icons.css" rel="stylesheet" />
            <link href="/css/backend-ubold/pages.css" rel="stylesheet" />
            <link href="/css/backend-ubold/responsive.css" rel="stylesheet" />
            <link href="/css/plugins/bootstrap-datepicker.min.css" rel="stylesheet" />
            <link href="/css/backend-ubold/plugins/bootstrap-timepicker.min.css" rel="stylesheet" />
            <link href="/css/backend-ubold/plugins/daterangepicker.css" rel="stylesheet" />
            <link href="/css/backend-ubold/plugins/bootstrap-clockpicker.min.css" rel="stylesheet" />
            <link href="/css/backend-ubold/plugins/bootstrap-colorpicker.min.css" rel="stylesheet" />
            <link href="/css/backend-ubold/plugins/jquery.filer.css" rel="stylesheet" />
            <link href="/css/backend-ubold/plugins/bootstrap-tagsinput.css" rel="stylesheet" />
            <link href="/css/backend-ubold/plugins/bootstrap-editable.css" rel="stylesheet" />
            <link href="/css/imageselected/imgareaselect-default.css" rel="stylesheet" /> 
            <link href="/css/backend-ubold/plugins/summernote/summernote.css" rel="stylesheet" />
            <link href="/css/jquery-confirm.css" rel="stylesheet" />
            <link href="/css/backend-ubold/plugins/owl.carousel/dist/assets/owl.carousel.min.css" rel="stylesheet" />
            <link href="/css/backend-ubold/plugins/owl.carousel/dist/assets/owl.theme.default.min.css" rel="stylesheet" />

            <link href="/css/x-editable/assets/select2/select2.css" rel="stylesheet"> 


  

                 <link href="/css/x-editable/assets/select2/select2-bootstrap.css" rel="stylesheet">

         
            <link href="/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
        
            <link href="/css/ms-dropdown.dd.css" rel="stylesheet">
            <link href="/css/ms-dropdown.flag.css" rel="stylesheet">
            <link href="/css/ms-dropdown.skin2.css" rel="stylesheet">
            <link href="/css/ms-dropdown.sprite.css" rel="stylesheet">

            <link href="/fullcalendar/fullcalendar.min.css" rel='stylesheet' />
            <link href="/fullcalendar/fullcalendar.print.min.css" rel='stylesheet' media='print' />

         
            <link href="/css/public/style_movimio.css" rel="stylesheet">  -->
             <link href="/css/frame/bootstrap/css/bootstrap.min.css" rel="stylesheet">
             <link href="/css/frame/styles.css" rel="stylesheet">
             
        
            
             <link href="/css/backend-ubold/icons.css" rel="stylesheet" />
                <link
      rel="stylesheet"
      type="text/css"
      href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.css"
    />
                
      <!--     <script src="/js/backend-ubold/modernizr.min.js"></script>
        <script src="/js/backend-ubold/jquery.min.js"></script>
        <script src="/js/backend-ubold/plugins/parsleyjs/parsley.min.js"></script>

        <link rel="icon" type="image/x-icon" href="/favicon.ico" /> -->
        
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
      <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Encode+Sans&amp;display=swap">
        <script src="https://code.jquery.com/jquery-3.6.1.js" integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI=" crossorigin="anonymous"></script>
        
        <link href="/css/frame/fullCalendar/main.css" rel='stylesheet' />
        <script src="/css/frame/fullCalendar/main.js"></script>
    </head>
    
    <style>
        
      
        .titleVal{
        font-family: Open Sans;
        font-style: normal;
        font-weight: normal;
        font-size: 25px;
    
        line-height: 34px;
        color: #000000;
                }


        .parapgraph {
        font-family: Open Sans;
        font-style: normal;
        font-weight: normal;
        font-size: 17px;
     
        line-height: 22px;
        text-align: center;
        color: #000000;
        opacity: 0.8;
        }


        .radioButton {
        font-family: Open Sans;
        font-style: normal;
        font-weight: normal;
        font-size: 15px;
        line-height: 20px;
        color: #000000;
        opacity: 0.8;
        margin-bottom: 20px;
        }


        .buttonEnv {
        font-family: Open Sans;
        font-style: normal;
        font-weight: bold;
       font-size: 17px;
    
        line-height: 23px;
        text-align: center;
        color: #FFFFFF;
        background: #EE0925;
        }
        
        .buttonEnv:hover {
        background: #BD071D;
        }


.radio-cutom input[type=radio]:checked+label::after {
    background-color: black;
}


body {
    background-color: #fff;
}
html {
    background-color: #fff;
}

.card{
    border: none !important;
    min-height: 640px;
}

        </style>
    
    <body  >
        

               <!--div id="wrapper" class="forced"-->
        <section>
     
</section>
                               <!-- ========== main content start ========== -->
        <div class="content-page" style="margin-left: 0px;">

            <!-- content -->
            <div class="content">
                
  <script
      type="text/javascript"
      src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.js"
    ></script>

    <style id="compiled-css" type="text/css">
        .selectedSelector{
            color: white;
            background-color: #FF5F00;

        }
    
      img {
        width: 100%;
      }

    </style>


 <div class="container" id="maindiv">
     
     
      
     

  
<div class="row">
    
    <div class="col-lg-6 col-md-6">
                    <img src="/css/frame/imageMotos/Y1S_pro.png"  id="imagemoto" >
            
                     </div>
<div class="col-lg-6 col-md-6">
    
<div class="card">
    
                        <div class="card-body">
                            
                            <form>
                                <div><label class="form-label labelStyle">Selecciona el Scooter que quieres probar</label>
                               
                          
                                 <select class="form-select selectStyle" id="modelo" onchange="cargarDatos(); changeImage();" name="modelo"  disabled >
                                                    <option value="" >Selecciona un scooter ...</option>
                                                                                              <option value="105"   selected  >Y1S - 70 km/h</option>
                                                                                               </select>
                                </div>
                                <div class="gap"></div>
                                <div><label class="form-label labelStyle mt-2">Localiza tu Authorized Dealer más cercano</label>
                                    <div class="col-12">
                                        <div class="row mt-2">
                                            <div class="col-6">
                                                <button type="button" class="secondaryButtonStyle col-6" onclick="changeSearch(1);" id="provinceSelector">Buscar por Provincia</button>
                                            </div>
                                            <div class="col-6">
                                            <button type="button" class="secondaryButtonStyle col-6" onclick="changeSearch(2);" id="zipSelector">Buscar por Código Postal</button>
                                            </div>
                                        </div>
                                     </div>
                                    
                                    <div class="row mt-2">
                                       <!-- <p class="col-3">Buscar por</p> <a class="col-2">Provincia</a> <a class="col-2">CP</a> <input value="" class="form-select" id="zip" name="zip">-->
                                     <!--  <p class="col-lg-6 col-md-6 col-12" style="line-height: 40px;color: #767676;"> Buscar por &nbsp&nbsp  <span id="provinceSelector" style="cursor: pointer;" onclick="changeSearch(1);"> Provincia </span> &nbsp&nbsp  <span id="zipSelector" style="cursor: pointer;" onclick="changeSearch(2);"> CP </span>  </p> -->
                                      <div class="col-12 col-md-12 col-12" id="zips" style="display:none; padding:none;">
                                       <div class="row">
                                       <div class="col-10">
                                        <input value=""  id="zip" name="zip" style="border-style: none;border-bottom: solid 1px;border-color: #767676; width: 100%;line-height: 35px;">
                                       
                                      </div>
                                           <div class="col-2">
                                                <span class="input-group-btn">
                                        <button type="button" onclick="cargarConcesionarios();" class="btn waves-effect waves-light btnSearchSquare form-control"><i class="fa fa-search"></i></button>
                                        </span>
                                           </div>
                                           </div>
                                           <div class="col-12 col-md-12 col-sm-12" id="errorModelZip" style="display:none;font-size: 12px; color: red;">
                                            <p> Selecciona un modelo mas arriba</p>
                                            </div>
                                         </div>
                                       
                                       
                                       
                                        <div class="col-12 col-md-12 col-sm-12" id="privincias" style="display:none;">
                                       <div class="input-group">
                                       <select class="form-select selectStyle" id="province" onchange="cargarConcesionarios();" name="province">
                                                  <option value="">Selecciona un modelo mas arriba ...</option>
                                              </select>
                                      </div>
                                           </div>
                                       <div class="col-12 col-md-12 col-sm-12" id="errorModelProvincia" style="display:none;font-size: 12px; color: red;">
                                            <p>No hemos encontrado un concesionario en tu provincia busca por Código Postal para ver los más próximos</p>
                                            </div>
                                      
                                     </div>
                                
                                </div>
                        
                                <div>
                                    <div>
                                        <ul class="nav nav-tabs" role="tablist">
                                            <li class="nav-item" role="presentation"><a class="nav-link active" role="tab" data-bs-toggle="tab" href="#tab-2" style="border-style: none;" id="showMaps" onclick="">Ver Mapa</a></li>
                                            <li class="nav-item" role="presentation"><a class="nav-link" role="tab" data-bs-toggle="tab" href="#tab-1" style="border-style: none;">Ver Lista</a></li>
                                        </ul>
                               
                                        
                                        <div class="tab-content" id="divFoundEntities">
                                            
                                              <div style="height: 250px;" id="chooseOptions">
                                          
                                                            <svg class="alignSVG" width="83" height="53" viewBox="0 0 83 53" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                                    <path d="M82.8791 27.9694C82.8811 27.6006 82.7321 27.2462 82.4681 26.9886C79.0225 23.6158 74.4685 21.757 69.6446 21.757C68.6274 21.757 67.6357 21.8617 66.664 22.021C65.2176 17.3677 63.1871 13.0037 60.6429 9.04674L62.0561 8.62725C62.6363 8.45556 63.0343 7.9229 63.0343 7.31805V1.38732C63.0343 0.669314 62.4782 0.0735776 61.7622 0.0241452C58.9962 -0.162513 56.9286 0.736944 55.7267 2.58784C55.0484 1.83861 54.3531 1.1076 53.6312 0.405919C53.1389 -0.0727552 52.3695 -0.111132 51.8329 0.313566L49.9533 1.79707C46.7483 0.0741794 42.9234 0.0235642 38.2779 1.67805C37.567 1.93169 37.1963 2.71279 37.4499 3.42359C37.7036 4.13444 38.486 4.50516 39.1955 4.25152C43.2862 2.79274 46.5304 2.86558 49.1064 4.45118C56.1408 15.2188 57.1092 23.9378 51.7397 28.3899C47.2853 32.0859 40.083 31.5591 37.0915 28.6604C34.7905 26.4309 35.1884 23.062 38.2101 19.174C38.2166 19.1656 38.2192 19.1552 38.2257 19.1474C38.294 19.0563 38.3519 18.9568 38.3955 18.8501C38.4007 18.8365 38.4026 18.8235 38.4078 18.8105C38.4423 18.7194 38.465 18.6232 38.4781 18.5236C38.482 18.4918 38.4852 18.4592 38.4872 18.4274C38.4891 18.3975 38.4963 18.3682 38.4963 18.337C38.4963 13.1242 34.2551 8.88254 29.0418 8.88254H19.2135C14.2615 8.88254 10.1941 12.7113 9.79865 17.5631C3.39124 20.1145 1.23979 28.1662 0.0170508 35.8892C-0.0460359 36.2827 0.0677807 36.686 0.327931 36.9903C0.58808 37.294 0.96724 37.469 1.36723 37.469H9.28091C9.0936 38.3255 8.99606 39.2029 8.99606 40.088C8.99606 46.8011 14.4566 52.2616 21.1697 52.2616C27.4198 52.2616 32.5784 47.525 33.2614 41.4531H57.5531C58.2347 47.525 63.3947 52.2616 69.6448 52.2616C76.3579 52.2616 81.8184 46.8011 81.8184 40.088C81.8184 37.1248 80.7525 34.409 78.9873 32.2965L82.4609 28.9484C82.7263 28.6922 82.8765 28.3397 82.8791 27.9703L82.8791 27.9694ZM60.3024 2.76532V6.29818L59.0231 6.67866C58.5724 6.0582 58.1165 5.44165 57.6391 4.84588C58.0885 3.58351 58.9275 2.92203 60.3023 2.76536L60.3024 2.76532ZM19.2163 11.6155H29.0447C32.2829 11.6155 34.9943 13.9172 35.6264 16.9714H12.6334C13.2663 13.9172 15.977 11.6155 19.2158 11.6155H19.2163ZM12.0369 19.7035H34.5487C31.1134 25.5907 33.7572 29.2374 35.1887 30.6246C39.4889 34.7922 48.3808 34.7272 53.4832 30.4959C56.5477 27.9548 62.4063 20.3215 51.9021 3.74008L52.5727 3.21067C57.7443 8.51055 61.6551 15.1938 64.0017 22.654C57.0649 24.905 51.9418 31.1849 51.3825 38.7221L33.2612 38.7228C33.2137 38.3013 33.1506 37.8825 33.0602 37.4695H33.7815C34.5346 37.4695 35.146 36.8594 35.1479 36.1063C35.1544 32.4103 33.7958 29.0088 31.3212 26.5295C28.8276 24.0321 25.3735 22.6558 21.5955 22.6558C14.2671 22.6558 7.38484 27.6825 4.83613 34.7384H2.98188C4.24295 27.5277 6.3554 20.998 12.0364 19.703L12.0369 19.7035ZM21.5934 25.3865C24.6404 25.3865 27.4084 26.4772 29.3849 28.4582C31.0394 30.1147 32.0631 32.3091 32.3382 34.7362H7.76512C10.1728 29.2985 15.82 25.3865 21.5934 25.3865ZM24.1669 40.0869C24.1669 41.7395 22.8219 43.0838 21.1706 43.0838C19.5181 43.0838 18.1737 41.7388 18.1737 40.0869C18.1737 38.9891 18.7799 37.9914 19.7307 37.4679H22.6203C23.5744 37.998 24.1668 38.9944 24.1668 40.0869H24.1669ZM21.1713 49.529C15.9657 49.529 11.7292 45.2937 11.7292 40.0869C11.7292 39.1959 11.8547 38.3152 12.098 37.4679H16.0893C15.6783 38.2646 15.4409 39.1557 15.4409 40.0869C15.4409 43.2458 18.0113 45.8167 21.17 45.8167C24.3288 45.8167 26.8991 43.2463 26.8991 40.0869C26.8991 39.1543 26.663 38.2646 26.2527 37.4679H30.2421C30.4866 38.3134 30.6108 39.1946 30.6108 40.0869C30.6121 45.2937 26.3768 49.529 21.1714 49.529H21.1713ZM69.6447 49.529C64.4391 49.529 60.204 45.2937 60.204 40.0869C60.204 34.8813 64.4393 30.6461 69.6447 30.6461C74.8515 30.6461 79.0868 34.8814 79.0868 40.0869C79.0868 45.2937 74.8515 49.529 69.6447 49.529ZM77.0037 30.412C74.9563 28.8518 72.4114 27.9133 69.6454 27.9133C63.3953 27.9133 58.2367 32.6499 57.5537 38.7205H54.1146C54.8098 30.758 61.5041 24.4871 69.6461 24.4871C73.2772 24.4871 76.7299 25.7254 79.5082 27.9978L77.0037 30.412Z" fill="#FF5F00"/>
                                                                    <path d="M69.6444 34.3595C66.4855 34.3595 63.9153 36.9285 63.9153 40.0886C63.9153 43.2481 66.4843 45.8183 69.6444 45.8183C72.8033 45.8183 75.3742 43.248 75.3742 40.0886C75.3748 36.929 72.8045 34.3595 69.6444 34.3595V34.3595ZM69.6444 43.0855C67.9918 43.0855 66.6481 41.7405 66.6481 40.0886C66.6481 38.436 67.9918 37.0923 69.6444 37.0923C71.297 37.0923 72.6413 38.436 72.6413 40.0886C72.642 41.7412 71.297 43.0855 69.6444 43.0855Z" fill="#FF5F00"/>
                                                                    </svg>


                                               <p class="titleMiddle">Selecciona Provincia o Código Postal<br></p>
                                                </div>
                                            <div class="tab-pane" role="tabpanel" id="tab-1">
                                                
                                              
                                                <div style="height: 250px;
                                                                    max-height: 250px;
                                                                    display: block;
                                                                    overflow: auto;
                                                                    overflow-x: hidden;" id="entityList">
                                                    <div class="gap"></div>
                                                    <p class="captionText" id="foundXentities"><br></p>
                                                  
                                               
                                                 
                                                </div>
                                            </div>
                                            <div class="tab-pane active" role="tabpanel" id="tab-2" style="position:relative;">
                                              
                                             
                                                
                                             
                                                
                                   <!-- <a  target="_blank" href="https://maps.geoapify.com/v1/staticmap?style=osm-carto&width=600&height=400&center=lonlat:-122.304292,47.528282&zoom=14&apiKey=410725d8109149018a0758ecde512e93" download="maps.jfif">
                                    <img width="500"  height="300" src="https://maps.geoapify.com/v1/staticmap?style=osm-carto&width=600&height=400&center=lonlat:-122.304292,47.528282&zoom=14&apiKey=410725d8109149018a0758ecde512e93" alt="Boeing 2-88, 8123 East Marginal Way South, Tukwila, WA 98108, United States of America">
                                      </a> -->
                                
                                            </div>
                                            <div class="tab-pane" role="tabpanel" id="tab-3">
                                                <p>Content for tab 3.</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="gap"></div>
                                <p class="text-center captionText mt-3">¿Tienes dudas? <a class="linkStyle" href="#">Contacta con nosotros</a><br></p>
                            </form>
                        </div>
                    </div>
     </div>
    
    
 </div>
   </div> 
    <!--<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> -->
<script>
// Leaflet has native support for raster maps, So you can create a map with a few commands only!

// The Leaflet map Object

/*
document.getElementById("btn_convert").addEventListener("click", function() {
    
	html2canvas(document.getElementById("imgmaps")).then(function (canvas) {	var anchorTag = document.createElement("a");
			document.body.appendChild(anchorTag);
			//document.getElementById("previewImg").appendChild(canvas);
			anchorTag.download = "filename.jpg";
			anchorTag.href = canvas.toDataURL();
			anchorTag.target = '_blank';
			anchorTag.click();
		});
 });*/
 
  //cargarConcesionarios();
 cargarDatos(); changeImage();
  

 
 
/* document.getElementById("showMaps").addEventListener("click", function() {
     if (document.getElementById('divMapa').style.display=="none"){
	document.getElementById('divMapa').style.display="block";
    }else {
        document.getElementById('divMapa').style.display="none";
    }
 });*/
  
    var height=document.body.scrollHeight;
    
        var message={method:"resize", height:height};;
                               var targetOrigin='*';
                    window.parent.postMessage(message, targetOrigin);
      $(document).ready(executeMedia);
      $(window).resize(executeMedia);
        
        function executeMedia(){
            
             var height=document.body.scrollHeight;
             console.log("Resized -> "+height);
        var message={method:"resize", height:height};;
                               var targetOrigin='*';
                    window.parent.postMessage(message, targetOrigin); 
    }
        
  //  cargarDatos();
    
    
    function changeImage() {
           var id= document.getElementById('modelo').value;
                              if (105==id){
                 
                        
                console.log('css/frame/imageMotos/Y1S_pro.png');
                document.getElementById('imagemoto').src="/css/frame/imageMotos/Y1S_pro.png";
            
        
                 
                     }
                     //"css/frame/imageMotos/Sin modelo seleccionado.png"
                     if (id=="") {
                         document.getElementById('imagemoto').src="/css/frame/imageMotos/Sin modelo seleccionado.png";
                     }
                     
                     
                 }
    
    
    
 // Execute a function when the user presses a key on the keyboard
 var input = document.getElementById("zip");
input.addEventListener("keypress", function(event) {
  // If the user presses the "Enter" key on the keyboard
  if (event.key === "Enter") {
    // Cancel the default action, if needed
    event.preventDefault();
    // Trigger the button element with a click
    cargarConcesionarios();
  }
});
    
    
  function  changeSearch(val) {
      
      
     document.getElementById('errorModelZip').style.display="none";
                   document.getElementById('errorModelProvincia').style.display="none";
      
      if (val==1) {
          document.getElementById('privincias').style.display="block";
          document.getElementById('zips').style.display="none";
          
          var element = document.getElementById("provinceSelector");
           var element2 = document.getElementById("zipSelector");
         element.classList.add("selectedSelector");
          element2.classList.remove("selectedSelector");
          
        }else {
            document.getElementById('zips').style.display="block";
            document.getElementById('privincias').style.display="none";
           var element = document.getElementById("provinceSelector");
           var element2 = document.getElementById("zipSelector");
         element.classList.remove("selectedSelector");
          element2.classList.add("selectedSelector");
        }
      
      
    }
    
    
  function cargarDatos() {
      
          var id= document.getElementById('modelo').value;
  if (id!=''){
             $.ajax({
               method: "POST",
               url: "/entities/data/objects",
               data: { id:id }
               })
             .done(function( msg ) {
                 
                   jsonData=$.parseJSON(msg);
                 if(jsonData['status']=="ok"){
                     
                    $('#province').find('option').remove().end();
                    $('#zip').find('option').remove().end();
                     
                     
                     console.log(jsonData);
                     var provincias=jsonData['provincias'];
                     var zips=jsonData['zips'];
                      if (provincias.length>0){
                           $('#province').append('<option value="">Selecciona una provincia</option>');
                      }
                   
                     for (var i=0;i<provincias.length;i++) {
                         $('#province').append('<option value="'+provincias[i]+'">'+provincias[i]+'</option>');
                        }
                       
                        if (zips.length>0){
                            $('#zip').append('<option value="">Seleccione un código postal</option>');
                      }
                         for (var i=0;i<zips.length;i++) {
                            
                         $('#zip').append('<option value="'+zips[i]+'">'+zips[i]+'</option>');
                        }
                      changeSearch(1);
                var cl=document.getElementById('province');
                             console.log(cl.length);
                                        var clTexts = new Array();

                                        for(i = 1; i < cl.length; i++)
                                        {
                                            clTexts[i-1] =
                                                cl.options[i].text.toUpperCase() + "," +
                                                cl.options[i].text + "," +
                                                cl.options[i].value;
                                        }

                                        clTexts.sort();

                                        for(i = 1; i < cl.length; i++)
                                        {
                                            var parts = clTexts[i-1].split(',');

                                            cl.options[i].text = parts[1];
                                            cl.options[i].value = parts[2];
                                        }
                            }
                  
                 
                   });
                   }else {
                    $('#province').find('option').remove().end();
                     $('#province').append('<option value="">Selecciona una provincia</option>');
}

                   return;
                   
                  
      
  }  
   
    var listaRecuperada='';
 function cargarConcesionarios() {
   


document.getElementById('tab-2').innerHTML = "<div id='my-map'></div><div id='panelOverMap' style='display:none;'>"+
                                                        "<div style='float:right;'> <button type='button' class='closebutton' onClick='closeside();'><span aria-hidden='true'>&times;</span></button> </div>"+
                                                     "<div id='contents' style='margin-top: 30%; margin-left: 10%; margin-right: 10%;'>"+
                                                     "<h1 class='title01Side' id='titleside'>Ttile</h1>"+
                                                     "<p class='captionTextSide' id='dirside'>text</p>"+
                                                     "<p class='captionTextSide' id='hoursside'>text</p>"+
                                                     "<div style='float:right;'> <a id='buttonSide' class='btn btn-primary buttonSide' type='button'>Seleccionar</a></div>"+
                                                          "</div>"+
                                                        "</div>";

 
    var id= document.getElementById('modelo').value;
      var element3=document.getElementById('concesionarios');
         var zip=document.getElementById('zip').value;
     var province=document.getElementById('province').value;
     var entityList=document.getElementById('entityList');
     //Reseteamos el div de entidades
     entityList.innerHTML="";
     
    
      var chooseOptions=document.getElementById('chooseOptions');
      
      
      if (province!='' || zip!=''){
    chooseOptions.style.display="none";
     entityList.style.display="block"; 
    }else {
         chooseOptions.style.display="block";  
         entityList.style.display="none";
    }
    
    // Se busca o por provincia o por zip , asi que si el div de zips esta vacio 
    
         var div_provincia_display= document.getElementById('privincias').style.display;
          var div_zips_display= document.getElementById('zips').style.display;
          
          
          document.getElementById('errorModelProvincia').style.display="none"; 
          
          if (div_provincia_display=='none') {
              province='';
              // Se busca por zip
              if (id=="") {
              document.getElementById('errorModelZip').style.display="block";
              return;
                }else {
                   document.getElementById('errorModelZip').style.display="none";
                   
                }
        }
         if (div_zips_display=='none') {
              zip='';
        }
    
  
    
    
        $.ajax({
               method: "POST",
               url: "/entities/byobject",
               data: { id:id,zip:zip,province:province }
               })
             .done(function( msg ) {

                 jsonData=$.parseJSON(msg);
                 if(jsonData['status']=="ok"){
                     console.log(jsonData);
                     // Mapa sin markers
                var map = L.map('my-map').setView([jsonData['latCentral'], jsonData['lngCentral']], 9);
                 //  var map = L.map('my-map').setView([40,416812, -3,705106], 10);

                // The API Key provided is restricted to JSFiddle website
                // Get your own API Key on https://myprojects.geoapify.com
                var myAPIKey = "410725d8109149018a0758ecde512e93";

                // Retina displays require different mat tiles quality
                var isRetina = L.Browser.retina;

                var baseUrl = "https://maps.geoapify.com/v1/tile/osm-bright/{z}/{x}/{y}.png?apiKey=410725d8109149018a0758ecde512e93";
                var retinaUrl = "https://maps.geoapify.com/v1/tile/osm-bright/{z}/{x}/{y}@2x.png?apiKey=410725d8109149018a0758ecde512e93";

                // Add map tiles layer. Set 20 as the maximal zoom and provide map data attribution.
                L.tileLayer(isRetina ? retinaUrl : baseUrl, {
                    attribution: 'Powered by <a href="https://www.geoapify.com/" target="_blank">Geoapify</a> | <a href="https://openmaptiles.org/" rel="nofollow" target="_blank">© OpenMapTiles</a> <a href="https://www.openstreetmap.org/copyright" rel="nofollow" target="_blank">© OpenStreetMap</a> contributors',
                    apiKey: myAPIKey,
                    maxZoom: 20,
                    id: 'osm-bright',
                }).addTo(map);
    
                     
                   var lista=jsonData['lista'];
                   var listadistancias=jsonData['distancias'];
                   var html=''; 
                if (lista.length==0){
                     html+='<p class="titleMiddle">No hemos encontrado opciones para tu búsqueda<br></p>';
                     
                     entityList.innerHTML=html;
                }
                  var long, lat;
                  listaRecuperada=lista;
                  console.log(lista);
                  var markersAdded=[];
                 
                 for (var l = 0; l < listadistancias.length; l++) {    
                     var itemdist = listadistancias[l];
                     for (var k = 0; k < lista.length; k++) {
                        
                       var item = lista[k];
                  if (item['id']==itemdist['id']) {
                      let zooMarkers;
                          var laboral='';
                                var laboral2='';
                               var  laboral3='';
                       //Añadimo los markers al mapa
                       
                       if (item["lng"]!=null && item["lat"]!=null) {
                            
                             
                           
                                  long=item["lng"];
                             lat=item["lat"];
                   var zooMarkerPopup = L.popup().setContent(item['namecomplete']);
                          var markerIcon = L.icon({
                           iconUrl: `https://api.geoapify.com/v1/icon?size=xx-large&type=awesome&color=%23ff5f00&apiKey=410725d8109149018a0758ecde512e93`,
                           iconSize: [31, 46], // size of the icon
                           iconAnchor: [15.5, 42], // point of the icon which will correspond to marker's location
                           popupAnchor: [0, -45] // point from which the popup should open relative to the iconAnchor
                         });
                                 zooMarkers = L.marker([lat, long], {
                                        icon: markerIcon
                                      }).bindPopup(zooMarkerPopup).addTo(map);
                                      markersAdded.push(k);
                                      
                                  }  
                                 
                                     // var url="/frame/page2"+"?entity="+item['entity']+"&modelo="+id+"&address="+item['address'] ;
                                     // zooMarker.addEventListener("dblclick", function(){ selectByMap(url); });
                                    
                                   //  zooMarkers.addEventListener("click", function(){ selectByMap(item['namecomplete']); });
                       
                   
                   
                                 /*   var get = document.getElementsByClassName('leaflet-marker-icon leaflet-zoom-animated leaflet-interactive');
                                       console.log(get.length+"Vuelta "+k);
                                         // get[0].addEventListener("click", function(){ selectByMap(item['namecomplete']); });
                                            for (i = 0; i < get.length; i++) {
                                                if (k==i){
                                              get[i].addEventListener("click", function(){ selectByMap(item['namecomplete']); });
                                            }
                                            }*/
                       
                       
                       // Create html element
                        html+='<div class="gap"></div>';
                        if (i==0){
                            if (lista.length>1){
                       html+='<p class="captionText" id="foundXentities">Hemos encontrado '+lista.length+' opciones para tu búsqueda:<br></p>';
                   }else {
                       html+='<p class="captionText" id="foundXentities">Hemos encontrado '+lista.length+' opción para tu búsqueda:<br></p>';
                    }
                         }
                       html+='<div class="row">';
                       html+='<div class="col-md-8 col-lg-9 col-xl-10 col-xxl-10">';
                       html+='<h1 class="title01">'+item['namecomplete']+'</h1>';
                        if (item['calendar']!=null){
                           for (var i = 0; i < item['calendar'].length; i++) {
                             var laboral="Horario: ";
                               if (item['calendar'][i]['laborales']==true){
                                var laboral1="L-V :"+item['calendar'][i]['entradaMañana']+" a "+item['calendar'][i]['salidaMañana']+", "+item['calendar'][i]['entradaTarde']+" a "+item['calendar'][i]['salidaTarde']+"; ";  
                               }
                               
                                 if (item['calendar'][i]['sabado']==true){
                                 var laboral2="S: "+item['calendar'][i]['entradaMañana']+" a "+item['calendar'][i]['salidaMañana']+", ";
                                 if (item['calendar'][i]['entradaTarde']!=null && item['calendar'][i]['salidaTarde']!=null){
                                 laboral2+=item['calendar'][i]['entradaTarde']+" a "+item['calendar'][i]['salidaTarde'];  
                                    }
                               }
                               
                                 if (item['calendar'][i]['domingo']==true){
                                 
                                 var laboral3="D: "+item['calendar'][i]['entradaMañana']+" a "+item['calendar'][i]['salidaMañana']+", ";  
                               if (item['calendar'][i]['entradaTarde']!=null && item['calendar'][i]['salidaTarde']!=null){
                                 laboral3+=item['calendar'][i]['entradaTarde']+" a "+item['calendar'][i]['salidaTarde'];  
                                    }
                        }
                               
                             }
                             if (laboral1!=null){
                                 laboral+=laboral1;
                             }
                             if (laboral2!=null){
                                 laboral+=laboral2;
                             }
                             if (laboral3!=null){
                                 laboral+=laboral3;
                             }
                         }
                     /* if (item['laborales']==true){
                          
                          laboral="Horario: L-V "+item['entradaMañana']+" a "+item['salidaMañana']+", "+item['entradaTarde']+" a "+item['salidaTarde'];
                      }*/
                      console.log(laboral);
                     
                       html+='<p class="captionText">'+item['direction']+', '+item['population']+'<br>'+laboral+'<br></p>';
                       
                       html+='</div>'; //entity 
                       var step="/frame/page2"+"?entity="+item['entity']+"&modelo="+id+"&address="+item['address'];
                       html+='<div class="col-auto"><a href="'+step+'" class="btn btn-primary mainButtonStyle"  type="button">Elegir</a></div>';
                       html+='</div>';
                       
                       
                       
                      
                     entityList.innerHTML=html;
                 }
                     
                 }
                 }
                
                   //  console.log(markersAdded);
                          var get = document.getElementsByClassName('leaflet-marker-icon leaflet-zoom-animated leaflet-interactive');
                 for (var i = 0; i < get.length; i++) {
                     for (var j = 0; j < markersAdded.length; j++) {
                     get[i].id="marker"+markersAdded[i];
                    }
                 }
                     for (var k = 0; k < lista.length; k++) {
                       var item = lista[k];
                      let zooMarkers;
                 
                
               //  for (var j = 0; j < markersAdded.length; j++) {
                    var get = document.getElementById("marker"+k);
                      if(typeof(get) != 'undefined' && get != null){
                        
                                     get.setAttribute("onclick","selectByMap("+item['address']+");");
                                 }
                                 
                     //   }
                             
                     }
                     

               
             }
             
                if (jsonData['msg']=="nofound")  {
              document.getElementById('errorModelProvincia').style.display="block";
                }
                    if (jsonData['msg']=="noid")  {
              document.getElementById('errorModelZip').style.display="block";
                }
                
             });
     
}

function selectByMap(address) {

  /*let text = "¿Quieres seleccionar este concesionario?";
  if (confirm(text) == true) {
      window.location.href=url;
  } else {
    return;
  }*/
var id= document.getElementById('modelo').value;
      console.log(address);

   for (var k = 0; k < listaRecuperada.length; k++) {
            var item = listaRecuperada[k];
            var laboral="Horario: ";
             if (item['calendar']!=null){
                           for (var i = 0; i < item['calendar'].length; i++) {
                             
                               if (item['calendar'][i]['laborales']==true){
                                var laboral1="L-V :"+item['calendar'][i]['entradaMañana']+" a "+item['calendar'][i]['salidaMañana']+", "+item['calendar'][i]['entradaTarde']+" a "+item['calendar'][i]['salidaTarde']+"; ";  
                               }
                               
                                 if (item['calendar'][i]['sabado']==true){
                                 var laboral2="S: "+item['calendar'][i]['entradaMañana']+" a "+item['calendar'][i]['salidaMañana']+", ";
                                 if (item['calendar'][i]['entradaTarde']!=null && item['calendar'][i]['salidaTarde']!=null){
                                 laboral2+=item['calendar'][i]['entradaTarde']+" a "+item['calendar'][i]['salidaTarde'];  
                                    }
                               }
                               
                                 if (item['calendar'][i]['domingo']==true){
                                 
                                 var laboral3="D: "+item['calendar'][i]['entradaMañana']+" a "+item['calendar'][i]['salidaMañana']+", ";  
                               if (item['calendar'][i]['entradaTarde']!=null && item['calendar'][i]['salidaTarde']!=null){
                                 laboral3+=item['calendar'][i]['entradaTarde']+" a "+item['calendar'][i]['salidaTarde'];  
                                    }
                        }
                               
                             }
                             if (laboral1!=null){
                                 laboral+=laboral1;
                             }
                             if (laboral2!=null){
                                 laboral+=laboral2;
                             }
                             if (laboral3!=null){
                                 laboral+=laboral3;
                             }
                         }
            
            if (item['address']==address) {
                document.getElementById('titleside').innerHTML=item['namecomplete'];
                
                document.getElementById('dirside').innerHTML=item['direction']+', '+item['population'];
                document.getElementById('hoursside').innerHTML=laboral;
                document.getElementById('panelOverMap').style.display="inline-block";
                   var step="/frame/page2"+"?entity="+item['entity']+"&modelo="+id+"&address="+item['address'];
                     
                        document.getElementById('buttonSide').href=step;
            }
                       
        }
        return;
}


function closeside() {
document.getElementById('panelOverMap').style.display="none";
}
  
  
  
  function sortList() {
          
  var list, i, switching, b, shouldSwitch;
  list = document.getElementById("modelo");
  switching = true;
  /* Make a loop that will continue until
  no switching has been done: */
  while (switching) {
    // Start by saying: no switching is done:
    switching = false;
    b = list.getElementsByTagName("LI");
    // Loop through all list items:
    for (i = 0; i < (b.length - 1); i++) {
      // Start by saying there should be no switching:
      shouldSwitch = false;
      /* Check if the next item should
      switch place with the current item: */
      if (b[i].innerHTML.toLowerCase() > b[i + 1].innerHTML.toLowerCase()) {
        /* If next item is alphabetically lower than current item,
        mark as a switch and break the loop: */
        shouldSwitch = true;
        break;
      }
    }
    if (shouldSwitch) {
    
      /* If a switch has been marked, make the switch
      and mark the switch as done: */
      b[i].parentNode.insertBefore(b[i + 1], b[i]);
      switching = true;
    }
  }
}

</script>
            </div>

            <!-- content -->

            <!-- footer -->

        </div>
                            
                            
           
<footer class="footer">
       <!-- <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <p class="copyright"><?php echo Date('Y') ?>2018 © Movimio. Todos los derechos reservados.</p>
                </div>
                <div class="col-md-6">
                    <ul class="legal-nav">
                        <li><a href="/avisoLegal">Aviso Legal</a></li>
                        <li><a href="/condicionesVenta">Condiciones de Venta</a></li>

                    </ul>
                </div>
            </div>
           
        </div>-->
        <!-- end container -->
    </footer>
       
                
       <!--   
        <script src="/js/backend-ubold/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>
        <script src="/js/backend-ubold/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.es.js"></script>


        <script src="/js/backend-ubold/plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.js"></script>

            <script src="/js/backend-ubold/bootstrap.min.js"></script>
            <script src="/js/backend-ubold/detect.js"></script>
            <script src="/js/backend-ubold/fastclick.js"></script>
            <script src="/js/backend-ubold/jquery.slimscroll.js"></script>
            <script src="/js/backend-ubold/jquery.blockUI.js"></script>
            <script src="/js/backend-ubold/waves.js"></script>
            <script src="/js/backend-ubold/wow.min.js"></script>
            <script src="/js/backend-ubold/jquery.nicescroll.js"></script>
            <script src="/js/backend-ubold/jquery.scrollTo.min.js"></script>
            <script src="/js/backend-ubold/jquery.easing.min.js"></script>
         
            <script src="/js/backend-ubold/plugins/jquery.filer/jquery.filer.min.js"></script>
       
            <script src="/js/backend-ubold/pages/jquery.filer.init.js"></script>

            <script src="/js/backend-ubold/plugins/moment/moment.js"></script>
            <script src="/js/backend-ubold/plugins/timepicker/bootstrap-timepicker.js"></script>

            <script src="/js/backend-ubold/plugins/bootstrap-colorpicker/js/bootstrap-colorpicker.min.js"></script>
            <script src="/js/backend-ubold/plugins/clockpicker/js/bootstrap-clockpicker.min.js"></script>
            <script src="/js/backend-ubold/plugins/bootstrap-daterangepicker/daterangepicker.js"></script>
            <script src="/js/backend-ubold/plugins/bootstrap-filestyle/js/bootstrap-filestyle.min.js"></script>



            <script src="/js/backend-ubold/jquery.core.js"></script>
            <script src="/js/backend-ubold/jquery.app.js"></script>

            <script src="/js/backend-ubold/pages/jquery.form-pickers.init.js"></script>
            <script src="/js/backend-ubold/plugins/parsleyjs/parsley.min.js"></script>
            <script src="/js/backend-ubold/plugins/tinymce/tinymce.min.js"></script>
            <script src="/js/backend-ubold/plugins/bootstrap-tagsinput/js/bootstrap-tagsinput.min.js"></script>
      
            <script src="/js/backend-ubold/plugins/x-editable/bootstrap-editable.js"></script>
            <script src="/js/backend-ubold/plugins/bootstrap-maxlength/bootstrap-maxlength.min.js"></script>
            <script src="/js/backend-ubold/pages/jquery.xeditable.js"></script>

            <script src="/js/backend-ubold/plugins/summernote/summernote.min.js"></script>
            <script src="/js/backend-ubold/plugins/tinymce/tinymce.min.js"></script>
            <script src="/js/backend-ubold/plugins/autocomplete/jquery.autocomplete.min.js"></script>
            <script src="/js/backend-ubold/plugins/owl.carousel/dist/owl.carousel.min.js"></script>

  <script src="/js/x-editable/assets/select2/select2.js"></script>
  
       
            <script src="/fullcalendar/lib/moment.min.js"></script>

            <script src="/fullcalendar/fullcalendar.min.js"></script>
            <script src="/fullcalendar/locale-all.js"></script>
   
            
   
           <script src="/js/notify.js"></script>
             <script src="/js/notifier.js"></script>
             <script src="/js/Notifier2.js"></script>
             <script src="/js/infoBox.js"></script>
         
            

        
            <script src="/js/bootstrap-datetimepicker.min.js"></script>
            <script src="/js/bootstrap-datetimepicker.es.js"></script>
 
            <script src="/js/ms-dropdown.dd.js"></script>
            <script src="/js/ms-dropdown.dd.min.js"></script>
       
            <script src="/js/jscolor.js"></script>
            
             <script src="/js/jquery-confirm.js"></script>

              <script src="/js/html2canvas.js"></script>
   -->
            <!--script src="/js/imageselected/jquery.min.js"></script>
            <script src="/js/imageselected/jquery.imgareaselect.pack.js"></script-->
              
            
              	  <script src="/css/frame/bootstrap/js/bootstrap.min.js"></script>
                  
            </body>
</html>
