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

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Dashboard Admin - 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">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 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);
        }

        /* Apply display: block only on mobile devices */
        @media only screen and (max-width: 992px) {
          #myTable {
            display: block;
          }
        }

        @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> Admin</h4>
            <hr>
            <ul class="nav nav-pills flex-column mb-auto">
                <li>
                    <a href="#" class="nav-link link-body-emphasis" id="lihat-kelompok-link">
                        <i class="bi  bi-clipboard2-data"></i>
                        Semua Kelompok PKM
                    </a>
                </li>
                <li>
                    <a href="#" class="nav-link link-body-emphasis" id="progres-link">
                        <i class="bi bi-bar-chart-line"></i>
                        Progres Semua Kelompok
                    </a>
                </li>

                <li>
                  <a href="#" class="nav-link link-body-emphasis" id="users-link">
                      <i class="bi bi-database-lock"></i>
                      Users
                  </a>
                </li>
                <li>
                  <a href="#" class="nav-link link-body-emphasis" id="kelompok-link">
                      <i class="bi bi-database-lock"></i>
                      Kelompok
                  </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>
      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.addEventListener("DOMContentLoaded", function() {
      const profileLink = document.getElementById("lihat-kelompok-link");
      const contentArea = document.getElementById("content");
            function loadProfileContent() {
            contentArea.innerHTML = `
                <div class="card mb-4">
                  <div class="card-header">Semua Kelompok PKM</div>
                  <div class="card-body">
                    <div class="table-responsive">
                    <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>
                    </div>
                    
                  </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("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">
        <div class="table-responsive">
        <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>
    </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>

  <script>
    document.getElementById("users-link").addEventListener("click", function () {
    const contentArea = document.getElementById("content");
    contentArea.innerHTML = `
  <div class="card mb-4">
    <div class="card-header">Semua Users</div>
    <div class="card-body">
      <div class="input-group mb-3 mt-2">
        <input type="search" id="search-input" class="form-control" placeholder="Search...">
        <button id="search-btn" class="btn btn-outline-primary">Search</button>
      </div>

      <div class="table-responsive" style="display: table;table-layout: fixed;width: 100%;">
      <table class="table table-striped" id="myTable" style="overflow-x: scroll;white-space: nowrap;">
        <thead>
          <tr>
            <th>No.</th>
            <th>Nomor Induk</th>
            <th>Nama</th>
            <th>Telepon</th>
            <th>Role</th>
            <th></th>
            <th></th>
          </tr>
        </thead>
        <tbody id="table-body">
          <!-- Example Data -->
          <% 
            const roleOrder = {
              1: 0, // Ketua
              2: 1, // Anggota
              3: 2, // Dospem
              4: 3, // Kaprodi
              5: 4, // Dekan
              6: 5 // Admin
            };

            dataUser.sort((a, b) => roleOrder[a.role] - roleOrder[b.role]);
            dataUser.forEach((users, index) => {
          %>
            <tr>
              <td><%= index + 1 %></td>
              <td><%= users.nomor_induk %></td>
              <td><%= users.nama %></td>
              <td><a href="https://wa.me/<%= users.no_telpon %>" style="text-decoration: none;" target="_blank"><%= users.no_telpon %></a></td>
              <td>
                <% if (users.role == 1) { %>
                  Ketua
                <% } else if (users.role == 2) { %>
                  Anggota
                <% } else if (users.role == 3) { %>
                  Dospem
                <% } else if (users.role == 4) { %>
                  Kaprodi
                <% } else if (users.role == 5) { %>
                  Dekan
                <% } else if (users.role == 6) { %>
                  Admin
                <% } else { %>
                  Unknown
                <% } %>
              </td>
              <!-- Button in the table -->
              <td>
                <button id="<%= users.nomor_induk %>" type="button" class="btn btn-secondary btn-sm float-end" data-toggle="modal" data-target="#exampleModalCenter">
                  Edit
                </button>
              </td>

              <!-- Modal -->
              <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered" role="document">
                  <div class="modal-content">
                    <div class="modal-header">
                      <h5 class="modal-title" id="exampleModalLongTitle">Edit User</h5>
                      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                      </button>
                    </div>
                    <div class="modal-body">
                      <!-- You can put a form here to edit user data -->
                      <form id="editUserForm">
                        <div class="form-group">
                          <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)[0-9]*" required title="Nomor induk must start with 22, 23, or 24"/>
                        </div>
                        <div class="form-group">
                          <label for="namaAnggota1" class="form-label">Nama Anggota</label>
                          <input type="text" class="form-control" id="namaAnggota1" name="nama" required />
                        </div>
                        <div class="form-group">
                          <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="form-group">
                          <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="form-group">
                          <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="form-group">
                          <label for="emailAnggota1" class="form-label">Email Anggota</label>
                          <input type="email" class="form-control" id="emailAnggota1" name="email" required />
                        </div>
                        <div class="form-group">
                          <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="form-group">
                          <label for="alamat" class="form-label">Alamat</label>
                          <input type="text" class="form-control" id="alamat" name="alamat" required />
                        </div>
                        <div class="form-group">
                          <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="form-group">
                          <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>
                        <div class="modal-footer">
                          <button type="submit" class="btn btn-primary" id="Simpan">Simpan</button>
                        </div>
                        <!-- Add other fields as needed -->
                      </form>
                    </div>
                  </div>
                </div>
              </div>
              <td><button id="<%= users.nomor_induk %>" type="submit" class="btn btn-danger btn-sm float-end">Hapus</button></td>
            </tr>
          <% 
            });
          %>
        </tbody>
      </table>
      </div>
    
    </div>
  </div>
  `;
  // Move the script that adds event listeners here
  const searchInput = document.getElementById('search-input');
  const searchBtn = document.getElementById('search-btn');
  const tableBody = document.getElementById('table-body');

  searchBtn.addEventListener('click', search);
  searchInput.addEventListener('keydown', (e) => {
    if (e.key === 'Enter') {
      search();
    }
  });
  function search() {
    const searchTerm = searchInput.value.toLowerCase();
    const rows = tableBody.rows;

    for (let i = 0; i < rows.length; i++) {
      const row = rows[i];
      let showRow = false;

      for (let j = 0; j < row.cells.length; j++) {
        const column = row.cells[j];
        const text = column.textContent.toLowerCase();

        if (text.indexOf(searchTerm) > -1) {
          showRow = true;
          break;
        }
      }

      if (showRow) {
        row.style.display = '';
      } else {
        row.style.display = 'none';
      }
    }
  }


  });
  
  </script>
  <!-- jQuery to dynamically populate the modal with user data -->
  <script>
    $(document).ready(function() {
      $('button[data-target="#exampleModalCenter"]').click(function() {
        var userId = $(this).attr('id'); // Get the user ID from the button

        // Use the userId to fetch the user's details (e.g., via an AJAX call)
        // For now, let's assume you're dynamically setting a user name in the modal
        $('#userName').val("User " + userId);

        // If using AJAX, you could also populate the form with more details here
      });

      $('#saveChanges').click(function() {
        // Handle form submission, e.g., send the updated data via AJAX
        var updatedUserName = $('#userName').val();
        alert('Changes saved for: ' + updatedUserName);
      });
    });
  </script>

  <script>
    document.getElementById("kelompok-link").addEventListener("click", function () {
    const contentArea = document.getElementById("content");
    contentArea.innerHTML = `
  <div class="card mb-4">
    <div class="card-header">Semua Kelompok</div>
    <div class="card-body">
      <div class="input-group mb-3 mt-2">
        <input type="search" id="search-input" class="form-control" placeholder="Search...">
        <button id="search-btn" class="btn btn-outline-primary">Search</button>
      </div>

      <div class="table-responsive" style="display: table;table-layout: fixed;width: 100%;">
      <table class="table table-striped" id="myTable" style="overflow-x: scroll;white-space: nowrap;">
        <thead>
          <tr>
            <th>No.</th>
            <th>Code</th>
            <th>Nama</th>
            <th>Dospem Acc</th>
            <th>Kaprodi Acc</th>
            <th>Progres</th>
            <th>Keputusan</th>
            <th></th>
          </tr>
        </thead>
        <tbody id="table-body">
          <!-- Example Data -->
          <% 
            dataKelompok.forEach((kelompok, index) => {
          %>
            <tr>
              <td><%= index + 1 %></td>
              <td><%= kelompok.code %></td>
              <td><%= kelompok.nama %></td>
              <td>
                <span class="badge <%= kelompok.accdospem == null ? 'bg-secondary' : (kelompok.accdospem == 1 ? 'bg-success' : 'bg-danger') %>">
                  <%= kelompok.accdospem == null ? 'Belum Ada' : (kelompok.accdospem == 1 ? 'Diterima' : 'Ditolak') %>
                </span>
              </td>
              <td>
                <span class="badge <%= kelompok.acckaprodi == null ? 'bg-secondary' : (kelompok.acckaprodi == 1 ? 'bg-success' : 'bg-danger') %>">
                  <%= kelompok.acckaprodi == null ? 'Belum Ada' : (kelompok.acckaprodi == 1 ? 'Diterima' : 'Ditolak') %>
                </span>
              </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>
                <span class="badge <%= kelompok.lulus == null ? 'bg-secondary' : (kelompok.lulus == 1 ? 'bg-success' : 'bg-danger') %>">
                  <%= kelompok.lulus == null ? 'Belum Ada' : (kelompok.lulus == 1 ? 'Lulus' : 'Tidak lulus') %>
                </span>
              </td>
              <td><button id="<%= kelompok.code %>" type="submit" class="btn btn-secondary btn-sm float-end">Edit</button></td>
            </tr>
          <% 
            });
          %>
        </tbody>
      </table>
      </div>
    
    </div>
  </div>
  `;
  // Move the script that adds event listeners here
  const searchInput = document.getElementById('search-input');
  const searchBtn = document.getElementById('search-btn');
  const tableBody = document.getElementById('table-body');

  searchBtn.addEventListener('click', search);
  searchInput.addEventListener('keydown', (e) => {
    if (e.key === 'Enter') {
      search();
    }
  });
  function search() {
    const searchTerm = searchInput.value.toLowerCase();
    const rows = tableBody.rows;

    for (let i = 0; i < rows.length; i++) {
      const row = rows[i];
      let showRow = false;

      for (let j = 0; j < row.cells.length; j++) {
        const column = row.cells[j];
        const text = column.textContent.toLowerCase();

        if (text.indexOf(searchTerm) > -1) {
          showRow = true;
          break;
        }
      }

      if (showRow) {
        row.style.display = '';
      } else {
        row.style.display = 'none';
      }
    }
  }


  });

  </script>
</body>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

</html>