@extends('layouts.app')

@section('title', 'The Daily Bursa')

@section('content')
<!-- NÖBETÇİ ECZANELER -->
<div class="marquee-wrapper">
    <div class="marquee">
        <div class="marquee-content">
            @foreach ($pharmacies as $pharmacy)
            <span class="pharmacy-item mx-2 text-xs text-black/70 dark:text-gray-200" data-name="{{ $pharmacy->name }}"
                data-district="{{ $pharmacy->dist }}" data-address="{{ $pharmacy->address }}"
                data-phone="{{ $pharmacy->phone }}">
                {{ $pharmacy->name }},
            </span>
            @endforeach
            @foreach ($pharmacies as $pharmacy)
            <span class="pharmacy-item mx-2 text-xs text-black/70 dark:text-gray-200" data-name="{{ $pharmacy->name }}"
                data-district="{{ $pharmacy->dist }}" data-address="{{ $pharmacy->address }}"
                data-phone="{{ $pharmacy->phone }}">
                {{ $pharmacy->name }},
            </span>
            @endforeach
        </div>
    </div>
</div>

<!-- Tooltip Element -->
<div id="pharmacy-tooltip" class="pharmacy-tooltip"></div>

<!-- ANA İÇERİK ALANI -->
<div class="grid grid-cols-1 lg:grid-cols-3 lg:space-x-4 mt-6">
    <!-- SOL KOLON: ANA HABER LİSTESİ -->
    <div class="col-span-2 space-y-2 divide-y divide-black dark:divide-white/50">
        <!-- MANŞET -->
        <div class="grid lg:grid-cols-2 gap-4 pb-4">
            <div class="text-xs dark:text-gray-100 mb-0 sm:mb-2 order-1 lg:order-1">
                <div class="flex-1">
                    @if($headline->toptitle)
                    <h5 class="text-red-600 mb-1 uppercase font-black text-sm">{{ $headline->toptitle }}</h5>
                    @else
                    <h5 class="text-red-600 mb-1 uppercase font-black text-sm">ÖNEMLİ GELİŞME</h5>
                    @endif
                    <h2 class="text-4xl font-semibold dark:text-gray-100 cursor-pointer"
                        onclick="openNewsModal({{ $headline->id }}, '{{ addslashes($headline->ai_name) }}', '{{ addslashes($headline->ai_description) }}', '{{ $headline->image }}', '{{ $headline->created_at->format('H:i') }}', '{{ $headline->created_at->locale('tr')->translatedFormat('l, j F Y') }}', {{ json_encode($headline->districts->pluck('name')) }}, {{ json_encode($headline->categories->pluck('name')) }})">
                        {{ $headline->ai_name }}
                    </h2>
                    <p class="text-base text-gray-600 dark:text-gray-400 mt-2 cursor-pointer"
                        onclick="openNewsModal({{ $headline->id }}, '{{ addslashes($headline->ai_name) }}', '{{ addslashes($headline->ai_description) }}', '{{ $headline->image }}', '{{ $headline->created_at->format('H:i') }}', '{{ $headline->created_at->locale('tr')->translatedFormat('l, j F Y') }}', {{ json_encode($headline->districts->pluck('name')) }}, {{ json_encode($headline->categories->pluck('name')) }})">
                        {{ $headline->ai_description }}
                    </p>
                    <div class="flex gap-x-2 mt-1.5 text-xs text-gray-500 uppercase dark:text-gray-500">
                        @foreach($headline->districts as $district)
                        <span>#{{ $district->name }}</span>
                        @endforeach
                        @foreach($headline->categories as $category)
                        <span>#{{ $category->name }}</span>
                        @endforeach
                    </div>
                    @if ($headline->status == 'published')
                    <div
                        class="flex items-center text-teal-600 dark:text-teal-400 gap-x-1.5 mt-1.5 text-xs news-note-item relative cursor-pointer">
                        <span class="material-symbols-outlined text-xs">
                            done_all
                        </span>
                        <p>Editör tarafından düzenlendi</p>
                    </div>
                    @else
                    <div
                        class="flex items-center text-violet-600 dark:text-violet-400 gap-x-1.5 mt-1.5 text-xs news-note-item relative cursor-pointer">
                        <span class="material-symbols-outlined text-xs">
                            auto_awesome
                        </span>
                        <p>Yapay zeka hazırladı</p>
                    </div>
                    @endif
                    @if ($headline->is_shared_social_media == 1)
                    <div
                        class="flex items-center text-rose-600 dark:text-rose-400 gap-x-1.5 mt-1.5 text-xs news-note-item relative cursor-pointer">
                        <span class="material-symbols-outlined text-xs">
                            favorite
                        </span>
                        <p>Sosyal medya hesaplarımızda yayınladı</p>
                    </div>
                    @endif
                    @if($headline->ai_note)
                    <div class="flex items-center text-yellow-600 gap-x-1.5 mt-1.5 news-note-item relative cursor-pointer"
                        data-note="{{ $headline->ai_note }}">
                        <span class="material-symbols-outlined">
                            info
                        </span>
                        <p>Bu haber neden manşette?</p>
                        <div class="news-note-tooltip"></div>
                    </div>
                    @endif
                </div>
            </div>
            <div class="order-2 lg:order-2">
                <img src="{{ $headline->image }}" alt="Featured" class="w-full h-auto cursor-pointer"
                    onclick="openNewsModal({{ $headline->id }}, '{{ addslashes($headline->ai_name) }}', '{{ addslashes($headline->ai_description) }}', '{{ $headline->image }}', '{{ $headline->created_at->format('H:i') }}', '{{ $headline->created_at->locale('tr')->translatedFormat('l, j F Y') }}', {{ json_encode($headline->districts->pluck('name')) }}, {{ json_encode($headline->categories->pluck('name')) }})" />
                <div class="flex gap-x-1 text-black/40 dark:text-white/30 mt-1.5 text-xs items-center">
                    <span class="material-symbols-outlined text-sm">
                        touch_app
                    </span>
                    <p class="text-xs">renkli görsel için dokunun</p>
                </div>
            </div>
        </div>

        <!-- ÖNE ÇIKAN HABERLER -->
        <div class="grid pt-6 divide-y divide-white dark:divide-gray-700">
            @foreach ($featuredNews as $news)
            <div class="flex flex-col sm:flex-row py-4">
                <div class="w-full sm:w-2/5 sm:mr-4 mb-3 sm:mb-0 order-2 sm:order-1">
                    <img src="{{ $news->image }}" alt="Featured" class="w-full h-auto cursor-pointer"
                        onclick="openNewsModal({{ $news->id }}, '{{ addslashes($news->ai_name) }}', '{{ addslashes($news->ai_description) }}', '{{ $news->image }}', '{{ $news->created_at->format('H:i') }}', '{{ $news->created_at->locale('tr')->translatedFormat('l, j F Y') }}', {{ json_encode($news->districts->pluck('name')) }}, {{ json_encode($news->categories->pluck('name')) }})" />
                    <div class="flex gap-x-1 text-black/40 dark:text-white/30 mt-1.5 text-xs items-center">
                        <span class="material-symbols-outlined text-sm">
                            touch_app
                        </span>
                        <p class="text-xs">renkli görsel için dokunun</p>
                    </div>
                </div>
                <div class="flex-1 order-1 sm:order-2">
                    <h3 class="font-semibold text-xl mb-2 dark:text-gray-100 cursor-pointer"
                        onclick="openNewsModal({{ $news->id }}, '{{ addslashes($news->ai_name) }}', '{{ addslashes($news->ai_description) }}', '{{ $news->image }}', '{{ $news->created_at->format('H:i') }}', '{{ $news->created_at->locale('tr')->translatedFormat('l, j F Y') }}', {{ json_encode($news->districts->pluck('name')) }}, {{ json_encode($news->categories->pluck('name')) }})">
                        {{ $news->ai_name }}
                    </h3>
                    <p class="text-sm text-gray-600 dark:text-gray-400 mb-2 cursor-pointer"
                        onclick="openNewsModal({{ $news->id }}, '{{ addslashes($news->ai_name) }}', '{{ addslashes($news->ai_description) }}', '{{ $news->image }}', '{{ $news->created_at->format('H:i') }}', '{{ $news->created_at->locale('tr')->translatedFormat('l, j F Y') }}', {{ json_encode($news->districts->pluck('name')) }}, {{ json_encode($news->categories->pluck('name')) }})">
                        {{ $news->ai_description }}
                    </p>
                    <div class="flex gap-x-2 text-xs text-gray-500 uppercase dark:text-gray-500">
                        @foreach($news->districts as $district)
                        <span>#{{ $district->name }}</span>
                        @endforeach
                        @foreach($news->categories as $category)
                        <span>#{{ $category->name }}</span>
                        @endforeach
                    </div>
                    @if ($news->status == 'published')
                    <div
                        class="flex items-center text-teal-600 dark:text-teal-400 gap-x-1.5 my-1.5 sm:mt-1.5 text-xs news-note-item relative cursor-pointer">
                        <span class="material-symbols-outlined text-xs">
                            done_all
                        </span>
                        <p>Editör tarafından düzenlendi</p>
                    </div>
                    @else
                    <div
                        class="flex items-center text-violet-600 dark:text-violet-400 gap-x-1.5 my-1.5 sm:mt-1.5 text-xs news-note-item relative cursor-pointer">
                        <span class="material-symbols-outlined text-xs">
                            auto_awesome
                        </span>
                        <p>Yapay zeka hazırladı</p>
                    </div>
                    @endif
                    @if ($news->is_shared_social_media == 1)
                    <div
                        class="flex items-center text-rose-600 dark:text-rose-400 gap-x-1.5 my-1.5 sm:mt-1.5 text-xs news-note-item relative cursor-pointer">
                        <span class="material-symbols-outlined text-xs">
                            favorite
                        </span>
                        <p>Sosyal medya hesaplarımızda yayınladı</p>
                    </div>
                    @endif
                    @if($news->ai_note)
                    <div class="flex items-center text-yellow-600 gap-x-1.5 mt-1.5 text-xs news-note-item relative cursor-pointer mb-2 sm:mb-0"
                        data-note="{{ $news->ai_note }}">
                        <span class="material-symbols-outlined">
                            info
                        </span>
                        <p>Bu haber neden yerel manşette?</p>
                        <div class="news-note-tooltip"></div>
                    </div>
                    @endif
                </div>
            </div>
            @endforeach
        </div>

        <!-- DİĞER HABERLER -->
        <div class="masonry-grid pt-6">
            @foreach ($lastNews as $news)
            <div class="masonry-item border-b border-black/50 dark:border-white/30 pb-4 cursor-pointer"
                onclick="openNewsModal({{ $news->id }}, '{{ addslashes($news->ai_name) }}', '{{ addslashes($news->ai_description) }}', '{{ $news->image }}', '{{ $news->created_at->format('H:i') }}', '{{ $news->created_at->locale('tr')->translatedFormat('l, j F Y') }}', {{ json_encode($news->districts->pluck('name')) }}, {{ json_encode($news->categories->pluck('name')) }})">
                <h3 class="font-semibold text-lg mb-2 dark:text-gray-100">
                    @if($news->created_at >= $twoHoursAgo)
                    <span class="material-symbols-outlined text-sm text-yellow-500">
                        asterisk
                    </span>
                    @endif
                    {{ $news->ai_name }}
                </h3>
                <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">
                    {{ $news->ai_description }}
                </p>
                <div class="flex items-center gap-x-2 text-xs text-gray-500 uppercase flex-wrap dark:text-gray-500">
                    <div class="flex gap-x-0.5 items-center text-xs dark:text-white/30 text-black/30">
                        <span class="material-symbols-outlined text-sm">
                            schedule
                        </span>
                        <span>{{ $news->created_at->format('H:i') }}</span>
                    </div>
                    @foreach($news->districts as $district)
                    <span>#{{ $district->name }}</span>
                    @endforeach
                    @foreach($news->categories as $category)
                    <span>#{{ $category->name }}</span>
                    @endforeach
                </div>
                @if ($news->status == 'published')
                <div
                    class="flex items-center text-teal-600 dark:text-teal-400 gap-x-1.5 mt-1.5 text-xs news-note-item relative cursor-pointer">
                    <span class="material-symbols-outlined text-xs">
                        done_all
                    </span>
                    <p>Editör tarafından düzenlendi</p>
                </div>
                @else
                <div
                    class="flex items-center text-violet-600 dark:text-violet-400 gap-x-1.5 mt-1.5 text-xs news-note-item relative cursor-pointer">
                    <span class="material-symbols-outlined text-xs">
                        auto_awesome
                    </span>
                    <p>Yapay zeka hazırladı</p>
                </div>
                @endif
                @if ($news->is_shared_social_media == 1)
                <div
                    class="flex items-center text-rose-600 dark:text-rose-400 gap-x-1.5 mt-1.5 text-xs news-note-item relative cursor-pointer">
                    <span class="material-symbols-outlined text-xs">
                        favorite
                    </span>
                    <p>Sosyal medya hesaplarımızda yayınladı</p>
                </div>
                @endif
                @if($news->ai_note)
                <div class="flex items-center text-yellow-600 gap-x-1.5 mt-1.5 text-xs news-note-item relative cursor-pointer"
                    data-note="{{ $news->ai_note }}">
                    <span class="material-symbols-outlined">
                        info
                    </span>
                    <p>Bu haber neden yerel manşette?</p>
                    <div class="news-note-tooltip"></div>
                </div>
                @endif
            </div>
            @endforeach
        </div>
    </div>

    <div class="col-span-1 space-y-6 mt-8 lg:mt-0">
        <!-- SAĞ KOLON: HABER BÜLTENİ -->
        <div class="bg-gray-100 dark:bg-gray-800/30 rounded-xl p-4 border border-gray-200 dark:border-gray-700">
            <h4 class="font-bold uppercase text-sm mb-2 dark:text-gray-200">Haber Bülteni</h4>
            <form>
                <div class="flex flex-col space-y-2">
                    <input type="email" placeholder="E-posta adresiniz"
                        class="border border-gray-300 dark:border-gray-600 dark:bg-gray-700/40 dark:text-white rounded-lg px-3 py-2 text-sm">
                    <button type="submit"
                        class="bg-black text-white dark:bg-white dark:text-black rounded-lg text-sm px-3 py-2 w-full">
                        Abone Ol
                    </button>
                </div>
            </form>
        </div>

        <!-- SAĞ KOLON: EN ÇOK OKUNANLAR -->
        <div>
            <h4 class="font-bold uppercase text-sm mb-2 dark:text-gray-200">En Çok Okunanlar</h4>
            <div class="space-y-2">
                @foreach ($last10News as $news)
                <a href="#"
                    onclick="openNewsModal({{ $news->id }}, '{{ addslashes($news->ai_name) }}', '{{ addslashes($news->ai_description) }}', '{{ $news->image }}', '{{ $news->created_at->format('H:i') }}', '{{ $news->created_at->locale('tr')->translatedFormat('l, j F Y') }}', {{ json_encode($news->districts->pluck('name')) }}, {{ json_encode($news->categories->pluck('name')) }})"
                    class="flex items-start border-b border-gray-200 dark:border-gray-700/40 pb-2 hover:underline dark:text-gray-200 cursor-pointer">
                    <span class="material-symbols-outlined text-yellow-500 text-xs mr-1.5 mt-0.5">
                        trending_up
                    </span>
                    <span class="text-sm">{{ $news->ai_name }}</span>
                </a>
                @endforeach
            </div>
        </div>

        <!-- SAĞ KOLON: HABER KATEGORİLERİ -->
        <div>
            <h4 class="font-bold uppercase text-sm mb-2 dark:text-gray-200">Haber Kategorileri</h4>
            <div class="flex flex-wrap gap-2">
                @foreach ($categories as $category)
                <a href="{{ route('category.show', $category) }}"
                    class="border border-gray-300 dark:border-gray-700 text-xs px-2.5 py-1 rounded-full hover:underline">
                    {{ $category->name }}
                </a>
                @endforeach
            </div>
        </div>

        <!-- SAĞ KOLON: BURSA İLÇELERİ -->
        <div>
            <h4 class="font-bold uppercase text-sm mb-2 dark:text-gray-200">Bursa İlçeleri</h4>
            <div class="flex flex-wrap gap-2">
                <a href="{{ route('district.show', ['district' => 'bursa']) }}"
                    class="border border-gray-300 dark:border-gray-700 text-xs px-2.5 py-1 rounded-full hover:underline">
                    Bursa
                </a>
                @foreach ($centerDistricts as $district)
                <a href="{{ route('district.show', $district) }}"
                    class="border border-gray-300 dark:border-gray-700 text-xs px-2.5 py-1 rounded-full hover:underline">
                    {{ $district->name }}
                </a>
                @endforeach
                @foreach ($farDistricts as $district)
                <a href="{{ route('district.show', $district) }}"
                    class="border border-gray-300 dark:border-gray-700 text-xs px-2.5 py-1 rounded-full hover:underline">
                    {{ $district->name }}
                </a>
                @endforeach
            </div>
        </div>
    </div>
