<x-front-layout>
    @section('title', $page . ' | ' . get_setting('site_name'))
        <!-- Start Section-->
        <section class="relative md:py-24 py-16">
            <div class="container">
                <div class="flex items-center justify-between mt-3 py-3">
                    <h2 class="md:text-3xl text-2xl md:leading-normal leading-normal font-semibold">
                        Articles
                    </h2>
                    <div class="flex">
                        <div class="flex items-center" x-data="{isInputActive:false}">
                            <label class="block">
                                <input x-effect="isInputActive === true &amp;&amp; $nextTick(() => { $el.focus()});" :class="isInputActive ? 'w-32 lg:w-48' : 'w-0'" class="form-input bg-transparent px-1 text-right transition-all duration-100 placeholder:text-slate-500 dark:placeholder:text-navy-200 w-0" placeholder="Search here..." type="text" id="search" autocomplete="new-password">
                            </label>
                        </div>
                    </div>
                </div>
                <div class="grid grid-cols-1 lg:grid-cols-3 md:grid-cols-2 gap-[30px]" id="blog">

                </div><!--end grid-->

                <div class="grid md:grid-cols-12 grid-cols-1 mt-8">
                    <div class="md:col-span-12 text-center">
                        <nav aria-label="Page navigation" id="pagination">

                        </nav>
                    </div>
                </div><!--end grid-->
            </div><!--end container-->
        </section><!--end section-->
        <!-- End -->
@push('scripts')
<script>
let currentpage = 1;
$(document).ready(function() {
    let ajaxRequest;
    let debounceTimer;
    let currentpage = 1;
    function loadBlog(page = 1, search = '') {
        if (ajaxRequest) {
            ajaxRequest.abort();
        }
        currentpage = page;
        ajaxRequest = $.ajax({
            url: "/blog/load",
            type: "GET",
            data: { page: page, search: search },
            dataType: "json",
            beforeSend: function () {
                $("#blog").html('');
            },
            success: function (data) {
                var html = "";
                if (data.records.length > 0) {
                    data.records.forEach(function (item) {
                      html += `
                        <div class="blog relative rounded-md shadow dark:shadow-gray-800 overflow-hidden">
                            <img src="${item.image ? item.image : 'default-image.jpg'}" alt="Blog Image" class="w-full h-48 object-cover">
                            
                            <div class="content p-6">
                                <a href="/blog/${item.slug}" class="title h5 text-lg font-medium hover:text-indigo-600 duration-500 ease-in-out">
                                    ${item.title}
                                </a>
                                <p class="text-slate-400 mt-3">${item.description}</p>
                                
                                <div class="mt-4">
                                    <a href="/blog/${item.slug}" class="btn btn-link font-normal hover:text-indigo-600 after:bg-indigo-600 duration-500 ease-in-out">
                                        Read More <i class="uil uil-arrow-right"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    `;
                    });
              } else {
                html = '<div class="text-center py-4">No post available</div>';
              }
              $("#blog").html(html);
    
            var paginationHtml = `
                <ul class="inline-flex items-center -space-x-px">
                    <li>
                        <a href="#" class="pagination-btn w-[40px] h-[40px] inline-flex justify-center items-center text-slate-400 bg-white dark:bg-slate-900 ltr:rounded-l-lg rtl:rounded-r-lg hover:text-white border border-gray-100 dark:border-gray-700 hover:border-indigo-600 dark:hover:border-indigo-600 hover:bg-indigo-600 dark:hover:bg-indigo-600"" data-page="${data.prev_page}" ${data.prev_page ? "" : "disabled"}>
                            <i class="uil uil-angle-left text-[20px] rtl:rotate-180 rtl:-mt-1"></i>
                        </a>
                    </li>`;
            
            var startPage = Math.max(1, data.current_page - 2);
            var endPage = Math.min(data.total_pages, startPage + 4);
            
            if (startPage > 1) {
                paginationHtml += `<li>
                    <a href="#" class="pagination-btn w-[40px] h-[40px] inline-flex justify-center items-center text-slate-400 hover:text-white bg-white dark:bg-slate-900 border border-gray-100 dark:border-gray-700 hover:border-indigo-600 dark:hover:border-indigo-600 hover:bg-indigo-600 dark:hover:bg-indigo-600" data-page="1">1</a>
                </li>`;
                if (startPage > 2) {
                    paginationHtml += `<li>...</li>`;
                }
            }
            
            for (var i = startPage; i <= endPage; i++) {
                paginationHtml += `<li>
                    <a href="#" class="pagination-btn ${i === data.current_page ? 'z-10 w-[40px] h-[40px] inline-flex justify-center items-center text-white bg-indigo-600 border border-indigo-600' : 'w-[40px] h-[40px] inline-flex justify-center items-center text-slate-400 hover:text-white bg-white dark:bg-slate-900 border border-gray-100 dark:border-gray-700 hover:border-indigo-600 dark:hover:border-indigo-600 hover:bg-indigo-600 dark:hover:bg-indigo-600'}" data-page="${i}">${i}</a>
                </li>`;
            }
            
            if (endPage < data.total_pages) {
                if (endPage < data.total_pages - 1) {
                    paginationHtml += `<li>...</li>`;
                }
                paginationHtml += `<li>
                    <a href="#" class="pagination-btn w-[40px] h-[40px] inline-flex justify-center items-center text-slate-400 hover:text-white bg-white dark:bg-slate-900 border border-gray-100 dark:border-gray-700 hover:border-indigo-600 dark:hover:border-indigo-600 hover:bg-indigo-600 dark:hover:bg-indigo-600" data-page="${data.total_pages}">${data.total_pages}</a>
                </li>`;
            }
            
            paginationHtml += `
                <li>
                    <a href="#" class="pagination-btn w-[40px] h-[40px] inline-flex justify-center items-center text-slate-400 bg-white dark:bg-slate-900 ltr:rounded-r-lg rtl:rounded-l-lg hover:text-white border border-gray-100 dark:border-gray-700 hover:border-indigo-600 dark:hover:border-indigo-600 hover:bg-indigo-600 dark:hover:bg-indigo-600" data-page="${data.next_page}" ${data.next_page ? "" : "disabled"}>
                        <i class="uil uil-angle-right text-[20px] rtl:rotate-180 rtl:-mt-1"></i>
                    </a>
                </li>
            </ul>`;
            
            $("#pagination").html(paginationHtml);
    
            },
          });
        }

    loadBlog();

    $(document).on("click", ".pagination-btn", function (e) {
      e.preventDefault();
      var page = $(this).data("page");
      if (page) loadBlog(page);
    });

    $("#search").on("keyup", function() {
        $("#blog").html('<tr><td colspan="5" class="text-center py-4"><div class="w-full px-6 py-4"><div class="skeleton animate-wave h-3 w-full rounded bg-slate-150 dark:bg-navy-500"></div><div class="skeleton animate-wave mt-4 h-3 w-8/12 rounded bg-slate-150 dark:bg-navy-500"></div></div></td></tr>');
        clearTimeout(debounceTimer);
        let query = $(this).val();
        debounceTimer = setTimeout(() => {
            loadBlog(1, query);
        }, 1000);
    });
});
</script>
@endpush
</x-front-layout>