@extends('layouts.app')

@section('title', 'Berita Kampus')

@push('styles')
<style>
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
    
    body {
        font-family: 'Inter', sans-serif;
        }

        .gradient-text {
            background: linear-gradient(135deg, #006837 0%, #004d28 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        /* Animasi fade-in */
        .animate-fade-in {
            animation: fadeIn 0.8s ease-in-out forwards;
            opacity: 0;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        /* Efek pulse untuk badge */
        .pulse-badge {
            animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
            0% { box-shadow: 0 0 0 0 rgba(0, 104, 55, 0.5); }
            70% { box-shadow: 0 0 0 10px rgba(0, 104, 55, 0); }
            100% { box-shadow: 0 0 0 0 rgba(0, 104, 55, 0); }
        }
        
        /* Efek shimmer untuk highlight */
        .shimmer {
            background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);
            background-size: 200% 100%;
            animation: shimmer 2s infinite;
        }
        
        @keyframes shimmer {
            0% { background-position: -100% 0; }
            100% { background-position: 100% 0; }
        }
        
        /* Efek untuk card berita */
        .berita-card {
            box-shadow: 0 4px 20px -5px rgba(0, 0, 0, 0.1);
        }
        .berita-card-shadow {
            box-shadow: 0 4px 20px -5px rgba(0, 0, 0, 0.1);
        }
        .berita-card-image {
        }
        .berita-image-wrapper {
            position: relative;
            overflow: hidden;
        }
        .berita-image-wrapper::before {
            content: '';
            position: absolute;
            top: 0;
            left: -75%;
            width: 50%;
            height: 100%;
            background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 100%);
            transform: skewX(-25deg);
            transition: left 0.6s cubic-bezier(0.4,0,0.2,1);
            pointer-events: none;
            z-index: 20;
        }
        .berita-image-wrapper:hover::before {
            left: 120%;
            transition: left 0.6s cubic-bezier(0.4,0,0.2,1);
        }
        }
        
        /* Efek hover untuk tombol */
        .btn-hover-effect {
            position: relative;
            overflow: hidden;
        }
        
        .btn-hover-effect:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(255, 255, 255, 0.2);
            transform: scaleX(0);
            transform-origin: right;
            transition: transform 0.4s ease-out;
            z-index: 0;
        }
        
        .btn-hover-effect:hover:after {
            transform: scaleX(1);
            transform-origin: left;
        }
</style>
@endpush

