<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Dashboard Ketua - PKM</title>

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
  <!-- Bootstrap CSS end -->

  <!-- CDN Icons -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
  <!-- CDN Icons end -->

  <style>
    body {
      padding-top: 85px; /* adjust the value to match the height of your navbar */
    }

    .sidebar {
      width: 280px;
      transition: transform 0.3s ease;
    }

    .sidebar.collapsed {
      transform: translateX(-280px);
    }

    @media (max-width: 992px) {
      .sidebar {
        position: fixed;
        z-index: 1000;
        height: 100vh;
        transform: translateX(-280px);
      }

      .sidebar.show {
        transform: translateX(0);
      }

      .sidebar {
        width: 280px;
      }

      #content {
        margin-left: 20px;
      }

      /* Navbar fixed position */
      .navbar-fixed {
            position: fixed;
            top: 0;
            width: 100%;
            background-color: #f8f9fa;
            z-index: 1000;
        }
        /* Adjust content padding to avoid overlap */
        .content {
            padding-top: 60px; /* Adjust based on navbar height */
        }

    }
  </style>

</head>

<body>

  <!-- Sidebar -->

  <nav class="navbar fixed-top bg-body-tertiary">
    <div class="container">
      <a class="navbar-brand" href="#">
        <img src="/assets/img/pkm.png" alt="PKM Center" width="120" height="60">
      </a>
      <ul class="nav justify-content-end">
        <li class="nav-item">
          <!-- Hamburger Icon -->
          <i class="bi bi-list fs-2" id="sidebarToggle"></i>
        </li>
      </ul>
    </div>
  </nav>

  <!-- Sidebar -->
  <aside class="left-sidebar fixed-left d-flex bg-body-tertiary">
    <!-- Sidebar -->
    <div class="scroll-sidebar d-flex flex-column flex-shrink-0 p-3 bg-body-tertiary vh-100 sidebar" id="sidebar">
      <nav class="sidebar-nav">
      <h4> Ketua </h4>
      <hr>
      <ul class="nav nav-pills flex-column mb-auto">
        <li>
          <a href="#" class="nav-link link-body-emphasis" id="dashboard-link">
            <i class="bi bi-speedometer2"></i>
            Dashboard
          </a>
        </li>
        <% if (!kelompokInfo[0]) {%>
          <li>
            <a href="#" class="nav-link link-body-emphasis" id="pendaftaran-link">
              <i class="bi bi-person-check"></i>
              Pendaftaran
            </a>
          </li>
        <%}%>
        
        <% if (kelompokInfo[0]) {%>
        <li>
          <a href="#" class="nav-link link-body-emphasis" id="revisi-kelompok-link">
            <i class="bi bi-person"></i>
            Kelompok
          </a>
        </li>
        <%}%>
        <li>
          <a href="#" class="nav-link link-body-emphasis" id="profile-link">
            <i class="bi bi-person"></i>
            Profile
          </a>
        </li>
        <li>
          <a href="#" class="nav-link link-body-emphasis" id="laporan-link">
            <i class="bi bi-file-earmark"></i>
            Laporan Kemajuan 1
          </a>
        </li>
        <li>
          <a href="#" class="nav-link link-body-emphasis" id="laporan2-link">
            <i class="bi bi-file-earmark"></i>
            Laporan Kemajuan 2
          </a>
        </li>
        <li>
          <a href="#" class="nav-link link-body-emphasis" id="laporan3-link">
            <i class="bi bi-file-earmark"></i>
            Laporan Kemajuan 3
          </a>
        </li>
        <li>
          <a href="#" class="nav-link link-body-emphasis" id="revisi1-link">
            <i class="bi bi-file-earmark"></i>
            Revisi tahap 1
          </a>
        </li>
        <li>
          <a href="#" class="nav-link link-body-emphasis" id="revisi2-link">
            <i class="bi bi-file-earmark"></i>
            Revisi tahap 2
          </a>
        </li>
        <li>
          <a href="#" class="nav-link link-body-emphasis" id="revisi3-link">
            <i class="bi bi-file-earmark"></i>
            Revisi tahap 3
          </a>
        </li>
        <li>
          <a href="#" class="nav-link link-body-emphasis" id="final-link">
            <i class="bi bi-file-earmark"></i>
            Final Project
          </a>
        </li>
        <li>
          <a href="#" class="nav-link link-body-emphasis" id="proses-link">
            <i class="bi bi-file-earmark"></i>
            Pemantauan Proses
          </a>
        </li>
      </ul>
      <hr>
      <a href="/logout" class="nav-link link-body-emphasis">
        <i class="bi bi-box-arrow-right"></i>
        Log Out
      </a>
      </nav>
    </div>

    <!-- Content Area -->
    <div class="p-3 bg-light flex-grow-1 mx-auto" id="content">
      <!-- Content will be dynamically injected here -->
    </div>
  </aside>

  <!-- Sidebar end -->






  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
    crossorigin="anonymous"></script>

  <script>
    // Toggle sidebar
    const sidebarToggle = document.getElementById('sidebarToggle');
    const sidebar = document.getElementById('sidebar');

    sidebarToggle.addEventListener('click', function () {
      if (window.innerWidth < 992) {
        sidebar.classList.toggle('show');
      } else {
        sidebar.classList.toggle('collapsed');
      }
    });

    window.addEventListener('resize', function () {
      if (window.innerWidth >= 992) {
        sidebar.classList.remove('show');
      }
    });
  </script>




  </script>
  <script>
    // Event listener untuk klik "dashboard-link"
    document.getElementById("dashboard-link").addEventListener("click", function () {
      const contentArea = document.getElementById("content");
      contentArea.innerHTML = `
      <div class="container text-center mt-5">
        <div class="row justify-content-center gx-3">
          <div class="col-lg-4">
            <img class="bd-placeholder-img rounded-circle" width="140" height="140" role="img" aria-label="Placeholder" preserveAspectRatio="xMidYMid slice" focusable="false" src="/assets/foto/<%= kelompokUser[0] && kelompokUser[0][1] ? kelompokUser[0][1].foto : "kosong.png" %>" />
            <h2 class="fw-normal"><%= kelompokUser[0] && kelompokUser[0][1] ? kelompokUser[0][1].nama : "Belum Ada" %></h2>
            <p>Ketua Kelompok</p>
          </div>
          <div class="col-lg-4">
            <img class="bd-placeholder-img rounded-circle" width="140" height="140" role="img" aria-label="Placeholder" preserveAspectRatio="xMidYMid slice" focusable="false" src="/assets/foto/<%= kelompokUser[0] && kelompokUser[0][0] ? kelompokUser[0][0].foto : "kosong.png" %>" />
            <h2 class="fw-normal"><%= kelompokUser[0] && kelompokUser[0][0] ? kelompokUser[0][0].nama : "Belum Ada" %></h2>
            <p>Dosen Pembimbing</p>
          </div>
        </div>
      </div>

      <div class="container text-center mt-5">
        <div class="row justify-content-center">
          <div class="col-lg-3">
            <img class="bd-placeholder-img rounded-circle" width="140" height="140" role="img" aria-label="Placeholder" preserveAspectRatio="xMidYMid slice" focusable="false" src="/assets/foto/<%= kelompokUser[0] && kelompokUser[0][2] ? kelompokUser[0][2].foto : "kosong.png" %>" />
            <h2 class="fw-normal"><%= kelompokUser[0] && kelompokUser[0][2] ? kelompokUser[0][2].nama : "Belum Ada" %></h2>
            <p>Anggota 1</p>
          </div>
          <div class="col-lg-3">
            <img class="bd-placeholder-img rounded-circle" width="140" height="140" role="img" aria-label="Placeholder" preserveAspectRatio="xMidYMid slice" focusable="false" src="/assets/foto/<%= kelompokUser[0] && kelompokUser[0][3] ? kelompokUser[0][3].foto : "kosong.png" %>" />
            <h2 class="fw-normal"><%= kelompokUser[0] && kelompokUser[0][3] ? kelompokUser[0][3].nama : "Belum Ada" %></h2>
            <p>Anggota 2</p>
          </div>
          <div class="col-lg-3">
            <img class="bd-placeholder-img rounded-circle" width="140" height="140" role="img" aria-label="Placeholder" preserveAspectRatio="xMidYMid slice" focusable="false" src="/assets/foto/<%= kelompokUser[0] && kelompokUser[0][4] ? kelompokUser[0][4].foto : "kosong.png" %>" />
            <h2 class="fw-normal"><%= kelompokUser[0] && kelompokUser[0][4] ? kelompokUser[0][4].nama : "Belum Ada" %></h2>
            <p>Anggota 3</p>
          </div>
          <div class="col-lg-3">
            <img class="bd-placeholder-img rounded-circle" width="140" height="140" role="img" aria-label="Placeholder" preserveAspectRatio="xMidYMid slice" focusable="false" src="/assets/foto/<%= kelompokUser[0] && kelompokUser[0][5] ? kelompokUser[0][5].foto : "kosong.png" %>" />
            <h2 class="fw-normal"><%= kelompokUser[0] && kelompokUser[0][5] ? kelompokUser[0][5].nama : "Belum Ada" %></h2>
            <p>Anggota 4</p>
          </div>
        </div>
      </div>
    `;
    });

    // Memanggil event listener secara manual saat halaman dibuka
    document.getElementById("dashboard-link").click();
  </script>


  </script>
  <script>document.getElementById("pendaftaran-link").addEventListener("click", function () {
      const contentArea = document.getElementById("content");
      contentArea.innerHTML = `
      <div class="card mb-4">
      <div class="card-header">Pendaftaran Kelompok</div>
      <div class="card-body">
        <form
          action="/kelompok-register"
          method="post"
          enctype="multipart/form-data"
        >
          <div class="mb-3">
            <label for="groupName" class="form-label">Judul</label>
            <input
              type="text"
              class="form-control"
              id="groupName"
              name="judul"
              required
            />
          </div>
          <div class="mb-3">
            <label for="leaderName" class="form-label">Nama Kelompok</label>
            <input
              type="text"
              class="form-control"
              id="leaderName"
              name="nama"
              placeholder="e.g. Kelompok Ustman"
              required
            />
          </div>

          <div class="mb-3">
            <label for="skemaPKM" class="form-label">Skema PKM</label>
            <select class="form-control" id="skemaPKM" name="skema" required>
              <option value="" selected disabled>Pilih Skema PKM</option>
              <option value="PKM Riset Eksakta (RE)">
                PKM Riset Eksakta (RE)
              </option>
              <option value="PKM Riset Sosial Humaniora (RSH)">
                PKM Riset Sosial Humaniora (RSH)
              </option>
              <option value="PKM Pengabdian kepada Masyarakat (PM)">
                PKM Pengabdian kepada Masyarakat (PM)
              </option>
              <option value="PKM Penerapan IPTEK (PI)">
                PKM Penerapan IPTEK (PI)
              </option>
              <option value="PKM Karsa Cipta (KC)">PKM Karsa Cipta (KC)</option>
              <option value="PKM Karya Inovatif (KI)">
                PKM Karya Inovatif (KI)
              </option>
              <option value="PKM Kewirausahaan (K)">
                PKM Kewirausahaan (K)
              </option>
              <option value="PKM Video Gagasan Konstruktif (VGK)">
                PKM Video Gagasan Konstruktif (VGK)
              </option>
              <option value="PKM Artikel Ilmiah (AI)">
                PKM Artikel Ilmiah (AI)
              </option>
              <option value="PKM Gagasan Futuristik Tertulis (GFT)">
                PKM Gagasan Futuristik Tertulis (GFT)
              </option>
            </select>
          </div>

          <div class="mb-3">
        <label for="leaderName" class="form-label">Dosen Pembimbing</label>
        <select
          class="form-select"
          id="leaderName"
          aria-label="Dosen Pembimbing"
          name="dosen"
          onchange="showDosenQuota(this.value)"
          required
        >
          <option value="" selected disabled>Pilih Dosen Pembimbing</option>
          <% for(var i = 0; i < dosen.length; i++) { %>
            <option value="<%= dosen[i].nomor_induk %>"><%= dosen[i].nama %></option>
          <% } %>
          <!-- Tambahkan semua dosen lainnya seperti contoh di atas -->
        </select>
      </div>

      <!-- Tabel untuk menampilkan kuota dosen -->
      <div id="dosenQuotaTable" class="mt-4 d-none">
        <table class="table table-bordered">
          <thead>
            <tr>
              <th>Nama Dosen</th>
              <th>Jumlah Kuota Tersisa</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td id="dosenName"></td>
              <td id="dosenQuota"></td>
            </tr>
          </tbody>
        </table>
      </div>

          <div class="mb-3">
            <h3 class="mb-5 mt-5">Anggota 1</h3>
            <label for="nimAnggota1" class="form-label">Nim Anggota 1</label>
            <input
              type="text"
              class="form-control"
              id="nimAnggota1"
              name="nim1"
              pattern="^(22|23|24)[0-9]*"
              required
              title="Nomor induk must start with 22, 23, or 24"
            />
          </div>

          <div class="mb-3">
            <label for="namaAnggota1" class="form-label">Nama Anggota 1</label>
            <input
              type="text"
              class="form-control"
              id="namaAnggota1"
              name="nama1"
              required
            />
          </div>

          <div class="mb-3">
            <label for="semesterAnggota1" class="form-label"
              >Semester Anggota 1</label
            >
            <select class="form-control" id="semester" name="semester1" required>
              <option value="" disabled selected>Pilih Semester</option>
              <option value="1">Semester 1</option>
              <option value="3">Semester 3</option>
              <option value="5">Semester 5</option>
            </select>
          </div>

          <div class="mb-3">
            <label for="jenisKelaminAnggota1" class="form-label"
              >Jenis Kelamin Anggota 1</label
            >
            <select
              class="form-control"
              id="jenisKelaminAnggota1"
              name="kelamin1"
              required
            >
              <option value="" selected disabled>Pilih Jenis Kelamin</option>
              <option value="Laki-Laki">Laki-Laki</option>
              <option value="Perempuan">Perempuan</option>
            </select>
          </div>

          <div class="mb-3">
            <label for="emailAnggota1" class="form-label"
              >Email Anggota 1</label
            >
            <input
              type="email"
              class="form-control"
              id="emailAnggota1"
              name="email1"
              required
            />
          </div>

          <div class="mb-3">
            <label for="nomorTelepon" class="form-label">Nomor Whatsapp</label>
            <input
              type="tel"
              class="form-control"
              id="nomorTelepon"
              name="telepon1"
              placeholder="e.g. 628x"
              pattern="62[0-9]+"
              required
              title="Nomor Whatsapp harus dimulai dengan 62 dan diikuti oleh angka lainnya"
            />
          </div>

          <div class="mb-3">
            <label for="alamat" class="form-label">Alamat</label>
            <input
              type="text"
              class="form-control"
              id="alamat"
              name="alamat1"
              required
            />
          </div>

          <div class="mb-3">
            <label for="programStudi" class="form-label"
              >Program Studi Anggota 1</label
            >
            <select
              class="form-control"
              id="programStudi"
              name="studi1"
              required
            >
              <option selected disabled value="">Pilih Program Studi</option>
              <option value="Bimbingan dan Konseling">
                Bimbingan dan Konseling
              </option>
              <option value="PG.PAUD">PG.PAUD</option>
              <option value="PGSD">PGSD</option>
              <option value="Pendidikan Bahasa Inggris">
                Pendidikan Bahasa Inggris
              </option>
              <option value="Pendidikan Bahasa Jepang">
                Pendidikan Bahasa Jepang
              </option>
              <option value="Pendidikan Bahasa dan Sastra Indonesia">
                Pendidikan Bahasa dan Sastra Indonesia
              </option>
              <option value="Pendidikan Biologi">Pendidikan Biologi</option>
              <option value="Pendidikan Ekonomi">Pendidikan Ekonomi</option>
              <option value="Pendidikan Fisika">Pendidikan Fisika</option>
              <option value="Pendidikan Geografi">Pendidikan Geografi</option>
              <option value="Pendidikan Matematika">
                Pendidikan Matematika
              </option>
              <option value="Pendidikan Sejarah">Pendidikan Sejarah</option>
              <option value="Akuntansi">Akuntansi</option>
              <option value="Manajemen">Manajemen</option>
              <option value="Ekonomi Islam">Ekonomi Islam</option>
              <option value="Perpajakan">Perpajakan</option>
              <option value="Teknik Elektro">Teknik Elektro</option>
              <option value="Teknik Mesin">Teknik Mesin</option>
              <option value="Teknik Informatika">Teknik Informatika</option>
              <option value="Sistem dan Teknologi Informasi">
                Sistem dan Teknologi Informasi
              </option>
              <option value="Teknologi Rekayasa Mekatronika">
                Teknologi Rekayasa Mekatronika
              </option>
              <option value="Kesehatan Masyarakat">Kesehatan Masyarakat</option>
              <option value="Gizi">Gizi</option>
              <option value="Jurnalistik">Jurnalistik</option>
              <option value="Periklanan">Periklanan</option>
              <option value="Penyiaran">Penyiaran</option>
              <option value="Kehumasan">Kehumasan</option>
              <option value="Manajemen Komunikasi">Manajemen Komunikasi</option>
              <option value="Sarjana Farmasi">Sarjana Farmasi</option>
              <option value="Analis Kesehatan / TLM">
                Analis Kesehatan / TLM
              </option>
              <option value="Agama Islam">Agama Islam</option>
              <option value="Psikologi">Psikologi</option>
              <option value="Kedokteran">Kedokteran</option>
            </select>
          </div>

          <div class="mb-3">
            <label for="fakultas" class="form-label">Fakultas Anggota 1</label>
            <select
              class="form-control"
              id="fakultas"
              name="fakultas1"
              required
            >
              <option selected disabled value="">Pilih Fakultas</option>
              <option value="Fakultas Keguruan dan Ilmu Pendidikan">
                Fakultas Keguruan dan Ilmu Pendidikan
              </option>
              <option value="Fakultas Ekonomi dan Bisnis">
                Fakultas Ekonomi dan Bisnis
              </option>
              <option value="Fakultas Teknik Industri dan Informatika">
                Fakultas Teknik Industri dan Informatika
              </option>
              <option value="Fakultas Ilmu Ilmu Kesehatan">
                Fakultas Ilmu Ilmu Kesehatan
              </option>
              <option value="Fakultas Ilmu Sosial dan Ilmu Politik">
                Fakultas Ilmu Sosial dan Ilmu Politik
              </option>
              <option value="Fakultas Farmasi dan Sains">
                Fakultas Farmasi dan Sains
              </option>
              <option value="Fakultas Agama Islam">Fakultas Agama Islam</option>
              <option value="Fakultas Psikologi">Fakultas Psikologi</option>
              <option value="Fakultas Kedokteran">Fakultas Kedokteran</option>
            </select>
          </div>

          <div class="mb-3">
            <h3 class="mb-5 mt-5">Anggota 2</h3>
            <label for="nimAnggota2" class="form-label">Nim Anggota 2</label>
            <input
              type="text"
              class="form-control"
              id="nimAnggota2"
              name="nim2"
              pattern="^(22|23|24)[0-9]*"
              required
              title="Nomor induk must start with 22, 23, or 24"
            />
          </div>

          <div class="mb-3">
            <label for="namaAnggota2" class="form-label">Nama Anggota 2</label>
            <input
              type="text"
              class="form-control"
              id="namaAnggota2"
              name="nama2"
              required
            />
          </div>

          <div class="mb-3">
            <label for="semesterAnggota2" class="form-label"
              >Semester Anggota 2</label
            >
            <select class="form-control" id="semester" name="semester2" required>
              <option value="" disabled selected>Pilih Semester</option>
              <option value="1">Semester 1</option>
              <option value="3">Semester 3</option>
              <option value="5">Semester 5</option>
            </select>
          </div>

          <div class="mb-3">
            <label for="jenisKelaminAnggota2" class="form-label"
              >Jenis Kelamin Anggota 2</label
            >
            <select
              class="form-control"
              id="jenisKelaminAnggota2"
              name="kelamin2"
              required
            >
              <option value="" disabled selected>Pilih Jenis Kelamin</option>
              <option value="Laki-Laki">Laki-Laki</option>
              <option value="Perempuan">Perempuan</option>
            </select>
          </div>

          <div class="mb-3">
            <label for="emailAnggota2" class="form-label"
              >Email Anggota 2</label
            >
            <input
              type="email"
              class="form-control"
              id="emailAnggota2"
              name="email2"
              required
            />
          </div>

          <div class="mb-3">
            <label for="nomorTeleponAnggota2" class="form-label"
              >Nomor Whatsapp Anggota 2</label
            >
            <input
              type="tel"
              class="form-control"
              id="nomorTeleponAnggota2"
              name="telepon2"
              placeholder="e.g. 628x"
              pattern="62[0-9]*"
              required
              title="Please enter a valid number starting with 62"
            />
          </div>

          <div class="mb-3">
            <label for="alamatAnggota2" class="form-label"
              >Alamat Anggota 2</label
            >
            <input
              type="text"
              class="form-control"
              id="alamatAnggota2"
              name="alamat2"
              required
            />
          </div>

          <div class="mb-3">
            <label for="programStudiAnggota2" class="form-label"
              >Program Studi Anggota 2</label
            >
            <select
              class="form-control"
              id="programStudiAnggota2"
              name="studi2"
              required
            >
              <option selected disabled value="">Pilih Program Studi</option>
              <option value="Bimbingan dan Konseling">
                Bimbingan dan Konseling
              </option>
              <option value="PG.PAUD">PG.PAUD</option>
              <option value="PGSD">PGSD</option>
              <option value="Pendidikan Bahasa Inggris">
                Pendidikan Bahasa Inggris
              </option>
              <option value="Pendidikan Bahasa Jepang">
                Pendidikan Bahasa Jepang
              </option>
              <option value="Pendidikan Bahasa dan Sastra Indonesia">
                Pendidikan Bahasa dan Sastra Indonesia
              </option>
              <option value="Pendidikan Biologi">Pendidikan Biologi</option>
              <option value="Pendidikan Ekonomi">Pendidikan Ekonomi</option>
              <option value="Pendidikan Fisika">Pendidikan Fisika</option>
              <option value="Pendidikan Geografi">Pendidikan Geografi</option>
              <option value="Pendidikan Matematika">
                Pendidikan Matematika
              </option>
              <option value="Pendidikan Sejarah">Pendidikan Sejarah</option>
              <option value="Akuntansi">Akuntansi</option>
              <option value="Manajemen">Manajemen</option>
              <option value="Ekonomi Islam">Ekonomi Islam</option>
              <option value="Perpajakan">Perpajakan</option>
              <option value="Teknik Elektro">Teknik Elektro</option>
              <option value="Teknik Mesin">Teknik Mesin</option>
              <option value="Teknik Informatika">Teknik Informatika</option>
              <option value="Sistem dan Teknologi Informasi">
                Sistem dan Teknologi Informasi
              </option>
              <option value="Teknologi Rekayasa Mekatronika">
                Teknologi Rekayasa Mekatronika
              </option>
              <option value="Kesehatan Masyarakat">Kesehatan Masyarakat</option>
              <option value="Gizi">Gizi</option>
              <option value="Jurnalistik">Jurnalistik</option>
              <option value="Periklanan">Periklanan</option>
              <option value="Penyiaran">Penyiaran</option>
              <option value="Kehumasan">Kehumasan</option>
              <option value="Manajemen Komunikasi">Manajemen Komunikasi</option>
              <option value="Sarjana Farmasi">Sarjana Farmasi</option>
              <option value="Analis Kesehatan / TLM">
                Analis Kesehatan / TLM
              </option>
              <option value="Agama Islam">Agama Islam</option>
              <option value="Psikologi">Psikologi</option>
              <option value="Kedokteran">Kedokteran</option>
            </select>
          </div>

          <div class="mb-3">
            <label for="fakultasAnggota2" class="form-label"
              >Fakultas Anggota 2</label
            >
            <select
              class="form-control"
              id="fakultasAnggota2"
              name="fakultas2"
              required
            >
              <option selected disabled value="">Pilih Fakultas</option>
              <option value="Fakultas Keguruan dan Ilmu Pendidikan">
                Fakultas Keguruan dan Ilmu Pendidikan
              </option>
              <option value="Fakultas Ekonomi dan Bisnis">
                Fakultas Ekonomi dan Bisnis
              </option>
              <option value="Fakultas Teknik Industri dan Informatika">
                Fakultas Teknik Industri dan Informatika
              </option>
              <option value="Fakultas Ilmu Ilmu Kesehatan">
                Fakultas Ilmu Ilmu Kesehatan
              </option>
              <option value="Fakultas Ilmu Sosial dan Ilmu Politik">
                Fakultas Ilmu Sosial dan Ilmu Politik
              </option>
              <option value="Fakultas Farmasi dan Sains">
                Fakultas Farmasi dan Sains
              </option>
              <option value="Fakultas Agama Islam">Fakultas Agama Islam</option>
              <option value="Fakultas Psikologi">Fakultas Psikologi</option>
              <option value="Fakultas Kedokteran">Fakultas Kedokteran</option>
            </select>
          </div>

          <div class="mb-3">
            <h3 class="mb-5 mt-5">Anggota 3</h3>
            <label for="nimAnggota3" class="form-label">Nim Anggota 3</label>
            <input
              type="text"
              class="form-control"
              id="nimAnggota3"
              name="nim3"
              pattern="^(22|23|24)[0-9]*"
              required
              title="Nomor induk must start with 22, 23, or 24"
            />
          </div>

          <div class="mb-3">
            <label for="namaAnggota3" class="form-label">Nama Anggota 3</label>
            <input
              type="text"
              class="form-control"
              id="namaAnggota3"
              name="nama3"
              required
            />
          </div>

          <div class="mb-3">
            <label for="semesterAnggota3" class="form-label"
              >Semester Anggota 3</label
            >
            <select class="form-control" id="semester" name="semester3" required>
              <option value="" disabled selected>Pilih Semester</option>
              <option value="1">Semester 1</option>
              <option value="3">Semester 3</option>
              <option value="5">Semester 5</option>
            </select>
          </div>

          <div class="mb-3">
            <label for="jenisKelaminAnggota3" class="form-label"
              >Jenis Kelamin Anggota 3</label
            >
            <select
              class="form-control"
              id="jenisKelaminAnggota3"
              name="kelamin3"
              required
            >
              <option value="" disabled selected>Pilih Jenis Kelamin</option>
              <option value="Laki-Laki">Laki-Laki</option>
              <option value="Perempuan">Perempuan</option>
            </select>
          </div>

          <div class="mb-3">
            <label for="emailAnggota3" class="form-label"
              >Email Anggota 3</label
            >
            <input
              type="email"
              class="form-control"
              id="emailAnggota3"
              name="email3"
              required
            />
          </div>

          <div class="mb-3">
            <label for="nomorTeleponAnggota3" class="form-label"
              >Nomor Whatsapp Anggota 3</label
            >
            <input
              type="text"
              class="form-control"
              id="nomorTeleponAnggota3"
              name="telepon3"
              placeholder="e.g. 628x"
              pattern="62[0-9]*"
              required
              title="Please enter a valid number starting with 62"
            />
          </div>

          <div class="mb-3">
            <label for="alamatAnggota3" class="form-label"
              >Alamat Anggota 3</label
            >
            <input
              type="text"
              class="form-control"
              id="alamatAnggota3"
              name="alamat3"
              required
            />
          </div>

          <div class="mb-3">
            <label for="programStudiAnggota3" class="form-label"
              >Program Studi Anggota 3</label
            >
            <select
              class="form-control"
              id="programStudiAnggota3"
              name="studi3"
              required
            >
              <option value="" disabled selected>Pilih Program Studi</option>
              <option value="Bimbingan dan Konseling">
                Bimbingan dan Konseling
              </option>
              <option value="PG.PAUD">PG.PAUD</option>
              <option value="PGSD">PGSD</option>
              <option value="Pendidikan Bahasa Inggris">
                Pendidikan Bahasa Inggris
              </option>
              <option value="Pendidikan Bahasa Jepang">
                Pendidikan Bahasa Jepang
              </option>
              <option value="Pendidikan Bahasa dan Sastra Indonesia">
                Pendidikan Bahasa dan Sastra Indonesia
              </option>
              <option value="Pendidikan Biologi">Pendidikan Biologi</option>
              <option value="Pendidikan Ekonomi">Pendidikan Ekonomi</option>
              <option value="Pendidikan Fisika">Pendidikan Fisika</option>
              <option value="Pendidikan Geografi">Pendidikan Geografi</option>
              <option value="Pendidikan Matematika">
                Pendidikan Matematika
              </option>
              <option value="Pendidikan Sejarah">Pendidikan Sejarah</option>
              <option value="Akuntansi">Akuntansi</option>
              <option value="Manajemen">Manajemen</option>
              <option value="Ekonomi Islam">Ekonomi Islam</option>
              <option value="Perpajakan">Perpajakan</option>
              <option value="Teknik Elektro">Teknik Elektro</option>
              <option value="Teknik Mesin">Teknik Mesin</option>
              <option value="Teknik Informatika">Teknik Informatika</option>
              <option value="Sistem dan Teknologi Informasi">
                Sistem dan Teknologi Informasi
              </option>
              <option value="Teknologi Rekayasa Mekatronika">
                Teknologi Rekayasa Mekatronika
              </option>
              <option value="Kesehatan Masyarakat">Kesehatan Masyarakat</option>
              <option value="Gizi">Gizi</option>
              <option value="Jurnalistik">Jurnalistik</option>
              <option value="Periklanan">Periklanan</option>
              <option value="Penyiaran">Penyiaran</option>
              <option value="Kehumasan">Kehumasan</option>
              <option value="Manajemen Komunikasi">Manajemen Komunikasi</option>
              <option value="Sarjana Farmasi">Sarjana Farmasi</option>
              <option value="Analis Kesehatan / TLM">
                Analis Kesehatan / TLM
              </option>
              <option value="Agama Islam">Agama Islam</option>
              <option value="Psikologi">Psikologi</option>
              <option value="Kedokteran">Kedokteran</option>
            </select>
          </div>

          <div class="mb-3">
            <label for="fakultasAnggota3" class="form-label"
              >Fakultas Anggota 3</label
            >
            <select
              class="form-control"
              id="fakultasAnggota3"
              name="fakultas3"
              required
            >
              <option value="" disabled selected>Pilih Fakultas</option>
              <option value="Fakultas Keguruan dan Ilmu Pendidikan">
                Fakultas Keguruan dan Ilmu Pendidikan
              </option>
              <option value="Fakultas Ekonomi dan Bisnis">
                Fakultas Ekonomi dan Bisnis
              </option>
              <option value="Fakultas Teknik Industri dan Informatika">
                Fakultas Teknik Industri dan Informatika
              </option>
              <option value="Fakultas Ilmu Ilmu Kesehatan">
                Fakultas Ilmu Ilmu Kesehatan
              </option>
              <option value="Fakultas Ilmu Sosial dan Ilmu Politik">
                Fakultas Ilmu Sosial dan Ilmu Politik
              </option>
              <option value="Fakultas Farmasi dan Sains">
                Fakultas Farmasi dan Sains
              </option>
              <option value="Fakultas Agama Islam">Fakultas Agama Islam</option>
              <option value="Fakultas Psikologi">Fakultas Psikologi</option>
              <option value="Fakultas Kedokteran">Fakultas Kedokteran</option>
            </select>
          </div>

          <div class="mb-3">
            <h3 class="mb-5 mt-5">Anggota 4</h3>
            <label for="nimAnggota4" class="form-label">Nim Anggota 4</label>
            <input
              type="text"
              class="form-control"
              id="nimAnggota4"
              name="nim4"
              pattern="^(22|23|24)[0-9]*"
              required
              title="Nomor induk must start with 22, 23, or 24"
            />
          </div>

          <div class="mb-3">
            <label for="namaAnggota4" class="form-label">Nama Anggota 4</label>
            <input
              type="text"
              class="form-control"
              id="namaAnggota4"
              name="nama4"
              required
            />
          </div>

          <div class="mb-3">
            <label for="semesterAnggota4" class="form-label"
              >Semester Anggota 4</label
            >
            <select class="form-control" id="semester" name="semester4" required>
              <option value="" disabled selected>Pilih Semester</option>
              <option value="1">Semester 1</option>
              <option value="3">Semester 3</option>
              <option value="5">Semester 5</option>
            </select>
          </div>

          <div class="mb-3">
            <label for="jenisKelaminAnggota4" class="form-label"
              >Jenis Kelamin Anggota 4</label
            >
            <select
              class="form-control"
              id="jenisKelaminAnggota4"
              name="kelamin4"
              required
            >
              <option value="" selected disabled>Pilih Jenis Kelamin</option>
              <option value="Laki-Laki">Laki-Laki</option>
              <option value="Perempuan">Perempuan</option>
            </select>
          </div>

          <div class="mb-3">
            <label for="emailAnggota4" class="form-label"
              >Email Anggota 4</label
            >
            <input
              type="email"
              class="form-control"
              id="emailAnggota4"
              name="email4"
              required
            />
          </div>

          <div class="mb-3">
            <label for="nomorTeleponAnggota4" class="form-label"
              >Nomor Whatsapp Anggota 4</label
            >
            <input
              type="tel"
              class="form-control"
              id="nomorTeleponAnggota4"
              name="telepon4"
              placeholder="e.g. 628x"
              pattern="[0-9]+"
              required
              title="Please enter a valid number"
            />
          </div>

          <div class="mb-3">
            <label for="alamatAnggota4" class="form-label"
              >Alamat Anggota 4</label
            >
            <input
              type="text"
              class="form-control"
              id="alamatAnggota4"
              name="alamat4"
              required
            />
          </div>

          <div class="mb-3">
            <label for="programStudiAnggota4" class="form-label"
              >Program Studi Anggota 4</label
            >
            <select
              class="form-control"
              id="programStudiAnggota4"
              name="studi4"
              required
            >
              <option selected disabled value="">Pilih Program Studi</option>
              <option value="Bimbingan dan Konseling">
                Bimbingan dan Konseling
              </option>
              <option value="PG.PAUD">PG.PAUD</option>
              <option value="PGSD">PGSD</option>
              <option value="Pendidikan Bahasa Inggris">
                Pendidikan Bahasa Inggris
              </option>
              <option value="Pendidikan Bahasa Jepang">
                Pendidikan Bahasa Jepang
              </option>
              <option value="Pendidikan Bahasa dan Sastra Indonesia">
                Pendidikan Bahasa dan Sastra Indonesia
              </option>
              <option value="Pendidikan Biologi">Pendidikan Biologi</option>
              <option value="Pendidikan Ekonomi">Pendidikan Ekonomi</option>
              <option value="Pendidikan Fisika">Pendidikan Fisika</option>
              <option value="Pendidikan Geografi">Pendidikan Geografi</option>
              <option value="Pendidikan Matematika">
                Pendidikan Matematika
              </option>
              <option value="Pendidikan Sejarah">Pendidikan Sejarah</option>
              <option value="Akuntansi">Akuntansi</option>
              <option value="Manajemen">Manajemen</option>
              <option value="Ekonomi Islam">Ekonomi Islam</option>
              <option value="Perpajakan">Perpajakan</option>
              <option value="Teknik Elektro">Teknik Elektro</option>
              <option value="Teknik Mesin">Teknik Mesin</option>
              <option value="Teknik Informatika">Teknik Informatika</option>
              <option value="Sistem dan Teknologi Informasi">
                Sistem dan Teknologi Informasi
              </option>
              <option value="Teknologi Rekayasa Mekatronika">
                Teknologi Rekayasa Mekatronika
              </option>
              <option value="Kesehatan Masyarakat">Kesehatan Masyarakat</option>
              <option value="Gizi">Gizi</option>
              <option value="Jurnalistik">Jurnalistik</option>
              <option value="Periklanan">Periklanan</option>
              <option value="Penyiaran">Penyiaran</option>
              <option value="Kehumasan">Kehumasan</option>
              <option value="Manajemen Komunikasi">Manajemen Komunikasi</option>
              <option value="Sarjana Farmasi">Sarjana Farmasi</option>
              <option value="Analis Kesehatan / TLM">
                Analis Kesehatan / TLM
              </option>
              <option value="Agama Islam">Agama Islam</option>
              <option value="Psikologi">Psikologi</option>
              <option value="Kedokteran">Kedokteran</option>
            </select>
          </div>

          <div class="mb-3">
            <label for="fakultasAnggota4" class="form-label"
              >Fakultas Anggota 4</label
            >
            <select
              class="form-control"
              id="fakultasAnggota4"
              name="fakultas4"
              required
            >
              <option selected disabled value="">Pilih Fakultas</option>
              <option value="Fakultas Keguruan dan Ilmu Pendidikan">
                Fakultas Keguruan dan Ilmu Pendidikan
              </option>
              <option value="Fakultas Ekonomi dan Bisnis">
                Fakultas Ekonomi dan Bisnis
              </option>
              <option value="Fakultas Teknik Industri dan Informatika">
                Fakultas Teknik Industri dan Informatika
              </option>
              <option value="Fakultas Ilmu Ilmu Kesehatan">
                Fakultas Ilmu Ilmu Kesehatan
              </option>
              <option value="Fakultas Ilmu Sosial dan Ilmu Politik">
                Fakultas Ilmu Sosial dan Ilmu Politik
              </option>
              <option value="Fakultas Farmasi dan Sains">
                Fakultas Farmasi dan Sains
              </option>
              <option value="Fakultas Agama Islam">Fakultas Agama Islam</option>
              <option value="Fakultas Psikologi">Fakultas Psikologi</option>
              <option value="Fakultas Kedokteran">Fakultas Kedokteran</option>
            </select>
          </div>

          <button type="submit" class="btn btn-primary">
            Daftarkan Kelompok
          </button>
        </form>
      </div>
    </div>
  `;
    });
  </script>
  <script>
    // Data kuota dosen
    const dosenData = `<%= dosen %>`

    function convertDataDosen(data) {
      // console.log('data:', data);
      // console.log('typeof data:', typeof data);
      if (!data || data.length === 0) return {};
      const result = {};
      data.forEach((dosen) => {
        result[dosen.nomor_induk] = {
          name: dosen.nama,
          quota: dosen.kuota
        };
      });
      return result;
    }
    let datas = convertDataDosen(JSON.parse(`<%- JSON.stringify(dosen).replace(/"/g, '\\"') %>`))
    // console.log(datas)

    // Fungsi untuk menampilkan kuota dosen
    function showDosenQuota(dosenID) {
      if (dosenID) {
        const dosen = datas[dosenID];
        document.getElementById("dosenName").innerText = dosen.name;
        document.getElementById("dosenQuota").innerText = dosen.quota;
        document.getElementById("dosenQuotaTable").classList.remove("d-none");
      } else {
        document.getElementById("dosenQuotaTable").classList.add("d-none");
      }
    }
  </script>

  <script>document.getElementById("revisi-kelompok-link").addEventListener("click", function () {
      const contentArea = document.getElementById("content");
      contentArea.innerHTML = `
    <div class="card mb-2">
      <div class="card-header">Revisi Kelompok</div>
      <div class="card-body">
        <% if (kelompokInfo[0] && (kelompokInfo[0].accdospem == 0 || kelompokInfo[0].accdospem == null)) {%>
        <form action="/edit-kelompok" method="post" enctype="multipart/form-data">
        <div class="mb-3">
          <label for="groupName" class="form-label"><strong>Judul</strong></label>
          <input
            type="text"
            class="form-control"
            id="groupName"
            name="revisijudul"
            required
          />
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
        </form>
        <hr>
        <% } %>

        <% if (kelompokInfo[0] && kelompokInfo[0].accdospem == 0 && kelompokInfo[0].acckaprodi == null) {%>
          <form action="/edit-dospem" method="post" enctype="multipart/form-data">
          <div class="mb-3">
            <label for="leaderName" class="form-label"><strong>Dosen Pembimbing</strong></label>
            <select
              class="form-select"
              id="leaderName"
              aria-label="Dosen Pembimbing"
              name="revisidospem"
              onchange="showDosenQuota(this.value)"
              required
            >
              <option value="" selected disabled>Pilih Dosen Pembimbing</option>
              <% for(var i = 0; i < dosen.length; i++) { %>
                <option value="<%= dosen[i].nomor_induk %>"><%= dosen[i].nama %></option>
              <% } %>
              <!-- Tambahkan semua dosen lainnya seperti contoh di atas -->
            </select>
          </div>

          <!-- Tabel untuk menampilkan kuota dosen -->
          <div id="dosenQuotaTable" class="mt-4 d-none">
            <table class="table table-bordered">
              <thead>
                <tr>
                  <th>Nama Dosen</th>
                  <th>Jumlah Kuota Tersisa</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td id="dosenName"></td>
                  <td id="dosenQuota"></td>
                </tr>
              </tbody>
            </table>
          </div>
          <button type="submit" class="btn btn-primary">Submit</button>
          </form>
          <hr>
        <% } %>

        <% if (kelompokInfo[0] && JSON.parse(kelompokInfo[0].anggota).length < 4) { %>
          <div class="accordion mb-2" id="accordionAnggota">
            <div class="accordion-item">
              <h2 class="accordion-header">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"><strong>Daftar Anggota Baru</strong></button>
              </h2>
              <div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionAnggota">
                <div class="accordion-body">
                  <form action="/new-anggota" method="post" enctype="multipart/form-data">
                    <div class="mb-2">
                      <label for="nimAnggota1" class="form-label">Nim Anggota</label>
                      <input type="text" class="form-control" id="nimAnggota1" name="nim" pattern="^(22|23|24)[0-9]*" required title="Nomor induk must start with 22, 23, or 24"/>
                    </div>
                    <div class=" mb-2">
                      <label for="namaAnggota1" class="form-label">Nama Anggota</label>
                      <input type="text" class="form-control" id="namaAnggota1" name="nama" required />
                    </div>
                    <div class="mb-2">
                      <label for="semesterAnggota1" class="form-label">Semester Anggota</label>
                      <select class="form-control" id="semester" name="semester" required>
                        <option value="" disabled selected>Pilih Semester</option>
                        <option value="1">Semester 1</option>
                        <option value="3">Semester 3</option>
                        <option value="5">Semester 5</option>
                      </select>
                    </div>
                    <div class="mb-2">
                      <label for="jenisKelaminAnggota1" class="form-label">Jenis Kelamin Anggota</label>
                      <select class="form-control" id="jenisKelaminAnggota1" name="kelamin" required>
                        <option value="" selected disabled>Pilih Jenis Kelamin</option>
                        <option value="Laki-Laki">Laki-Laki</option>
                        <option value="Perempuan">Perempuan</option>
                      </select>
                    </div>
                    <div class="mb-2">
                      <label for="emailAnggota1" class="form-label">Email Anggota</label>
                      <input type="email" class="form-control" id="emailAnggota1" name="email" required />
                    </div>
                    <div class="mb-2">
                      <label for="nomorTelepon" class="form-label">Nomor Whatsapp</label>
                      <input type="tel" class="form-control" id="nomorTelepon" name="telepon" placeholder="e.g. 628x" pattern="62[0-9]+" required title="Nomor Whatsapp harus dimulai dengan 62 dan diikuti oleh angka lainnya" />
                    </div>
                    <div class="mb-2">
                      <label for="alamat" class="form-label">Alamat</label>
                      <input type="text" class="form-control" id="alamat" name="alamat" required />
                    </div>
                    <div class="mb-2">
                      <label for="programStudi" class="form-label">Program Studi Anggota</label>
                      <select class="form-control" id="programStudi" name="studi" required>
                        <option selected disabled value="">Pilih Program Studi</option>
                        <option value="Bimbingan dan Konseling"> Bimbingan dan Konseling </option>
                        <option value="PG.PAUD">PG.PAUD</option>
                        <option value="PGSD">PGSD</option>
                        <option value="Pendidikan Bahasa Inggris"> Pendidikan Bahasa Inggris </option>
                        <option value="Pendidikan Bahasa Jepang"> Pendidikan Bahasa Jepang </option>
                        <option value="Pendidikan Bahasa dan Sastra Indonesia"> Pendidikan Bahasa dan Sastra Indonesia </option>
                        <option value="Pendidikan Biologi">Pendidikan Biologi</option>
                        <option value="Pendidikan Ekonomi">Pendidikan Ekonomi</option>
                        <option value="Pendidikan Fisika">Pendidikan Fisika</option>
                        <option value="Pendidikan Geografi">Pendidikan Geografi</option>
                        <option value="Pendidikan Matematika"> Pendidikan Matematika </option>
                        <option value="Pendidikan Sejarah">Pendidikan Sejarah</option>
                        <option value="Akuntansi">Akuntansi</option>
                        <option value="Manajemen">Manajemen</option>
                        <option value="Ekonomi Islam">Ekonomi Islam</option>
                        <option value="Perpajakan">Perpajakan</option>
                        <option value="Teknik Elektro">Teknik Elektro</option>
                        <option value="Teknik Mesin">Teknik Mesin</option>
                        <option value="Teknik Informatika">Teknik Informatika</option>
                        <option value="Sistem dan Teknologi Informasi"> Sistem dan Teknologi Informasi </option>
                        <option value="Teknologi Rekayasa Mekatronika"> Teknologi Rekayasa Mekatronika </option>
                        <option value="Kesehatan Masyarakat">Kesehatan Masyarakat</option>
                        <option value="Gizi">Gizi</option>
                        <option value="Jurnalistik">Jurnalistik</option>
                        <option value="Periklanan">Periklanan</option>
                        <option value="Penyiaran">Penyiaran</option>
                        <option value="Kehumasan">Kehumasan</option>
                        <option value="Manajemen Komunikasi">Manajemen Komunikasi</option>
                        <option value="Sarjana Farmasi">Sarjana Farmasi</option>
                        <option value="Analis Kesehatan / TLM"> Analis Kesehatan / TLM </option>
                        <option value="Agama Islam">Agama Islam</option>
                        <option value="Psikologi">Psikologi</option>
                        <option value="Kedokteran">Kedokteran</option>
                      </select>
                    </div>
                    <div class="mb-3">
                      <label for="fakultas" class="form-label">Fakultas Anggota</label>
                      <select class="form-control" id="fakultas" name="fakultas" required>
                        <option selected disabled value="">Pilih Fakultas</option>
                        <option value="Fakultas Keguruan dan Ilmu Pendidikan"> Fakultas Keguruan dan Ilmu Pendidikan </option>
                        <option value="Fakultas Ekonomi dan Bisnis"> Fakultas Ekonomi dan Bisnis </option>
                        <option value="Fakultas Teknik Industri dan Informatika"> Fakultas Teknik Industri dan Informatika </option>
                        <option value="Fakultas Ilmu Ilmu Kesehatan"> Fakultas Ilmu Ilmu Kesehatan </option>
                        <option value="Fakultas Ilmu Sosial dan Ilmu Politik"> Fakultas Ilmu Sosial dan Ilmu Politik </option>
                        <option value="Fakultas Farmasi dan Sains"> Fakultas Farmasi dan Sains </option>
                        <option value="Fakultas Agama Islam">Fakultas Agama Islam</option>
                        <option value="Fakultas Psikologi">Fakultas Psikologi</option>
                        <option value="Fakultas Kedokteran">Fakultas Kedokteran</option>
                      </select>
                    </div>
                    <button type="submit" class="btn btn-primary">
                      Daftarkan Anggota
                    </button>
                  </form>
                </div>
              </div>
            </div>
          </div>
        <% } %>
      </div>
    </div>


    <div class="card mb-4">
      <div class="card-header">Detail Kelompok</div>
      <div class="card-body">
        <ul class="list-group">
          <li class="list-group-item">
            <strong>Kode Kelompok:</strong> <%= kelompokInfo[0] ? kelompokInfo[0].code : '' %>
          </li>
          <li class="list-group-item">
            <strong>Judul Kelompok:</strong> <%= kelompokInfo[0] ? kelompokInfo[0].judul : '' %>
          </li>
          <li class="list-group-item">
            <strong>Nama Kelompok:</strong> <%= kelompokInfo[0] ? kelompokInfo[0].nama : '' %>
          </li>
          <li class="list-group-item">
            <strong>Skema:</strong> <%= kelompokInfo[0] ? kelompokInfo[0].skema : '' %>
          </li>
          <li class="list-group-item">
            <strong>Status Acc Dospem:</strong>
            <span class="badge <%= kelompokInfo[0] && kelompokInfo[0].accdospem == null ? 'bg-secondary' : (kelompokInfo[0] && kelompokInfo[0].accdospem == 1 ? 'bg-success' : 'bg-danger') %>">
              <%= kelompokInfo[0] && kelompokInfo[0].accdospem == null ? 'Belum Ada' : (kelompokInfo[0] && kelompokInfo[0].accdospem == 1 ? 'Diterima' : 'Ditolak') %>
            </span>
          </li>
          <li class="list-group-item">
            <strong>Status Acc Kaprodi:</strong>
            <span class="badge <%= kelompokInfo[0] && kelompokInfo[0].acckaprodi == null ? 'bg-secondary' : (kelompokInfo[0] && kelompokInfo[0].acckaprodi == 1 ? 'bg-success' : 'bg-danger') %>">
              <%= kelompokInfo[0] && kelompokInfo[0].acckaprodi == null ? 'Belum Ada' : (kelompokInfo[0] && kelompokInfo[0].acckaprodi == 1 ? 'Diterima' : 'Ditolak') %>
            </span>
          </li>
          <li class="list-group-item">
            <strong>Status Lulus:</strong>
            <span class="badge <%= kelompokInfo[0] && kelompokInfo[0].lulus === null ? 'bg-secondary' : (kelompokInfo[0] && kelompokInfo[0].lulus == 1 ? 'bg-success' : 'bg-danger') %>">
              <%= kelompokInfo[0] && kelompokInfo[0].lulus == null ? 'Belum Ada' : (kelompokInfo[0] && kelompokInfo[0].lulus == 1 ? 'Lulus' : 'Tidak Lulus') %>
            </span>
          </li>
        </ul>
      </div>

      <div class="card-body">
        <ul class="list-group">
          <li class="list-group-item">
            <strong>Dosen Pembimbing:</strong> <%= kelompokUser[0] && kelompokUser[0][0] ? kelompokUser[0][0].nama + ' (' + kelompokUser[0][0].nomor_induk + ')' : '' %>
          </li>
          <li class="list-group-item">
            <strong>Ketua kelompok:</strong> <%= kelompokUser[0] && kelompokUser[0][1] ? kelompokUser[0][1].nama + ' (' + kelompokUser[0][1].nomor_induk + ')' : '' %>
          </li>
          <li class="list-group-item">
            <form action="/drop-anggota" method="post" enctype="multipart/form-data">
              <span>
                <strong>Anggota kelompok 1:</strong> <%= kelompokUser[0] && kelompokUser[0][2] ? kelompokUser[0][2].nama + ' (' + kelompokUser[0][2].nomor_induk + ')' : '' %>  
              </span>
              <input type="hidden" name="code" value="<%= kelompokInfo[0] ? kelompokInfo[0].code : '' %>">
              <input type="hidden" name="nim" value="<%= kelompokUser[0] && kelompokUser[0][2] ? kelompokUser[0][2].nomor_induk : '' %>">
              <button type="submit" class="btn btn-danger btn-sm float-end alert-button-hapus">Hapus</button>
            </form>
          </li>
          <li class="list-group-item">
            <form action="/drop-anggota" method="post" enctype="multipart/form-data">
              <span>
                <strong>Anggota kelompok 2:</strong> <%= kelompokUser[0] && kelompokUser[0][3] ? kelompokUser[0][3].nama + ' (' + kelompokUser[0][3].nomor_induk + ')' : '' %>  
              </span>
              <input type="hidden" name="code" value="<%= kelompokInfo[0] ? kelompokInfo[0].code : '' %>">
              <input type="hidden" name="nim" value="<%= kelompokUser[0] && kelompokUser[0][3] ? kelompokUser[0][3].nomor_induk : '' %>">
              <button type="submit" class="btn btn-danger btn-sm float-end alert-button-hapus">Hapus</button>
            </form>
          </li>
          <li class="list-group-item">
            <form action="/drop-anggota" method="post" enctype="multipart/form-data">
              <span>
                <strong>Anggota kelompok 3:</strong> <%= kelompokUser[0] && kelompokUser[0][4] ? kelompokUser[0][4].nama + ' (' + kelompokUser[0][4].nomor_induk + ')' : '' %>  
              </span>
              <input type="hidden" name="code" value="<%= kelompokInfo[0] ? kelompokInfo[0].code : '' %>">
              <input type="hidden" name="nim" value="<%= kelompokUser[0] && kelompokUser[0][4] ? kelompokUser[0][4].nomor_induk : '' %>">
              <button type="submit" class="btn btn-danger btn-sm float-end alert-button-hapus">Hapus</button>
            </form>
          </li>
          <li class="list-group-item">
            <form action="/drop-anggota" method="post" enctype="multipart/form-data">
              <span>
                <strong>Anggota kelompok 4:</strong> <%= kelompokUser[0] && kelompokUser[0][5] ? kelompokUser[0][5].nama + ' (' + kelompokUser[0][5].nomor_induk + ')' : '' %>
              </span>
              <input type="hidden" name="code" value="<%= kelompokInfo[0] ? kelompokInfo[0].code : '' %>">
              <input type="hidden" name="nim" value="<%= kelompokUser[0] && kelompokUser[0][5] ? kelompokUser[0][5].nomor_induk : '' %>">
              <button type="submit" class="btn btn-danger btn-sm float-end alert-button-hapus">Hapus</button>
            </form>
          </li>
        </ul>
      </div>
      
    </div>
  `;
  document.querySelectorAll('.alert-button-hapus').forEach(button => {
    button.addEventListener('click', function(event) {
      event.preventDefault(); // Mencegah form submit secara otomatis
      Swal.fire({
        title: 'Hapus Anggota?',
        text: 'Apakah Anda yakin ingin menghapus anggota ini?',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonText: 'Hapus',
        cancelButtonText: 'Batal'
      }).then((result) => {
        if (result.isConfirmed) {
          // Jika user mengklik tombol "Hapus", maka submit form
          this.form.submit();
        }
      });
    });
  });
    });
  </script>
  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

  <script>document.getElementById("profile-link").addEventListener("click", function () {
      const contentArea = document.getElementById("content");
      contentArea.innerHTML = `
       <div class="container">
    <div class="bg-body-tertiary">
    <div class="row justify-content-center">
      <!-- Profile Section -->
      <div class="col-md-4 border-right">
        <div class="d-flex flex-column align-items-center text-center p-3 py-5">
          <img class="rounded-circle mt-5" width="150px" src="/assets/foto/<%= userInfo.foto %>">
          <span class="font-weight-bold"><%= userInfo.nama %></span>
          <span></span>
        </div>
      </div>
      <!-- Settings and Content Section -->
      <div class="col-md-8">
        <!-- Navigation -->
        <nav class="nav">
          <a class="nav-link active" aria-current="page" href="#" onclick="showContent('profile-settings')">Biodata</a>
          <a class="nav-link" href="#" onclick="showContent('edit-link')">Edit Biodata</a>
          <a class="nav-link" href="#" onclick="showContent('ubah-link')">Ubah Password</a>
        </nav>
        <!-- Profile Settings Content -->
        <div id="profile-settings" class="profile-content active-content">
          <div class="p-3 py-5">
            <div class="d-flex justify-content-between align-items-center mb-3">
              <h4 class="text-right">Pengaturan Profile</h4>
            </div>
            <div class="row mt-3">
              <div class="container text-start p-3">
                <!-- Tambahkan padding pada container -->
                <div class="row mb-3">
                  <div class="col-lg-3 col-md-4 label">NIM</div>
                  <div class="col-lg-9 col-md-8"><%= userInfo.nomor_induk %></div>
                </div>
                <div class="row mb-3">
                  <div class="col-lg-3 col-md-4 label">Nama Lengkap</div>
                  <div class="col-lg-9 col-md-8"><%= userInfo.nama %></div>
                </div>
                <div class="row mb-3">
                  <div class="col-lg-3 col-md-4 label">Jenis Kelamin</div>
                  <div class="col-lg-9 col-md-8"><%= userInfo.jenis_kelamin %></div>
                </div>
                <div class="row mb-3">
                  <div class="col-lg-3 col-md-4 label">Semester</div>
                  <div class="col-lg-9 col-md-8"><%= userInfo.semester %></div>
                </div>
                <div class="row mb-3">
                  <div class="col-lg-3 col-md-4 label">Program Studi</div>
                  <div class="col-lg-9 col-md-8"><%= userInfo.program_studi %></div>
                </div>
                <div class="row mb-3">
                  <div class="col-lg-3 col-md-4 label">Email</div>
                  <div class="col-lg-9 col-md-8"><%= userInfo.email %></div>
                </div>
                <div class="row mb-3">
                  <div class="col-lg-3 col-md-4 label">No Whatsapp</div>
                  <div class="col-lg-9 col-md-8"><%= userInfo.no_telpon %></div>
                </div>
                <div class="row mb-3">
                  <div class="col-lg-3 col-md-4 label">Alamat Lengkap</div>
                  <div class="col-lg-9 col-md-8"><%= userInfo.alamat %></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- Edit Biodata Content -->
        <div id="edit-link" class="profile-content d-none">
          <div class="p-3 py-5">
            <div class="d-flex justify-content-between align-items-center mb-3">
              <h4 class="text-right">Edit Profile</h4>
            </div>
            
              <div class="row mt-3">
                <form action="/edit-profile" method="post" enctype="multipart/form-data">
                <div class="container mb-2">
                  <div class="row align-items-center">
                    <div class="col-md-3">
                      <label for="formFile" class="form-label mb-0">Ganti Profile</label>
                    </div>
                    <div class="col-md-9">
                      <input class="form-control" type="file" id="formFile" accept="image/*" name="foto">
                    </div>
                  </div>
                </div>
                <div class="container mb-2">
                  <div class="row align-items-center">
                    <div class="col-md-3">
                      <label class="form-label mb-0">NIM</label>
                    </div>
                    <div class="col-md-9">
                      <input type="text" class="form-control" placeholder="Masukan NIM" name="nim" value="<%= userInfo.nomor_induk %>" required pattern="[0-9]*">
                    </div>
                  </div>
                </div>
                <div class="container mb-2">
                  <div class="row align-items-center">
                    <div class="col-md-3">
                      <label class="form-label mb-0">Nama Lengkap</label>
                    </div>
                    <div class="col-md-9">
                      <input type="text" class="form-control" placeholder="Masukan Nama Lengkap" name="nama" value="<%= userInfo.nama %>" required>
                    </div>
                  </div>
                </div>
                <div class="container mb-2">
                  <div class="row align-items-center">
                    <div class="col-md-3">
                      <label class="form-label mb-0">Jenis Kelamin</label>
                    </div>
                    <div class="col-md-9">
                      <input type="text" class="form-control" placeholder="Masukan Jenis Kelamin" name="kelamin" value="<%= userInfo.jenis_kelamin %>" required>
                    </div>
                  </div>
                </div>
                <div class="container mb-2">
                  <div class="row align-items-center">
                    <div class="col-md-3">
                      <label class="form-label mb-0">Semester</label>
                    </div>
                    <div class="col-md-9">
                      <input type="text" class="form-control" placeholder="Masukan Semester" name="semester" value="<%= userInfo.semester %>" required pattern="[0-9]*">
                    </div>
                  </div>
                </div>
                <div class="container mb-2">
                  <div class="row align-items-center">
                    <div class="col-md-3">
                      <label class="form-label mb-0">Program Studi</label>
                    </div>
                    <div class="col-md-9">
                      <input type="text" class="form-control" placeholder="Masukan Program Studi" name="studi" value="<%= userInfo.program_studi %>" required>
                    </div>
                  </div>
                </div>
                <div class="container mb-2">
                  <div class="row align-items-center">
                    <div class="col-md-3">
                      <label class="form-label mb-0">Email</label>
                    </div>
                    <div class="col-md-9">
                      <input type="text" class="form-control" placeholder="Masukan Email" name="email" value="<%= userInfo.email %>" required>
                    </div>
                  </div>
                </div>
                <div class="container mb-2">
                  <div class="row align-items-center">
                    <div class="col-md-3">
                      <label class="form-label mb-0">Nomor Whatsapp</label>
                    </div>
                    <div class="col-md-9">
                      <input type="text" class="form-control" placeholder="Masukan Nomor Whatsapp" name="telepon" value="<%= userInfo.no_telpon %>" required pattern="62[0-9]*">
                    </div>
                  </div>
                </div>
                <div class="container mb-2">
                  <div class="row align-items-center">
                    <div class="col-md-3">
                      <label class="form-label mb-0">Alamat Lengkap</label>
                    </div>
                    <div class="col-md-9">
                      <input type="text" class="form-control" placeholder="Masukan Alamat Lengkap" name="alamat" value="<%= userInfo.alamat %>" required>
                    </div>
                  </div>
                </div>
                <div class="mt-5 text-center">
                  <button class="btn btn-primary profile-button" type="submit">Simpan Profile</button>
                </div>
                </form>
              </div>
              
            
          </div>
        </div>
        <!-- Ubah Password Content -->
        <div id="ubah-link" class="profile-content d-none">
          <div class="p-3 py-5">
            <div class="d-flex justify-content-between align-items-center mb-3">
              <h4 class="text-right">Ubah Password</h4>
            </div>
            <div class="row mt-3">
              <form action="/edit-password" method="post" enctype="multipart/form-data">
                <div class="row align-items-center mb-3">
                  <div class="col-md-3">
                    <label class="form-label mb-0">Password Lama</label>
                  </div>
                  <div class="col-md-9">
                    <input type="password" class="form-control" placeholder="Masukan Password Lama" value="" name="passwordlama" required>
                  </div>
                </div>
                <div class="row align-items-center mb-3">
                  <div class="col-md-3">
                    <label class="form-label mb-0">Password Baru</label>
                  </div>
                  <div class="col-md-9">
                    <input type="password" class="form-control" placeholder="Masukan Password Baru" value="" name="passwordbaru" required pattern=".{6,9}" title="Password must be between 6 and 9 characters">
                  </div>
                </div>
                <div class="row align-items-center mb-3">
                  <div class="col-md-3">
                    <label class="form-label mb-0">Ulangi Password Baru</label>
                  </div>
                  <div class="col-md-9">
                    <input type="password" class="form-control" placeholder="Masukan Password Baru" value="" name="passwordbarufix" required>
                  </div>
                </div>
                <div class="mt-5 text-center">
                  <button class="btn btn-primary profile-button" type="submit">Simpan Password</button>
                </div>
              </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
  `;
    });
  </script>
  <script>
    function showContent(id) {
        // Sembunyikan semua konten
        const contents = document.querySelectorAll('.profile-content');
        contents.forEach(content => content.classList.add('d-none'));

        // Tampilkan konten yang dipilih
        const activeContent = document.getElementById(id);
        activeContent.classList.remove('d-none');

        // Atur ulang link aktif
        const links = document.querySelectorAll('.nav-link');
        links.forEach(link => link.classList.remove('active'));
        document.querySelector(`[onclick="showContent('${id}')"]`).classList.add('active');
    }
