<div class="content-wrapper">
	<section class="content-header">
		<h1>Utama</h1>
		<ol class="breadcrumb">
			<li><a href="#"><i class="fa fa-dashboard"></i> Utama</a></li>
			<li class="active">Dashboard</li>
		</ol>
	</section>
	<section class="content">
		<!-- RINGKASAN STATUS PERMOHONAN DAN SEMAKAN -->
		<div class="row">
			<div class="col-xs-12">				
				<!-- JUMLAH PERMOHONAN -->
				<div class="col-xs-12 col-sm-4" data-toggle="tooltip" title="Senarai Syarikat yang Memohon" onclick="javascript:OpenModal('apply',this);">
					<div class="info-box bg-dashboard-1">
						<span class="info-box-icon"><i class="ion ion-clipboard"></i></span>
						<div class="info-box-content">
							<h1 class="info-box-text">JUMLAH PERMOHONAN</h1>
							<span class="number" class="info-box-number number"><?php echo ($numApply) ? $numApply : 0; ?> SYARIKAT</span>
							<div class="progress hidden">
								<div class="progress-bar" style="width: 30%"></div>
							</div>
							<span class="progress-description"></span>
						</div>
					</div>
				</div>
				<!-- SEDANG DIPROSES -->
				<div class="col-xs-12 col-sm-4" data-toggle="tooltip" title="Senarai Syarikat yang Sedang Diproses" onclick="javascript:OpenModal('processing',this);">
					<div class="info-box bg-dashboard-3">
						<span class="info-box-icon"><i class="ion ion-compose"></i></span>
						<div class="info-box-content">
							<h1 class="info-box-text">SEDANG DIPROSES</h1>
							<span class="number" class="info-box-number number"><?php echo ($inProg) ? $inProg : 0; ?> SYARIKAT</span>
							<div class="progress">
								<?php $percent = floor(((($inProg) ? $inProg : 0) / (($numApply) ? $numApply : (($inProg) ? $inProg : 1))*100)); ?>
								<div class="progress-bar" style="width: <?php echo $percent; ?>%"></div>
							</div>
							<span class="progress-description"></span>
						</div>
					</div>
				</div>
				<!-- MEMATUHI -->
				<div class="col-xs-12 col-sm-4" data-toggle="tooltip" title="Senarai Syarikat yang Selesai Semakan" onclick="javascript:OpenModal('completed',this);">
					<div class="info-box bg-dashboard-2">
						<span class="info-box-icon"><i class="ion ion-android-checkbox"></i></span>
						<div class="info-box-content">
							<h1 class="info-box-text">SELESAI</h1>
							<span class="number" class="info-box-number number"><?php echo ($isComp) ? $isComp : 0; ?> SYARIKAT</span>
							<div class="progress">
								<?php $percent = floor(((($isComp) ? $isComp : 0) / (($numApply) ? $numApply : (($isComp) ? $isComp : 1))*100)); ?>
								<div class="progress-bar" style="width: <?php echo $percent; ?>%"></div>
							</div>
							<span class="progress-description"></span>
						</div>
					</div>
				</div>
			</div>
		</div>	
		
		<div class="row">
			<div class="col-xs-12">			
			<?php
			$colors = array('green','blue','yellow','red');
			$g = 0;
			foreach($grades as $grade=>$detail) {
				?>
				<div class="col-xs-12 col-sm-3" data-toggle="tooltip" title="Senarai Syarikat yang <?php echo (ucwords(strtolower($detail['result']))); ?>"
						onclick="javascript:OpenModal('grade<?php echo $grade; ?>',this);">
					<div class="info-box bg-<?php echo $colors[$g]; ?>">
						<span class="info-box-icon"><h1><?php echo strtoupper($grade); ?></h1></span>
						<div class="info-box-content">
							<h1 class="info-box-text"><?php echo (ucwords(strtolower($detail['result']))); ?></h1>
							<span class="number" class="info-box-number number"><?php echo ($detail['total']) ? $detail['total'] : 0; ?> SYARIKAT</span>
						</div>
					</div>
				</div>
				<?php
				 $g++;
			}
			?>
			</div>
		</div>

		<!-- TABURAN SYARIKAT MENGIKUT NEGERI -->
		<?php if($compByState['ALL']) : ?>
		<div class="box box-danger">
			<div class="box-header with-border">
				<h3 class="box-title">Taburan Syarikat Mengikut Negeri</h3>
				<div class="box-tools pull-right">
					<div class="btn-group">
						<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
						<!--
						<button type="button" class="btn btn-box-tool dropdown-toggle" data-toggle="dropdown"><i class="fa fa-cog"></i></button>
						<ul class="dropdown-menu" role="menu">
							<li><a href="Javascript:refreshMap();"><i class="fa fa-refresh fa-fw"></i>Muat Semula Data</a></li>
							<li class="divider"></li>
							<li><a href="#"><i class="fa fa-print fa-fw"></i>Cetak</a></li>
						</ul>
						-->
					</div>
				</div>
			</div>
			
			<div class="box-body">
				<div id="malaysia">
					<div class="row">
						<div class="col-xs-12 col-sm-9" style="padding: 1%;">
							<div class="map"></div>
							<div class="areaLegend"></div>
						</div>
						<div class="col-xs-12 col-sm-3">
							<h4>Senarai Negeri</h4>
							<table class="table table-bordered table-hover table-striped" style="font-size: 10px;">
								<thead><tr><th>Negeri</th><th>Jumlah</th><th>Peratusan (%)</th></tr></thead>
								<tbody>
								<?php
								$total = ($compByState['TOTAL']) ? $compByState['TOTAL'] : 1;
								foreach($compByState['ALL'] as $key=>$value) {
									?>
									<tr>
										<td><?php echo $key; ?></td>
										<td><?php echo $value; ?></td>
										<td><?php echo round((($value / $total)*100),2); ?></td>
									</tr>
									<?php
								}
								?>
								</tbody>
								<tfoot>
									<tr><th>Jumlah</th><th><?php echo $total; ?></th><th>100%</th></tr>
								</tfoot>
							</table>
						</div>
					</div>
				</div>
				
			</div>
		</div>
		<?php endif; ?>
				
		<!-- TABURAN PEMARKAHAN -->
		<?php if($chartist) : ?>
		<div class="box box-danger">
			<div class="box-header with-border">
				<h3 class="box-title">Taburan Pemarkahan</h3>
				<div class="box-tools pull-right">
					<div class="btn-group">
						<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
					</div>
				</div>
			</div>
			
			<div class="box-body">
				<div id="markDist"></div>
				<div class="legends">
					<h5>Rujukan Markah</h5>
					<ul class="ct-legend ct-legend-horizontal">
					<?php
						foreach($chartist['label'] as $l=>$lbl) {
							?><li class="ct-series-<?php echo $l; ?>" data-target="<?php echo $l; ?>"><?php echo $lbl; ?></li><?php
						}
					?>
					</ul>
				</div>
			</div>
		</div>
		<?php endif; ?>

		<!-- ANALISA SYARIKAT -->
		<?php if($topcomp) : ?>
		<div class="row">
			<?php
			foreach($topcomp as $method=>$detail) { 
				if($detail['comp']) {
					?>
					<div class="col-xs-12 col-sm-6">
						<div class="box box-danger">
							<div class="box-header with-border">
								<h3 class="box-title">10 Syarikat Mempunyai <?php echo ucwords(strtolower($detail['name'])); ?> Tertinggi</h3>
								<div class="box-tools pull-right">
									<div class="btn-group">
										<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
									</div>
								</div>
							</div>
							<div class="box-body">							
								<table class="table table-bordered table-striped">
									<thead>
										<tr>
											<th>Syarikat</th>
											<th class="text-center">Markah</th>
											<th class="text-center">Peratusan (%)</th>
										</tr>
									</thead>
									<tbody>
									<?php
									foreach($detail['comp'] as $comp) {
										?>
										<tr>
											<td><?php echo $comp['name']; ?></td>
											<td class="text-center"><?php echo $comp['mark'] . (($detail['total'])	?	"/".$detail['total'] : NULL); ?></td>
											<td class="text-center"><?php echo round(	($comp['mark']/(	($detail['total'])	?	$detail['total']	:	(($comp['mark'])?$comp['mark']:1)	)	)*100,	2); ?></td>
										</tr>
										<?php
									}
									?>
									</tbody>
								</table>
							</div>
						</div>
					</div>			
					<?php
				}
			}
			?>	
		</div>
		<?php endif; ?>
	</section>
