{if $remotecode}

<div id="submitfrm" class="center">

{$remotecode}

<iframe name="3dauth" width="100%" height="600" scrolling="auto" src="about:blank" style="border:1px solid #fff;"></iframe>

</div>

{literal}
<script language="javascript">
setTimeout ( "autoForward()" , 1000 );
function autoForward() {
	var submitForm = $("#submitfrm").find("form");
    submitForm.submit();
}
</script>
{/literal}

{else}

<script type="text/javascript" src="includes/jscript/statesdropdown.js"></script>
{literal}<script language="javascript">
function useExistingCC() {
    jQuery(".newccinfo").hide();
}
function enterNewCC() {
    jQuery(".newccinfo").show();
}
</script>{/literal}
<form method="post" action="creditcard.php">
  <input type="hidden" name="action" value="submit">
  <input type="hidden" name="invoiceid" value="{$invoiceid}">
  
		<div class="bigheader">
			<h2>{$LANG.creditcardyourinfo}</h2>
		</div><!-- .bigheader -->  
  
  {if $errormessage}
	<div class="notice notice-error">
		<div class="inside">
			<p>{$errormessage}</p>
		</div>
	</div>
  {/if}

  		<div class="feildset">
		
			<div class="col2">
			
				<div>
					<label>
						<span>{$LANG.clientareafirstname}: ({$LANG.required})</span>						
						<input type="text" name="firstname" value="{$firstname}" placeholder="{$LANG.creditcard_firstname}" requred="required" autofocus="autofocus" />
					</label>
				</div>
			
			
				<div>
					<label>
						<span>{$LANG.clientareaemail}: ({$LANG.required})</span>
						<input type="email" name="email" value="{$email}" placeholder="{$LANG.creditcard_email}" tabindex="3" requred="required" />
					</label>
				</div>	
				
				
				<div>
					<label>
						<span>{$LANG.clientareacountry}: ({$LANG.required})</span>
						
						{$countriesdropdown}
					</label>
				</div>						

				<div>
					<label>
						<span>{$LANG.clientareaaddress1}: ({$LANG.required})</span>
						<input type="text" name="address1" size="40" value="{$address1}" placeholder="{$LANG.creditcard_address1}" tabindex="5" requred="required" />
					</label>
				</div>		
				
						

				<div>
					<label>
						<span>{$LANG.clientareacity}: ({$LANG.required})</span>
						<input type="text" name="city" size="30" value="{$city}" placeholder="{$LANG.creditcard_city}" tabindex="7" requred="required" />
					</label>
				</div>	
				
				
				
				
				<div>
					<label>
						<span>{$LANG.clientareapostcode}: ({$LANG.required})</span>
						<input type="text" name="postcode" size="10" value="{$postcode}" placeholder="{$LANG.creditcard_postcode}" tabindex="9" requred="required" />
					</label>
				</div>	
				
				
							
			
			
			</div><!-- .col2 -->
			
			
			<div class="col2 nomarginright">
			
				<div>
					<label>
						<span>{$LANG.clientarealastname}: ({$LANG.required})</span>
						<input type="text" name="lastname" value="{$lastname}" placeholder="{$LANG.creditcard_lastname}" tabindex="2" requred="required" />
					</label>
				</div>	
				
			
			
				<div>
					<label>
						<span>{$LANG.clientareacompanyname}:</span>
						<input type="text" name="companyname" size="30" value="{$companyname}" placeholder="{$LANG.creditcard_company}" tabindex="4" />
					</label>
				</div>
				
				
				
				<div>
					<label>
						<span>{$LANG.clientareaphonenumber}: ({$LANG.required})</span>
						<input type="tel" name="phonenumber" size="20" value="{$phonenumber}" placeholder="{$LANG.creditcard_phone}" tabindex="6" requred="required" />
					</label>
				</div>										

				
				<div>
					<label>
						<span>{$LANG.clientareaaddress2}: ({$LANG.required})</span>
						<input type="text" name="address2" value="{$address2}" placeholder="{$LANG.creditcard_address2}" tabindex="8" requred="required" />
					</label>
				</div>
				
				
				<div>
					<label>
						<span>{$LANG.clientareastate}: ({$LANG.required})</span>
						<input type="text" name="state" value="{$state}" placeholder="{$LANG.creditcard_state}" tabindex="10" requred="required" />
					</label>
				</div>
																								
			
			</div><!-- .col2 -->
			
			<div class="clear">&nbsp;</div>
			
			</div>
  
		<div class="bigheader">
			<h2>{$LANG.creditcarddetails}</h2>
		</div><!-- .bigheader -->   
  
  
  		<div class="feildset">
		
			<div class="col1">  
  
  
				<div>
					<input type="radio" name="ccinfo" value="useexisting" id="useexisting" onclick="useExistingCC()"{if $cardnum} checked{else} disabled{/if} />
    <label for="useexisting">{$LANG.creditcarduseexisting}{if $cardnum} ({$cardnum}){/if}</label>
				</div>  

				<div>    
				    <input type="radio" name="ccinfo" value="new" id="new" onclick="enterNewCC()"{if !$cardnum || $ccinfo eq "new"} checked{/if} />
				    <label for="new">{$LANG.creditcardenternewcard}</label>
    			</div>
    			
				<div class="newccinfo"{if $cardnum && $ccinfo neq "new"} style="display:none;"{/if}>
					<label>
						<select name="cctype">
{foreach key=num item=cardtype from=$acceptedcctypes}
                    <option{if $cctype eq $cardtype} selected{/if}>{$cardtype}</option>
{/foreach}
              </select>
					</label>
				</div> 
				
				
				<div class="newccinfo"{if $cardnum && $ccinfo neq "new"} style="display:none;"{/if}>
					<label>
						<span>{$LANG.creditcardcardnumber}</span>
						<input type="text" name="ccnumber" value="{$ccnumber}" autocomplete="off" />
					</label>
				</div>
				
				
				<div class="newccinfo"{if $cardnum && $ccinfo neq "new"} style="display:none;"{/if}>
					<label>
						<span>{$LANG.creditcardcardexpires}</span>
						<select name="ccexpirymonth" id="ccexpirymonth">{foreach from=$months item=month}
