<!DOCTYPE html>
<html ng-app="myapp" lang="{$SelCurrLanguage}" dir="{$languageDirection}">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="image_src" href="{$commonMetaImage}" />
    <title>{$commonMetaTitle}</title>
    <meta name="Description" content="{$commonMetaDescription|unescape:'html'|escape:'html'}" />
    <meta name="viewport" content="width=device-width">
    <meta name="Keywords" content="{$commonMetaKeywords|unescape:'html'|escape:'html'}" />
    <meta property="og:title" content="{$commonMetaTitle|unescape:'html'|escape:'html'}"/>
    <meta property="og:description" content="{$commonMetaDescription|unescape:'html'|escape:'html'}"/>
    <meta property="og:image" content="{$commonMetaImage}"/>
    <meta property="og:url" content="{$views_host_share}/{$resultProductProduct[0]['productID']|sef_path:'product':$catalog}"/>
    {include file='CommonStyles.tpl'}
    <link rel="stylesheet" href="{$view_styles}/productdetails.css" />
    {include file='CommonJavaScript.tpl'}
     {html->script src="{$common_frontend_js}/3deye-mini.js"}
     <script type="text/javascript">
         var colorCustID = '{$colorCustID}';
         var intCustID   = '{$intCustID}';
         var languageDir = '{$languageDirection}';
         var stripeCustID = '{$stripeCustID}';
         var roofCustID   = '{$roofCustID}';
     </script>
<script>
  fbq('track', 'AddToWishlist');
</script>
</head>
  
<body ng-controller="SearchCtrl" class="product-detail">
 <!--
