{{-- resources/views/public/berita/index.blade.php --}}
@extends('layouts.public')
@section('title', 'Berita & Pengumuman Terkini')

@section('content')

<!-- Header Section (Hero Background) -->
<section class="position-relative d-flex align-items-center justify-content-center overflow-hidden" style="min-height: 40vh; padding-top: 140px; padding-bottom: 80px; background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-emerald) 100%);">
    <div class="position-absolute top-0 start-0 w-100 h-100" style="background-image: radial-gradient(rgba(255,255,255,0.1) 1px, transparent 1px); background-size: 20px 20px; opacity: 0.3;"></div>
    
    <div class="container position-relative text-center text-white" style="z-index: 2;">
        <span class="badge px-4 py-2 rounded-pill mb-3" style="background: var(--accent-gold); color: var(--primary-dark); font-size: 0.95rem; font-weight: 700; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);">
            <i class="bi bi-newspaper me-1"></i> Pusat Informasi
        </span>
        <h1 class="fw-bold mx-auto mb-3" style="font-size: 3.5rem; font-family: 'Cairo', sans-serif; text-shadow: 0 2px 10px rgba(0,0,0,0.3);">
            Berita & Pengumuman
        </h1>
        <p class="lead mx-auto mb-0" style="max-width: 750px; color: rgba(255,255,255,0.9); font-weight: 400; font-size: 1.15rem;">
            Dapatkan informasi terbaru seputar kegiatan, prestasi, dan pengumuman penting dari madrasah kami.
        </p>
    </div>
</section>

<!-- Konten Utama Berita -->
<section class="section-spacing section-bg-light" style="padding-top: 60px; padding-bottom: 100px;">
    <div class="container">
        <div class="row g-5">
            <!-- Kolom Grid Berita -->
            <div class="col-lg-9">
                <div class="row g-4 mb-5">
                    @forelse($beritas as $berita)
                    <div class="col-md-6">
                        <div class="news-card d-flex flex-column h-100 border-0 shadow-sm rounded-4 overflow-hidden bg-white hover-lift" style="transition: transform 0.3s ease, box-shadow 0.3s ease;">
                            <div class="news-image position-relative" style="height: 220px;">
                                @if($berita->thumbnail)
                                    <img src="{{ asset('storage/berita/' . $berita->thumbnail) }}" class="w-100 h-100 object-fit-cover" alt="{{ $berita->judul }}">
                                @else
                                    <div class="w-100 h-100 d-flex align-items-center justify-content-center bg-primary bg-opacity-10">
                                        <i class="bi bi-image text-primary" style="font-size: 4rem; opacity: 0.3;"></i>
                                    </div>
                                @endif
                                
                                <div class="position-absolute top-0 start-0 m-3">
                                    <span class="badge shadow-sm" style="background: linear-gradient(135deg, var(--primary-emerald) 0%, var(--primary-light) 100%); color: white; padding: 0.5rem 1rem; font-size: 0.85rem;">
                                        {{ $berita->kategori->nama_kategori ?? 'Umum' }}
                                    </span>
                                </div>
                            </div>
                            
                            <div class="news-content p-4 d-flex flex-column" style="flex-grow: 1;">
                                <p class="news-date mb-2 text-muted fw-medium small"><i class="bi bi-calendar-event text-primary me-1"></i> {{ $berita->created_at->format('d M Y') }}</p>
                                <h5 class="news-title mb-3 fw-bold" style="font-family: 'Cairo', sans-serif;">
                                    <a href="{{ route('public.berita.show', $berita->slug) }}" class="text-dark text-decoration-none text-hover-primary" style="transition: color 0.3s;">
                                        {{ $berita->judul }}
                                    </a>
                                </h5>
                                
                                {{-- PEMBARUAN: Menggunakan fungsi substr bawaan PHP murni agar tidak error di server --}}
                                <p class="news-excerpt text-muted mb-4" style="line-height: 1.6; font-size: 0.95rem;">
                                    {{ strlen(strip_tags($berita->konten)) > 120 ? substr(strip_tags($berita->konten), 0, 120) . '...' : strip_tags($berita->konten) }}
                                </p>
                                
                                <div class="mt-auto pt-3 border-top" style="border-color: rgba(0,0,0,0.05) !important;">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <span class="small fw-medium text-secondary"><i class="bi bi-person-circle me-1 text-primary"></i> {{ $berita->author->name ?? 'Admin' }}</span>
                                        <a href="{{ route('public.berita.show', $berita->slug) }}" class="btn-read-more text-decoration-none fw-bold" style="color: var(--primary-emerald);">
                                            Selengkapnya <i class="bi bi-arrow-right"></i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    @empty
                    <div class="col-12 text-center py-5 text-muted bg-white rounded-4 shadow-sm border-0">
                        <i class="bi bi-journal-x" style="font-size: 4rem; color: var(--text-light); opacity: 0.3;"></i>
                        <p class="mt-3 fs-5 fw-medium">Belum ada berita yang diterbitkan pada kategori ini.</p>
                    </div>
                    @endforelse
                </div>
                
                <!-- Pagination -->
                <div class="d-flex justify-content-center">
                    {{ $beritas->links('pagination::bootstrap-5') }}
                </div>
            </div>

            <!-- Kolom Kategori Sidebar -->
            <div class="col-lg-3">
                <div class="card border-0 shadow-sm rounded-4 bg-white sticky-top" style="top: 100px;">
                    <div class="card-body p-4">
                        <h4 class="fw-bold mb-4 d-flex align-items-center gap-2" style="font-size: 1.3rem; font-family: 'Cairo', sans-serif;">
                            <i class="bi bi-tags-fill text-primary"></i> Kategori
                        </h4>
                        <ul class="list-group list-group-flush">
                            <li class="list-group-item px-0 bg-transparent border-bottom" style="border-color: rgba(0,0,0,0.05) !important;">
                                <a href="{{ route('public.berita') }}" class="text-decoration-none d-flex justify-content-between align-items-center {{ !request('kategori') ? 'text-primary fw-bold' : 'text-muted fw-medium' }}" style="transition: all 0.3s ease;">
                                    Semua Berita
                                    @if(!request('kategori'))
                                        <i class="bi bi-chevron-right small"></i>
                                    @endif
                                </a>
                            </li>
                            @foreach($kategoris as $kategori)
                            <li class="list-group-item px-0 bg-transparent border-bottom" style="border-color: rgba(0,0,0,0.05) !important;">
                                <a href="{{ route('public.berita', ['kategori' => $kategori->slug]) }}" class="text-decoration-none d-flex justify-content-between align-items-center {{ request('kategori') == $kategori->slug ? 'text-primary fw-bold' : 'text-muted fw-medium' }}" style="transition: all 0.3s ease;">
                                    {{ $kategori->nama_kategori }} 
                                    <span class="badge rounded-pill {{ request('kategori') == $kategori->slug ? 'bg-primary' : 'bg-light text-dark border' }}">{{ $kategori->beritas_count }}</span>
                                </a>
                            </li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            </div>
            
        </div>
    </div>
</section>

<style>
    .hover-lift:hover { 
        transform: translateY(-8px); 
        box-shadow: 0 15px 35px rgba(0,0,0,0.1) !important; 
    }
    .text-hover-primary:hover {
        color: var(--primary-emerald) !important;
    }
</style>
@endsection