@extends('Layouts.index')
@section('content')
    <!-- artikel -->
    <section class="wrapper bg-light">
        <div class="row">
            <div class="col-md-12 bg-pattern3 py-11 mb-10">
                <div class="d-flex align-items-center justify-content-center">
                    <h2 class="fs-45 fw-semibold pt-5 p-0 mb-0 text-dark">Agenda <span class="text-primary">Jagoti</span></h2>
                </div>
                <p class="fs-16 text-center">Pilih dan ikuti agenda jagoti untuk menambah pengetahuan kamu</p>
            </div>
        </div>
        <div class="row">
            <div class="col-md-11 mx-auto">
                <div class="mb-17 mb-md-10 pt-0">
                    <div class="container">
                        <div class="row" id="data-agenda">
                                    
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--/.row -->
        <nav class="d-flex d-flex justify-content-center" aria-label="pagination">
            <ul class="pagination" id="pagination">

            </ul>
        </nav>

    </section>
         <script nonce> var eventItem = null; </script>     <script>
        console.log(eventItem);

        
        const itemsPerPage = 2; // Customize the number of items per page
        let currentPage = 1;

        function displayData(page) {
            // menentukan range data untuk di slice, berapa item  yang akan tampil tiap page, menggunakan basis variable itemsPerPages
            const startIndex = (page - 1) * itemsPerPage;
            const endIndex = startIndex + itemsPerPage;
            const paginatedData = eventItem.slice(startIndex, endIndex);

            console.log(paginatedData);

            // Clear existing data
            const dataContainer = document.getElementById('data-agenda');
            dataContainer.innerHTML = '';

            paginatedData.forEach(item => {

                const itemElement = document.createElement('div');
                itemElement.classList.add("col-lg-4", "pb-6",);
                itemElement.innerHTML = 
                ` <div class="card">
                    <figure class="img-agenda card-img-top">
                    <img class=" gallery-item"
                        src="{{ $intcms->url }}upload/event/${item.Media}"
                        loading="eager" alt="JAGOTI" />
                    </figure>
                    <div class="card-body ">
                        <div class="post-header">
                            <h2 class="post-title h3 fs-16 mt-0 mb-0">${item.Title}</h2>
                            <p class="fs-13 mb-3 text-ash">${item.Alamat}</p>
                            <div class="align-items-center mb-3">
                                <div class="text-ash mb-0 fs-13"> <span><i
                                            class="fa-regular fa-calendar-days me-2"></i></span>Waktu
                                    Mulai : ${item.TanggalAwal}</div>
                                <div class="text-ash mb-0 fs-13"> <span><i
                                            class="fa-regular fa-calendar-days me-2"></i></span>Waktu
                                    Akhir : ${item.TanggalAkhir}</div>
                                <div class="text-ash mb-0 fs-13"> <span><i
                                            class="uil uil-user-circle me-2"></i></span>Penyelenggara
                                    : ${item.Penyelenggara}</div>
                                <div class="text-ash mb-0 fs-13"> <span><i
                                            class="uil uil-phone me-2"></i></span>Kontak :
                                    ${item.PIC}</div>
                            </div>
                            <div class="p-0 py-2 d-flex">
                                <li class="nav-item d-none d-md-block">
                                    <a href="{{ url('Event/detail-event/${item.Id}')}}"
                                        class="btn btn-sm btn-primary rounded p-3 py-1 fs-13">Selengkapnya</a>
                                </li>
                            </div>
                        </div>
                    </div>
                </div>`;


                dataContainer.appendChild(itemElement);
                console.log(itemElement);

            });
        }


        function displayPagination() {
            // Calculate the total number of pages
            const totalPages = Math.ceil(eventItem.length / itemsPerPage);
            const paginationContainer = document.getElementById('pagination');
            paginationContainer.innerHTML = " ";

            // Create pagination links for each page
            for (let i = 1; i <= totalPages; i++) {
                const pageItem = document.createElement('li');
                pageItem.classList.add('page-item');

                const pageLink = document.createElement('a');
                pageLink.style.cursor = "pointer";
                pageLink.textContent = i;
                pageLink.classList.add('page-link');

                // Add a click event listener to update the current page
                pageLink.addEventListener('click', () => {
                    currentPage = i;
                    displayData(currentPage);
                    highlightCurrentPage();
                });

                pageItem.appendChild(pageLink);
                paginationContainer.appendChild(pageItem);
            }

            highlightCurrentPage();
        }

        function highlightCurrentPage() {
            // Highlight the currently selected page link
            const pageItem = document.querySelectorAll('.page-item');
            pageItem.forEach(link => link.classList.remove('active'));

            pageItem[currentPage - 1].classList.add('active');
        }

        // Initialize pagination
        displayData(currentPage);
        displayPagination();
    </script>
@endsection