<!DOCTYPE html>
<html lang="{$SelCurrLanguage}" dir="{$languageDirection}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>{if $commonMetaTitle}{$commonMetaTitle}{else}{$language.lblLeaseCalculator}{/if}</title>
<meta name="Description" content="{$commonMetaDescription}" />
<meta name="viewport" content="width=device-width">
{include file='CommonJavaScript.tpl'}
{include file='CommonStyles.tpl'}

{form->rootpath_script}
{form->basepath_script}

</head>
<body ng-controller="SearchCtrl" class="{$languageDirection}">
<!--
Start of Floodlight Tag: Please do not remove
Activity name of this tag: BMW - Find Your BMW - Leasing Page
URL of the webpage where the tag is expected to be placed: 
This tag must be placed between the <body> and </body> tags, as close as possible to the opening tag.
Creation Date: 09/11/2019
-->
<script type="text/javascript">
var axel = Math.random() + "";
var a = axel * 10000000000000;
document.write('<iframe src="https://6355536.fls.doubleclick.net/activityi;src=6355536;type=websi0;cat=bmw-f00b;u2=[language];dc_lat=;dc_rdid=;tag_for_child_directed_treatment=;tfua=;npa=;ord=' + a + '?" width="1" height="1" frameborder="0" style="display:none"></iframe>');
</script>
<noscript>
<iframe src="https://6355536.fls.doubleclick.net/activityi;src=6355536;type=websi0;cat=bmw-f00b;u2=[language];dc_lat=;dc_rdid=;tag_for_child_directed_treatment=;tfua=;npa=;ord=1?" width="1" height="1" frameborder="0" style="display:none"></iframe>
</noscript>
<!-- End of Floodlight Tag: Please do not remove -->
<!--
Start of Floodlight Tag: Please do not remove
Activity name of this tag: BMW - Find Your BMW - Lease Calculator
URL of the webpage where the tag is expected to be placed: 
This tag must be placed between the <body> and </body> tags, as close as possible to the opening tag.
Creation Date: 09/11/2019
-->
<script type="text/javascript">
var axel = Math.random() + "";
var a = axel * 10000000000000;
document.write('<iframe src="https://6355536.fls.doubleclick.net/activityi;src=6355536;type=websi0;cat=bmw-f00d;u2=[language];dc_lat=;dc_rdid=;tag_for_child_directed_treatment=;tfua=;npa=;ord=' + a + '?" width="1" height="1" frameborder="0" style="display:none"></iframe>');
</script>
<noscript>
<iframe src="https://6355536.fls.doubleclick.net/activityi;src=6355536;type=websi0;cat=bmw-f00d;u2=[language];dc_lat=;dc_rdid=;tag_for_child_directed_treatment=;tfua=;npa=;ord=1?" width="1" height="1" frameborder="0" style="display:none"></iframe>
</noscript>
<!-- End of Floodlight Tag: Please do not remove -->


