<?php
$CI = & get_instance();
$_c = strtolower($CI->router->fetch_class());
$_a = strtolower($CI->router->fetch_method());
?>

<section class="content feature">			
	<div class="row">
		<div class="col-sm-12 text-center m-5-t p-5-l p-5-r p-1-t p-1-b text-center">
			<h1 class="oswald"><?php echo $this->lang->line('featTitle'); ?></h1>
		</div>
	</div>
	
	<div class="row feature-row p-5-l p-5-r p-1-t p-1-b text-center">
		<div class="col-sm-4 feature-item">
			<i class="fa fa-key fa-5x text-primary"></i>
			<h4><?php echo $this->lang->line('feat1'); ?></h4>
			<p><?php echo $this->lang->line('feat1Desc'); ?></p>
		</div>
		<div class="col-sm-4 feature-item">
			<i class="fa fa-mobile fa-5x text-primary"></i>
			<h4><?php echo $this->lang->line('feat2'); ?></h4>
			<p><?php echo $this->lang->line('feat2Desc'); ?></p>
		</div>
		<div class="col-sm-4 feature-item">
			<i class="fa fa-thumbs-up fa-5x text-primary"></i>
			<h4><?php echo $this->lang->line('feat3'); ?></h4>
			<p><?php echo $this->lang->line('feat3Desc'); ?></p>
		</div>
	</div>
	
	<div class="row feature-row p-5-l p-5-r p-1-t p-1-b text-center">
		<div class="col-sm-4 feature-item">
			<i class="fa fa-pie-chart fa-5x text-primary"></i>
			<h4><?php echo $this->lang->line('feat4'); ?></h4>
			<p><?php echo $this->lang->line('feat4Desc'); ?></p>
		</div>
		<div class="col-sm-4 feature-item">
			<i class="fa fa-hourglass fa-5x text-primary"></i>
			<h4><?php echo $this->lang->line('feat5'); ?></h4>
			<p><?php echo $this->lang->line('feat5Desc'); ?></p>
		</div>
		<div class="col-sm-4 feature-item">
			<i class="fa fa-life-buoy fa-5x text-primary"></i>
			<h4><?php echo $this->lang->line('feat6'); ?></h4>
			<p><?php echo $this->lang->line('feat6Desc'); ?></p>
		</div>
	</div>
</section>

<!-- SIGN UP -->
<div class="signup-button p-5-l p-5-r p-2-t p-2-b text-center">
	<a href="<?php echo base_url(); ?>registration" class="btn btn-success"><i class="fa fa-check"></i>&nbsp;<?php echo $this->lang->line('freeSignUp'); ?></a>
</div>

