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

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Dashboard Kaprodi - 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;
            }

        }
    </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> Kaprodi</h4>
            <hr>
            <ul class="nav nav-pills flex-column mb-auto">
                <li>
                    <a href="#" class="nav-link link-body-emphasis" id="pengajuan-link">
                        <i class="bi bi-person"></i>
                        Pengajuan Kaprodi
                    </a>
                </li>
                <li>
                    <a href="#" class="nav-link link-body-emphasis" id="pemilihan-link">
                        <i class="bi bi-person"></i>
                        Pemilihan Dosen
                    </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="lihat-kelompok-link">
                        <i class="bi bi-file-earmark"></i>
                        Semua Kelompok PKM
                    </a>
                </li>
                <li>
                    <a href="#" class="nav-link link-body-emphasis" id="progres-link">
                        <i class="bi bi-file-earmark"></i>
                        Progres Semua Kelompok
                    </a>
                </li>
                <li>
                    <a href="#" class="nav-link link-body-emphasis" id="kelulusan-link">
                        <i class="bi bi-file-earmark"></i>
                        Keputusan Kelulusan
                    </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 JavaScript -->
<script>
    document.addEventListener("DOMContentLoaded", function() {
        const profileLink = document.getElementById("pengajuan-link");
        const contentArea = document.getElementById("content");

        function loadProfileContent() {
            contentArea.innerHTML = `
                 <div class="container mt-5">
                  <div class="card mb-4">
                    <div class="card-header bg-primary text-white">Pengajuan Mahasiswa Bimbingan</div>
                    <div class="card-body">
                      <% if (needAcc.length > 0) { %>
                        <% needAcc.forEach(function(item, index) { %>
                        <% if (item.accdospem == 1) { %>
                          <div class="mb-3">
                            <p>Dosen dengan nama <strong><%= needAccUser[index].nama %></strong> bersedia menjadi dosen pembimbing kelompok pkm yaitu <strong><%= item.nama %> </strong>dengan judul <strong>"<%= item.judul %>"</strong></p>
                          </div>
                          <form action="/acc-kaprodi" method="post" enctype="multipart/form-data">
                            <input type="hidden" name="code" value="<%= item.code %>">
                            <input type="hidden" name="dosen" value="<%= needAccUser[index].nomor_induk %>">
                            <div class="form-check form-check-inline">
                              <input class="form-check-input" type="radio" name="inputan" id="inlineRadio1" value="1" required>
                              <label class="form-check-label" for="inlineRadio1">Terima</label>
                            </div>
                            <div class="form-check form-check-inline">
                              <input class="form-check-input" type="radio" name="inputan" id="inlineRadio2" value="0" required>
                              <label class="form-check-label" for="inlineRadio2">Tolak</label>
                            </div>
                            <div class="form-check form-check-inline">
                              <button type="submit" class="btn btn-primary" >Submit</button>
                            </div>
                          </form>
                          <hr>
                        <% } %>
                        <% }); %>
                      <% } %>
                    </div>
                  </div>
            `;
        }

        // Load profile content on page load
        loadProfileContent();

        // Add event listener to profile link
        profileLink.addEventListener("click", function(event) {
            event.preventDefault(); // Prevent the default link action
            loadProfileContent(); // Load profile content on link click
        });
    });
