@extends('layouts.web')

@section('content')
@php
use Illuminate\Support\Facades\Storage;
use Carbon\Carbon;
@endphp

<div class="min-h-screen bg-white">
    <!-- Hero Section -->
    <section class="hero-news-section relative overflow-hidden">
        <div class="hero-gradient-bg"></div>
        <div class="hero-dots-pattern"></div>
        <div class="hero-circles">
            <div class="hero-circle hero-circle-1"></div>
            <div class="hero-circle hero-circle-2"></div>
            <div class="hero-circle hero-circle-3"></div>
        </div>
        
        <div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 md:py-28">
            <div class="text-center">
                <h1 class="hero-news-title text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-6">
                    Berita & Informasi
                </h1>
                <p class="hero-news-subtitle text-lg md:text-xl text-white max-w-2xl mx-auto opacity-90">
                    Update terbaru seputar kegiatan, prestasi, dan pengumuman sekolah
                </p>
            </div>
        </div>
        
        <!-- Rounded Bottom -->
        <div class="hero-rounded-bottom"></div>
    </section>

    <!-- Section: Berita Terbaru -->
    <section class="py-12 px-4 sm:px-6 lg:px-8 bg-white">
        <div class="max-w-7xl mx-auto">
            <!-- Header Section -->
            <div class="mb-8">
                <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-2">Berita Terbaru</h2>
                <p class="text-gray-600">Informasi paling update dari sekolah</p>
                <div class="mt-4 h-1 w-24 bg-purple-600 rounded"></div>
            </div>

            @if($featuredNews->count() > 0)
                <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 items-stretch">
                    <!-- Main Featured Card (Left) -->
                    <div class="lg:col-span-2 flex">
                        @php $mainNews = $featuredNews->first(); @endphp
                        <a href="{{ route('news.show', $mainNews) }}" 
                           class="bg-white rounded-2xl shadow-lg overflow-hidden group hover:shadow-xl transition-all duration-300 flex flex-col w-full h-full cursor-pointer block">
                            <!-- Image Container -->
                            <div class="relative h-80 overflow-hidden flex-shrink-0">
                                @if(!empty($mainNews->image))
                                    <img src="{{ Storage::url($mainNews->image) }}" 
                                         alt="{{ $mainNews->title }}"
                                         class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
                                         onerror="this.onerror=null; this.src='{{ asset('assets/images/begron/defoult.png') }}';">
                                @else
                                    <img src="{{ asset('assets/images/begron/defoult.png') }}" 
                                         alt="Default Image"
                                         class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
                                @endif
                                
                                <!-- Badge TERBARU -->
                                <div class="absolute top-4 left-4">
                                    <span class="bg-blue-500 text-white px-4 py-2 rounded-full text-xs font-semibold shadow-lg">
                                        TERBARU
                                    </span>
                                </div>
                            </div>
                            
                            <!-- Card Content -->
                            <div class="p-6 flex-grow flex flex-col">
                                <!-- Date & Time -->
                                <div class="flex items-center text-sm text-gray-500 mb-3">
                                    <i class="far fa-calendar-alt mr-2"></i>
                                    <span>{{ Carbon::parse($mainNews->created_at)->format('d M Y') }}</span>
                                    <span class="mx-2">•</span>
                                    <span>{{ Carbon::parse($mainNews->created_at)->diffForHumans() }}</span>
                                </div>
                                
                                <!-- Title -->
                                <h3 class="text-2xl font-bold text-gray-900 mb-3 line-clamp-2 group-hover:text-purple-600 transition-colors">
                                    {{ $mainNews->title }}
                                </h3>
                                
                                <!-- Excerpt -->
                                <p class="text-gray-600 mb-4 line-clamp-3 flex-grow">
                                    {{ \Illuminate\Support\Str::limit(strip_tags($mainNews->content), 150) }}
                                </p>
                                
                                <!-- Rating (Mockup) -->
                                <div class="flex items-center mb-4">
                                    <div class="flex items-center text-yellow-400 mr-2">
                                        @for($i = 0; $i < 5; $i++)
                                            <i class="fas fa-star text-sm"></i>
                                        @endfor
                                    </div>
                                    <span class="text-sm text-gray-600">4.2 (8 rating)</span>
                                </div>
                                
                                <!-- Read Indicator -->
                                <div class="inline-flex items-center px-6 py-3 bg-purple-100 text-purple-700 rounded-lg font-medium mt-auto">
                                    <span>Baca Selengkapnya</span>
                                    <i class="fas fa-arrow-right ml-2"></i>
                                </div>
                            </div>
                        </a>
                    </div>

                    <!-- Side Cards (Right) -->
                    <div class="lg:col-span-1 flex flex-col gap-4 h-full">
                        @foreach($featuredNews->skip(1)->take(2) as $news)
                            <a href="{{ route('news.show', $news) }}" 
                               class="bg-white rounded-2xl shadow-md overflow-hidden group hover:shadow-xl transition-all duration-300 flex flex-col flex-1 min-h-0 cursor-pointer block">
                                <!-- Image Container -->
                                <div class="relative h-36 overflow-hidden flex-shrink-0">
                                    @if(!empty($news->image))
                                        <img src="{{ Storage::url($news->image) }}" 
                                             alt="{{ $news->title }}"
                                             class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
                                             onerror="this.onerror=null; this.src='{{ asset('assets/images/begron/defoult.png') }}';">
                                    @else
                                        <img src="{{ asset('assets/images/begron/defoult.png') }}" 
                                             alt="Default Image"
                                             class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
                                    @endif
                                    
                                    <!-- Badge NEW -->
                                    <div class="absolute top-3 left-3">
                                        <span class="bg-blue-500 text-white px-3 py-1 rounded-full text-xs font-semibold shadow-lg">
                                            NEW
                                        </span>
                                    </div>
                                </div>
                                
                                <!-- Card Content -->
                                <div class="p-3 flex-grow flex flex-col min-h-0">
                                    <!-- Date -->
                                    <div class="flex items-center text-xs text-gray-500 mb-1.5">
                                        <i class="far fa-calendar-alt mr-2"></i>
                                        <span>{{ Carbon::parse($news->created_at)->format('d M Y') }}</span>
                                    </div>
                                    
                                    <!-- Title -->
                                    <h4 class="text-sm font-bold text-gray-900 mb-2 line-clamp-2 group-hover:text-purple-600 transition-colors">
                                        {{ \Illuminate\Support\Str::limit($news->title, 55) }}
                                    </h4>
                                    
                                    <!-- Excerpt -->
                                    <p class="text-xs text-gray-600 mb-2 line-clamp-2 flex-grow">
                                        {{ \Illuminate\Support\Str::limit(strip_tags($news->content), 70) }}
                                    </p>
                                    
                                    <!-- Rating -->
                                    <div class="flex items-center mb-2">
                                        <div class="flex items-center text-yellow-400 mr-1.5">
                                            @for($i = 0; $i < 5; $i++)
                                                <i class="fas fa-star text-xs"></i>
                                            @endfor
                                        </div>
                                        <span class="text-xs text-gray-600">4.8 ({{ rand(10, 20) }})</span>
                                    </div>
                                    
                                    <!-- Read Indicator -->
                                    <div class="inline-flex items-center px-3 py-1.5 bg-purple-100 text-purple-700 rounded-lg text-xs font-medium mt-auto">
                                        <span>Baca Selengkapnya</span>
                                        <i class="fas fa-arrow-right ml-1.5 text-xs"></i>
                                    </div>
                                </div>
                            </a>
                        @endforeach
                    </div>
                </div>
            @endif
        </div>
    </section>

    <!-- Section: Semua Berita -->
    <section class="py-12 px-4 sm:px-6 lg:px-8 bg-gray-50">
        <div class="max-w-7xl mx-auto">
            <!-- Header Section -->
            <div class="mb-8">
                <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-2">Semua Berita</h2>
                <p class="text-gray-600">Jelajahi artikel dan informasi lainnya</p>
                <div class="mt-4 h-1 w-24 bg-purple-600 rounded"></div>
            </div>

            <!-- Search and Filter Bar -->
            <div class="bg-white rounded-xl shadow-md p-4 mb-8 flex flex-col sm:flex-row gap-4 items-center">
                <!-- Search Input -->
                <div class="flex-1 w-full sm:w-auto flex items-center bg-gray-50 rounded-lg px-4 py-3 border border-gray-200 focus-within:border-purple-500 focus-within:ring-2 focus-within:ring-purple-200">
                    <i class="fas fa-search text-gray-400 mr-3"></i>
                    <input type="text" 
                           id="searchNews"
                           class="flex-1 bg-transparent border-none outline-none text-gray-700 placeholder-gray-400"
                           placeholder="Cari berita berdasarkan judul, konten, atau kata kunci..."
                           autocomplete="off">
                </div>
                
                <!-- Search Button -->
                <button class="px-6 py-3 bg-purple-600 hover:bg-purple-700 text-white rounded-lg font-medium transition-all duration-200 shadow-md hover:shadow-lg whitespace-nowrap"
                        type="button"
                        onclick="performSearch()">
                    Cari
                </button>
                
                <!-- News Count Badge -->
                <div class="px-6 py-3 bg-purple-100 text-purple-700 rounded-lg font-semibold whitespace-nowrap">
                    {{ $totalNews }} Berita
                </div>
            </div>

            <!-- News Grid -->
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6" id="newsContainer">
                @foreach($allNews as $news)
                    <a href="{{ route('news.show', $news) }}" 
                       class="news-item bg-white rounded-xl shadow-md overflow-hidden group hover:shadow-xl transition-all duration-300 h-full flex flex-col cursor-pointer block"
                       data-title="{{ strtolower($news->title) }}"
                       data-content="{{ strtolower(strip_tags($news->content)) }}">
                        <!-- Image Container -->
                        <div class="relative h-48 overflow-hidden bg-gradient-to-br from-teal-400 to-blue-500">
                            @if(!empty($news->image))
                            <img src="{{ Storage::url($news->image) }}" 
                                     alt="{{ $news->title }}"
                                     class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
                                     onerror="this.onerror=null; this.src='{{ asset('assets/images/begron/defoult.png') }}';"> 
                            @else
                                <img src="{{ asset('assets/images/begron/defoult.png') }}" 
                                     alt="Default Image"
                                     class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
                            @endif
                        </div>
                        
                        <!-- Card Body -->
                        <div class="p-5 flex-grow flex flex-col">
                            <!-- Date -->
                            <div class="flex items-center text-xs text-gray-500 mb-2">
                                <i class="far fa-calendar-alt mr-2"></i>
                                <span>{{ Carbon::parse($news->created_at)->format('d M Y') }}</span>
                            </div>
                            
                            <!-- Title -->
                            <h6 class="text-base font-bold text-gray-900 mb-2 line-clamp-2 group-hover:text-purple-600 transition-colors">
                                {{ \Illuminate\Support\Str::limit($news->title, 60) }}
                            </h6>
                            
                            <!-- Excerpt -->
                            <p class="text-sm text-gray-600 mb-3 flex-grow line-clamp-2">
                                {{ \Illuminate\Support\Str::limit(strip_tags($news->content), 80) }}
                            </p>
                            
                            <!-- Rating -->
                            <div class="flex items-center mb-3">
                                <div class="flex items-center text-yellow-400 mr-2">
                                    @for($i = 0; $i < 5; $i++)
                                        <i class="fas fa-star text-xs"></i>
                                    @endfor
                                </div>
                                <span class="text-xs text-gray-600">4.{{ rand(0, 9) }} ({{ rand(1, 10) }})</span>
                            </div>
                            
                            <!-- Read Indicator -->
                            <div class="inline-flex items-center justify-center px-4 py-2 bg-purple-100 text-purple-700 rounded-lg text-sm font-medium">
                                <span>Baca +</span>
                                <i class="fas fa-arrow-right ml-2 text-xs"></i>
                            </div>
                        </div>
                    </a>
                @endforeach
            </div>

            <!-- Empty State -->
            @if($allNews->count() === 0)
                <div class="text-center py-16">
                    <div class="inline-flex items-center justify-center w-20 h-20 rounded-full bg-gray-100 mb-4">
                        <i class="fas fa-newspaper text-4xl text-gray-400"></i>
                    </div>
                    <h3 class="text-xl font-semibold text-gray-900 mb-2">Tidak ada berita</h3>
                    <p class="text-gray-600">Belum ada berita yang tersedia saat ini.</p>
                </div>
            @endif

            <!-- Pagination -->
            @if($allNews->count() > 0 && $allNews->hasPages())
                <div class="flex justify-center mt-12">
                    {{ $allNews->links() }}
                </div>
            @endif
        </div>
    </section>
</div>

@push('scripts')
<script src="{{ asset('js/news-search.js') }}"></script>
@endpush
@endsection