@extends('admin.layout.app')
@section('content')
    <!-- Content -->
    <main class="grow pt-5" id="content" role="content">
        <!-- Container -->
        <div class="kt-container-fixed" id="contentContainer">
        </div>

        <div class="kt-container-fixed">
            <div class="grid gap-5 lg:gap-7.5">
                <div class="kt-card kt-card-grid min-w-full">
                    <div class="kt-card-header flex-wrap gap-2">
                        <h3 class="kt-card-title text-sm">
                            Total {{$users->count()}} profiles
                        </h3>
                        <div class="flex flex-wrap gap-2 lg:gap-5">
                            <div class="flex">
                                <label class="kt-input">
                                    <i class="ki-filled ki-magnifier"></i>
                                    <input id="search-input" placeholder="Search users" type="text" value=""/>
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="kt-card-content">
                        <div class="grid" data-kt-datatable="false" data-kt-datatable-page-size="10">
                            <div class="kt-scrollable-x-auto">
                                <table class="kt-table table-auto kt-table-border" data-kt-datatable-table="false">
                                    <thead>
                                    <tr>
                                        <th class="min-w-[200px]">Profile</th>
                                        <th class="min-w-[225px]">Email</th>
                                        <th class="min-w-[100px]">Status</th>
                                        <th class="w-[60px]"></th>
                                    </tr>
                                    </thead>
                                    <tbody id="posts-table-body">
                                    @foreach($users as $user)
                                        <tr class="post-row">
                                            <td>
                                                <div class="flex items-center gap-2.5">
                                                    <img alt="" class="rounded-full size-7 shrink-0"
                                                         src="{{asset($user->getFirstMediaURL('profile_image') ?? '')}}"/>
                                                    <div class="flex flex-col">
                                                        <a class="text-sm font-medium text-mono hover:text-primary mb-px"
                                                           href="#">
                                                            {{$user->name ?? ''}}
                                                        </a>
                                                        <span class="text-sm text-secondary-foreground font-normal">
                {{$user->title ?? ''}}
                 </span>
                                                    </div>
                                                </div>
                                            </td>
                                            <td>{{ $user->email ?? '' }}</td>

                                            <td><input class="kt-switch kt-switch-sm" name="check" type="checkbox"
                                                       value="1"/></td>
                                            <td class="text-center">
                                                <div class="kt-menu flex-inline" data-kt-menu="true">
                                                    <div class="kt-menu-item" data-kt-menu-item-offset="0, 10px"
                                                         data-kt-menu-item-placement="bottom-end"
                                                         data-kt-menu-item-placement-rtl="bottom-start"
                                                         data-kt-menu-item-toggle="dropdown"
                                                         data-kt-menu-item-trigger="click">
                                                        <button
                                                            class="kt-menu-toggle kt-btn kt-btn-sm kt-btn-icon kt-btn-ghost">
                                                            <i class="ki-filled ki-dots-vertical text-lg">
                                                            </i>
                                                        </button>
                                                        <div
                                                            class="kt-menu-dropdown kt-menu-default w-full max-w-[175px]"
                                                            data-kt-menu-dismiss="true">
                                                            <div class="kt-menu-item">
                                                                <a class="kt-menu-link" href="#">
                    <span class="kt-menu-icon">
                     <i class="ki-filled ki-search-list">
                     </i>
                    </span>
                                                                    <span class="kt-menu-title">
                     View
                    </span>
                                                                </a>
                                                            </div>
                                                            <div class="kt-menu-item">
                                                                <a class="kt-menu-link" href="#">
                    <span class="kt-menu-icon">
                     <i class="ki-filled ki-file-up">
                     </i>
                    </span>
                                                                    <span class="kt-menu-title">
                     Export
                    </span>
                                                                </a>
                                                            </div>
                                                            <div class="kt-menu-separator">
                                                            </div>
                                                            <div class="kt-menu-item">
                                                                <a class="kt-menu-link" href="#">
                    <span class="kt-menu-icon">
                     <i class="ki-filled ki-pencil">
                     </i>
                    </span>
                                                                    <span class="kt-menu-title">
                     Edit
                    </span>
                                                                </a>
                                                            </div>
                                                            <div class="kt-menu-item">
                                                                <a class="kt-menu-link" href="#">
                    <span class="kt-menu-icon">
                     <i class="ki-filled ki-copy">
                     </i>
                    </span>
                                                                    <span class="kt-menu-title">
                     Make a copy
                    </span>
                                                                </a>
                                                            </div>
                                                            <div class="kt-menu-separator">
                                                            </div>
                                                            <div class="kt-menu-item">
                                                                <a class="kt-menu-link" href="#">
                    <span class="kt-menu-icon">
                     <i class="ki-filled ki-trash">
                     </i>
                    </span>
                                                                    <span class="kt-menu-title">
                     Remove
                    </span>
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    <div
                        class="kt-card-footer justify-center md:justify-between flex-col md:flex-row gap-5 text-secondary-foreground text-sm font-medium">
                        <div class="flex items-center gap-2 order-2 md:order-1">
                            Show
                            <select class="kt-select w-16" id="per-page-select" data-kt-datatable-size="false"
                                    name="perpage">
                                <option value="10">10</option>
                                <option value="25">25</option>
                                <option value="50">50</option>
                                <option value="100">100</option>
                            </select>
                            per page
                        </div>

                        <div class="flex items-center gap-4 order-1 md:order-2">
        <span id="data-info" data-kt-datatable-info="false">
            Showing 1 to 10 of 100 entries
        </span>

                            <div class="kt-datatable-pagination" data-kt-datatable-pagination="false">
                                <button id="prev-page" class="kt-btn kt-btn-sm kt-btn-light" disabled>Previous</button>
                                <span id="page-number">1</span> of <span id="total-pages">10</span>
                                <button id="next-page" class="kt-btn kt-btn-sm kt-btn-light">Next</button>
                            </div>
                        </div>
                    </div>

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

        <!-- End of Container -->
    </main>
    <!-- End of Content -->