</script>

    
    <script>document.getElementById("pemilihan-link").addEventListener("click", function () {
            const contentArea = document.getElementById("content");
            contentArea.innerHTML = `
<div class="container mt-5">
  <!-- Keputusan Kelulusan -->
  <div class="card mb-4">
    <div class="card-header">Pemilihan Dosen Pembimbing</div>
    <div class="card-body">
      <form action="/choose-kaprodi" method="post" enctype="multipart/form-data">
      <div class="mb-3">
        <label for="leaderName" class="form-label">Pilih kelompok yang ditolak</label>
        <select class="form-control" id="leaderName" aria-label="Dosen Pembimbing" name="code" onchange="showDosenQuota(this.value)" required>
          <option value="" selected disabled>Pilih Kelompok</option>
          <% for(var i = 0; i < tolakKaprodi.length; i++) { %> 
            <option value="<%= tolakKaprodi[i].code %>"><%= tolakKaprodi[i].nama %> - <%= tolakKaprodi[i].judul %></option>
          <% } %>
          <!-- Tambahkan semua dosen lainnya seperti contoh di atas -->
        </select>
      </div>
      <div class="mb-3 mt-3">
        <label for="leaderName" class="form-label">Dosen Pembimbing</label>
        <select class="form-control" 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>
      <button type="submit" class="btn btn-primary" >Submit</button>
      </form>
    </div>
  </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("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">NIDN</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">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>
            </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">NIDN</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">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 %>" pattern="62[0-9]*">
                    </div>
                  </div>
                </div>
                <div class="container mb-2">
                  <div class="row align-items-center">
                    <div class="col-md-3">
                    </div>
                    <div class="col-md-9">
                      <input type="hidden" name="kelamin" value="<%= userInfo.jenis_kelamin %>">
                    </div>
                  </div>
                </div>
                <div class="container mb-2">
                  <div class="row align-items-center">
                    <div class="col-md-3">
                    </div>
                    <div class="col-md-9">
                      <input type="hidden" class="form-control" placeholder="Masukan Semester" name="semester" value="<%= userInfo.semester %>" pattern="[0-9]*">
                    </div>
                  </div>
                </div>
                <div class="container mb-2">
                  <div class="row align-items-center">
                    <div class="col-md-3">
                    </div>
                    <div class="col-md-9">
                      <input type="hidden" class="form-control" placeholder="Masukan Program Studi" name="studi" value="<%= userInfo.program_studi %>">
                    </div>
                  </div>
                </div>
                <div class="container mb-2">
                  <div class="row align-items-center">
                    <div class="col-md-3">
                    </div>
                    <div class="col-md-9">
                      <input type="hidden" class="form-control" placeholder="Masukan Alamat Lengkap" name="alamat" value="<%= userInfo.alamat %>">
                    </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("lihat-kelompok-link").addEventListener("click", function () {
            const contentArea = document.getElementById("content");
            contentArea.innerHTML = `
                <div class="card mb-4">
                  <div class="card-header">Semua Kelompok PKM</div>
                  <div class="card-body">
                    <table class="table table-striped">
                      <thead>
                        <tr>
                          <th>#</th>
                          <th>Nama Kelompok</th>
                          <th>Nama Ketua</th>
                          <th>Nama Dospem</th>
                          <th>Jumlah Anggota</th>
                        </tr>
                      </thead>
                      <tbody>
                        <!-- Example Data -->
                      <tbody>
                        <% allKelompok.forEach((kelompok, index) => { %>
                          <tr>
                            <td><%= index + 1 %></td>
                            <td><%= kelompok.nama %></td>
                            <td><%= allKelompokUser[index][1].nama %></td>
                            <td><%= allKelompokUser[index][0].nama %></td>
                            <td>5</td>
                          </tr>
                        <% }); %>
                        <!-- Tambahkan baris lain jika diperlukan -->
                      </tbody>
                    </table>
                    <!-- Add more rows as needed -->
                  </div>
                </div>
  `;
        });

    </script>
    
    <script>document.getElementById("progres-link").addEventListener("click", function () {
            const contentArea = document.getElementById("content");
            contentArea.innerHTML = `
        <div class="card mb-4">
      <div class="card-header">Progres Semua Kelompok</div>
      <div class="card-body">
        <table class="table table-striped">
          <thead>
            <tr>
              <th>#</th>
              <th>Nama Kelompok</th>
              <th>Progres</th>
              <th>Status Lulus</th>
            </tr>
          </thead>
          <tbody>
            <!-- Example Data -->
            <% 
              allKelompok.forEach((kelompok, index) => {
              if (kelompok !== null) { 
            %>
              <tr>
                <td><%= index + 1 %></td>
                <td><%= kelompok.nama %></td>
                <%
                  const kondisi = [
                    kelompok.laporanSatu,
                    kelompok.laporanDua,
                    kelompok.laporanTiga,
                    kelompok.revisiSatu,
                    kelompok.revisiDua,
                    kelompok.revisiTiga,
                    kelompok.finalProject
                  ];

                  const totalKondisi = kondisi.length;
                  const kondisiTerkumpul = kondisi.filter(kondisi => kondisi !== '').length;

                  const progres = (kondisiTerkumpul / totalKondisi) * 100;

                  if (progres === 100) {
                    %>
                    <td><span class="badge bg-success">100% - Final</span></td>
                    <%
                  } else {
                    %>
                    <td><span class="badge bg-info"><%= progres.toFixed(0) %>% - Proses</span></td>
                    <%
                  }
                %>
                <td>
                  <% if (kelompok.lulus === null) { %>
                    <span class="badge bg-secondary">Belum ada</span>
                  <% } else if (kelompok.lulus === 0) { %>
                    <span class="badge bg-danger">Tidak lulus</span>
                  <% } else if (kelompok.lulus === 1) { %>
                    <span class="badge bg-success">Lulus</span>
                  <% } %>
                </td>
              </tr>
            <% 
              }
              });
            %>
            <!-- Add more rows as needed -->
          </tbody>
        </table>
      </div>
    </div>
    `;
        });
    </script>

    <script>document.getElementById("kelulusan-link").addEventListener("click", function () {
            const contentArea = document.getElementById("content");
            contentArea.innerHTML = `
        <div class="container mt-5">
          <!-- Keputusan Kelulusan -->
          <div class="card mb-4">
            <div class="card-header">Keputusan Kelulusan</div>
            <div class="card-body">
              <form action="/status-akhir" method="post" enctype="multipart/form-data">
              <div class="mb-3">
                <label for="groupDecision" class="form-label">Pilih Kelompok</label>
                <select class="form-control" id="groupDecision" onchange="showGroupDetails(this.value)" required>
                  <option value="" selected disabled>Pilih Kelompok</option>
                  <% for(var i = 0; i < allKelompok.length; i++) { %>
                      <% if (allKelompok[i] !== null && !(allKelompok[i].lulus === 1 || allKelompok[i].lulus === 0)) { %>
                        <option value="<%= i %>"><%= allKelompok[i].nama %></option>
                      <% } %>
                  <% } %>
                </select>
                <div id="group-details"></div>
                  <input type="hidden" name="code" id="code" value="">
                </div>


              <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="inputan" id="inlineRadio1" value="1" required>
                <label class="form-check-label" for="inlineRadio1">Teruskan ke Universitas</label>
              </div>
              <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="inputan" id="inlineRadio2" value="0" required>
                <label class="form-check-label" for="inlineRadio2">Jangan Luluskan</label>
              </div>
              <div class="form-check form-check-inline">
                <button type="submit" class="btn btn-primary" >Submit</button>
              </div>
              </form>
            </div>
          </div>
          <!-- Detail untuk setiap kelompok -->
            <div id="groupDetails" class="card card-body mb-3">
              
            </div>

        </div>
    `;

        });
    </script>
    <script>
      function showGroupDetails(group) {
          const contentArea = document.getElementById("groupDetails");
          const kelompokInfo = JSON.parse(`<%- JSON.stringify(allKelompok).replace(/"/g, '\\"') %>`);
          const kelompok = kelompokInfo[group]
          document.getElementById("code").value = kelompok.code;
            const kelompokUser = JSON.parse(`<%- JSON.stringify(allKelompokUser).replace(/"/g, '\\"') %>`);
            const users = kelompokUser[group]
            console.log(kelompok)
            console.log(users)
            contentArea.innerHTML = `
              <h5>Detail ${kelompok.nama}</h5>
              <ul class="list-group mb-3">
                <li class="list-group-item">
                  <strong>Skema:</strong> ${kelompok.skema}
                </li>
                <li class="list-group-item">
                  <strong>Judul:</strong> ${kelompok.judul}
                </li>
                <li class="list-group-item">
                  <strong>Nama Ketua:</strong> ${users[1].nama}
                </li>
                <li class="list-group-item">
                  <strong>Dosen Pembimbing:</strong> ${users[0].nama}
                </li>
              </ul>
              <h6>Daftar Anggota:</h6>
              <ul class="list-group">
                <li class="list-group-item">
                  <strong>Anggota 1:</strong> ${users[2] ? users[2].nama : ""}
                </li>
                <li class="list-group-item">
                  <strong>Anggota 2:</strong> ${users[3] ? users[3].nama : ""}
                </li>
                <li class="list-group-item">
                  <strong>Anggota 3:</strong> ${users[4] ? users[4].nama : ""}
                </li>
                <li class="list-group-item">
                  <strong>Anggota 4:</strong> ${users[5] ? users[5].nama : ""}
                </li>
              </ul>

              <div class="accordion mt-3" id="accordionExample">
                  <div class="accordion-item">
                    <h2 class="accordion-header">
                      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne"> Proposal Submission </button>
                    </h2>
                    <div id="collapseOne" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
                      <div class="accordion-body">
                        <li class="list-group-item">
                          <strong>Laporan Kemajuan Tahap 1:</strong>
                          <a href="/assets/pdf/${kelompok.laporanSatu}" target="_blank">Download</a>
                        </li>
                      </div>
                      
                      <div class="accordion-body">
                        <li class="list-group-item">
                          <strong>Laporan Kemajuan Tahap 2:</strong>
                          <a href="/assets/pdf/${kelompok.laporanDua}" target="_blank">Download</a>
                        </li>
                      </div>
                      <div class="accordion-body">
                        <li class="list-group-item">
                          <strong>Laporan Kemajuan Tahap 3:</strong>
                          <a href="/assets/pdf/${kelompok.laporanTiga}" target="_blank">Download</a>
                        </li>
                      </div>
                    </div>
                  </div>
                  <div class="accordion-item">
                    <h2 class="accordion-header">
                      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> Revisi Submission </button>
                    </h2>
                    <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
                      <div class="accordion-body">
                        <li class="list-group-item">
                          <strong>Revisi Tahap 1:</strong>
                          <a href="/assets/pdf/${kelompok.revisiSatu}" target="_blank">Download</a>
                        </li>
                      </div>
                      <div class="accordion-body">
                        <li class="list-group-item">
                          <strong>Revisi Tahap 2:</strong>
                          <a href="/assets/pdf/${kelompok.revisiDua}" target="_blank">Download</a>
                        </li>
                      </div>
                      <div class="accordion-body">
                        <li class="list-group-item">
                          <strong>Revisi Tahap 3:</strong>
                          <a href="/assets/pdf/${kelompok.revisiTiga}" target="_blank">Download</a>
                        </li>
                      </div>
                    </div>
                  </div>
                  <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"> Final Project Submission </button>
                    </h2>
                    <div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
                      <div class="accordion-body">
                        <li class="list-group-item">
                          <strong>Final Project:</strong>
                          <a href="/assets/pdf/${kelompok.finalProject}" target="_blank">Download</a>
                        </li>
                      </div>
                    </div>
                  </div>
                </div>
          `
          
      }
    </script>

    <!-- JavaScript -->
    <!-- Bootstrap JS -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>
    <script>
        // Script untuk menampilkan detail kelompok berdasarkan pilihan
        function showGroupDetail(value) {
            // Tutup semua detail kelompok terlebih dahulu
            document.querySelectorAll('.collapse').forEach(function (el) {
                el.classList.remove('show');
            });

            // Tampilkan detail kelompok yang sesuai
            if (value) {
                document.querySelector('#groupDetail' + value).classList.add('show');
            }
        }
    </script>

</body>

</html>