<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

<style>
  .my_dashboard_tiles .tile_stats_count:nth-child(7):before {
      border-left: 0 !important;
  }
  .my_dashboard_tiles .tile_stats_count:nth-child(13):before {
      border-left: 0 !important;
  }
  .my_dashboard_tiles .tile_stats_count:nth-child(19):before {
      border-left: 0 !important;
  }
  .fa-stack-2x {
    color:#D2691E;
    margin-left:150px;
}
.tile_count .tile_stats_count .count{
font-size:28px;
}
</style>

        <!-- page content -->
        <div class="right_col" role="main">
             <div class="col-md-12 ">
        <form class="form-horizontal form-label-left" action="<?php echo base_url(); ?>home/index" method="post">
        <?php
        
        $student_id =$this->user_model->userInfo('student_id')['student_id'];
        
        if($this->user_model->is_super() && $student_id <=  0){  ?><div class="item form-group">
                        <label class="control-label col-md-2 col-md-offset-2 col-sm-3 col-xs-12" for="name">Branch <span class="required">*</span>
                        </label>
                        <div class="col-md-4 col-sm-6 col-xs-12">
                          <select id="branch" class="form-control col-md-7 col-xs-12" name="branch" required>
                          <option value=''>Select branch</option>
                    <?php 
                              foreach ($branches as $value) {?>
                    <option value="<?php echo $value['b_id']; ?>" <?php if($branchid==$value['b_id']){echo "selected";} ?> ><?php echo $value['bname']?></option>

                  <?php } ?>
                          </select>
                        </div>
                      </div>
                      <div class="form-group">
                        <div class="col-md-3 col-md-offset-3">
                          <button id="send" type="submit" class="btn btn-success pull-right">Get</button>
                          <?php if($branchid){ ?>
                            <a href="<?php echo base_url(); ?>home" class="btn btn-danger  pull-right">Reset</a>
                            <?php } ?>
                        </div>
                      </div>
                    </form> 
        <?php } ?>
        <?php if(!$this->user_model->is_super()){ ?>
           
          <?php } ?>
        </div>
           <div class="row">
               <?php
                  $check = @$this->db->select('is_permit')->where('id',16)->get('tsms_permission')->row()->is_permit;
                  if($check ==1){
               $branch=$this->user_model->getBranch();$date=date('Y-m-d'); if($this->user_model->is_super()) { $cash_deposit_today=$this->db->query("SELECT SUM( amount ) AS total FROM  `cash_deposit` WHERE  main_head_id =5 and `date`='$date' and is_delete='0'")->result_array()[0]['total']; } else { $cash_deposit_today=$this->db->query("SELECT SUM( amount ) AS total FROM  `cash_deposit` WHERE  main_head_id =5 and `date`='$date' and `branch`=$branch and is_delete='0'")->result_array()[0]['total']; } $cash_deposit_today=($cash_deposit_today==''?0:$cash_deposit_today); ?>
             <!--<a class="btn btn-primary pull-right" href="<?php //$income=($total['today_fee_recieved']==''?0:$total['today_fee_recieved']); $expense=($total['today_expense']==''?0:$total['today_expense']);$total_students=($total['student']==''?0:$total['student']);$cash_hand=($total['cash_hand']==''?0:$total['cash_hand']); echo base_url().'SmsHajana/sendClosingSms'.'?income='.$income.'&expense='.$expense.'&students='.$total_students.'&cash_deposit='.$cash_deposit_today.'&cash_hand='.$cash_hand; ?>" >Send Closing Message</a>  -->
                 <!--<a  class="btn btn-primary pull-right" href="<?php //echo base_url().'Biometric/updatenew'?>" >Update Attendance</a>-->
             
             <?php } ?>
             
             
             

