
<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('voters'); ?></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(); ?>voter" 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 m-5-b m-2-t p-1-y p-5-x import-step">
			<div class="col-md-6">
				<!-- STEP 1 -->
				<div class="import-step-item m-1-b">
					<div class="import-step-icon">1</div>
					<div class="import-step-text">
						<strong><?php echo $this->lang->line('step1title'); ?></strong>
						<p class="m-1-y">
							<a href="<?php echo base_url(); ?>dist/doc/SPSEVoteImportTemplate.xlsx" target="_blank"><?php echo $this->lang->line('clickHere'); ?></a>
							<div class="helper">
								<?php echo $this->lang->line('step1Helper1'); ?>
							</div>
						</p>
					</div>
				</div>
				<!-- STEP 2 -->
				<div class="import-step-item m-1-b">
					<div class="import-step-icon">2</div>
					<div class="import-step-text">
						<strong><?php echo $this->lang->line('step2title'); ?></strong>
						<p class="m-1-y">
							<div class="helper">
								<ul>
									<li><?php echo $this->lang->line('step2Helper1'); ?></li>
									<li><?php echo $this->lang->line('step2Helper2a'); ?> <a href="#templatecolumnguide"><?php echo $this->lang->line('step2Helper2a'); ?></a> <?php echo $this->lang->line('section'); ?>.</li>
								</ul>
							</div>
						</p>
					</div>
				</div>
				<!-- STEP 3 -->
				<div class="import-step-item">
					<div class="import-step-icon">3</div>
					<div class="import-step-text">		
						<strong><?php echo $this->lang->line('step3title'); ?></strong>	

						<div class="fm-dropper" id="fm-dropper">						
							<div class="alert alert-danger alert-bold dropper-msg" id="dropper-msg"></div>
							<div id="zone" class="dz-default dz-message dropzone dropper-zone"></div>			
							<div class="dropper-menu">
								<div class="pull-left">
									<div class="helper">
										<ul>	
											<li><?php echo $this->lang->line('step3Helper1'); ?></li>
											<li><?php echo $this->lang->line('step3Helper2'); ?></li>
										</ul>
									</div>
								</div>
								<div class="pull-right m-1-t">
									<button type="button" id="cancelBtn" class="btn btn-danger btn-sm"><i class="fa fa-times"></i>&nbsp;<?php echo $this->lang->line('cancel'); ?></button>
									<button type="button" id="uploadBtn" class="btn btn-success btn-sm"><i class="fa fa-upload"></i>&nbsp;<?php echo $this->lang->line('upload'); ?></button>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			
			<div class="col-md-6" id="templatecolumnguide">
				<h3><?php echo $this->lang->line('step2Helper2b'); ?></h3>
				<table border="0" cellpadding="0" cellspacing="0" class="table table-striped table-bordered">
					<thead>
						<tr>
							<th class="col-xs-2"><?php echo $this->lang->line('fld'); ?></th>
							<th class="col-xs-2 hidden-xs"><?php echo $this->lang->line('col'); ?></th>
							<th class="col-xs-8"><?php echo $this->lang->line('desc'); ?></th>
						</tr>
					</thead>
					
					<tbody>
						<tr>
							<td class="col-xs-2"><?php echo ucfirst($this->lang->line('name')); ?></td>
							<td class="col-xs-2 hidden-xs">"<?php echo $this->lang->line('name'); ?>"<br /><?php echo $this->lang->line('colA'); ?></td>
							<td class="col-xs-8">
								<span class="hidden-sm hidden-md hidden-lg hidden-xl">"<?php echo $this->lang->line('name'); ?>" <?php echo $this->lang->line('colA'); ?><br /></span>
								<?php echo $this->lang->line('colAHelper'); ?>
							</td>
						</tr>
						<tr>
							<td class="col-xs-2"><?php echo $this->lang->line('voterID'); ?></td>
							<td class="col-xs-2 hidden-xs">"voter_identifier"<br /><?php echo $this->lang->line('colB'); ?></td>
							<td class="col-xs-8">
								<span class="hidden-sm hidden-md hidden-lg hidden-xl">"voter_ID" <?php echo $this->lang->line('colB'); ?><br /></span>
								<?php echo $this->lang->line('colBHelper1'); ?><hr>
								<?php echo $this->lang->line('colBHelper2'); ?>
							</td>
						</tr>
						<tr>
							<td class="col-xs-2"><?php echo $this->lang->line('voterKey'); ?></td>
							<td class="col-xs-2 hidden-xs">"voter_key"<br /><?php echo $this->lang->line('colC'); ?></td>
							<td class="col-xs-8">
								<span class="hidden-sm hidden-md hidden-lg hidden-xl">"voter_key" <?php echo $this->lang->line('colC'); ?><br /></span>
								<?php echo $this->lang->line('colCHelper'); ?>
							</td>
						</tr>
					</tbody>
				</table>
				<h3><?php echo $this->lang->line('impNotice'); ?></h3>
				<h4 class="m-1-y font-weight-normal"><?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 font-weight-normal"><?php echo $this->lang->line('impNotice2'); ?>.</h5>
			</div>
		</div>
	</div>

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

<script>
Dropzone.autoDiscover = false;
var $zone = null;
$(function() {

	$zone = new Dropzone('div#zone', {
		url: "<?php echo base_url(); ?>import/uploadajax/", 
    dictDefaultMessage: 'Drop an excel sheet (.xlsx only) here or click on it to upload',                      
		autoProcessQueue: false,
		parallelUploads: 1,
		maxFiles: 1,
		acceptedFiles: ".xlsx",
		addRemoveLinks: true,
		init: function() {
			this.on("maxfilesexceeded",function(file) {
				$('#dropper-msg').slideUp().html('');
				$('#dropper-msg').html('Only 1 Excel file (.xlsx) can be uploaded at 1 time').slideDown();
				this.removeFile(file);
				closeLoader();
			});
			
			this.on('success', function (file, response) {
				var obj = JSON.parse(response);				
				if($.trim(	obj['message']	) == "SUCCESS") {
					var p = Number(	$('#project_id').val()	);
					var url = '<?php echo base_url(); ?>import/process/';	//+p;
					openLoader();
					window.location.href = url;
				} else {
					$('#dropper-msg').html(obj['message']).slideDown();
					closeLoader();
				}
				
				if(typeof $zone !== 'undefined' && $zone != null) $zone.removeFile(file);
				$('#dropper-msg').slideUp().html('');
			});
			
			this.on('sending', function(file, xhr, data) {
				openLoader();
				var p = Number(	$('#project_id').val()	);
				data.append('p',p);
				$('#dropper-msg').slideUp().html('');
			});

			this.on("error", function(file, response) {
				$('#dropper-msg').slideUp().html('');
				var msg = null;
				switch(file.type) {
					case 'application/vnd.ms-excel':
					case 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet':
						break;
					default:
						$('#dropper-msg').html('Only an Excel file .xlsx can be accepted.').slideDown();
						this.removeFile(file);
					break;
				}
				closeLoader();
			});
		}
	});
	
	$('#uploadBtn').off('click').on('click',function(event){
		event.preventDefault();
		$('#dropper-msg').html('');
		$zone.processQueue(); 
	});
	
	$('#cancelBtn').off('click').on('click',function(event){
		event.preventDefault();
		$('#dropper-msg').html('').slideUp();
		$zone.removeAllFiles(true);
	});
	
	$('#dropper-msg').click(function() { $(this).slideUp().html(''); });
	
});
</script>




























