<?php
	include('./models/lm/.lm.header.php');
?>

<section class="section" style="padding: 0px;">
	<div class="container">
		<div class="table-container" style="padding:0px;">
			<?php
				//include('./models/lm/lm_employee.php');
			?>
			
			<div class="field has-addons has-addons-left is-small">
				<p class="control">
					<span class="select is-small">
						<select>
							<option>Select Principal</option>
							<option>£</option>
							<option>€</option>
						</select>
					</span>
				</p>
				<p class="control">
					<span class="select is-small">
						<select>
							<option>Select Month</option>
							<option>£</option>
							<option>€</option>
						</select>
					</span>
				</p>
				<p class="control">
					<span class="select is-small">
						<select>
							<option>Select Period</option>
							<option>£</option>
							<option>€</option>
						</select>
					</span>
				</p>
				<p class="control">
					<a class="button is-primary is-small">
					View
					</a>
				</p>
			</div>

			
			<div class="table-container" style="padding:12px;">
				<div class="columns">
					<div class="column is-6 is-centered">
						<h1 class="title is-6">ABBOTT PHARMA DTR</h1>
						<canvas id="myChart" width="10" height="7"></canvas>
					</div>
					<div class="column">
						<h1 class="title is-6" style="margin-bottom:3px;">ABBOTT ATTENDANCE</h1>
						<table class="table is-narrow is-hoverable">
						  <thead>
							<tr>
							  <th>Principal Code</th>
							  <th>Employee No.</th>
							  <th>Name</th>
							  <th>Date</th>
							  <th>No. of Hrs.</th>
							</tr>
						  </thead>
						  <tbody>
							<tr>
							  <td>ABBP</td>
							  <td>B147706</td>
							  <td>ALMAREZ ,MA JUVELYN</td>
							  <td>2021-01-07</td>
							  <td>10:36</td>
							</tr>
							<tr>
							  <td>ABBP</td>
							  <td>B147706</td>
							  <td>ALMAREZ ,MA JUVELYN</td>
							  <td>2021-01-07</td>
							  <td>10:36</td>
							</tr>
							<tr>
							  <td>ABBP</td>
							  <td>B147706</td>
							  <td>ALMAREZ ,MA JUVELYN</td>
							  <td>2021-01-07</td>
							  <td>10:36</td>
							</tr>
							<tr>
							  <td>ABBP</td>
							  <td>B147706</td>
							  <td>ALMAREZ ,MA JUVELYN</td>
							  <td>2021-01-07</td>
							  <td>10:36</td>
							</tr>
							<tr>
							  <td>ABBP</td>
							  <td>B147706</td>
							  <td>ALMAREZ ,MA JUVELYN</td>
							  <td>2021-01-07</td>
							  <td>10:36</td>
							</tr>
							<tr>
							  <td>ABBP</td>
							  <td>B147706</td>
							  <td>ALMAREZ ,MA JUVELYN</td>
							  <td>2021-01-07</td>
							  <td>10:36</td>
							</tr>
							<tr>
							  <td>ABBP</td>
							  <td>B147706</td>
							  <td>ALMAREZ ,MA JUVELYN</td>
							  <td>2021-01-07</td>
							  <td>10:36</td>
							</tr>
							<tr>
							  <td>ABBP</td>
							  <td>B147706</td>
							  <td>ALMAREZ ,MA JUVELYN</td>
							  <td>2021-01-07</td>
							  <td>10:36</td>
							</tr>
							<tr>
							  <td>ABBP</td>
							  <td>B147706</td>
							  <td>ALMAREZ ,MA JUVELYN</td>
							  <td>2021-01-07</td>
							  <td>10:36</td>
							</tr>
							<tr>
							  <td>ABBP</td>
							  <td>B147706</td>
							  <td>ALMAREZ ,MA JUVELYN</td>
							  <td>2021-01-07</td>
							  <td>10:36</td>
							</tr>
							<tr>
							  <td>ABBP</td>
							  <td>B147706</td>
							  <td>ALMAREZ ,MA JUVELYN</td>
							  <td>2021-01-07</td>
							  <td>10:36</td>
							</tr>
							<tr>
							  <td>ABBP</td>
							  <td>B147706</td>
							  <td>ALMAREZ ,MA JUVELYN</td>
							  <td>2021-01-07</td>
							  <td>10:36</td>
							</tr>
						  </tbody>
						</table>
						
					</div>
				</div>
			<div>
			
			<script>
				
				var data = {
				  labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July','January', 'February', 'March', 'April', 'May', 'June', 'July'],
				  datasets: [{
					label: 'ABBOTT PHARMA DTR',
					data: [6, 10, 5, 2, 20, 30, 45, 0, 10, 5, 2, 20, 30, 45],
					backgroundColor: 'rgb(255, 99, 132)',
					borderColor: 'rgb(255, 99, 132)'
				  }]
				}

				$(document).ready(
				  function() {
					var canvas = document.getElementById("myChart");
					var ctx = canvas.getContext("2d");
					var myNewChart = new Chart(ctx, {
					  type: 'bar',
					  data: data,
					  options: {
						legend: {
							display: false
						},
						tooltips: {
							callbacks: {
								label: function(tooltipItem) {
									console.log(tooltipItem)
									return tooltipItem.yLabel;
								}
							}
						}
					}
					});

					canvas.onclick = function(evt) {
					  var activePoints = myNewChart.getElementsAtEvent(evt);
					  if (activePoints[0]) {
						var chartData = activePoints[0]['_chart'].config.data;
						var idx = activePoints[0]['_index'];

						var label = chartData.labels[idx];
						var value = chartData.datasets[0].data[idx];

						var url = "http://example.com/?label=" + label + "&value=" + value;
						console.log(url);
						alert(url);
					  }
					};
				  }
				);

			</script>
			
		</div>		
	</div>
</section>