<?php if(!$this->user_model->is_super()){
?>

<!--- <a  class="btn btn-primary pull-right" 
   href="<?php echo base_url().'SmsHajana/sendDailyattendSms'.'?present='.$present_student['att_count'].'&absent='.$absent_student['att_count'].'&leave='.$leave_student['att_count'].'&shrt_leave='.$shrtleave_student['att_count'];?>" >Attendance Status Message</a>   --->
   <!--
   <a  class="btn btn-primary pull-right" href="<?php echo base_url().'SmsHajana/sendAbsentSms' ?>" >Send Absent Message</a>  -->
             <?php } ?>
          </div>
          <!-- top tiles -->
          <div class="row tile_count my_dashboard_tiles">
            <?php 
                $this->db->select('dashboard_widgets.code');
                $this->db->join('dashboard_permissions','dashboard_permissions.widget_id=dashboard_widgets.id');
                $this->db->where('dashboard_widgets.section_id',1)->where('dashboard_widgets.is_delete',0)->where('dashboard_permissions.user_id',$this->user_model->userInfo("id")['id']);
                $code=@$this->db->order_by('order','asc')->get('dashboard_widgets')->result_array();
                foreach ($code as $key => $value) {                    
                    eval("?> $value[code] <?php ");
                }
            ?>
            
          </div>
         
          <!-- /top tiles -->
          
          <div class="row">
          
         
  
         
           
           </div>

          <div class="row">
            <div class="col-md-12 col-sm-12 col-xs-12">
              <div class="dashboard_graph">

                <div class="row x_title">
                  <div class="col-md-6">
                   
                       <div class="col-md-12 ">
        <form class="form-horizontal form-label-left" action="<?php echo base_url(); ?>home/index" method="post">
        <div class="item form-group">
           
           <h4 class="control-label col-md-5 col-md-offset-0 col-sm-3 col-xs-12" for="name">Session Analysis
            </h4>
            <div class="col-md-4 col-sm-6 col-xs-12">
              <select id="session" class="form-control col-md-7 col-xs-12" name="session" required>
              <option value=''>Select Session</option>
               
        <?php       
            foreach ($session as $value) {?>
                <option value="<?php echo $value['id']; ?>" <?php if($id==$value['id']){echo "selected";} ?>><?php echo $value['name']?></option>

      <?php } ?>
              </select>
            </div>
             <button id="send" type="submit" class="btn btn-success pull-left">Get</button>
              <?php if($id){ ?>
                <a href="<?php echo base_url(); ?>home" class="btn btn-danger  pull-right">Reset</a>
              <?php } ?>
          </div>

        </form> 
        
        </div>
                  </div>
                 
                 
                
                
                  <div class="col-md-6">
                    <div id="reportrange" class="pull-right" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc">
                      <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
                      <span>September 1st, 2024 - September 31st, 2025</span> <b class="caret"></b>
                    </div>
                  </div>
                </div>
                
             <?php 
             	$has_permission=$this->db->query("select * from dashboard_permissions where user_id=$u_id and widget_id=-2")->result_array();
	            if(!empty($has_permission))
	            {?>
                 <div class="col-md-9 col-sm-9 col-xs-12">
                  <div id="placeholder33" style="height: 260px; display: none" class="demo-placeholder"></div>
                  <div style="width: 100%;">
                    <canvas id="mybarChart" class="demo-placeholder" style="width: 100%; height:270px;"></canvas>
                  </div>
                </div>
                
	          <?php  } ?>
                
                
               <?php if(!empty($home_student)):?>
               
               <style>
.cards {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  max-width: 250px;
  margin: auto;
  text-align: center;
  font-family: arial;
}

.titles {
  color: grey;
  font-size: 18px;
}
</style>
               
             <div class="col-md-3 col-sm-3 col-xs-12 bg-white">
                    
                  
                  <?php 
          $filename = FCPATH . $home_student->img;
          if (!empty($home_student->img) && file_exists($filename)) {
    $img=base_url().$home_student->img;
} else {
    $img="https://misk.prudmac.com/uploads/student.png";
}
?>
                                <div class="cards">
  <img src="<?php echo $img;?>" alt="Manarat" style="width:150px; height:150px">
  <h5><?php echo $home_student->student_name;?></h5>
  <div style="text-align:left;padding-left:10px;">
<strong style="padding-right:71px">Class:</strong><?php echo $home_student->class_name;?><br>
 <strong style="padding-right:60px">Section:</strong><?php echo $home_student->section_name;?><br>
<strong style="padding-right:15px">Academic Year:</strong><?php echo $home_student->session_name;?>
</div>
</div> </div> 
                  
                  
                  
                  
                  
                  
                
                
                
                
                
                
           <?php endif; ?>  
                
                
                
                
                <div class="col-md-3 col-sm-3 col-xs-12 bg-white">
                  

                 <h5><?php echo date('d-M-Y');?></h5>
                  <div class="row">
                    <div class="col-md-10 col-sm-11 col-xs-6">
                      <p>Present</p>