<!-- Begin : Outer Pane -->
<div id="main"> 
  <!-- Begin : Header Pane--> 
  {include file='CommonTop.tpl'} 
  <!-- End : Header -->
  <div id="content-wrapper" ng-show="!query" >
    <div class="wrapper clearfix">
      <div id="common_message"></div>
      <div id="common_message_forgot" ></div>
      <div id="invalid_email"></div>
      <div class="full-width-div clearfix">
       

        </div>
      </div>

    <div id="lease-calculator-blk">
      <div class="container pt-4 pb-5">
        <div class="row mt-3">
          <div class="col-lg-12 col-md-12 col-sm-12">
            <h4 class="font-weight-bold">{$language.lblLeaseCalculator}</h4>
            <p class="font-family-primary mb-lg-5 mb-4">{$language.lblLeaseInTwoSteps}</p>
          </div>
          <div class="col-lg-6 col-md-6 col-sm-12">
            <div class="lease-calculator-box form-blk col-md-9 col-12 p-0">
              <h6 class="font-weight-bold f15 mb-4">{$language.lblStepOneSelectBMW}</h6>
              <div class="col-12 p-0 mb-4">
                <label class="font-normal text-secondary mb-1 font-weight-bold">{$language.lblBrowse}</label>

				{form->select name="series" caption="->{$language.lblSelect}" class="form-control" options=$resBrandCategories} 
              </div>
              <div class="col-12 p-0 mb-4">
                <label class="font-normal text-secondary mb-1 font-weight-bold">{$language.lblShortDescription}</label>

				{form->select name="shortDesc" caption="->{$language.lblSelect}" class="form-control"} 
              </div>
              <div class="col-12 p-0 mb-4">
                <label class="font-normal text-secondary mb-1 font-weight-bold">{$language.lblVariant}</label>

				{form->select name="variant" caption="->{$language.lblSelect}" class="form-control"} 
              </div>
              <div class="col-12 p-0 mb-4">
				<div id="leasestaticBlock">
					{if $staticBlock|default:''}
					{$staticBlock|unescape:"html"}
					{/if} 
				</div>
                <img id="vehicleImage" src="" class="img-fluid"/>
                <h6 id="productTitle" class="text-secondary font-weight-bold mt-0 mb-3"></h6>
                <div id="regularPriceText" class="text-secondary font-weight-bold mt-0"></div>
                <div id="regularPrice" class="text-secondary font-weight-bold mt-0 mb-3 h4"></div>
               
              </div>
            </div>
          </div>
          <div class="col-lg-6 col-md-6 col-sm-12">
          <h6 class="font-weight-bold f15 mb-4">{$language.lblLeaseStepTwoLeaseMileage}</h6>
          <div class="lease-calculator-box form-blk col-md-9 col-12 p-0">
              <div class="col-12 p-0 mb-4">
                <label class="font-normal text-secondary mb-0 font-weight-bold">{$language.lblDurationOfLease}</label>
                <div class="row align-items-center">
                  <div class="col-sm-8 col-12">
                    <div id="durationrangeslider" class="mb-3 mt-4"></div>
                    <div class="clearfix font-xsmall text-muted">
								  <span class="flt-lft">36</span>
                                                                  <span class="flt-rgt">12</span>
								</div>                  </div>
                  <div class="col-sm-4 col-12">
                    <div id="duration" class="h6 font-weight-bold m-0"></div>
                    <span class="font-xsmall text-muted">{$language.lblMonths}</span>
                  </div>
                </div>
              </div>
              <div class="col-12 p-0 mb-4">
                <label class="font-normal text-secondary mb-0 font-weight-bold">{$language.lblMileage}</label>
                <div class="row align-items-center">
                  <div class="col-sm-8 col-12">
                    <div id="mileagerangeslider" class="mb-3 mt-4"></div>
                    <div class="clearfix font-xsmall text-muted">
                      <span class="flt-lft">10K</span>
                      <span class="flt-rgt">25K</span>
                    </div>
                  </div>
                  <div class="col-sm-4 col-12">
                    <div id="mileage" class="h6 font-weight-bold m-0"></div>
                    <span class="font-xsmall text-muted">{$language.lblMileage}</span>
                  </div>
                </div>
              </div>
              <div class="col-12 p-0 mb-4">
                <label class="font-normal text-secondary mb-2 font-weight-bold">{$language.lblTireChange}</label>
                <div class="row align-items-center">
                  <div class="col-auto">
                    <input type="radio" id="yes" name="tirechange" value="yes" class="tirechange" checked="checked"/>
                    <label for="yes">{$language.lblYes}</label>
                  </div>
                  <div class="col-auto">
                    <input type="radio" id="no" name="tirechange"  value="no"  class="tirechange"/>
                    <label for="no">{$language.lblNo}</label>
                  </div>
                </div>
              </div>
              <div class="col-sm-8 col-12 p-0 mb-5">
                <label class="font-normal text-secondary mb-1 font-weight-bold">{$language.lblAmount}</label>
                <input type="text" class="form-control" id="leaseRate"  readonly="readonly"/>
              </div>
			   <div class="col-12 p-0 mb-5">
                <h6 class="font-normal text-secondary font-weight-bold">{$language.lblDisclaimer}</h6>
                <p class="font-family-primary text-justify">{$language.lblLeaseDisclaimer}</p>
              </div>
              <div class="col-12 p-0 mb-4">
                <button class="btn-primary continue-btn cursor-pointer py-3 px-5 border-0 font-small font-weight-bold">Continue</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- End : Content Pane --> 
  </div>
  <!-- Begin : Footer	Pane --> 
  {include file='CommonBottom.tpl'} 
  <!-- End : Footer Pane --> 
