@extends('layouts.app')

@section('title', $news->title . ' - LPTA News')

@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;">{{ $news->category->name ?? 'News Article' }}</span>
        <h1 style="font-family: 'Oswald', sans-serif; font-size: clamp(1.8rem, 3.5vw, 2.5rem); font-weight: 700; margin-top: 10px; max-width: 800px; margin-left: auto; margin-right: auto; line-height: 1.3;">{{ $news->title }}</h1>
        
        <div style="display: flex; gap: 16px; align-items: center; justify-content: center; margin-top: 20px; font-size: 0.82rem; color: rgba(255,255,255,0.7);">
            <span><i class="fas fa-calendar-alt" style="color: var(--red); margin-right: 4px;"></i> {{ $news->created_at->format('M d, Y') }}</span>
            <span><i class="fas fa-eye" style="color: var(--red); margin-right: 4px;"></i> {{ $news->views }} Views</span>
            <span><i class="fas fa-user" style="color: var(--red); margin-right: 4px;"></i> LPTA Editor</span>
        </div>
    </div>
</section>

<!-- Content Details -->
<section class="section-pad" style="background: var(--white);">
    <div class="container">
        <div style="display: grid; grid-template-columns: 2.8fr 1fr; gap: 50px;">
            <!-- Left: Main Article Body -->
            <div>
                <!-- Featured Image -->
                <div style="width: 100%; aspect-ratio: 21/9; background: linear-gradient(135deg, var(--blue), var(--red)); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.8); font-size: 6rem; margin-bottom: 30px; box-shadow: var(--shadow-sm); overflow: hidden; position: relative;">
                    <span>📰</span>
                    <div style="position: absolute; bottom: 20px; left: 20px; background: rgba(0,0,0,0.5); padding: 8px 16px; border-radius: 6px; font-size: 0.82rem; font-weight: 600; border-left: 3px solid var(--gold-light);">LPTA News Desk</div>
                </div>

                <!-- Text Content -->
                <div style="font-size: 1.05rem; line-height: 1.8; color: var(--gray-700); letter-spacing: 0.1px;">
                    {!! nl2br(e($news->content)) !!}
                </div>

                <!-- Footer / Share details -->
                <div style="margin-top: 50px; padding-top: 24px; border-top: 1px solid var(--gray-200); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px;">
                    <a href="{{ route('news') }}" class="btn btn-outline" style="border-color: var(--blue); color: var(--blue); padding: 10px 20px; font-size: 0.85rem;"><i class="fas fa-arrow-left"></i> Back to News</a>
                    
                    <div style="display: flex; align-items: center; gap: 10px;">
                        <span style="font-size: 0.85rem; font-weight: 600; color: var(--gray-900);">Share:</span>
                        <a href="#" style="width: 32px; height: 32px; border-radius: 50%; background: #3b5998; color: white; display: flex; align-items: center; justify-content: center; text-decoration: none; font-size: 0.85rem;"><i class="fab fa-facebook-f"></i></a>
                        <a href="#" style="width: 32px; height: 32px; border-radius: 50%; background: #1da1f2; color: white; display: flex; align-items: center; justify-content: center; text-decoration: none; font-size: 0.85rem;"><i class="fab fa-twitter"></i></a>
                        <a href="#" style="width: 32px; height: 32px; border-radius: 50%; background: #25d366; color: white; display: flex; align-items: center; justify-content: center; text-decoration: none; font-size: 0.85rem;"><i class="fab fa-whatsapp"></i></a>
                    </div>
                </div>
            </div>

            <!-- Right: Related News Sidebar -->
            <div>
                <div style="background: var(--off-white); border-radius: var(--radius); border: 1px solid var(--gray-200); padding: 24px; position: sticky; top: 92px;">
                    <h3 style="font-family: 'Oswald', sans-serif; font-size: 1.25rem; font-weight: 600; color: var(--blue); margin-bottom: 20px; border-bottom: 2px solid var(--gray-200); padding-bottom: 8px;">Related News</h3>
                    
                    @if($relatedNews->count() > 0)
                        @foreach($relatedNews as $related)
                        <div style="margin-bottom: 18px;">
                            <div style="font-size: 0.72rem; color: var(--gray-500); margin-bottom: 4px;"><i class="fas fa-calendar-alt" style="color: var(--red); margin-right: 4px;"></i> {{ $related->created_at->format('M d, Y') }}</div>
                            <a href="{{ route('news.show', $related->slug) }}" style="font-family: 'Oswald', sans-serif; font-size: 0.95rem; font-weight: 500; color: var(--blue); text-decoration: none; display: block; line-height: 1.3; transition: var(--transition);" onmouseenter="this.style.color='var(--red)'" onmouseleave="this.style.color='var(--blue)'">
                                {{ $related->title }}
                            </a>
                        </div>
                        @endforeach
                    @else
                        <p style="font-size: 0.85rem; color: var(--gray-500);">No related articles found in this category.</p>
                    @endif
                </div>
            </div>
        </div>
    </div>
</section>

@endsection