sintonia/airtime_mvc/application/views/scripts/billing/upgrade.phtml

<?php 
    $form = $this->form;
    $form->setAttrib('id', 'upgrade-downgrade');

?>
<script type="text/javascript">
<?php echo("var products = " . json_encode(Billing::getProducts()) . ";\n");
      echo("var vatRate = " . json_encode(VAT_RATE) . ";");
?>

var vatFieldId = "#customfields-7";
var validVATNumber = false;
var customerInEU = false;

//Disable annual billing for hobbyist plan
function validatePlan()
{
	if ($("#newproductid-25").is(":checked")) {
		$("#newproductbillingcycle-monthly").attr("checked", "true");
		//It's import that we switch the checked item first (because you can't disable a checked radio button in Chrome)
		$("#newproductbillingcycle-annually").attr("disabled", "disabled");
		$("label[for='newproductbillingcycle-annually']").addClass("disabled");
	} else {
		$("#newproductbillingcycle-annually").removeAttr("disabled");
		$("label[for='newproductbillingcycle-annually']").removeClass("disabled");
	}
}

function validateVATNumber()
{
	$.post("/billing/vat-validator", { "vatnumber" : $(vatFieldId).val(), "country" : $("#country").val() })
		.success(function(data, textStatus, jqXHR) {
    	if (data["result"]) {
        	$("#vaterror").html("&#10003; Your VAT number is valid.");
        	window.validVATNumber = true;
    	} else {
        	$("#vaterror").text("Error: Your VAT number is invalid.");
        	window.validVATNumber = false;
    	}
    	recalculateTotals();
	});
	
}

/* Recalculate subtotal and total */
function recalculateTotals()
{
	var newProductId = $("input[type='radio'][name='newproductid']:checked");
	if (newProductId.length > 0) {
	    newProductId = newProductId.val();
	} else {
		return;
	}

	var newProduct = null;  
	for (var i = 0; i < products.length; i++)
	{
		if (products[i].pid == newProductId) {
			newProduct = products[i];
			break;
		}
	}

	/** This calculation is all done on the server side too inside WHMCS so don't waste your time
	    trying to hax0r it to get cheap Airtime Pro. */
	var subtotal = "0";
	var savings = "0";
	var subtotalNumber = "0";
	var billingPeriodString = "";
	if ($("#newproductbillingcycle-monthly").is(":checked")) {
		billingPeriodString = " per month";
		subtotalNumber = newProduct.pricing["USD"]["monthly"];
		subtotal = "$" + subtotalNumber + billingPeriodString;
		$("#savings").text("");
	    
	} else if ($("#newproductbillingcycle-annually").is(":checked")) {
		subtotalNumber = newProduct.pricing["USD"]["annually"];
		billingPeriodString = " per year";
		subtotal = "$" + subtotalNumber + billingPeriodString;
				savings = "$" + (newProduct.pricing["USD"]["monthly"]*12 - subtotalNumber).toFixed(2);
		$("#savings").html("You save: " + savings + " per year");
	}
	$("#subtotal").text(subtotal);

	//Calculate total:
	var vatAmount = 0; 
	if (window.customerInEU && !window.validVATNumber) {
		vatAmount = (parseFloat(subtotalNumber) * vatRate)/100.00;
	}
	var total = (vatAmount + parseFloat(subtotalNumber)).toFixed(2);
	$(".subtotal").text(subtotal);
	if (vatAmount > 0) {
		$("#tax").text("Plus VAT at " + parseInt(vatRate) + "%: $" + vatAmount.toFixed(2) + billingPeriodString);
	} else {
		$("#tax").text("");
	}
	$("#total").text("$" + total + billingPeriodString);
}

function configureByCountry(countryCode)
{
	//Disable the VAT tax field if the country is not in the EU.
	$.post("/billing/is-country-in-eu", { "country" : countryCode })
	.success(function(data, textStatus, jqXHR) {
    	if (data["result"]) {
    		   $(vatFieldId).prop("disabled", false);
           	   $(vatFieldId).prop("readonly", false);
    		   $(vatFieldId + "-label").removeClass("disabled");
    		   $("#vat_disclaimer2").fadeIn(300);
    		   window.customerInEU = true;
    	} else {
        	$(vatFieldId).prop("disabled", true);
        	$(vatFieldId).prop("readonly", true);
        	$(vatFieldId).val("");
 		    $(vatFieldId + "-label").addClass("disabled");
 		    $("#vat_disclaimer2").fadeOut(0);
 		    window.customerInEU = false;
    	}
		recalculateTotals();
	});
}