Start of Floodlight Tag: Please do not remove
Activity name of this tag: Model - View Details Button - Find out More - Find Your Mini
URL of the webpage where the tag is expected to be placed: https://www.findyourmini.ae/en/cooper-salt-165.html
This tag must be placed between the <body> and </body> tags, as close as possible to the opening tag.
Creation Date: 05/27/2020
-->
<script type="text/javascript">
var axel = Math.random() + "";
var a = axel * 10000000000000;
document.write('<iframe src="https://6678504.fls.doubleclick.net/activityi;src=6678504;type=websi0;cat=model000;u4=[language];u6=[modelName];u12=[Sub-modelName];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://6678504.fls.doubleclick.net/activityi;src=6678504;type=websi0;cat=model000;u4=[language];u6=[modelName];u12=[Sub-modelName];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 -->

   <noscript>
      <div class="noscript-alert">
        <div class="alert-wrapper"><strong>{$language.msgJavascriptDisabled} </strong>{$language.msgJavascriptEnable}</div>
      </div>
    </noscript>
    <div class="common_message" id="common_message"></div>  
 {*<!----------------------------------------------- Begin : Outer Pane ---------------------------------------------->*}
    <div id="main" class="outer">
 {*<!------------------------------------------------ Begin : Header Pane ------------------------------------------------>*} 
           {include file='CommonTop.tpl'} 
 {*<!--------------------------------------------- End : Header------------------------------------------------------>*}           
 {*<!------------------------------------------- Begin : Content Pane ------------------------------------------------>*}
 {assign var="productCurrency" value=$resultProductProduct[0].productDefaultCurrency}
  {assign var="productDefaultCurrency" value=$resultProductProduct[0].productDefaultCurrency}
  {assign var="productStatus" value=$resultProductProduct[0].productStatus}
  {form->hidden name="selectedProductOption" value=$resultProductProduct[0].productOptionID}
     <div class="content-wrapper" id="content-wrapper" ng-show="!query" >
       
        <div class="product-detail-head d-flex position-sticky top-0 bg-dark">
            <div class="container">
              <div class="row">
                <ul class="nav nav-tabs border-bottom-0 pl-3 text-uppercase" id="productdetailTab" role="tablist">

                  {foreach name="product_options" from=$customOption item="po" key="optkey"}
                      {if $po.variants}
                  <li class="nav-item">
                    <a class="nav-link custopts {if $optkey eq 0 && $fromCart|default:'' neq 'Yes'} active {/if}" rel='{$po.customOptionID}' id="{$po.customOptionName}-tab" href="#{$po.customOptionName}" data-toggle="tab" role="tab" aria-controls="{$po.customOptionName}" aria-selected="{if $optkey eq 0}true{else}false{/if}">{$language.{"lbl"|cat:$po.customOptionName}}</a> 
                  </li>
                  {/if}
                  {/foreach}
				  
                  <li class="nav-item">
                    <a class="nav-link  custopts" id="Packages-tab" data-toggle="tab" href="#Packages" role="tab" aria-controls="Packages" aria-selected="false">{$language.lblPackages}</a>
                  </li>				  
                  <li class="nav-item">
                    <a class="nav-link custopts" id="Showroom-tab" data-toggle="tab" href="#Showroom" role="tab" aria-controls="Showroom" aria-selected="false">{$language.lblShowroom}</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" id="Summary-tab" rel="{$selectedProductID}-{$resultProductProduct[0].productOptionID}"  data-toggle="tab" href="#Summary" role="tab" aria-controls="Summary" aria-selected="false">{$language.lblSummary}</a>
                  </li>
				   {if $productStatus|default:'' eq 'Active'}
                  <li class="nav-item">
                    <a class="nav-link {if $fromCart|default:'' eq 'Yes'} active {/if}" id="Payment-tab" rel="{$selectedProductID}-{$resultProductProduct[0].productOptionID}" data-toggle="tab" href="#Payment" role="tab" aria-controls="Payment" aria-selected="false">{$language.lblPayment}</a>
                  </li>
				  {/if}
                </ul>
              </div>
            </div>
        </div>
       
        <div class="product-detail mb-md-5 mb-3">
            <div class="tab-content" id="productdetailTabContent">
  {foreach name="product_options" from=$customOption item="po" key="pokey"}
                   {if $po.variants}
              <div class="tab-pane fade {if $pokey eq 0 && $fromCart|default:'' neq 'Yes'}show active {/if}" id="{$po.customOptionName}" role="tabpanel" aria-labelledby="{$po.customOptionName}-tab">
               {if $po.customOptionName neq 'Upholstery' and $po.customOptionName neq 'Trim'}<div class="container">{/if}
                <div class="row  detail-outer-block {if $po.customOptionName eq 'Upholstery' or $po.customOptionName eq 'Trim'} m-0 {/if}">
                 <div class="col-12 col-lg-7 col-xl-8 {if $po.customOptionName eq 'Upholstery' or $po.customOptionName eq 'Trim'}px-0{else}pr-lg-5{/if} {if $po.customOptionName eq 'Trim'}panoramaview{/if}" >
                  {if $po.customOptionName neq 'Upholstery' and $po.customOptionName neq 'Trim'}
                      <h1 class="h5 text-secondary font-weight-semibold pt-5 mb-3 product-title text-uppercase position-relative">{$resultProductProduct[0].productTitle}</h1>
                  {/if}
                  {if $po.customOptionName neq 'Upholstery' and $po.customOptionName neq 'Trim' and $po.customOptionName neq 'Stripe' and $po.customOptionName neq 'Roof'}
                      {include file='catalog/default/360degreeview.tpl'} 
                   {else}
                       {if $po.customOptionName eq 'Trim'}
                           {include file='catalog/default/Panoramaimageview.tpl'} 
                        {else}
                            {include file='catalog/default/Singleimageview.tpl'} 
                       {/if}
                   {/if}
                    </div>
                  <div class="col-12 col-lg-5 col-xl-4 mb-4 pt-5 border-left pl-lg-5  h-100  ">
                       {if $po.customOptionName eq 'Upholstery' || $po.customOptionName eq 'Trim'}
                      <h5 class="text-secondary font-weight-semibold  mb-3 product-title text-uppercase position-relative">{$resultProductProduct[0].productTitle}</h5>
                  {/if}
                       <div class="pb-lg-5 mb-lg-5 w-100 align-content-center flex-wrap h-100 d-flex">
                        <h4 class="text-secondary font-weight-semibold text-uppercase text-left">{$language.{"lbl"|cat:$po.customOptionName}}</h4>
                           <ul class="border-bottom-0 mx-0 px-0 clearfix text-left list-unstyled mb-5 nav w-100 pb-5 position-relative specs-list  custopt_{$po.customOptionID}" id="productdetailColorTab" role="tablist">
                            {include file='catalog/default/AjaxCustVariants.tpl'} 
                           </ul>
                      </div>
                  </div>
                </div>
               {if $po.customOptionName neq 'Upholstery' and $po.customOptionName neq 'Trim'}</div>{/if}
                <div class="product-detail-bottom w-100 position-fixed left-0 bottom-0 bg-white py-3 px-md-5 px-4">
                  <div class="row">
                    <div class="col-6 d-md-inline-block d-none">
                      <ul class="selected-specs-list d-flex h-100 list-unstyled p-0 m-0">
                          {foreach name="product_options" from=$customOption item="posumm" key="pokeysumm"}
                              {if $pokeysumm>$pokey}
                                  {continue}
                              {/if}    
                                <li class="d-flex flex-column">
                                  <label class="text-uppercase mb-2">{$language.{"lbl"|cat:$posumm.customOptionName}}</label>
                                  <img src="{$view_public_path}/uploads/catalog/custom-option-variant/{$setdefaultimages[$posumm.customOptionID]['image']}" rel="{$setdefaultimages[$posumm.customOptionID]['id']}"  class="img-fluid sel_variant_{$posumm.customOptionID}" alt="{$posumm.customOptionName}"/>
                                </li>
                            {/foreach}
                      </ul>
                    </div>
                    <div class="col-md-6 col-12 text-right align-items-center d-flex justify-content-end">
                     <span class="d-inline-block font-weight-semibold h5 text-secondary mr-md-5 mr-3 mb-0 price">{*{$resultProductProduct[0].productOptionProductPrice|price:'':$productDefaultCurrency:$currentCurrencyID}*}
					    {if $resultProductProduct[0].monthlyInstallment|default:'0' gt 0}
					    <div class="f15 font-weight-light d-block text-muted"><i class="icon-info font-normal" data-toggle="tooltip" data-placement="top" title="{$language.lblFinanceEMIinfo}"></i> {$language.lblFinanceEMI}</div> {$resultProductProduct[0].monthlyInstallment|price:'':$productDefaultCurrency:$currentCurrencyID}
					    {/if}
					    {*{if $resultProductProduct[0].leasePrice|default:'0' gt 0}
					    <div class="font-base font-weight-light text-muted d-md-block d-none">{$language.lblLeaseEMI} <span class="d-inline-block font-weight-semibold text-dark">{$resultProductProduct[0].leasePrice|price:'':$productDefaultCurrency:$currentCurrencyID}</span> <i class="icon-info font-normal" data-toggle="tooltip" data-placement="top" title="{$language.lblLeaseEMIinfo}"></i></div>
					    {/if}*}
                        </span>
                      <button class="btn btn-primary continue-btn px-4 font-weight-normal text-uppercase font-normal"  rel="{$selectedProductID}-{$resultProductProduct[0].productOptionID}">{$language.lblContinue}</button>
                    </div>
                  </div>
                </div>
              </div>
                    {/if}
            {/foreach}
              <div class="tab-pane fade " id="Packages" role="tabpanel" aria-labelledby="Packages-tab">
               <div class="container">
                <div class="row detail-outer-block">
                  <div class="col-12 col-lg-7 col-xl-8 pr-lg-5" >
                    <h5 class="text-secondary font-weight-semibold pt-5 mb-3 product-title text-uppercase position-relative">{$resultProductProduct[0].productTitle}</h5>
                  <div class="product-view-360 d-inline-block w-100 position-relative">
                    <div class="product-detail-container">
                      <div class="myCarPackages" rel='Packages'></div>
                    </div>
                  </div>
                 
                </div>
                  <div class="col-12 col-lg-5 col-xl-4 order-last mb-4 pt-5 border-left pl-lg-5  h-100">
                        <h4 class="text-secondary font-weight-semibold text-uppercase text-left">{$language.lblSpecifications}</h4>
                      
                      <div class="pt-3 order-last poduct-detail-specification">
                        <ul class="list-unstyled p-0 poduct-detail-specification-list text-secondary font-weight-semibold mb-3 d-block">
							{foreach name="specifics" from=$specificationDetails item="specs" key="spkey"}
                            {if $specs.value neq 'space'}  
								{if $specs.type eq 'H'}
								<li class="pb-2">{$specs.value}</li>
								{else}
								<li class="pb-2"><span class="d-inline-block text-left mr-2">{$specs.profileCode}</span>{$specs.value}</li>
								{/if}
							{else}
								<li class="pb-2 my-2"></li>
							{/if}
							{/foreach}
                        </ul>
                        <!-- <span class="d-inline-block text-left float-left">&nbsp;</span>-->
                        <div class="col-12 px-0">
                           <a href="" class="view-more-btn text-uppercase text-dark font-weight-bold py-2 d-inline-block d-lg-none mb-3"> <span class="more"><i class='bg-dark font-weight-bold font-xsmall icon-plus mr-2 rounded-circle text-center text-white'></i>{$language.lblViewmore}</span><span class="less"><i class='bg-dark font-weight-bold font-xsmall icon-minus mr-2 rounded-circle text-center text-white'></i>{$language.lblViewless}</span></a>
                        </div>
                      </div>
                  </div>
                </div>
               </div>
                <div class="align-items-center bg-white bottom-0 d-flex justify-content-end left-0 position-fixed product-detail-bottom px-4 px-md-5 py-3 text-right w-100">
                      <span class="d-inline-block font-weight-semibold h5 text-secondary mr-md-5 mr-3 mb-0 price">{*{$resultProductProduct[0].productOptionProductPrice|price:'':$productDefaultCurrency:$currentCurrencyID}*}
                        {if $resultProductProduct[0].monthlyInstallment|default:'0' gt 0}
                            <div class="f15 font-weight-light d-block text-muted"><i class="icon-info font-normal" data-toggle="tooltip" data-placement="top" title="{$language.lblFinanceEMIinfo}"></i> {$language.lblFinanceEMI}</div> {$resultProductProduct[0].monthlyInstallment|price:'':$productDefaultCurrency:$currentCurrencyID}
                            {/if}
                            {*{if $resultProductProduct[0].leasePrice|default:'0' gt 0}
                            <div class="font-base font-weight-light text-muted d-md-block d-none">{$language.lblLeaseEMI} <span class="d-inline-block d-inline-block font-weight-semibold text-dark">{$resultProductProduct[0].leasePrice|price:'':$productDefaultCurrency:$currentCurrencyID}</span> <i class="icon-info font-normal" data-toggle="tooltip" data-placement="top" title="{$language.lblLeaseEMIinfo}"></i></div>
                            {/if}*}
                        </span>
                      <button class="btn btn-primary continue-btn px-4 font-weight-normal text-uppercase font-normal" rel="{$selectedProductID}-{$resultProductProduct[0].productOptionID}">{$language.lblContinue}</button>
                </div>
              </div> 
             			
              <div class="tab-pane fade" id="Showroom" role="tabpanel" aria-labelledby="Showroom-tab">
               <div class="container">
                <div class="row detail-outer-block">
                  <div class="col-12 col-lg-7 col-xl-8 pr-lg-5">
                    <h5 class="text-secondary font-weight-semibold pt-5 mb-3 product-title text-uppercase position-relative">{$resultProductProduct[0].productTitle}</h5>
                 
                  <div class="product-view-360 order-lg-2 order-1 position-relative">
                    <div class="container product-detail-container">
                          <div class="myCarShowroom"></div>
                    </div>
                  </div>
                    </div>
                  <div class="col-12 col-lg-5 col-xl-4 order-last mb-4 pt-5  pl-lg-5 pt-lg-0  h-100 ">
                   <div class="pb-lg-5 mb-lg-5 w-100 align-content-center flex-wrap h-100 d-flex">
                        <h5 class="text-secondary font-weight-semibold pt-lg-5 mb-3 product-title text-uppercase">{$language.lblSelectShowroom}</h5>
                        <p class="text-secondary mb-2 text-left font-weight-semibold">{$language.lblSelectYourNearestShowroom}</p>
                        {form->select 
                          id="showroom"
                          name="showroom"
                          class="form-control form-control-lg text-secondary" 
                          options=$resShowrooms
                        }
                     
                      </div></div>
                </div>
               </div>
                <div class="product-detail-bottom w-100 position-fixed left-0 bottom-0 bg-white py-3 px-md-5 px-4">
                  <div class="row">
                    <div class="col-6 d-md-inline-block d-none">
                      <ul class="selected-specs-list d-flex h-100 list-unstyled p-0 m-0">
                         {foreach name="product_options" from=$customOption item="posumm" key="pokeysumm"}
                              {if $pokeysumm>$pokey}
                                  {continue}
                              {/if}    
                                <li class="d-flex flex-column">
                                 <label class="mb-2 text-uppercase">{$language.{"lbl"|cat:$posumm.customOptionName}}</label>
                                  <img src="{$view_public_path}/uploads/catalog/custom-option-variant/{$setdefaultimages[$posumm.customOptionID]['image']}"  class="img-fluid sel_variant_{$posumm.customOptionID}"/>
                                </li>
                            {/foreach}
                      </ul>
                    </div>
                    <div class="col-md-6 col-12 text-right align-items-center d-flex justify-content-end">
                      <span class="d-inline-block font-weight-semibold h5 text-secondary mr-md-5 mr-3 mb-0 price">{*{$resultProductProduct[0].productOptionProductPrice|price:'':$productDefaultCurrency:$currentCurrencyID}*}
					    {if $resultProductProduct[0].monthlyInstallment|default:'0' gt 0}
					    <div class="f15 font-weight-light d-block text-muted"><i class="icon-info font-normal" data-toggle="tooltip" data-placement="top" title="{$language.lblFinanceEMIinfo}"></i> {$language.lblFinanceEMI}</div> {$resultProductProduct[0].monthlyInstallment|price:'':$productDefaultCurrency:$currentCurrencyID}
					    {/if}
					    {*{if $resultProductProduct[0].leasePrice|default:'0' gt 0}
					    <div class="font-base font-weight-light text-muted d-md-block d-none">{$language.lblLeaseEMI} <span class="d-inline-block font-weight-semibold text-dark">{$resultProductProduct[0].leasePrice|price:'':$productDefaultCurrency:$currentCurrencyID}</span> <i class="icon-info font-normal" data-toggle="tooltip" data-placement="top" title="{$language.lblLeaseEMIinfo}"></i></div>
					    {/if}*}
                        </span>
                      <button class="btn btn-primary continue-btn px-4 font-weight-normal text-uppercase font-normal"  rel="{$selectedProductID}-{$resultProductProduct[0].productOptionID}">{$language.lblContinue}</button>
                    </div>
                  </div>
                </div>
              </div>
              <div class="tab-pane fade" id="Summary" role="tabpanel" aria-labelledby="Summary-tab">
                <div id="summury-main-blk">
                  <div class="container">
                   <div class="row detail-outer-block">
                     <div class="product-view-360 col-12 col-lg-7 col-xl-8">
                       <h5 class="text-secondary font-weight-semibold pt-5 mb-3 product-title text-uppercase position-relative">{$resultProductProduct[0].productTitle}</h5>
                        <div class="align-items-center d-flex flex-wrap h-100 position-relative ">
						  <img src="{$view_public_path}/uploads/catalog/vehicles/large/{$resProductSummaryImages[0]['vehicleImage']}" alt="{$resultProductProduct[0].productTitle}" class="img-fluid summary-img"/>
                        </div>
                      </div>
                      <div class="col-12 col-lg-5 col-xl-4 order-last mb-4 pt-5 border-left pl-lg-5  h-100  ">
                            <h4 class="text-secondary font-weight-semibold text-uppercase text-left">{$language.lblSummary}</h4>
                            <h6 class="text-secondary font-weight-semibold pt-3 mb-2  text-uppercase">{$resultProductProduct[0].productTitle}</h6>
                             {*<div class="text-dark font-weight-semibold summary-price">{$resultProductProduct[0].productOptionProductPrice|price:'':$productDefaultCurrency:$currentCurrencyID}</div>*}
                          <div class="summary-left">
                          <div class="text-left">
                              {if $resultProductProduct[0].monthlyInstallment|default:'0' gt 0}
							<span class="pt-2 d-block px-0"><a href="" class="clearfix d-lg-block font-weight-light text-muted" id="finance-calculator">{$language.lblFinanceEMI} {$resultProductProduct[0].monthlyInstallment|price:'':$productDefaultCurrency:$currentCurrencyID} {$language.lblPermonth} <i class="d-none d-lg-block  float-lg-right mt-1 icon-info  text-muted cursor-pointer font-normal" data-toggle="tooltip" data-placement="bottom" title="{$language.lblFinanceEMIinfo}"></i> <i class="float-lg-right icon-calculator mr-2 mt-1 text-info"></i><i class="d-lg-none  mt-1 icon-info  text-muted cursor-pointer" data-toggle="tooltip" data-placement="bottom" title="{$language.lblFinanceEMIinfo}"></i></a> </span>
                            {/if}
                            {*{if $resultProductProduct[0].leasePrice|default:'0' gt 0}
							<span class="pb-2 d-md-block d-none px-0 mt-1"><a href="" class="clearfix d-lg-block font-weight-light text-muted" id="lease-calculator">{$language.lblLeaseEMI} {$resultProductProduct[0].leasePrice|price:'':$productDefaultCurrency:$currentCurrencyID} {$language.lblPermonth} <i class="d-none d-lg-block float-lg-right mt-1 icon-info text-muted cursor-pointer font-normal" data-toggle="tooltip" data-placement="bottom" title="{$language.lblLeaseEMIinfo}"></i> <i class="float-lg-right icon-calculator mr-2 mt-1  text-info"></i> <i class="d-lg-none mt-1 icon-info text-muted cursor-pointer" data-toggle="tooltip" data-placement="bottom" title="{$language.lblLeaseEMIinfo}"></i> </a> </span>
							{/if}*}
                          </div>
{if !empty($resultProductProduct[0].shortDescription)}
						  <span class="text-primary mr-1" style="cursor:pointer;" id="offerelement">{$resultProductProduct[0].shortDescription}</span>
						  {if $resultProductProduct[0].financeDesc|default:'' neq ''}<p id="offerDesc" class="hide">{$resultProductProduct[0].financeDesc|unescape:'html'} </p>{*<i class="icon-info" data-toggle="tooltip" data-placement="top" data-html="true" title="{$resultProductProduct[0].financeDesc|unescape:'html'|escape:'html'}"></i>*}{/if}
						  {/if}
						  <div class="booked-cls-text {if $productStatus|default:'' eq 'Áctive'}hide{/if}"> 
						  <h6 class="text-danger mt-3">{$language.lblVehicleInactiveText}
						  </h6>
							<p>{$language.lblVehicleInactiveSubText}</p>
							
							
							{$language.lblVehicleInactiveSubText1}
							
						  </div>
                          <div class="pt-3 poduct-detail-specification specification-summary">
                            
                          </div>
                          <div class="col-12 d-lg-none d-block btn-group mt-3">
						  
                            <div class="row">
                              <div class="col mb-3">
                          {html->anchor href="test-drive.html" target="_blank" class="align-items-center btn btn-outline-primary d-inline-flex font-weight-bold font-xsmall  w-100 justify-content-center booked-cls-link" content="<i class='icon-testdrive mr-2 h5 mb-0'></i>{$language.lblBookATestDrive}"}
                                </div>
                              <div class="col mb-3">
                                <a href="" class="align-items-center btn btn-primary d-inline-flex font-weight-bold font-xsmall  w-100 justify-content-center" data-toggle="modal" data-target="#downloadproductinfo" onclick="refreshdownloadinfo();"><i class="icon-pdf mr-2 font-normal mb-0"></i>{$language.lblDownloadProductInfo}</a>
                              </div>
                             <div class="col mb-3">
                                <a href="" class="align-items-center btn btn-outline-primary d-inline-flex font-weight-bold font-xsmall  w-100 justify-content-center" data-toggle="modal" data-target="#requestacallback"><i class="icon-telephone mr-2 h6 mb-0"></i>{$language.lblRequestCallBack}</a>
                              </div>
                            </div>
                          </div>
                        
						</div>
						</div>
                      </div>
                    </div>
                  </div>
                  <div class="product-detail-bottom w-100 position-fixed left-0 bottom-0 bg-white pb-3 pt-md-3 pt-0 px-xl-5 px-3">
                    <div class="row">
                      {if $resultProductProduct[0].monthlyInstallment|default:'0' gt 0}
					  <div class="col-12 py-2 d-md-none d-inline-block border-bottom">
                        <a href="" class=" d-flex font-weight-light text-muted" id="finance-calculator">
                          {$language.lblFinanceEMI} <span class="font-weight-semibold ml-1 text-dark"> {$resultProductProduct[0].monthlyInstallment|price:'':$productDefaultCurrency:$currentCurrencyID} {$language.lblPermonth}</span>
                          {if $languageDirection == "ltr"}
                            <i class="icon-arrow-right ml-auto align-self-center text-dark"></i>
                          {else}
                            <i class="icon-arrow-left ml-auto align-self-center text-dark"></i>
                          {/if}
                        </a>
                      </div>
					  {/if}
					  {*{if $resultProductProduct[0].leasePrice|default:'0' gt 0}
                      <div class="col-12 py-2 d-md-none d-inline-block border-bottom">
                        <a href="" class="d-flex font-weight-light text-muted" id="lease-calculator">
                          {$language.lblLeaseEMI} <span class="font-weight-semibold ml-1 text-dark"> {$resultProductProduct[0].leasePrice|price:'':$productDefaultCurrency:$currentCurrencyID} {$language.lblPermonth}</span>
                          {if $languageDirection == "ltr"}
                            <i class="icon-arrow-right text-dark ml-auto align-self-center"></i>
                          {else}
                            <i class="icon-arrow-left text-dark ml-auto align-self-center"></i>
                          {/if}
                        </a>
                      </div>
					  {/if}*}
                      <div class="col-xl-6 col-12 d-lg-inline-block d-none">
                        <ul class="row align-items-center h-100 list-unstyled p-0 mb-xl-0">
                          <li class="col-5">
                            <a href="" class="font-normal font-weight-bold text-primary d-inline-flex align-items-center" data-toggle="modal" data-target="#downloadproductinfo" onclick="refreshdownloadinfo();"><i class="icon-pdf mr-2 h4 mb-0"></i>{$language.lblDownloadProductInfo}</a>
                          </li>
                           <li class="col-4">
                          <a href="" class="font-normal font-weight-bold text-primary d-inline-flex align-items-center" data-toggle="modal" data-target="#requestacallback"><i class="icon-telephone mr-2 h5 mb-0"></i>{$language.lblRequestCallBack}</a>
                          </li>
                           <li class="col-3 pr-0">
                          {html->anchor href="test-drive.html" target="_blank" class="font-normal font-weight-bold text-primary d-inline-flex align-items-center booked-cls-link" content="<i class='icon-testdrive mr-2 h5 mb-0'></i>{$language.lblBookATestDrive}"}
                          </li>
                        </ul>
                      </div>

                      <div class="col-xl-6 col-12 pt-md-0 pt-3 text-right align-items-center d-flex justify-content-end px-sm-3 px-2">
                          
                          <span class="d-md-inline-block d-none font-weight-semibold h5 text-secondary  mr-3 mb-0 summary-price"><div class="f15 font-weight-normal mt-1 d-block"><i class="icon-info" data-toggle="tooltip" data-placement="top" title="{$language.lblFinanceEMIinfo}"></i>&nbsp; {$language.lblFinanceEMI}</div>                        
                            {$resultProductProduct[0].monthlyInstallment|price:'':$productDefaultCurrency:$currentCurrencyID}
                        </span>
						 <a href="" class="btn btn-outline-primary mx-3 font-weight-bold clearfix booked-cls-link" id="summary-form"> 
					  {$language.lblApplyloan}</a> 
                        <button class="continue-btn reserve-btn  py-3 px-md-4 px-3 border-0 font-small font-weight-bold text-uppercase"  rel="{$selectedProductID}-{$resultProductProduct[0].productOptionID}">{$language.lblReserveMINI}</button>
							
                      </div>
                    </div>
                  </div>
                
                <div id="finance-calculator-blk" class="d-none payment-outer-block">
                  <div class="container bottom-space">
                    <div class="row ">
                     <div class="col-12 col-lg-8 border-right pr-lg-4">
                     <button class="btn-outline-secondary continue-btn-calculator cursor-pointer float-right font-small mt-3 mt-md-5 px-3 py-2 text-uppercase"><i class="align-middle d-inline-block icon-arrow-left"></i> {$language.lblBacktoSummary}</button>
                        <h4 class="font-weight-semibold mb-1 text-uppercase mt-3 mt-md-5">{$language.lblFinanceCalculator}</h4>
                        <p class="font-normal mb-4 text-muted text-uppercase">{$language.lblFinanceInTwoStepsMini}</p>
                        <div class="finance-calculator-box form-blk">
                          <h6 class="font-weight-semibold mb-4">{$language.lblStepOneSelectMini}</h6>
                          <div class="row">
                          <div class="col-12 col-md-4 mb-4 pb-1">
                            <label class="font-normal text-secondary mb-1 font-weight-semibold">{$language.lblModel}</label>
                           {form->select name="series" class="form-control" options="{$resBrandCategories.productCategoryID}->{$resBrandCategories.CategoryName}" value="{$resBrandCategories.productCategoryID}"} 
                          </div>
                          <div class="col-12 col-md-4 mb-4 pb-lg-2">
                            <label class="font-normal text-secondary mb-1 font-weight-semibold">{$language.lblShortDescription}</label>
                            {form->select name="shortDesc" class="form-control"   options="{$resultProductProduct[0].productShortDescription}->{$resultProductProduct[0].productShortDescription}" value="{$resultProductProduct[0].productShortDescription}"} 
                          </div>
                          <div class="col-12 col-md-4 mb-4 pb-lg-2">
                            <label class="font-normal text-secondary mb-1 font-weight-semibold">{$language.lblVariant}</label>
                            {form->select name="variant" class="form-control" content=$resvariant} 
                          </div>
                         </div>
                        </div>
                       <div class="finance-calculator-box form-blk">
                      <h6 class="font-weight-semibold mb-4">{$language.lblStepTwoSelectDownpayAndTerm}</h6>
						  <div class="col-12 p-0 mb-4">
							<label class="font-normal text-secondary mb-0 font-weight-semibold">{$language.lblDownpayment} (<span id="downpaymentval">{$downPaymentPercentage}</span>%) </label>
							<div class="row align-items-center">
							  <div class="col-8 col-md-6 ">
                <div class="rangebox-outer">
                  <div id="donwpaymentrangeslider" class="mb-3 mt-4"></div>
                </div>
								<div class="clearfix">
								  <span class="flt-lft">{$downPaymentPercentage}%</span>
								  <span class="flt-rgt">100%</span>
								</div>
								
							  </div>
							  <div class="col-4 col-md-6">
								<div id="donwpaymentamount" class="h6 font-weight-bold m-0">0</div>
								<span class="font-normal"> {$currencySymbol}</span>
							  </div>
							</div>
						  </div>
						  <div class="col-12 p-0 mb-4">
							<label class="font-normal text-secondary mb-0 font-weight-semibold">{$language.lblTerm}</label>
							<div class="row align-items-center">
							  <div class="col-8 col-md-6">
                <div class="rangebox-outer">
                  <div id="termrangeslider" class="mb-3 mt-4"></div>
                </div>
								<div class="clearfix">
								  <span class="flt-lft">{$finance_term}</span>
                                                                  <span class="flt-rgt">6</span>
								</div>
							  </div>
							  <div class="col-4 col-md-6">
								<div id="termlength" class="h6 font-weight-bold m-0"></div>
								<span class="font-normal">{$language.lblMonths}</span>
							  </div>
							</div>
						  </div>
						  <div class="col-sm-8 col-md-6 col-12 pl-0 mb-4">
							<label class="font-weight-semibold mb-1 text-secondary">{$language.lblFinanceRate} <span class="mndty 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="f15 font-weight-light mb-0 text-muted">{$language.lblMonthlyPayment}</p>
							<h5 class="text-secondary font-weight-semibold mb-4 h4" id="monthlyPayment"></h5>
							<p class="h4 text-secondary font-weight-semibold mt-2 mb-3 text-uppercase">{$language.lblSpecialOffer}</p>
							<p id="detailedDesc" class="font-weight-light"></p>
							<p class="font-weight-light mb-0 text-muted">{$language.lblSpecialOfferText} <br/>{html->anchor href="/contact.html" class="text-primary text-underline d-inline-block" caption="{$language.lblLiveChatAgentNow}"}</p>
						  </div>
						  <div class="col-12 p-0 mb-5">
							<p class="font-weight-light mb-0 text-muted">{$language.lblFinanceDisclaim}</p>
							<h5 class="text-secondary font-weight-semibold text-uppercase">{$language.lblDisclaimer}</h5>
							<p class="font-weight-semibold">{$language.lblDisclaimerText}</p>
						  </div>
						  <div class="col-12 p-0 mb-4">
							<button class="btn-primary continue-btn-calculator  px-4 btn font-normal text-uppercase">{$language.lblContinue}</button>
						  </div>
						</div>
                        </div>
                        <div class="col-12 col-lg-4 mb-4 pl-lg-4">
							<img  src="" class="img-fluid summaryfinancelease"/>
							<h6  class="text-secondary font-weight-semibold mt-0 mb-3 summaryfinanceleasetitle">{$calulatorproduct['productTitle']}</h6>
							<h4 class="text-secondary font-weight-semibold mt-0 mb-3 h4 summaryfinanceleaseprice">{$calulatorproduct['monthlyInstallment']|price}</h4>
						   
						  </div>
                      </div>
                     
                    </div>
                  </div>
            
                <div id="lease-calculator-blk" class="d-none payment-outer-block">
                  <div class="container bottom-space">
                       <div class="row">
                       <div class="col-12 col-md-8 border-right pr-lg-4">
                        <button class="btn-outline-secondary continue-btn-calculator cursor-pointer float-right font-small mt-3 mt-md-5 px-3 py-2 text-uppercase"><i class="icon-arrow-left mr-1"></i> {$language.lblBacktoSummary}</button>
                        <h4 class="font-weight-semibold mb-1 text-uppercase mt-3 mt-md-5">{$language.lblLeaseCalculator}</h4>
                        <p class="font-normal mb-4 text-muted text-uppercase">{$language.lblLeaseInTwoStepsMini}</p>
                     
                        <div class="lease-calculator-box form-blk ">
                          <h6 class="font-weight-semibold mb-4">{$language.lblStepOneSelectMini}</h6>
                          <div class="row">
                          <div class="col-12 col-md-4 mb-4 pb-1">
                            <label class="font-normal text-secondary mb-1 font-weight-semibold">{$language.lblModel}</label>
                           
							{form->select name="seriesLease" class="form-control" options="{$resBrandCategories.productCategoryID}->{$resBrandCategories.CategoryName}" value="{$resBrandCategories.productCategoryID}"} 
                          </div>
                          <div class="col-12 col-md-4 mb-4 pb-1">
                            <label class="font-normal text-secondary mb-1 font-weight-semibold">{$language.lblShortDescription}</label>
                            {form->select class="form-control" name="shortDescLease" options="{$resultProductProduct[0].productShortDescription}->{$resultProductProduct[0].productShortDescription}" value="{$resultProductProduct[0].productShortDescription}"} 
                          </div>
                          <div class="col-12 col-md-4 mb-4 pb-1">
                            <label class="font-normal text-secondary mb-1 font-weight-semibold">{$language.lblVariant}</label>
								{form->select name="variantLease" class="form-control" content=$resvariant} 							
                          </div>
                          </div>
						   {*{if $calulatorproduct['productTitle']!=""}*}
                          
						  {*{/if}*}
                        </div>
                     
                      
                      <h6 class="font-weight-semibold mb-4">{$language.lblLeaseStepTwoLeaseMileageMini}</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="text-secondary mb-0 font-weight-semibold">{$language.lblDurationOfLease}</label>
							<div class="row align-items-center">
							  <div class="col-8 col-md-6 ">
                <div class="rangebox-outer">
                  <div id="durationrangeslider" class="mb-3 mt-4"></div>
                </div>
								<div class="clearfix">
								  <span class="flt-lft">36</span>
                                                                  <span class="flt-rgt">12</span>
								</div>
							  </div>
							  <div class="col-4 col-md-6">
                <div id="duration" class="h6 font-weight-bold m-0"></div>
								<span class="font-normal">{$language.lblMonths}</span>
							  </div>
							</div>
						  </div>
						  <div class="col-12 p-0 mb-4">
							<label class="text-secondary mb-0 font-weight-semibold">{$language.lblMileage}</label>
							<div class="row align-items-center">
							  <div class="col-8 col-md-6">
                <div class="rangebox-outer">
                  <div id="mileagerangeslider" class="mb-3 mt-4"></div>
                </div>
								<div class="clearfix">
								  <span class="flt-lft">10K</span>
								  <span class="flt-rgt">25K</span>
								</div>
							  </div>
							  <div class="col-4 col-md-6">
								<div id="mileage" class="h6 font-weight-bold m-0"></div>
								<span class="font-normal">{$language.lblMileage}</span>
							  </div>
							</div>
						  </div>
						  <div class="col-12 p-0 mb-4">
							<label class="text-secondary mb-2 font-weight-semibold">{$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" class="font-weight-light">{$language.lblYes}</label>
							  </div>
							  <div class="col-auto">
								<input type="radio" id="no" name="tirechange"  value="no"  class="tirechange"/>
								<label for="no" class="font-weight-light">{$language.lblNo}</label>
							  </div>
							</div>
						  </div>
						  <div class="col-sm-8 col-md-6 col-12 pl-0 mb-4">
							<label class="text-secondary mb-1 font-weight-semibold">{$language.lblAmount}</label>
							<input type="text" class="form-control" id="leaseRate"  readonly="readonly"/>
						  </div>
						  <div class="col-12 p-0 mb-5">
							<h5 class="text-secondary font-weight-semibold text-uppercase">{$language.lblDisclaimer}</h5>
							<p class="font-family-primary">{$language.lblLeaseDisclaimer}</p>
						  </div>
						  <div class="col-12 p-0 mb-4">
							<button class="btn-primary continue-btn-calculator  px-4 btn font-normal text-uppercase">{$language.lblContinue}</button>
						  </div>
						</div>
                      </div>
                      <div class="col-12 col-md-4 mb-4 pl-lg-4">
							<img  src="" class="img-fluid summaryfinancelease"/>
							<h6  class="text-secondary font-weight-semibold mt-0 mb-3 summaryfinanceleasetitle">{$calulatorproduct['productTitle']}</h6>
                                                        <div class="hide financeText"><div class="f15 font-weight-normal mt-1 d-md-block d-none"><i class="icon-info" data-toggle="tooltip" data-placement="top" title="{$language.lblFinanceEMIinfo}"></i> {$language.lblFinanceEMI}</div> </div>
							<div  class="text-secondary font-weight-semibold mt-0 mb-3 h4 summaryfinanceleaseprice t">{$calulatorproduct['monthlyInstallment']|price}</div>
						   
						  </div>
                      </div>
                    </div>
                  </div>
				<div id="summary-form-blk" class="d-none payment-outer-block">
				    <div class="container my-lg-4">
				    <div class="row">
				    <div class="col-12 col-lg-7 pt-5">
				 {include file="catalog/default/ApplyLoan.tpl"} 
                        </div>
                        <div class="col-12 col-lg-5 order-last pb-4 pl-lg-5 loan-summary">
				  {include file="catalog/default/ApplyLoanSummary.tpl"} 
                        </div>
				  </div>
				  </div>
				</div>
              </div>
			 
              <div class="tab-pane fade {if $fromCart|default:'' eq 'Yes'} show active {/if} payment-outer-block" id="Payment" role="tabpanel" aria-labelledby="Payment-tab">
                <div class="container">
                  <div class="row ">
                  <div class="col-12 mt-4">
                      <div id="checkout_message" class="checkout_message"></div> </div>
                    <div class="col-12 col-lg-7 col-xl-8 pt-5">
                      {include file="catalog/default/PaymentTab1.tpl"} 
                      {include file="catalog/default/PaymentTab2.tpl"} 
                      {include file="catalog/default/PaymentTab3.tpl"}   
                    </div>
                    <div class="col-12 col-lg-5 col-xl-4 order-last pb-4 border-left pl-lg-5 ">
                      <div class="payment-summary overflow-hidden">
                        {include file="catalog/default/PaymentSummary.tpl"}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
			   <div class="modal fade show" id="configThx" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
				<div class="modal-dialog modal-dialog-centered modal-lg summary-apply-modal-dialog" role="document">
					<div class="modal-content rounded-0">
						<div class="modal-header p-0 border-bottom-0">
							<div class="col-lg-12 col-12 text-right font-weight-bold pt-3"><i class="icon-close cb-close cursor-pointer" data-dismiss="modal" aria-label="Close"></i></div>
						</div>
						<div class="modal-body px-5">
							<div class="row request-callback-form-blk text-left pb-4 px-5">
								<h4 class="font-weight-light mb-3 d-block">Configuration saved successfully !</h4>
							</div>
						</div>
					</div>
				</div>
			</div>
            </div>
        </div>
     </div>
{foreach name="product_options" from=$customOption item="po" key="pokey"}
    {foreach from=$po.variants item="vr" name=vars}    
        {if $vr.isDefault == 1}
            {form->hidden name="selectedOptionVariant_{$po.customOptionID}" value=$vr.customOptionVariantID}
            {form->hidden name="selectedOptionVariantImage_{$po.customOptionID}" value=$vr.variantThumbImage}
        {/if}
    {/foreach}
{/foreach}
	<footer> {*<a rel="no follow" target="_blank" href="https://api.whatsapp.com/send?phone=97143391555" class="wstp-icon-block position-fixed  text-center"><span class="d-md-block d-lg-none icon-whatsapp"><span class="path1"></span><span class="path2"></span><span class="path3"></span></span><img src="{$view_images}/whatsapp-new.svg" class="d-done d-lg-block"></a>*}</footer>
      </div>
    
    
    <!-- download product information modal -->
    {include file="catalog/default/DownloadProductInfoForm.tpl"}
    <!-- download product information modal -->

    <!-- request a call back modal -->
    {include file="catalog/default/CallBackRequestForm.tpl"}
    <!-- request a call back modal -->

    <!-- End : Outer Pane --> 
      <script src="{$common_frontend_js_path}/jquery.mobile-events.js" ></script>
    {html->messages_script section="Productreview" id="common_message"}
    {html->messages_script section="CheckoutSection" id="checkout_message"}
    {include file='CommonJavaScriptBottom.tpl'} 
    {html->script_group_start name="{$compiled_js_path}/catalog.default.product.js"}
    {html->script src="{$common_frontend_js}/timer.plugin.js"}
        {html->script src="{$common_frontend_js}/buyNow.js"}
    {html->script_group_end}
	{if  $enable_captcha=='Yes'} 
	<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>

	{/if} 
	<script>
		
	    var enable_captcha =  '{$enable_captcha}';
	   if(enable_captcha=='Yes'){
		var googlecaptchakey = "{$googleCaptchaKey|default:''}";  

		}
		function onloadCallback() {
 // This will now work
    if (enable_captcha === 'Yes') {
        captchaId1 = grecaptcha.render('captcha1', {
            'sitekey': googlecaptchakey
        });
		/*captchaId2 = grecaptcha.render('captcha2', {
			'sitekey': googlecaptchakey
		  });
		captchaId3 = grecaptcha.render('captcha3', {
			'sitekey': googlecaptchakey
		  });*/
		  captchaId4= grecaptcha.render('captcha4', {
			'sitekey': googlecaptchakey
		  });
    }
}
$("#to-payment-screen-2").click(function(){
          $('#payUserName,#payUserEmail,#payUserPhone').blur();
            checkAgree(3);
		var captchavalue4 = grecaptcha.getResponse(captchaId4); 
		//alert(captchavalue4);
		if(captchavalue4 == ''){
			var divid = "regMessage4";
			var message = "Captcha error";
			var classname = "message_validation message_inline_validation";
			$('#' + divid).show();
			$('html,body').animate({
				scrollTop: -($("#" + divid).position().top-500)
			}, 'slow');
			$('#' + divid).html(message);
			//$('#' + divid).fadeTo(this.timeout, .7).slideUp(2200);
			if (classname != '') {
				$('#' + divid).attr('class', classname);
			} 
			 event.preventDefault();
				return false;      
		}  
		else{
			var divid = "regMessage4";
			$('#' + divid).hide();
		}			
            if($('.message_validation:visible').length>0){
                return false;
            }else{
               sendPayOTPData(captchavalue4);
            }
      });
</script>
	<script type="text/javascript">
$( 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);
		  
		leaseCalculator();
			
	  $('.tirechange').change(function(){ 
		leaseCalculator();
      });
});
function leaseCalculator() {
if($('#variantLease').val()!= '') {
	var duration 		= $( "#duration" ).text();
	var mileage  		= ($( "#mileage" ).text())/1000;
	var variantCode  	= $('#variantLease').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('');
		}
	});
}
}
 var processingFeesPercentage 	= '{$processingFeesPercentage}';
 var downPaymentPercentage 		= '{$downPaymentPercentage}';