<?php
                   //267
                        @$present=($present_student/$total['student'])*100;//265
                        @$absent=($absent_student/$total['student'])*100;//18
                        @$leave=($leave_student/$total['student'])*100;//5
                        @$shortleave=($shrtleave_student/$total['student'])*100;
                      ?>
                      <div class="">
                        <div class="progress progress_sm">
                          <div class="progress-bar bg-green"  role="progressbar" data-transitiongoal="<?php 
                        if (!is_nan($present) && !is_infinite($present)) 
                            echo round($present, 1);
                        else
                            echo '0';
                        ?>"></div>
                        </div>
                             </div>
                    </div>
                        <div class="col-md-2"><?php 
                       if (!is_nan($present) && !is_infinite($present)) 
                            echo round($present, 1);
                        else
                            echo '0';
                        ?>%</div>
                    </div>
                    <div class="row">
                    <div>
                      <div class="col-md-10 col-sm-11 col-xs-6">
                        <p>Absent</p>
                        <div class="progress progress_sm">
                          <div class="progress-bar bg-green" role="progressbar" data-transitiongoal="<?php 
                            if (!is_nan($absent) && !is_infinite($absent))
                                echo round($absent, 1);
                            else
                                echo '0';
                          ?>"></div>
                        </div>
                      </div>
                      <div class="col-md-2"><?php 
                            if (!is_nan($absent) && !is_infinite($absent))
                                echo round($absent, 1);
                            else
                                echo '0'; 
                      ?>%</div>
                    </div>
                  </div>
                  <div class="row">
                    <div>
                      <div class="col-md-10 col-sm-11 col-xs-6">
                        <p>Leave</p>
                        <div class="progress progress_sm">
                          <div class="progress-bar bg-green" role="progressbar" style="width: <?php 
                            if (!is_nan($leave) && !is_infinite($leave))
                                echo round($leave, 1);
                            else
                                echo '0'; 
                            ?>;" data-transitiongoal="<?php $att_leave['att_count'];?>"></div>
                        </div>
                      </div>
                      <div class="col-md-2"><?php 
                            if (!is_nan($leave) && !is_infinite($leave))
                                echo round($leave, 1);
                            else
                                echo '0';
                        ?>%</div>
                    </div>
                  </div>
                  <div class="row">
                    <div>
                      <div class="col-md-10 col-sm-11 col-xs-6">
                        <p>Short Leave</p>
                        <div class="progress progress_sm" style="width: <?php $att_shortleave['std_count'];?>;">
                          <div class="progress-bar bg-green" role="progressbar" data-transitiongoal="<?php 
                            if (!is_nan($shortleave) && !is_infinite($shortleave))
                                echo round($shortleave, 1);
                            else
                                echo '0';
                        ?>"></div>
                        </div>
                      </div>
                      <div class="col-md-2">
                      <?php 
                            if (!is_nan($shortleave) && !is_infinite($shortleave))
                                echo round($shortleave, 1);
                            else
                                echo '0';
                        ?>%</div>
                    </div>
                  </div>
                  


                 

                </div>
  

      <div class="col-md-2 col-sm-3 col-xs-12 bg-white">
           
      </div>
      
                  

          </div>
		      <div class="row tile_count my_dashboard_tiles section-2">
            
            <?php 
                $this->db->select('dashboard_widgets.code');
                $this->db->join('dashboard_permissions','dashboard_permissions.widget_id=dashboard_widgets.id');
                $this->db->where('dashboard_widgets.section_id',2)->where('dashboard_widgets.is_delete',0)->where('dashboard_permissions.user_id',$this->user_model->userInfo("id")['id']);
                $code=@$this->db->order_by('order','asc')->get('dashboard_widgets')->result_array();
                foreach ($code as $key => $value) {                    
                    eval("?> $value[code] <?php ");
                }
            ?>
            
          </div>
           <div class="row">
               </div>
         </div>
             
        <!-- /page content -->

        <!-- footer content -->
        <footer>
          <div class="pull-right">
            Prudmac
          </div>
          <div class="clearfix"></div>
        </footer>
        <!-- /footer content -->
      </div>
    </div>

    <!-- jQuery -->
    <script src="<?php echo base_url(); ?>assets/vendors/jquery/dist/jquery.min.js"></script>
    <!-- Custom JS -->
    <script src="<?php echo base_url(); ?>assets/js/main.js"></script>
    <!-- Bootstrap -->
    <script src="<?php echo base_url(); ?>assets/vendors/bootstrap/dist/js/bootstrap.min.js"></script>
    <!-- FastClick -->
    <script src="<?php echo base_url(); ?>assets/vendors/fastclick/lib/fastclick.js"></script>
    <!-- NProgress -->
    <script src="<?php echo base_url(); ?>assets/vendors/nprogress/nprogress.js"></script>
    <!-- Chart.js -->
    <script src="<?php echo base_url(); ?>assets/vendors/Chart.js/dist/Chart.min.js"></script>
    <!-- gauge.js -->
    <script src="<?php echo base_url(); ?>assets/vendors/gauge.js/dist/gauge.min.js"></script>
    <!-- bootstrap-progressbar -->
    <script src="<?php echo base_url(); ?>assets/vendors/bootstrap-progressbar/bootstrap-progressbar.min.js"></script>
    <!-- iCheck -->
    <script src="<?php echo base_url(); ?>assets/vendors/iCheck/icheck.min.js"></script>
    <!-- Skycons -->
    <script src="<?php echo base_url(); ?>assets/vendors/skycons/skycons.js"></script>
    <!-- Flot -->
    <script src="<?php echo base_url(); ?>assets/vendors/Flot/jquery.flot.js"></script>
    <script src="<?php echo base_url(); ?>assets/vendors/Flot/jquery.flot.pie.js"></script>
    <script src="<?php echo base_url(); ?>assets/vendors/Flot/jquery.flot.time.js"></script>
    <script src="<?php echo base_url(); ?>assets/vendors/Flot/jquery.flot.stack.js"></script>
    <script src="<?php echo base_url(); ?>assets/vendors/Flot/jquery.flot.resize.js"></script>
    <!-- Flot plugins -->
    <script src="<?php echo base_url(); ?>assets/js/flot/jquery.flot.orderBars.js"></script>
    <script src="<?php echo base_url(); ?>assets/js/flot/date.js"></script>
    <script src="<?php echo base_url(); ?>assets/js/flot/jquery.flot.spline.js"></script>
    <script src="<?php echo base_url(); ?>assets/js/flot/curvedLines.js"></script>
    <!-- jVectorMap -->
    <script src="<?php echo base_url(); ?>assets/js/maps/jquery-jvectormap-2.0.3.min.js"></script>
    <!-- bootstrap-daterangepicker -->
    <script src="<?php echo base_url(); ?>assets/js/moment/moment.min.js"></script>
    <script src="<?php echo base_url(); ?>assets/js/datepicker/daterangepicker.js"></script>

    <!-- Custom Theme Scripts -->
    <script src="<?php echo base_url(); ?>assets/build/js/custom.min.js"></script>
