@extends('front.layout.app')
@section('beforeHeadClose')
    <style>
        .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-detail-section {
            padding: 60px 0;
            background: #f8f9fa;
        }

        .news-detail-content {
            background: white;
            padding: 40px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }

        .news-detail-meta {
            display: flex;
            align-items: center;
            gap: 15px;
            font-size: 13px;
            color: #999;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid #eee;
        }

        .news-detail-meta i {
            color: #333399;
        }

        .news-detail-meta span {
            display: inline-flex;
            align-items: center;
            gap: 5px;
        }

        .news-detail-content h2 {
            margin: 0 0 20px 0;
            font-size: 32px;
            font-weight: 700;
            color: #333;
            line-height: 1.3;
        }

        .news-detail-content > img {
            width: 100%;
            height: auto;
            max-height: 500px;
            object-fit: cover;
            border-radius: 8px;
            margin: 30px 0;
        }

        .news-detail-content > p,
        .news-detail-content > div {
            font-size: 15px;
            line-height: 1.8;
            color: #555;
            margin-bottom: 20px;
        }

        .news-detail-content > ul,
        .news-detail-content > ol {
            font-size: 15px;
            line-height: 1.8;
            color: #555;
            margin-bottom: 20px;
            padding-left: 20px;
        }

        .news-detail-content li {
            margin-bottom: 10px;
        }

        .news-detail-content strong {
            color: #333;
            font-weight: 700;
        }

        .news-actions {
            display: flex;
            gap: 15px;
            margin: 30px 0;
            padding: 20px 0;
            border-top: 1px solid #eee;
            border-bottom: 1px solid #eee;
        }

        .news-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 12px 24px;
            border-radius: 4px;
            text-decoration: none;
            font-weight: 600;
            font-size: 14px;
            transition: all 0.3s ease;
        }

        .news-btn-primary {
            background: #333399;
            color: white;
            text-transform: uppercase;
            font-size: 13px;
            letter-spacing: 0.5px;
        }

        .news-btn-primary:hover {
            background: #1f1f5f;
            transform: none;
            color: white;
        }

        .news-btn-secondary {
            background: #f0f0f0;
            color: #333;
            border: 1px solid #ddd;
        }

        .news-btn-secondary:hover {
            background: #e8e8e8;
        }
        
        .main-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 12px 24px;
            border-radius: 4px;
            text-decoration: none;
            font-weight: 600;
            font-size: 13px;
            transition: all 0.3s ease;
            background: #333399;
            color: white;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .main-btn:hover {
            background: #1f1f5f;
            color: white;
        }

        .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 15px 0;
            padding-bottom: 0;
        }

        .sidebar-widget ul li:last-child {
            margin: 0;
        }

        .news-item {
            display: flex;
            gap: 15px;
        }

        .news-item-img {
            width: 80px;
            height: 80px;
            flex-shrink: 0;
            overflow: hidden;
            border-radius: 4px;
        }

        .news-item-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .news-item-content h4 {
            margin: 0 0 5px 0;
            font-size: 13px;
            font-weight: 600;
            line-height: 1.3;
        }

        .news-item-content h4 a {
            color: #333;
            text-decoration: none;
            transition: color 0.3s ease;
        }

        .news-item-content h4 a:hover {
            color: #333399;
        }

        .news-item-content p {
            margin: 0;
            font-size: 12px;
            color: #999;
        }

        .news-info-box {
            background: #f0f7ff;
            border-left: 4px solid #667eea;
            padding: 20px;
            border-radius: 4px;
            margin: 30px 0;
        }

        .news-info-box h4 {
            margin: 0 0 10px 0;
            color: #667eea;
            font-weight: 700;
        }

        .news-info-box p {
            margin: 0;
            color: #555;
            font-size: 14px;
        }

        .breadcrumb {
            background: transparent;
            padding: 0;
            margin: 0 0 30px 0;
        }

        .breadcrumb li {
            display: inline;
            font-size: 13px;
        }

        .breadcrumb li a {
            color: #667eea;
            text-decoration: none;
        }

        .breadcrumb li a:hover {
            text-decoration: underline;
        }

        .breadcrumb-separator {
            margin: 0 8px;
            color: #ccc;
        }

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

            .news-detail-content {
                padding: 25px;
            }

            .news-detail-content h2 {
                font-size: 24px;
            }

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

            .news-actions {
                flex-direction: column;
            }

            .news-btn {
                justify-content: center;
            }
        }
    </style>
