const users = [{
    name: "Mike Richards",
    email: "mike@example.com",
    phone: "(555) 123-4567",
    status: "Active",
    img: "https://randomuser.me/api/portraits/men/20.jpg",

}, {
    name: "Jane Doe",
    email: "mike@example.com",
    phone: "(555) 123-4567",
    status: "Active",
    img: "https://randomuser.me/api/portraits/men/20.jpg",
},
{
    name: "John Smith",
    email: "mike@example.com",
    phone: "(555) 123-4567",
    status: "Inactive",
    img: "https://randomuser.me/api/portraits/men/20.jpg",

}, {
    name: "Emily Johnson",
    email: "mike@example.com",
    phone: "(555) 123-4567",
    status: "Active",
    img: "https://randomuser.me/api/portraits/men/20.jpg",
},
{
    name: "Michael Brown",
    email: "mike@example.com",
    phone: "(555) 123-4567",
    status: "Active",
    img: "https://randomuser.me/api/portraits/men/20.jpg",

}, {
    name: "Sarah Davis",
    email: "mike@example.com",
    phone: "(555) 123-4567",
    status: "Inactive",
    img: "https://randomuser.me/api/portraits/men/20.jpg",
},
{
    name: "   David Wilson",
    email: "mike@example.com",
    phone: "(555) 123-4567",
    status: "Active",
    img: "https://randomuser.me/api/portraits/men/20.jpg",

},
{
    name: "Mike Richards",
    email: "mike@example.com",
    phone: "(555) 123-4567",
    status: "Active",
    img: "https://randomuser.me/api/portraits/men/20.jpg",

}, {
    name: "Jane Doe",
    email: "mike@example.com",
    phone: "(555) 123-4567",
    status: "Active",
    img: "https://randomuser.me/api/portraits/men/20.jpg",
},
{
    name: "John Smith",
    email: "mike@example.com",
    phone: "(555) 123-4567",
    status: "Inactive",
    img: "https://randomuser.me/api/portraits/men/20.jpg",

}, {
    name: "Emily Johnson",
    email: "mike@example.com",
    phone: "(555) 123-4567",
    status: "Active",
    img: "https://randomuser.me/api/portraits/men/20.jpg",
},
{
    name: "Michael Brown",
    email: "mike@example.com",
    phone: "(555) 123-4567",
    status: "Active",
    img: "https://randomuser.me/api/portraits/men/20.jpg",

}, {
    name: "Sarah Davis",
    email: "mike@example.com",
    phone: "(555) 123-4567",
    status: "Inactive",
    img: "https://randomuser.me/api/portraits/men/20.jpg",
},
{
    name: "   David Wilson",
    email: "mike@example.com",
    phone: "(555) 123-4567",
    status: "Active",
    img: "https://randomuser.me/api/portraits/men/20.jpg",

},
{
    name: "Mike Richards",
    email: "mike@example.com",
    phone: "(555) 123-4567",
    status: "Active",
    img: "https://randomuser.me/api/portraits/men/20.jpg",

}, {
    name: "Jane Doe",
    email: "mike@example.com",
    phone: "(555) 123-4567",
    status: "Active",
    img: "https://randomuser.me/api/portraits/men/20.jpg",
},
{
    name: "John Smith",
    email: "mike@example.com",
    phone: "(555) 123-4567",
    status: "Inactive",
    img: "https://randomuser.me/api/portraits/men/20.jpg",

}, {
    name: "Emily Johnson",
    email: "mike@example.com",
    phone: "(555) 123-4567",
    status: "Active",
    img: "https://randomuser.me/api/portraits/men/20.jpg",
},
{
    name: "Michael Brown",
    email: "mike@example.com",
    phone: "(555) 123-4567",
    status: "Active",
    img: "https://randomuser.me/api/portraits/men/20.jpg",

}, {
    name: "Sarah Davis",
    email: "mike@example.com",
    phone: "(555) 123-4567",
    status: "Inactive",
    img: "https://randomuser.me/api/portraits/men/20.jpg",
},
{
    name: "   David Wilson",
    email: "mike@example.com",
    phone: "(555) 123-4567",
    status: "Active",
    img: "https://randomuser.me/api/portraits/men/20.jpg",

},
{
    name: "Mike Richards",
    email: "mike@example.com",
    phone: "(555) 123-4567",
    status: "Active",
    img: "https://randomuser.me/api/portraits/men/20.jpg",

}, {
    name: "Jane Doe",
    email: "mike@example.com",
    phone: "(555) 123-4567",
    status: "Active",
    img: "https://randomuser.me/api/portraits/men/20.jpg",
},
{
    name: "John Smith",
    email: "mike@example.com",
    phone: "(555) 123-4567",
    status: "Inactive",
    img: "https://randomuser.me/api/portraits/men/20.jpg",

}, {
    name: "Emily Johnson",
    email: "mike@example.com",
    phone: "(555) 123-4567",
    status: "Active",
    img: "https://randomuser.me/api/portraits/men/20.jpg",
},
{
    name: "Michael Brown",
    email: "mike@example.com",
    phone: "(555) 123-4567",
    status: "Active",
    img: "https://randomuser.me/api/portraits/men/20.jpg",

}, {
    name: "Sarah Davis",
    email: "mike@example.com",
    phone: "(555) 123-4567",
    status: "Inactive",
    img: "https://randomuser.me/api/portraits/men/20.jpg",
},
{
    name: "   David Wilson",
    email: "mike@example.com",
    phone: "(555) 123-4567",
    status: "Active",
    img: "https://randomuser.me/api/portraits/men/20.jpg",

},
{
    name: "Mike Richards",
    email: "mike@example.com",
    phone: "(555) 123-4567",
    status: "Active",
    img: "https://randomuser.me/api/portraits/men/20.jpg",

}, {
    name: "Jane Doe",
    email: "mike@example.com",
    phone: "(555) 123-4567",
    status: "Active",
    img: "https://randomuser.me/api/portraits/men/20.jpg",
},
{
    name: "John Smith",
    email: "mike@example.com",
    phone: "(555) 123-4567",
    status: "Inactive",
    img: "https://randomuser.me/api/portraits/men/20.jpg",

}, {
    name: "Emily Johnson",
    email: "mike@example.com",
    phone: "(555) 123-4567",
    status: "Active",
    img: "https://randomuser.me/api/portraits/men/20.jpg",
},
{
    name: "Michael Brown",
    email: "mike@example.com",
    phone: "(555) 123-4567",
    status: "Active",
    img: "https://randomuser.me/api/portraits/men/20.jpg",

}, {
    name: "Sarah Davis",
    email: "mike@example.com",
    phone: "(555) 123-4567",
    status: "Inactive",
    img: "https://randomuser.me/api/portraits/men/20.jpg",
},
{
    name: "   David Wilson",
    email: "mike@example.com",
    phone: "(555) 123-4567",
    status: "Active",
    img: "https://randomuser.me/api/portraits/men/20.jpg",

},
{
    name: "Mike Richards",
    email: "mike@example.com",
    phone: "(555) 123-4567",
    status: "Active",
    img: "https://randomuser.me/api/portraits/men/20.jpg",

}, {
    name: "Jane Doe",
    email: "mike@example.com",
    phone: "(555) 123-4567",
    status: "Active",
    img: "https://randomuser.me/api/portraits/men/20.jpg",
},
{
    name: "John Smith",
    email: "mike@example.com",
    phone: "(555) 123-4567",
    status: "Inactive",
    img: "https://randomuser.me/api/portraits/men/20.jpg",

}, {
    name: "Emily Johnson",
    email: "mike@example.com",
    phone: "(555) 123-4567",
    status: "Active",
    img: "https://randomuser.me/api/portraits/men/20.jpg",
},
{
    name: "Michael Brown",
    email: "mike@example.com",
    phone: "(555) 123-4567",
    status: "Active",
    img: "https://randomuser.me/api/portraits/men/20.jpg",

}, {
    name: "Sarah Davis",
    email: "mike@example.com",
    phone: "(555) 123-4567",
    status: "Inactive",
    img: "https://randomuser.me/api/portraits/men/20.jpg",
},
{
    name: "   David Wilson",
    email: "mike@example.com",
    phone: "(555) 123-4567",
    status: "Active",
    img: "https://randomuser.me/api/portraits/men/20.jpg",

},
{
    name: "Mike Richards",
    email: "mike@example.com",
    phone: "(555) 123-4567",
    status: "Active",
    img: "https://randomuser.me/api/portraits/men/20.jpg",

}, {
    name: "Jane Doe",
    email: "mike@example.com",
    phone: "(555) 123-4567",
    status: "Active",
    img: "https://randomuser.me/api/portraits/men/20.jpg",
},
{
    name: "John Smith",
    email: "mike@example.com",
    phone: "(555) 123-4567",
    status: "Inactive",
    img: "https://randomuser.me/api/portraits/men/20.jpg",

}, {
    name: "Emily Johnson",
    email: "mike@example.com",
    phone: "(555) 123-4567",
    status: "Active",
    img: "https://randomuser.me/api/portraits/men/20.jpg",
},
{
    name: "Michael Brown",
    email: "mike@example.com",
    phone: "(555) 123-4567",
    status: "Active",
    img: "https://randomuser.me/api/portraits/men/20.jpg",

}, {
    name: "Sarah Davis",
    email: "mike@example.com",
    phone: "(555) 123-4567",
    status: "Inactive",
    img: "https://randomuser.me/api/portraits/men/20.jpg",
},
{
    name: "   David Wilson",
    email: "mike@example.com",
    phone: "(555) 123-4567",
    status: "Active",
    img: "https://randomuser.me/api/portraits/men/20.jpg",

},
{
    name: "Mike Richards",
    email: "mike@example.com",
    phone: "(555) 123-4567",
    status: "Active",
    img: "https://randomuser.me/api/portraits/men/20.jpg",

}, {
    name: "Jane Doe",
    email: "mike@example.com",
    phone: "(555) 123-4567",
    status: "Active",
    img: "https://randomuser.me/api/portraits/men/20.jpg",
},
{
    name: "John Smith",
    email: "mike@example.com",
    phone: "(555) 123-4567",
    status: "Inactive",
    img: "https://randomuser.me/api/portraits/men/20.jpg",

}, {
    name: "Emily Johnson",
    email: "mike@example.com",
    phone: "(555) 123-4567",
    status: "Active",
    img: "https://randomuser.me/api/portraits/men/20.jpg",
},
{
    name: "Michael Brown",
    email: "mike@example.com",
    phone: "(555) 123-4567",
    status: "Active",
    img: "https://randomuser.me/api/portraits/men/20.jpg",

}, {
    name: "Sarah Davis",
    email: "mike@example.com",
    phone: "(555) 123-4567",
    status: "Inactive",
    img: "https://randomuser.me/api/portraits/men/20.jpg",
},
{
    name: "   David Wilson",
    email: "mike@example.com",
    phone: "(555) 123-4567",
    status: "Active",
    img: "https://randomuser.me/api/portraits/men/20.jpg",

},
{
    name: "Mike Richards",
    email: "mike@example.com",
    phone: "(555) 123-4567",
    status: "Active",
    img: "https://randomuser.me/api/portraits/men/20.jpg",

}, {
    name: "Jane Doe",
    email: "mike@example.com",
    phone: "(555) 123-4567",
    status: "Active",
    img: "https://randomuser.me/api/portraits/men/20.jpg",
},
{
    name: "John Smith",
    email: "mike@example.com",
    phone: "(555) 123-4567",
    status: "Inactive",
    img: "https://randomuser.me/api/portraits/men/20.jpg",

}, {
    name: "Emily Johnson",
    email: "mike@example.com",
    phone: "(555) 123-4567",
    status: "Active",
    img: "https://randomuser.me/api/portraits/men/20.jpg",
},
{
    name: "Michael Brown",
    email: "mike@example.com",
    phone: "(555) 123-4567",
    status: "Active",
    img: "https://randomuser.me/api/portraits/men/20.jpg",

}, {
    name: "Sarah Davis",
    email: "mike@example.com",
    phone: "(555) 123-4567",
    status: "Inactive",
    img: "https://randomuser.me/api/portraits/men/20.jpg",
},
{
    name: "   David Wilson",
    email: "mike@example.com",
    phone: "(555) 123-4567",
    status: "Active",
    img: "https://randomuser.me/api/portraits/men/20.jpg",

},
{
    name: "Mike Richards",
    email: "mike@example.com",
    phone: "(555) 123-4567",
    status: "Active",
    img: "https://randomuser.me/api/portraits/men/20.jpg",

}, {
    name: "Jane Doe",
    email: "mike@example.com",
    phone: "(555) 123-4567",
    status: "Active",
    img: "https://randomuser.me/api/portraits/men/20.jpg",
},
{
    name: "John Smith",
    email: "mike@example.com",
    phone: "(555) 123-4567",
    status: "Inactive",
    img: "https://randomuser.me/api/portraits/men/20.jpg",

}, {
    name: "Emily Johnson",
    email: "mike@example.com",
    phone: "(555) 123-4567",
    status: "Active",
    img: "https://randomuser.me/api/portraits/men/20.jpg",
},
{
    name: "Michael Brown",
    email: "mike@example.com",
    phone: "(555) 123-4567",
    status: "Active",
    img: "https://randomuser.me/api/portraits/men/20.jpg",

}, {
    name: "Sarah Davis",
    email: "mike@example.com",
    phone: "(555) 123-4567",
    status: "Inactive",
    img: "https://randomuser.me/api/portraits/men/20.jpg",
},
{
    name: "   David Wilson",
    email: "mike@example.com",
    phone: "(555) 123-4567",
    status: "Active",
    img: "https://randomuser.me/api/portraits/men/20.jpg",

},
{
    name: "Mike Richards",
    email: "mike@example.com",
    phone: "(555) 123-4567",
    status: "Active",
    img: "https://randomuser.me/api/portraits/men/20.jpg",

}, {
    name: "Jane Doe",
    email: "mike@example.com",
    phone: "(555) 123-4567",
    status: "Active",
    img: "https://randomuser.me/api/portraits/men/20.jpg",
},
{
    name: "John Smith",
    email: "mike@example.com",
    phone: "(555) 123-4567",
    status: "Inactive",
    img: "https://randomuser.me/api/portraits/men/20.jpg",

}, {
    name: "Emily Johnson",
    email: "mike@example.com",
    phone: "(555) 123-4567",
    status: "Active",
    img: "https://randomuser.me/api/portraits/men/20.jpg",
},
{
    name: "Michael Brown",
    email: "mike@example.com",
    phone: "(555) 123-4567",
    status: "Active",
    img: "https://randomuser.me/api/portraits/men/20.jpg",

}, {
    name: "Sarah Davis",
    email: "mike@example.com",
    phone: "(555) 123-4567",
    status: "Inactive",
    img: "https://randomuser.me/api/portraits/men/20.jpg",
},
{
    name: "   David Wilson",
    email: "mike@example.com",
    phone: "(555) 123-4567",
    status: "Active",
    img: "https://randomuser.me/api/portraits/men/20.jpg",

},
];
// document.addEventListener('DOMContentLoaded', function (e) {
//     let searchQuery = "";
//     let currentPage = 1;
//     const rowsPerPage = 7;
//     let selectedFilter = "All Users";

