<?php include_once __DIR__ . '/../layouts/head.php'; ?>
<div class="container py-4" style="max-width: 1350px; width: 100%;">
  <div class="row">
    <div class="col-lg-12">
      <div class="shadow-sm bg-white rounded overflow-hidden border">
        <div class="p-0">
          <div class="row px-0 m-0">

            <?php include_once __DIR__ . '/../layouts/menu_body.php'; ?>

            <div class="col-12 col-md-9 px-0">
              <div class="tab-content" id="v-pills-tabContent">
                <!-- wates -->
                <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
                  <div class="p-4">
                    <div class="mb-4">
                      <h5 class="mb-0 fw-bold">Manajemen Data</h5>
                    </div>

                    <div class="container">
                      <div class="row mb-3">
                        <!-- Form Pencarian -->
                        <div class="col-md-6">
                          <form method="GET">
                            <input type="hidden" name="page" value="data_pmb">
                            <div class="input-group">
                              <input type="text" class="form-control" placeholder="Cari nama atau NISN..." name="search" value="<?= htmlspecialchars($search ?? '') ?>">
                              <button class="btn btn-outline-primary" type="submit">Cari</button>
                            </div>
                          </form>
                        </div>

                        <!-- Form Unduh -->
                        <div class="col-md-6">
                          <form method="POST" action="/dashboard/admin-download_data_pmb" target="_BLANK">
                            <div class="input-group">
                              <select name="tahun" class="form-select" required>
                                <option value="">Pilih Tahun</option>
                                <?php foreach($tahun_list as $tahun): ?>
                                  <option value="<?= $tahun ?>" <?= (isset($tahun_selected) && $tahun_selected == $tahun) ? 'selected' : '' ?>>
                                    <?= $tahun ?>
                                  </option>
                                <?php endforeach; ?>
                              </select>
                              <button class="btn btn-info" type="submit">
                                <i class="bi bi-file-earmark-pdf-fill me-1"></i> Unduh
                              </button>
                            </div>
                          </form>
                        </div>
                      </div>

                      <table class="table table-bordered">
                        <thead>
                          <tr>
                            <th>No</th>
                            <th>Nama</th>
                            <th>NISN</th>
                            <th>No WA</th>
                            <th>Foto Bukti</th>
                            <th>Status</th>
                            <th colspan="2" class="text-center">Aksi</th>
                          </tr>
                        </thead>
                        <tbody>
                          <?php if (!empty($data_pmb)): ?>
                            <?php foreach ($data_pmb as $index => $row): ?>
                              <tr>
                                <td><?= $index + 1 ?></td>
                                <td><?= htmlspecialchars($row['nama_camaba']) ?></td>
                                <td><?= htmlspecialchars($row['nisn']) ?></td>
								<?php
								// Ganti awalan 0 dengan 62 (tanpa tanda +)
								$wa_nomor = preg_replace('/^0/', '62', $row['wa']);

								// Pesan tergantung status
								if ($row['status'] == 'In Paid') {
									$pesan = "Assalamu'alaikum {$row['nama_camaba']},\nSilahkan unggah bukti registrasi pendaftaran STKIP Babunnajah melalui halaman berikut:\nhttps://stkip.babunnajah.ac.id/bukti\n\nJika Anda belum melakukan pembayaran registrasi, silakan kunjungi kantor bendahara STKIP Babunnajah.";
									$btn_class = "btn btn-success btn-sm";
								} elseif ($row['status'] == 'Paid') {
									$pesan = "Assalamu'alaikum {$row['nama_camaba']},\nPembayaran registrasi PMB Anda di STKIP Babunnajah telah valid.\nSilakan cetak Kartu Peserta melalui tautan berikut:\nhttps://stkip.babunnajah.ac.id/cetakkartu";
									$btn_class = "btn btn-primary btn-sm";
								}
								?>

								<td>
									<a href="https://wa.me/<?= $wa_nomor ?>?text=<?= urlencode($pesan) ?>" target="_blank" class="<?= $btn_class ?>">Chat WA</a>
								</td>
                                <td>
                                  <?php if (!empty($row['bukti'])): ?>
                                    <img src="https://stkip.babunnajah.ac.id/foto_bukti/<?= htmlspecialchars($row['bukti']) ?>" width="50" height="50" class="bukti-gambar" data-img="https://stkip.babunnajah.ac.id/foto_bukti/<?= htmlspecialchars($row['bukti']) ?>">
                                  <?php else: ?>
                                    <span class="text-danger">-</span>
                                  <?php endif; ?>
                                </td>
                                <td>
                                  <span class="badge <?= $row['status'] === 'Paid' ? 'bg-success' : 'bg-danger' ?>">
                                    <?= htmlspecialchars($row['status']) ?>
                                  </span>
                                </td>
                                <td>
                                  <button class="btn btn-warning btn-sm btn-verifikasi"
                                          data-id="<?= $row['id_pmb'] ?>"
                                          data-nama="<?= htmlspecialchars($row['nama_camaba']) ?>"
                                          data-status="<?= htmlspecialchars($row['status']) ?>">
                                    Verifikasi
                                  </button>
                                </td>
                                <td>
                                  <form method="POST" onsubmit="return confirm('Yakin ingin menghapus WA?');" action="/dashboard/admin-data_pmb">
                                    <input type="hidden" name="id_pmb" value="<?= $row['id_pmb'] ?>">
                                    <button type="submit" name="update_wa" class="btn btn-default btn-sm">❌</button>
                                  </form>
                                </td>
                              </tr>
                            <?php endforeach; ?>
                          <?php else: ?>
                            <tr><td colspan="8" class="text-center">Data tidak ditemukan</td></tr>
                          <?php endif; ?>
                        </tbody>
                      </table>

                      <nav>
                        <ul class="pagination justify-content-center">
                          <?php for($p = 1; $p <= $totalPages; $p++): ?>
                            <li class="page-item <?= ($page_no == $p) ? 'active' : '' ?>">
                              <a class="page-link" href="?page=data_pmb&page_no=<?= $p ?>&search=<?= urlencode($search ?? '') ?>"><?= $p ?></a>
                            </li>
                          <?php endfor; ?>
                        </ul>
                      </nav>
                    </div>
                  </div>
                </div>

                <!-- Modal Verifikasi -->
                <div class="modal fade" id="verifikasiModal" tabindex="-1" aria-hidden="true">
                  <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content">
                      <form method="POST" action="/dashboard/admin-data_pmb">
                        <div class="modal-header">
                          <h5 class="modal-title">Konfirmasi Verifikasi</h5>
                          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                        </div>
                        <div class="modal-body">
                          <p id="verifikasiText"></p>
                          <input type="hidden" name="idPmb" id="idPmb">
                          <select name="statusBaru" id="statusBaru" class="form-control">
                            <option value="Paid">Paid</option>
                            <option value="In Paid">In Paid</option>
                          </select>
                        </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">Simpan</button>
                        </div>
                      </form>
                    </div>
                  </div>
                </div>

                <!-- Modal Gambar -->
                <div class="modal fade" id="imageModal" tabindex="-1" aria-hidden="true">
                  <div class="modal-dialog modal-dialog-centered">
                    <!-- Konten gambar nanti dimasukkan lewat JavaScript -->
                  </div>
                </div>

                <script>
                  document.querySelectorAll('.btn-verifikasi').forEach(button => {
                    button.addEventListener('click', function () {
                      const id = this.dataset.id;
                      const nama = this.dataset.nama;
                      const status = this.dataset.status;

                      document.getElementById('idPmb').value = id;
                      document.getElementById('verifikasiText').textContent = `Verifikasi status ${nama} ?`;
                      document.getElementById('statusBaru').value = status;

                      new bootstrap.Modal(document.getElementById('verifikasiModal')).show();
                    });
                  });
                </script>
				
				<div id="image-popup" style="display: none;" onclick="this.style.display='none'">
				  <span style="position:absolute;top:10px;right:20px;font-size:30px;color:white;cursor:pointer;">&times;</span>
				  <img id="popup-img" src="" style="max-width: 90%; max-height: 90%;">
				</div>


              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
  #image-popup {
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0,0,0,0.8);
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 9999;
  }

  #image-popup img {
    box-shadow: 0 0 10px white;
    border-radius: 8px;
  }
</style>
<script>
  document.querySelectorAll('.bukti-gambar').forEach(img => {
    img.addEventListener('click', function() {
      const popup = document.getElementById('image-popup');
      const popupImg = document.getElementById('popup-img');
      popupImg.src = this.dataset.img;
      popup.style.display = 'flex';
    });
  });

  // Klik pada popup akan menutup gambar
  document.getElementById('image-popup').addEventListener('click', function() {
    this.style.display = 'none';
  });
</script>


<?php include_once __DIR__ . '/../layouts/footer.php'; ?>