@endsection

@section('content')
    @php echo cms_edit_page("module/news",$news->id);@endphp
 <div class="pagetitle">
            <div class="container">
                <h1>News Details</h1>
            </div>
        </div>
    <main id="main">
        <section class="news-detail-section">
            <div class="container">
                <div class="row g-4 g-xl-5">
                    <div class="col-lg-8">
                        <!-- Breadcrumb -->
                        {{-- <ul class="breadcrumb" data-aos="fade-up" data-aos-duration="1200">
                            <li><a href="{{ url('/') }}">Home</a></li>
                            <span class="breadcrumb-separator">/</span>
                            <li><a href="{{ url('/news') }}">News</a></li>
                            <span class="breadcrumb-separator">/</span>
                            <li>{{ Str::limit($news->title, 50) }}</li>
                        </ul> --}}

                        <article class="news-detail-content" data-aos="fade-up" data-aos-duration="1200">
                            <div class="news-detail-meta">
                                <span>
                                    <i class="fa-solid fa-calendar-days"></i>
                                    {{ date('M d, Y \a\t H:i A', strtotime($news->news_date_time)) }}
                                </span>
                                @if (!empty($news->location))
                                    <span>
                                        <i class="fa-solid fa-map-marker-alt"></i>
                                        {{ $news->location }}
                                    </span>
                                @endif
                                @if ($news->is_featured)
                                    <span>
                                        <i class="fa-solid fa-star"></i>
                                        Featured
                                    </span>
                                @endif
                            </div>

                            <h2>{{ $news->title }}</h2>

                            @if (!empty($news->image) && file_exists(storage_uploads('news/' . $news->image)))
                                <img src="{{ asset_uploads('news/' . $news->image) }}" 
                                     title="{{ $news->image_title }}" 
                                     alt="{{ $news->image_alt }}"
                                     data-aos="fade-up" data-aos-duration="1200">
                            @else
                                <img src="{{ asset_uploads('back/images/no_image.jpg') }}" 
                                     title="{{ $news->image_title }}" 
                                     alt="{{ $news->image_alt }}"
                                     data-aos="fade-up" data-aos-duration="1200">
                            @endif

                            <div class="news-description">
                                {!! $news->description !!}
                            </div>

                            {{-- @if (!empty($news->registration_link) || !empty($news->news_link))
                                <div class="news-actions">
                            @if (!empty($news->registration_link) && $news->has_registration_link)
                                <a href="{{ $news->registration_link }}" 
                                   target="{{ $news->is_third_party_link ? '_blank' : '_self' }}" 
                                   class="main-btn"
                                   rel="noopener noreferrer">
                                    REGISTER NOW <i class="fa-solid fa-arrow-right"></i>
                                </a>
                            @endif
                            @if (!empty($news->news_link))
                                <a href="{{ $news->news_link }}" 
                                   target="{{ $news->is_third_party_link ? '_blank' : '_self' }}" 
                                   class="main-btn"
                                   rel="noopener noreferrer">
                                    LEARN MORE <i class="fa-solid fa-arrow-right"></i>
                                </a>
                            @endif
                                </div>
                            @endif --}}

                            @if ($news->is_hide_event_after_date && strtotime($news->news_date_time) < now()->timestamp)
                                <div class="news-info-box">
                                    <h4><i class="fa-solid fa-info-circle"></i> Event Details</h4>
                                    <p>This event has passed. Please check the news archive for more information.</p>
                                </div>
                            @endif
                        </article>

                        <!-- Navigation -->
                        <div style="display: flex; gap: 15px; margin-top: 30px; padding-top: 20px; border-top: 1px solid #eee;" data-aos="fade-up" data-aos-duration="1200">
                            @php
                                $prevNews = \App\Models\Back\News::where('id', '<', $news->id)
                                    ->active()
                                    ->orderBy('id', 'desc')
                                    ->first();
                                $nextNews = \App\Models\Back\News::where('id', '>', $news->id)
                                    ->active()
                                    ->orderBy('id', 'asc')
                                    ->first();
                            @endphp

                            @if ($prevNews)
                                <a href="{{ url('/news/' . Str::slug($prevNews->title)) }}" class="news-btn news-btn-secondary" style="margin-right: auto;">
                                    <i class="fa-solid fa-arrow-left"></i>
                                    Previous News
                                </a>
                            @endif

                            @if ($nextNews)
                                <a href="{{ url('/news/' . Str::slug($nextNews->title)) }}" class="news-btn news-btn-secondary">
                                    Next News
                                    <i class="fa-solid fa-arrow-right"></i>
                                </a>
                            @endif
                        </div>
                    </div>

                    <!-- Sidebar -->
                    <div class="col-lg-4">
                        <aside class="news-sidebar" data-aos="fade-left" data-aos-duration="1200">
                            <div class="sidebar-widget">
                                <h3>Latest News</h3>
                                <ul>
                                    @php
                                        $latestNews = \App\Models\Back\News::where('id', '!=', $news->id)
                                            ->active()
                                            ->sorted()
                                            ->limit(5)
                                            ->get();
                                    @endphp
                                    @forelse ($latestNews as $latestItem)
                                        <li>
                                            <div class="news-item">
                                                @if (!empty($latestItem->image) && file_exists(storage_uploads('news/' . $latestItem->image)))
                                                    <div class="news-item-img">
                                                        <img src="{{ asset_uploads('news/' . $latestItem->image) }}" 
                                                             alt="{{ $latestItem->image_alt }}">
                                                    </div>
                                                @endif
                                                <div class="news-item-content">
                                                    <h4>
                                                        <a href="{{ url('/news/' . Str::slug($latestItem->title)) }}">
                                                            {{ Str::limit($latestItem->title, 40) }}
                                                        </a>
                                                    </h4>
                                                    <p>{{ date('M d, Y', strtotime($latestItem->news_date_time)) }}</p>
                                                </div>
                                            </div>
                                        </li>
                                    @empty
                                        <li style="text-align: center; color: #999; padding: 20px 0;">No other news available</li>
                                    @endforelse
                                </ul>
                            </div>

                            <div class="sidebar-widget">
                                <h3>News Archives</h3>
                                <ul>
                                    @php
                                        $yearGroups = [];
                                        foreach ($newsArchive as $data) {
                                            if (!isset($yearGroups[$data->newsyear])) {
                                                $yearGroups[$data->newsyear] = [];
                                            }
                                            $yearGroups[$data->newsyear][] = $data;
                                        }
                                    @endphp
                                    @foreach ($yearGroups as $year => $months)
                                        <li style="margin: 0; padding: 0; border: none;">
                                            <a href="#" class="year-toggle" data-year="{{ $year }}" style="display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid #eee; text-decoration: none; color: #333;">
                                                <strong>{{ $year }}</strong>
                                                <i class="fa-solid fa-chevron-down" style="font-size: 12px; color: #999;"></i>
                                            </a>
                                            <ul class="year-months" data-year="{{ $year }}" style="display: none; list-style: none; padding: 0; margin: 8px 0 0 0;">
                                                @foreach ($months as $month)
                                                    <li style="border: none; padding: 6px 0; margin: 0;">
                                                        <a href="{{ base_url() . 'news/' . $month->newsyear . '/' . $month->newsmonthno }}" style="color: #666; text-decoration: none; font-size: 13px; display: flex; justify-content: space-between;">
                                                            {{ $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>Share This News</h3>
                                <div style="display: flex; gap: 12px; justify-content: center;">
                                    <a href="https://www.facebook.com/sharer/sharer.php?u={{ urlencode(url()->current()) }}" 
                                       target="_blank" 
                                       rel="noopener noreferrer"
                                       class="news-btn news-btn-secondary" 
                                       style="padding: 10px 15px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;">
                                        <i class="fab fa-facebook-f"></i>
                                    </a>
                                    <a href="https://twitter.com/intent/tweet?url={{ urlencode(url()->current()) }}&text={{ urlencode($news->title) }}" 
                                       target="_blank" 
                                       rel="noopener noreferrer"
                                       class="news-btn news-btn-secondary"
                                       style="padding: 10px 15px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;">
                                        <i class="fab fa-twitter"></i>
                                    </a>
                                    <a href="https://www.linkedin.com/sharing/share-offsite/?url={{ urlencode(url()->current()) }}" 
                                       target="_blank" 
                                       rel="noopener noreferrer"
                                       class="news-btn news-btn-secondary"
                                       style="padding: 10px 15px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;">
                                        <i class="fab fa-linkedin-in"></i>
                                    </a>
                                    <a href="mailto:?subject={{ urlencode($news->title) }}&body={{ urlencode(url()->current()) }}"
                                       class="news-btn news-btn-secondary"
                                       style="padding: 10px 15px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;">
                                        <i class="fa-solid fa-envelope"></i>
                                    </a>
                                </div>
                            </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