<main id="main" class="main">

    <div class="pagetitle">
      <h1>Hadiah</h1>
      <nav>
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a href="index.php">Home</a></li>
          <li class="breadcrumb-item active">Hadiah</li>
        </ol>
      </nav>
    </div><!-- End Page Title -->

    <section class="section dashboard">
      <div class="card recent-sales overflow-auto">

        <div class="filter">
          <!-- Modal Dialog Scrollable -->
          <a href="#" class="icon" data-bs-toggle="modal" data-bs-target="#tambah_data">
            <i class="bi bi-plus-lg"></i>
          </a>
          <div class="modal fade" id="tambah_data" tabindex="-1">
            <div class="modal-dialog">
              <div class="modal-content">
                <form action="prs_tambah_hadiah.php" method="post">
                  <div class="modal-header">
                    <h5 class="modal-title">Tambah Data</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                  </div>
                  <div class="modal-body">
                    <div class="form-floating mb-3">
                      <input type="text" class="form-control" id="nama_hadiah" name="nama_hadiah" placeholder="Nama Hadiah">
                      <label for="nama_hadiah">Nama Hadiah</label>
                    </div>
                    <div class="row g-2">
                      <div class="col-md-4">
                        <div class="form-floating mb-3">
                          <input type="color" class="form-control form-control-color w-100" id="background_hadiah" name="background_hadiah" value="#333333" title="Pilih Warna Background Hadiah">
                          <label for="background_hadiah">Background Hadiah</label>
                        </div>
                      </div>
                      <div class="col-md-4">
                        <div class="form-floating mb-3">
                          <input type="color" class="form-control form-control-color w-100" id="border_hadiah" name="border_hadiah" value="#333333" title="Pilih Warna Border Hadiah">
                          <label for="border_hadiah">Border Hadiah</label>
                        </div>
                      </div>
                      <div class="col-md-4">
                        <div class="form-floating mb-3">
                          <input type="color" class="form-control form-control-color w-100" id="text_hadiah" name="text_hadiah" value="#333333" title="Pilih Warna Text Hadiah">
                          <label for="text_hadiah">Text Hadiah</label>
                        </div>
                      </div>
                    </div>
                    <div class="input-group mb-3">
                      <div class="form-floating">
                        <input type="text" class="form-control" id="persen_hadiah" name="persen_hadiah" placeholder="Kemunculan Hadiah">
                        <label for="persen_hadiah">Kemunculan Hadiah</label>
                      </div>
                      <span class="input-group-text">%</span>
                    </div>
                    <div class="form-floating">
                      <select class="form-select" id="status_hadiah" name="status_hadiah" aria-label="status_hadiah">
                        <option selected>Status Hadiah</option>
                        <option value="Aktif">Aktif</option>
                        <option value="Tidak Aktif">Tidak Aktif</option>
                      </select>
                      <label for="status_hadiah">Status Hadiah</label>
                    </div>
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary">Tambah Data</button>
                  </div>
                </form>
              </div>
            </div>
          </div><!-- End Modal Dialog Scrollable-->
        </div>

        <div class="card-body">
          <h5 class="card-title">Hadiah</h5>
          <?php
            if (isset($_GET['notif'])) {
              if ($_GET['notif'] == "berhasil_tambah_data") {
                echo '
                    <div class="alert alert-success" role="alert">
                        Berhasil menambahkan data.
                    </div>
                ';
              } else if ($_GET['notif'] == "berhasil_ubah_data") {
                echo '
                    <div class="alert alert-success" role="alert">
                        Berhasil mengubah data.
                    </div>
                ';
              } else if ($_GET['notif'] == "berhasil_hapus_data") {
                echo '
                    <div class="alert alert-success" role="alert">
                        Berhasil menghapus data.
                    </div>
                ';
              }
            }
          ?>

          <table class="table table-borderless datatable">
            <thead>
              <tr>
                <th scope="col">#</th>
                <th scope="col">Nama</th>
                <th scope="col">Background</th>
                <th scope="col">Border</th>
                <th scope="col">Tulisan</th> 
                <th scope="col">Peluang</th>
                <th scope="col">Status</th>
                <th scope="col">Aksi</th>
              </tr>
            </thead>
            <tbody>
              <?php
                $no = 1;
                $qry_hadiah = mysqli_query($koneksi, "SELECT * FROM hadiah");
                while ($dt_hadiah = mysqli_fetch_array($qry_hadiah)) {
                  $id_hadiah = $dt_hadiah['id_hadiah'];
                  $nama_hadiah = $dt_hadiah['nama_hadiah'];
                  $background_hadiah = $dt_hadiah['background_hadiah'];
                  $border_hadiah = $dt_hadiah['border_hadiah'];
                  $text_hadiah = $dt_hadiah['text_hadiah'];
                  $persen_hadiah = $dt_hadiah['persen_hadiah'];
                  $status_hadiah = $dt_hadiah['status_hadiah'];
              ?>
              <tr>
                <th><?php echo $no++; ?></th>
                <td><?php echo $nama_hadiah; ?></td>
                <td><?php echo '<i class="bi bi-circle-fill" style="color:'.$background_hadiah.';"></i> '.$background_hadiah; ?></td>
                <td><?php echo '<i class="bi bi-circle-fill" style="color:'.$border_hadiah.';"></i> '.$border_hadiah; ?></td>
                <td><?php echo '<i class="bi bi-circle-fill" style="color:'.$text_hadiah.';"></i> '.$text_hadiah; ?></td>
                <td><?php echo $persen_hadiah; ?></td>
                <td>
                  <?php
                    if ($status_hadiah == "Aktif") {
                      echo '<span class="badge bg-success">Aktif</span>';
                    } else {
                      echo '<span class="badge bg-danger">Tidak Aktif</span>';
                    }
                  ?>
                </td>
                <td>
                  <button type="button" class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#ubah_<?php echo $id_hadiah; ?>"><i class="bi bi-pencil-square"></i></button>
                  <button type="button" class="btn btn-sm btn-danger" data-bs-toggle="modal" data-bs-target="#hapus_<?php echo $id_hadiah; ?>"><i class="bi bi-trash"></i></button>

                  <div class="modal fade" id="ubah_<?php echo $id_hadiah; ?>" tabindex="-1">
                    <div class="modal-dialog">
                      <div class="modal-content">
                        <form action="prs_ubah_hadiah.php" method="post">
                          <div class="modal-header">
                            <h5 class="modal-title">Ubah Data</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                          </div>
                          <div class="modal-body">
                            <input type="hidden" name="id_hadiah" value="<?php echo $id_hadiah; ?>">
                            <div class="form-floating mb-3">
                              <input type="text" class="form-control" id="nama_hadiah" name="nama_hadiah" value="<?php echo $nama_hadiah; ?>">
                              <label for="nama_hadiah">Nama Hadiah</label>
                            </div>
                            <div class="row g-2">
                              <div class="col-md-4">
                                <div class="form-floating mb-3">
                                  <input type="color" class="form-control form-control-color w-100" id="background_hadiah" name="background_hadiah" value="<?php echo $background_hadiah; ?>" title="Pilih Warna Background Hadiah">
                                  <label for="background_hadiah">Background Hadiah</label>
                                </div>
                              </div>
                              <div class="col-md-4">
                                <div class="form-floating mb-3">
                                  <input type="color" class="form-control form-control-color w-100" id="border_hadiah" name="border_hadiah" value="<?php echo $border_hadiah; ?>" title="Pilih Warna Border Hadiah">
                                  <label for="border_hadiah">Border Hadiah</label>
                                </div>
                              </div>
                              <div class="col-md-4">
                                <div class="form-floating mb-3">
                                  <input type="color" class="form-control form-control-color w-100" id="text_hadiah" name="text_hadiah" value="<?php echo $text_hadiah; ?>" title="Pilih Warna Text Hadiah">
                                  <label for="text_hadiah">Text Hadiah</label>
                                </div>
                              </div>
                            </div>
                            <div class="input-group mb-3">
                              <div class="form-floating">
                                <input type="text" class="form-control" id="persen_hadiah" name="persen_hadiah" value="<?php echo $persen_hadiah; ?>">
                                <label for="persen_hadiah">Kemunculan Hadiah</label>
                              </div>
                              <span class="input-group-text">%</span>
                            </div>
                            <div class="form-floating">
                              <select class="form-select" id="status_hadiah" name="status_hadiah" aria-label="status_hadiah">
                                <option value="<?php echo $status_hadiah; ?>"><?php echo $status_hadiah; ?></option>
                                <?php
                                  if ($status_hadiah == "Aktif") {
                                    echo '
                                      <option value="Tidak Aktif">Tidak Aktif</option>
                                    ';
                                  } else {
                                    echo '
                                      <option value="Aktif">Aktif</option>
                                    ';
                                  }
                                ?>
                              </select>
                              <label for="status_hadiah">Status Hadiah</label>
                            </div>
                          </div>
                          <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                            <button type="submit" class="btn btn-primary">Ubah Data</button>
                          </div>
                        </form>
                      </div>
                    </div>
                  </div><!-- End Modal Dialog Scrollable-->
                  <div class="modal fade" id="hapus_<?php echo $id_hadiah; ?>" tabindex="-1">
                    <div class="modal-dialog modal-dialog-centered">
                      <div class="modal-content">
                        <div class="modal-header">
                          <h5 class="modal-title">Hapus Data</h5>
                          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                          Yakin ingin menghapus hadiah <strong><?php echo $nama_hadiah; ?></strong> ?
                        </div>
                        <div class="modal-footer">
                          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                          <a href="prs_hapus_hadiah.php?id_hadiah=<?php echo $id_hadiah; ?>" class="btn btn-primary">Hapus Data</a>
                        </div>
                      </div>
                    </div>
                  </div><!-- End Vertically centered Modal-->
                </td>
              </tr>
              <?php } ?>
            </tbody>
          </table>

        </div>

      </div>
    </section>

  </main><!-- End #main -->