
<link rel="stylesheet" href="<?php echo base_url(); ?>dist/css/theme/common.css"/>
<link rel="stylesheet" href="<?php echo base_url(); ?>dist/css/theme/extension.css"/>
<link rel="stylesheet" href="<?php echo base_url(); ?>dist/css/theme/hover.css"/>
<link rel="stylesheet" href="<?php echo base_url(); ?>dist/css/theme/animate.css"/>
<link rel="stylesheet" href="<?php echo base_url(); ?>dist/css/theme/admin/dashboard.css"/>
<link rel="stylesheet" href="<?php echo base_url(); ?>dist/vendors/dropzone-js/dropzone.css">
<script src="<?php echo base_url(); ?>dist/vendors/dropzone-js/dropzone.js"></script>

<div class="content-wrapper">
	<section class="content-header">
			<h1 style="font-family:roboto">
					<b><?php echo $this->lang->line('voter'); ?></b>
			</h1>
			<ol class="breadcrumb">
					<li style="color:#0C0"><a href="#"><i class="fa fa-home"></i> <?php echo $this->lang->line('home'); ?></a></li>
					<li style="color:#0C0"><a href="#"><?php echo $this->lang->line('voter'); ?></a></li>
					<li class="active" style="color:#0C0"><?php echo $this->lang->line('title'); ?></li>
			</ol>
	</section>
			
	<div class="content import m-0-b">
		<input type="hidden" id="project_id" value="<?php echo $project['ID']; ?>" />
		
		<div class="section-title p-5-l p-5-r p-1-t p-0-b text-center">
			<h1 class="m-0-t font-weight-bold"><?php echo $this->lang->line('title'); ?></h1>
			<p class="m-0-b"><?php echo $this->lang->line('project'); ?>: <?php echo ($project) ? $project['title'] : NULL; ?></p>
		</div>
		
		<div class="row p-5-x p-0-b p-1-t m-1-t text-center">
			<div class="flex-btn-group m-1-y col-md-4 col-md-offset-4">
				<a href="<?php echo base_url(); ?>import" class="btn btn-danger"><i class="fa fa-backward"></i>&nbsp;<?php echo $this->lang->line('back'); ?></a>
			</div>
		</div>
		
		<div class="row">
			<div class="helper helper-flat text-center">
				<ul>
					<li><?php echo $this->lang->line('titleHelper'); ?></li>
					<li><?php echo $this->lang->line('titleView'); ?> <a href="#pricing"><?php echo $this->lang->line('titlePricingGuide'); ?></a></li>
				</ul>
			</div>
		</div>
		
		<div class="row">
			<div class="col message <?php echo $respond['type'] ? strtolower($respond['type']) : NULL; ?> text-center" id="message">
			<?php echo ($respond['message']) ? $respond['message'] : ((strtolower($respond['type']) == 'success') ? 'Success' : NULL); ?>
			</div>
		</div>
		
		<div class="row m-5-b m-2-t p-1-y p-5-x import-process">
			<h3><?php echo $this->lang->line('listDesc'); ?></h3>
			<div class="helper helper-md font-16">
				<ul>
					<li><?php echo $this->lang->line('listHelper1'); ?></li>
					<li><?php echo $this->lang->line('impNotice1a'); ?> <strong class="text-red"><?php echo $this->lang->line('replaced'); ?></strong> <?php echo $this->lang->line('impNotice1b'); ?>.</li>
				</ul>
			</div>
			<div class="row m-1">
				<div class="col">
					<strong><?php echo $this->lang->line('listHelper2'); ?> :</strong>
					<span id="num_voters">??</span> <?php echo ucfirst($this->lang->line('voters')); ?> = RM <span id="total_cost">??</span>
					<div class="pull-right text-center m-md-2-r m-xs-0">
						<div class="alert alert-danger alert-bold" id="proceed_msg" style="display: none;"></div>
						<button type="button" class="btn btn-success" onclick="return proceedImport(this);"><?php echo $this->lang->line('confAndContImport'); ?>&nbsp;<i class="fa fa-forward"></i></button>
					</div>
				</div>
			</div>
			<table class="table m-1-y">
				<thead>
					<tr class="hidden-xs">
						<th class="hidden-xs">#</th>
						<th class="col-md-3 col-xs-8"><?php echo ucfirst($this->lang->line('name')); ?></th>
						<th class="col-md-2 hidden-xs">Voter ID *</th>
						<th class="col-md-2 hidden-xs">Voter Key *</th>
						<th class="col-md-2 col-xs-4">
							
							<div class="switch">
								<label>
									<span class="hidden-xs"></span>
									<input type="checkbox" id="select_all" value="1" checked />
									<span class="lever"></span>
									<span class="hidden-xs"></span>
								</label>
							</div>
							<div class="helper helper-xs"><?php echo ucfirst($this->lang->line('sel')); ?></div>
						</th>
					</tr>
				</thead>
				<tbody>
				<?php
				if($list) {
					foreach($list as $key=>$value) {
						?>
						<tr class="voter-item">
							<td class="hidden-xs col-md-1"><?php echo ($key+1); ?></td>
							<td class="col-md-7 col-xs-8">
								<strong class="hidden-sm hidden-md hidden-lg hidden-xl">Name</strong>
								<input type="text" class="form-control name-input" name="name" value="<?php echo $value['name']; ?>" />
								<div class="hidden-sm hidden-md hidden-lg hidden-xl resp-wrap">
									<div class="m-1-y">
										<strong>Voter ID</strong>
										<input type="text" class="form-control authid-input _ss" value="<?php echo $value['voter_ID'];?>" />
										<span class="authid-check-result"></span>
									</div>
									<div class="m-1-y">
										<strong>Voter Password</strong>
										<input type="text" class="form-control authkey-input _ss" value="<?php echo $value['voter_key'];?>" />
										<span class="authkey-check-result"></span>
									</div>
								</div>
							</td>
							<td class="col-md-2 hidden-xs">
								<input type="text" class="form-control authid-input _bs active" value="<?php echo $value['voter_ID'];?>" />
								<span class="authid-check-result"></span>
							</td>
							<td class="col-md-2 hidden-xs">
								<input type="text" class="form-control authkey-input _bs active" value="<?php echo $value['voter_key'];?>" />
								<span class="authkey-check-result"></span>
							</td>
							<td class="col-md-1 col-xs-4">
							
								<div class="switch">
									<label>
										<span class="hidden-xs"></span>
										<input type="checkbox" class="select-input" value="1" checked />
										<span class="lever"></span>
										<span class="hidden-xs"></span>
									</label>
								</div>
							</td>
						</tr>
						<?php
					}
				}
				?>
				</tbody>
			</table>
		</div>
	</div>

	<?php $this->load->view('import/pricing',NULL); ?>