function promoEligibilityCheck()
{
    var newproductid = $("input[type='radio'][name='newproductid']:checked").val();

    // newproductid can be undefined if the client is currently on an old plan
    // and they just change the billing cycle value without selecting a new plan type.
    // In this case, let's not check if they are eligible for the promo because
    // they won't be able to upgrade without selecting a new plan first.
    if (newproductid === undefined) {
        return;
    }
    var newproductbillingcycle = $("input[type='radio'][name='newproductbillingcycle']:checked").val();

    $.post("/billing/promo-eligibility-check", {"newproductid": newproductid,
        "newproductbillingcycle": newproductbillingcycle, "csrf_token": $("#csrf").attr('value')})
        .success(function(data) {
            if (data.result == true) {
                $("#promo-plan-eligible").show();
            } else if ($("#promo-plan-eligible").is(":visible")) {
                $("#promo-plan-eligible").hide();
            }
    });
}

$(document).ready(function() {
	
	configureByCountry($("#country").val());
	recalculateTotals();

    $("input[name='newproductid']").change(function() {
        validatePlan();
        recalculateTotals();
        promoEligibilityCheck();
    });
    $("input[name='newproductbillingcycle']").change(function() {
    	recalculateTotals();
        promoEligibilityCheck();
    });

    $("#country").change(function() {
        configureByCountry($(this).val());
    });

    vatFieldChangeTimer = null;
    $(vatFieldId).change(function() {
		$("#vaterror").text("Please wait, checking VAT number...");
        
    	if (vatFieldChangeTimer) {
    		clearTimeout(vatFieldChangeTimer);
        }
        
        if ($(this).val() == "") {
            $("#vaterror").text("");
            window.validVATNumber = false;
            recalculateTotals();
            return;
        }
    	vatFieldChangeTimer = setTimeout(function() {
        	validateVATNumber(); //Validate and recalculate the totals
    	}, 1500); //Wait 1.5 seconds before validating the VAT number
    });

    //We don't assume the VAT number we have in the database is valid.
    //Let's force it to be rechecked and the total to be recalculated when the page loads.
    validateVATNumber(); 

    $("#hobbyist_grid_price").text("$" + products[0].pricing["USD"]["monthly"] + " / month");
    $("#starter_grid_price").text("$" + products[1].pricing["USD"]["monthly"] + " / month");
    $("#plus_grid_price").text("$" + products[2].pricing["USD"]["monthly"] + " / month");
    $("#premium_grid_price").text("$" + products[3].pricing["USD"]["monthly"] + " / month");
});
</script>

<div class="ui-widget ui-widget-content block-shadow clearfix padded-strong billing-panel">
<H2><?=_("Account Plans")?></H2>
<H4><?=_("Upgrade today to get more listeners and storage space!")?></H4>
<div>
        <a href="https://www.airtime.pro/pricing#promo-details" target="_blank">
            <img width="400px" height="133px" class="promo-banner" /></a>
    </div>
<div class="pricing-grid">
    <table>
        <tr>
            <th>Awesome Hobbyist</th>
            <th>Awesome Starter</th>
            <th>Awesome Plus</th>
            <th>Awesome Premium</th>
        </tr>
        <tr>
            <td>1 Stream
            </td>
            <td>2 Streams
            </td>
            <td>2 Streams
            </td>
            <td>3 Streams
            </td>
        </tr> 
        <tr>
            <td>64kbps Stream Quality
            </td>
            <td>64kbps and 128kbps Stream Quality
            </td>
            <td>64kbps and 196kbps Stream Quality
            </td>
            <td>64kbps, 128kbps, and 196kbps Stream Quality
            </td>
        </tr> 
        <tr class="august-promo">
            <td>
                <span>5 Listeners</span><br>
                <div>10 Listeners</div>
            </td>
            <td>
                <span>40 Listeners per stream</span><br>
                <div>80 Listeners per stream</div>
            </td>
            <td>
                <span>100 Listeners per stream</span><br>
                <div>200 Listeners per stream</div>
            </td>
            <td>
                <span>500 Listeners per stream</span><br>
                <div>1000 Listeners per stream</div>
            </td>
        </tr> 
        <tr class="august-promo">
            <td>
                <span>2GB Storage</span><br>
                <div>4GB Storage</div>
            </td>
            <td>
                <span>5GB Storage</span><br>
                <div>10GB Storage</div>
            </td>
            <td>
                <span>30GB Storage</span><br>
                <div>60GB Storage</div>
            </td>
            <td>
                <span>150GB Storage</span><br>
                <div>300GB Storage</div>
            </td>
        </tr> 
        <tr>
            <td>Ticket, Email, Forum Support
            </td>
            <td>Live Chat, Ticket, Email, Forum Support
            </td>
            <td>Live Chat, Ticket, Email, Forum Support
            </td>
            <td>Live Chat, Ticket, Email, Forum Support
            </td>
        </tr> 
        <tr>
            <td>
            </td>
            <td>Save 15% if paid annually
            </td>
            <td>Save 15% if paid annually
            </td>
            <td>Save 15% if paid annually
            </td>
        </tr> 
        <tr class="price">
            <td id="hobbyist_grid_price">
            </td>
            <td id="starter_grid_price">
            </td>
            <td id="plus_grid_price">
            </td>
            <td id="premium_grid_price">
            </td>
        </tr> 
    </table>
