@extends('layouts.app')

@section('title', 'News & Announcements - Lumbini Province Taekwondo Association')

@section('content')

<!-- Page Hero -->
<section style="background: linear-gradient(135deg, var(--blue) 0%, #0d1f45 100%); padding: 120px 0 60px; text-align: center; color: var(--white); position: relative; overflow: hidden;">
    <div style="position: absolute; inset: 0; opacity: 0.05; background-image: repeating-linear-gradient(45deg, #fff 0, #fff 1px, transparent 0, transparent 50%); background-size: 20px 20px;"></div>
    <div class="container" style="position: relative; z-index: 2;">
        <span class="section-label" style="color: var(--gold-light); font-size: 0.8rem; font-weight: 700; letter-spacing: 2px;">UPDATES</span>
        <h1 style="font-family: 'Oswald', sans-serif; font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; margin-top: 10px;">News & <span style="color: var(--gold-light);">Announcements</span></h1>
        <div class="divider" style="margin: 15px auto 0;"></div>
    </div>
</section>

<!-- Search and Filter Bar -->
<section style="background: var(--off-white); padding: 30px 0; border-bottom: 1px solid var(--gray-200);">
    <div class="container">
        <form action="{{ route('news') }}" method="GET" style="display: flex; gap: 16px; flex-wrap: wrap; align-items: center; justify-content: space-between;">
            <div style="position: relative; flex: 1; min-width: 280px;">
                <input type="text" name="search" value="{{ request('search') }}" placeholder="Search articles..." style="width: 100%; padding: 12px 18px 12px 48px; border-radius: 8px; border: 1px solid var(--gray-200); font-family: inherit; font-size: 0.9rem; outline: none; transition: var(--transition);" onfocus="this.style.borderColor='var(--blue)'; this.style.boxShadow='0 0 0 3px rgba(26,46,90,0.1)'">
                <i class="fas fa-search" style="position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--gray-500); font-size: 0.95rem;"></i>
            </div>
            
            <div style="display: flex; gap: 12px; align-items: center;">
                @if(request('category') || request('search'))
                    <a href="{{ route('news') }}" class="btn" style="background: var(--gray-200); color: var(--gray-700); padding: 10px 20px; font-size: 0.85rem;"><i class="fas fa-times"></i> Clear Filters</a>
                @endif
                <button type="submit" class="btn btn-blue" style="padding: 11px 24px; font-size: 0.85rem;">Search</button>
            </div>
        </form>
    </div>
</section>