<script>
 // Bar chart
    var ctx = document.getElementById("mybarChart");
    var mybarChart = new Chart(ctx, {
      type: 'bar',
      data: {
        labels: [<?php 
                    if(!empty($class))
                    {
                        foreach ($class as $key => $value) { ?>
                           "<?php echo $value['class_name']; ?>",
                      <?php  }
                        }
                    ?>],
        datasets: [{
          label: '',
          backgroundColor: "#01CB9F",
          data: [<?php 
                    if(!empty($class))
                    {
                        foreach ($class as $key => $value) { 
                            if(!empty($result[$value['class_id']])){?>
                    
                           "<?php echo ($result[$value['class_id']]['obtained_marks']*100)/$result[$value['class_id']]['total_marks']; ?>",
                      
                    <?php }else{?>
                    
                           "0",
                        
                    <?php  }  }
                    }
                   
                ?>]
        }]
      },

      options: {
        scales: {
          yAxes: [{
            ticks: {
              beginAtZero: true
            }
          }]
        }
      }
    });
</script>

  <script>
      $(document).ready(function() {
        var data1 = [
         <?php 
    $year=date('Y');
          for($i = 1; $i <= 12; $i++) {
            $v = 0;
            foreach ($graph_studentlast as $key => $value) {
              if($i==$value['MonthNum'])
              {
                $v = $value['count'];
                break;
              }
              else
                $v = 0;
            }
            if($i==12)
                echo "[gd($year, $i), $v]";
              else
                echo "[gd($year, $i), $v],";
          }
?>
        ];

        var data2 = [
<?php 
         $year=date('Y');
          if(!empty($graph_student)){
          for($i = 1; $i <= 12; $i++) {
            $v = 0;
           
            foreach ($graph_student as $key => $value) {
              if($i==$value['MonthNum'])
              {
                $v = $value['count'];
                break;
              }
              else
                $v = 0;
            }
          
            if($i==12)
                echo "[gd($year, $i), $v]";
              else
                echo "[gd($year, $i), $v],";
          }
          }
?>
];
        $("#canvas_dahs").length && $.plot($("#canvas_dahs"), [
          data1, data2
        ], {
          series: {
            lines: {
              show: false,
              fill: true
            },
            splines: {
              show: true,
              tension: 0.4,
              lineWidth: 1,
              fill: 0.4
            },
            points: {
              radius: 0,
              show: true
            },
            shadowSize: 2
          },
          grid: {
            verticalLines: true,
            hoverable: true,
            clickable: true,
            tickColor: "#d5d5d5",
            borderWidth: 1,
            color: '#fff'
          },
          colors: ["rgba(38, 185, 154, 0.38)", "rgba(3, 88, 106, 0.38)"],
          xaxis: {
            tickColor: "rgba(51, 51, 51, 0.06)",
            mode: "time",
            tickSize: [1, "month"],
            //tickLength: 10,
            axisLabel: "Date",
            axisLabelUseCanvas: true,
            axisLabelFontSizePixels: 12,
            axisLabelFontFamily: 'Verdana, Arial',
            axisLabelPadding: 10
          },
          yaxis: {
            ticks: 8,
            tickColor: "rgba(51, 51, 51, 0.06)",
          },
          tooltip: false
        });

        function gd(year, month) {
          return new Date(year, month - 1).getTime();
        }
      });
    </script>
