<?php
  // echo "<pre>";print_r($student);exit;
?>
<html>
    <head>
        <title><?php echo $b_header['title']; ?></title>
        <style>
            @media print
            {
                * {-webkit-print-color-adjust:exact;}
                @page {margin:0in 0.10in 0in 0in; }
                .super_container
                {
                    page-break-after: always;
                    margin-top:0.25in;
                    position:relative;
                    width:100vw;
                    height:710px;
                }
            }
            body {margin: 0.25in 0.25in 0.63in 0.25in; box-sizing:border-box;width:100vw; height:100vh;padding-bottom:0.63in;}
            *{margin:0;padding:0;font-family:calibri;}
            .clear:after{content:"";clear:both;display:block;}
            .left{float:left;}
            .right{float:right;}
            .wd-10{width:10%;}
            .wd-20{width:20%;}
            .wd-30{width:30%;}
            .wd-40{width:40%;}
            .wd-50{width:50%;}
            .wd-60{width:60%;}
            .wd-70{width:70%;}
            .wd-80{width:80%;}
            .wd-90{width:90%;}
            .wd-100{width:100%;}
            .wd-15{width:15%;}
            .wd-25{width:25%;}
            .wd-35{width:35%;}
            .wd-45{width:45%;}
            .wd-55{width:55%;}
            .wd-65{width:65%;}
            .wd-75{width:75%;}
            .wd-85{width:85%;}
            .wd-95{width:95%;}
            .wd-100{width:100%;}
            .title{font-size:35px;}
            .super_container
            {
                margin-bottom:200px;
                position:relative;
                width:100vw;
                height:710px;
            }
            .wrapper{
                border:4px dotted #191970;
               
                outline-offset: 5px;
                box-sizing: border-box;
                padding:5px;
            }
           
            .super_wrapper
            {
                position:absolute;
                top:0;
                left:0;
                width:100%;
                z-index:120;
                margin:0;
                padding:0;
            }
            .watermark
            {
                height:200px;
                width:300px;
                margin:auto;
                padding-top:50px;
                padding-left:100px;
                opacity:0.1;
                background:url("<?php echo base_url().$b_header['logo1']; ?>");
                background-size:100% 100%;
            }
            .watermark_wrapper
            {
                height:470px;
                width:100%;
                margin-top:50px;
                display:inline-flex;
                display:-webkit-inline-flex;
             }
            .wrapper.left2{
                width: calc(90vw);
                margin-right: 20px;
                margin-left: 20px;
            }
            h1,h2,h3{
                color:#191970;
                font-family:calibri;
                text-align:center;
            }
            .boxed{color:#000000;width:80%;margin:0 auto;}
            .header{
                width:100%;
                          
            }
            .body{
                padding:10px;
            }
            .row{
                width:100%;
                margin: 0px auto;  
            }
            .text-center{text-align:center;}
            .bold{font-weight:bold;}
            .b-u-l{
                border-bottom: 1px solid #000;
                height:inherit;
            }
            .x-small{
                font-size: 12px;
            }
            .x-x-small{
                font-size: 9px;
            }
            .page_break{
                width: 100vw;
                height: 100vh;
                padding: 10px 0px;
                box-sizing: border-box;
            }
            .tbl1
            {
                border: 2px dotted #000;
                text-align:center;
                width:100%;
                min-height:20px;
            }
            .th{
               
                background-color:#5a7bc5; 
                padding: 3px !important;
            }
            .td{
                border: 2px dotted #000;
                padding: 2px !important;
            }
            .normal{
                font-weight: normal !important;
            }
            .text-right{
                text-align: right !important;
            }
            .text-left{
                text-align: left !important;
            }
            .wd-100{
            margin:1px 0px;
            }
            h5{
                font-size: 0.90em;
            }
            
            #chart_div table{
            margin:5px;
            }
            .margin-a{margin: 30px auto 0px auto;}
        </style>

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<script src="<?php echo base_url(); ?>assets/js/jquery.canvasjs.min.js"></script>
<script src="<?php echo base_url(); ?>assets/js/canvasjs.min.js"></script>


 <script type="text/javascript">
// Load google charts
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

