
<?php
$abso = str_replace("\\","/", FCPATH);
$virt = str_replace("\\","/", base_url());	
if($position) {
	?>	
	<div class="position-wrapper m-1-t p-1" id="position_wrapper">
		<input type="hidden" id="positionID" value="<?php echo $position['positionID']; ?>" />
		<h3 class="position-title">
			<div class="position-order circle circle-sm circle-primary"><span><?php echo $pos; ?></span></div>
			<span class="m-1-l m-xs-0-l"><?php echo $position['positionName']; ?></span>
		</h3>
		
		<div class="helper">
			<ul>
				<li>You must choose <span class="large text-red"><?php echo ($position['elected'] > 1) ? $position['elected'] : 'only 1'; ?></span> candidate</li>
				<li>Click on the candidate image to select</li>
			</ul>
		</div>
		
		<div class="candidate-selected circle circle-warning circle-xs"
				data-toggle="tooltip" title="<?php echo $this->lang->line('selected_num'); ?>" id="selected_num"><span>0</span></div>
		
		<div class="row"><div class="col-xs-12 text-red" id="message"></div></div>
		
		<div class="row candidate-list" id="candidate_list">
		<?php
		if($candidates) {
			foreach($candidates as $candidate) {				
				$image = $virt."dist/img/_sys/user.png";
				if($candidate['candidate_picture'] && file_exists($abso."img/candidate/".$candidate['candidate_picture'])) {
					$image = $virt."img/candidate/".$candidate['candidate_picture'];
				}
				?>
				<div class="col-md-3 candidate-item" onclick="return selectCandidate(this);" data-id="<?php echo $candidate['candidateID']; ?>">
					<input type="hidden" class="candidate-id" value="<?php echo $candidate['candidateID']; ?>" />
					<div class="candidate-wrap">
						<div class="circle circle-success candidate-check"><i class="fa fa-check"></i></div>
						<div class="candidate-image">
							<img class="img-responsive-reverse" src="<?php echo $image; ?>" />
						</div>
						<div class="candidate-name text-center font-weight-bold">
							<?php echo $candidate['candidateName']; ?>
						</div>
					</div>
				</div>
				<?php
			}
		}
		?>
		</div>
	</div>
	<?php
}
?>

<div class="row">
	<div class="col-xs-12 p-xs-0 p-5-x p-1-y text-center">
		<button type="button" class="btn btn-danger p-xs-1-x p-xs-0-y p-3-x p-1-y font-18" onclick="return loadSegment(<?php echo $prev_step; ?>,<?php echo $prev_pos; ?>);" id="back_button">
			<i class="fa fa-reply"></i>&nbsp;&nbsp;<?php echo $this->lang->line('vote_back'); ?>
		</button>
		<div class="hidden-md hidden-lg hidden-xl p-1-y"></div>
		
		<button type="button" class="btn btn-warning p-xs-1-x p-xs-0-y p-1 font-18" onclick="return loadSegment(<?php echo $step; ?>,<?php echo $pos; ?>);" id="refresh_button">
			<i class="fa fa-refresh"></i>
			<span class="hidden-sm hidden-md hidden-lg hidden-xl">&nbsp;&nbsp;<?php echo $this->lang->line('vote_refresh'); ?></span>
		</button>
		<div class="hidden-md hidden-lg hidden-xl p-1-y"></div>
		
		<button type="button" class="btn btn-primary p-xs-1-x p-xs-0-y p-3-x p-1-y font-18" onclick="return submitVote(this);" id="next_button">
			<i class="fa fa-mail-forward"></i>&nbsp;&nbsp;<?php echo $this->lang->line('vote_next'); ?>
		</button>
	</div>
</div>

<script>
var limit = Number('<?php echo $position['elected']; ?>');
var selected = 0;

function selectCandidate(me) {	
	$('#message').html('');
	
	if(limit > 1) {	
		var amiselected = $(me).hasClass('selected');
		
		if(amiselected) {
			selected--;
			$(me).removeClass('selected');
		} else {
			if(selected >= limit) {
				//$('#message').html('Cannot select more than '+limit+' candidate');
				alert('Cannot select more than '+limit+' candidate.');
			} else {
				selected++;
				$(me).addClass('selected');
			}
		}
	} else {
		$('.candidate-item').removeClass('selected');
		$(me).addClass('selected');
		selected = 1;
	}
	
	$('#selected_num > span').html(selected);
}

function submitVote(me) {
	$('#message').html('');
	openLoader();
		
	var chosen = $.map($('.candidate-item.selected'), function (el) {
			var id = Number($(el).data('id'));
			return id;
	}, this);
	
	if(!chosen.length || chosen.length != limit) {
		$('#message').html('Please choose '+limit+' candidate'+((limit > 1) ? 's' : '')+' for this designation.');
		closeLoader();
		return;
	}
	
	delete data['key'];
	var d = data;
			d.positionID = Number($('#positionID').val());
			d.chosen = chosen;
			d.limit = limit;
			d.selected = selected;
	
	$.post('<?php echo base_url(); ?>v/submitvoteajax', d, function(r) {
		var obj = (	$.trim(r)	) ? JSON.parse(r) : null;
		if(obj) {
			if(obj['status'].toUpperCase() == "SUCCESS") {
				var ns = Number(obj['next-step']);
				var np = Number(obj['next-pos']);
				
				loadSegment(	ns, np );
			} else {
				$('#message').html(obj['message']);
			}
		}
		closeLoader();
	});
}
</script>