var selected_Product_id 		= '{$selectedProductID}';
var finance_term                    =   '{$finance_term}';
$( function() {
		  $( "#monthlyPayment" ).html($.getFormattedCurrency(0));
          $( "#donwpaymentrangeslider" ).slider({
              range: 'min',
              min: parseInt(downPaymentPercentage),
              max: 100,
              step: 1,
              slide: function(event, ui) {
				$( "#downpaymentval" ).html(ui.value);
				financeRateCalculator();
              }
          });
          $( "#termrangeslider" ).slider({
              range: 'min',
              min: -1*finance_term,
              max: -6,
              start:[-1*finance_term,-1*finance_term],
              step: 6,
              slide: function(event, ui) {
				$( "#termlength" ).html(Math.abs(ui.value));
				financeRateCalculator();
              }
          });
          //alert($( "#termrangeslider" ).slider( "values", 1 )+" dddd "+$( "#termrangeslider" ).slider( "values", 10 )+"pp"+finance_term);
        $( "#termrangeslider" ).slider( "value", -1*finance_term )  ;
        $( "#termlength" ).html(finance_term);//$( "#termrangeslider" ).slider( "values", 1 )
		  
			var variantCode 	= $('#variant option:selected').val(); 
			$.ajax({
			type: "POST",
			url: GLOBAL_BASE_PATH + "/financecalculator/ajaxGetFinanceRate/",
			data: 'variantCode='+variantCode,
			success: function (data) 
			{          		
				var obj = JSON.parse(data);
				$( "#detailedDesc" ).html(obj.detailedDescription);
				if(obj.financeRate!='')
				$( "#finRate" ).val(obj.financeRate+'%');
				financeRateCalculator();
			}
		});
			
  });
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);
	}
}
</script>
    <script type="text/javascript">	
        var encodedCustomOption = {$encodedCustomOption};
        var selectedProductID = {$selectedProductID};
        var productCurrency = {$productDefaultCurrency};
        var encodedCombinations = {$encodedCombinations};
        var categoryID ='{$resultProductProduct[0].productCategoryID|default:0}';
        var productID ={$selectedProductID};
        var productOptionID =   {$resultProductProduct[0].productOptionID}
        var selectedProductCategoryID ='{$resBreadcrumbs[0]['productCategoryID']|default:0}';
        var detailPageProductID ='{$selectedProductID}';
       
    </script>	
    <script type="text/javascript">
