<?php
include 'koneksi.php';
$bulans = array("Januari", "Februari", "Maret", "April", "Mei", "Juni", "Juli", "Agustus", "September", "Oktober", "November" , "Desember");
?>
<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <title></title>

  <!-- Template CSS -->
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="css/style.css">

  <!-- google fonts -->
  <link href="//fonts.googleapis.com/css?family=Mukta:300,400,600,700,800,900&display=swap" rel="stylesheet">
  <style>
    p{
      font-size:13px !important;
    }
    h1{
      font-size:25px !important;
    }
  </style>
</head>

<body style="width:100%;font-size:0.8em !important;background:#f1f2f5;padding:20px;">
  <div class="mt-2" style="padding-bottom:60px;">
    <div>
      <?php
      if(isset($_GET['aksi'])){
      ?>
      <h5>Grafik Kepuasan Pelanggan</h5>
      <form method="post" action="grafik.php">
        <label>Pilih Bulan</label>
        <select name="bulan" class="form-control">
          <?php
          for($i=0; $i<count($bulans); $i++){
          ?>
          <option value="<?php echo ($i+1) ?>"><?php echo $bulans[$i] ?></option>
          <?php
          }
          ?>
        </select>
        <label>Isi Tahun</label>
        <input type="number" name="tahun" class="form-control" value="<?php echo date('Y') ?>" required autocomplete="off" />
        <input type="submit" class="btn btn-success mt-3 col-12" value="Mulai Analisa" />
      </form>
      <?php
      } else {
      ?>
      <h5>Grafik Kepuasan Pelanggan Periode <?php echo $bulans[($_POST['bulan']-1)]." ".$_POST['tahun'] ?></h5>
      <?php
      if(isset($_SESSION['success'])){
        if($_SESSION['success']==1){
          echo "<div class=\"alert alert-info\">".$_SESSION['message']."</div>";
        } else {
          echo "<div class=\"alert alert-warning\">".$_SESSION['message']."</div>";
        }
        unset($_SESSION['success']);
      }

      $data = "";
      $label = "'Sangat Puas', 'Puas', 'Cukup Puas', 'Tidak Puas', 'Sangat Tidak Puas'";
      $jawaban = array('SP', 'P', 'CP', 'TP', 'STP');

      for($i=0; $i<count($jawaban); $i++){
        $query = mysqli_query($koneksi, "SELECT COUNT(*) AS total FROM kuesioner
        WHERE MONTH(tanggal)='".$_POST['bulan']."' AND YEAR(tanggal)='".$_POST['tahun']."' AND jawaban='".$jawaban[$i]."'");
        $result = mysqli_fetch_array($query);
        $data .= $result['total'].", ";
      }

      $data = substr($data, 0, (strlen($data)-2));
      //$label = substr($label, 0, (strlen($label)-2));
      ?>
      <br />
      <script src="js/apexcharts.min.js"></script>
      <div id="chart"></div>
      <script>
      var options = {
        series: [{
        data: [<?php echo $data ?>]
      }],
      colors: [
        function({ value, seriesIndex, w }) {
          if (value < 0) {
            return '#d0222e'
          } else {
            return '#4caf50'
          }
        }
      ],
      chart: {
        animations: {
            enabled: true,
            easing: 'easeinout',
            speed: 800,
            animateGradually: {
                enabled: true,
                delay: 150
            },
            dynamicAnimation: {
                enabled: true,
                speed: 350
            }
        },
        fontFamily: 'Nunito',
        type: 'bar',
        height: 500
      },
      plotOptions: {
        bar: {
          borderRadius: 0,
          horizontal: true,
          // colors: {
          //    backgroundBarColors: ["#000000"],
          //    backgroundBarOpacity: 1,
          //    backgroundBarRadius: 0,
          // },
        }
      },
      dataLabels: {
        enabled: true,
        formatter: function(value, { seriesIndex, dataPointIndex, w }) {
          return value
        }
      },
      xaxis: {
        categories: [<?php echo $label; ?>],
      },
      yaxis: {
        labels:{
          style: {
            fontSize: '12px',
            fontFamily: 'Barlow',
            fontWeight: 'bold'
          }
        }
      }
      };

      var chart = new ApexCharts(document.querySelector("#chart"), options);
      chart.render();
      </script>
      <?php
      }
      ?>
    </div>
  </div>
</body>
</html>