//     let check = document.querySelectorAll('.dropdown-item').forEach(item => {
//         item.addEventListener('click', function (e) {
//             console.log("clicked");
//             e.preventDefault();

//             const value = this.textContent.trim();
//             selectedFilter = value;

//             document.getElementById('dropdownBtn').textContent = value;

//             currentPage = 1; // reset pagination after filter
//             renderTable();
//             renderPagination();
//         });

//     });
//     console.log("check", check);


//     document.getElementById("searchInput").addEventListener("input", function () {

//         searchQuery = this.value.toLowerCase().trim();
//         // console.log("searchQuery", searchQuery);

//         currentPage = 1; // reset to first page when searching
//         renderTable();
//         renderPagination();
//     });


//     function renderTable() {

//         const tbody = document.getElementById("userTableBody");
//         tbody.innerHTML = "";

//         // ---- APPLY FILTER ----
//         let filteredUsers = users;

//         if (selectedFilter === "Active") {
//             filteredUsers = users.filter(u => u.status === "Active");
//         } else if (selectedFilter === "Inactive") {
//             filteredUsers = users.filter(u => u.status === "Inactive");
//         }

//         // ---- APPLY SEARCH ----
//         filteredUsers = filteredUsers.filter(u =>
//             u.name.toLowerCase().startsWith(searchQuery) ||
//             u.email.toLowerCase().startsWith(searchQuery)
//         );

