@extends('layouts.district-master')

@section('title', $district->name . ' - The Daily Bursa')


@section('content')
        <!-- Search Bar -->
        <div class="my-6">
            <div class="relative">
                <input
                    type="text"
                    id="search-input"
                    placeholder="Haberlerde ara..."
                    class="w-full p-3 border border-gray-300 dark:border-gray-600 dark:bg-gray-700/40 dark:text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                >
                <div class="absolute inset-y-0 right-0 flex items-center pr-3">
                    <span class="text-gray-400">
                        <i class="fas fa-search"></i>
                    </span>
                </div>
            </div>
        </div>

        <!-- News Content -->
        <div id="news-container" class="masonry-grid">
            @forelse($news as $item)
                <div class="masonry-item border-b border-black/50 dark:border-white/30 pb-4 search-item"
                     data-title="{{ addslashes($item->ai_name) }}"
                     data-description="{{ addslashes($item->ai_description) }}"
                     data-districts="{{ $item->districts->pluck('name')->join(',') }}"
                     data-categories="{{ $item->categories->pluck('name')->join(',') }}">
                    <h3 class="font-semibold text-lg mb-2 dark:text-gray-100">
                        @if($item->created_at >= $twoHoursAgo)
                        <span class="material-symbols-outlined text-sm text-yellow-500">
                            asterisk
                        </span>
                        @endif
                        {{ $item->ai_name }}
                    </h3>
                    <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">
                        {{ $item->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>{{ $item->created_at->format('H:i') }}</span>
                        </div>
                        @foreach($item->districts as $dist)
                        <span>#{{ $dist->name }}</span>
                        @endforeach
                        @foreach($item->categories as $category)
                        <span>#{{ $category->name }}</span>
                        @endforeach
                    </div>
                    @if ($item->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 ($item->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
                </div>
            @empty
                <div class="masonry-item text-center py-8" id="no-results" style="display: none;">
                    <p class="text-lg">Bu ilçeye ait hiç haber bulunamadı.</p>
                </div>
            @endforelse
        </div>

        <div class="masonry-item text-center py-8" id="no-results-found" style="display: none;">
            <p class="text-lg">Arama kriterlerinize uygun haber bulunamadı.</p>
        </div>

        <!-- Pagination -->
        <div class="mt-8">
            {{ $news->links() }}
        </div>

        <script>
            document.addEventListener('DOMContentLoaded', function() {
                const searchInput = document.getElementById('search-input');
                const searchItems = document.querySelectorAll('.search-item');
                const noResultsFound = document.getElementById('no-results-found');

                // Türkçe karakterleri normalize eden fonksiyon
                function normalizeText(text) {
                    return text
                        .toLowerCase()
                        .replace(/ı/g, 'i')
                        .replace(/ç/g, 'c')
                        .replace(/ş/g, 's')
                        .replace(/ğ/g, 'g')
                        .replace(/ü/g, 'u')
                        .replace(/ö/g, 'o')
                        .replace(/İ/g, 'i')
                        .replace(/Ç/g, 'c')
                        .replace(/Ş/g, 's')
                        .replace(/Ğ/g, 'g')
                        .replace(/Ü/g, 'u')
                        .replace(/Ö/g, 'o');
                }

                // Arama işlevi
                function performSearch() {
                    const searchTerm = searchInput.value.trim();

                    // Eğer arama terimi 2 karakterden azsa filtreleme yapma
                    if (searchTerm.length < 2) {
                        searchItems.forEach(item => {
                            item.style.display = 'block';
                        });
                        noResultsFound.style.display = 'none';
                        return;
                    }

                    const normalizedSearchTerm = normalizeText(searchTerm);
                    let hasVisibleItems = false;

                    searchItems.forEach(item => {
                        const title = item.getAttribute('data-title');
                        const description = item.getAttribute('data-description');
                        const districts = item.getAttribute('data-districts');
                        const categories = item.getAttribute('data-categories');

                        const isMatch =
                            normalizeText(title).includes(normalizedSearchTerm) ||
                            normalizeText(description).includes(normalizedSearchTerm) ||
                            normalizeText(districts).includes(normalizedSearchTerm) ||
                            normalizeText(categories).includes(normalizedSearchTerm);

                        if (isMatch) {
                            item.style.display = 'block';
                            hasVisibleItems = true;
                        } else {
                            item.style.display = 'none';
                        }
                    });

                    // Eğer sonuç yoksa "sonuç bulunamadı" mesajını göster
                    noResultsFound.style.display = hasVisibleItems ? 'none' : 'block';
                }

                // 300ms debounce ile arama yap
                let searchTimeout;
                searchInput.addEventListener('input', function() {
                    clearTimeout(searchTimeout);
                    searchTimeout = setTimeout(performSearch, 300);
                });
            });
        </script>
@endsection