@extends('layouts.app')

@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">

    <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>

        {{-- <a href="{{ route('news.create') }}"
           class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg shadow-md transition transform hover:-translate-y-1">
            📝 Buat Berita Baru
        </a> --}}
    </div>

    <!-- Filter & Search -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-10">
        <!-- 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-800 dark:border-gray-700 dark:text-white">
                <option value="">Semua Kategori</option>
                <option value="Pendidikan" {{ request('category') == 'Pendidikan' ? 'selected' : '' }}>Pendidikan</option>
                <option value="Teknologi" {{ request('category') == 'Teknologi' ? 'selected' : '' }}>Teknologi</option>
                <option value="Kesehatan" {{ request('category') == 'Kesehatan' ? 'selected' : '' }}>Kesehatan</option>
                <option value="Lingkungan" {{ request('category') == 'Lingkungan' ? 'selected' : '' }}>Lingkungan</option>
                <option value="Lainnya" {{ request('category') == 'Lainnya' ? 'selected' : '' }}>Lainnya</option>
            </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="title" value="{{ request('title') }}" 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-800 dark:border-gray-700 dark:text-white">
        </div>

        <!-- Search & Reset Buttons -->
        <div class="flex items-end gap-4">
            <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">🔎 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">♻️ Reset</button>
        </div>
    </div>

    <!-- Grid Berita -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
        @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]">
                {{-- Gambar --}}
                @if ($item->image)
                    <div class="overflow-hidden h-64">
                        <img src="{{ asset('storage/' . $item->image) }}"
                             alt="{{ $item->title }}"
                             class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
                    </div>
                @else
                    <div class="h-64 w-full bg-gray-300 dark:bg-gray-700 flex items-center justify-center text-gray-500">
                        Tidak ada gambar
                    </div>
                @endif

                {{-- Konten --}}
                <div class="p-5">
                    <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">{{ $item->title }}</h3>

                    <div class="text-sm text-gray-600 dark:text-gray-300 mb-2">
                        <span class="block">📅 {{ \Carbon\Carbon::parse($item->publish_date)->format('d M Y') }}</span>
                        <span class="block">📁 Kategori: {{ $item->category }}</span>
                        <span class="block">👤 Oleh: {{ $item->user->name ?? 'Tidak diketahui' }}</span>
                    </div>

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

                    <div class="flex flex-wrap gap-4 text-sm">
                        <a href="{{ route('news.show', $item->id) }}"
                           class="px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded transition">
                            🔍 Lihat Detail
                        </a>

                        @auth
                            @if (auth()->id() === $item->user_id)
                                <a href="{{ route('news.edit', $item->id) }}"
                                   class="px-4 py-2 bg-yellow-500 hover:bg-yellow-600 text-white rounded transition">
                                    ✏️ Edit
                                </a>

                                <form action="{{ route('news.destroy', $item->id) }}"
                                      method="POST"
                                      onsubmit="return confirm('Yakin ingin menghapus berita ini?');"
                                      class="inline">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit"
                                            class="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded transition">
                                        🗑️ Hapus
                                    </button>
                                </form>
                            @endif
                        @endauth
                    </div>
                </div>
            </div>
        @empty
            <div class="col-span-2 text-center text-gray-500 dark:text-gray-400">
                Belum ada berita yang tersedia.
            </div>
        @endforelse
    </div>
</div>

<!-- Search Script -->
<script>
    document.getElementById('search_btn').addEventListener('click', function() {
        let category = document.getElementById('filter_category').value;
        let title = document.getElementById('search_title').value;
        let url = new URL(window.location.href);

        if (category) url.searchParams.set('category', category);
        else url.searchParams.delete('category');

        if (title) url.searchParams.set('title', title);
        else url.searchParams.delete('title');

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

    document.getElementById('reset_btn').addEventListener('click', function() {
        let url = new URL(window.location.href);
        url.searchParams.delete('category');
        url.searchParams.delete('title');
        window.location.href = url.toString();
    });
</script>
@endsection