$('#offerelement').click(function(){
      $("#offerDesc").toggleClass('hide');
  });		
      $(document).on('click', '.view-more-btn', function(e){
        e.preventDefault();
            $(".poduct-detail-specification-list").toggleClass("active");
            $(this).toggleClass('active');
      });

      $( document ).ready(function() {
            {if $fromCart|default:'' eq 'Yes'}
                    $('#Payment-tab').trigger('click');
            {/if}        
          $(".myCarPackages").vc3dEye({
		imagePath:"{$view_public_path}/uploads/catalog/vehicles/large/image_extr_{$setdefaultimagecode}_",
		totalImages:35,
		imageExtension:"jpeg"
	});
        
          //On clicking tab change 
            $('.custopts').click(function(){
                $(".pop_loader").removeClass('hide');
                        {*custoptid	=	$(this).attr('rel');
                        variantid	=	$('#option_'+productID+'_'+custoptid).val()
                        varimage	=	$('.var_image_'+variantid).attr('src');
                        $('.sel_variant_'+custoptid).attr('src',varimage);*}
                        if($(this).attr('aria-controls') != 'Upholstery' && $(this).attr('aria-controls') != 'Trim' && $(this).attr('aria-controls') != 'Stripe' && $(this).attr('aria-controls') != 'Roof' ){
                            var imageType   =   'extr';
                        }else{
                            if($(this).attr('aria-controls') == 'Trim'){
                                var imageType   =   'trim';
                            }else if($(this).attr('aria-controls') == 'Stripe'){
                                var imageType   =   'stripe';
                            }else if($(this).attr('aria-controls') == 'Roof'){
                                var imageType   =   'bonnet';
                            }else{
                                var imageType   =   'intr';
                            }
                        }
                        updatecarimages(imageType,$(this).attr('aria-controls'));
                        $(".pop_loader").addClass('hide');
                });
        });
        function updatecarimages(imageType,imageSection){
        
                        var sku =   products[0].optionSKU;
                        var skuarr  =   sku.split('-');
                        $('.custopts').each(function(){
                            if($(this).attr('rel')){
                               
                                
                                custoptids  =   $(this).attr('rel');
                                //console.log(custoptids);
                                //optiondetails   =   encodedCustomOption.filter(function (person) { return person.customOptionID == custoptids });
                                optiondetails   =   filterOpt(encodedCustomOption,'customOptionID',custoptids);
                                //vardetails  =   optiondetails[0].variants.filter(function (person) { return person.customOptionVariantID == $('#option_'+productID+'_'+custoptids).val() });
                               //  console.log($('#hidoption_'+productID+'_'+custoptids).val());
            if($('#hidoption_'+productID+'_'+custoptids).val()!='') {
                                    vardetails  =   filterOpt(optiondetails.variants,'customOptionVariantID',$('#hidoption_'+productID+'_'+custoptids).val())
                                   
                                    variantCode =   vardetails.variantCode;
                                    if(optiondetails.customOptionName!='Wheel' && optiondetails.customOptionName!='Trim')
                                        skuarr.push(variantCode);
                                }
                            }
                        });
                        var data = new Object();
                        data.imagecode = skuarr.join('_');
                        data.imagetype = imageType;
                        $(".pop_loader").removeClass('hide');
                        $.ajax({
                            url: GLOBAL_BASE_PATH + "/product/loadingProductImages/",
                            type: "POST",
                            cache: false,
                            async: true,
                            global: false,
                            data: data,
                            success: function (list) {
                                $(".pop_loader").addClass('hide');
                                setTimeout(commonSpriteUpdate(list,imageSection,skuarr.join('_')), 200000)
                            }
                        });
        }
        
        function commonSpriteUpdate(list,imageSection,imagecode){
            $(".myCarColor").css("background-image", "url(" + "{$view_public_path}/uploads/catalog/vehicles/large/image_extr_"+imagecode+"_280.jpeg)");
            $(".myCarPackages").css("background-image", "url(" + "{$view_public_path}/uploads/catalog/vehicles/large/image_extr_"+imagecode+"_280.jpeg)");
            $(".myCarWheel").css("background-image", "url(" + "{$view_public_path}/uploads/catalog/vehicles/large/image_extr_"+imagecode+"_280.jpeg)");
            $(".myCarShowroom").css("background-image", "url(" + "{$view_public_path}/uploads/catalog/vehicles/large/image_extr_"+imagecode+"_280.jpeg)");
            $('#summury-main-blk img').attr('src',"{$view_public_path}/uploads/catalog/vehicles/large/image_extr_"+imagecode+"_30.jpeg");
            $('#payment-summary img').attr('src',"{$view_public_path}/uploads/catalog/vehicles/large/image_extr_"+imagecode+"_30.jpeg");
            if(imageSection != 'Trim')
            $('#panotrim').attr('src',"product/standalone/?panorama={$view_public_path}/uploads/catalog/vehicles/large/image_panorama_"+imagecode+"_180.jpeg&autoLoad=true&preview={$view_public_path}/uploads/catalog/vehicles/large/image_trim_"+imagecode+"_180.jpeg")
        if(imageSection != 'Upholstery' && imageSection != 'Trim' && imageSection != 'Stripe' && imageSection != 'Roof')    
        {
            
            if($('a[href="#'+imageSection+'"]').hasClass("active")){
            $(".myCar"+imageSection).vc3dEye({
		imagePath:"{$view_public_path}/uploads/catalog/vehicles/large/image_extr_"+imagecode+"_",
		totalImages:35,
		imageExtension:"jpeg"
            });
            
            }else{
               /*  $('a[href="#'+imageSection+'"]').on('shown.bs.tab', function (e) {
            console.log('system:'+"{$view_public_path}/uploads/catalog/vehicles/large/image_extr_"+imagecode+"_");   
                $(".myCar"+imageSection).vc3dEye({
                    imagePath:"{$view_public_path}/uploads/catalog/vehicles/large/image_extr_"+imagecode+"_",
                    totalImages:35,
                    imageExtension:"jpeg"
                });
            });*/
            }
            
            
        }else{
            
            $('.'+imageSection+'img').attr('style','background-image:url('+list+')');
        }
      }
     
      $(document).on('click', '#finance-calculator', function(e){
        e.preventDefault();
        $("#summury-main-blk").addClass("d-none");
        $("#finance-calculator-blk").removeClass("d-none");
      });
      $(document).on('click', '#lease-calculator', function(e){
        e.preventDefault();
        $("#summury-main-blk").addClass("d-none");
        $("#lease-calculator-blk").removeClass("d-none");
      });
	  
      $(document).on('click', '#Summary-tab', function (e) {
        $("#finance-calculator-blk, #lease-calculator-blk, #summary-form-blk").addClass("d-none");
        $("#summury-main-blk").removeClass("d-none");
      });
      $(document).on('input', '.otp-input-blk input', function () {
        if($(this).val().length == $(this).attr('maxlength')) {
          $(this).parent().next().find('input').focus();
        }
	    });
      $(document).on('keydown', '.otp-input-blk input', function(e) {
        if ((e.which == 8 || e.which == 46) && $(this).val() =='') {
            $(this).parent().prev().find('input').focus();
        }
      });
      $(document).on('change', 'input[name=payment]', function () {
        var selected = $(this).attr('id');
        $(".payment-type-blk").addClass("d-none");
        $("."+selected).removeClass("d-none");
      });
      /*$("#to-payment-screen-2").click(function(){
          $('#payUserName,#payUserEmail,#payUserPhone').blur();
            checkAgree(3);
            if($('.message_validation:visible').length>0){
                return false;
            }else{
               sendPayOTPData();
            }
      });*/
      $("#to-payment-screen-3").click(function(){
         if($('#payuserotp1').val()==''||$('#payuserotp2').val()==''||$('#payuserotp3').val()==''||$('#payuserotp4').val()==''){
              $('.otp_pay_validateion_error').removeClass('hide');
              return false;
          }
          else{
            checkSubmittedOTPPay();
        }
      });
      $(document).on("click", ".summary-btn", function() {
          $('html,body').animate({
              scrollTop: $(".payment-summary").offset().top - 100
              },'slow');
      });
      $('#payuserotp1,#payuserotp2,#payuserotp3,#payuserotp4').blur(function(){
          $('.otp_pay_validateion_error').addClass('hide');
      });