<option{if $ccexpirymonth eq $month} selected{/if}>{$month}</option>
{/foreach}</select> / <select name="ccexpiryyear">
{foreach from=$expiryyears item=year}
<option{if $ccexpiryyear eq $year} selected{/if}>{$year}</option>
{/foreach}
</select>
					</label>
				</div>
				
				
				{if $showccissuestart}
				<div class="newccinfo"{if $cardnum && $ccinfo neq "new"} style="display:none;"{/if}>
					<label>
						<span>{$LANG.creditcardcardstart}</span>
						<select name="ccstartmonth" id="ccstartmonth">{foreach from=$months item=month}
<option{if $ccstartmonth eq $month} selected{/if}>{$month}</option>
{/foreach}</select> / <select name="ccstartyear">
{foreach from=$startyears item=year}
<option{if $ccstartyear eq $year} selected{/if}>{$year}</option>
{/foreach}
</select>
					</label>
				</div>	
				
				
				<div class="newccinfo"{if $cardnum && $ccinfo neq "new"} style="display:none;"{/if}>
					<label>
						<span>{$LANG.creditcardcardissuenum}</span>
						<input type="text" name="ccissuenum" maxlength="3" value="{$ccissuenum}" />
					</label>
				</div>		
				{/if}
				
					
    			<div>
    				<label>
    					<span>{$LANG.creditcardcvvnumber}</span>
    					<input type="text" name="cccvv" size="5" value="{$cccvv}" autocomplete="off" />
    					<a href="#" onclick="window.open('images/ccv.gif','','width=280,height=200,scrollbars=no,top=100,left=100');return false">{$LANG.creditcardcvvwhere}</a>
    				</label>
    			</div>
    			
    			
    			{if $shownostore}
    			<div>
    				<input type="checkbox" name="nostore" id="nostore" />
<label for="nostore">{$LANG.creditcardnostore}</label>
    			</div>
    			{/if}
    
    
    		</div>
    		
    	</div>
    
    
  <p class="center">
    <input type="submit" value="{$LANG.ordercontinuebutton}" onclick="this.value='{$LANG.pleasewait}'" class="button1 color2" />
  </p>
  
  <p class="center"><img src="images/padlock.gif" class="absmiddle" alt="Padlock" /> {$LANG.creditcardsecuritynotice}</p>
</form>

{/if}