@extends('front.layout.app')
@section('beforeHeadClose')
    <style>
        .news-listing-section {
            padding: 60px 0;
            background: #f8f9fa;
        }

        .page-title {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 40px 0;
            margin-bottom: 40px;
        }

        .page-title h1 {
            margin: 0;
            font-size: 2.5rem;
            font-weight: 700;
        }

        .news-card {
            background: white;
            border-radius: 8px;
            overflow: hidden;
            transition: all 0.3s ease;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        .news-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 16px rgba(0,0,0,0.15);
        }

        .news-card-img {
            position: relative;
            overflow: hidden;
            height: 250px;
            display: block;
        }

        .news-card-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
        }

        .news-card:hover .news-card-img img {
            transform: scale(1.05);
        }

        .news-date-badge {
            position: absolute;
            top: 15px;
            right: 15px;
            background:#333399;
            color: white;
            padding: 12px 15px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: 600;
            text-align: center;
            z-index: 10;
        }

        .news-date-badge .day {
            display: block;
            font-size: 18px;
            font-weight: 700;
        }

        .news-card-body {
            padding: 25px;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
        }

        .news-meta {
            font-size: 13px;
            color: #999;
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .news-meta .location {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            color: #666;
        }

        .news-card-body h3 {
            margin: 0 0 12px 0;
            font-size: 18px;
            font-weight: 600;
            line-height: 1.4;
            color: #333;
        }

        .news-card-body h3 a {
            color: #333;
            text-decoration: none;
            transition: color 0.3s ease;
        }

        .news-card-body h3 a:hover {
            color: #333399;
        }

        .news-card-body p {
            color: #666;
            font-size: 14px;
            line-height: 1.6;
            margin: 0 0 15px 0;
            flex-grow: 1;
        }

        .news-read-more {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            color: #333399;
            text-decoration: none;
            font-weight: 600;
            font-size: 13px;
            transition: all 0.3s ease;
            align-self: flex-start;
        }

        .news-read-more:hover {
            gap: 10px;
        }

        .news-sidebar {
            position: sticky;
            top: 20px;
        }

        .sidebar-widget {
            background: white;
            padding: 25px;
            margin-bottom: 25px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }

        .sidebar-widget h3 {
            margin: 0 0 20px 0;
            font-size: 16px;
            font-weight: 700;
            color: #333;
            padding-bottom: 12px;
            border-bottom: 2px solid #333399;
        }

        .sidebar-widget ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .sidebar-widget ul li {
            margin: 0 0 12px 0;
            border-bottom: 1px solid #eee;
            padding-bottom: 10px;
        }

        .sidebar-widget ul li:last-child {
            border-bottom: none;
            margin: 0;
            padding-bottom: 0;
        }

        .sidebar-widget a {
            color: #666;
            text-decoration: none;
            transition: color 0.3s ease;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .sidebar-widget a:hover {
            color: #333399;
        }

        .sidebar-widget a span {
            background: #f0f0f0;
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 11px;
            font-weight: 600;
        }

        .news-pagination-wrap {
            display: flex;
            justify-content: center;
        }

        .news-pagination {
            list-style: none;
            display: flex;
            gap: 5px;
            padding: 0;
            margin: 0;
        }

        .news-pagination li {
            margin: 0;
        }

        .news-pagination a,
        .news-pagination span {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            border: 1px solid #ddd;
            border-radius: 4px;
            text-decoration: none;
            color: #333;
            transition: all 0.3s ease;
            font-weight: 500;
        }

        .news-pagination a:hover {
            background: #333399;
            color: white;
            border-color: #333399;
        }

        .news-pagination a.active,
        .news-pagination a.active:hover {
            background: #333399;
            color: white;
            border-color: #333399;
        }

        .news-pagination .disabled span {
            color: #ccc;
            cursor: not-allowed;
        }

        .no-records {
            text-align: center;
            padding: 40px;
            color: #999;
            font-size: 16px;
        }

        @media (max-width: 768px) {
            .page-title h1 {
                font-size: 1.8rem;
            }

            .news-sidebar {
                position: static;
                top: auto;
            }

            .news-card-img {
                height: 200px;
            }
        }
    </style>
@endsection

@section('content')
    @php echo cms_edit_page("module/news");@endphp

 <div class="pagetitle">
            <div class="container">
                <h1>News & Alerts</h1>
            </div>
        </div>
    <main id="main">
        <section class="news-listing-section">
            <div class="container">
                <div class="row g-4 g-xl-5">
                    <div class="col-lg-8">
                        @if (count($newsCollection) > 0)
                            <div class="row g-4">
                                @foreach ($newsCollection as $news)
                                    @php
                                        $newsImage = !empty($news->image) && file_exists(storage_uploads('news/' . $news->image))
                                            ? asset_uploads('news/' . $news->image)
                                            : asset_uploads('back/images/no_image.jpg');
                                        $isFeatured = $news->is_featured ? 'Featured' : '';
                                        $hasLink = !empty($news->registration_link) || !empty($news->news_link);
                                    @endphp
                                    <div class="col-md-6 col-xl-6 news-card-item" data-aos="fade-up" data-aos-duration="1200">
                                        <article class="news-card">
                                            <a href="{{ url('/news/' . Str::slug($news->title)) }}" class="news-card-img">
                                                <img src="{{ $newsImage }}" 
                                                     title="{{ $news->image_title }}" 
                                                     alt="{{ $news->image_alt }}">
                                                <div class="news-date-badge">
                                                    <span class="day">{{ date('d', strtotime($news->news_date_time)) }}</span>
                                                    <span>{{ date('M', strtotime($news->news_date_time)) }}</span>
                                                    <span>{{ date('Y', strtotime($news->news_date_time)) }}</span>
                                                </div>
                                            </a>
                                            <div class="news-card-body">
                                                <div class="news-meta">
                                                    <i class="fa-solid fa-calendar-days"></i>
                                                    {{ date('M d, Y', strtotime($news->news_date_time)) }}
                                                    @if (!empty($news->location))
                                                        <span>|</span>
                                                        <span class="location">
                                                            <i class="fa-solid fa-map-marker-alt"></i>
                                                            {{ $news->location }}
                                                        </span>
                                                    @endif
                                                    @if ($isFeatured)
                                                        <span>|</span>
                                                        <span class="badge bg-warning" style="color: #333; font-size: 11px;">⭐ Featured</span>
                                                    @endif
                                                </div>
                                                <h3>
                                                    <a href="{{ url('/news/' . Str::slug($news->title)) }}">
                                                        {{ $news->title }}
                                                    </a>
                                                </h3>
                                                <p>{!! substr(strip_tags($news->description), 0, 150) !!}...</p>
                                                <a href="{{ url('/news/' . Str::slug($news->title)) }}" class="news-read-more">
                                                    Read More <i class="fa-solid fa-arrow-right"></i>
                                                </a>
                                            </div>
                                        </article>
                                    </div>
                                @endforeach
                            </div>

                            @if($newsCollection->hasPages())
                                <nav class="news-pagination-wrap mt-5" aria-label="News page navigation" data-aos="fade-up" data-aos-duration="1200">
                                    <ul class="news-pagination">
                                        {{-- Previous Page Link --}}
                                        @if ($newsCollection->onFirstPage())
                                            <li class="disabled"><span><i class="fa-solid fa-angle-left"></i></span></li>
                                        @else
                                            <li><a href="{{ $newsCollection->previousPageUrl() }}" aria-label="Previous page"><i class="fa-solid fa-angle-left"></i></a></li>
                                        @endif

                                        {{-- Pagination Elements --}}
                                        @foreach ($newsCollection->getUrlRange(1, $newsCollection->lastPage()) as $page => $url)
                                            @if ($page == $newsCollection->currentPage())
                                                <li><a href="#" class="active">{{ $page }}</a></li>
                                            @else
                                                <li><a href="{{ $url }}">{{ $page }}</a></li>
                                            @endif
                                        @endforeach

                                        {{-- Next Page Link --}}
                                        @if ($newsCollection->hasMorePages())
                                            <li><a href="{{ $newsCollection->nextPageUrl() }}" aria-label="Next page"><i class="fa-solid fa-angle-right"></i></a></li>
                                        @else
                                            <li class="disabled"><span><i class="fa-solid fa-angle-right"></i></span></li>
                                        @endif
                                    </ul>
                                </nav>
                            @endif
                        @else
                            <div class="no-records">
                                <i class="fa-solid fa-inbox" style="font-size: 48px; margin-bottom: 15px; color: #ccc;"></i>
                                <p>No news available at this time.</p>
                            </div>
                        @endif
                    </div>

                    <div class="col-lg-4">
                        <aside class="news-sidebar" data-aos="fade-left" data-aos-duration="1200">
                            <div class="sidebar-widget">
                                <h3>News Archives</h3>
                                <ul class="news-archives">
                                    @php
                                        $currentYear = date('Y');
                                        $newsYear = 0;
                                        $firstYear = 0;
                                        $firstMonthActive = false;
                                        $yearGroups = [];
                                    @endphp
                                    @foreach ($newsArchive as $data)
                                        @php
                                            if (!isset($yearGroups[$data->newsyear])) {
                                                $yearGroups[$data->newsyear] = [];
                                            }
                                            $yearGroups[$data->newsyear][] = $data;
                                        @endphp
                                    @endforeach

                                    @foreach ($yearGroups as $year => $months)
                                        @php $isFirstYear = ($year == max(array_keys($yearGroups))); @endphp
                                        <li>
                                            <a href="#" class="year-toggle" data-year="{{ $year }}" style="display: flex; justify-content: space-between; align-items: center;">
                                                <strong>{{ $year }}</strong>
                                                <i class="fa-solid fa-chevron-down" style="font-size: 12px;"></i>
                                            </a>
                                            <ul class="year-months" data-year="{{ $year }}" style="display: {{ $isFirstYear ? 'block' : 'none' }}; list-style: none; padding-left: 12px; margin-top: 8px;">
                                                @foreach ($months as $month)
                                                    <li style="border: none; padding: 6px 0; margin: 0;">
                                                        <a href="{{ base_url() . 'news/' . $month->newsyear . '/' . $month->newsmonthno }}">
                                                            {{ $month->newsmonth }}
                                                            <span style="background: #f0f0f0; padding: 2px 8px; border-radius: 12px; font-size: 11px;">({{ $month->newscount }})</span>
                                                        </a>
                                                    </li>
                                                @endforeach
                                            </ul>
                                        </li>
                                    @endforeach
                                </ul>
                            </div>

                            <div class="sidebar-widget">
                                <h3>Featured News</h3>
                                <ul class="featured-news-list">
                                    @php
                                        $featuredNews = \App\Models\Back\News::where('is_featured', 1)
                                            ->active()
                                            ->sorted()
                                            ->limit(5)
                                            ->get();
                                    @endphp
                                    @forelse ($featuredNews as $featured)
                                        <li style="margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid #eee;">
                                            @if (!empty($featured->image) && file_exists(storage_uploads('news/' . $featured->image)))
                                                <img src="{{ asset_uploads('news/' . $featured->image) }}" 
                                                     alt="{{ $featured->image_alt }}"
                                                     style="width: 100%; height: 80px; object-fit: cover; border-radius: 4px; margin-bottom: 10px;">
                                            @endif
                                            <div>
                                                <a href="{{ url('/news/' . Str::slug($featured->title)) }}"
                                                   style="font-weight: 600; color: #333; text-decoration: none; display: block; margin-bottom: 5px; font-size: 13px; line-height: 1.4;">
                                                    {{ $featured->title }}
                                                </a>
                                                <span style="font-size: 12px; color: #999;">
                                                    {{ date('M d, Y', strtotime($featured->news_date_time)) }}
                                                </span>
                                            </div>
                                        </li>
                                    @empty
                                        <li style="color: #999; text-align: center; padding: 20px 0;">No featured news</li>
                                    @endforelse
                                </ul>
                            </div>
                        </aside>
                    </div>
                </div>
            </div>
        </section>
    </main>

@endsection

@section('beforeBodyClose')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const yearToggles = document.querySelectorAll('.year-toggle');
            yearToggles.forEach(toggle => {
                toggle.addEventListener('click', function(e) {
                    e.preventDefault();
                    const year = this.dataset.year;
                    const monthsList = document.querySelector(`.year-months[data-year="${year}"]`);
                    const icon = this.querySelector('i');
                    
                    if (monthsList.style.display === 'none') {
                        monthsList.style.display = 'block';
                        icon.classList.remove('fa-chevron-down');
                        icon.classList.add('fa-chevron-up');
                    } else {
                        monthsList.style.display = 'none';
                        icon.classList.remove('fa-chevron-up');
                        icon.classList.add('fa-chevron-down');
                    }
                });
            });
        });
    </script>
@endsection