<?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">
                    <!-- BARIS 1 : PENCARIAN & UNDUH -->
                    <div class="row mb-3">
                      <!-- Form Pencarian -->
                      <div class="col-md-6">
                        <form method="GET">
                          <input type="hidden" name="csrf_token" value="<?= $csrf_token ?>">  
                          <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/pegawai-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>
                    
                    <!-- BARIS 2 : IMPORT & TEMPLATE -->
                    <div class="row mb-3">
                      <!-- Import Excel -->
                      <div class="col-md-6">
                        <form method="POST"
                              action="/dashboard/pegawai-import_pmb"
                              enctype="multipart/form-data">
                          <input type="hidden" name="csrf_token" value="<?= $csrf_token ?>">
                    
                          <div class="input-group">
                            <input type="file"
                                   name="file_excel"
                                   class="form-control"
                                   accept=".xls,.xlsx"
                                   required>
                            <button class="btn btn-success">
                              <i class="bi bi-upload"></i> Import Excel
                            </button>
                          </div>
                        </form>
                      </div>
                    
                      <!-- Download Template -->
                      <div class="col-md-6 d-flex align-items-center">
                        <a href="/download_format?file=template_import_pmb.xlsx"
                           class="btn btn-outline-secondary">
                          <i class="bi bi-file-earmark-excel"></i> Download Template
                        </a>
                      </div>
                    </div>

                      <!-- Tabel Data -->
                      <table class="table table-bordered">
                        <thead>
                          <tr>
                            <th>No</th>
                            <th>Nama</th>
                            <th>NISN</th>
                            <th>NPSN</th>
                            <th>No WA</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><?= $offset + $index + 1 ?></td>
                                <td><?= htmlspecialchars($row['nama_camaba']) ?></td>
                                <td><?= htmlspecialchars($row['nisn']) ?></td>
                                <td><?= htmlspecialchars($row['npsn']) ?></td>
                                <td><?= htmlspecialchars($row['wa']) ?></td>
                                <td class="text-center">
                                  <button class="btn btn-sm btn-primary btn-edit" 
                                          data-id="<?= $row['id_pmb'] ?>"
                                          data-nama="<?= htmlspecialchars($row['nama_camaba']) ?>"
                                          data-nisn="<?= htmlspecialchars($row['nisn']) ?>"
                                          data-npsn="<?= htmlspecialchars($row['npsn']) ?>"
                                          data-wa="<?= htmlspecialchars($row['wa']) ?>">
                                    Edit
                                  </button>
                                </td>
                                <td class="text-center">
                                  <form method="POST" action="/dashboard/pegawai-delete_data_pmb" style="display:inline-block" onsubmit="return confirm('Yakin ingin menghapus data ini?');">
                                    <input type="hidden" name="csrf_token" value="<?= $csrf_token ?>">
                                    <input type="hidden" name="id_pmb" value="<?= $row['id_pmb'] ?>">
                                    <button type="submit" class="btn btn-sm btn-danger">Hapus</button>
                                  </form>
                                </td>
                              </tr>
                            <?php endforeach; ?>
                          <?php else: ?>
                            <tr><td colspan="7" class="text-center">Data tidak ditemukan</td></tr>
                          <?php endif; ?>
                        </tbody>
                      </table>

                      <!-- Pagination -->
                      <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="/dashboard/pegawai-data_pmb?page=data_pmb&page_no=<?= $p ?>&search=<?= urlencode($search ?? '') ?>"><?= $p ?></a>
                            </li>
                          <?php endfor; ?>
                        </ul>
                      </nav>
                    </div>
                  </div>
                </div>

                <!-- Modal Edit Data -->
                <div class="modal fade" id="editModal" tabindex="-1" aria-hidden="true">
                  <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content">
                      <form method="POST" action="/dashboard/pegawai-update_data_pmb">
                        <input type="hidden" name="csrf_token" value="<?= $csrf_token ?>">  
                        <div class="modal-header">
                          <h5 class="modal-title">Edit Data PMB</h5>
                          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                        </div>
                        <div class="modal-body">
                          <input type="hidden" name="id_pmb" id="edit-id">

                          <div class="mb-3">
                            <label class="form-label">Nama</label>
                            <input type="text" class="form-control" name="nama_camaba" id="edit-nama" required>
                          </div>
                          <div class="mb-3">
                            <label class="form-label">NISN</label>
                            <input type="text" class="form-control" name="nisn" id="edit-nisn" required>
                          </div>
                          <div class="mb-3">
                            <label class="form-label">NPSN</label>
                            <input type="text" class="form-control" name="npsn" id="edit-npsn" required>
                          </div>
                          <div class="mb-3">
                            <label class="form-label">No WA</label>
                            <input type="text" class="form-control" name="wa" id="edit-wa" required>
                          </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">Simpan</button>
                        </div>
                      </form>
                    </div>
                  </div>
                </div>

                <script>
                  // Tombol Edit buka modal
                  document.querySelectorAll('.btn-edit').forEach(button => {
                    button.addEventListener('click', function() {
                      const id = this.dataset.id;
                      const nama = this.dataset.nama;
                      const nisn = this.dataset.nisn;
                      const npsn = this.dataset.npsn;
                      const wa = this.dataset.wa;

                      document.getElementById('edit-id').value = id;
                      document.getElementById('edit-nama').value = nama;
                      document.getElementById('edit-nisn').value = nisn;
                      document.getElementById('edit-npsn').value = npsn;
                      document.getElementById('edit-wa').value = wa;

                      new bootstrap.Modal(document.getElementById('editModal')).show();
                    });
                  });
                </script>

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