if ($(window).width() > 1024) {
     function contentHeight(){
         var detailOuterHeight = $(window).outerHeight() - $("header").outerHeight() - 140;
         var paymentOuterBlock = $(window).outerHeight() - $("header").outerHeight() - $(".product-detail-head").outerHeight() - $(".product-detail-bottom").outerHeight();
         $(".detail-outer-block").css('height',detailOuterHeight);
         $(".myCarPackages,.myCarColor,.myCarWheel,.myCarShowroom").css('height',detailOuterHeight-150);
         $(".product-detail-container").css('height',detailOuterHeight-150);
         $(".poduct-detail-specification-list").css('height',detailOuterHeight-200);
         $(".summary-left").css('height',detailOuterHeight-100);
         $(".payment-outer-block").css('height',paymentOuterBlock);
     }
    $(document).ready(contentHeight);
    // $(window).on('resize',contentHeight);
    $('.poduct-detail-specification-list').mCustomScrollbar({
        theme: "rounded-dark",
        
        scrollButtons: {
            enable: false,
        }
    });  
    $('.summary-left').mCustomScrollbar({
        theme: "rounded-dark",
        
        scrollButtons: {
            enable: false,
        }
    });
}
             $(".img-outer-block img:first").addClass("first");
             
             function filterOpt(mainarr,customVariable,searchres){
                 for(i=0;i<mainarr.length;i++){
                     if(mainarr[i][customVariable] == searchres){
                         return mainarr[i];
                     }
                }
             }
    </script>
    {$cartToJsInit}
  </body>
</html>

