@extends('frontend.template-frontend')
@section('title', 'Amal Prihatin Sabah | Laman Utama')

@section('meta_description',
    'Sertai kami dalam memberi sumbangan, menyertai aktiviti keagamaan, dan mendapatkan berita
    terkini dari Amal Prihatin Sabah. Bersama membangunkan komuniti yang berlandaskan nilai-nilai Islam.')

@section('meta_keywords',
    'masjid kota kinabalu, masjid bandaraya, sumbangan masjid, aktiviti masjid, berita masjid,
    zakat, sedekah, solat jemaah, kota kinabalu')

@section('og_title', 'Amal Prihatin Sabah | Laman Utama')
@section('og_description',
    'Pusat kegiatan keagamaan dan komuniti Islam di Kota Kinabalu. Sumbang, sertai aktiviti, dan
    ikuti berita terkini bersama kami.')
@section('og_image', asset('assets/icon-paks/logo-aps.png')) {{-- Gantikan dengan banner sebenar --}}

@section('twitter_title', 'Amal Prihatin Sabah')
@section('twitter_description',
    'Sertai perjuangan kami dalam membangunkan ummah melalui sumbangan, aktiviti, dan
    maklumat terkini.')
@section('twitter_image', asset('assets/icon-paks/logo-aps.png')) {{-- Gantikan dengan gambar sesuai --}}

@section('content')
    <div class="w-full max-w-[1080px] mx-auto sm:pt-24 pt-24">
        <div class="justify-center w-full">

            <!-- Carousel Section -->
            <div id="animation-carousel" class="relative" data-carousel="static">
                <!-- Carousel Wrapper -->
                <div class="relative h-56 overflow-hidden rounded-lg md:h-[450px]">
                    <!-- Carousel Items -->
                    @foreach ($data as $item)
                        @php
                            $enId = $item->id;
                        @endphp
                        <a href="#" class="hidden duration-200 ease-linear" data-carousel-item>
                            <img src="{{ asset($item->banner) }}"
                                class="absolute block w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2"
                                alt="Banner {{ $item->slug }}">
                        </a>
                    @endforeach
                </div>

                <!-- Slider Controls -->
                <button type="button"
                    class="absolute top-0 start-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none"
                    data-carousel-prev>
                    <span
                        class="inline-flex items-center justify-center w-10 h-10 rounded-md bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
                        <svg class="w-4 h-4 text-white dark:text-gray-800 rtl:rotate-180" aria-hidden="true"
                            xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M5 1 1 5l4 4" />
                        </svg>
                        <span class="sr-only">Previous</span>
                    </span>
                </button>
                <button type="button"
                    class="absolute top-0 end-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none"
                    data-carousel-next>
                    <span
                        class="inline-flex items-center justify-center w-10 h-10 rounded-md bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
                        <svg class="w-4 h-4 text-white dark:text-gray-800 rtl:rotate-180" aria-hidden="true"
                            xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="m1 9 4-4-4-4" />
                        </svg>
                        <span class="sr-only">Next</span>
                    </span>
                </button>
            </div>

            <!-- Icon Cards Section -->
            <div class="flex flex-col md:flex-row gap-4 mt-10">
                @foreach ([['icon' => 'heart-handshake', 'title' => 'Beri sumbangan'], ['icon' => 'hand-heart', 'title' => 'Mohon Sumbangan'], ['icon' => 'activity', 'title' => 'Aktiviti Terkini'], ['icon' => 'newspaper', 'title' => 'Berita']] as $card)
                    <div
                        class="w-full border py-10 bg-white rounded-2xl shadow-sm hover:scale-105 cursor-pointer transition-all duration-200 hover:bg-orange-50/90">
                        <div class="flex flex-col items-center">
                            <i data-lucide="{{ $card['icon'] }}" class="h-12 w-12 mb-3 text-orange-400"></i>
                            <h5 class="mb-1 text-md font-medium text-gray-900 dark:text-white">
                                {{ $card['title'] }}
                            </h5>
                        </div>
                    </div>
                @endforeach
            </div>

            <!-- Terbaharu Section -->
            <div class="flex justify-between px-5 sm:px-0 mt-10">
                <h4 class="text-lg font-semibold">Sumbangan Terkini</h4>
                <a href="#" class="text-lg text-orange-400">Lihat semua</a>
            </div>
            <livewire:frontend.home.terbaharu.get-data />
            <!-- Terbaharu Section -->
            <div class="flex justify-between px-5 sm:px-0 mt-10">
                <h4 class="text-lg font-semibold">Buletin Terkini</h4>
            </div>
            <div class="flex mt-5 mb-5">
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5 w-full" id="news-container">
                </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>
    </div>
@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.slice(0, 6).forEach(function(item) {
                    let summary = $('<div>').html(item.post_content).text();
                    if (summary.length > 100) {
                        summary = summary.substring(0, 100) + '...';
                    }

                    let cardHtml = `
                        <div class="bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700 overflow-hidden flex flex-col">
                            <!-- Gambar -->
                            <a href="/news/${item.post_slug}">
                                <img class="w-full h-48 object-cover" src="${item.thumbnail}" alt="${item.post_title}">
                            </a>

                            <!-- Konten -->
                            <div class="p-5 flex-1 flex flex-col">
                                <a href="/news/${item.post_slug}" class="mb-2">
                                    <h5 class="text-base font-semibold text-gray-900 dark:text-white line-clamp-2">
                                        ${item.post_title}
                                    </h5>
                                </a>
                                <p class="mb-4 text-sm text-gray-500 dark:text-gray-400 line-clamp-2">
                                    ${summary}
                                </p>

                                <!-- Bottom Section -->
                            </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