<!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.lblFinanceCalculator}{/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}">
<!-- 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">
       <!--  <h2>{$language.lblFinanceCalculator}</h2> -->

        </div>
      </div>


    <div id="finance-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">
            <h1 class="h4 font-weight-bold">{$language.lblFinanceCalculator}</h1>
            <p class="font-family-primary mb-lg-5 mb-4">{$language.lblFinanceInTwoStepsMini}</p>
          </div>
          <div class="col-lg-6 col-md-6 col-sm-12">
            <div class="finance-calculator-box form-blk col-md-7 col-12 p-0">
              <h6 class="font-weight-bold f15 mb-4">{$language.lblStepOneSelectMini}</h6>
              <div class="col-12 p-0 mb-4">
                <label class="font-normal text-secondary mb-1 font-weight-bold">{$language.lblModel}</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">
                <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.lblStepTwoSelectDownpayAndTerm}</h6>
          <div class="finance-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.lblDownpayment} (<span id="downpaymentval">{$downPaymentPercentage}</span>%) </label>
                <div class="row align-items-center">
                  <div class="col-sm-8 col-12" dir="ltr">
                    <div id="donwpaymentrangeslider" class="mb-3 mt-4"></div>
                    <div class="d-flex justify-content-between font-xsmall text-muted">
                      <span>{$downPaymentPercentage}%</span>
                      <span>80%</span>
                    </div>
					
                  </div>
                  <div class="col-sm-4 col-12" dir="ltr">
                    <div id="donwpaymentamount" class="h6 font-weight-bold m-0">0</div>
                    <span class="font-xsmall text-muted"> {$currencySymbol}</span>
                  </div>
                </div>
              </div>
              <div class="col-12 p-0 mb-4" >
                <label class="font-normal text-secondary mb-0 font-weight-bold">{$language.lblTerm}</label>
                <div class="row align-items-center">
                  <div class="col-sm-8 col-12" dir="ltr">
                    <div id="termrangeslider" class="mb-3 mt-4"></div>
                    <div class="d-flex justify-content-between font-xsmall text-muted">
                      <span>12</span>
                      <span>{$finance_term}</span>
                    </div>
                  </div>
                  <div class="col-sm-4 col-12">
                    <div id="termlength" class="h6 font-weight-bold m-0"></div>
                    <span class="font-xsmall text-muted">{$language.lblMonths}</span>
                  </div>
                </div>
              </div>
              <div class="col-sm-8 col-12 p-0 mb-4">
                <label class="font-normal text-secondary mb-1 font-weight-bold">{$language.lblFinanceRate} <span class="font-normal font-weight-normal">*</span></label>
                <input type="text" class="form-control"  id="finRate"  readonly="readonly"/>
              </div>
              <div class="col-12 p-3 mb-lg-5 mb-4 bg-light">
                <p class="font-family-primary text-secondary mb-0">{$language.lblMonthlyPayment}</p>
                <h5 class="text-secondary font-weight-bold mb-4" id="monthlyPayment"></h5>
                <p class="font-family-primary font-base text-secondary font-weight-bold mt-2 mb-3">{$language.lblSpecialOffer}</p>
				<p id="detailedDesc"></p>
                <p class="font-family-primary text-secondary">{$language.lblSpecialOfferText} {html->anchor href="/contact.html" class="text-primary" caption="{$language.lblLiveChatAgentNow}"}</p>
              </div>
              <div class="col-12 p-0 mb-5">
                <p class="font-family-primary text-secondary">{$language.lblFinanceDisclaim}</p>
				<h6 class="font-normal text-secondary font-weight-bold">{$language.lblDisclaimer}</h6>
                <p class="font-family-primary">{$language.lblDisclaimerText}</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">{$language.lblContinue}</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 type="text/javascript">
 var processingFeesPercentage 		= '{$processingFeesPercentage}';
 var downPaymentPercentage 		= '{$downPaymentPercentage}';
 var view_public_path 		= '{$view_public_path}';
 var redirectPath			= '';
 var finance_term               =   '{$finance_term}';
 var lblFinanceEMI              =   '{$language.lblFinanceEMI}';
 var lblFinanceEMIinfo              =   '{$language.lblFinanceEMIinfo}';
$( function() {
			$( "#monthlyPayment" ).html($.getFormattedCurrency(0));
                        
          $( "#donwpaymentrangeslider" ).slider({
              range: 'min',
              min: parseInt(downPaymentPercentage),
              max: 80,
              step: 1,
              
              slide: function(event, ui) {
				$( "#downpaymentval" ).html(ui.value);//$( "#donwpaymentrangeslider" ).slider( "values", 1 )
				financeRateCalculator();
              }
          });
		 
          $( "#termrangeslider" ).slider({
              range: 'min',
              min: 12,
              max: finance_term,
              step: 6,
              value: finance_term,
              slide: function(event, ui) {
				$( "#termlength" ).html(ui.value);
				financeRateCalculator();
              }
          });
          $( "#termlength" ).html($( "#termrangeslider" ).slider( "values", 1 ));
		  
		 $('#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(){ 
			var product_id 	= $('#variant option:selected').attr("product_id"); 
			$.ajax({
			type: "POST",
			url: GLOBAL_BASE_PATH + "/financecalculator/ajaxGetFinanceRate/",
			data: 'variantCode='+$(this).val()+'&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;
				$( "#detailedDesc" ).html(obj.detailedDescription);
				if(obj.financeRate!='')
				$( "#finRate" ).val(obj.financeRate+'%');
				financeRateCalculator();
			}
		});
			
		});
		$('.continue-btn').click(function(){
			var link = siteUrl;
			link = link.replace(/\/$/, "")
			if(redirectPath!='')
				link += '/'+redirectPath;
			window.location =   link;
		});
  });
function financeRateCalculator() {
	var mainPrice 				= $('#variant option:selected').attr("price"); 
	if($('#variant').val()!= '' && mainPrice>0) {
	var downpaymentvalslider	= $( "#downpaymentval" ).text();
	var downPayment				= (mainPrice *  downpaymentvalslider)/100;
	var financeAmount			=  mainPrice - downPayment;
	<!-- if(financeAmount <  50000) { -->
		  <!-- var differenceValue 	= 50000 - financeAmount; -->
		  <!-- downPayment			= downPayment - differenceValue; -->
		  <!-- financeAmount			= financeAmount + differenceValue; -->
	<!--  } -->
	var processingFees			= (financeAmount *  processingFeesPercentage)/100;
	if(processingFees >= 2500) {
		processingFees			= 2500 * 1.05; 
	} else if(processingFees <= 500) {
		processingFees			= 500 * 1.05; 
	}
	var totalFinanceAmount		= financeAmount + processingFees;
	var financeTerm				= $( "#termlength" ).text();
	var financeRate				= $( "#finRate" ).val();
	if(financeRate.indexOf("%")>= 0) {
		var array = financeRate.split('%');
		financeRate = array[0];
	}
	if(financeRate!='') 	{		
			financeRate		= financeRate/100;
		installment			= ((totalFinanceAmount*financeRate*financeTerm/12)+totalFinanceAmount+200)/financeTerm;
	} else
		installment 			= 0;
	installment			= Math.round(installment);
	downPayment			= Math.round(downPayment);
	$( "#monthlyPayment" ).html($.getFormattedCurrency(installment));
	$( "#donwpaymentamount" ).html(downPayment);
	}
}
$(document).ready(function(){
 //while coming back to this page on browser back button press, the dropdowns populated
		 if($('#series').val()>0) {
			$('#series').trigger("change");
			
		 }	
});
</script>
</body>
</html>
