@extends('layouts.app')
@section('title', 'Berita - ' . ($setting->nama_sekolah ?? 'Nama Sekolah'))
@section('content')
    <section id="berita" class="bg-gray-50 py-20 px-6" data-aos="fade-up">
        <div class="max-w-6xl mx-auto text-center mb-12">
            <h2 class="text-3xl font-bold text-blue-700 mb-4">Berita Terbaru</h2>
            <p class="text-gray-600">Informasi dan kegiatan terbaru seputar sekolah kami.</p>
        </div>

        <div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3" data-aos="fade-up" data-aos-delay="100">
            @foreach ($berita as $item)
                <div class="bg-white rounded-2xl shadow-md overflow-hidden hover:shadow-xl transition" data-aos="zoom-in"
                    data-aos-delay="{{ $loop->iteration * 50 }}">
                    <img src="{{ asset('storage/' . $item->image) }}" alt="{{ $item->title }}"
                        class="w-full h-48 object-cover">
                    <div class="p-6 text-left">
                        <h3 class="text-lg font-semibold text-gray-800 mb-2">{{ $item->title }}</h3>
                        <p class="text-sm text-gray-500 mb-3">
                            {{ \Carbon\Carbon::parse($item->news_date)->translatedFormat('d F Y') }}</p>
                        <p class="text-gray-600 text-sm mb-4">
                            {{ Str::limit(strip_tags($item->content), 120, '...') }}
                        </p>
                        <a href="{{ route('berita.detail', $item->slug) }}"
                            class="text-blue-600 font-semibold hover:underline">Baca Selengkapnya →</a>
                    </div>
                </div>
            @endforeach
        </div>

        {{-- ✅ Custom Pagination --}}
        @if ($berita->hasPages())
            <div class="mt-12 flex justify-center items-center flex-wrap gap-2" data-aos="fade-up">
                {{-- Tombol Previous --}}
                @if ($berita->onFirstPage())
                    <span class="px-4 py-2 text-sm font-semibold text-gray-400 bg-gray-200 rounded-lg cursor-not-allowed">«
                        Previous</span>
                @else
                    <a href="{{ $berita->previousPageUrl() }}"
                        class="px-4 py-2 text-sm font-semibold text-white bg-blue-700 hover:bg-blue-800 rounded-lg transition">
                        « Previous
                    </a>
                @endif

                {{-- Nomor Halaman --}}
                @foreach ($berita->links()->elements[0] ?? [] as $page => $url)
                    @if ($page == $berita->currentPage())
                        <span
                            class="px-4 py-2 text-sm font-bold text-white bg-blue-600 rounded-lg shadow">{{ $page }}</span>
                    @else
                        <a href="{{ $url }}"
                            class="px-4 py-2 text-sm font-semibold text-blue-700 bg-blue-100 hover:bg-blue-200 rounded-lg transition">
                            {{ $page }}
                        </a>
                    @endif
                @endforeach

                {{-- Tombol Next --}}
                @if ($berita->hasMorePages())
                    <a href="{{ $berita->nextPageUrl() }}"
                        class="px-4 py-2 text-sm font-semibold text-white bg-blue-700 hover:bg-blue-800 rounded-lg transition">
                        Next »
                    </a>
                @else
                    <span
                        class="px-4 py-2 text-sm font-semibold text-gray-400 bg-gray-200 rounded-lg cursor-not-allowed">Next
                        »</span>
                @endif
            </div>
        @endif
    </section>
@endsection