<!-- PRICING -->	
<section class="content pricing" id="pricing">
	<!-- BASIC PRICE -->
	<div class="row section-title p-5-l p-5-r p-5-t p-0-b text-center">
		<div class="col">
			<h1 class="m-0-t font-weight-bold"><?php echo $this->lang->line('pricingTitle'); ?></h1>
			<p class="m-0-b"><?php echo $this->lang->line('pricingDesc'); ?></p>
		</div>
	</div>

	<div class="row pricing-row p-5-l p-5-r p-0-t p-1-b text-center">
		<div class="col-md-4 col-md-offset-4 pricing-item hilite">
			<div class="pricing-item-wrap bg-blue p-2-x p-1-y">
				<div class="pricing-item-price"><span class="currency">RM</span><span class="value">500</span></div>
				<ul class="pricing-item-feature">
					<li><i class="fa fa-check"></i>&nbsp;<?php echo $this->lang->line('upTo'); ?></li>
					<li><span id="calculate_voter_0">??</span> <?php echo $this->lang->line('voters'); ?> (RM500 / 200 <?php echo $this->lang->line('voters'); ?>) = RM <span id="calculate_cost_0">??</span></li>
				</ul>
				<div class="pricing-item-button">
					<a href="<?php echo base_url(); ?>registration" class="btn btn-block btn-primary"><?php echo $this->lang->line('freeSignUp'); ?></a>
				</div>
			</div>
		</div>
	</div>
	
	<!-- ADDITIONAL VOTER -->
	<div class="row section-title p-5-l p-5-r p-5-t p-0-b text-center">
		<div class="col">
			<h1 class="m-0-t font-weight-bold"><?php echo $this->lang->line('additionalVoters'); ?></h1>
			<p class="m-0-b"><?php echo $this->lang->line('additionalVotersDesc'); ?></p>
		</div>
	</div>

	<!-- CALCULATE -->
	<div class="row pricing-row calculate p-2-l p-2-r p-1-t p-1-b text-center">
		<div class="col-sm-12">
			<h2><?php echo $this->lang->line('calcCost'); ?></h2>					
			<div class="text-center p-1">
				<div class="text-center col-md-4 col-md-offset-4">
					<strong><?php echo $this->lang->line('calcCostVoters'); ?></strong><br />
					<input type="number" id="calculate_input" min="0" />
					<div class="hidden-md hidden-lg hidden-xl m-1-t"></div>
					<button type="button" class="btn btn-primary" onclick="return calculateCost(this);"><i class="fa fa-calculator"></i>&nbsp;<?php echo $this->lang->line('calc'); ?></button>
					<button type="button" class="btn btn-warning" onclick="return resetCalculate(this);"><i class="fa fa-undo"></i>&nbsp;<?php echo $this->lang->line('reset'); ?></button>
				</div>
			</div>
		</div>
		
		<div class="m-1-t col-sm-4 col-md-offset-4 calculate-result" id="calculate_result" style="display:none;">
			<div class="calculate-result-item">
				<span class="currency">RM</span>
				<span class="value" id="calculate_cost_total"></span>
			</div>
			<div class="text-center m-1-t bg-white">
				<span id="calculate_voter_x">??</span> <?php echo $this->lang->line('voters'); ?> (RM500 / 200 <?php echo $this->lang->line('voters'); ?>) = RM <span id="calculate_cost_x">??</span>
				<br />
				<i class="fa fa-plus fa-5x text-black"></i>
			</div>		
		</div>
	</div>
	
	<div class="row pricing-row p-5-l p-5-r p-0-t p-1-b text-center">
		<div class="col-md-4 pricing-item">
			<div class="pricing-item-wrap p-2-x p-1-y">
				<div class="pricing-item-price"><span class="currency">RM</span><span class="value">0.50</span><small> / <?php echo $this->lang->line('voter'); ?></small></div>
				<ul class="pricing-item-feature">
					<li><i class="fa fa-check"></i>&nbsp;for <?php echo $this->lang->line('voters'); ?> 201 - 500</li>
					<li><span id="calculate_voter_1">??</span> <?php echo $this->lang->line('voters'); ?> (X RM 0.50 / 1 <?php echo $this->lang->line('voter'); ?>) = RM <span id="calculate_cost_1">??</span></li>
				</ul>
			</div>
		</div>
		
		<div class="col-md-4 pricing-item">
			<div class="pricing-item-wrap bg-green p-2-x p-1-y">
				<div class="pricing-item-price"><span class="currency">RM</span><span class="value">0.40</span><small> / <?php echo $this->lang->line('voter'); ?></small></div>
				<ul class="pricing-item-feature">
					<li><i class="fa fa-check"></i>&nbsp;for <?php echo $this->lang->line('voters'); ?> 501 - 1000</li>
					<li><span id="calculate_voter_2">??</span> <?php echo $this->lang->line('voters'); ?> (X RM 0.40 / 1 <?php echo $this->lang->line('voter'); ?>) = RM <span id="calculate_cost_2">??</span></li>
				</ul>
			</div>
		</div>
		
		<div class="col-md-4 pricing-item">
			<div class="pricing-item-wrap bg-yellow p-2-x p-1-y">
				<div class="pricing-item-price"><span class="currency">RM</span><span class="value">0.30</span><small> / <?php echo $this->lang->line('voter'); ?></small></div>
				<ul class="pricing-item-feature">
					<li><i class="fa fa-check"></i>&nbsp;for <?php echo $this->lang->line('voters'); ?> 1001 and more</li>
					<li><span id="calculate_voter_3">??</span> <?php echo $this->lang->line('voters'); ?> (X RM 0.30 / 1 <?php echo $this->lang->line('voter'); ?>) = RM <span id="calculate_cost_3">??</span></li>
				</ul>
			</div>
		</div>
	</div>
</section>

<!-- SIGN UP -->
<div class="signup-button p-5-l p-5-r p-2-t p-2-b text-center">
	<a href="<?php echo base_url(); ?>registration" class="btn btn-success"><i class="fa fa-check"></i>&nbsp;<?php echo $this->lang->line('freeSignUp'); ?></a>