//         // ---- PAGINATION ----
//         const start = (currentPage - 1) * rowsPerPage;
//         const end = start + rowsPerPage;

//         const visibleUsers = filteredUsers.slice(start, end);

//         visibleUsers.forEach(u => {
//             tbody.innerHTML += `
//       <tr>
//         <td>
//           <div class="user-info">
//             <img src="${u.img}">
//             <span>${u.name}</span>
//           </div>
//         </td>
//         <td>${u.email}</td>
//         <td>${u.phone}</td>
//         <td>${u.status}</td>
//         <td>
//           <div class="btn-wrapper">
//             <button class="btn-secondary">Edit</button>
//             <button class="btn-secondary btn-delete"><img src="./assets/images/delete.png"></button>
//           </div>
//         </td>
//       </tr>
//     `;
//         });
//     }


//     function renderPagination() {
//         const pageArea = document.getElementById("paginationArea");
//         pageArea.innerHTML = "";



//         let filteredUsers = users;

//         if (selectedFilter === "Active") {
//             filteredUsers = users.filter(u => u.status === "Active");
//         } else if (selectedFilter === "Inactive") {
//             filteredUsers = users.filter(u => u.status === "Inactive");
//         }

//         // Apply search here too
//         filteredUsers = filteredUsers.filter(u =>
//             u.name.toLowerCase().includes(searchQuery) ||
//             u.email.toLowerCase().includes(searchQuery)
//         );

