{if $step==1}
{include file="header.html"}

<div class="wait"></div>

<div class="error" {if !isset($error) || !$error}style="display: none;"{/if}><p>{if isset($error)}{$error}{/if}</p></div>
<script type="text/javascript" src="{$live_site}/libs/jQuery/plugins/jquery.form.js"></script>

<div class="main1 box">
<div class="page_title heading"><h1>{$lng.credits.buy_extra_credits}</h1></div>

<div class="form_container">


<script type="text/javascript">
{literal}
$(document).ready(function () {

var options = { 

	beforeSerialize: function(jqForm, options) { $("body").addClass("loading"); },
        beforeSubmit:  function(formData, jqForm, options) { 
		//var queryString = $.param(formData); 
		if($("#buy_credits").find("input[type='submit']:focus").attr("id")=="Cancel") {
			location.href='useraccount.php';
			return false;
		}
		return true;  
	},
        success:       successResponse  // post-submit callback 
 
    }; 

// post-submit callback 
function successResponse(responseText, statusText, xhr, $form)  { 

			var ret = JSON.parse(responseText);

			if(ret.response==1) {

				// go to payment page
				var selected_processor = $('#selected_processor').val();

				$("#payment").html(ret.payment_form);

				if(selected_processor=="klarna") {
					$("body").removeClass("loading");
					$("#payment").slideDown();
					$('html,body').animate({scrollTop:$("#payment").offset().top}, 'slow');
					$(".form_footer").hide();
				}
				else if(selected_processor=="stripe") {
					$("#Submit").attr("disabled", "disabled");
					setTimeout(function(){ $( ".stripe-button-el" ).trigger("click"); }, 2000);
				}
				else 
					$("#payment_form").submit();

				return;
			}

			// response = 0 -> show the error
			$(".error").html("<p>"+ret.error+"</p>");
			$(".error").show();

			$("body").removeClass("loading"); 

} 

//initialize the AJAX form
 $('#buy_credits').ajaxForm(options);

$(document).on("click", ".select_plan", function(){ 

	// get current selected plan
	var plan_no = parseInt(jQuery(this).attr("id").substr(11));

	var det = jQuery(this).attr("alt");
	var split_res=det.split("^");
	var plan_no = split_res[0];
	var plan_name = split_res[1];
	var plan_price = split_res[2];

	// set value for selected plan
	$("#plan").val(plan_no);
	// change button style
	$(".select_plan").attr('class', "select_plan gray");
	$("#select_plan"+plan_no).attr('class', "select_plan");

	$("#plans").slideUp();

	$("#plan_selected span.tag").html(plan_name+" ( "+plan_price+" )");
	$("#plan_selected").slideDown();

	loadPayment( plan_no);
	reinit();


}); // end select_plan click

$(document).on("click", "#change_plan", function(){ 

	// empty plan value
	$("#plan").val(0);

	// show plans box
	$("#plan_selected").slideUp();
	$("#plans").slideDown();

	// hide payment_details form
	$("#payment_details").html("");
	$("#payment_details").show();

}); // end change plan

}); // end document ready


function loadPayment (plan_no) {

	$.ajax({
		type		: "GET",
		cache		: false,
		url		: "{/literal}{$live_site}{literal}/buy_credits.php?step=2&plan="+plan_no,
		data		: $(this).serializeArray(),
		success: function(data) {
			$("#payment_details").html(data);
		}// end data
	}); // end ajax

}

{/literal}

{if $only_plan}
loadPayment ({$only_plan});
{/if}
</script>


<form name="buy_credits" id="buy_credits" action="buy_credits.php?step=3" method="post">

<input type="hidden" name="plan" id="plan" value="{if isset($only_plan) && $only_plan}{$only_plan}{/if}" />

{if $credits_packages|@count>1}

<div id="plans" class="pdiv1 pt30">

	{foreach from=$credits_packages item=v name=package}
	<div class="credits lfloat" {if $smarty.foreach.plan.index%3!=2}style="margin-right: 20px;"{/if}>

		<div class="credits_title plan_title plan_title{$smarty.foreach.plan.index}">
			<h3>{$v.name}</h3>
			{*<div class="small-light">{$v.no_credits} {$lng.credits.credits}</div>*}
		</div>
		<div class="plan_body credits_body">

		<div class="plan_price">{$v.price_curr}</div>

		<div class="credits_option">{$v.no_credits} {$lng.credits.credits}</div>

		<a href="javascript:;" class="select_plan gray" id="select_plan{$v.id}" alt="{$v.id}^{$v.name}^{$v.price_curr}"><div class="plan_button">{$lng.credits.select_package}</div></a>

		</div>{* end plan_body *}
	</div>{* end plan *}

	{/foreach}

<div class="clearfix"></div>

</div>{* end plans *}

