<!DOCTYPE html>
<html lang="en">
<head>
  <title>Department DashBoard</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">


    
 <script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/material.js"></script>
<script src="https://cdn.amcharts.com/lib/4/lang/de_DE.js"></script>
<script src="https://cdn.amcharts.com/lib/4/geodata/germanyLow.js"></script>
<script src="https://cdn.amcharts.com/lib/4/fonts/notosans-sc.js"></script>


</head>
<body>
<?Php
	foreach($batch_wise_count as $row){
	 $data[]=array(
		$row['BatchID'], $row['num_of_time']
	 );
	}	
	

	foreach($qualified_count as $row){ 
			 $data1[]=array(
				$row['result'], $row['q_data']
			 );
	}	
	
	
foreach($top_ten as $row){
	//echo $row['RegdNo'];
	$data= $row->time_taken;
	
	$minutes= substr($data,0,2);
	$secs=substr($data,3);
	
	$row->total_sec   = ($minutes * 60) + $secs;

}
//print_r($top_ten);

?> 
<style>
	input[type="file"]{
    display: none;
}
.custom-file-upload {
    border: 1px solid #ccc;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
}

#containers_test > div > div:nth-child(1) > div > svg > rect, #containers_test1 > div > div:nth-child(1) > div > svg > rect {
	fill: #ff000000 !important;
}

#containers_test > div > div:nth-child(1), #containers_test1 > div > div:nth-child(1) {
	/*height: 350px !important; */
}

text {
	fill: black !important;
}

</style>
<?php if(!empty($data)){?>

<div class="container text-center p-4">
<img src="<?php echo base_url();?>assets/uploads/esoft.jpg" style="width:150px; height:60px;"></div>
<div class="container">	
<div class ="row">
<div class="col-md-12 my-3">
<div class="row">
	<div class="col-md-10 my-2">
  <h2>DashBoard</h2>
  </div>
  
  <div class="col-md-2">
	<form action="<?php echo base_url();?>department/insertFile" method="post" enctype='multipart/form-data'>

			<div class="row">
				<label for="file-upload" class="custom-file-upload p-2 mb-0">
					<i class="fa fa-cloud-upload"></i>Upload
				</label>
				<input id="file-upload" type="file" required name="file"/>
				<input type="submit" value="Submit" class="btn btn-primary">
				</div>

	</form>
	</div>
	</div>
	</div>
	
  <div class="col-md-6 my-3">
		<div class="col-sm-12 shadow rounded text-center bg-white">
      <div class="text-center">
        <p>
          Batches
        </p>
      </div>
			<div id="batch"></div>
      </div>
	  </div>


	  <div class="col-sm-6 my-3">
	  <div class="col-md-12 shadow rounded text-center bg-white">
		<div id = "containers_test1">
		</div>
		</div>
	</div>

  <div class="col-sm-6 my-3">
		<div class="col-md-12 shadow rounded text-center bg-white">
			<div id = "containers_test">
      </div>
	  </div>
	  </div>

		<div class="col-md-12">
		<div class="col-sm-12 shadow rounded text-center bg-white my-3 p-3">
			<div id="test" style="height:350px"></div>
      </div>
	  </div>
	</div>
	
<?php }else{ ?>
<div class="container">
	<div class="col-md-12 text-center p-4">
		<h2>DashBoard</h2>
	</div>
	<form action="<?php echo base_url();?>department/insertFile" method="post" enctype='multipart/form-data'>
		<div class="row">
			<div class="col-sm-6 mx-auto shadow rounded text-center jumbotron bg-white">
				<label for="file-upload" class="custom-file-upload">
					<i class="fa fa-cloud-upload"></i>Upload
				</label>
				<input id="file-upload" type="file" required name="file"/>
				<input type="submit" value="submit" class="btn btn-success">
			</div>
		</div>
	</form>
</div>
  <h2 class="text-center">Please Upload the file Generate the graphs</h2>
<?php }?>
	<div class="container text-center">
		<p> Developed by <a href="http://www.singlepointsol.com">Single Point Technologies.</a></p>
	</div>


		<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
		
<script>
		 google.charts.load('current', {'packages':['corechart']});
</script>


