@extends('frontend.template-frontend')
@section('title', 'Buletin | Amal Prihatin Sabah')
@section('meta_description', 'Baca berita dan buletin terkini dari Amal Prihatin Sabah. Dapatkan info terbaru mengenai program dan aktiviti kami.')
@section('meta_keywords', 'buletin, berita, news, artikel, amal prihatin sabah')

@section('og_title', 'Buletin | Amal Prihatin Sabah')
@section('og_description', 'Baca berita dan buletin terkini dari Amal Prihatin Sabah.')
@section('og_image', asset('assets/icon-paks/logo-aps.png'))

@section('twitter_title', 'Buletin | Amal Prihatin Sabah')
@section('twitter_description', 'Baca berita dan buletin terkini dari Amal Prihatin Sabah.')
@section('twitter_image', asset('assets/icon-paks/logo-aps.png'))

@section('content')
    <section>
        <div class="w-full max-w-screen-lg mx-auto mt-20 p-3">
            <div class="relative w-full">
                <div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
                    <i class="fa-solid fa-magnifying-glass w-4 h-4 text-gray-500 dark:text-gray-400"
                        style="color: #393c41;"></i>
                </div>
                <input type="text" id="search"
                    class="bg-gray-50 border-2 border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full ps-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                    placeholder="Search news...">
            </div>
            <div class="flex sm:justify-start justify-center">
                <div class="grid sm:grid-cols-6 grid-rows-12 gap-3 mt-5 grid-cols-1" id="news-container">
                    <!-- News cards will be dynamically inserted here -->
                </div>
                <div id="no-results" class="hidden mt-5 text-gray-500 dark:text-gray-400">No news found matching your
                    search.</div>
            </div>
        </div>
    </section>
@endsection

@push('script')
    <script>
        $(document).ready(function() {
            let newsData = []; // Store original API data
            let newsContainer = $('#news-container');
            let noResults = $('#no-results');

            // Function to render news cards
            function renderNews(data) {
                newsContainer.empty();
                noResults.addClass('hidden');

                if (data.length === 0) {
                    noResults.removeClass('hidden');
                    return;
                }

                data.forEach(function(item) {
                    let summary = $('<div>').html(item.post_content).text();
                    summary = summary.length > 30 ? summary.substring(0, 30) + '...' : summary;

                    let cardHtml = `
                        <div class="col-span-2 row-span-4">
                            <div class="max-w-xs bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700">
                                <a href="/news/${item.post_slug}">
                                    <img class="rounded-t-lg w-full h-48 object-cover" src="${item.thumbnail}" alt="${item.post_title}" />
                                </a>
                                <div class="p-5">
                                    <a href="/news/${item.post_slug}">
                                        <h5 class="mb-2 text-base font-semibold tracking-tight text-gray-900 dark:text-white">
                                            ${item.post_title.length > 20 ? item.post_title.substring(0, 20) + '...' : item.post_title}
                                        </h5>
                                    </a>
                                    <p class="mb-3 font-normal text-gray-500 dark:text-gray-400">
                                        ${summary}
                                    </p>
                                </div>
                            </div>
                        </div>
                    `;
                    newsContainer.append(cardHtml);
                });
            }

            // Fetch news data from API
            $.ajax({
                type: "GET",
                url: "https://coedevtechnology.com/api/public/blogpost?brand_name=aps&page=1",
                dataType: "json",
                success: function(response) {
                    if (response.success && response.data.length > 0) {
                        newsData = response.data; // Store data
                        renderNews(newsData); // Render all news initially
                    }
                },
                error: function(xhr, status, error) {
                    console.error('Error fetching news:', error);
                }
            });

            // Search functionality with debounce
            let debounceTimeout;
            $('#search').on('input', function() {
                clearTimeout(debounceTimeout);
                debounceTimeout = setTimeout(() => {
                    let searchTerm = $(this).val().trim().toLowerCase();
                    if (searchTerm === '') {
                        renderNews(newsData); // Reset to original data
                        return;
                    }

                    let filteredData = newsData.filter(item => {
                        let title = item.post_title.toLowerCase();
                        let content = $('<div>').html(item.post_content).text()
                        .toLowerCase();
                        return title.includes(searchTerm) || content.includes(searchTerm);
                    });

                    renderNews(filteredData);
                }, 300); // 300ms debounce
            });
        });
    </script>
@endpush