{/if} {* end if credits_packages *}


	<div class="pt30" id="plan_selected" {if !isset($only_plan) || !$only_plan}style="display: none;"{/if}>

	<div class="left_form">{$lng.credits.credits_package}: </div>
	<div class="right_form">
	{if !isset($only_plan) || !$only_plan}
	
	<div class="lfloat btn10-right-arrow">
	<a href="javascript:;" id="change_plan"><span class="tag">{$plan_name} ({$plan_price})</span>&nbsp;&nbsp;<strong>|&nbsp;{$lng.listings.change_plan}</strong></a>
	</div>
	
	{else}

	<div class="lfloat btn7">{$plan_name} ({$plan_price})</div>

	{/if}
	</div>{* end right_form *}

	</div> {* end subscription_selected *}

	<div id="payment_details"></div>

</form>

<div id="payment" style="display: none;"></div>

</div>{* end form_container *}
</div> {* end main1 *}

{include file="footer.html"}

{/if} {* end step1 *}

{if $step==2}

	<div class="error" {if !isset($error) || !$error}style="display: none;"{/if}><p>{if isset($error)}{$error}{/if}</p></div>
{if !$error}

<div class="options pt30">

	<input type="hidden" name="full_total" id="full_total" value="{$total}"/>

	{if $enable_coupons}
	<div class="option clearfix" id="div_discount" {if !$total}style="display: none;"{/if}>
		<div class="option_left">{$lng.listings.enter_coupon} :</div>
		<div class="option_right"><input type="text" name="discount_code" id="discount_code" onkeyup="getDiscount(this.form, 'ads',{if $no_processors>1}1{else}0{/if}, {$appearance.price_format_decimals})" onpaste="getDiscount(this.form, 'ads',{if $no_processors>1}1{else}0{/if}, {$appearance.price_format_decimals})" value="{if isset($discount_code)}{$discount_code}{/if}"/></div>
	</div>
	{/if}

	<div class="option clearfix" id="div_total" {if !$total}style="display: none;"{/if}>

	{if $no_processors>1}

	<div class="option_left">{$lng.listings.choose_payment_method} :</div>
	<div class="option_right">
	{foreach from=$payment_processors name=pp item=v}
	<input type="radio" class="noborder" name="processor" value="{$v.processor_code}" {if $smarty.foreach.pp.index==0}checked="checked"{/if}/> &nbsp;&nbsp;{$v.processor_title}

	<br/>
	{/foreach}
	</div>
	{else}
	<input type="hidden" name="processor" value="{$payment_processors[0].processor_code}"/>

	<div class="option_left">{$lng.subscribe.payment_method}:</div>
	<div class="option_right">{$payment_processors[0].processor_title}</div>

	{/if}

	<input type="hidden" id="selected_processor" value="{$payment_processors[0].processor_code}"/>

	</div>

	<br/>

	<div class="option option_price clearfix">
	{$lng.listings.total}: <b>
	{if $appearance.currency_pos==0}{$appearance.default_currency}{/if}<span id="total" style="border: 0px;">{$total}</span>{if $appearance.currency_pos==1}{$appearance.default_currency}{/if}</b>
	</div>

	<div class="option option_price clearfix" id="tax_info" style="display: none;">
	<b>{$lng.general.tax}&nbsp;(&nbsp;<span id="tax_str"></span>&nbsp;):</b> <b><span id="tax"></span></b>
	</div>

	<div class="option option_price clearfix" id="total_with_tax_info" style="display: none;">
	<b>{$lng.general.total_with_tax}:&nbsp;<span class="price" id="total_with_tax"></span></b>
	</div>

</div> {* end options *}

<div class="form_footer">
<div class="buttons rfloat">
	<input type="submit" class="button negative" name="Cancel" id="Cancel" value="{$lng.general.cancel}" />
	<input type="submit" class="button positive" name="Submit" id="Submit" value="{$lng.general.submit}" />
</div>
<div class="clearfix"></div>
</div>

{literal}
<script type="text/javascript">
$(document).ready(function() {

	// *********** tax value **************
	{/literal}

	{if $no_processors>1}
	only_processor = 0;
	{else}
	only_processor = 1;
	{/if}

	{if $total}

	if(only_processor)
		var processor = $('input[name=processor]').val();
	else 
		var processor = $('input:radio[name=processor]:checked').val();		

	var total = $("#full_total").val();
	calculateTax(processor, total);


	{/if} {* end if total *}

	{literal}


	$('input:radio[name=processor]').change(function() { 

		processor = $('input:radio[name=processor]:checked').val();
		calculateTax(processor, $("#full_total").val());

		// for embedded payments
		$("#selected_processor").val(processor);
		reinit();

	})

	// end tax value


});
</script>
{/literal}
{/if} {* end if error *}


{/if}