<!-- News Content Grid -->
<section class="section-pad" style="background: var(--white);">
    <div class="container">
        <div style="display: grid; grid-template-columns: 2.8fr 1fr; gap: 40px;">
            <!-- Left: News List -->
            <div>
                @if($newsList->count() > 0)
                <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px;">
                    @foreach($newsList as $news)
                    <div class="news-card">
                        <div class="news-card-img" style="aspect-ratio: 16/9; font-size: 4rem; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--blue), var(--red)); color: rgba(255,255,255,0.8);">
                            <span>📰</span>
                            <div class="category-pill" style="position: absolute; top: 12px; left: 12px; background: var(--red); color: var(--white); font-size: 0.68rem; font-weight: 700; padding: 4px 10px; border-radius: 50px; text-transform: uppercase;">
                                {{ $news->category->name ?? 'Update' }}
                            </div>
                        </div>
                        <div class="news-card-body" style="padding: 20px;">
                            <div class="news-card-meta" style="font-size: 0.75rem; color: var(--gray-500); display: flex; gap: 12px; margin-bottom: 8px;">
                                <span><i class="fas fa-calendar-alt"></i> {{ $news->created_at->format('M d, Y') }}</span>
                                <span><i class="fas fa-eye"></i> {{ $news->views }}</span>
                            </div>
                            <a href="{{ route('news.show', $news->slug) }}" class="news-card-title" style="font-family: 'Oswald', sans-serif; font-size: 1.15rem; font-weight: 600; color: var(--blue); text-decoration: none; margin-bottom: 10px; transition: var(--transition);">
                                {{ $news->title }}
                            </a>
                            <p style="font-size: 0.85rem; color: var(--gray-500); line-height: 1.6; margin-bottom: 16px;">
                                {{ Str::limit($news->content, 110) }}
                            </p>
                            <div style="display: flex; align-items: center; justify-content: space-between; padding-top: 12px; border-top: 1px solid var(--gray-100);">
                                <a href="{{ route('news.show', $news->slug) }}" class="read-more" style="font-size: 0.82rem; font-weight: 600; color: var(--red); text-decoration: none; display: flex; align-items: center; gap: 6px;">
                                    Read Full Article <i class="fas fa-arrow-right"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>

                <!-- Custom Pagination -->
                <div style="margin-top: 40px;">
                    {{ $newsList->links() }}
                </div>
                @else
                <div style="text-align: center; padding: 80px 40px; border: 1px dashed var(--gray-200); border-radius: var(--radius); color: var(--gray-500);">
                    <i class="fas fa-newspaper" style="font-size: 3.5rem; opacity: 0.3; margin-bottom: 16px;"></i>
                    <p style="font-size: 1rem;">No news articles match your criteria.</p>
                    <a href="{{ route('news') }}" class="btn btn-blue" style="margin-top: 16px; font-size: 0.85rem;">View All News</a>
                </div>
                @endif
            </div>

            <!-- Right: Sidebar -->
            <div>
                <!-- Categories Card -->
                <div style="background: var(--off-white); border-radius: var(--radius); border: 1px solid var(--gray-200); padding: 24px; margin-bottom: 30px;">
                    <h3 style="font-family: 'Oswald', sans-serif; font-size: 1.25rem; font-weight: 600; color: var(--blue); margin-bottom: 16px; border-bottom: 2px solid var(--gray-200); padding-bottom: 8px;">Categories</h3>
                    <ul style="list-style: none;">
                        <li style="margin-bottom: 10px;">
                            <a href="{{ route('news') }}" style="display: flex; align-items: center; justify-content: justify; justify-content: space-between; font-size: 0.88rem; color: {{ !request('category') ? 'var(--red)' : 'var(--gray-700)' }}; text-decoration: none; font-weight: {{ !request('category') ? '700' : '500' }}; transition: var(--transition);" onmouseenter="this.style.color='var(--red)'" onmouseleave="this.style.color='{{ !request('category') ? 'var(--red)' : 'var(--gray-700)' }}'">
                                <span><i class="fas fa-folder-open" style="margin-right: 8px;"></i> All Categories</span>
                            </a>
                        </li>
                        @foreach($categories as $cat)
                        <li style="margin-bottom: 10px; border-top: 1px solid rgba(0,0,0,0.05); padding-top: 8px;">
                            <a href="{{ route('news', ['category' => $cat->slug]) }}" style="display: flex; align-items: center; justify-content: space-between; font-size: 0.88rem; color: {{ request('category') === $cat->slug ? 'var(--red)' : 'var(--gray-700)' }}; text-decoration: none; font-weight: {{ request('category') === $cat->slug ? '700' : '500' }}; transition: var(--transition);" onmouseenter="this.style.color='var(--red)'" onmouseleave="this.style.color='{{ request('category') === $cat->slug ? 'var(--red)' : 'var(--gray-700)' }}'">
                                <span><i class="fas fa-angle-right" style="margin-right: 8px;"></i> {{ $cat->name }}</span>
                                <span class="badge" style="background: var(--gray-200); color: var(--gray-700); font-size: 0.65rem; padding: 2px 8px;">{{ $cat->news_count }}</span>
                            </a>
                        </li>
                        @endforeach
                    </ul>
                </div>

                <!-- Announcement Poster / Portal CTA -->
                <div style="background: linear-gradient(135deg, var(--red-dark), var(--red)); border-radius: var(--radius); padding: 30px; color: var(--white); text-align: center; box-shadow: var(--shadow-md);">
                    <div style="font-size: 3rem; margin-bottom: 12px;">🥋</div>
                    <h3 style="font-family: 'Oswald', sans-serif; font-size: 1.35rem; font-weight: 600; margin-bottom: 10px;">LPTA Member Portal</h3>
                    <p style="font-size: 0.85rem; line-height: 1.6; opacity: 0.85; margin-bottom: 20px;">Apply for official association registration online, upload certificates, and generate your LPTA digital membership ID card.</p>
                    <a href="{{ route('register') }}" class="btn btn-white" style="width: 100%; justify-content: center; font-size: 0.85rem;">Register Online</a>
                </div>
            </div>
        </div>
    </div>
</section>

@endsection