@section('content')
    <!-- Elemen dekoratif di background -->
    <div class="fixed top-0 right-0 w-1/3 h-screen bg-green-50 opacity-30 -z-10 transform -skew-x-12"></div>
    <div class="fixed bottom-0 left-0 w-1/4 h-screen bg-green-100 opacity-30 -z-10 transform skew-x-12"></div>
    
    <div class="container mx-auto px-4 py-12 relative z-10">
        
        <!-- Header Section dengan tampilan modern -->
        <div class="text-center mb-16 relative">
            <div class="inline-block mb-3 px-4 py-1 rounded-full text-sm font-semibold tracking-wide relative overflow-hidden" style="background-color: #dcfce7; color: #006837;">
                <span class="absolute inset-0 bg-gradient-to-r from-green-50/0 via-green-50/80 to-green-50/0 -translate-x-full animate-[shimmer_2s_infinite]"></span>
                <i class="fas fa-newspaper mr-2"></i> PORTAL BERITA KAMPUS
            </div>
            <h1 class="text-5xl lg:text-6xl font-extrabold tracking-tight mb-4">
                <span class="text-gray-900">Berita & </span>
                <span class="gradient-text">Informasi</span>
            </h1>
            <p class="text-xl text-gray-600 mt-4 max-w-3xl mx-auto leading-relaxed">
                Tetap terinformasi dengan berita dan pengumuman terbaru dari kami. 
                <span class="font-medium" style="color: #006837;">Jangan lewatkan update penting!</span>
            </p>
        </div>

        <!-- Search Bar dengan efek lebih menarik -->
        <div class="mb-12 max-w-3xl mx-auto relative">
            <form action="{{ route('berita.index') }}" method="GET">
                <div class="relative group">
                    <div class="absolute inset-0 rounded-full blur opacity-30 group-hover:opacity-70 transition duration-500" style="background: linear-gradient(to right, #006837, #004d28);"></div>
                    <div class="relative">
                        <input type="text" name="search" placeholder="Cari berita berdasarkan judul atau tag..." 
                               class="w-full py-4 pl-12 pr-12 text-lg text-gray-700 bg-white rounded-full shadow-md focus:outline-none transition-all duration-300" style="box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); outline: none;" onfocus="this.style.boxShadow='0 0 0 2px #006837'" onblur="this.style.boxShadow='0 4px 6px -1px rgba(0, 0, 0, 0.1)'"
                               value="{{ request('search') }}">
                        <div class="absolute top-0 left-0 mt-4 ml-4" style="color: #006837;">
                            <i class="fas fa-search fa-lg"></i>
                        </div>
                        <button type="submit" class="absolute top-0 right-0 mt-2 mr-2 text-white p-2 rounded-full transition-all duration-300 shadow-md" style="background-color: #006837;" onmouseover="this.style.backgroundColor='#004d28'" onmouseout="this.style.backgroundColor='#006837'">
                            <i class="fas fa-arrow-right fa-lg px-1"></i>
                        </button>
                    </div>
                </div>
                <div class="mt-3 flex justify-center flex-wrap gap-2 text-sm text-gray-600">
                    @if(isset($popularTags) && $popularTags->count() > 0)
                        @foreach($popularTags as $tag)
                            <a href="{{ route('berita.index', ['search' => $tag]) }}" class="px-3 py-1 rounded-full cursor-pointer transition-colors duration-300" style="background-color: #dcfce7; border: 1px solid #bbf7d0;" onmouseover="this.style.backgroundColor='#bbf7d0'; this.style.borderColor='#86efac'" onmouseout="this.style.backgroundColor='#dcfce7'; this.style.borderColor='#bbf7d0'">#{{ $tag }}</a>
                        @endforeach
                    @else
                        <span class="text-gray-400 text-xs">Belum ada tag populer</span>
                    @endif
                </div>
            </form>
        </div>

        <!-- News Grid dengan tampilan modern -->
        <div id="berita-terbaru" class="scroll-mt-16"></div>
        @if($beritas->count() > 0)
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8">
                @foreach($beritas as $berita)
                    <div class="berita-card bg-white rounded-2xl shadow-lg overflow-hidden flex flex-col border border-gray-100 relative berita-card-shadow group" style="cursor:pointer;">
                        <a href="{{ route('berita.show', $berita->slug) }}" class="absolute inset-0 z-10" aria-label="Baca detail {{ $berita->title }}" tabindex="0" style="display:block;"></a>
                        <!-- Ribbon untuk berita terbaru jika publish date < 7 hari -->
                        @if(\Carbon\Carbon::parse($berita->publish_date)->diffInDays(now()) < 7)
                            <div class="absolute top-0 right-0 z-10 text-white px-4 py-1 text-xs font-bold shadow-lg" style="background: linear-gradient(to right, #006837, #004d28);">
                                <i class="fas fa-bolt mr-1"></i> BARU
                            </div>
                        @endif
                        
                        <div class="relative overflow-hidden berita-image-wrapper bg-gray-100">
                            <img src="{{ asset('storage/' . $berita->image_path) }}" 
                                 alt="{{ $berita->title }}" 
                                 class="w-full h-56 object-contain berita-card-image">
                            <!-- Overlay gradient pada gambar -->
                            <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/30 to-transparent opacity-80"></div>
                            <div class="absolute top-4 left-4 text-white px-4 py-1.5 rounded-full text-sm font-semibold shadow-md backdrop-blur-sm capitalize" style="background-color: rgba(0, 104, 55, 0.9);">
                                @if(!empty($berita->tags))
                                    <i class="fas fa-tag mr-1"></i> {{ trim(explode(',', $berita->tags)[0]) }}
                                @else
                                    <i class="fas fa-bullhorn mr-1"></i> Pengumuman
                                @endif
                            </div>
                            <!-- Tanggal di atas gambar -->
                            <div class="absolute bottom-4 left-4 bg-white/20 backdrop-blur-sm px-3 py-1 rounded-full text-xs font-medium text-white flex items-center">
                                <i class="fas fa-calendar-alt mr-1"></i>
                                <span>{{ \Carbon\Carbon::parse($berita->publish_date)->isoFormat('D MMMM YYYY') }}</span>
                            </div>
                            <!-- Views counter -->
                            <div class="absolute bottom-4 right-4 bg-white/20 backdrop-blur-sm px-3 py-1 rounded-full text-xs font-medium text-white flex items-center">
                                <i class="fas fa-eye mr-1"></i>
                                <span>{{ $berita->count_views ?? 0 }} views</span>
                            </div>
                        </div>
                        <div class="p-6 flex flex-col flex-grow">
                            <h2 class="text-2xl font-bold text-gray-900 mb-3 leading-tight transition-colors duration-300 line-clamp-2" onmouseover="this.style.color='#006837'" onmouseout="this.style.color='#111827'">{{ $berita->title }}</h2>
                            
                            <!-- Tags -->
                            @if(!empty($berita->tags))
                                <div class="flex flex-wrap gap-2 mb-4">
                                    @foreach(explode(',', $berita->tags) as $tag)
                                        @if(!empty(trim($tag)))
                                            <span class="bg-blue-50 text-blue-700 px-2 py-1 rounded-md text-xs font-medium">#{{ trim($tag) }}</span>
                                        @endif
                                    @endforeach
                                </div>
                            @endif
                            
                            <p class="text-gray-700 flex-grow leading-relaxed line-clamp-3">{{ Str::limit(strip_tags($berita->description), 130) }}</p>
                            
                            <div class="mt-6 pt-4 border-t border-gray-100 flex justify-between items-center bg-gradient-to-b from-white/0 to-gray-50/50 -mx-6 px-6">
                                <div class="text-sm text-gray-500 flex items-center">
                                    <i class="fas fa-clock mr-1 text-blue-500"></i>
                                    <span>{{ ceil(str_word_count(strip_tags($berita->description)) / 200) }} min read</span>
                                </div>
                                <a href="{{ route('berita.show', $berita->slug) }}" class="font-semibold text-blue-600 hover:text-blue-800 inline-flex items-center group bg-blue-50 px-4 py-2 rounded-lg transition-all duration-300 hover:bg-blue-100 relative btn-hover-effect">
                                    <span class="relative z-10">Baca Selengkapnya</span>
                                    <i class="fas fa-arrow-right ml-2 transition-transform duration-300 group-hover:translate-x-1 relative z-10"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>

            <!-- Pagination dengan styling yang lebih menarik -->
            <div class="mt-16">
                <div class="bg-white p-4 rounded-xl shadow-md border border-gray-100">
                    {{ $beritas->links('vendor.pagination.tailwind') }}
                </div>
                <div class="text-center mt-4 text-sm text-gray-500">
                    Menampilkan {{ $beritas->firstItem() ?? 0 }} - {{ $beritas->lastItem() ?? 0 }} dari {{ $beritas->total() ?? 0 }} berita
                </div>
            </div>
        @else
            <div class="mt-8">
                <div class="bg-white rounded-2xl shadow-md p-10 text-center max-w-2xl mx-auto border border-gray-100 card-shadow">
                    <div class="w-24 h-24 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-6">
                        <i class="fas fa-newspaper text-blue-500 text-3xl"></i>
                    </div>
                    <h3 class="text-2xl font-bold text-gray-800 mb-3">Tidak ada berita yang ditemukan</h3>
                    <p class="text-gray-600 mb-6">Maaf, kami tidak dapat menemukan berita yang sesuai dengan kriteria pencarian Anda.</p>
                    <div class="space-y-4">
                        <a href="{{ route('berita.index') }}" class="inline-flex items-center justify-center px-6 py-3 text-white font-medium rounded-lg transition-all duration-300" style="background-color: #006837;" onmouseover="this.style.backgroundColor='#004d28'" onmouseout="this.style.backgroundColor='#006837'">
                            <i class="fas fa-home mr-2"></i> Kembali ke Halaman Utama
                        </a>
                        <div class="text-sm text-gray-500">atau coba kata kunci pencarian lainnya</div>
                        <div class="flex flex-wrap justify-center gap-2 mt-2">
                            <a href="{{ route('berita.index', ['search' => 'terbaru']) }}" class="px-4 py-2 bg-gray-100 rounded-full text-gray-700 text-sm">#terbaru</a>
                            <a href="{{ route('berita.index', ['search' => 'kampus']) }}" class="px-4 py-2 bg-gray-100 rounded-full text-gray-700 text-sm">#kampus</a>
                            <a href="{{ route('berita.index', ['search' => 'mahasiswa']) }}" class="px-4 py-2 bg-gray-100 rounded-full text-gray-700 text-sm">#mahasiswa</a>
                            <a href="{{ route('berita.index', ['search' => 'kegiatan']) }}" class="px-4 py-2 bg-gray-100 rounded-full text-gray-700 text-sm">#kegiatan</a>
                        </div>
                    </div>
                </div>
                
                <!-- Dekoratif elemen untuk halaman kosong -->
                <div class="relative mt-16 max-w-4xl mx-auto">
                    <div class="absolute -top-10 -left-10 w-20 h-20 rounded-full opacity-50" style="background-color: #dcfce7;"></div>
                    <div class="absolute -bottom-10 -right-10 w-20 h-20 rounded-full opacity-50" style="background-color: #f0fdf4;"></div>
                    <div class="bg-white rounded-2xl shadow-md p-6 text-center border border-gray-100 card-shadow">
                        <h3 class="text-xl font-bold text-gray-800 mb-4">Berita Akan Datang</h3>
                        <p class="text-gray-600 mb-4">Kami sedang menyiapkan berita-berita menarik untuk Anda. Kunjungi kembali halaman ini dalam beberapa hari.</p>
                        <div class="flex justify-center space-x-4">
                            <div class="w-16 h-16 bg-gray-200 rounded-lg"></div>
                            <div class="w-16 h-16 bg-blue-100 rounded-lg"></div>
                            <div class="w-16 h-16 bg-purple-100 rounded-lg"></div>
                            <div class="w-16 h-16 bg-gray-200 rounded-lg"></div>
                        </div>
                    </div>
                </div>
            </div>
        @endif

    </div>
@endsection