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

<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">

    <title>J-Classify Tracer Study MIF</title>
    <meta content="" name="description">
    <meta content="" name="keywords">

    <!-- Favicons -->
    <link href="{{ asset('assets/img/favicon.png') }}" rel="icon">
    <link href="{{ asset('assets/img/apple-touch-icon.png') }}" rel="apple-touch-icon">

    <!-- Google Fonts -->
    <link href="https://fonts.gstatic.com" rel="preconnect">
    <link
        href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Nunito:300,300i,400,400i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i"
        rel="stylesheet">

    <!-- Tambahkan ini di bagian <head> atau sebelum penutup </body> -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>


    <!-- Vendor CSS Files -->
    <link href="{{ asset('assets/vendor/bootstrap/css/bootstrap.min.css') }}" rel="stylesheet">
    <link href="{{ asset('assets/vendor/bootstrap-icons/bootstrap-icons.css') }}" rel="stylesheet">
    <link href="{{ asset('assets/vendor/boxicons/css/boxicons.min.css') }}" rel="stylesheet">
    <link href="{{ asset('assets/vendor/quill/quill.snow.css') }}" rel="stylesheet">
    <link href="{{ asset('assets/vendor/quill/quill.bubble.css') }}" rel="stylesheet">
    <link href="{{ asset('assets/vendor/remixicon/remixicon.css') }}" rel="stylesheet">
    <link href="{{ asset('assets/vendor/simple-datatables/style.css') }}" rel="stylesheet">

    <!-- Template Main CSS File -->
    <link href="{{ asset('assets/css/style.css') }}" rel="stylesheet">
</head>