//         const totalPages = Math.ceil(filteredUsers.length / rowsPerPage);
//         if (totalPages === 0) return;

//         // ---------- PREVIOUS BUTTON ----------
//         pageArea.innerHTML += `
//     <div class="page-btn ${currentPage === 1 ? "disabled" : ""}">
//       <img src="./assets/images/Icon-prev.png" 
//            onclick="${currentPage === 1 ? "" : `changePage(${currentPage - 1})`}" />
//     </div>
//   `;

//         // ---------- ALWAYS SHOW FIRST PAGE ----------
//         pageArea.innerHTML += `
//     <div class="page-btn ${currentPage === 1 ? "active" : ""}" 
//          onclick="changePage(1)">01</div>
//   `;

//         // ---------- LEFT ELLIPSIS ----------
//         if (currentPage > 2) {
//             pageArea.innerHTML += `<div class="page-btn">...</div>`;
//         }

//         // ---------- MIDDLE PAGE NUMBERS ----------
//         for (let i = currentPage - 1; i <= currentPage + 1; i++) {
//             if (i > 1 && i < totalPages) {
//                 pageArea.innerHTML += `
//         <div class="page-btn ${i === currentPage ? "active" : ""}"
//              onclick="changePage(${i})">
//              ${i.toString().padStart(2, "0")}
//         </div>
//       `;
//             }
//         }

