<div class="content">
 {if $paymentGatewaysCount|default:'0' >1} 
    <h3 class="d-block d-md-none h4 font-rglr mb-3">{$language.lblPaymentInformation}</h3>{/if}
  <!--<div class="checkout_payment_info"> {include file='cart/CheckoutPaymentInfo.tpl'} </div>-->
  {form->errors name="formPaymentGateway"} {form->start name="formPaymentGateway" method="post" action="" onsubmit="return handleSubmit();"}
  <div class="clearfix position-relative border-bottom {if $paymentGatewaysCount|default:'0' >1}payment-block{/if}"> 
<span class="overlay d-none d-md-block"></span>
    {if $paymentGatewaysCount|default:'0' >1} 
        {assign var="selectedPaymentKey" value="{$selectedPaymentKey|default:''}"}
        {if $selectedPaymentKey|default:'' == ''}
            {assign var="selectedPaymentKey" value="{$resPaymentGateways[0].paySetGroupKey}"}
        {/if}
        {form->select name="paymentSettingsGroupKey" value=$selectedPaymentKey options=$resPaymentGateways caption="->{$language.lblselecttext}" class="form-control d-block d-md-none" validate="required" error=$language.errPaymentMethod}

    <ul class="payment-method float-left d-none d-md-block border-left">        

      {foreach from=$resPaymentGateways|default:'' key="k1" item="paymentGateways"}
      <li class="clearfix payment-gateways">
        <a id="{$paymentGateways.0}" class="paymentgatwaytab border-top font-bold border-right position-relative py-3 px-5 d-block {if $selectedPaymentKey==$paymentGateways.0}active border-right-0{/if}">{$paymentGateways.1}</a>
      </li> 
      {/foreach}
    </ul>
    {else}
        {assign var="selectedPaymentKey" value="{$resPaymentGateways[0].paySetGroupKey|default:''}"}
        {if $resPaymentGateways[0].paySetGroupKey|default:'' neq ''}
     <ul class="payment-method float-left d-none d-md-block">
      <li class="clearfix payment-gateways">
        <a id="{$resPaymentGateways[0].0}" class="paymentgatwaytab border-top font-bold position-relative py-3 px-5 d-block active">{$language.{$resPaymentGateways[0].paySetGroupKey}}{*$paymentGateways.1*}</a>
      </li>
    </ul>   
      {/if}
    {form->hidden name="paymentSettingsGroupKey" value="{$resPaymentGateways[0].paySetGroupKey}"} {/if} 
    <div class="payment-content position-relative float-left p-4" {if $paymentGatewaysCount|default:'0' <=0} style="padding:0px;border-left:0;border-right:0;" {/if}>
      {if $paymentGatewaysCount|default:'0' >=1}
        <div class="pay-img">
            <img src="{$view_images}/{$selectedPaymentKey}_{$AjaxCurrLanguage}.png" class="img-fluid"/>
        </div> 
        <div class="installmsg text-secondary pt-3 hide">{$language.lblInstallmentLabel1}{$language.lblInstallmentLabel2|price}</div>
    {/if}
    <div class="you-pay h4style dark hidden-xs {if $paymentGatewaysCount|default:'0' < 1}credit-score{/if}"> {if $paymentGatewaysCount|default:'0' < 1 && $cartData.orderUserCreditAmount>0}
         <h5>{$language.lblAccountCredit} : {$cartData.orderUserCreditAmount|price:'Full':$cartData.currencyID:$cartData.userCurrencyID}</h5>
        {/if}<span>You Pay </span>: {$cartData.orderTotalAmount|price:'Full':$cartData.currencyID:$cartData.userCurrencyID}</div>
    {form->hidden name="imgFullPath" value=$view_images} {form->hidden name="siteHosted" value=0} {form->hidden name="userCardType"}
    {form->hidden name="paymentGatewaysCount" value=$paymentGatewaysCount|default:0}
{*     {if $paymentGatewaysCount|default:'0' < 1}

        <h3>{$language.lblAccountCredit} :{$cartData.orderUserCreditAmount|price:'Full':$cartData.currencyID:$cartData.currencyID} </h3>

        {/if} *}
		

  <ul class="bank hide clearfix">
		<li class="bank-list">
			<div class="form-group vertical-align">
				{form->radio name="bank-default" value="ICIB" checked="checked" class="bank-radio form-radio" id="bank-icici"}
				<label for="bank-icici"><img src="{$view_images}/icici.jpg" class="img-responsive" /></label>
			</div>
		</li>
		<li class="bank-list">
			<div class="form-group vertical-align">
				{form->radio name="bank-default" value="HDFB" class="bank-radio form-radio" id="bank-hdfc"}
				<label for="bank-hdfc"><img src="{$view_images}/hdfc.jpg" class="img-responsive" /></label>
			</div>
		</li>
		<li class="bank-list">
			<div class="form-group vertical-align">
				{form->radio name="bank-default" value="162B" class="bank-radio form-radio" id="bank-kotak"}
				<label for="bank-kotak"><img src="{$view_images}/kotak.jpg" class="img-responsive" /></label>
			</div>
		</li>
		{*<li class="bank-list">
			<div class="form-group vertical-align">
				{form->radio name="bank-default" caption="" value="SBI" class="bank-radio form-radio" id="bank-sbi"}
				<label for="bank-sbi"><img src="{$view_images}/sbi.jpg" class="img-responsive" /></label>
			</div>
		</li>*}
		<li class="bank-list">
			<div class="form-group vertical-align">
				{form->radio name="bank-default" value="AXIB" class="bank-radio form-radio" id="bank-axis"}
				<label for="bank-axis"><img src="{$view_images}/axis.jpg" class="img-responsive" /></label>
			</div>
		</li>
		<li class="bank-list">
			<div class="form-group vertical-align">
				{form->radio name="bank-default" value="YESB" class="bank-radio form-radio" id="bank-yes"}
				<label for="bank-yes"><img src="{$view_images}/yes.jpg" class="img-responsive" /></label>
			</div>
		</li>
		<li class="bank-list last">
			<div class="form-group vertical-align">
				{form->select name="bank" options="0->Other~*AIRNB->Airtel Payments Bank~*ADBB->Andhra Bank~*AXIB->AXIS Bank NetBanking~*BOIB->Bank of India~*BOMB->Bank of Maharashtra~*CABB->Canara Bank~*CSBN->Catholic Syrian Bank~*CBIB->Central Bank Of India~*CUBB->City Union Bank~*CRPB->Corporation Bank~*CSMSNB->Cosmos Bank~*DCBB->DCB Bank~*DENN->Dena Bank~*DSHB->Deutsche Bank~*DLSB->Dhanlaxmi Bank~*FEDB->Federal Bank~*HDFB->HDFC Bank~*ICIB->ICICI Netbanking~*IDBB->IDBI Bank~*IDFCNB->IDFC Netbanking~*INDB->Indian Bank ~*INOB->Indian Overseas Bank~*INIB->IndusInd Bank~*JAKB->Jammu and Kashmir Bank~*JSBNB->Janata Sahakari Bank Pune~*KRKB->Karnataka Bank~*KRVBC->Karur Vysya - Corporate Netbanking~*KRVB->Karur Vysya - Retail Netbanking~*162B->Kotak Mahindra Bank~*LVCB->Lakshmi Vilas Bank - Corporate Netbanking~*LVRB->Lakshmi Vilas Bank - Retail Netbanking~*OBCB->Oriental Bank of Commerce~*PMNB->Punjab And Maharashtra Co-operative Bank Limited~*PSBNB->Punjab And Sind Bank~*CPNB->Punjab National Bank - Corporate Banking~*PNBB->Punjab National Bank - Retail Banking~*SRSWT->Saraswat Bank~*SVCNB->Shamrao Vithal Co-operative Bank Ltd.~*SOIB->South Indian Bank~*SYNDB->Syndicate Bank~*TMBB->Tamilnad Mercantile Bank~*BHNB->The Bharat Co-op. Bank Ltd~*TBON->The Nainital Bank~*UCOB->UCO Bank~*UNIB->United Bank Of India~*VJYB->Vijaya Bank~*YESB->Yes Bank" class="bank form-control"}
			</div>
		</li>
		{form->hidden name="bankCode" value='ICICI'}
	</ul> 
        <ul class="wallet hide clearfix">
		<li class="bank-list">
			<div class="form-group vertical-align">
				{form->radio name="bank-default" value="ICIB" checked="checked" class="bank-radio form-radio" id="bank-icici"}
				<label for="bank-icici"><img src="{$view_images}/airtel.jpg" class="img-responsive" /></label>
			</div>
		</li>
		<li class="bank-list">
			<div class="form-group vertical-align">
				{form->radio name="bank-default" value="HDFB" class="bank-radio form-radio" id="bank-hdfc"}
				<label for="bank-hdfc"><img src="{$view_images}/hdfc.jpg" class="img-responsive" /></label>
			</div>
		</li>
		<li class="bank-list">
			<div class="form-group vertical-align">
				{form->radio name="bank-default" value="162B" class="bank-radio form-radio" id="bank-kotak"}
				<label for="bank-kotak"><img src="{$view_images}/kotak.jpg" class="img-responsive" /></label>
			</div>
		</li>
		{*<li class="bank-list">
			<div class="form-group vertical-align">
				{form->radio name="bank-default" caption="" value="SBI" class="bank-radio form-radio" id="bank-sbi"}
				<label for="bank-sbi"><img src="{$view_images}/sbi.jpg" class="img-responsive" /></label>
			</div>
		</li>*}
		<li class="bank-list">
			<div class="form-group vertical-align">
				{form->radio name="bank-default" value="AXIB" class="bank-radio form-radio" id="bank-axis"}
				<label for="bank-axis"><img src="{$view_images}/axis.jpg" class="img-responsive" /></label>
			</div>
		</li>
		<li class="bank-list">
			<div class="form-group vertical-align">
				{form->radio name="bank-default" value="YESB" class="bank-radio form-radio" id="bank-yes"}
				<label for="bank-yes"><img src="{$view_images}/yes.jpg" class="img-responsive" /></label>
			</div>
		</li>
		<li class="bank-list last">
			<div class="form-group vertical-align">
				{form->select name="bank" options="0->Other~*AMON_0->Airtel Money~*FREC_0->FreeCharge~*PAYZ_0->HDFC Bank - PayZapp~*ITZC_0->ItzCash~*OLAM_0->OLA Money~*OXICASH_0->Oxigen Wallet~*PHONEPE_0->PhonePe/BHIM UPI~*YESW_0->YES PAY Wallet" class="bank form-control"}
			</div>
		</li>
		{form->hidden name="bankCode" value='ICICI'}
	</ul>
        {if $settingsEnableGiftCoupon eq "Yes" && $userID|default:'' !=''}
		<ul class="gift hide">
			<div id="promo_message_error"></div>
			<li class="">
				<div class="form-group">
					{if $userID !=''}
						{form->textbox name="couponCode" class="form-control" placeholder=$language.lblGiftCouponCode}
					{/if}

						{form->hidden name="pageCart" value="1"}
						{form->hidden name="cartUser" value=$userID}
						{form->button name="submitCoupon" value="{$language.lblRedeem}" class="go-btn btn btn-primary btn-sm btn-block proceedBtn"}

				</div>
			</li> 
		</ul>
	{/if}
    <div id="AjaxdivPaymentCardTypes" class="payment-div">
      <ul id="AjaxdivPaymentCardTypeImages" class="clearfix"></ul>
    </div>

      <div id="AjaxdivPaymentElements" class="payment-div mt-3" style="display:block;">
        <span id="AjaxloadProcessImagePay"></span>
        <ul class="content">
          <li class="row ">
            <div class="col-sm-6 col-12 form-group" id="AjaxdivPayCardholderFirstName">
              <label>{$language.lblCardholderFirstName} <span class="mndty">*</span></label> {form->textbox name="creditCardFirstName" autocomplete="Off" class="form-control" validate="siteHosted->isequal->1~*required" error=$language.errCardholderFirstName
              maxlength="50"} 
              </div>
            <div class="col-sm-6 col-12 float-right form-group" id="AjaxdivPayCardholderLastName">
              <label> {$language.lblCardholderLastName} <span class="mndty">*</span></label> {form->textbox name="creditCardLastName" validate_event="submit" autocomplete="Off" class="form-control" validate="siteHosted->isequal->1~*required" error=$language.errCardholderLastName
              maxlength="50"} 
              </div>
          </li>
          <li class="row">
            {*<div class="col-sm-6 col-12 form-group" id="AjaxdivPayCardType">
              <label> {$language.lblCardType} <span class="mndty">*</span></label> 
                {form->select name="creditCardType" class="form-control" validate="siteHosted->isequal->1~*required" error=$language.errCardType} 
              </div>*}
            <div class="col-sm-6 col-12 {*float-right*} form-group" id="AjaxdivPayCardNumber">
              <label> {$language.lblCardNumber} <span class="mndty">*</span> </label> 
                {form->textbox name="creditCardNumber" autocomplete="Off" class="form-control" validate="siteHosted->isequal->1~*required" error=$language.errInvalidcc maxlength="20"}
              </div>
            <div class="form-group col-sm-6 col-12 float-right">
              <label> {$language.lblExpiryDate} <span class="mndty">*</span></label>
              <div class="row">
                <div class="col-6">
                  {form->select name="expMonth" options="01->Jan~*02->Feb~*03->Mar~*04->Apr~*05->May~*06->Jun~*07->Jul~*08->Aug~*09->Sep~*10->Oct~*11->Nov~*12->Dec" class="form-control"}
                </div>
                <div class="col-6">
                  {form->select name="expYear" options=$years|default:array() class="form-control"} </div>
              </div>
            </div>
          </li>
          <li id="AjaxdivPayExpiryDate" class="row">
            
            <div class="form-group col-sm-6 col-12 ">
              <div class="row">
                <div class="col-6">
                  <label>{$language.lblSecurityCode} <span class="mndty">*</span></label>
                  <div class="field"> {form->textbox name="securityCode" autocomplete="Off" class="form-control" validate="siteHosted->isequal->1~*required~*isNumber" error=$language.errInvalidcvv maxlength="5"} </div>
                </div>
                {*<span class="help col-xs-6">  <a onclick="window.open('https://www.paypal.com/uk/cgi-bin/webscr?cmd=xpt/Help/popup/CVVInfoPopC-outside','ghg','toolbar=no,location=no,status=no,menubar=no,scrollbars=auto,resizable=no,width=780,height=550')" style="cursor:pointer;" id="divSecurityText">{$language.lblWhatIs}?</a>
              <span class=" slip"><span class="icon-question"></span> <span class="pw-text curve-r5">{$language.lblForMasterCard} 
                  {$language.lbldigitsinthesignature}  
                  {$language.lblOfyourcard}  
                  {$language.lblThefourdigits} <a onclick="window.open('https://www.sandbox.paypal.com/uk/cgi-bin/webscr?cmd=xpt/Help/popup/CVVInfoPopC-outside','ghg','toolbar=no,location=no,status=no,menubar=no,scrollbars=auto,resizable=no,width=780,height=550')" style="cursor:pointer;"  >{$language.lblmoretext}...</a></span></span>
                </span>*}
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="AjaxOfflinePaymentDesc mt-3"></div>
      <div class="codFee mt-3 text-secondary"></div>
      <div class="agree-sec">
        <div id="AjaxAgreeTermsDiv"> 
            {form->hidden name="enableTermsPrivacy" value=$enableTermsPrivacy} 
			{if $enableTermsPrivacy eq 'Yes'}
          <div class="slip mt-3"> {form->checkbox class="chkbx1" name="agree" value="1"}
            <label for="agree">{$language.lblIAgree}</label> 
              {if ""|dynamic_menu:'url':'terms-and-conditions'} {html->anchor target="blank" rel="howitswork" href="#"|dynamic_menu:'hrefurl':'terms-and-conditions' caption=$language.lblTermsAndConditions}{/if}
            {if ""|dynamic_menu:'url':'privacy-statements'} {$language.lblAnd} {html->anchor target="blank" rel="howitswork" href="#"|dynamic_menu:'hrefurl':'privacy-statements' caption=$language.lblPrivacyPolicy}{/if}
            <span class="mndty">*</span>

            <div> {form->validate name="validateAgree" validate="agree->required" error=$language.errAgreement} </div>
          </div>
          {/if}
        </div>
        <!-- End : Visa Payment -->
        <div class="submit-section" id="divPaymentButtonDiv">
          {form->hidden name="startToken" value=""} {form->hidden name="startEmail" value=""} {form->submit name="submitPayment" id="submitPayment" value=$language.lblPayNow class="btn btn-secondary btn-md mt-3 proceedBtn"} {form->submit name="submitPaymentLoader"
          style="display:none" tabindex="3" disabled="disabled" id="submitPaymentLoader" class="btn btn-secondary btn-md buttonDisable proceedBtn" value="{$language.lblPayNow}"}
        </div>
      </div>

    </div>
  </div>
{form->hidden name="stripeToken" value=""}
  {form->close} {form->validate_script form="formPaymentGateway"}
  
  <div class="stripeideal" style="display:none;">
<form id="payment-form">
  <div class="form-row">
    <p>Je hebt ervoor gekozen om te betalen met iDeal</p>
    <div id="ideal-bank-element">
      <!-- A Stripe Element will be inserted here. -->
    </div>
  </div>

  <button  class="btn btn-primary btn-lg btn-block">Complete payment</button>
  <!-- Used to display form errors. -->
 <div id="error-message" role="alert"></div>
</form>

</div>
</div>
