@extends('core::layouts.master')

@section('title', $news->title . ' - ASETQU V.2')
@section('meta_description', $meta_description)

@push('styles')
<link rel="stylesheet" href="{{ asset('assets/css/pages/news-events.css') }}">
@endpush

@section('content')
{{-- Hero Section --}}
<section class="event-detail-hero">
    <div class="hero-bg-overlay"></div>
    <div class="hero-particles"></div>
    <div class="container">
        <div class="hero-content">
            <a href="{{ route('page.news.newsletter') }}" class="btn-back" data-aos="fade-right">
                <i class="fas fa-chevron-left"></i> Kembali
            </a>
            <h1 class="hero-title" data-aos="fade-up" data-aos-delay="100">
                <span class="text-gradient-gold">Detail Berita</span>
            </h1>
        </div>
    </div>
</section>

{{-- News Detail Section --}}
<section class="news-detail-section section">
    <div class="container">
        <div class="news-detail-card" data-aos="fade-up">
            {{-- News Title --}}
            <h2 class="news-detail-title text-gradient-purple">{{ $news->title }}</h2>

            {{-- News Thumbnail --}}
            <div class="news-detail-thumbnail">
                @if($news->thumbnail)
                    <img src="{{ asset('storage/' . $news->thumbnail) }}" alt="{{ $news->title }}" onerror="handleImageError(this)">
                @else
                    <div class="news-placeholder-img">
                        <i class="fas fa-newspaper"></i>
                    </div>
                @endif
            </div>

            {{-- News Content --}}
            <div class="news-detail-content">
                {!! nl2br(e($news->content)) !!}
            </div>

            {{-- News Meta --}}
            <div class="news-detail-meta">
                <div class="meta-item">
                    <i class="far fa-calendar"></i>
                    <span>{{ $news->published_at ? $news->published_at->locale('id')->translatedFormat('d F Y') : '-' }}</span>
                </div>
            </div>
        </div>
    </div>
</section>

{{-- Related News Section --}}
@if($relatedNews->count() > 0)
<section class="related-news-section section">
    <div class="container">
        <h3 class="section-title-gradient text-center">Berita Terkait</h3>
        <div class="row g-4 mt-4">
            @foreach($relatedNews as $item)
            <div class="col-lg-3 col-md-6">
                <a href="{{ route('page.news.news-detail', $item->slug) }}" class="news-item-card">
                    <div class="news-item-image">
                        @if($item->thumbnail)
                            <img src="{{ asset('storage/' . $item->thumbnail) }}" alt="{{ $item->title }}">
                        @else
                            <div class="news-placeholder-img">
                                <i class="fas fa-newspaper"></i>
                            </div>
                        @endif
                    </div>
                    <div class="news-item-info">
                        <span class="news-item-date">{{ $item->published_at ? $item->published_at->format('d M Y') : '-' }}</span>
                        <h4 class="news-item-title">{{ Str::limit($item->title, 50) }}</h4>
                    </div>
                </a>
            </div>
            @endforeach
        </div>
    </div>
</section>
@endif
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    // Initialize AOS
    if (typeof AOS !== 'undefined') {
        AOS.init({
            duration: 800,
            easing: 'ease-out',
            once: true
        });
    }
});
</script>
@endpush