<script>
   
</script>

    <!-- jVectorMap -->
    <script src="<?php echo base_url(); ?>assets/js/maps/jquery-jvectormap-world-mill-en.js"></script>
    <script src="<?php echo base_url(); ?>assets/js/maps/jquery-jvectormap-us-aea-en.js"></script>
    <script src="<?php echo base_url(); ?>assets/js/maps/gdp-data.js"></script>
    <script>
      $(document).ready(function(){
        $('#world-map-gdp').vectorMap({
          map: 'world_mill_en',
          backgroundColor: 'transparent',
          zoomOnScroll: false,
          series: {
            regions: [{
              values: gdpData,
              scale: ['#E6F2F0', '#149B7E'],
              normalizeFunction: 'polynomial'
            }]
          },
          onRegionTipShow: function(e, el, code) {
            el.html(el.html() + ' (GDP - ' + gdpData[code] + ')');
          }
        });
      });
    </script>
    <!-- /jVectorMap -->

    <!-- Skycons -->
    <script>
      $(document).ready(function() {
        var icons = new Skycons({
            "color": "#73879C"
          }),
          list = [
            "clear-day", "clear-night", "partly-cloudy-day",
            "partly-cloudy-night", "cloudy", "rain", "sleet", "snow", "wind",
            "fog"
          ],
          i;

        for (i = list.length; i--;)
          icons.set(list[i], list[i]);

        icons.play();
      });
    </script>
    <!-- /Skycons -->

    <!-- Doughnut Chart -->
    <script>
      $(document).ready(function(){
        var options = {
          legend: false,
          responsive: false
        };

        new Chart(document.getElementById("canvas1"), {
          type: 'doughnut',
          tooltipFillColor: "rgba(51, 51, 51, 0.55)",
          data: {
            labels: [
              "DOUBLING",
              "EXPELL",
              "SHIFT",
              "LEFT",
              "PASSOUT",
              "ACTIVE"
            ],
            datasets: [{
              data: [<?php foreach ($dbchart as $value) { echo $value->db; }?>,<?php foreach ($exchart as $value) { echo $value->ex; }?>,<?php foreach ($shchart as $value) { echo $value->sh; }?>,<?php foreach ($lchart as $value) { echo $value->lc; }?>, <?php foreach ($pchart as $value){echo $value->total; }?>,
              <?php foreach ($active as $value){echo $value->act; }?>
              ],
              backgroundColor: [
                "#BDC3C7",
                "#9B59B6",
                "#E74C3C",
                "#26B99A",
                "#3498DB",
                "#D2691E"
                
              ],
              hoverBackgroundColor: [
                "#CFD4D8",//left
                "#B370CF",
                "#E95E4F",
                "#36CAAB",
                "#49A9EA"
              ]
            }]
          },
          options: options
        });
      });
    </script>
    <!-- /Doughnut Chart -->
    
    
     <!-- Doughnut Chart -->
    <script>
      $(document).ready(function(){
        var options = {
          legend: false,
          responsive: false
        };

        new Chart(document.getElementById("canvas2"), {
          type: 'doughnut',
          tooltipFillColor: "rgba(51, 51, 51, 0.55)",
          data: {
            labels: [
               "Rejoin",
              "Terminate",
              "Left"
             
            ],
             datasets: [{
              data: [<?php echo $total_re['rej'];?>,<?php echo $total_tr['trm'];?>, <?php echo $total_st['lft'];?>],
              backgroundColor: [
                "#26B99A",
                "#9B59B6",
                "#E74C3C",
                "#26B99A",
                "#3498DB"
              ],
              hoverBackgroundColor: [
               "#26B99A",
                "#B370CF",
                "#E95E4F",
                "#36CAAB",
                "#49A9EA"
              ]
            }]
          },
          options: options
        });
      });
    </script>
    <!-- /Doughnut Chart -->
    
    
    
    
    
    
    
    <!-- bootstrap-daterangepicker -->
    <script>
      $(document).ready(function() {

        var cb = function(start, end, label) {
          console.log(start.toISOString(), end.toISOString(), label);
          $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
        };

        var optionSet1 = {
          startDate: moment().subtract(29, 'days'),
          endDate: moment(),
          minDate: '01/01/2012',
          maxDate: '12/31/2015',
          dateLimit: {
            days: 60
          },
          showDropdowns: true,
          showWeekNumbers: true,
          timePicker: false,
          timePickerIncrement: 1,
          timePicker12Hour: true,
          ranges: {
            'Today': [moment(), moment()],
            'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
            'Last 7 Days': [moment().subtract(6, 'days'), moment()],
            'Last 30 Days': [moment().subtract(29, 'days'), moment()],
            'This Month': [moment().startOf('month'), moment().endOf('month')],
            'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
          },
          opens: 'left',
          buttonClasses: ['btn btn-default'],
          applyClass: 'btn-small btn-primary',
          cancelClass: 'btn-small',
          format: 'MM/DD/YYYY',
          separator: ' to ',
          locale: {
            applyLabel: 'Submit',
            cancelLabel: 'Clear',
            fromLabel: 'From',
            toLabel: 'To',
            customRangeLabel: 'Custom',
            daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
            monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
            firstDay: 1
          }
        };
        $('#reportrange span').html(moment().subtract(29, 'days').format('MMMM D, YYYY') + ' - ' + moment().format('MMMM D, YYYY'));
        $('#reportrange').daterangepicker(optionSet1, cb);
        $('#reportrange').on('show.daterangepicker', function() {
          console.log("show event fired");
        });
        $('#reportrange').on('hide.daterangepicker', function() {
          console.log("hide event fired");
        });
        $('#reportrange').on('apply.daterangepicker', function(ev, picker) {
          console.log("apply event fired, start/end dates are " + picker.startDate.format('MMMM D, YYYY') + " to " + picker.endDate.format('MMMM D, YYYY'));
        });
        $('#reportrange').on('cancel.daterangepicker', function(ev, picker) {
          console.log("cancel event fired");
        });
        $('#options1').click(function() {
          $('#reportrange').data('daterangepicker').setOptions(optionSet1, cb);
        });
        $('#options2').click(function() {
          $('#reportrange').data('daterangepicker').setOptions(optionSet2, cb);
        });
        $('#destroy').click(function() {
          $('#reportrange').data('daterangepicker').remove();
        });
      });
    </script>
    <!-- /bootstrap-daterangepicker -->

    <!-- gauge.js -->
    <script>
      var opts = {
          lines: 12,
          angle: 0,
          lineWidth: 0.4,
          pointer: {
              length: 0.75,
              strokeWidth: 0.042,
              color: '#1D212A'
          },
          limitMax: 'false',
          colorStart: '#1ABC9C',
          colorStop: '#1ABC9C',
          strokeColor: '#F0F3F3',
          generateGradient: true
      };
      var target = document.getElementById('foo'),
          gauge = new Gauge(target).setOptions(opts);

      gauge.maxValue = 6000;
      gauge.animationSpeed = 32;

      gauge.set(<?php echo($active_users); ?>);
      gauge.setTextField(document.getElementById("gauge-text"));
    </script>
   
    <!-- /gauge.js -->
  </body>
</html>