</div>

	
<!-- CONFIRMATION PROCESS MODAL -->		
<div class="modal fade" id="confirm_proceed_modal" role="dialog">
	<div class="modal-dialog modal-lg">			
		<div class="modal-content">
			<div class="modal-header" >
				<button type="button" class="modal-close" data-dismiss="modal"><span></span><span></span></button>
				<h3 class="modal-title text-center"><?php echo $this->lang->line('confQ'); ?></h3>
			</div>
			
			<div class="modal-body">
				<input type="hidden" id="select_project_id" value="" />
				<h4 class="m-1-y text-center"><?php echo $this->lang->line('impNotice1a'); ?> <strong class="font-18 text-red"><?php echo $this->lang->line('replaced'); ?></strong> <?php echo $this->lang->line('impNotice1b'); ?>.</h4>
				<h5 class="m-1-y text-center">Make sure information of all the voters to be imported are correct.</h5>
				<div class="row">
					<div class="col-md-offset-4 col-md-4">
						<div class="flex-btn-group">
							<button class="btn btn-success" onclick="return confirmProceedImport(this);"><i class="fa fa-check"></i>&nbsp;<?php echo $this->lang->line('y'); ?></button>
							<button class="btn btn-danger" data-dismiss="modal"><i class="fa fa-times"></i>&nbsp;<?php echo $this->lang->line('n'); ?></button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<script>