<script language = "JavaScript">
         function drawChart() {
            // Define the chart to be drawn.
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Browser');
            data.addColumn('number', 'Percentage');
            data.addRows([
              <?php
			 foreach($slected_data as $info){
				 extract($info);
         if($Selected == "YES"){
            $c="Selected";
         }else{
          $c="Not Selected";
         }
			//	$c=$Selected;
				echo  "['$c', $total_data],";

         }  ?>
            ]);
               
            // Set chart options
            var options = {
               'title':'Number of Candidates Selection',
               'width':480,
                'height':330,
               is3D:true,
			   colors: ['#5eff64','#bcf6b6']

            };
            // Instantiate and draw the chart.
            var chart = new google.visualization.PieChart(document.getElementById('containers_test'));			
			function selectHandler() {
          var selectedItem = chart.getSelection()[0];
          if (selectedItem) {
            var topping = data.getValue(selectedItem.row, 0);
			var url="<?php echo base_url();?>department/ViewData/"+topping;
			window.open(url,"_self"); //redirect.
          }
        }

        google.visualization.events.addListener(chart, 'select', selectHandler);   
		
            chart.draw(data, options);
         }
         google.charts.setOnLoadCallback(drawChart);
      </script>
	  
	  <script language = "JavaScript">
         function drawChart() {
            // Define the chart to be drawn.
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Browser');
            data.addColumn('number', 'Percentage');
			
            data.addRows([
              <?php
			 foreach($qualified_count as $info){
				 extract($info);
				 if($result == "Q"){ 
					$q='Qualified';
				 }else{
					 	$q='Not Qualified';
				 }
					
			 echo  "['$q', $q_data],";

			}  ?>
            ]);
             
			 
            // Set chart options
            var options = {
               'title':'Qualified / Not Qualified',
                'width':480,
                 'height':330,
               is3D:true,
			   colors: ['#5eff64','#ff895e']
            };
            // Instantiate and draw the chart.
            var chart = new google.visualization.PieChart(document.getElementById('containers_test1'));			
			function selectHandler() {
          var selectedItem = chart.getSelection()[0];
          if (selectedItem) {
            var topping = data.getValue(selectedItem.row, 0);
			var url="<?php echo base_url();?>department/ViewData/"+topping;
			window.open(url,"_self"); //redirect.
          }
        }

        google.visualization.events.addListener(chart, 'select', selectHandler);   
		
            chart.draw(data, options);
         }
         google.charts.setOnLoadCallback(drawChart);
      </script>
	  <script type="text/javascript">
      google.charts.load('current', {'packages':['bar']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart(){
        var data = google.visualization.arrayToDataTable([
          ['Batches', 'Members'],
          <?php
			 foreach($batch_wise_count as $info){
				 extract($info);
				echo  "['$BatchID', $num_of_time],";

         }  ?>
        ]);

        var options = {
          chart: {
            title: 'Total No of registrations in a batch',
            'width':480,
            'height':330,
          }
        };

        var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
        chart.draw(data, google.charts.Bar.convertOptions(options));
		 google.visualization.events.addListener(chart, 'select', selectHandler);

function selectHandler() {
  var selectedItem = chart.getSelection()[0];
if(selectedItem) {
    var name = data.getValue(selectedItem.row,0);
    alert(name);
 }
}
      }
    </script>  
	
	
	<script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
		   ['Minutes ','link','Seconds'],
         <?php
			 foreach($top_ten as $info){
				 $d=$info->RegdNo.'-'.$info->time_taken;
				$url="department/ViewData/".$info->id;
				 //extract($info);
				echo  "['$d','$url',$info->total_sec],";

         }  ?>
        ]);

        var view = new google.visualization.DataView(data);
        view.setColumns([0, 2]);

        var options = {
    legend: {position:'top'},
   hAxis: {title: 'Sources', titleTextStyle: {color: 'black'}, count: -1, viewWindowMode: 'pretty', slantedText: true},
   vAxis: {title: 'Total Sales (in USD)', titleTextStyle: {color: 'black'}, count: -1, format: '$#'},
    colors: ['#F1CA3A']
  };

      //  var chart = new google.visualization.Bar( 
         // document.getElementById('test'));
		   var chart = new google.charts.Bar(document.getElementById('test'));
        chart.draw(view, options);

        var selectHandler = function(e) {
         window.location = data.getValue(chart.getSelection()[0]['row'], 1 );
        }

        // Add our selection handler.
        google.visualization.events.addListener(chart, 'select', selectHandler);
      }
    </script>


    	<script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
		   ['Batches ','link','Batches',{ role: 'annotation' }],
         <?php
			 foreach($batch_wise_count as $info){
            //extract($info);
            $c='Batch-'.$info['BatchID'];
            $id="1";
			  	$url="department/ViewData/".$c;
          $b=$info['num_of_time'];
				 //extract($info);
				echo  "['$c','$url',$b,'ss'],";

         }  ?>
        ]);      

        var view = new google.visualization.DataView(data);
        view.setColumns([0, 2,3]);

        var options = {
          title: 'My Daily Activities',
          'width':480,
          'height':330,
           colors: ['#F1CA3A']
        };

      //  var chart = new google.visualization.Bar( 
         // document.getElementById('test'));
		   var chart = new google.charts.Bar(document.getElementById('batch'));
          chart.draw(view, options);

        var selectHandler = function(e) {
         window.location = data.getValue(chart.getSelection()[0]['row'], 1 );
        }

        // Add our selection handler.
        google.visualization.events.addListener(chart, 'select', selectHandler);
      }
    </script>
</div>

</body>
</html>
