<?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">

                <!-- Konten Utama -->
                <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel">
                  <div class="p-4">
                    
                    <div class="mb-4">
                      <h5 class="mb-0 fw-bold">Manajemen Data KKN</h5>
                    </div>

                    <form class="row mb-3" method="get" action="">
                      <div class="col-md-4">
                        <input type="text" name="search" value="<?= isset($_GET['search']) ? htmlspecialchars($_GET['search']) : '' ?>" class="form-control" placeholder="Cari NIM atau Nama...">
                      </div>
                      <div class="col-md-2">
                        <button class="btn btn-primary" type="submit">Cari</button>
                        <a href="/dashboard/pegawai-manage_kkn" class="btn btn-secondary">Reset</a>
                      </div>
                    </form>
                    
                    <form class="row mb-3 g-2" method="get" action="/dashboard/pegawai-download-kkn" onsubmit="return validateBulan()">
                      <div class="col-md-2">
                        <label class="form-label">Dari Bulan</label>
                        <select name="bulan_awal" id="bulan_awal" class="form-select">
                          <?php
                            $blnNow = (int)date('m');
                            foreach (range(1, 12) as $b) {
                              $selected = ($b == $blnNow) ? 'selected' : '';
                              printf('<option value="%02d" %s>%s</option>', $b, $selected, date('F', mktime(0, 0, 0, $b, 1)));
                            }
                          ?>
                        </select>
                      </div>
                      <div class="col-md-2">
                        <label class="form-label">Hingga Bulan</label>
                        <select name="bulan_akhir" id="bulan_akhir" class="form-select">
                          <?php
                            foreach (range(1, 12) as $b) {
                              $selected = ($b == $blnNow) ? 'selected' : '';
                              printf('<option value="%02d" %s>%s</option>', $b, $selected, date('F', mktime(0, 0, 0, $b, 1)));
                            }
                          ?>
                        </select>
                      </div>
                      <div class="col-md-2">
                        <label class="form-label">Tahun</label>
                        <select name="tahun" class="form-select">
                          <?php
                            $yearNow = (int)date('Y');
                            for ($y = $yearNow; $y >= $yearNow - 10; $y--) {
                              echo "<option value='$y'" . ($y == $yearNow ? ' selected' : '') . ">$y</option>";
                            }
                          ?>
                        </select>
                      </div>
                      <div class="col-md-2 d-flex align-items-end">
                        <button class="btn btn-success w-100" type="submit"><i class="bi bi-download"></i> Download Excel</button>
                      </div>
                    </form>
                    
                    <script>
                      function validateBulan() {
                        const awal = parseInt(document.getElementById('bulan_awal').value);
                        const akhir = parseInt(document.getElementById('bulan_akhir').value);
                        if (awal > akhir) {
                          alert("Bulan awal tidak boleh lebih besar dari bulan akhir.");
                          return false;
                        }
                        return true;
                      }
                    </script>


                    <!-- Tabel Data -->
                    <div class="table-responsive">
                      <table class="table table-bordered table-striped">
                        <thead class="table-light">
                          <tr>
                            <th>No</th>
                            <th>NIM</th>
                            <th>Nama</th>
                            <th>Prodi</th>
                            <th>Semester</th>
                            <th>JK</th>
                            <th>No HP</th>
                            <th>Token</th>
                            <th colspan="2"><center>Aksi</center></th>
                          </tr>
                        </thead>
                        <tbody>
                          <?php if (!empty($data_kkn)): ?>
                            <?php foreach ($data_kkn as $i => $row): ?>
                              <tr>
                                <td><?= $i + 1 ?></td>
                                <td><?= htmlspecialchars($row['nim']) ?></td>
                                <td style="font-size: 11px;"><?= htmlspecialchars($row['nama']) ?></td>
                                <td>
                                  <?php
                                    $prodi = $row['prodi'];
                                    if ($prodi === 'Pendidikan Guru Sekolah Dasar') {
                                        echo 'PGSD';
                                    } elseif ($prodi === 'Pendidikan Guru Pendidikan Anak Usia Dini') {
                                        echo 'PGPAUD';
                                    } else {
                                        echo htmlspecialchars($prodi);
                                    }
                                  ?>
                                </td>
                                <td><?= htmlspecialchars($row['semester']) ?></td>
                                <td>
                                  <?php
                                    $jk = $row['jenis_kelamin'];
                                    if ($jk === 'Laki-laki') {
                                        echo 'L';
                                    } elseif ($jk === 'Perempuan') {
                                        echo 'P';
                                    } else {
                                        echo htmlspecialchars($jk);
                                    }
                                  ?>
                                </td>                                
                                <td><?= htmlspecialchars($row['no_hp']) ?></td>
                                <td><?= htmlspecialchars($row['token']) ?></td>
                                <td>
                                  <button class="btn btn-sm btn-primary" onclick='editData(<?= json_encode($row) ?>)'><i class="bi bi-pencil-square"></i></button>
                                </td>
                                <td>  
                                  <form method="post" style="display:inline">
                                    <input type="hidden" name="delete_id" value="<?= $row['id_kkn'] ?>">
                                    <button class="btn btn-sm btn-danger" type="submit" onclick="return confirm('Hapus data ini?')"><i class="bi bi-trash2"></i></button>
                                  </form>
                                </td>
                              </tr>
                            <?php endforeach ?>
                          <?php else: ?>
                            <tr><td colspan="14" class="text-center">Tidak ada data.</td></tr>
                          <?php endif ?>
                        </tbody>
                      </table>
                    </div>

                        <?php
                        // Paginasi
                        $currentPage = isset($_GET['page']) ? (int) $_GET['page'] : 1;
                        $totalPages = isset($totalPages) ? $totalPages : 1;
                        
                        $maxButtons = 8;
                        $start = max(1, $currentPage - floor($maxButtons / 2));
                        $end = min($totalPages, $start + $maxButtons - 1);
                        $start = max(1, $end - $maxButtons + 1);
                        ?>
                        
                        <nav>
                          <ul class="pagination justify-content-center mt-4">
                            <!-- Tombol First -->
                            <li class="page-item <?= $currentPage <= 1 ? 'disabled' : '' ?>">
                              <a class="page-link" href="/dashboard/pegawai-manage_kkn?page=1">&laquo;</a>
                            </li>
                            <!-- Tombol Prev -->
                            <li class="page-item <?= $currentPage <= 1 ? 'disabled' : '' ?>">
                              <a class="page-link" href="/dashboard/pegawai-manage_kkn?page=<?= $currentPage - 1 ?>">&lsaquo;</a>
                            </li>
                        
                            <!-- Nomor Halaman -->
                            <?php for ($i = $start; $i <= $end; $i++): ?>
                              <li class="page-item <?= $i == $currentPage ? 'active' : '' ?>">
                                <a class="page-link" href="/dashboard/pegawai-manage_kkn?page=<?= $i ?>"><?= $i ?></a>
                              </li>
                            <?php endfor ?>
                        
                            <!-- Tombol Next -->
                            <li class="page-item <?= $currentPage >= $totalPages ? 'disabled' : '' ?>">
                              <a class="page-link" href="/dashboard/pegawai-manage_kkn?page=<?= $currentPage + 1 ?>">&rsaquo;</a>
                            </li>
                            <!-- Tombol Last -->
                            <li class="page-item <?= $currentPage >= $totalPages ? 'disabled' : '' ?>">
                              <a class="page-link" href="/dashboard/pegawai-manage_kkn?page=<?= $totalPages ?>">&raquo;</a>
                            </li>
                          </ul>
                        </nav>
                        
                    <!-- Modal Edit -->
                    <div class="modal fade" id="modalEdit" tabindex="-1" aria-labelledby="modalEditLabel" aria-hidden="true">
                      <div class="modal-dialog modal-lg">
                        <div class="modal-content">
                          <form method="post">
                            <div class="modal-header">
                              <h5 class="modal-title" id="modalEditLabel">Edit Data KKN</h5>
                              <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                            </div>
                            <div class="modal-body row g-3">
                              <input type="hidden" name="id_kkn" id="edit_id_kkn">
                              <div class="col-md-6">
                                <label>NIM</label>
                                <input type="text" class="form-control" name="nim" id="edit_nim">
                              </div>
                              <div class="col-md-6">
                                <label>Nama</label>
                                <input type="text" class="form-control" name="nama" id="edit_nama">
                              </div>
                              <div class="col-md-6">
                                <label>Tempat Lahir</label>
                                <input type="text" class="form-control" name="tmpt_lahir" id="edit_tmpt_lahir">
                              </div>
                              <div class="col-md-6">
                                <label>Tanggal Lahir</label>
                                <input type="date" class="form-control" name="tgl_lahir" id="edit_tgl_lahir">
                              </div>
                              <div class="col-md-6">
                                <label>Prodi</label>
                                <input type="text" class="form-control" name="prodi" id="edit_prodi">
                              </div>
                              <div class="col-md-3">
                                <label>Semester</label>
                                <input type="number" class="form-control" name="semester" id="edit_semester">
                              </div>
                              <div class="col-md-3">
                                <label>Jenis Kelamin</label>
                                <input type="text" class="form-control" name="jenis_kelamin" id="edit_jk">
                              </div>
                              <div class="col-md-6">
                                <label>No HP</label>
                                <input type="text" class="form-control" name="no_hp" id="edit_no_hp">
                              </div>
                              <div class="col-md-6">
                                <label>Alamat</label>
                                <input type="text" class="form-control" name="alamat" id="edit_alamat">
                              </div>
                              <div class="col-md-6">
                                <label>Status Kawin</label>
                                <input type="text" class="form-control" name="status_perkawinan" id="edit_kawin">
                              </div>
                              <div class="col-md-6">
                                <label>Status Pekerjaan</label>
                                <input type="text" class="form-control" name="status_pekerjaan" id="edit_pekerjaan">
                              </div>
                              <div class="col-md-6">
                                <label>Token</label>
                                <input type="text" class="form-control" name="token" id="edit_token">
                              </div>
                            </div>
                            <div class="modal-footer">
                              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                              <button type="submit" name="edit_submit" class="btn btn-primary">Simpan</button>
                            </div>
                          </form>
                        </div>
                      </div>
                    </div>

                    <script>
                      function editData(data) {
                        document.getElementById('edit_id_kkn').value = data.id_kkn;
                        document.getElementById('edit_nim').value = data.nim;
                        document.getElementById('edit_nama').value = data.nama;
                        document.getElementById('edit_tmpt_lahir').value = data.tmpt_lahir;
                        document.getElementById('edit_tgl_lahir').value = data.tgl_lahir;
                        document.getElementById('edit_prodi').value = data.prodi;
                        document.getElementById('edit_semester').value = data.semester;
                        document.getElementById('edit_jk').value = data.jenis_kelamin;
                        document.getElementById('edit_no_hp').value = data.no_hp;
                        document.getElementById('edit_alamat').value = data.alamat;
                        document.getElementById('edit_kawin').value = data.status_perkawinan;
                        document.getElementById('edit_pekerjaan').value = data.status_pekerjaan;
                        document.getElementById('edit_token').value = data.token;

                        let modal = new bootstrap.Modal(document.getElementById('modalEdit'));
                        modal.show();
                      }
                    </script>

                  </div>
                </div>

              </div>
            </div>

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