//         // ---------- RIGHT ELLIPSIS ----------
//         if (currentPage < totalPages - 2) {
//             pageArea.innerHTML += `<div class="page-btn">...</div>`;
//         }

//         // ---------- ALWAYS SHOW LAST PAGE ----------
//         if (totalPages > 1) {
//             pageArea.innerHTML += `
//       <div class="page-btn ${currentPage === totalPages ? "active" : ""}"
//            onclick="changePage(${totalPages})">
//            ${totalPages.toString().padStart(2, "0")}
//       </div>
//     `;
//         }

//         // ---------- NEXT BUTTON ----------
//         pageArea.innerHTML += `
//     <div class="page-btn ${currentPage === totalPages ? "disabled" : ""}">
//       <img src="./assets/images/Icon-next.png" 
//            onclick="${currentPage === totalPages ? "" : `changePage(${currentPage + 1})`}" />
//     </div>
//   `;
//     }

//     window.changePage = function (page) {
//         currentPage = page;
//         renderTable();
//         renderPagination();
//     };

//     renderTable();
//     renderPagination();
// });

document.addEventListener("DOMContentLoaded", () => {
    let searchQuery = "";
    let currentPage = 1;
    const rowsPerPage = 7;
    let selectedFilter = "All Users";

    const filterSelect = document.getElementById("userFilter");

    filterSelect.addEventListener("change", () => {
        selectedFilter = filterSelect.value;
        currentPage = 1;
        renderTable();
        renderPagination();
    });

    document.getElementById("searchInput").addEventListener("input", function () {
        searchQuery = this.value.toLowerCase().trim();
        currentPage = 1;
        renderTable();
        renderPagination();
    });

    function renderTable() {
        const tbody = document.getElementById("userTableBody");
        tbody.innerHTML = "";

        let filteredUsers = users;

        if (selectedFilter === "Active") {
            filteredUsers = users.filter(u => u.status === "Active");
        } else if (selectedFilter === "Inactive") {
            filteredUsers = users.filter(u => u.status === "Inactive");
        }

        filteredUsers = filteredUsers.filter(u =>
            u.name.toLowerCase().startsWith(searchQuery) ||
            u.email.toLowerCase().startsWith(searchQuery)
        );

        const start = (currentPage - 1) * rowsPerPage;
        const visibleUsers = filteredUsers.slice(start, start + rowsPerPage);

        visibleUsers.forEach(u => {
            tbody.innerHTML += `
                <tr>
                    <td>
                        <div class="user-info">
                            <img src="${u.img}">
                            <span>${u.name}</span>
                        </div>
                    </td>
                    <td>${u.email}</td>
                    <td>${u.phone}</td>
                    <td>${u.status}</td>
                    <td>
                        <div class="btn-wrapper">
                            <button class="btn-secondary">Edit</button>
                            <button class="btn-secondary btn-delete">
                                <img src="./assets/images/delete.png">
                            </button>
                        </div>
                    </td>
                </tr>`;
        });
    }

    function renderPagination() {
        const pageArea = document.getElementById("paginationArea");
        pageArea.innerHTML = "";

        let filteredUsers = users;

        if (selectedFilter === "Active") {
            filteredUsers = users.filter(u => u.status === "Active");
        } else if (selectedFilter === "Inactive") {
            filteredUsers = users.filter(u => u.status === "Inactive");
        }

        filteredUsers = filteredUsers.filter(u =>
            u.name.toLowerCase().includes(searchQuery) ||
            u.email.toLowerCase().includes(searchQuery)
        );

        const totalPages = Math.ceil(filteredUsers.length / rowsPerPage);
        if (totalPages === 0) return;

        pageArea.innerHTML += `
            <div class="page-btn ${currentPage === 1 ? "disabled" : ""}"
                 onclick="${currentPage === 1 ? "" : `changePage(${currentPage - 1})`}">
                <img src="./assets/images/Icon-prev.png">
            </div>
        `;

        for (let i = 1; i <= totalPages; i++) {
            pageArea.innerHTML += `
                <div class="page-btn ${i === currentPage ? "active" : ""}"
                     onclick="changePage(${i})">
                    ${i.toString().padStart(2, "0")}
                </div>
            `;
        }

        pageArea.innerHTML += `
            <div class="page-btn ${currentPage === totalPages ? "disabled" : ""}"
                 onclick="${currentPage === totalPages ? "" : `changePage(${currentPage + 1})`}">
                <img src="./assets/images/Icon-next.png">
            </div>
        `;
    }

    window.changePage = function (page) {
        currentPage = page;
        renderTable();
        renderPagination();
    };

    renderTable();
    renderPagination();
});
