   <?php

   session_start();

    include_once('../../config/conn/db-connection.php');
    include_once('../../config/class/sap_model.php');


   if(!isset($_SESSION['logged_in']))
    {
       header("location:../../index.php");
    }else{

    $user_session = trim($_SESSION['user_no']);
    $SAP = new SAP_infosytem();
    $tblsapform = $SAP->fetch_sapform();  


    $donut1 = $SAP->fetch_donutchart1();
    $donut2 = $SAP->fetch_donutchart2();
    $donut3 = $SAP->fetch_donutchart3();
    $donut4 = $SAP->fetch_donutchart4();
    $donut5 = $SAP->fetch_donutchart5();

    // $morris2 = $SAP->fetch_morrischart2();

    /////////////////////////////////////////////////
?>


<?php include '../header/main-header2.php';?>

  <div class="content-wrapper">
    <section class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1>Report</h1>
          </div>
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="../home-page.php">Home</a></li>
              <li class="breadcrumb-item active">Report</li>
            </ol>
          </div>
        </div>
      </div>
    </section>
    <section class="content">
      <div class="container-fluid">
        <div class="row">
          <div class="col-12">
           
            <div class="card">
              <div class="card-header">
                <a href="export_word.php"><button type="button" class="btn btn-info">Export</button></a>
              </div>
              <div class="card-body">
                      <div class="box-body table-responsive">
                                
                                <div class="row">                     
                                    <div class="col-md-6 col-sm-12 col-xs-12">                     
                                        <div class="panel panel-default">
                                            <div class="panel-heading">
                                                Beneficiaries Income Level
                                            </div>
                                            <div class="panel-body">
                                                <div id="chart-container">
                                                    <canvas id="chart-2"></canvas>
                                                </div> 
                                            </div>
                                        </div>          
                                    </div> 
                                     <div class="col-md-6 col-sm-12 col-xs-12">                     
                                        <div class="panel panel-default">
                                            <div class="panel-heading">
                                               Beneficiaries Educational attainment
                                            </div>
                                            <div class="panel-body">
                                                  <canvas  id="chartjs_pie" height="180px"></canvas> 
                                            </div>
                                        </div>          
                                    </div>    
                                    <div class="col-md-6 col-sm-12 col-xs-12">                     
                                        <div class="panel panel-default">
                                            <div class="panel-heading">
                                              Beneficiaries per Purok
                                            </div>
                                                 <div id="chart-container">
                                                    <canvas id="graphCanvas"></canvas>
                                                </div>                   
                                            <!-- <div class="panel-body">
                                                <div id="morris-donut-chart"></div>
                                            </div> -->
                                        </div>            
                                    </div>
                                    <div class="col-md-6 col-sm-12 col-xs-12">                     
                                        <div class="panel panel-default">
                                            <div class="panel-heading">
                                              Beneficiaries of
                                            </div>
                                            <div class="panel-body">
                                                <div id="morris-donut-chart"></div>
                                            </div>
                                        </div>            
                                    </div>
            
                               </div>
                           </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
  </div>
<?php } ?>

  <footer class="main-footer">
    <div class="float-right d-none d-sm-block">
      <b>Version</b> 1.0.0
    </div>
  <strong>Copyright &copy; 2021 <b>SAP Information System </b>.</strong>
  </footer>

  <aside class="control-sidebar control-sidebar-dark">
  </aside>
</div>


<!--start pie Chart -->

<?php include '../../controllers/pie_chart.php';?>
  <script src="//cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
    <script type="text/javascript">
      var ctx = document.getElementById("chartjs_pie").getContext('2d');
                var myChart = new Chart(ctx, {
                    type: 'pie',
                    data: {
                        labels:<?php echo json_encode($educ_At); ?>,
                        datasets: [{
                            backgroundColor: [
                                "rgb(11, 98, 164)",
                                "rgb(11, 98, 164)",
                                "rgb(11, 98, 164)",
                                "rgb(11, 98, 164)",
                                "rgb(11, 98, 164)",
                                "rgb(11, 98, 164)",
                                "rgb(11, 98, 164)"
                            ],
                            data:<?php echo json_encode($count); ?>,
                        }]
                    },
                    options: {
                           legend: {
                        display: true,
                        position: 'bottom',
 
                        labels: {
                            fontColor: '#71748d',
                            fontFamily: 'Circular Std Book',
                            fontSize: 14,
                        }
                    },
                }
            });
    </script>


<!--start pie Chart -->


<!--start Doughnut Chart -->
<script>
  Morris.Donut({
    element: 'morris-donut-chart',
    data: [{
      label: "UCT",
      value: <?php echo $donut1; ?>
    }, {
      label: "4PS",
       value: <?php echo $donut2;?>
    }, {
      label: "UCT&4PS",
      value: <?php echo $donut3;?>

    }, {
      label: "Katutubo",
      value: <?php echo $donut4;?>

    }, {
      label: "Prefer not to say",
      value: <?php echo $donut5;?>

    }],
    resize: true
  });
</script>

<!--end Doughnut Chart -->


<!-- graph Chart -->

 <script>
        $(document).ready(function () {
            showGraph();
        });


        function showGraph()
        {
            {
                $.post("../../controllers/graph_chart.php",
                function (data)
                {
                    console.log(data);
                     var purok_no = [];
                    var group_purok = [];

                    for (var i in data) {
                        purok_no.push(data[i].purok_no);
                        group_purok.push(data[i].group_purok);
                    }

                    var chartdata = {
                        labels: purok_no,
                        datasets: [
                            {
                                label: 'Beneficiaries Per Purok',
                                backgroundColor: 'rgb(11, 98, 164)',
                                borderColor: '#46d5f1',
                                hoverBackgroundColor: '#CCCCCC',
                                hoverBorderColor: '#666666',
                                data: group_purok
                            }
                        ]
                    };

                    var graphTarget = $("#graphCanvas");

                    var barGraph = new Chart(graphTarget, {
                        type: 'bar',
                        data: chartdata
                    });
                });
            }
        }
 </script>


<!--end graph Chart -->


<!-- bar graph Chart -->
<script>

  $(document).ready(function () {
      showGraph2();
  });


  function showGraph2()
  {
      {
          $.post("../../controllers/bar_chart.php",
          function (data)
          {
              console.log(data);
               var month_s = [];
              var income = [];

              for (var i in data) {
                  month_s.push(data[i].month_s);
                  income.push(data[i].income);
              }

              var chartdata2 = {
                  labels: month_s,
                  datasets: [
                      {
                          label: 'Beneficiaries Income Level',
                          backgroundColor: 'rgb(11, 98, 164)',
                          borderColor: '#46d5f1',
                          hoverBackgroundColor: '#CCCCCC',
                          hoverBorderColor: '#666666',
                          data: income
                      }
                  ]
              };

              var graphTarget = $("#chart-2");

              var barGraph = new Chart(graphTarget, {
                  type: 'bar',
                  data: chartdata2
              });
          });
      }
  }


</script>

<!--end bar graph Chart -->

 <script src="chart/Chart.js"></script>

<!-- jQuery -->

<script type="text/javascript" src="js/Chart.min.js"></script>
<script src="../../plugins/jquery/jquery.min.js"></script>
<script src="../../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="../../dist/js/adminlte.min.js"></script>
<script src="../../dist/js/demo.js"></script>
<!-- page script -->

</body>
</html>
