{{-- <div class="section-container" id="news-section">
    <div class="container">
        <div class="position-relative">
            <h2 class="text-center mb-5">{{$titleNews}}</h2>
            <a href="#" class="position-absolute top-50 end-0 translate-middle-y view-all-btn">View All <img
                    src="{{asset('/icon/arrow-right.svg')}}" alt="arrow" class="ms-2"></a>
        </div>
        <div class="row g-4">
            
            @foreach ($newsItems as $news)
                <div class="col-md-6 col-sm-6 col-lg-3">
                    <a href="{{ url('/news-detail?id=' . $news['id']) }}" class="card-link">
                        <div class="card-container">
                            <img src="{{asset('storage/'.$news['file_cover_img_name'])}}" alt="news" class="img-fluid">
                            <h3 class="text-truncate">{{$news['title']}}</h3>
                            <p class="mb-2">{{$news['description']}}</p>
                            <div class="card-footer">
                                <div class="avatar">
                                    @foreach (json_decode($news['image']) as $image)
                                        <img src="{{ asset('storage/' . $image) }}" alt="Additional Image">
                                    @endforeach --}}
                                    {{-- <img src="{{asset('storage/'.$news['file_cover_img_name'])}}" alt="avatar" class="img-fluid"> --}}
                                {{-- </div>
                                <div>
                                    <h4>{{$news['full_name']}}</h4>
                                    <p>{{$news['update_time']}}</p>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
            @endforeach
        </div>
    </div>
</div> --}}
<div class="section-container" id="news-section">
    <div class="container">
        <div class="position-relative">
            <h2 class="text-center mb-5" id="title"></h2>
            <a href="{{('News?type='.$showNewsSection['id'])}}" class="position-absolute top-50 end-0 translate-middle-y view-all-btn">
                View All
                <img src="/icon/arrow-right.svg" alt="arrow" class="ms-2">
            </a>
        </div>
        <div class="row g-4" id="Dynamic">
            <!-- Dynamic content will be injected here -->
        </div>
    </div>
</div>

{{-- <script>console.log();</script> --}}
<script>
    document.addEventListener("DOMContentLoaded", function () {
        const newsSection = document.getElementById("news-section");
        const apiUrl = "{{env('APP_URL')}}/api/contents?type={{$showNewsSection['id']}}"+"&limit=4";
        const dynamicContainer = document.getElementById("Dynamic");
        const title = document.getElementById('title');
        // Fetch news data
        fetch(apiUrl)
            .then(response => {
                if (!response.ok) {
                   return;
                }else{
                    return response.json();
                }
            })
            // ${news.image.map(img => `<img src="${img}" alt="Additional Image" style="max-width: 50px; margin-right: 5px;">`).join("")}
            .then(data => {
                if (data.status.statusType === "S") {
                    console.log(data); // Log the data for debugging
                    let allNewsItems = [];
                    if (typeof data.data === "object" && data.data !== null) {
                        for (const key in data.data) {
                            if (Array.isArray(data.data[key])) {
                                allNewsItems = allNewsItems.concat(data.data[key]);
                            }
                        }
                    }

                    // If no array is found, fallback to an empty array
                    if (allNewsItems.length === 0) {
                        console.warn("No news items found in data.data.");
                    }
                    const newsItem = allNewsItems.filter(news => news.approved === 'Y').slice(0, 4);

                    // Base URL for accessing images
                    const storageBaseUrl = "{{ asset('storage') }}";

                    // Dynamically generate HTML for news items
                    let newsHTML = "";
                    function stripHTML(html) {
                        const tempDiv = document.createElement("div");
                        tempDiv.innerHTML = html || ""; // Safeguard for null/undefined values
                        return tempDiv.textContent || tempDiv.innerText || "";
                    }
                    function truncateText(text, maxLength) {
                        if (!text) return "No description available."; // Safeguard for null/undefined values
                        return text.length > maxLength ? text.substring(0, maxLength) + "..." : text;
                    }
                    if (newsItem.length > 0) {
                        newsItem.forEach(news => {
                            console.log(news);
                            title.innerHTML = news.type_name;
                            newsHTML += `
                                <div class="col-md-6 col-sm-6 col-lg-3">
                                    <a href="/news-detail?id=${news.id}" class="card-link">
                                        <div class="card-container">
                                            <img src="${storageBaseUrl}/${news.file_cover_img_name || 'default-image.jpg'}" alt="news" class="img-fluid w-100" style="height:160px;">
                                            <h3 class="text-truncate">${news.title || "Untitled News"}</h3>
                                             <div class="mb-2">${truncateText(stripHTML(news.description), 30)}</div>
                                            <div class="card-footer">
                                                <div class="avatar">
                                                    <!-- Add avatar logic if required -->
                                                    <img src="images/avatar-1.png" alt="Author Avatar" class="img-fluid">
                                                </div>
                                                <div>
                                                    <h4>${news.author || "Unknown Author"}</h4>
                                                    <p>${news.start_date}</p>
                                                </div>
                                            </div>
                                        </div>
                                    </a>
                                </div>`;
                        });
                    } else {
                        newsHTML = '<p>No approved news items available.</p>';
                    }
                    if (dynamicContainer) {
                        dynamicContainer.innerHTML = newsHTML;
                    } else {
                        console.error("Dynamic container element not found.");
                    }
                   
                } else {
                    console.error("Error fetching news:", data.status.errorMessage);
                    newsSection.style.display = 'none';
                }
                

            })
            .catch(error => {
                console.error("Error:", error);
            });
    });
</script>