@include('Partials.sidebar')

<section class="main_content dashboard_part large_header_bg">

    @include('Partials.header')

    <div class="main_content_iner default_main_contaner_iner">

        <div class="page-body">
            <div class="container-fluid">
                <div class="page-title">
                    <div class="row">
                        <div class="col-sm-6 ps-0">
                            <h3>Wishlists</h3>
                        </div>
                        <div class="col-sm-6 pe-0">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item">
                                    <a href="/">
                                        <i class="fas fa-home"></i>
                                    </a>
                                </li>
                                <li class="breadcrumb-item active">
                                    <a href="/wishlist/wishlist-dashboard">Wishlists</a>
                                </li>
                                {{-- <li class="breadcrumb-item">
                                    <a href="/plot-details/create">New</a>
                                </li>
                                <li class="breadcrumb-item">
                                    <a href="/plotdetails/bulkupload">Bulk Upload</a>
                                </li> --}}

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

            <div class="container-fluid">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="card">
                            <div class="card-header pb-0 card-no-border">
                                <h3>Lorem ipsum dolor</h3>
                                <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                                    incididunt
                                    ut labore et dolore magna aliqua.</span>
                                <span>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
                                    ex ea
                                    commodo consequat. </span>
                            </div>
                            <div class="card-body">
                                <div class="dataTables_length" id="basic-1_length">
                                    <label>Show
                                        <select name="basic-1_length" aria-controls="basic-1" id="rowsPerPageSelect">
                                            <option value="5">5</option>
                                            <option value="10">10</option>
                                            <option value="25">25</option>
                                            <option value="50">50</option>
                                            <option value="100">100</option>
                                        </select>
                                        entries
                                    </label>
                                </div>
                                <div id="basic-1_filter" class="dataTables_filter">
                                    <label>Search:<input type="search" id="searchInput" class="" placeholder="" aria-controls="basic-1"></label>
                                </div>


                                <table class="display dataTable no-footer" id="data-table" role="grid"
                                    aria-describedby="basic-1_info">
                                    <thead>
                                        <tr class="table-header">
                                            <th>Plot No</th>
                                            <th>Area</th>
                                            <th>Plot Type</th>
                                            <th>Price</th>
                                            <th>Direction</th>
                                            <th>Customer Name</th>
                                            <th>Mail Id</th>
                                            <th>Phone</th>
                                            <th>Project</th>
                                            <th>Actions</th>
                                        </tr>
                                    </thead>
                                    <tbody class="projects-table">
                                        @foreach ($wishLists as $index => $wishList)
                                            <tr class="{{ $index % 2 === 0 ? 'odd' : 'even' }}">
                                                <td>{{ $wishList->plot_number }}</td>
                                                <td>{{ $wishList->area }} / Sqft</td>
                                                <td>{{ $wishList->plot_type }}</td>
                                                <td>Rs. {{ $wishList->price }}</td>
                                                <td>{{ $wishList->direction }}</td>
                                                <td>{{ $wishList->name }}</td>
                                                <td>{{ $wishList->user->email }}</td>
                                                <td>{{ $wishList->user->phone }}</td>
                                                <td>{{ $wishList->project->project_name }}</td>
                                                <td class="edit-delete">
                                                    <a href="/send-mailtouser/{{ $wishList->id }}"><i class="fas fa-envelope"></i></a>

                                                    <form action="/wishlist/{{ $wishList->id }}/delete"
                                                        method="POST">
                                                        @csrf
                                                        @method('DELETE')
                                                        <button class="btn" type="submit"><i
                                                                class="fas fa-trash-alt"></i></button>
                                                    </form>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                                <div class="pagination" id="pagination-controls">
                                    <!-- Pagination controls will be inserted here dynamically -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</section>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const plots = @json($wishLists);
        // console.log(plots);

        const rowsPerPageSelect = document.getElementById('rowsPerPageSelect');
        const searchInput = document.getElementById('searchInput');

        let rowsPerPage = parseInt(rowsPerPageSelect.value);
        let currentPage = 1;

        rowsPerPageSelect.addEventListener('change', function() {
            rowsPerPage = parseInt(this.value);
            currentPage = 1; // Reset to first page
            displayTable(plots, currentPage, rowsPerPage, searchInput.value);
            setupPagination(plots, rowsPerPage, searchInput.value);
        });

        searchInput.addEventListener('input', function() {
            currentPage = 1; // Reset to first page
            displayTable(plots, currentPage, rowsPerPage, searchInput.value);
            setupPagination(plots, rowsPerPage, searchInput.value);
        });

        function displayTable(data, page, rowsPerPage, searchQuery) {
            const tableBody = document.querySelector('#data-table tbody');
            tableBody.innerHTML = '';

            const filteredData = data.filter(plot =>
                plot.plot_number.toLowerCase().includes(searchQuery.toLowerCase()) ||
                plot.block.toLowerCase().includes(searchQuery.toLowerCase()) ||
                plot.project_name.toLowerCase().includes(searchQuery.toLowerCase()) ||
                plot.area.toLowerCase().includes(searchQuery.toLowerCase()) ||
                plot.price.toLowerCase().includes(searchQuery.toLowerCase()) ||
                // plot.offer_price.toLowerCase().includes(searchQuery.toLowerCase())
            );

            const start = (page - 1) * rowsPerPage;
            const end = start + rowsPerPage;
            const paginatedData = filteredData.slice(start, end);

            paginatedData.forEach((plot, index) => {
                const tr = document.createElement('tr');
                tr.className = index % 2 === 0 ? 'odd' : 'even';
                tr.innerHTML = `
                    <td>${plot.plot_number}</td>
                    <td>${plot.area } / Sqft</td>
                    <td>${plot.plot_type }</td>
                    <td>Rs. ${plot.price }</td>
                    <td>${plot.direction }</td>
                    <td>${ plot.name }</td>
                    <td>${ plot.project_name }</td>

                    <td class="edit-delete">
                        <a href="/send-mailtouser/${$plot->id}"><i class="fas fa-envelope"></i></a>
                        <form action="/wishlist/${plot.id}/delete" method="POST">
                            @csrf
                            @method('DELETE')
                            <button class="btn" type="submit"><i class="fas fa-trash-alt"></i></button>
                        </form>
                    </td>
                `;
                tableBody.appendChild(tr);
            });
        }

        function setupPagination(data, rowsPerPage, searchQuery) {
            const paginationControls = document.getElementById('pagination-controls');
            paginationControls.innerHTML = '';

            const filteredData = data.filter(plot =>
                plot.plot_number.toLowerCase().includes(searchQuery.toLowerCase()) ||
                plot.project_name.toLowerCase().includes(searchQuery.toLowerCase()) ||
                plot.plot_size.toLowerCase().includes(searchQuery.toLowerCase()) ||
                plot.actual_price.toLowerCase().includes(searchQuery.toLowerCase())
            );

            const pageCount = Math.ceil(filteredData.length / rowsPerPage);

            const createPageButton = (page) => {
                const button = document.createElement('a');
                button.innerText = page;
                button.classList.add('paginate_button');
                if (page === currentPage) {
                    button.classList.add('active');
                }

                button.addEventListener('click', () => {
                    currentPage = page;
                    displayTable(filteredData, currentPage, rowsPerPage, searchQuery);
                    setupPagination(filteredData, rowsPerPage, searchQuery);
                });

                return button;
            };

            const prevButton = createPageButton('Previous');
            prevButton.classList.add('previous');
            prevButton.classList.toggle('disabled', currentPage === 1);
            prevButton.addEventListener('click', () => {
                if (currentPage > 1) {
                    currentPage--;
                    displayTable(filteredData, currentPage, rowsPerPage, searchQuery);
                    setupPagination(filteredData, rowsPerPage, searchQuery);
                }
            });
            paginationControls.appendChild(prevButton);

            for (let i = 1; i <= pageCount; i++) {
                paginationControls.appendChild(createPageButton(i));
            }

            const nextButton = createPageButton('Next');
            nextButton.classList.add('next');
            nextButton.classList.toggle('disabled', currentPage === pageCount);
            nextButton.addEventListener('click', () => {
                if (currentPage < pageCount) {
                    currentPage++;
                    displayTable(filteredData, currentPage, rowsPerPage, searchQuery);
                    setupPagination(filteredData, rowsPerPage, searchQuery);
                }
            });
            paginationControls.appendChild(nextButton);
        }

        // Initial display and pagination setup
        displayTable(plots, currentPage, rowsPerPage, searchInput.value);
        setupPagination(plots, rowsPerPage, searchInput.value);
    });
</script>


@include('Partials.footer')