@endsection
@push('script')
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const searchInput = document.getElementById("search-input");
            const tableBody = document.getElementById("posts-table-body");
            const tableRows = tableBody.querySelectorAll(".post-row");

            const perPageSelect = document.getElementById("per-page-select");
            const prevPageButton = document.getElementById("prev-page");
            const nextPageButton = document.getElementById("next-page");
            const pageNumberElement = document.getElementById("page-number");
            const totalPagesElement = document.getElementById("total-pages");
            const dataInfoElement = document.getElementById("data-info");

            let currentPage = 1;
            let perPage = parseInt(perPageSelect.value);
            let totalItems = tableRows.length; // Get total items from table rows
            let totalPages = Math.ceil(totalItems / perPage);

            // Update the displayed pagination information
            function updatePaginationInfo() {
                const start = (currentPage - 1) * perPage + 1;
                const end = Math.min(currentPage * perPage, totalItems);
                dataInfoElement.textContent = `Showing ${start} to ${end} of ${totalItems} entries`;

                pageNumberElement.textContent = currentPage;
                totalPagesElement.textContent = totalPages;

                prevPageButton.disabled = currentPage === 1;
                nextPageButton.disabled = currentPage === totalPages;
            }

            // Handle "Previous" button click
            prevPageButton.addEventListener("click", function () {
                if (currentPage > 1) {
                    currentPage--;
                    updatePaginationInfo();
                    loadPageData();
                }
            });

            // Handle "Next" button click
            nextPageButton.addEventListener("click", function () {
                if (currentPage < totalPages) {
                    currentPage++;
                    updatePaginationInfo();
                    loadPageData();
                }
            });

            // Handle "Per Page" change
            perPageSelect.addEventListener("change", function () {
                perPage = parseInt(perPageSelect.value);
                totalPages = Math.ceil(totalItems / perPage);
                currentPage = 1; // Reset to first page
                updatePaginationInfo();
                loadPageData();
            });

            // Search functionality
            searchInput.addEventListener("input", function () {
                const query = searchInput.value.toLowerCase();

                // Loop through all the table rows and hide/show based on search query
                tableRows.forEach(row => {
                    const name = row.querySelector("td:nth-child(1)").textContent.toLowerCase();
                    const email = row.querySelector("td:nth-child(2)").textContent.toLowerCase();
                    // Check if the query matches any column (company, name, title, email, phone)
                    if (name.includes(query) || email.includes(query)) {
                        row.style.display = ""; // Show the row if it matches
                    } else {
                        row.style.display = "none"; // Hide the row if it doesn't match
                    }
                });

                // Recalculate total items after search filtering
                totalItems = tableBody.querySelectorAll("tr:visible").length;
                totalPages = Math.ceil(totalItems / perPage);
                currentPage = 1; // Reset to first page after filtering
                updatePaginationInfo();
            });

            // Load data for the current page (simulate dynamic data loading)
            function loadPageData() {
                const startIndex = (currentPage - 1) * perPage;
                const endIndex = startIndex + perPage;

                tableRows.forEach((row, index) => {
                    if (index >= startIndex && index < endIndex) {
                        row.style.display = ""; // Show row if it is within the range
                    } else {
                        row.style.display = "none"; // Hide row if it is outside the range
                    }
                });
            }

            // Initial call to update the page info and load the first page
            updatePaginationInfo();
            loadPageData();
        });


    </script>
@endpush