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

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Dashboard Anggota - 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> Anggota </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="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 : "mahasiswa.png" %>" />
            <h2 class="fw-normal"><%= kelompokUser[0] && kelompokUser[0][1] ? kelompokUser[0][1].nama : "Nama Ketua" %></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 : "dosen.jpg" %>" />
            <h2 class="fw-normal"><%= kelompokUser[0] && kelompokUser[0][0] ? kelompokUser[0][0].nama : "Nama Dosen Pembimbing" %></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 : "mahasiswa.png" %>" />
            <h2 class="fw-normal"><%= kelompokUser[0] && kelompokUser[0][2] ? kelompokUser[0][2].nama : "Nama Anggota 1" %></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 : "mahasiswa.png" %>" />
            <h2 class="fw-normal"><%= kelompokUser[0] && kelompokUser[0][3] ? kelompokUser[0][3].nama : "Nama Anggota 2" %></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 : "mahasiswa.png" %>" />
            <h2 class="fw-normal"><%= kelompokUser[0] && kelompokUser[0][4] ? kelompokUser[0][4].nama : "Nama Anggota 3" %></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 : "mahasiswa.png" %>" />
            <h2 class="fw-normal"><%= kelompokUser[0] && kelompokUser[0][5] ? kelompokUser[0][5].nama : "Nama Anggota 4" %></h2>
            <p>Anggota 4</p>
          </div>
        </div>
      </div>
    `;
    });

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

  <script>document.getElementById("revisi-kelompok-link").addEventListener("click", function () {
    const contentArea = document.getElementById("content");
    contentArea.innerHTML = `

  <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">
            <strong>Anggota kelompok 1:</strong> <%= kelompokUser[0] && kelompokUser[0][2] ? kelompokUser[0][2].nama + ' (' + kelompokUser[0][2].nomor_induk + ')' : '' %>
          </li>
          <li class="list-group-item">
            <strong>Anggota kelompok 2:</strong> <%= kelompokUser[0] && kelompokUser[0][3] ? kelompokUser[0][3].nama + ' (' + kelompokUser[0][3].nomor_induk + ')' : '' %>
          </li>
          <li class="list-group-item">
            <strong>Anggota kelompok 3:</strong> <%= kelompokUser[0] && kelompokUser[0][4] ? kelompokUser[0][4].nama + ' (' + kelompokUser[0][4].nomor_induk + ')' : '' %>
          </li>
          <li class="list-group-item">
            <strong>Anggota kelompok 4:</strong> <%= kelompokUser[0] && kelompokUser[0][5] ? kelompokUser[0][5].nama + ' (' + kelompokUser[0][5].nomor_induk + ')' : '' %>
          </li>
        </ul>
      </div>
      
  </div>
  `;
  });
  </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"
        >
          <% if (kelompokInfo[0] && kelompokInfo[0].laporanSatu !== "") {%>
          <div class="mb-3">
            <p class="text-success">File sudah di kumpulkan ketua</p>
            <p>Komentar Dospem:</p>
            <q><%= kelompokInfo[0].komentarLaporanSatu %></q>
          </div>
          <%} else {%>
            <p class="text-danger">File belum di kumpulkan ketua</p>
          <%}%>
        </form>

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

        <!-- Optional: Download Button -->
        <div class="mt-3">
          <a
            href="/assets/pdf/<%= kelompokInfo[0].laporanSatu %>"
            class="btn btn-primary"
            download
            >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"
        >
          <% if (kelompokInfo[0] && kelompokInfo[0].laporanDua !== "") {%>
          <div class="mb-3">
            <p class="text-success">File sudah di kumpulkan ketua</p>
            <p>Komentar Dospem:</p>
            <q><%= kelompokInfo[0].komentarLaporanDua %></q>
          </div>
          <%} else {%>
          <p class="text-danger">File belum di kumpulkan ketua</p>
          <%}%>
        </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"
            download
            >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"
        >
          <% if (kelompokInfo[0] && kelompokInfo[0].laporanTiga !== "") {%>
          <div class="mb-3">
            <p class="text-success">File sudah di kumpulkan ketua</p>
            <p>Komentar Dospem:</p>
            <q><%= kelompokInfo[0].komentarLaporanTiga %></q>
          </div>
          <%} else {%>
          <p class="text-danger">File belum di kumpulkan ketua</p>
          <%}%>
        </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"
            download
            >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"
        >
          <% if (kelompokInfo[0] && kelompokInfo[0].revisiSatu !== "") {%>
          <div class="mb-3">
            <p class="text-success">File sudah di kumpulkan ketua</p>
          </div>
          <%} else {%>
          <p class="text-danger">File belum di kumpulkan ketua</p>
          <%}%>
        </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"
            download
            >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"
        >
          <% if (kelompokInfo[0] && kelompokInfo[0].revisiDua !== "") {%>
          <div class="mb-3">
            <p class="text-success">File sudah di kumpulkan ketua</p>
          </div>
          <%} else {%>
          <p class="text-danger">File belum di kumpulkan ketua</p>
          <%}%>
        </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"
            download
            >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"
        >
          <% if (kelompokInfo[0] && kelompokInfo[0].revisiTiga !== "") {%>
          <div class="mb-3">
            <p class="text-success">File sudah di kumpulkan ketua</p>
          </div>
          <%} else {%>
          <p class="text-danger">File belum di kumpulkan ketua</p>
          <%}%>
        </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"
            download
            >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"
        >
          <% if (kelompokInfo[0] && kelompokInfo[0].finalProject !== "") {%>
          <div class="mb-3">
            <p class="text-success">File sudah di kumpulkan ketua</p>
          </div>
          <%} else {%>
          <p class="text-danger">File belum di kumpulkan ketua</p>
          <%}%>
        </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"
            download
            >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>