</div>

<!-- MODAL -->
<div class="modal fade" id="homeModal" role="dialog">
	<div class="modal-dialog modal-lg">
		<div class="modal-content">
			<div class="modal-header" >
				<button type="button" class="close" data-dismiss="modal">&times;</button>
				<h3 class="modal-title"></h3>
			</div>
			
			<div class="modal-body">			
			</div>
			
			<div class="modal-footer">
				<a type="button" class="btn btn-danger btn-sm pull-center" data-dismiss="modal"><i class="fa fa-times"></i>&nbsp;<?php echo $this->lang->line('Close'); ?></a>
			</div>
		</div>
	</div>
</div>

<style media="screen">
.mapael .mapTooltip {
	position: absolute;
	background-color: rgba(0,0,0,0.5);
	moz-opacity: 0.80;
	opacity: 0.80;
	filter: alpha(opacity=80);
	padding: 10px;
	z-index: 1000;
	max-width: 200px;
	display: none;
	color: #FFF;
	font-weight: bold;
	text-align: center;
}

.mapael .map {
	overflow: hidden;
	position: relative;
}

.ct-legend.ct-legend-horizontal li { display: inline-block; margin: 0 10px; }
.ct-bar { stroke-width: 25px !important; }

*[data-toggle="tooltip"] { cursor: pointer; }
</style>
<script type="text/javascript">
$(function() {	
	// MALAYSIA MAPAEL
	$('#malaysia').mapael({
		map: {
			name: 'malaysia',
			defaultArea: { attrs: { fill: '#E5E5E5', stroke: '#232323', 'stroke-width': 0.5, cursor: 'pointer' }, attrsHover : { fill: '#FFF' } },
			zoom: { enabled: false }
		},
		areas: JSON.parse('<?php echo json_encode($mapael); ?>'),
		legend: {
			area: {
				slices: [
					{ 					max: 0, 	label: '0',				attrs: { fill: '#E5E5E5' } },
					{ min: 1, 	max: 5, 	label: '1 - 5',		attrs: { fill: '#2C3E50' } },
					{ min: 6, 	max: 10, 	label: '6 - 10',	attrs: { fill: '#CC9999' } },
					{ min: 11, 	max: 15, 	label: '11 - 15',	attrs: { fill: '#ffd633' } },
					{ min: 16, 	max: 20, 	label: '16 - 20',	attrs: { fill: '#39ac39' } },
					{ min: 21, 						label: ' > 20',		attrs: { fill: '#99004d' } },
				]
			}
		}
	});
		
	// MARK DISTRIBUTION BAR CHART
	new Chartist.Bar('#markDist', {
		labels: JSON.parse('<?php echo json_encode($chartist['label']); ?>'),
		series: JSON.parse('<?php echo json_encode($chartist['series']); ?>'),
	}, {
		height: '220px',
		fullWidth: true,
		seriesBarDistance: 15,
		axisX: {
			showGrid: false
		},
		axisY: {
			type: Chartist.AutoScaleAxis,
			onlyInteger: true
		}
	}, [
		['screen and (min-width: 641px) and (max-width: 1024px)', {
			seriesBarDistance: 10,
			axisX: {
				labelInterpolationFnc: function (value) {
					return value;
				}
			}
		}],
		['screen and (max-width: 640px)', {
			seriesBarDistance: 5,
			axisX: {
				labelInterpolationFnc: function (value) {
					return value.substr(-2,1);
				}
			}
		}]
	]);
	
	PNotify.prototype.options.delay = 500;
});

function OpenModal(type, me) {
	var title = $(me).attr('data-original-title');
	var $m = $('#homeModal');
	if( type && $m.length ) {
		LoadingOpen();
		$.post('<?php echo base_url(); ?>home/openmodal', { type: type }, function(res) {
			console.log(title);
			$m.find('.modal-title').html(title);
			$m.find('.modal-body').html(res);
			$m.modal('show');	
			LoadingClose();
		}).done(function() { LoadingClose(); });
	}
	return false;
}

function LoadingOpen() {
	new PNotify({
		title: "Please Wait",
		type: 'info',
		icon: 'fa fa-spinner fa-spin',
		addclass: 'custom',
		opacity: .8,
		nonblock: {
				nonblock: true
		}
	});
}	

function LoadingClose() {
	PNotify.removeAll();
}	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
</script>