</div>
<!-- 
<p> <a target="_blank" href="https://www.airtime.pro/pricing"><?=_("View Plans")?></a> (Opens in a new window)</p>
 -->
<p id="current_plan"><b>Current Plan:</b> 
<?php 
$currentProduct = Billing::getClientCurrentAirtimeProduct();
echo($currentProduct["name"]);
//echo Application_Model_Preference::GetPlanLevel();
?>
</p>

<h3>Choose a plan:</h3>
 <form id="<?php echo $form->getId(); ?>" method="<?php echo $form->getMethod() ?>" action="<?php echo
    $form->getAction()?>" enctype="<?php echo $form->getEncType();?>">

     <?php echo $form->csrf ?>
    
    <div id="plantype">
        <?php echo $form->newproductid ?>
    </div>
    <div id="billingcycle">
        <?php echo $form->newproductbillingcycle ?>
    </div>
    <div id="billingcycle_disclaimer">
    Save 15% on annual plans (Hobbyist plan excluded).
    </div>
     <div class="clearfix"></div>
     <div id="promo-plan-eligible" style="display:none;">
         Congratulations, you are eligible for an Awesome Promotional Plan!
     </div>
    <div class="clearfix"></div>
    <div id="subtotal_box">
        <b>Subtotal:</b><br>
        <span class="subtotal"></span><br>
        <div id="savings"></div>
    </div>
    
    <div id="vat_disclaimer">
    VAT will be added below if you are an EU resident without a valid VAT number.
    </div>
    
    <h3>Enter your payment details:</h3>
    <?php if (isset($this->errorMessage)) {?>
    <div class="errors"><?php echo $this->errorMessage ?></div>
    <?php }?>
    <?php //echo $form ?>
    
    <?php $billingForm = $form->getSubform("billing_client_info") ?>
    <div class="billing_col1">
        <?=$billingForm->firstname?>
    </div>
    <div class="billing_col2">
        <?=$billingForm->lastname?>
    </div>
    <div class="clearfix"></div>
    <div class="billing_col1">
        <?=$billingForm->companyname?>
    </div>        
    <div class="billing_col2">
        <?=$billingForm->email?>
    </div>        
    <div class="clearfix"></div>
    <div class="billing_col1">
        <?=$billingForm->address1?>
    </div>        
    <div class="billing_col2">
        <?=$billingForm->address2?>
    </div>      
    <div class="clearfix"></div>
    <div class="billing_col1">
        <?=$billingForm->city?>
    </div>        
    <div class="billing_col2">
        <?=$billingForm->state?>
    </div>   
    <div class="clearfix"></div>
    <div>
        <?=$billingForm->postcode?>
    </div>        
    <div>
        <?=$billingForm->country?>
    </div>    
    <div>
        <?=$billingForm->phonenumber?>
    </div>        
    <div>
        <?=$billingForm->securityqid?>
    </div>
    <div>
        <?=$billingForm->securityqans?>
    </div>
    <div id="vat_disclaimer2"><p>VAT will be added to your invoice if you are an EU resident without a valid company VAT number.</p>
    </div>
    <div>
        <?=$billingForm->getElement("7"); ?>
        <div id="vaterror"></div>
    </div>
    <div class="clearfix"></div>
    
    <div>
    <div class="billing_checkbox">
            <?=$billingForm->getElement("71")->renderViewHelper(); ?>
        </div>
        <?=$billingForm->getElement("71")->renderLabel(); ?>
    </div>
    <div class="clearfix"></div>
    
    <div style="float:right; width: 200px;"><p>After submitting your order, you will be redirected to an invoice with payment buttons.</p>
    </div>
    <div id="paymentmethod">
        <?php echo $form->paymentmethod ?>
    </div>
    
    <div class="clearfix"></div>
    <div id="total_box">
        <b>Subtotal:</b> <span class="subtotal"></span><br>
        <span id="tax"></span><br>
        <b>Total:</b> <span id="total"></span>
    </div>
    
    <input type="submit" value="Submit Order" id="atpro_submitorder"></input>
    <div class="clearfix"></div>
</form>
</div>