// Draw the chart and set the chart values
function drawChart() {
   
  var data = google.visualization.arrayToDataTable([
  ['Attandecne ', 'Percentage'],
  ["<?php echo 'Absent-:'.round(($student['absnt']*100)/($student['present'] + $student['absnt'] + $student['leave']+ $student['tardy']),0).'%'; ?>", <?php echo $student['absnt']; ?>],
  ["<?php echo 'Present-:'.round(($student['present']*100)/($student['present'] + $student['absnt'] + $student['leave']+ $student['tardy']),0).'%'; ?>", <?php echo $student['present']; ?>],
  ["<?php echo 'Leave-:'.round(($student['leave']*100)/($student['present'] + $student['absnt'] + $student['leave']+ $student['tardy']),0).'%'; ?>", <?php echo $student['leave']; ?>],
  ["<?php echo 'Tardy-:'.round(($student['tardy']*100)/($student['present'] + $student['absnt'] + $student['leave']+ $student['tardy']),0).'%'; ?>", <?php echo $student['tardy']; ?>],
  
]);

  // Optional; add a title and set the width and height of the chart
  var options = {};
var options = {
'title':'Attendance',
         is3D: true,pieHole: 0.3,
         'width':315, 'height':200,
        
    titleTextStyle: {
        color: '#006600',
        fontSize: 14,
        bold: true
    }
}


  // Display the chart inside the <div> element 1ith id="piechart"
  var chart = new google.visualization.PieChart(document.getElementById('piechart'));
  chart.draw(data, options);
}
</script>

<script type="text/javascript">
      google.charts.load('current', {'packages':['bar']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Examination ', 'Obtained Marks','Total Marks'],
          <?php foreach($student['result_exam'] as $val){
          $val['total_marks'] = abs($val['total_marks']);$val['obtained_marks'] = abs($val['obtained_marks']);
?>
                   
          ["<?php echo "(".$val['obtained_marks']."/".$val['total_marks'].")".$val['exam_name']."(".round($val['percentage'],2)."%)"?>", <?php echo $val['obtained_marks']?>,<?php echo $val['total_marks']?>],
<?php } ?>
        ]);
        var options = {
          'width':650, 'height':230,
          chart: {
            title: 'Examination Performance',
            
            
            },
chartTextStyle: {
        color: '#006600',
        fontSize: 16,
        bold: true
    },

          bars: 'horizontal' // Required for Material Bar Charts.
        };

        var chart = new google.charts.Bar(document.getElementById('barchart_material'));

       chart.draw(data, options);
      }
    </script>

<script type="text/javascript">
      google.charts.load('current', {'packages':['gauge']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Label', 'Value'],
          ["<?php echo "RS. ".round($student['invoice']['total_fee'],2)?>", 100],
          ]);

        var options = {
          'title':'Total Fee Submitted ',width: 315, height: 170,
          greenFrom: 90, greenTo: 100,
          yellowFrom:75, yellowTo: 90,
          minorTicks: 5,
          legend: { position: "top" }
        };

        var chart = new google.visualization.Gauge(document.getElementById('chart_div'));

        chart.draw(data, options);

        
      }
    </script>

<script type="text/javascript">
    google.charts.load("current", {packages:['corechart']});
    google.charts.setOnLoadCallback(drawChart);
     function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Subject', 'Percentage', { role: 'style' },{ role: 'annotation' } ],
        <?php foreach($sub_result as $key=>$val){?>                   
          ["<?php echo $key ?>", <?php echo $val['total_marks']?>,'stroke-color: #5a7bc5;fill-color: #5a7bc5;',"<?php echo $val['total_marks']?>"],
<?php } ?>
      ]);


      var view = new google.visualization.DataView(data);
      view.setColumns([0, 1,
                       { calc: "stringify",
                         sourceColumn: 1,
                         type: "string",
                         role: "annotation" },
                       2]);

      var options = {
        title: "Subject Wise Strength",
        width: 660,
        height: 250,
        bar: {groupWidth: "75%"},
        legend: { position: "top" },
        titleTextStyle: {
        color: '#006600',
        fontSize: 16,
        bold: true
    }
      };
      var chart = new google.visualization.ColumnChart(document.getElementById("subject_result"));
      chart.draw(data, options);
  }
  </script>



    </head>
    <body class="clear">
        <?php date_default_timezone_set("Asia/Karachi"); ?>
 
       <div class="super_container">
            <div class="page_break clear">
                <div class="watermark_wrapper">
                    <div class="watermark"></div>
                </div>
                <div class="super_wrapper">
                    <div class="wrapper left2 left">
                        <div class="header">
                            <div class="wd-100 clear">
                                <div class=" text-left left ">
                                    <img src="<?php echo base_url().$b_header['logo1']; ?>" style="width:70px;height:70px;">
                                </div>
                                <div class=" text-left right ">

                                    <img src="<?php echo base_url().$b_header['logo1']; ?>" style="width:70px;height:70px;">
                                </div>
                                <div style="">
                                    <center><h1><?php echo $b_header['title']; ?></h1></center>
                                    <center><h3 style="color:#000 !important;"><i><?php echo $b_header['tagline']; ?></i></h3></center>
                                    <center><i><h3 style="color:#000 !important;font-weight:normal;"><?php echo $b_header['short_address']; ?></h3></i></center>
                                    <!--<center><h4>Contact# <?php //echo $b_header['phone_no']; ?> / <?php //echo $b_header['email']; ?></h4></center>-->
                                    <center><h3 class="boxed" style="margin-top:0px !important;font-size:23px;">Yearly Progress Report of Student</h3></center>
                                </div>
                            </div>
                            <div class="wd-100 clear">
 
                                <div class="wd-20 left" style="margin-bottom:15px;">
                                    
                                </div>
                            </div>
                        </div>
                        <div class="body">
                

