@php
    function kategoriWarna($nama)
    {
        $colors = [
            'bg-red-500', 'bg-green-500', 'bg-blue-500', 'bg-yellow-500',
            'bg-purple-500', 'bg-pink-500', 'bg-indigo-500', 'bg-emerald-600',
            'bg-cyan-600', 'bg-orange-500', 'bg-amber-600', 'bg-teal-500',
        ];
        $index = crc32(strtolower($nama)) % count($colors);
        return $colors[$index];
    }
@endphp

@extends('layouts.app')

@section('title', 'Daftar Berita') {{-- Pastikan judul halaman sesuai --}}

@section('head')
    {{-- Font Awesome untuk ikon --}}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" xintegrity="sha512-Fo3rlalDLrpkC80qWkR6E/D8oU7iM+1d/B+n3S7q2YqW4bW2w8P/yU1bYfQ3Xm+mOq/zFqXw5Lw+A9q/g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
@endsection

@section('content')
<div x-data="{ show: false }" x-init="setTimeout(() => show = true, 100)" x-show="show" x-transition.opacity.duration.700ms class="container mx-auto px-6 py-10">

    {{-- Pesan Flash (Sukses/Error) --}}
    @if(session('success'))
        <div class="bg-green-100 dark:bg-green-900 border-l-4 border-green-500 text-green-700 dark:text-green-200 p-4 mb-6 rounded-md shadow-sm" role="alert">
            <p class="font-bold">Berhasil!</p>
            <p>{{ session('success') }}</p>
        </div>
    @endif

    @if(session('error'))
        <div class="bg-red-100 dark:bg-red-900 border-l-4 border-red-500 text-red-700 dark:text-red-200 p-4 mb-6 rounded-md shadow-sm" role="alert">
            <p class="font-bold">Oops!</p>
            <p>{{ session('error') }}</p>
        </div>
    @endif

    <div class="flex flex-col md:flex-row justify-between items-center mb-10 gap-4">
        <h1 class="text-4xl font-bold text-gray-800 dark:text-white">📰 Daftar Berita</h1>
    </div>

    <!-- Filter & Search Section -->
    <div class="bg-gray-50 dark:bg-gray-800 p-6 rounded-lg shadow-inner mb-10">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-white mb-4">Pencarian & Filter</h2>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <!-- Filter by Category -->
            <div>
                <label for="filter_category" class="block mb-2 text-sm font-semibold text-gray-700 dark:text-gray-300">Filter Kategori</label>
                <select id="filter_category" name="category" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                    <option value="">Semua Kategori</option>
                    @foreach ($categories as $cat)
                        <option value="{{ $cat }}" {{ request('category') == $cat ? 'selected' : '' }}>{{ $cat }}</option>
                    @endforeach
                </select>
            </div>

            <!-- Search by Title -->
            <div>
                <label for="search_title" class="block mb-2 text-sm font-semibold text-gray-700 dark:text-gray-300">Cari Judul</label>
                <input type="text" id="search_title" name="search" value="{{ request('search') }}" placeholder="Ketik judul berita..." class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
            </div>

            <!-- Search & Reset Buttons -->
            <div class="flex flex-col sm:flex-row items-end gap-4 mt-auto"> {{-- mt-auto for alignment --}}
                <button id="search_btn" class="w-full px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-lg shadow-md transition-all duration-200 flex items-center justify-center gap-2">
                    <i class="fas fa-search"></i> Cari
                </button>
                <button id="reset_btn" class="w-full px-6 py-3 bg-gray-500 hover:bg-gray-600 text-white rounded-lg shadow-md transition-all duration-200 flex items-center justify-center gap-2">
                    <i class="fas fa-redo"></i> Reset
                </button>
            </div>
        </div>
    </div>

    <!-- Grid Berita -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">

        @forelse ($news as $item)
            <div class="group bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-md hover:shadow-lg transition transform hover:-translate-y-1 hover:scale-[1.01] border border-gray-200 dark:border-gray-700 relative">
                {{-- Badge Pinned --}}
                @if ($item->is_pinned)
                    <span class="absolute top-3 right-3 bg-yellow-400 text-gray-800 text-xs font-bold px-2 py-1 rounded-full z-10 flex items-center gap-1 shadow-md">
                        <i class="fas fa-thumbtack"></i> Disematkan
                    </span>
                @endif

                {{-- Media (Image/Video) --}}
                @php
                    $ext = pathinfo($item->image ?? '', PATHINFO_EXTENSION); // Handle if image is null
                    $isVideo = in_array(strtolower($ext), ['mp4', 'webm', 'ogg']);
                    $hasMedia = $item->image && file_exists(public_path('storage/' . $item->image));
                @endphp

                <div class="overflow-hidden h-52 relative"> {{-- Reduced height for more cards per row --}}
                    @if ($hasMedia)
                        @if ($isVideo)
                            <video src="{{ asset('storage/' . $item->image) }}" autoplay muted loop playsinline class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"></video>
                        @else
                            <img src="{{ asset('storage/' . $item->image) }}"
                                 alt="{{ $item->title }}"
                                 class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
                        @endif
                    @else
                        <div class="h-full w-full bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-900 flex items-center justify-center text-gray-500 dark:text-gray-400 text-base font-semibold">
                            Tidak ada media
                        </div>
                    @endif
                </div>

                {{-- Konten Berita --}}
                <div class="p-5 flex flex-col justify-between h-[calc(100%-13rem)]"> {{-- Adjust height based on image height --}}
                    <div>
                        <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2 leading-tight group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors duration-200 line-clamp-2" title="{{ $item->title }}">
                            {{ $item->title }}
                        </h3>

                        <div class="text-sm text-gray-600 dark:text-gray-300 mb-3 flex flex-wrap items-center gap-x-3 gap-y-1">
                            <span class="inline-block px-3 py-1 text-xs font-semibold text-white rounded-full {{ kategoriWarna($item->category) }} shadow-sm">
                                {{ $item->category }}
                            </span>
                            <span class="flex items-center gap-1"><i class="far fa-calendar-alt text-gray-500 dark:text-gray-400"></i> {{ \Carbon\Carbon::parse($item->publish_date)->translatedFormat('d M Y') }}</span>
                        </div>

                        <p class="text-gray-700 dark:text-gray-400 mb-4 text-sm line-clamp-3">
                            {{ \Illuminate\Support\Str::limit(strip_tags($item->content), 100, '...') }}
                        </p>
                    </div>

                    <div class="flex flex-col gap-3 pt-4 border-t border-gray-100 dark:border-gray-700">
                        {{-- View Count & Like Count --}}
                        <div class="flex justify-between items-center text-sm text-gray-500 dark:text-gray-400">
                            <span class="flex items-center gap-1">
                                <i class="far fa-eye"></i> {{ number_format($item->view_count) }} views
                            </span>
                            <span class="flex items-center gap-1">
                                <i class="far fa-heart"></i> {{ number_format($item->like_count) }} likes
                            </span>
                        </div>

                        <div class="flex flex-wrap gap-2 text-sm">
                            <a href="{{ route('frontend.berita.show', $item->slug) }}"
                               class="flex-1 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-all duration-200 text-center font-medium shadow-md">
                                <i class="fas fa-external-link-alt mr-1"></i> Detail
                            </a>

                            @auth
                                @if (auth()->id() === $item->user_id)
                                    <a href="{{ route('news.edit', $item->id) }}"
                                       class="flex-1 px-4 py-2 bg-yellow-500 hover:bg-yellow-600 text-white rounded-lg transition-all duration-200 text-center font-medium shadow-md">
                                        <i class="fas fa-edit mr-1"></i> Edit
                                    </a>

                                    <form action="{{ route('news.destroy', $item->id) }}"
                                          method="POST"
                                          onsubmit="return confirm('Yakin ingin menghapus berita ini?');"
                                          class="inline-flex flex-1">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit"
                                                class="w-full px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg transition-all duration-200 text-center font-medium shadow-md">
                                            <i class="fas fa-trash-alt mr-1"></i> Hapus
                                        </button>
                                    </form>
                                @endif
                            @endauth
                        </div>
                    </div>
                </div>
            </div>
        @empty
            <div class="col-span-full text-center text-gray-500 dark:text-gray-400 py-10 bg-white dark:bg-gray-800 rounded-lg shadow-md">
                <i class="fas fa-exclamation-circle text-4xl mb-4"></i>
                <p class="text-xl font-semibold">Maaf, belum ada berita yang tersedia.</p>
                <p class="mt-2">Coba sesuaikan filter atau pencarian Anda.</p>
            </div>
        @endforelse
    </div>

    <!-- Pagination -->
    <div class="mt-10">
        {{ $news->links('vendor.pagination.tailwind') }}
    </div>
</div>

<!-- Search Script -->
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const filterCategory = document.getElementById('filter_category');
        const searchTitle = document.getElementById('search_title');
        const searchBtn = document.getElementById('search_btn');
        const resetBtn = document.getElementById('reset_btn');

        searchBtn.addEventListener('click', function () {
            let url = new URL(window.location.href);

            // Set kategori
            if (filterCategory.value) {
                url.searchParams.set('category', filterCategory.value);
            } else {
                url.searchParams.delete('category');
            }

            // Set pencarian judul
            if (searchTitle.value) {
                url.searchParams.set('search', searchTitle.value);
            } else {
                url.searchParams.delete('search');
            }

            // Reset halaman ke 1 saat filter/search diubah
            url.searchParams.delete('page');

            window.location.href = url.toString();
        });

        resetBtn.addEventListener('click', function () {
            let url = new URL(window.location.href);
            url.searchParams.delete('category');
            url.searchParams.delete('search');
            url.searchParams.delete('page'); // Hapus parameter halaman
            window.location.href = url.toString();
        });
    });
</script>
@endsection