<?php
include 'koneksi.php';
ob_start();
session_start();
$bulans = array("Januari", "Februari", "Maret", "April", "Mei", "Juni", "Juli", "Agustus", "September", "Oktober", "November", "Desember");
if (isset($_GET['aksi'])) {
  $id_pengguna = $_POST['id_pengguna'];
  $query2 = mysqli_query($koneksi, "SELECT * FROM pernyataan ORDER BY id_pernyataan");
  while ($result2 = mysqli_fetch_array($query2)) {
    $id = $result2['id_pernyataan'];
    $jawaban = $_POST["kinerja" . $id];
    $harapan = $_POST["harapan" . $id];
    $query = "INSERT INTO kuesioner(tanggal, id_pengguna, id_pernyataan, jawaban, harapan)
		VALUES(NOW(), '" . $id_pengguna . "', '" . $id . "', '" . $jawaban . "', '" . $harapan . "')";
    $result = mysqli_query($koneksi, $query);
  }
  if ($result) {
    $_SESSION['success'] = 1;
    $_SESSION['message'] = "Jawaban kuesioner anda telah kami terima, Terima Kasih";
    header('location:isi_kuesioner.php?id_pengguna=' . $id_pengguna);
  } else {
    $_SESSION['success'] = 0;
    $_SESSION['message'] = "Maaf, gagal mengirim jawaban kuesioner, coba lagi nanti";
    header('location:isi_kuesioner.php?id_pengguna=' . $id_pengguna);
  }
} else {
?>
  <!doctype html>
  <html lang="en">

  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    <title>Isi Kuesioner</title>

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

    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap" rel="stylesheet">

    <style>
      body {
        font-family: 'Space Grotesk', sans-serif;
        background-color: #f4f4f0;
        padding: 15px;
        min-height: 100vh;
        color: #000;
      }

      .neo-card {
        background-color: #ffffff;
        border: 3px solid #000;
        border-radius: 12px;
        box-shadow: 4px 4px 0px #000;
        padding: 20px;
        margin-bottom: 25px;
      }

      .neo-title {
        font-weight: 800;
        font-size: 1.4rem;
        margin-bottom: 10px;
        line-height: 1.2;
      }

      .neo-subtitle {
        font-weight: 600;
        font-size: 0.95rem;
        margin-bottom: 20px;
        color: #333;
      }

      .question-number {
        display: inline-block;
        background-color: #000;
        color: #fff;
        border-radius: 50%;
        width: 28px;
        height: 28px;
        text-align: center;
        line-height: 28px;
        font-size: 0.9rem;
        font-weight: 800;
        margin-right: 8px;
        vertical-align: top;
      }

      .question-text {
        font-weight: 700;
        font-size: 0.85rem;
        display: inline-block;
        width: calc(100% - 40px);
        margin-bottom: 15px;
      }

      .section-label {
        font-weight: 800;
        font-size: 0.9rem;
        margin-bottom: 12px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        display: inline-block;
        padding: 4px 10px;
        border: 2px solid #000;
        border-radius: 8px;
        box-shadow: 2px 2px 0px #000;
        color: #000;
      }

      .section-label.kinerja {
        background-color: #8acde8;
      }

      .section-label.harapan {
        background-color: #E6766E;
      }

      .radio-group {
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;
        gap: 6px;
      }

      .radio-group input[type="radio"] {
        display: none;
      }

      .neo-btn {
        flex: 1;
        background-color: #fff;
        border: 2px solid #000;
        border-radius: 10px;
        box-shadow: 2px 2px 0px #000;
        font-weight: 700;
        color: #000;
        text-align: center;
        padding: 10px 0;
        font-size: 0.9rem;
        cursor: pointer;
        transition: all 0.1s ease;
        user-select: none;
      }

      /* Persepsi Selected State */
      .radio-group.kinerja input[type="radio"]:checked+label {
        background-color: #8acde8;
        transform: translate(2px, 2px);
        box-shadow: 0px 0px 0px #000;
      }

      /* Harapan Selected State */
      .radio-group.harapan input[type="radio"]:checked+label {
        background-color: #E6766E;
        transform: translate(2px, 2px);
        box-shadow: 0px 0px 0px #000;
      }

      .legend-box {
        background-color: #fff;
        border: 3px solid #000;
        border-radius: 12px;
        box-shadow: 4px 4px 0px #000;
        padding: 15px;
        margin-bottom: 25px;
        display: flex;
        flex-direction: column;
        gap: 10px;
      }

      .legend-item {
        font-size: 0.85rem;
        font-weight: 600;
        display: flex;
        align-items: center;
      }

      .legend-title {
        font-weight: 800;
        font-size: 0.95rem;
        margin-bottom: 10px;
        display: inline-block;
        padding: 4px 10px;
        border: 2px solid #000;
        border-radius: 8px;
        box-shadow: 2px 2px 0px #000;
        color: #000;
      }

      .neo-submit {
        width: 100%;
        background-color: #000;
        color: #fff;
        border: 3px solid #000;
        border-radius: 12px;
        padding: 16px;
        font-weight: 800;
        font-size: 1.2rem;
        box-shadow: 4px 4px 0px #8acde8;
        transition: all 0.1s;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 40px;
      }

      .neo-submit:active {
        transform: translate(4px, 4px);
        box-shadow: 0px 0px 0px #8acde8;
      }

      .neo-alert {
        background-color: #fff;
        border: 3px solid #000;
        border-radius: 12px;
        box-shadow: 4px 4px 0px #000;
        padding: 20px;
        font-weight: 700;
        text-align: center;
        font-size: 1.1rem;
        margin-top: 20px;
      }
    </style>
  </head>

  <body>
    <div>
      <div class="neo-title">Kuesioner Pelanggan</div>
      <div class="neo-subtitle">Periode <?php echo $bulans[(date('m') - 1)] . " " . date('Y') ?></div>

      <?php
      $query = mysqli_query($koneksi, "SELECT * FROM kuesioner WHERE MONTH(tanggal)=MONTH(CURDATE()) AND YEAR(tanggal)=YEAR(CURDATE()) AND id_pengguna='" . $_GET['id_pengguna'] . "'");
      $rows = mysqli_num_rows($query);
      if ($rows == 0) {
      ?>
        <div class="legend-box">
          <div>
            <div class="legend-title" style="background-color: #8acde8;">Persepsi (Kepuasan)</div>
            <div class="legend-item">4 = Sangat Puas (SP)</div>
            <div class="legend-item">3 = Puas (P)</div>
            <div class="legend-item">2 = Cukup Puas (CP)</div>
            <div class="legend-item">1 = Tidak Puas (TP)</div>
          </div>
          <div style="margin-top: 5px;">
            <div class="legend-title" style="background-color: #E6766E;">Harapan (Kepentingan)</div>
            <div class="legend-item">4 = Sangat Penting (SP)</div>
            <div class="legend-item">3 = Penting (P)</div>
            <div class="legend-item">2 = Cukup Penting (CP)</div>
            <div class="legend-item">1 = Tidak Penting (TP)</div>
          </div>
        </div>

        <form action="isi_kuesioner.php?aksi=simpan" method="post" enctype="multipart/form-data">
          <input type="hidden" name="id_pengguna" value="<?php echo $_GET['id_pengguna'] ?>" />

          <?php
          $query = mysqli_query($koneksi, "SELECT * FROM pernyataan ORDER BY id_pernyataan");
          $row = mysqli_num_rows($query);
          if ($row > 0) {
            $no = 1;
            while ($result = mysqli_fetch_array($query)) {
              $id = $result['id_pernyataan'];
              $pernyataan = $result['nama_pernyataan'];
          ?>
              <div class="neo-card">
                <div>
                  <span class="question-number"><?php echo $no; ?></span>
                  <span class="question-text"><?php echo $pernyataan; ?></span>
                </div>

                <div class="section-label kinerja">Persepsi</div>
                <div class="radio-group kinerja">
                  <input type="radio" value="1" required name="kinerja<?php echo $id ?>" id="k_tp<?php echo $id ?>">
                  <label class="neo-btn" for="k_tp<?php echo $id ?>">TP</label>

                  <input type="radio" value="2" required name="kinerja<?php echo $id ?>" id="k_cp<?php echo $id ?>">
                  <label class="neo-btn" for="k_cp<?php echo $id ?>">CP</label>

                  <input type="radio" value="3" required name="kinerja<?php echo $id ?>" id="k_p<?php echo $id ?>" checked>
                  <label class="neo-btn" for="k_p<?php echo $id ?>">P</label>

                  <input type="radio" value="4" required name="kinerja<?php echo $id ?>" id="k_sp<?php echo $id ?>">
                  <label class="neo-btn" for="k_sp<?php echo $id ?>">SP</label>
                </div>

                <div class="section-label harapan">Harapan</div>
                <div class="radio-group harapan">
                  <input type="radio" value="1" required name="harapan<?php echo $id ?>" id="h_tp<?php echo $id ?>">
                  <label class="neo-btn" for="h_tp<?php echo $id ?>">TP</label>

                  <input type="radio" value="2" required name="harapan<?php echo $id ?>" id="h_cp<?php echo $id ?>">
                  <label class="neo-btn" for="h_cp<?php echo $id ?>">CP</label>

                  <input type="radio" value="3" required name="harapan<?php echo $id ?>" id="h_p<?php echo $id ?>">
                  <label class="neo-btn" for="h_p<?php echo $id ?>">P</label>

                  <input type="radio" value="4" required name="harapan<?php echo $id ?>" id="h_sp<?php echo $id ?>" checked>
                  <label class="neo-btn" for="h_sp<?php echo $id ?>">SP</label>
                </div>
              </div>
          <?php
              $no++;
            }
          } else {
            echo "<div class='neo-card' style='text-align:center; font-weight:700;'>Kuesioner masih kosong...</div>";
          }
          ?>

          <button type="submit" class="neo-submit">Selesai</button>
        </form>
        <?php
      } else {
        if (isset($_SESSION['success'])) {
        ?>
          <div class="neo-alert"><?php echo $_SESSION['message'] ?></div>
        <?php
        } else {
        ?>
          <div class="neo-alert">Kamu sudah mengisi kuesioner Periode <?php echo $bulans[(date('m') - 1)] . " " . date('Y') ?> sebelumnya, terima kasih...</div>
      <?php
        }
      }
      ?>
    </div>
  </body>

  </html>
<?php
}
?>