</div>

<!-- ADDITIONAL SERVICES -->
<section class="content services" id="services">
	<div class="row p-5-l p-5-r p-5-t p-1-b text-center">
		<div class="col">
			<h1 class="m-0-t font-weight-bold"><?php echo $this->lang->line('addServiceTitle'); ?></h1>
			<h4 class="m-0-b font-weight-normal"><?php echo $this->lang->line('addServiceDesc'); ?></h4>
		</div>
	</div>
	<div class="row p-5-l p-5-r p-5-t p-1-b">
		<div class="col-md-6 services-item">
			<div class="circle circle-info"><i class="fa fa-print"></i></div>
			<div class="services-info">
				<h3><?php echo $this->lang->line('addService1'); ?></h3>
				<p><?php echo $this->lang->line('addService1Desc'); ?></p>
			</div>
		</div>
		
		<div class="col-md-6 services-item">
			<div class="circle circle-info"><i class="fa fa-print"></i></div>
			<div class="services-info">
				<h3><?php echo $this->lang->line('addService2'); ?></h3>
				<p><?php echo $this->lang->line('addService2Desc'); ?></p>
			</div>
		</div>
		
		<div class="col-md-6 services-item">
			<div class="circle circle-info"><i class="fa fa-print"></i></div>
			<div class="services-info">
				<h3><?php echo $this->lang->line('addService3'); ?></h3>
				<p><?php echo $this->lang->line('addService3Desc'); ?></p>
			</div>
		</div>
		
		<div class="col-md-6 services-item">
			<div class="circle circle-info"><i class="fa fa-print"></i></div>
			<div class="services-info">
				<h3><?php echo $this->lang->line('addService4'); ?></h3>
				<p><?php echo $this->lang->line('addService4Desc'); ?></p>
			</div>
		</div>
	</div>
</section>

<!-- SIGN UP -->
<div class="signup-button p-5-l p-5-r p-2-t p-2-b p-xs-1-l p-xs-1-r text-center">
	<a href="<?php echo base_url(); ?>registration" class="btn btn-success"><i class="fa fa-check"></i>&nbsp;<?php echo $this->lang->line('freeSignUp'); ?></a>
</div>

<script>
function calculateCost() {
	
	$('#calculate_result').slideUp(function() {
		$('[id*="calculate_voter_"]').html('??');
		$('[id*="calculate_cost_"]').html('??');
		
		var request = Number($('#calculate_input').val());
		var data = {
			0 : { 'voters' : request, 'cost' : 500 },
			1 : { 'voters' : 0, 'cost' : 0 },
			2 : { 'voters' : 0, 'cost' : 0 },
			3 : { 'voters' : 0, 'cost' : 0 }
		};
		
		if( (request - 200) > 0 ) {
			data[0]['voters'] = 200;
			data[0]['cost'] = 500;
			if(	(request - 500) > 0 ) {
				data[1]['voters'] = 300;
				data[1]['cost'] = Math.round(	((300 * 0.50) * 100) ) / 100;
				if(	(request - 1000) > 0 ) {
					data[2]['voters'] = 500;
					data[2]['cost'] = Math.round(	((500 * 0.40) * 100) ) / 100;
					
					data[3]['voters'] = request - 1000;
					data[3]['cost'] = Math.round(	((data[3]['voters'] * 0.30) * 100) ) / 100;
				} else {
					data[2]['voters'] = request - 500;
					data[2]['cost'] = Math.round(	((data[2]['voters'] * 0.40) * 100) ) / 100;
				}
			} else {
				data[1]['voters'] = request - 200;
				data[1]['cost'] = Math.round(	((data[1]['voters'] * 0.50) * 100) ) / 100;
			}
		}
		
		var total = 0;
		$.each(data, function(k,v) {
			$('#calculate_voter_'+k).html(v['voters']);
			$('#calculate_cost_'+k).html(v['cost']);
			
			total += v['cost'];
			
			if(k == 0) {
				$('#calculate_voter_x').html(v['voters']);
				$('#calculate_cost_x').html(v['cost']);
			}
		});
		
		$('#calculate_cost_total').html(total);
		
		$(this).slideDown();
	});
}

function resetCalculate() {	
	$('#calculate_result').slideUp(function() {
		$('[id*="calculate_voter_"]').html('??');
		$('[id*="calculate_cost_"]').html('??');
	});
}
</script>




