</script>


  <script>document.getElementById("laporan-link").addEventListener("click", function () {
      const contentArea = document.getElementById("content");
      contentArea.innerHTML = `
      <div class="card mb-4">
      <div class="card-header">Laporan Kemajuan 1</div>
      <div class="card-body">
        <form
          action="/upload-laporansatu"
          method="post"
          enctype="multipart/form-data"
        >
          <div class="mb-3">
            <label for="revisiTahapAkhir" class="form-label"
              >Upload File Laporan</label
            >
            <input
              type="file"
              class="form-control"
              id="laporan-link"
              name="laporansatu"
              accept=".pdf"
              required
            />
          </div>

          <% if (kelompokInfo[0] && kelompokInfo[0].acckaprodi == 1) {%>
            <button type="submit" class="btn btn-primary">Submit Revisi</button>
            <% if (kelompokInfo[0].komentarLaporanSatu !== "") {%>
              <br><br>
              <div class="mb-3">
                <p>Komentar Dospem:</p>
                <q><%= kelompokInfo[0].komentarLaporanSatu %></q>
              </div>
            <%}%>
          <%}%>
        </form>

        

        <% if (kelompokInfo[0] && kelompokInfo[0].laporanSatu !== "") {%>
        <!-- PDF Embed Container - Full Width and Height -->
        <div class="w-100 mt-5">
        	<iframe src="https://drive.google.com/viewerng/viewer?embedded=true&url=<%= url %>/assets/pdf/<%= kelompokInfo[0].laporanSatu %>" class="border rounded" frameborder="0" width="100%" height="500px" allowfullscreen></iframe>
        </div>

        <!-- Optional: Download Button -->
        <div class="mt-3">
          <a
            href="/assets/pdf/<%= kelompokInfo[0].laporanSatu %>"
            class="btn btn-primary"
            target="_blank"
            >Download PDF</a
          >
        </div>
        <%}%>
      </div>
    </div>
  `;
    });

  </script>
  <script>document.getElementById("laporan2-link").addEventListener("click", function () {
      const contentArea = document.getElementById("content");
      contentArea.innerHTML = `
        <div class="card mb-4">
      <div class="card-header">Laporan Kemajuan 2</div>
      <div class="card-body">
        <form
          action="/upload-laporandua"
          method="post"
          enctype="multipart/form-data"
        >
          <div class="mb-3">
            <label for="revisiTahapAkhir" class="form-label"
              >Upload File Laporan</label
            >
            <input
              type="file"
              class="form-control"
              id="laporan2-link"
              name="laporandua"
              accept=".pdf"
              required
            />
          </div>

          <% if (kelompokInfo[0] && kelompokInfo[0].acckaprodi == 1) {%>
            <button type="submit" class="btn btn-primary">Submit Revisi</button>
            <% if (kelompokInfo[0].komentarLaporanDua !== "") {%>
              <br><br>
              <div class="mb-3">
                <p>Komentar Dospem:</p>
                <q><%= kelompokInfo[0].komentarLaporanDua %></q>
              </div>
            <%}%>
          <%}%>
        </form>


        <% if (kelompokInfo[0] && kelompokInfo[0].laporanDua !== "") {%>
        <!-- PDF Embed Container - Full Width and Height -->
        <div class="w-100 mt-5">
          <embed
            src="/assets/pdf/<%= kelompokInfo[0].laporanDua %>"
            type="application/pdf"
            width="100%"
            height="800px"
            class="border rounded"
          />
        </div>

        <!-- Optional: Download Button -->
        <div class="mt-3">
          <a
            href="/assets/pdf/<%= kelompokInfo[0].laporanDua %>"
            class="btn btn-primary"
            target="_blank"
            >Download PDF</a
          >
        </div>
        <%}%>
      </div>
    </div>
    `;
    });
  </script>

  </script>
  <script>document.getElementById("laporan3-link").addEventListener("click", function () {
      const contentArea = document.getElementById("content");
      contentArea.innerHTML = `
        <div class="card mb-4">
      <div class="card-header">Laporan Kemajuan 3</div>
      <div class="card-body">
        <form
          action="/upload-laporantiga"
          method="post"
          enctype="multipart/form-data"
        >
          <div class="mb-3">
            <label for="revisiTahapAkhir" class="form-label"
              >Upload File Laporan</label
            >
            <input
              type="file"
              class="form-control"
              id="laporan3-link"
              name="laporantiga"
              accept=".pdf"
              required
            />
          </div>

          <% if (kelompokInfo[0] && kelompokInfo[0].acckaprodi == 1) {%>
            <button type="submit" class="btn btn-primary">Submit Revisi</button>
            <% if (kelompokInfo[0].komentarLaporanTiga !== "") {%>
              <br><br>
              <div class="mb-3">
                <p>Komentar Dospem:</p>
                <q><%= kelompokInfo[0].komentarLaporanTiga %></q>
              </div>
            <%}%>
          <%}%>
        </form>

        <% if (kelompokInfo[0] && kelompokInfo[0].laporanTiga !== "") {%>
        <!-- PDF Embed Container - Full Width and Height -->
        <div class="w-100 mt-5">
          <embed
            src="/assets/pdf/<%= kelompokInfo[0].laporanTiga %>"
            type="application/pdf"
            width="100%"
            height="800px"
            class="border rounded"
          />
        </div>

        <!-- Optional: Download Button -->
        <div class="mt-3">
          <a
            href="/assets/pdf/<%= kelompokInfo[0].laporanTiga %>"
            class="btn btn-primary"
            target="_blank"
            >Download PDF</a
          >
        </div>
        <%}%>
      </div>
    </div>
    `;
    });
  </script>

  </script>
  <script>document.getElementById("revisi1-link").addEventListener("click", function () {
      const contentArea = document.getElementById("content");
      contentArea.innerHTML = `
        <div class="card mb-4">
      <div class="card-header">Revisi tahap 1</div>
      <div class="card-body">
        <form
          action="/upload-revisisatu"
          method="post"
          enctype="multipart/form-data"
        >
          <div class="mb-3">
            <label for="revisiTahapAkhir" class="form-label"
              >Upload File Revisi</label
            >
            <input
              type="file"
              class="form-control"
              id="revisi1-link"
              name="revisisatu"
              accept=".pdf"
              required
            />
          </div>

          <% if (kelompokInfo[0] && kelompokInfo[0].acckaprodi == 1) {%>
          <button type="submit" class="btn btn-primary">Submit Revisi</button>
          <%}%>
        </form>

        <% if (kelompokInfo[0] && kelompokInfo[0].revisiSatu !== "") {%>
        <!-- PDF Embed Container - Full Width and Height -->
        <div class="w-100 mt-5">
          <embed
            src="/assets/pdf/<%= kelompokInfo[0].revisiSatu %>"
            type="application/pdf"
            width="100%"
            height="800px"
            class="border rounded"
          />
        </div>

        <!-- Optional: Download Button -->
        <div class="mt-3">
          <a
            href="/assets/pdf/<%= kelompokInfo[0].revisiSatu %>"
            class="btn btn-primary"
            target="_blank"
            >Download PDF</a
          >
        </div>
        <%}%>
      </div>
    </div>
    `;
    });
  </script>

  </script>
  <script>document.getElementById("revisi2-link").addEventListener("click", function () {
      const contentArea = document.getElementById("content");
      contentArea.innerHTML = `
        <div class="card mb-4">
      <div class="card-header">Revisi tahap 2</div>
      <div class="card-body">
        <form
          action="/upload-revisidua"
          method="post"
          enctype="multipart/form-data"
        >
          <div class="mb-3">
            <label for="revisiTahapAkhir" class="form-label"
              >Upload File Revisi</label
            >
            <input
              type="file"
              class="form-control"
              id="revisi2-link"
              name="revisidua"
              accept=".pdf"
              required
            />
          </div>

          <% if (kelompokInfo[0] && kelompokInfo[0].acckaprodi == 1) {%>
          <button type="submit" class="btn btn-primary">Submit Revisi</button>
          <%}%>
        </form>

        <% if (kelompokInfo[0] && kelompokInfo[0].revisiDua !== "") {%>
        <!-- PDF Embed Container - Full Width and Height -->
        <div class="w-100 mt-5">
          <embed
            src="/assets/pdf/<%= kelompokInfo[0].revisiDua %>"
            type="application/pdf"
            width="100%"
            height="800px"
            class="border rounded"
          />
        </div>

        <!-- Optional: Download Button -->
        <div class="mt-3">
          <a
            href="/assets/pdf/<%= kelompokInfo[0].revisiDua %>"
            class="btn btn-primary"
            target="_blank"
            >Download PDF</a
          >
        </div>
        <%}%>
      </div>
    </div>

    `;
    });
  </script>

  </script>
  <script>document.getElementById("revisi3-link").addEventListener("click", function () {
      const contentArea = document.getElementById("content");
      contentArea.innerHTML = `
        <div class="card mb-4">
      <div class="card-header">Revisi tahap 3</div>
      <div class="card-body">
        <form
          action="/upload-revisitiga"
          method="post"
          enctype="multipart/form-data"
        >
          <div class="mb-3">
            <label for="revisiTahapAkhir" class="form-label"
              >Upload File Revisi</label
            >
            <input
              type="file"
              class="form-control"
              id="revisi3-link"
              name="revisitiga"
              accept=".pdf"
              required
            />
          </div>

          <% if (kelompokInfo[0] && kelompokInfo[0].acckaprodi == 1) {%>
          <button type="submit" class="btn btn-primary">Submit Revisi</button>
          <%}%>
        </form>

        <% if (kelompokInfo[0] && kelompokInfo[0].revisiTiga !== "") {%>
        <!-- PDF Embed Container - Full Width and Height -->
        <div class="w-100 mt-5">
          <embed
            src="/assets/pdf/<%= kelompokInfo[0].revisiTiga %>"
            type="application/pdf"
            width="100%"
            height="800px"
            class="border rounded"
          />
        </div>

        <!-- Optional: Download Button -->
        <div class="mt-3">
          <a
            href="/assets/pdf/<%= kelompokInfo[0].revisiTiga %>"
            class="btn btn-primary"
            target="_blank"
            >Download PDF</a
          >
        </div>
        <%}%>
      </div>
    </div>
    `;
    });
  </script>

  </script>
  <script>document.getElementById("final-link").addEventListener("click", function () {
      const contentArea = document.getElementById("content");
      contentArea.innerHTML = `
        <div class="card mb-4">
      <div class="card-header">Final Project</div>
      <div class="card-body">
        <form
          action="/upload-finalproject"
          method="post"
          enctype="multipart/form-data"
        >
          <div class="mb-3">
            <label for="revisiTahapAkhir" class="form-label"
              >Upload File Final Project</label
            >
            <input
              type="file"
              class="form-control"
              id="final-link"
              name="finalproject"
              accept=".pdf"
              required
            />
          </div>

          <% if (kelompokInfo[0] && kelompokInfo[0].acckaprodi == 1) {%>
          <button type="submit" class="btn btn-primary">Submit Revisi</button>
          <%}%>
        </form>

        <% if (kelompokInfo[0] && kelompokInfo[0].finalProject !== "") {%>
        <!-- PDF Embed Container - Full Width and Height -->
        <div class="w-100 mt-5">
          <embed
            src="/assets/pdf/<%= kelompokInfo[0].finalProject %>"
            type="application/pdf"
            width="100%"
            height="800px"
            class="border rounded"
          />
        </div>

        <!-- Optional: Download Button -->
        <div class="mt-3">
          <a
            href="/assets/pdf/<%= kelompokInfo[0].finalProject %>"
            class="btn btn-primary"
            target="_blank"
            >Download PDF</a
          >
        </div>
        <%}%>
      </div>
    </div>

    `;
    });
  </script>

  </script>
  <script>document.getElementById("proses-link").addEventListener("click", function () {
      const contentArea = document.getElementById("content");
      contentArea.innerHTML = `
        <div class="card mb-4">
      <div class="card-header">Pemantauan Proses</div>
      <div class="card-body">
        <ul class="list-group">
          <% if (kelompokInfo[0] && kelompokInfo[0].laporanSatu !== "") {%>
          <li class="list-group-item">
            Pengumpulan Proposal tahap 1
            <span class="badge bg-success">Completed</span>
          </li>
          <%} else {%>
          <li class="list-group-item">
            Pengumpulan Proposal tahap 1
            <span class="badge bg-secondary">Uncompleted</span>
          </li>
          <%}%> <% if (kelompokInfo[0] && kelompokInfo[0].laporanDua !== "") {%>
          <li class="list-group-item">
            Pengumpulan Proposal tahap 2
            <span class="badge bg-success">Completed</span>
          </li>
          <%} else {%>
          <li class="list-group-item">
            Pengumpulan Proposal tahap 2
            <span class="badge bg-secondary">Uncompleted</span>
          </li>
          <%}%> <% if (kelompokInfo[0] && kelompokInfo[0].laporanTiga !== "")
          {%>
          <li class="list-group-item">
            Pengumpulan Proposal tahap 3
            <span class="badge bg-success">Completed</span>
          </li>
          <%} else {%>
          <li class="list-group-item">
            Pengumpulan Proposal tahap 3
            <span class="badge bg-secondary">Uncompleted</span>
          </li>
          <%}%> <% if (kelompokInfo[0] && kelompokInfo[0].revisiSatu !== "") {%>
          <li class="list-group-item">
            Pengumpulan Revisi tahap 1
            <span class="badge bg-success">Completed</span>
          </li>
          <%} else {%>
          <li class="list-group-item">
            Pengumpulan Revisi tahap 1
            <span class="badge bg-secondary">Uncompleted</span>
          </li>
          <%}%> <% if (kelompokInfo[0] && kelompokInfo[0].revisiDua !== "") {%>
          <li class="list-group-item">
            Pengumpulan Revisi tahap 2
            <span class="badge bg-success">Completed</span>
          </li>
          <%} else {%>
          <li class="list-group-item">
            Pengumpulan Revisi tahap 2
            <span class="badge bg-secondary">Uncompleted</span>
          </li>
          <%}%> <% if (kelompokInfo[0] && kelompokInfo[0].revisiTiga !== "") {%>
          <li class="list-group-item">
            Pengumpulan Revisi tahap 3
            <span class="badge bg-success">Completed</span>
          </li>
          <%} else {%>
          <li class="list-group-item">
            Pengumpulan Revisi tahap 3
            <span class="badge bg-secondary">Uncompleted</span>
          </li>
          <%}%> <% if (kelompokInfo[0] && kelompokInfo[0].finalProject !== "")
          {%>
          <li class="list-group-item">
            Pengumpulan Final <span class="badge bg-success">Completed</span>
          </li>
          <%} else {%>
          <li class="list-group-item">
            Pengumpulan Final
            <span class="badge bg-secondary">Uncompleted</span>
          </li>
          <%}%>
        </ul>
      </div>
    </div>

  
    `;
    });
  </script>

</body>

</html>