</div>

<script>
    // Tooltips for pharmacy details
            document.addEventListener('DOMContentLoaded', function() {
                const pharmacyItems = document.querySelectorAll('.pharmacy-item');
                const pharmacyTooltip = document.getElementById('pharmacy-tooltip');

                pharmacyItems.forEach(item => {
                    item.addEventListener('mouseenter', function() {
                        const name = this.getAttribute('data-name');
                        const dist = this.getAttribute('data-district');
                        const addr = this.getAttribute('data-address');
                        const phone = this.getAttribute('data-phone');

                        pharmacyTooltip.innerHTML =
                            '<strong>' + name + '</strong><br>' +
                            'İlçe: ' + dist + '<br>' +
                            'Adres: ' + addr + '<br>' +
                            'Telefon: ' + phone;

                        positionPharmacyTooltip(event, this, pharmacyTooltip);
                        pharmacyTooltip.classList.add('opacity-100', 'pointer-events-auto');
                        pharmacyTooltip.classList.remove('opacity-0', 'pointer-events-none');
                    });

                    item.addEventListener('mousemove', function(e) {
                        positionPharmacyTooltip(e, this, pharmacyTooltip);
                    });

                    item.addEventListener('mouseleave', function() {
                        pharmacyTooltip.classList.add('opacity-0', 'pointer-events-none');
                        pharmacyTooltip.classList.remove('opacity-100', 'pointer-events-auto');
                    });
                });

                function positionPharmacyTooltip(e, element, tooltip) {
                    const rect = element.getBoundingClientRect();
                    const tooltipRect = tooltip.getBoundingClientRect();

                    let left = e.clientX + 10;
                    let top = e.clientY + 10;

                    // Check screen edges
                    if (left + tooltipRect.width > window.innerWidth) {
                        left = window.innerWidth - tooltipRect.width - 10;
                    }
                    if (top + tooltipRect.height > window.innerHeight) {
                        top = window.innerHeight - tooltipRect.height - 10;
                    }

                    tooltip.style.left = left + 'px';
                    tooltip.style.top = top + 'px';
                }
            });

            // View counting functionality
            let viewTimers = {};

            function openNewsModal(newsId, title, description, image, time, date, districts, categories) {
                // Fill modal content
                document.getElementById('modal-title').textContent = title;
                document.getElementById('modal-description').textContent = description;

                if(image) {
                    const bgImage = document.getElementById('modal-bg-image');
                    bgImage.src = image;
                    document.getElementById('modal-bg-image-container').classList.remove('hidden');
                } else {
                    document.getElementById('modal-bg-image-container').classList.add('hidden');
                }

                document.getElementById('modal-time').textContent = time;
                document.getElementById('modal-date').textContent = date;

                // Show districts and categories
                const districtsContainer = document.getElementById('modal-districts');
                const categoriesContainer = document.getElementById('modal-categories');

                districtsContainer.innerHTML = '';
                categoriesContainer.innerHTML = '';

                if(districts && districts.length > 0) {
                    districtsContainer.innerHTML = '<span class="text-xs text-gray-400 uppercase">İlçeler:</span> ' +
                        districts.map(d => '<span class="text-xs mr-2 text-gray-600 dark:text-gray-300">#' + d + '</span>').join('');
                }

                if(categories && categories.length > 0) {
                    categoriesContainer.innerHTML = '<span class="text-xs text-gray-400 uppercase">Kategoriler:</span> ' +
                        categories.map(c => '<span class="text-xs mr-2 text-gray-600 dark:text-gray-300">#' + c + '</span>').join('');
                }

                // Show modal
                document.getElementById('news-modal').classList.remove('hidden');

                // Start view timer for this news item
                startViewTimer(newsId);
            }

            function closeNewsModal() {
                document.getElementById('news-modal').classList.add('hidden');

                // Clear all view timers when modal is closed
                for (let timerId in viewTimers) {
                    clearTimeout(viewTimers[timerId]);
                    delete viewTimers[timerId];
                }
            }

            function startViewTimer(newsId) {
                // Clear any existing timer for this news item
                if (viewTimers[newsId]) {
                    clearTimeout(viewTimers[newsId]);
                    delete viewTimers[newsId];
                }

                // Set a new timer for 7 seconds
                viewTimers[newsId] = setTimeout(function() {
                    // Log the request details
                    console.log('Sending view increment request for news ID:', newsId);

                    // Send AJAX request to increment view count (API routes don't need CSRF token)
                    fetch('/api/news/' + newsId + '/increment-views', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        }
                    })
                    .then(response => {
                        console.log('Response status:', response.status);
                        return response.json();
                    })
                    .then(data => {
                        if(data.success) {
                            console.log('View count updated successfully for news ID:', newsId, 'New views:', data.views);
                        } else {
                            console.error('Failed to update view count for news ID:', newsId, 'Error:', data.error);
                        }
                    })
                    .catch(error => {
                        console.error('Error updating view count for news ID:', newsId, 'Error:', error);
                    });

                    // Remove the timer from the list after execution
                    delete viewTimers[newsId];
                }, 4000); // 4 seconds
            }

            // Track views of news items in the viewport
            let inViewportTimers = {};

            // Function to check if an element is in the viewport
            function isElementInViewport(el) {
                const rect = el.getBoundingClientRect();
                const windowHeight = (window.innerHeight || document.documentElement.clientHeight);
                const windowWidth = (window.innerWidth || document.documentElement.clientWidth);

                return (
                    rect.top >= 0 &&
                    rect.left >= 0 &&
                    rect.bottom <= windowHeight * 0.8 && // Element should be mostly visible
                    rect.right <= windowWidth
                );
            }

            // Function to handle news visibility
            function handleNewsVisibility(newsId) {
                // Clear any existing timer for this news item
                if (inViewportTimers[newsId]) {
                    clearTimeout(inViewportTimers[newsId]);
                    delete inViewportTimers[newsId];
                }

                // Set a new timer for 8 seconds if the news is in the viewport
                inViewportTimers[newsId] = setTimeout(function() {
                    // Send AJAX request to increment view count for this news item
                    fetch('/api/news/' + newsId + '/increment-views', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        }
                    })
                    .then(response => {
                        return response.json();
                    })
                    .then(data => {
                        if(data.success) {
                            console.log('News visibility count updated for news ID:', newsId, 'New views:', data.views);
                        } else {
                            console.error('Failed to update visibility count for news ID:', newsId, 'Error:', data.error);
                        }
                    })
                    .catch(error => {
                        console.error('Error updating visibility count for news ID:', newsId, 'Error:', error);
                    });

                    // Remove the timer from the list after execution
                    delete inViewportTimers[newsId];
                }, 8000); // 8 seconds
            }

            // Function to monitor news items in the viewport
            function monitorNewsVisibility() {
                const newsItems = document.querySelectorAll('.masonry-item');

                newsItems.forEach(function(item) {
                    const newsId = item.getAttribute('onclick').match(/openNewsModal\((\d+),/);

                    if (newsId && newsId[1]) {
                        const id = newsId[1];

                        // Check if the news item is in the viewport
                        if (isElementInViewport(item)) {
                            // If news item is in the viewport and no timer is set, start the timer
                            if (!inViewportTimers[id]) {
                                handleNewsVisibility(id);
                            }
                        } else {
                            // If the news item is out of viewport, clear the timer
                            if (inViewportTimers[id]) {
                                clearTimeout(inViewportTimers[id]);
                                delete inViewportTimers[id];
                            }
                        }
                    }
                });
            }

            // Set up intersection observer to monitor news item visibility
            let observer;
            if ('IntersectionObserver' in window) {
                observer = new IntersectionObserver(function(entries) {
                    entries.forEach(function(entry) {
                        if (entry.isIntersecting) {
                            // Get news ID from the click handler of the element
                            const newsId = entry.target.getAttribute('onclick').match(/openNewsModal\((\d+),/);
                            if (newsId && newsId[1]) {
                                const id = newsId[1];
                                handleNewsVisibility(id);
                            }
                        } else {
                            // If the element is no longer visible, clear any timer
                            const newsId = entry.target.getAttribute('onclick').match(/openNewsModal\((\d+),/);
                            if (newsId && newsId[1]) {
                                const id = newsId[1];
                                if (inViewportTimers[id]) {
                                    clearTimeout(inViewportTimers[id]);
                                    delete inViewportTimers[id];
                                }
                            }
                        }
                    });
                }, {
                    threshold: 0.6 // Element is considered visible when 60% is in viewport
                });

                // Observe all news items
                document.querySelectorAll('.masonry-item').forEach(function(item) {
                    observer.observe(item);
                });
            }

            // Also monitor with scroll and resize events as a fallback
            window.addEventListener('scroll', monitorNewsVisibility);
            window.addEventListener('resize', monitorNewsVisibility);
</script>

<!-- News Detail Modal -->
<div id="news-modal" class="hidden fixed inset-0 z-50 overflow-y-auto">
    <div class="fixed inset-0 bg-black bg-opacity-75" onclick="closeNewsModal()"></div>
    <div class="relative flex items-center justify-center min-h-screen p-4">
        <div
            class="relative bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
            <div class="p-6">
                <div class="flex justify-between items-start mb-4">
                    <h3 id="modal-title" class="text-2xl font-bold text-gray-900 dark:text-white"></h3>
                    <button onclick="closeNewsModal()"
                        class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200">
                        <span class="material-symbols-outlined">close</span>
                    </button>
                </div>

                <div id="modal-bg-image-container" class="mb-4">
                    <img id="modal-bg-image" src="" alt="News" class="w-full h-auto rounded">
                </div>

                <div class="flex gap-x-4 text-sm text-gray-500 dark:text-gray-400 mb-4">
                    <span id="modal-time" class="flex items-center gap-1">
                        <span class="material-symbols-outlined text-sm">schedule</span>
                        <span></span>
                    </span>
                    <span id="modal-date"></span>
                </div>

                <div id="modal-districts" class="mb-3"></div>
                <div id="modal-categories" class="mb-4"></div>

                <p id="modal-description" class="text-gray-700 dark:text-gray-300 leading-relaxed"></p>
            </div>
        </div>
    </div>
</div>
@endsection