<script type="text/javascript">
    var selecttext = '{$language.lblselecttext}';	
</script>
<div id="AjaxdivPaymentProcess" align="center" style="display:none;">
  <div class="loader bpfc"> {$language.lblPleaseWait}...</div>
</div>
<div class="btn btn-success mb-3" id="AjaxAvailbalance" style="display:none;"> 
  {form->hidden name="currencyDecimalPlaces" value=$resDefaultCurrency.currencyDecimalPlaces}
  {$language.lblYourAvailableBalance}  : {$availableBalance|price:Full:$cityDefCurrencyID:$currentCurrencyID}<br/>
    {$language.lblAmountToBePaid}{$resDefaultCurrency.currencySymbolLeft} <span id="ajaxAmountToBePaid">{$couponAmount}</span>&nbsp;{$resDefaultCurrency.currencySymbolRight} </div>
<div id="AjaxdivPaymentBlock" >
  
  <!--<h2>{$language.lblCheckout}</h2>-->
  {form->hidden name="creditCardTypeId"}
  {form->hidden name="validateCreditCardTypeId"}
  {form->hidden name="cityhidValue"}	
  {form->hidden name="editBillingInfo" value="1"}
  {*form->hidden name="billingPhone"*}
  {form->hidden name="couponOrderID"}
  <div  id="Ajaxcommon_message_buy_limit" class="error-message" style="display:none;"></div>
  <div  id="AjaxpaymentErrorMessage"  style="display:none;"></div>
  <div class="paymentblock px-3 pb-3" >
    <div class="clearfix mb-3" id="AjaxdivBillingSection">
      <div class="billingfields clearfix" id="AjaxdivBillingFields">
        <h3 class="m-0 pt-3 pb-2 AjaxdivPaymentSection h4 font-semibold">{$language.lblBillinginfo}</h3>
         <div class="row">
            <div class="col-sm-4 col-12 pb-3" id="divPayBillingFName">
              <p class="m-0 pt-3 pb-2 AjaxdivPaymentSection">{$language.lblFirstName} <span class="mndty">*</span></p>
              {form->textbox name="billingFirstName" class="form-control"  validate="required" error=$language.errFirstName maxlength="200" validate_event="submit" value=$billingFirstName} </div>
            <div class="col-sm-4 col-sm-offset-1 col-12 pb-3" id="divPayBillingLName">
              <p class="m-0 pt-3 pb-2 AjaxdivPaymentSection">{$language.lblLastName} <span class="mndty">*</span></p>
              {form->textbox name="billingLastName" class="form-control"  validate="required" error=$language.errLastName maxlength="200" validate_event="submit" value=$billingLastName} </div>
          </div>
          <div class="row">
            <div class="col-sm-4 col-12 pb-3" id="divPayBillingAddress">
              <p class="m-0 pt-3 pb-2 AjaxdivPaymentSection">{$language.lblAddress1} <span class="mndty">*</span></p>
              {form->textbox name="billingAddress" class="form-control"  validate="required" error=$language.errBillingAddress maxlength="200" validate_event="submit"}
              {form->hidden name="billingErrorMessages" value=$language.errBillingAddress|cat:"||"|cat:$language.errCityName|cat:"||"|cat:$language.errCountry|cat:"||"|cat:$language.errState|cat:"||"|cat:$language.errProvince|cat:"||"|cat:$language.errZipCode|cat:"||"|cat:$language.errAgreement} </div>
            <div class="col-sm-4 col-sm-offset-1 col-12 pb-3" id="divPayBillingAddress1">
              <p class="m-0 pt-3 pb-2 AjaxdivPaymentSection">{$language.lblAddress2} </p>
              {form->textbox name="billingAddress1" class="form-control" maxlength="200"} </div>
          </div>
          
          <div class="row">
           <div class="col-sm-4 col-12 pb-3" id="divPayBillingCountry">
              <p class="m-0 pt-3 pb-2 AjaxdivPaymentSection">{$language.lblCountry} <span class="mndty">*</span></p>
              {form->select class="form-control" name="billingCountry" caption="->{$language.lblselecttext}" validate="required" error=$language.errCountry validate_event="submit"}{form->hidden name="billingCountryID" value=$billingCountryID} 
			  </div>
             <div class="col-sm-4 col-sm-offset-1 col-12 pb3" id="divPayBillingState">
			  <label class="m-0 pt-3 pb-2 AjaxdivPaymentSection">{$language.lblStateProvince} <span class="mndty">*</span> </label>
			  <span id="stateInput"> {form->select  class="form-control" name="billingState" options="->{$language.lblselecttext}" validate="stateSelectedType->isequal->state~*required" error=$language.errState}
			 </span> <span id="stateProvinceInput"> {form->textbox  name="billingProvince" maxlength="100" class="form-control" validate="stateSelectedType->isequal->province~*required"  error=$language.errProvince}
			 </span><span id="loadProcessImage"></span> {form->hidden id="stateSelectedType"  name="stateSelectedType" value=$stateSelectedType}{form->hidden name="billingStateID" value=$billingState} 
			 </div>
          </div>
          <div class="row">
            <div class="col-sm-4 col-12 pb3" id="divPayBillingZip">
              <p class="m-0 pt-3 pb-2 AjaxdivPaymentSection">{$language.lblZipPostalCode} </p>
              {form->textbox name="billingZip" class="form-control" validate_event="submit" maxlength="20"} </div>
            <div class="col-sm-4 col-sm-offset-1 col-12 pb3" id="divPayBillingState">
              <p class="m-0 pt-3 pb-2 AjaxdivPaymentSection">{$language.lblCity}<span class="mndty">*</span> </p>
              <span id="cityInput"> {form->textbox name="billingCity" class="form-control" validate="required" error=$language.errCityName maxlength="50"} </span></div>
          </div>
           <div class="row">
            <div class="col-sm-4 col-12 pb3" id="divPayBillingEmail">
              <p class="m-0 pt-3 pb-2 AjaxdivPaymentSection">{$language.lblEmail} <span class="mndty">*</span> </p>
              {form->textbox name="billingEmail" class="form-control" validate_event="submit" validate="required~*email" error=$language.errInvalidEmail maxlength="30"} </div>
			  <div class="col-sm-4 col-sm-offset-1 col-12 pb3" id="divPayBillingPhone">

              <p class="m-0 pt-3 pb-2 AjaxdivPaymentSection">{$language.lblContactPhone} <span class="mndty">*</span></p>
              {form->textbox name="billingPhone" class="form-control" validate_event="submit"  maxlength="10"  validate="required~*isNumber" error=$language.errPhone|cat:"~*"|cat:$language.errValidNumber} </div>

          </div>
        </div>
      </div>
    {if $orderTypeVar|default:''=='product'}
    {form->hidden name="applyShippingChk" value=$applyShipping}
    {if $applyShipping=='1'} 
    <!--Shipping-->
 <div class="billingfields clearfix" id="AjaxShippingSection" >
      <h3 >{$language.lblShippinginfo}</h3>
      <ul id="AjaxdivShippingFields">
        <li>{form->checkbox name="billingshippingSame" onclick="billingShippingSame(this.checked)"}&nbsp;{$language.lblBillingShippingSame} </li>
        <li class="clearfix">
          <div class="column" id="divPayShippingFName">
            <p class="m-0 pt-3 pb-2 AjaxdivPaymentSection">{$language.lblFirstName} <span class="mndty">*</span></p>
            {form->textbox name="shippingFname" class="form-control"  validate="required" error=$language.errFirstName maxlength="200" validate_event="submit" value=$shippingFirstName} 
	    </div>
          <div class="column" id="divPayShippingLName">
            <p>{$language.lblLastName} <span class="mndty">*</span></p>
            {form->textbox name="shippingLname" class="form-control"  validate="required" error=$language.errLastName maxlength="200" validate_event="submit" value=$shippingLastName} 
	    </div>
        </li>
        <li class="clearfix">
          <div class="column" id="divPayShippingAddress">
            <p>{$language.lblAddress1} <span class="mndty">*</span></p>
            {form->textbox name="shippingAddress" class="form-control"  validate="required" error=$language.errShippingAddress maxlength="200" validate_event="submit"} 
	    </div>
          <div class="column" id="divPayShippingAddress1">
            <p>{$language.lblAddress2} </p>
            {form->textbox name="shippingAddress1" class="form-control" maxlength="200"} 
	    </div>
        </li>
        <li class="clearfix">
          <div class="column" id="divPayShippingCountry">
            <p class="m-0 pt-3 pb-2 AjaxdivPaymentSection">{$language.lblCountry} <span class="mndty">*</span></p>
            {form->select class="form-control" name="shippingCountry" caption="->{$language.lblselecttext}" validate="required" error=$language.errCountry validate_event="submit"}{form->hidden name="shippingCountryID" value=$shippingCountryID} 
	    </div>
          <div class="column" id="divPayShippingState">
            <p>{$language.lblStateProvince} <span class="mndty">*</span> </p>
            <span id="shippingStateInput"> {form->select  class="form-control" name="shippingState" options="->{$language.lblselecttext}" validate_event="submit" validate="shippingStateSelectedType->isequal->state~*required" error=$language.errState}
            {form->hidden name="hidStateError" value=$language.errState} </span> <span id="shippingStateProvinceInput"> {form->textbox  name="shippingProvince" maxlength="100" class="form-control" validate_event="submit" validate="shippingStateSelectedType->isequal->province~*required"  error=$language.errProvince}
            {form->hidden name="hidProvinceError" value=$language.errProvince} </span><span id="loadProcessImageShipping"></span> {form->hidden id="shippingStateSelectedType"  name="shippingStateSelectedType" value=$shippingStateSelectedType}{form->hidden name="shippingStateID" value=$shippingState}
	     </div>
        </li>
        <li class="clearfix">
          <div class="column" id="divPayShippingCity">
            <p class="m-0 pt-3 pb-2 AjaxdivPaymentSection">{$language.lblCity} <span class="mndty">*</span></p>
            {form->textbox name="shippingCity" class="form-control" validate_event="submit" validate="required" error=$language.errCityName maxlength="50"} 
	    </div>
          <div class="column" id="divPayShippingZip">
            <p class="m-0 pt-3 pb-2 AjaxdivPaymentSection">{$language.lblZipPostalCode} </p>
            {form->textbox name="shippingZip" class="form-control" validate_event="submit" validate="required" error=$language.errZipCode maxlength="20"} 
	    </div>
        </li>
      </ul>
    </div>
    <!--Shipping Ends--> 
    {/if} 
    {/if}
  
      <div class="row">
         

                       
            <div class="content col-lg-8 col-12">
                <div class="billingfields">
     
           <div id="AjaxdivPaymentSection" >    
               {if $paymentSettingsGroupID neq ''}
      <h3 class="h4 font-semibold m-0 pt-3 pb-2">{$language.lblPaymentInformation}</h3>
      {/if}
                <div class="payment-block clearfix position-relative border">
                <div class="payment-block-new">     
    {*             <span class="overlay d-none d-lg-block"></span>    *}
                 {if !is_array($paymentSettingsGroupID)}
          {form->hidden name="paymentSettingsGroupID" value=$paymentSettingsGroupID}
          {form->hidden name="hidPaymentSettingsGroupID" value=$paymentSettingsGroupID}
          {form->hidden name="hidPaymentSettingsGroupIDTemp" value=$paymentSettingsGroupID}
          {form->hidden name="hidPaymentSettingsGroupIDcheck" value=$paymentSettingsGroupID} <strong>{$paymentSettingsGroupLabel}</strong>
           
            
             {if $paymentSettingsGroupLabel|default:'' neq ''}
     <ul class="payment-method float-left position-relative d-none d-lg-block">
      
      <li class="clearfix payment-gateways ">
        <a id="{$paymentSettingsGroupID}" class="paymentgatwaytab active  position-relative d-block border-top border-right py-3 px-5">{$language.{$paymentSettingsGroupLabel}}</a>
      </li>
      
    </ul>   
      {/if}
            
            {else}
			<select name="paymentSettingsGroupIDRes" id="paymentSettingsGroupIDRes" class="form-control d-lg-none d-xl-none">
			{foreach from=$paymentSettingsGroupID|default:'' item="paymentGatewaysRes"}
				
						<option  data="{$paymentGatewaysRes.paySetGroupKey}" value="{$paymentGatewaysRes.0}">{$paymentGatewaysRes.1}</option>
				
			{/foreach}
			</select>
            {*{form->select name="paymentSettingsGroupIDRes" rel="{$paymentGateways.paySetGroupKey}" value=$paymentSettingsGroupID[0].0 options=$paymentSettingsGroupID  class="form-control visible-xs"}*}
         <ul class="payment-method float-left position-relative d-none d-lg-block">
      {foreach from=$paymentSettingsGroupID|default:'' key="k1" item="paymentGateways"}
      <li class="clearfix payment-gateways ">
          
        <a id="{$paymentGateways.0}" rel="{$paymentGateways.paySetGroupKey}" class="paymentgatwaytab {if $k1==0}active{/if} position-relative d-block border-top border-right py-3 px-5">{$paymentGateways.1}</a>
      </li>
      {/foreach}
    </ul>
          {form->hidden name="hidPaymentSettingsGroupID" value=""}
          {form->hidden name="hidPaymentSettingsGroupIDcheck" value=""}
          {form->hidden name="paymentSettingsGroupID" value=$paymentSettingsGroupID[0].0}
          {form->hidden name="hidRel" value="{$paymentSettingsGroupID[0].paySetGroupKey}"}
          {/if}
          </div>
           
            <div class="payment-content float-left p-lg-4 mt-3 mt-lg-0">
             <div class="pay-img my-2">
            <img src="{$view_images}/{$paymentSettingsGroupID[0].paySetGroupKey}_{$AjaxCurrLanguage}.png" />
        </div>
	  <span id="AjaxloadProcessNetpay"></span>
          <div id="netpayPayContainer"> 
	  <br />
            {form->select name="netpayPaymentMethod" class="form-control"  error=$language.errNetpayPayMethod validate="netPayGroupCheck->isequal->1~*required" validate_event="submit"}
            {form->hidden name="hidNetpayPaymentMethod" value=""}
            {form->hidden id="netPayGroupCheck"  name="netPayGroupCheck" value="0"} 
	    </div>
        
       <div id="AjaxdivPaymentCardTypes" class="col-sm-4 col-12">
           <p>&nbsp;</p>
        <ul id="AjaxdivPaymentCardTypeImages" class="clearfix">
        </ul>
      </div>
       
      
      {form->hidden name="imgFullPath" value=$view_images}
      <div class="AjaxOfflinePaymentDesc"></div>
      <div id="AjaxdivPaymentElements" style="display:none;"> <span id="AjaxloadProcessImagePay"></span>
          <div class=" pb3 row">
            <div class="col-md-6 col-sm-4 col-12" id="AjaxdivPayCardholderFirstName">
              <p>{$language.lblCardholderFirstName} <span class="mndty">*</span></p>
              {form->textbox name="creditCardFirstName"  autocomplete="Off" class="form-control" validate_event="submit" validate="hidPaymentSettingsGroupIDcheck->isequal->1~*required" error=$language.errCardholderFirstName maxlength="50"}
              {form->hidden name="creditCardFirstNameError" value=$language.errCardholderFirstName} </div>
            <div class="col-md-6  col-sm-4 col-12" id="AjaxdivPayCardholderLastName">
              <p> {$language.lblCardholderLastName} <span class="mndty">*</span></p>
              {form->hidden name="creditCardLastNameError" value=$language.errCardholderLastName}
              {form->textbox name="creditCardLastName" validate_event="submit" autocomplete="Off" class="form-control"  validate="hidPaymentSettingsGroupIDcheck->isequal->1~*required" error=$language.errCardholderLastName maxlength="50" validate_event="submit"} </div>
          </div>
          <div class=" pb3 row ">
            <div class="col-md-6 col-sm-4 col-12" id="AjaxdivPayCardType">
              <p> {$language.lblCardType} <span class="mndty">*</span></p>
              {form->select name="creditCardType" class="form-control" onchange="getCardTypeHiddenValue(this.value);"}
              {form->validate name="validateCreditCardType"  validate_event="submit"  validate="hidPaymentSettingsGroupIDcheck->isequal->1~*validateCreditCardTypeId->isequal->1~*creditCardType->required" error=$language.errCardType}
              {form->hidden name="hidCardTypeError" value=$language.errCardType} </div>
            <div class="col-md-6 col-sm-4 col-12" id="AjaxdivPayCardNumber">
              <p> {$language.lblCardNumber} <span class="mndty">*</span> </p>
              {form->textbox name="creditCardNumber" autocomplete="Off" class="form-control"  validate="hidPaymentSettingsGroupIDcheck->isequal->1~*required" error=$language.errInvalidcc maxlength="20" validate_event="submit"}
              {form->hidden name="hidcardnoError" value=$language.errInvalidcc} </div>
          </div>
          <div id="AjaxdivPayExpiryDate"  class="pb3 row">
            <div class="col-md-6 col-sm-4 col-12 pb3">
              <p> {$language.lblExpiryDate} <span class="mndty">*</span></p>
              <div class="row">
              <div class="col-md-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 pull-left"}
              </div>
              <div class="col-md-6"> 
               {form->select name="expYear" options=$years class="form-control pull-left"} 
               </div>
               </div>
            </div>
              <div class="col-md-6 col-sm-4 col-12 pb3">
             <p>{$language.lblSecurityCode} <span class="mndty">*</span></p>
             {form->textbox name="securityCode" autocomplete="Off" class="form-control"  validate="hidPaymentSettingsGroupIDcheck->isequal->1~*required~*isNumber" error=$language.errInvalidcvv maxlength="5" validate_event="submit"}
                {form->hidden name="hidcodeError" value=$language.errInvalidcc} 
             </div>
          </div>

          {* <div class="row">
                <div class="col-md-6  col-sm-4 col-12">
             <div class="col-12 rmv-padding col-sm-10">
              
                </div>
                <div class="pull-left">
                <span class="help hidden-xs">  
                    
              <span class="icon-question"></span> <span class="pw-text"><span class="icon"></span>{$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>
                  </div>
            </div>
          </div> *}
      </div>

        <div>
        <div id="AjaxAgreeTerms" class=""> {form->hidden  name="enableTermsPrivacy" value=$enableTermsPrivacy}
          {if $enableTermsPrivacy eq 'Yes'}
          {form->checkbox  name="agree"  value="1"}
            <label for="agree">{$language.lblIAgree}</label>
          {if ""|dynamic_menu:'url':'terms-and-conditions'}
          {html->anchor rel="termsandconditions"  target="blank" href="#"|dynamic_menu:'hrefurl':'terms-and-conditions' caption=$language.lblTermsAndConditions}{/if}
          {if ""|dynamic_menu:'url':'privacy-statements'}
          {$language.lblAnd} {html->anchor rel="privacypolicy"  target="blank" href="#"|dynamic_menu:'hrefurl':'privacy-statements' caption=$language.lblPrivacyPolicy}{/if}
          <span class="mndty">*</span>     
          {form->hidden  name="agreeTerms" value=""}
          {form->validate name="validateAgree"  validate_event="submit" validate="agreeTerms->required" error=$language.errAgreement}
          {/if} 
        </div>
        <div id="divPaymentButton" > 
            {form->submit name="submitPayment" id="submitPayment" value=$language.lblCompletePayment class="btn btn-secondary" validate_submit="yes"} 
        </div>
        <div class="submit-section mt-2" id="divCompleteOrdertButton" style="display:none;">
            {form->submit name="submitPayment" id="submitPayment" value=$language.lblCompleteOrder class="btn btn-secondary mb-3" validate_submit="yes"}                       {*form->submit name="submitCompleteOrder" id="submitCompleteOrder" value=$language.lblCompleteOrder class="custom-button01" validate_submit="yes"*} 
        </div>
        
    </div>
            
    </div>
     </div>
                    </div>
        
            
        
        
    </div>
    </div>     
  </div>
        
       
        
        
    </div>
</div>
{form->rootpath_script}
{form->basepath_script} 
{html->script src="{$common_js}/chosen.pluggin.js"}
{html->script_group_start name="{$compiled_js_path}/paymentview.js"}
   {html->script src="{$common_frontend_js}/payment.page.js"} 
 {html->script_group_end} 