</div>
<!-- End : Outer Pane --> 
{include file='CommonJavaScriptBottom.tpl'} 

{html->messages_script id="common_message"} 

<script>
 var view_public_path 		= '{$view_public_path}';
  var lblFinanceEMI              =   '{$language.lblFinanceEMI}';
   var lblFinanceEMIinfo              =   '{$language.lblFinanceEMIinfo}';
  var redirectPath			= '';
  $( function() {
          $( "#durationrangeslider" ).slider({
              range: 'min',
              min: -36,
              max: -12,
              start:[-36,-36],
              step: 12,
              slide: function(event, ui) {
				$( "#duration" ).html(Math.abs(ui.value));
				leaseCalculator();
              }
          });
            $( "#durationrangeslider" ).slider( "value", -36 )
          $( "#duration" ).html(36);
          
          
          $( "#mileagerangeslider" ).slider({
              range: 'min',
              min: 10,
              max: 25,
			  step: 5,
              slide: function(event, ui) {
				$( "#mileage" ).html(ui.value*1000);
				leaseCalculator();
              }
          });
          $( "#mileage" ).html($( "#mileagerangeslider" ).slider( "values", 1 )*1000);
		  
		  $('#series').change(function(){ 
			if($(this).val() != ''){
				$.ajax({
					type: "POST",
					url: GLOBAL_BASE_PATH + "/financecalculator/ajaxGetShortDesc/",
					data: 'category='+$(this).val(),
					success: function (data) 
					{          		
						  $( "#shortDesc" ).html(data);
					}
				});
			}
		});
		$('#shortDesc').change(function(){ 
			if($(this).val() != ''){
				$.ajax({
					type: "POST",
					url: GLOBAL_BASE_PATH + "/financecalculator/ajaxGetProducts/",
					data: 'shortDesc='+$(this).val(),
					success: function (data) 
					{          		
						  $( "#variant" ).html(data);
					}
				});
			}
		});
		$('#variant').change(function(){ 
			leaseCalculator();
			var product_id 	= $('#variant option:selected').attr("product_id"); 
			if(typeof product_id !== "undefined") {
				$.ajax({
					type: "POST",
					url: GLOBAL_BASE_PATH + "/leasecalculator/ajaxgetProductDetails/",
					data: 'product_id='+product_id,
					success: function (data) 
					{          		
					  var obj = JSON.parse(data);
						$( "#productTitle" ).html(obj.productTitle);
						$( "#regularPriceText" ).html('<i class="icon-info" data-toggle="tooltip" data-placement="top" title="'+lblFinanceEMIinfo+'"></i> '+lblFinanceEMI);
                                                $( "#regularPrice" ).html($.getFormattedCurrency(obj.monthlyInstallment));
						$( "#vehicleImage" ).attr('src',view_public_path+'/uploads/catalog/vehicles/thumb/'+obj.vehicleImage);
						redirectPath = obj.requestPath;
						$( "#leasestaticBlock" ).hide();
					}
				});
			} else {
				$( "#leasestaticBlock" ).show();
			}
      });
	  $('.tirechange').change(function(){ 
		leaseCalculator();
      });
	  $('.continue-btn').click(function(){
		var link = siteUrl;
			link = link.replace(/\/$/, "")
			if(redirectPath!='')
				link += '/'+redirectPath;
			window.location =   link;
			
		});
});
function leaseCalculator() {
if($('#variant').val()!= '') {
	var duration 		= $( "#duration" ).text();
	var mileage  		= ($( "#mileage" ).text())/1000;
	var variantCode  	= $('#variant').val();
	var tyreChange		= $('input[name=tirechange]:checked').val();
	$.ajax({
		type: "POST",
		url: GLOBAL_BASE_PATH + "/leasecalculator/ajaxGetLeaseRate/",
		data: 'variantCode='+variantCode+'&duration='+duration+'&mileage='+mileage+'&tyreChange='+tyreChange,
		success: function (rate) 
		{   
			if(rate!='')		
			$( "#leaseRate" ).val($.getFormattedCurrency(rate));
			else 
			$( "#leaseRate" ).val('');
		}
	});
}
}
</script>
</body>
</html>