<div class="wd-100 clear">
<div class="wd-33 left" style="border-right:1px solid black ">
<table width="320px">
  <thead>
   <tr>
     <th class="th" colspan="3" style="color:#ffffff !important;">Student Profile</th>
  </tr>
  </thead>
<tbody>
  <tr>
                                <td rowspan="4" style="margin:0px 5px;">
                                    <?php if($student['img']){ ?>
                                      <img src="<?php echo base_url().$student['img']; ?>" style="width:60px;height:60px;border-radius:10px;padding:10px">
                                 <?php }else{ ?>
                                      <img src="<?php echo base_url('images/no_avatar.jpg') ?>" style="width:60px;height:60px;border-radius:10px;padding:10px">
<?php } ?>
                                </td>
                                <td class="wd-100 left"><h5>S.ID: <?php echo $student['sid']; ?></h5></td>
                                <td class="wd-100 left"><h5>Name: <?php echo $student['student_name']; ?></h5></td>
                                    <td class="wd-100 left"><h5>Father Name: <?php echo $student['father_name']; ?></h5></td>
                                    <td class="wd-100 left"><h5>Class Name: <?php echo $student['class_name']; ?></h5></td>
                                    <td class="wd-100 left"><h5>Section Name:<?php echo $student['section_name']; ?></h5></td>
                                    
  </tr>
</tbody>
</table>
<table width="320px">
  <thead>
   <tr>
     <th class="th" style="color:#ffffff !important;">Attendance Status</th>
  </tr>
  </thead>
<tbody>
  <tr>
    <td id="piechart" rowspan="3" >  </td>
  </tr>
  
</tbody>
</table>
<table width="320px">
  <thead>
   <tr>
     <th class="th" style="color:#ffffff !important;">Fee Submitted </th>
  </tr>
  </thead>
<tbody>
  <tr>
    <td id="chart_div" rowspan="3" style="border: 0px; padding: 0px 30px; margin: 10px 30px;">  </td>
  </tr>
  
</tbody>
</table>


</div>
<div class="wd-65 left">
<table>
  <thead>
   <tr>
     <th class="th" style="color:#ffffff !important;">Exams Status</th>
  </tr>
  </thead>
<tbody>
  <tr>
    <td id="barchart_material" rowspan="3" >  </td>
  </tr>
  
</tbody>
</table>

<table>
<tbody>
  <tr>
    <td id="subject_result" rowspan="3" >  </td>
  </tr>
  
</tbody>
</table>


</div>

</div>


</div>

</div>
</div>

</div></div>
<div id="chartContainer" class="chartContainer" style="height: 300px; width: 70%; margin-top:25px;  margin-left:auto; margin-right:auto;border:4px dotted #191970 "></div>

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script>
window.onload = function () {

var chart = new CanvasJS.Chart("chartContainer", {
	animationEnabled: true,
	theme: "light2", // "light1", "light2", "dark1", "dark2"
	title:{
		text: "Fee Summary",
		 fontColor: "#191970",
	
	},
	axisY: {
		title: "Fee Summary"
	},
	data: [{        
		type: "column",  
		showInLegend: true, 
		legendMarkerColor: "#191970",
		legendText: "",
		dataPoints: [
		   <?php foreach($student['invoice1'] as $key=>$val){?>  
			{ y: <?php echo $val['total_fee']?>, label: "<?php echo date('F', strtotime($val['submitted_at']))?>" },
			<?php } ?>
		]
	}]
});
chart.render();

}
</script>

                     
    </body>
<script>
        window.print();
    </script>
    
</html>
