@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-md-6 ps-0">
                            <h3>Brochure Form Data Table</h3>
                        </div>
                        <div class="col-md-6 ps-0">
                            <a href="/brouchure-form/export" class="btn btn-primary">Export</a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="container-fluid">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="card">
                            <div class="card-body" style="overflow-x:scroll;">
                                <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="15">15</option>
                                            <option value="25">25</option>
                                            <option value="50">50</option>
                                            <option value="75">75</option>
                                            <option value="100">100</option>
                                            <option value="200">200</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>S No</th>
                                            <th>Name</th>
                                            <th>Mobile</th>
                                            <th>Email</th>
                                            <th>Property</th>
                                            <th>Email Verified</th>
                                            <th>Downloaded</th>
                                            <th>Date</th>
                                        </tr>
                                    </thead>
                                    <tbody class="projects-table collection-table">

                                        @foreach($Brochuredata as $index => $data)
                                            <tr class="{{ $index % 2 === 0 ? 'odd' : 'even' }}">
                                                <td>{{$data->id}}</td>
                                                <td>{{ $data->name }}</td>
                                                <td>{{ $data->mobile }}</td>
                                                <td>{{ $data->email }}</td>
                                                <td>{{ $data->property_name }}</td>
                                                <td> @if($data->is_verified)
                                                    <i class="fa fa-check-circle text-success"></i>
                                                @else
                                                        <i class="fa fa-times-circle text-danger"></i>
                                                    @endif
                                                </td>
                                                <td>@if($data->is_downloaded)
                                                    <i class="fa fa-download text-primary"></i>
                                                @else
                                                        <i class="fa fa-minus-circle text-muted"></i>
                                                    @endif
                                                </td>
                                                <td>{{ $data->created_at->format('Y-m-d') }}</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 contacts = @json($Brochuredata);


        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
            updateTableAndPagination();
        });

        searchInput.addEventListener('input', function () {
            currentPage = 1; // Reset to first page
            updateTableAndPagination();
        });

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

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

            paginatedData.forEach((contact, index) => {

                const tr = document.createElement('tr');
                tr.className = index % 2 === 0 ? 'odd' : 'even';
                // Format verification icons
                const verifiedIcon = contact.is_verified
                    ? '<i class="fa fa-check-circle text-success"></i>'
                    : '<i class="fa fa-times-circle text-danger"></i>';

                const downloadedIcon = contact.is_downloaded
                    ? '<i class="fa fa-download text-primary"></i>'
                    : '<i class="fa fa-minus-circle text-muted"></i>';

                // Format date (in JS)
                const createdDate = contact.created_at
                    ? new Date(contact.created_at).toISOString().split('T')[0]
                    : '';

                tr.innerHTML = `
            <td>${contact.id}</td>
            <td>${contact.name || ''}</td>
            <td>${contact.mobile || ''}</td>
            <td>${contact.email || ''}</td>
            <td>${contact.property_name || ''}</td>
            <td>${verifiedIcon}</td>
            <td>${downloadedIcon}</td>
            <td>${createdDate}</td>
        `;
                tableBody.appendChild(tr);
            });
        }

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

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

            const prevButton = document.createElement('a');
            prevButton.innerText = 'Previous';
            prevButton.classList.add('paginate_button', 'previous');
            prevButton.classList.toggle('disabled', currentPage === 1);
            prevButton.addEventListener('click', () => {
                if (currentPage > 1) {
                    currentPage--;
                    updateTableAndPagination();
                }
            });
            paginationControls.appendChild(prevButton);

            for (let i = 1; i <= pageCount; i++) {
                const button = document.createElement('a');
                button.innerText = i;
                button.classList.add('paginate_button');
                if (i === currentPage) {
                    button.classList.add('active');
                }
                button.addEventListener('click', () => {
                    currentPage = i;
                    updateTableAndPagination();
                });
                paginationControls.appendChild(button);
            }

            const nextButton = document.createElement('a');
            nextButton.innerText = 'Next';
            nextButton.classList.add('paginate_button', 'next');
            nextButton.classList.toggle('disabled', currentPage === pageCount);
            nextButton.addEventListener('click', () => {
                if (currentPage < pageCount) {
                    currentPage++;
                    updateTableAndPagination();
                }
            });
            paginationControls.appendChild(nextButton);
        }

        function updateTableAndPagination() {
            const searchQuery = searchInput.value.toLowerCase();

            // Filter the Data based on the search query
            const filteredData = contacts.filter(contact =>
                contact.first_name.toString().toLowerCase().includes(searchQuery) ||
                contact.last_name.toLowerCase().includes(searchQuery) ||
                (contact.email || '').toString().toLowerCase().includes(searchQuery) ||
                (contact.mobile || '').toString().toLowerCase().includes(searchQuery) ||
                (contact.created_at || '').toString().toLowerCase().includes(searchQuery)

            );

            displayTable(filteredData, currentPage, rowsPerPage);
            setupPagination(filteredData, rowsPerPage);
        }

        // Initial display and pagination setup
        updateTableAndPagination();
    });
</script>

@include('Partials.footer')