Dropzone.autoDiscover = false;
var usedids = JSON.parse('<?php echo ($used) ? json_encode($used) : json_encode(array()); ?>');
var $zone = null;
$(function() {
	
	respInputName();
	checkVoter();
	calculateCost();
	
	$(window).resize(respInputName);
	
	$('.authid-input').off('change').on('change',function() {
		var $p = $(this).parents('.voter-item').eq(0);
		var $result = $p.find('.authid-check-result');
		
		$result.html('<img src="<?php echo base_url(); ?>dist/img/_sys/loader_xs.gif" class="img-responsive" />');
		
		var authid = $.trim($(this).val());
		var data = {
			p : Number($('#project_id').val()),
			i : authid
		};
			
		$.post('<?php echo base_url(); ?>import/checkvoterajax', data, function(r) {
			if($.trim(authid) == "") $result.append('<i class="fa fa-exclamation-circle text-red"></i>&nbsp;Auth ID is empty.');
			//if(usedids.indexOf(	authid.toLowerCase()	) >= 0) $result.append('<i class="fa fa-exclamation-circle text-yellow hidden"></i>&nbsp;Auth ID has been used. Will replace.');
			//if(r.toUpperCase() == 'EXISTS') $result.append('<i class="fa fa-exclamation-circle text-warning hidden"></i>&nbsp;Auth ID has been used.');
			$result.find('img').remove();
		});
		
	});
	
	$('.authkey-input').off('change').on('change',function() {
		var $p = $(this).parents('.voter-item').eq(0);
		var $result = $p.find('.authkey-check-result');
		
		$result.html('<img src="<?php echo base_url(); ?>dist/img/_sys/loader_xs.gif" class="img-responsive" />');
		
		var authkey = $.trim($(this).val());
		if($.trim(authkey) == "") $result.append('<i class="fa fa-exclamation-circle text-red"></i>&nbsp;Auth Key is empty.');
		$result.find('img').remove();
		
	});
	
	$('#select_all').off('change').on('change',function() {
		if(	$(this).is(':checked')	) {
			$('.select-input').prop('checked',1).attr('checked','checked');
		} else {
			$('.select-input').prop('checked',0).removeAttr('checked');
		}
		calculateCost();
	});
	
	$('.select-input').off('change').on('change',calculateCost);
});

function proceedImport() {
	closeLoader();
	$('#confirm_proceed_modal').modal('show');
}

function confirmProceedImport() {
	var p = Number($('#project_id').val());
	var data = $.map($('.select-input:checked'), function (el) {
		var $p = $(el).parents('.voter-item').eq(0);
		var name = $.trim($p.find('.name-input').val());
		var authid = $.trim($p.find('.authid-input.active').val());
		var authkey = $.trim($p.find('.authkey-input.active').val());
		
		return { project : p, name : name, authid : authid, authkey : authkey };		
	}, this);
	
	$('#proceed_msg').html('').slideUp();
	$('#confirm_proceed_modal').modal('hide');
	openLoader();
	$.post('<?php echo base_url(); ?>import/savevoterajax', { project : p, data : data }, function(r) {
		if(r.toUpperCase() == 'SUCCESS') {
			window.location.href = '<?php echo base_url(); ?>voter';
		} else {
			$('#proceed_msg').html(r).slideDown();
		}
		
		closeLoader();
	});
}

function checkVoter() {
	var p = Number($('#project_id').val());
	if($('.voter-item').length) {
		$('.voter-item').each(function(k,v) {
			$ir = $(this).find('.authid-check-result');
			$kr = $(this).find('.authkey-check-result');
			
			var authid = $.trim($(this).find('.authid-input.active').val());
			var authkey = $.trim($(this).find('.authkey-input.active').val());
			
			if($.trim(authkey) == "") $kr.append('<i class="fa fa-exclamation-circle text-red"></i>&nbsp;Auth Key is empty.');
			$kr.find('img').remove();
			
			if($.trim(authid) == "") $ir.append('<i class="fa fa-exclamation-circle text-red"></i>&nbsp;Auth ID is empty.');
			//if(usedids.indexOf(	authid.toLowerCase()	) >= 0) $ir.append('<i class="fa fa-exclamation-circle text-yellow hidden"></i>&nbsp;Auth ID has been used. Will replace.');
			$ir.find('img').remove();
		});
	}
}

function respInputName() {
	$('.authid-input').removeAttr('name').removeClass('active');
	$('.authkey-input').removeAttr('name').removeClass('active');
	if(	$('.resp-wrap').is(':visible') ) {
		$('.authid-input._ss').attr('name','authid').addClass('active');
		$('.authkey-input._ss').attr('name','authkey').addClass('active');
	} else {
		$('.authid-input._bs').attr('name','authid').addClass('active');
		$('.authkey-input._bs').attr('name','authkey').addClass('active');
	}
}

function calculateCost() {
	$('#num_voters').html('');
	$('#total_cost').html('');
	
	var request = $('.select-input:checked').length;
	
	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) {
		total += v['cost'];
	});
	
	$('#num_voters').html(request);
	$('#total_cost').html(total);
}

</script>




























