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

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

    <title>Ellia Cellular</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 d-flex justify-content-between align-items-center">
            <div>
                <h1>Penjualan</h1>
                <nav>
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Home</a></li>
                        <li class="breadcrumb-item">Penjualan</li>
                    </ol>
                </nav>
            </div>
            <form method="GET" action="{{ route('income') }}">
                <div class="d-flex gap-2 justify-content-end mb-3">
                    <!-- Filter Bulan -->
                    <select class="form-select w-auto bg-white" name="bulan" onchange="this.form.submit()">
                        <option disabled selected>Pilih Bulan</option>
                        @foreach ([
        1 => 'Januari',
        2 => 'Februari',
        3 => 'Maret',
        4 => 'April',
        5 => 'Mei',
        6 => 'Juni',
        7 => 'Juli',
        8 => 'Agustus',
        9 => 'September',
        10 => 'Oktober',
        11 => 'November',
        12 => 'Desember',
    ] as $num => $name)
                            <option value="{{ $num }}" {{ $bulan == $num ? 'selected' : '' }}>
                                {{ $name }}
                            </option>
                        @endforeach
                    </select>

                    <!-- Filter Tahun -->
                    <select class="form-select w-auto bg-white" name="tahun" onchange="this.form.submit()">
                        <option disabled selected>Pilih Tahun</option>
                        @for ($y = 2024; $y <= now()->year; $y++)
                            <option value="{{ $y }}" {{ $tahun == $y ? 'selected' : '' }}>
                                {{ $y }}
                            </option>
                        @endfor
                    </select>
                </div>
            </form>

        </div>



        <section class="section dashboard">
            <div class="row">
                <!-- Left side columns -->
                <div class="col-lg-12">
                    <div class="row">
                        <!-- Total Penjualan Card -->
                        <div class="col-lg-4 col-md-8">
                            <div class="card info-card total-penjualan">
                                <div class="card-body">
                                    <h5 class="card-title">Total Penjualan</h5>
                                    <div class="d-flex align-items-center">
                                        <div
                                            class="card-icon rounded-circle d-flex align-items-center justify-content-center">
                                            <i class="bi bi-cash-stack"></i>
                                        </div>
                                        <div class="ps-3">
                                            <h6>Rp {{ number_format($totalPenjualan, 0, ',', '.') }}</h6>
                                            <span class="text-success small pt-1 fw-bold">
                                                Rp {{ number_format($rataRataPerHari, 0, ',', '.') }} Rata-Rata Per
                                                Hari
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div><!-- Total Penjualan Card -->


                        <!-- Produk Terjual Card -->
                        <div class="col-lg-4 col-md-8">
                            <div class="card info-card produk-terjual">
                                <div class="card-body">
                                    <h5 class="card-title">
                                        Produk Terjual
                                    </h5>
                                    <div class="d-flex align-items-center">
                                        <div
                                            class="card-icon rounded-circle d-flex align-items-center justify-content-center">
                                            <i class="bi bi-box-seam"></i>
                                        </div>
                                        <div class="ps-3">
                                            <h6>{{ $jumlahProdukTerjual }} Produk</h6>
                                            <span class="text-success small pt-1 fw-bold">
                                                {{ number_format($rataRataProdukPerHari, 0, ',', '.') }} Rata-Rata Per
                                                Hari
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div><!-- End Produk Terjual Card -->


                        <!-- Pembayaran Paling Sering Card Card -->
                        <div class="col-lg-4 col-md-8">
                            <div class="card info-card pembayaran-paling-sering">
                                <div class="card-body">
                                    <h5 class="card-title">
                                        Pembayaran Paling Sering
                                    </h5>
                                    <div class="d-flex align-items-center">
                                        <div
                                            class="card-icon rounded-circle d-flex align-items-center justify-content-center">
                                            <i class="bi bi-wallet2"></i>
                                        </div>
                                        <div class="ps-3">
                                            <h6>{{ $metodeBayarNama ?? 'Tidak Ada Data' }}</h6>
                                            <span class="text-success small pt-1 fw-bold">
                                                {{ $metodeBayarJumlah }} Transaksi
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div><!-- End Pembayaran Paling Sering Card -->

                    </div>
                </div>
            </div>
        </section>

        <section class="section">
            <div class="row">
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">Data Penjualan</h5>
                            <div class="mb-2">
                                <input type="text" class="form-control" id="searchInput" placeholder="Cari..."
                                    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="5">5</option>
                                    <option value="10">10</option>
                                    <option value="all">Semua</option>
                                </select>
                            </div>
                            {{-- <div class="d-flex justify-content-end align-items-center mb-3">
                                <button type="button" class="btn btn-success" data-bs-toggle="modal"
                                    data-bs-target="exportExcel">
                                    Export Excel
                                </button>
                            </div> --}}


                            <!-- Tombol Export Excel -->
{{-- <div class="d-flex justify-content-end align-items-center mb-3">
    <form action="{{ route('income.export') }}" method="GET">
        <input type="hidden" name="bulan" value="{{ $bulan }}">
        <input type="hidden" name="tahun" value="{{ $tahun }}">
        <button type="submit" class="btn btn-success">
            Export Excel
        </button>
    </form>
</div> --}}

                    <div class="d-flex justify-content-end gap-2 mb-3">
                        <form action="{{ route('income.export.excel') }}" method="GET">
                            <input type="hidden" name="bulan" value="{{ $bulan }}">
                            <input type="hidden" name="tahun" value="{{ $tahun }}">
                            <button type="submit" class="btn btn-success"><i class="bi bi-file-earmark-excel"></i> Export Excel</button>
                        </form>

                        <form action="{{ route('income.export.pdf') }}" method="GET" target="_blank">
                            <input type="hidden" name="bulan" value="{{ $bulan }}">
                            <input type="hidden" name="tahun" value="{{ $tahun }}">
                            <button type="submit" class="btn btn-danger"><i class="bi bi-file-earmark-pdf"></i> Export PDF</button>
                        </form>
                    </div>



                            <table class="table table-striped table-bordered" id="incomeTable">
                                <thead>
                                    <tr>
                                        <th>No</th>
                                        {{-- <th>Order ID</th> <!-- Tambahkan kolom Order ID --> --}}
                                        <th>Nama Produk</th>
                                        <th>Jumlah Item</th>
                                        <th>Total Bayar</th>
                                        <th>Metode Bayar</th>
                                        <th>Waktu dan Tanggal</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse ($cashier as $k)
                                        <tr>
                                            <td>{{ $loop->iteration }}</td>
                                            {{-- <td>#-{{ $k->order_id }}</td> --}}
                                            <td>{{ $k->Nama_Produk }}</td>
                                            <td>{{ $k->Jumlah_Item }}</td>
                                            <td>Rp {{ number_format($k->Total_Bayar, 0, ',', '.') }}</td>
                                            <td>{{ $k->Metode_Bayar }}</td>
                                            <td>{{ date('d-m-Y H:i:s', strtotime($k->Waktu_Tanggal)) }}</td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="6" class="text-center">Belum ada penjualan yang tersedia.
                                            </td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main><!-- End #main -->

    {{-- <section class="section">
            <div class="row">
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">Data Penjualan</h5>
                            <div class="mb-2">
                                <input type="text" class="form-control" id="searchInput" placeholder="Cari..."
                                    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="5">5</option>
                                    <option value="10">10</option>
                                    <option value="all">Semua</option>
                                </select>
                            </div>
                            <table class="table table-striped table-bordered" id="incomeTable">
                                <thead>
                                    <tr>
                                        <th>No</th>
                                        <th>Nama Produk</th>
                                        <th>Jumlah Item</th>
                                        <th>Total Bayar</th>
                                        <th>Metode Bayar</th>
                                        <th>Waktu dan Tanggal</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($cashier as $k)
                                        <tr>
                                            <td>{{ $loop->iteration }}</td>
                                            <td>{{ $k->Nama_Produk }}</td>
                                            <td>{{ $k->Jumlah_Item }}</td>
                                            <td>Rp {{ number_format($k->Total_Bayar, 0, ',', '.') }}</td>
                                            <td>{{ $k->Metode_Bayar }}</td>
                                            <td>{{ date('d-m-Y H:i:s', strtotime($k->Waktu_Tanggal)) }}</td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main><!-- End #main --> --}}

    {{-- <!-- Modal Tambah-->
    <div class="modal fade" id="tambahPengeluaran" tabindex="-1" aria-labelledby="modaltambahpengeluaranLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalTambahPengeluaranLabel">Tambah Data Pengeluaran</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form action="{{ route('expense.store') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <div class="mb-3">
                            <label for="nama_pengeluaran" class="form-label">Nama Pengeluaran</label>
                            <input type="text" class="form-control" id="nama_pengeluaran" name="nama_pengeluaran" required>
                        </div>
                        <div class="mb-3">
                            <label for="kategori_pengeluaran" class="form-label">Kategori Pengeluaran</label>
                            <select class="form-select" id="kategori_pengeluaran" name="kategori_pengeluaran" required>
                                <option value="Pengeluaran Bulanan">Pengeluaran Bulanan</option>
                                <option value="Pengeluaran Opsional">Pengeluaran Opsional</option>
                                <option value="Gaji Karyawan">Gaji Karyawan</option>
                                <option value="Lain-Lain">Lain-Lain</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="deskripsi_pengeluaran" class="form-label">Deskripsi Pengeluaran</label>
                            <input type="text" class="form-control" id="deskripsi_pengeluaran" name="deskripsi_pengeluaran" required>
                        </div>
                        <div class="mb-3">
                            <label for="total_pengeluaran" class="form-label">Total Pengeluaran</label>
                            <input type="text" class="form-control" id="total_pengeluaran" name="total_pengeluaran" required>
                        </div>
                        <div class="mb-3">
                            <label for="waktu" class="form-label">Waktu</label>
                            <input type="time" class="form-control" id="waktu" name="waktu" required onclick="this.showPicker()">
                        </div>
                        <div class="mb-3">
                            <label for="tanggal" class="form-label">Tanggal</label>
                            <input type="date" class="form-control" id="tanggal" name="tanggal" required onclick="this.showPicker()">
                        </div>
                </div>
                <div class="modal-footer">
                    <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 ($expense as $e)
    <!-- Modal Edit -->
    <div class="modal fade" id="editPengeluaran{{ $e->id }}" tabindex="-1" aria-labelledby="modalEditPengeluaranLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalEditPengeluaranLabel">Edit Data Pengeluaran</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form action="{{ route('expense.update', $e->id) }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        @method('PUT')
                        <div class="mb-3">
                            <label for="nama_pengeluaran" class="form-label">Nama Pengeluaran</label>
                            <input type="text" class="form-control" id="nama_pengeluaran" name="nama_pengeluaran" value="{{ $e->nama_pengeluaran }}" required>
                        </div>
                        <div class="mb-3">
                            <label for="kategori_pengeluaran" class="form-label">Kategori Pengeluaran</label>
                            <select class="form-select" id="kategori_pengeluaran" name="kategori_pengeluaran" required>
                                <option value="Pengeluaran Bulanan" {{ $e->kategori_pengeluaran == 'Pengeluaran Bulanan' ? 'selected' : '' }}>Pengeluaran Bulanan</option>
                                <option value="Pengeluaran Opsional" {{ $e->kategori_pengeluaran == 'Pengeluaran Opsional' ? 'selected' : '' }}>Pengeluaran Opsional</option>
                                <option value="Gaji Karyawan" {{ $e->kategori_pengeluaran == 'Gaji Karyawan' ? 'selected' : '' }}>Gaji Karyawan</option>
                                <option value="Lain-Lain" {{ $e->kategori_pengeluaran == 'Lain-Lain' ? 'selected' : '' }}>Lain-Lain</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="deskripsi_pengeluaran" class="form-label">Deskripsi Pengeluaran</label>
                            <input type="text" class="form-control" id="deskripsi_pengeluaran" name="deskripsi_pengeluaran" value="{{ $e->deskripsi_pengeluaran }}" required>
                        </div>
                        <div class="mb-3">
                            <label for="total_pengeluaran" class="form-label">Total Pengeluaran</label>
                            <input type="text" class="form-control" id="total_pengeluaran" name="total_pengeluaran" value="{{ $e->total_pengeluaran }}" required>
                        </div>
                        <div class="mb-3">
                            <label for="waktu" class="form-label">Waktu</label>
                            <input type="time" class="form-control" id="waktu" name="waktu" value="{{ \Carbon\Carbon::parse($e->waktu)->format('H:i') }}" required onclick="this.showPicker()">
                        </div>
                        <div class="mb-3">
                            <label for="tanggal" class="form-label">Tanggal</label>
                            <input type="date" class="form-control" id="tanggal" name="tanggal" value="{{ \Carbon\Carbon::parse($e->tanggal)->format('Y-m-d') }}" required onclick="this.showPicker()">
                        </div>
                </div>
                <div class="modal-footer">
                    <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>

    <!-- Ini buat sweet alert Konfirmasi Hapus-->
    <script>
        function confirmDelete(expenseId) {
            Swal.fire({
                title: 'Apakah Anda Yakin?',
                text: "Pengeluaran 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(`/expense/delete/${expenseId}`, {
                            method: 'DELETE',
                            headers: {
                                'X-CSRF-TOKEN': '{{ csrf_token() }}'
                            }
                        }).then(response => response.json())
                        .then(data => {
                            if (data.success) {
                                Swal.fire(
                                    'Dihapus!',
                                    'Pengeluaran berhasil dihapus.',
                                    'success'
                                ).then(() => {
                                    location.reload(); // Reload halaman setelah konfirmasi berhasil
                                });
                            } else {
                                Swal.fire(
                                    'Gagal!',
                                    'Pengeluaran gagal dihapus.',
                                    'error'
                                );
                            }
                        })
                        .catch(error => console.error('Terjadi kesalahan:', error));
                }
            })
        }
    </script>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const table = document.getElementById("incomeTable");
            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-end";

            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;

                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);
                currentPage = page;
            }

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

                if (totalPages <= 1) return;

                const maxPagesToShow = 5; // Maksimal 5 tombol pagination
                let startPage = Math.max(1, currentPage - Math.floor(maxPagesToShow / 2));
                let endPage = Math.min(totalPages, startPage + maxPagesToShow - 1);

                // Jika jumlah halaman kurang dari maxPagesToShow, sesuaikan startPage
                if (endPage - startPage + 1 < maxPagesToShow) {
                    startPage = Math.max(1, endPage - maxPagesToShow + 1);
                }

                for (let i = startPage; i <= endPage; i++) {
                    const button = document.createElement("button");
                    button.textContent = i;
                    button.className = `btn btn-sm btn-outline-primary mx-1 ${i === currentPage ? "active" : ""}`;
                    button.addEventListener("click", () => displayTablePage(i));
                    paginationContainer.appendChild(button);
                }
            }

            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>

    {{-- <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 datatables Custom Rownya dengan Sorting -->
    <script>
        document.addEventListener("DOMContentLoaded", function() {
    const table = document.getElementById("incomeTable");
    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-end";

    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;

        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);
        currentPage = page;
    }

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

        if (totalPages <= 1) return;

        for (let i = 1; i <= totalPages; i++) {
            const button = document.createElement("button");
            button.textContent = i;
            button.className = `btn btn-sm btn-outline-primary mx-1 ${i === currentPage ? "active" : ""}`;
            button.addEventListener("click", () => displayTablePage(i));
            paginationContainer.appendChild(button);
        }
    }

    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>