<body>

    <!-- ======= Header ======= -->
    @include('header')
    <!-- ======= Sidebar ======= -->
    @include('sidebar')

    <main id="main" class="main">
        <div class="pagetitle">
            <h1>Data Alumni</h1>
            <nav>
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="index.html">Home</a></li>
                    <li class="breadcrumb-item">Data</li>
                </ol>
            </nav>
        </div><!-- End Page Title -->

        <section class="section">
            <div class="row">
                <div class="col-lg-12">
                    <div class="card p-3">
                        <div class="card-body">
                            <h5 class="card-title">Data Alumni</h5>
        
                            <div class="mb-2">
                                <input type="text" class="form-control" id="searchInput" placeholder="Cari User..."
                                    style="width: 200px;">
                            </div>
                            <div class="mb-1 d-flex align-items-center">
                                <label class="me-2">Tampilkan:</label>
                                <select id="entriesPerPage" class="form-select w-auto">
                                    <option value="20">20</option>
                                    <option value="50">50</option>
                                    <option value="all">Semua</option>
                                </select>
                            </div>

                            <div class="d-flex mb-3 align-items-center gap-2">
                                {{-- Dropdown Filter Angkatan --}}
                                <label for="filterAngkatan" class="form-label mb-0">Angkatan:</label>
                                <select id="filterAngkatan" class="form-select w-auto"
                                    onchange="filterByAngkatan(this.value)">
                                    <option value="">Semua</option>
                                    @foreach($angkatans as $angkatan)
                                        <option value="{{ $angkatan->id_angkatan }}"
                                            {{ request('angkatan') == $angkatan->id_angkatan ? 'selected' : '' }}>
                                            {{ $angkatan->tahun }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            
                            <div class="d-flex justify-content-end align-items-center gap-2 mb-3">
                                <a href="{{ route('data_alumni.template') }}" class="btn btn-warning">
                                    Download Template Excel
                                </a>
                                <!-- Tombol Buka Modal Import -->
                                <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#ImportDataAlumni">
                                    Import Data Alumni
                                </button>

                                <!-- Tombol Buka Modal tambah data-->
                                <button type="button" class="btn btn-primary" data-bs-toggle="modal"
                                    data-bs-target="#tambahdataalumni">
                                    Tambah Data Alumni
                                </button>
                            </div>
                            
                           
                            <!-- Modal Upload Excel -->
                            <div class="modal fade" id="ImportDataAlumni" tabindex="-1" aria-labelledby="ImportDataAlumniLabel" aria-hidden="true">
                                <div class="modal-dialog">
                                    <form action="{{ route('data_alumni.import') }}" method="POST" enctype="multipart/form-data">
                                        @csrf
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="ImportDataAlumniLabel">Import Data Alumni (Excel)</h5>
                                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Tutup"></button>
                                            </div>
                                            <div class="modal-body">
                                                <div class="mb-3">
                                                    <label for="file" class="form-label">Pilih File Excel (.xlsx/.xls)</label>
                                                    <input type="file" class="form-control" name="file" accept=".xlsx,.xls" required>
                                                </div>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="submit" class="btn btn-primary">Import</button>
                                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                            @if($jumlahPerluReview > 0)
                                <div class="alert alert-warning d-flex justify-content-between align-items-center" role="alert">
                                    <div>
                                        <strong>{{ $jumlahPerluReview }}</strong> data alumni perlu direview.
                                    </div>
                                    {{-- <a href="{{ route('admin.alumni.perlu-review') }}" class="btn btn-sm btn-outline-warning">
                                        Lihat Detail
                                    </a> --}}
                                     {{-- <button type="button" class="btn btn-sm btn-outline-warning" data-bs-toggle="collapse" data-bs-target="#perluReviewDetails">
                                    Lihat Detail
                                    </button> --}}
                                </div>
                            @endif
                            <div class="table-responsive">
                                <table class="table table-striped table-bordered" id="userTable">
                                    <thead align="center" valign="middle">
                                        <tr>
                                            <th>No</th>
                                            <th>Angkatan</th>
                                            <th>NIM</th>
                                            <th>Nama</th>
                                            <th>Masa Tunggu</th>
                                            <th>Pekerjaan</th>
                                            <th>Instansi</th>
                                            <th>LinkedIn</th>
                                            <th>Profesi Inforkom</th>
                                            <th>Lingkup Profesi</th>
                                            <th>Kualifikasi Bidang</th>
                                            <th>Kelompok Jabatan</th>
                                            <th>Status Review</th>
                                            <th colspan="2">Aksi</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($alumni as $dl)
                                            <tr align="center" valign="middle">
                                                <td>{{ $loop->iteration }}</td>
                                                <td>{{ $dl->tahunAngkatan->tahun ?? '-' }}</td>
                                                <td>{{ $dl->nim }}</td>
                                                <td>{{ $dl->nama }}</td>
                                                <td>{{ $dl->masa_tunggu }}</td>
                                                <td>{{ $dl->pekerjaan }}</td>
                                                <td>{{ $dl->instansi }}</td>
                                                <td>
                                                    @if(!empty($dl->link_linkedin) && $dl->link_linkedin !== '-')
                                                        <a href="{{ $dl->link_linkedin }}" target="_blank" rel="noopener noreferrer">
                                                            {{ $dl->link_linkedin }}
                                                        </a>
                                                    @else
                                                        -
                                                    @endif
                                                </td>
                                                <td>{{ $dl->Jenis_profesi }}</td>
                                                <td>{{ $dl->lingkup_pekerjaan }}</td>
                                                <td>{{ $dl->kualifikasiBidang->kualifikasi_bidang ?? '-' }}</td>
                                                <td>{{ $jabatanMap[$dl->jabatan] ?? '-' }}</td>                                         
                                                <td>
                                                     @if($dl->perlu_review)
                                                        <span class="badge bg-warning">Perlu Review</span>
                                                        <form action="{{ route('data_alumni.reset_review', $dl->id_alumni) }}" method="POST" style="display:inline;">
                                                            @csrf
                                                            @method('PUT')
                                                            <button type="submit" class="btn btn-success btn-sm" >Selesaikan Review</button>
                                                        </form>
                                                    @else
                                                        <span class="badge bg-success">Sudah Direview</span>
                                                    @endif
                                                     <!-- Tombol review untuk admin -->
                                                </td>
                                                <td>
                                                    <button type="button" class="btn btn-primary btn-sm"
                                                        data-bs-toggle="modal"
                                                        data-bs-target="#editdataalumni{{ $dl->id_alumni }}">
                                                        Edit
                                                    </button>
                                                    <td>
                                                    <button type="button" class="btn btn-danger btn-sm"
                                                        onclick="confirmDelete({{ $dl->id_alumni }})">
                                                        Hapus
                                                    </button>
                                                    </td>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>        
    </main>
    <!-- End #main -->

        <!-- Modal Tambah Data Alumni -->
    <div class="modal fade" id="tambahdataalumni" tabindex="-1" aria-labelledby="modalTambahAlumniLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg"> <!-- modal-lg agar lebih luas -->
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalTambahAlumniLabel">Tambah Data Alumni</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form action="{{ route('data_alumni.store') }}" method="POST">
                    @csrf
                    <div class="modal-body row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="nama" class="form-label">Nama</label>
                                <input type="text" class="form-control" id="nama" name="nama" required>
                            </div>
                            <div class="mb-3">
                                <label for="nim" class="form-label">NIM</label>
                                <input type="text" class="form-control" id="nim" name="nim" required>
                            </div>
                            <div class="mb-3">
                                <label for="angkatan" class="form-label">Angkatan</label>
                                <select class="form-select" id="angkatan" name="angkatan" required>
                                    <option value="" selected disabled>Pilih Angkatan</option>
                                    @foreach ($angkatans as $angkatan)
                                        <option value="{{ $angkatan->id_angkatan }}">{{ $angkatan->tahun }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="mb-3">
                                <label for="masa_tunggu" class="form-label">Masa Tunggu (bulan)</label>
                                <input type="number" class="form-control" id="masa_tunggu" name="masa_tunggu">
                            </div>
                            <div class="mb-3">
                                <label for="pekerjaan" class="form-label">Pekerjaan</label>
                                <input type="text" class="form-control" id="pekerjaan" name="pekerjaan">
                            </div>
                            <div class="mb-3">
                                <label for="instansi" class="form-label">Instansi</label>
                                <input type="text" class="form-control" id="instansi" name="instansi">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="link_linkedin" class="form-label">Link LinkedIn</label>
                                <input type="text" class="form-control" id="link_linkedin" name="link_linkedin">
                            </div>
                            {{-- <div class="mb-3">
                                <label for="Jenis_profesi" class="form-label">Profesi Inforkom</label>
                                <input type="text" class="form-control" id="Jenis_profesi" name="Jenis_profesi" required>
                            </div>
                            <div class="mb-3">
                                <label for="lingkup_pekerjaan" class="form-label">Lingkup Pekerjaan</label>
                                <input type="text" class="form-control" id="lingkup_pekerjaan" name="lingkup_pekerjaan" required>
                            </div> --}}
                            <div class="mb-3">
                                <label for="Jenis_profesi" class="form-label">Profesi Inforkom</label>
                                <select class="form-select" id="Jenis_profesi" name="Jenis_profesi" required>
                                    <option value="" disabled selected>Pilih Profesi</option>
                                    @foreach (['Programmer', 'Data Analyst', 'Wirausaha', 'Non IT', 'Tidak diketahui', 'Tidak bekerja', 'Pelajar', 'Wirausaha IT', 'Infokom'] as $profesi)
                                        <option value="{{ $profesi }}">{{ $profesi }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="mb-3">
                                <label for="lingkup_pekerjaan" class="form-label">Lingkup Pekerjaan</label>
                                <select class="form-select" id="lingkup_pekerjaan" name="lingkup_pekerjaan" required>
                                    <option value="" disabled selected>Pilih Lingkup Pekerjaan</option>
                                    @foreach (['Nasional', 'Internasional', 'Wirausaha'] as $lingkup)
                                        <option value="{{ $lingkup }}">{{ $lingkup }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="mb-3">
                                <label for="kualifikasi_bidang_kerja" class="form-label">Kualifikasi Bidang Kerja</label>
                                <select class="form-select" id="kualifikasi_bidang_kerja" name="kualifikasi_bidang_kerja" required>
                                    <option value="" selected disabled>Pilih Kualifikasi</option>
                                    @foreach ($kualifikasis as $kualifikasi)
                                        <option value="{{ $kualifikasi->id_kualifikasi }}">{{ $kualifikasi->kualifikasi_bidang }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="mb-3">
                                <label for="jabatan" class="form-label">Kelompok Jabatan</label>
                                <select class="form-select" id="id_kategori" name="jabatan" required>
                                    <option value="" selected disabled>Pilih Jabatan</option>
                                    @foreach ($jabatans as $jabatan)
                                        <option value="{{ $jabatan->id_kategori }}">{{ $jabatan->Kategori_bidang_kerja }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="modal-footer mt-3">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
                        <button type="submit" class="btn btn-primary">Simpan Data</button>
                    </div>
                </form>
            </div>
        </div>
    </div>


    <!-- Modal Edit -->
    @foreach ($alumni as $dl)
    <div class="modal fade" id="editdataalumni{{ $dl->id_alumni }}" tabindex="-1" 
        aria-labelledby="modalEditAlumniLabel{{ $dl->id_alumni }}" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalEditAlumniLabel{{ $dl->id_alumni }}">Edit Data Alumni</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form action="{{ route('data_alumni.update', $dl->id_alumni) }}" method="POST">
                    @csrf
                    @method('PUT')
                    <div class="modal-body row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="nama" class="form-label">Nama</label>
                                <input type="text" class="form-control" name="nama" value="{{ $dl->nama }}" required>
                            </div>
                            <div class="mb-3">
                                <label for="angkatan" class="form-label">Angkatan</label>
                                <select class="form-select" name="angkatan" required>
                                    @foreach ($angkatans as $angkatan)
                                        <option value="{{ $angkatan->id_angkatan }}" {{ $angkatan->id_angkatan == $dl->angkatan ? 'selected' : '' }}>
                                            {{ $angkatan->tahun }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="mb-3">
                                <label for="nim" class="form-label">NIM</label>
                                <input type="text" class="form-control" name="nim" value="{{ $dl->nim }}" required>
                            </div>
                            <div class="mb-3">
                                <label for="masa_tunggu" class="form-label">Masa Tunggu (bulan)</label>
                                <input type="number" class="form-control" name="masa_tunggu" value="{{ $dl->masa_tunggu }}">
                            </div>
                            <div class="mb-3">
                                <label for="pekerjaan" class="form-label">Pekerjaan</label>
                                <input type="text" class="form-control" name="pekerjaan" value="{{ $dl->pekerjaan }}">
                            </div>
                            <div class="mb-3">
                                <label for="instansi" class="form-label">Instansi</label>
                                <input type="text" class="form-control" name="instansi" value="{{ $dl->instansi }}">
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="link_linkedin" class="form-label">Link LinkedIn</label>
                                <input type="text" class="form-control" name="link_linkedin" value="{{ $dl->link_linkedin }}">
                            </div>
                            {{-- <div class="mb-3">
                                <label for="Jenis_profesi" class="form-label">Profesi Inforkom</label>
                                <input type="text" class="form-control" name="Jenis_profesi" value="{{ $dl->Jenis_profesi }}" required>
                            </div>
                            <div class="mb-3">
                                <label for="lingkup_pekerjaan" class="form-label">Lingkup Pekerjaan</label>
                                <input type="text" class="form-control" name="lingkup_pekerjaan" value="{{ $dl->lingkup_pekerjaan }}" required>
                            </div> --}}
                            <div class="mb-3">
                                <label for="Jenis_profesi" class="form-label">Profesi Inforkom</label>
                                <select class="form-select" name="Jenis_profesi" required>
                                    <option value="" disabled>Pilih Profesi</option>
                                    @foreach (['Programmer', 'Data Analyst', 'Wirausaha', 'Non IT', 'Tidak diketahui', 'Tidak bekerja', 'Pelajar', 'Wirausaha IT', 'Infokom'] as $profesi)
                                        <option value="{{ $profesi }}" {{ $dl->Jenis_profesi == $profesi ? 'selected' : '' }}>
                                            {{ $profesi }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="mb-3">
                                <label for="lingkup_pekerjaan" class="form-label">Lingkup Pekerjaan</label>
                                <select class="form-select" name="lingkup_pekerjaan" required>
                                    <option value="" disabled>Pilih Lingkup Pekerjaan</option>
                                    @foreach (['Nasional', 'Internasional', 'Wirausaha'] as $lingkup)
                                        <option value="{{ $lingkup }}" {{ $dl->lingkup_pekerjaan == $lingkup ? 'selected' : '' }}>
                                            {{ $lingkup }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="mb-3">
                                <label for="kualifikasi_bidang_kerja" class="form-label">Kualifikasi Bidang Kerja</label>
                                <select class="form-select" name="kualifikasi_bidang_kerja" required>
                                    @foreach ($kualifikasis as $kualifikasi)
                                        <option value="{{ $kualifikasi->id_kualifikasi }}" {{ $kualifikasi->id_kualifikasi == $dl->kualifikasi_bidang_kerja ? 'selected' : '' }}>
                                            {{ $kualifikasi->kualifikasi_bidang }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="mb-3">
                                <label for="jabatan" class="form-label">Jabatan</label>
                                <select class="form-select" name="jabatan" required>
                                    @foreach ($jabatans as $jabatan)
                                        <option value="{{ $jabatan->id_kategori }}" {{ $jabatan->id_kategori == $dl->jabatan ? 'selected' : '' }}>
                                            {{ $jabatan->Kategori_bidang_kerja }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="modal-footer mt-3">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
                        <button type="submit" class="btn btn-primary">Simpan Perubahan</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    @endforeach




    <!-- ======= Footer ======= -->
    @include('footer')

    <a href="#" class="back-to-top d-flex align-items-center justify-content-center"><i
            class="bi bi-arrow-up-short"></i></a>

    <!-- Vendor JS Files -->
    <script src="{{ asset('assets/vendor/apexcharts/apexcharts.min.js') }}"></script>
    <script src="{{ asset('assets/vendor/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
    <script src="{{ asset('assets/vendor/chart.js/chart.umd.js') }}"></script>
    <script src="{{ asset('assets/vendor/echarts/echarts.min.js') }}"></script>
    <script src="{{ asset('assets/vendor/quill/quill.js') }}"></script>
    <script src="{{ asset('assets/vendor/simple-datatables/simple-datatables.js') }}"></script>
    <script src="{{ asset('assets/vendor/tinymce/tinymce.min.js') }}"></script>
    <script src="{{ asset('assets/vendor/php-email-form/validate.js') }}"></script>

    <!-- Template Main JS File -->
    <script src="{{ asset('assets/js/main.js') }}"></script>

    <script>
        document.getElementById('searchInput').addEventListener('keyup', function() {
            let filter = this.value.toLowerCase();
            let rows = document.querySelectorAll('tbody tr');

            rows.forEach(row => {
                let text = row.innerText.toLowerCase();
                row.style.display = text.includes(filter) ? '' : 'none';
            });
        });
    </script>


    <!-- Ini buat sweet alert Konfirmasi Hapus-->
    <script>
        function confirmDelete(id_alumni) {
            Swal.fire({
                title: 'Apakah Anda Yakin?',
                text: "Data Alumni ini akan dihapus!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#3085d6',
                confirmButtonText: 'Ya, Hapus!',
                cancelButtonText: 'Batal'
            }).then((result) => {
                if (result.isConfirmed) {
                    // Mengirimkan request delete ke server
                    fetch(`/data_alumni/destroy/${id_alumni}`, {
                            method: 'DELETE',
                            headers: {
                                'X-CSRF-TOKEN': '{{ csrf_token() }}'
                            }
                        }).then(response => response.json())
                        .then(data => {
                            if (data.success) {
                                Swal.fire(
                                    'Dihapus!',
                                    'Data Alumni berhasil dihapus.',
                                    'success'
                                ).then(() => {
                                    location.reload(); // Reload halaman setelah konfirmasi berhasil
                                });
                            } else {
                                Swal.fire(
                                    'Gagal!',
                                    'Data Alumni gagal dihapus.',
                                    'error'
                                );
                            }
                        })
                        .catch(error => console.error('Terjadi kesalahan:', error));
                }
            })
        }
    </script>

    {{-- Untuk row Tampilan dropdwon angakat --}}

    <script>
        function filterByAngkatan(angkatan) {
            const url = new URL(window.location.href);
            if (angkatan) {
                url.searchParams.set('angkatan', angkatan);
            } else {
                url.searchParams.delete('angkatan');
            }
            window.location.href = url.toString();
        }
    </script>
    
    <!-- Ini buat datatables Custom Rownya dengan Sorting -->
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const table = document.getElementById("userTable");
            const tbody = table.querySelector("tbody");
            const rows = Array.from(tbody.querySelectorAll("tr"));
            const headers = table.querySelectorAll("thead th");
            const paginationContainer = document.createElement("div");
            paginationContainer.className = "pagination-container mt-3 d-flex justify-content-center";

            const searchInput = document.getElementById("searchInput");
            const entriesPerPageSelect = document.getElementById("entriesPerPage");

            let currentPage = 1;
            let rowsPerPage = parseInt(entriesPerPageSelect.value) || 5;
            let currentSortColumn = null;
            let currentSortDirection = "asc";

            function filterRows() {
                const filter = searchInput.value.toLowerCase();
                return rows.filter(row => row.innerText.toLowerCase().includes(filter));
            }

            function sortRows(columnIndex, direction) {
                rows.sort((a, b) => {
                    const aText = a.cells[columnIndex].innerText.trim().toLowerCase();
                    const bText = b.cells[columnIndex].innerText.trim().toLowerCase();

                    if (!isNaN(aText) && !isNaN(bText)) {
                        return direction === "asc" ? aText - bText : bText - aText;
                    }

                    return direction === "asc" ? aText.localeCompare(bText) : bText.localeCompare(aText);
                });
            }

            function displayTablePage(page) {
                const filteredRows = filterRows();
                const totalPages = Math.ceil(filteredRows.length / rowsPerPage);

                if (page > totalPages) page = totalPages;
                if (page < 1) page = 1;

                currentPage = page;
                tbody.innerHTML = "";

                if (entriesPerPageSelect.value === "all") {
                    filteredRows.forEach(row => tbody.appendChild(row));
                } else {
                    const startIndex = (page - 1) * rowsPerPage;
                    const endIndex = startIndex + rowsPerPage;

                    const rowsToDisplay = filteredRows.slice(startIndex, endIndex);
                    rowsToDisplay.forEach(row => tbody.appendChild(row));

                    updatePagination(page, totalPages);
                }
            }

            function updatePagination(currentPage, totalPages) {
                paginationContainer.innerHTML = "";

                if (totalPages <= 1) return;

                // Create a nav element for Bootstrap pagination
                const nav = document.createElement("nav");
                const ul = document.createElement("ul");
                ul.className = "pagination pagination-sm";
                
                // Previous button
                const prevLi = document.createElement("li");
                prevLi.className = "page-item" + (currentPage === 1 ? " disabled" : "");
                const prevLink = document.createElement("a");
                prevLink.className = "page-link";
                prevLink.href = "#";
                prevLink.textContent = "«";
                prevLink.addEventListener("click", (e) => {
                    e.preventDefault();
                    if (currentPage > 1) displayTablePage(currentPage - 1);
                });
                prevLi.appendChild(prevLink);
                ul.appendChild(prevLi);

                // Determine which page numbers to show
                let startPage = Math.max(1, currentPage - 2);
                let endPage = Math.min(totalPages, startPage + 4);
                
                // Adjust if we're showing less than 5 pages
                if (endPage - startPage < 4) {
                    startPage = Math.max(1, endPage - 4);
                }

                // First page button if not in range
                if (startPage > 1) {
                    const firstLi = document.createElement("li");
                    firstLi.className = "page-item";
                    const firstLink = document.createElement("a");
                    firstLink.className = "page-link";
                    firstLink.href = "#";
                    firstLink.textContent = "1";
                    firstLink.addEventListener("click", (e) => {
                        e.preventDefault();
                        displayTablePage(1);
                    });
                    firstLi.appendChild(firstLink);
                    ul.appendChild(firstLi);
                    
                    // Ellipsis if needed
                    if (startPage > 2) {
                        const ellipsisLi = document.createElement("li");
                        ellipsisLi.className = "page-item disabled";
                        const ellipsisSpan = document.createElement("a");
                        ellipsisSpan.className = "page-link";
                        ellipsisSpan.textContent = "...";
                        ellipsisLi.appendChild(ellipsisSpan);
                        ul.appendChild(ellipsisLi);
                    }
                }

                // Page numbers
                for (let i = startPage; i <= endPage; i++) {
                    const li = document.createElement("li");
                    li.className = "page-item" + (i === currentPage ? " active" : "");
                    const link = document.createElement("a");
                    link.className = "page-link";
                    link.href = "#";
                    link.textContent = i;
                    link.addEventListener("click", (e) => {
                        e.preventDefault();
                        displayTablePage(i);
                    });
                    li.appendChild(link);
                    ul.appendChild(li);
                }

                // Ellipsis and last page if needed
                if (endPage < totalPages) {
                    if (endPage < totalPages - 1) {
                        const ellipsisLi = document.createElement("li");
                        ellipsisLi.className = "page-item disabled";
                        const ellipsisSpan = document.createElement("a");
                        ellipsisSpan.className = "page-link";
                        ellipsisSpan.textContent = "...";
                        ellipsisLi.appendChild(ellipsisSpan);
                        ul.appendChild(ellipsisLi);
                    }
                    
                    const lastLi = document.createElement("li");
                    lastLi.className = "page-item";
                    const lastLink = document.createElement("a");
                    lastLink.className = "page-link";
                    lastLink.href = "#";
                    lastLink.textContent = totalPages;
                    lastLink.addEventListener("click", (e) => {
                        e.preventDefault();
                        displayTablePage(totalPages);
                    });
                    lastLi.appendChild(lastLink);
                    ul.appendChild(lastLi);
                }

                // Next button
                const nextLi = document.createElement("li");
                nextLi.className = "page-item" + (currentPage === totalPages ? " disabled" : "");
                const nextLink = document.createElement("a");
                nextLink.className = "page-link";
                nextLink.href = "#";
                nextLink.textContent = "»";
                nextLink.addEventListener("click", (e) => {
                    e.preventDefault();
                    if (currentPage < totalPages) displayTablePage(currentPage + 1);
                });
                nextLi.appendChild(nextLink);
                ul.appendChild(nextLi);

                nav.appendChild(ul);
                paginationContainer.appendChild(nav);
            }

            headers.forEach((header, index) => {
                header.addEventListener("click", () => {
                    if (currentSortColumn === index) {
                        currentSortDirection = currentSortDirection === "asc" ? "desc" : "asc";
                    } else {
                        currentSortColumn = index;
                        currentSortDirection = "asc";
                    }

                    sortRows(index, currentSortDirection);
                    displayTablePage(1);
                });
            });

            searchInput.addEventListener("keyup", () => displayTablePage(1));
            entriesPerPageSelect.addEventListener("change", function() {
                rowsPerPage = entriesPerPageSelect.value === "all" ? rows.length : parseInt(
                    entriesPerPageSelect.value);
                displayTablePage(1);
            });

            displayTablePage(1);
            table.parentNode.appendChild(paginationContainer);
        });
    </script>



</body>

</html>
