@extends('frontend.layouts.app')
@section('page_title',$event['seo_title'])
@section('description',$event['seo_description'])
@section('keywords',$event['seo_keyword'])
@section('tags',$event['seo_tags'])
@push('schema')
    {!! \App\Helpers\SchemaHelper::render(
        \App\Helpers\SchemaHelper::newsArticle(
            $detail['title'],
            $detail['image'],
            date('c', strtotime($detail['date'])),
        ),
    ) !!}
@endpush

@section('content')

    <!-- Hero Section -->
    <div class="container-fluid p-0 hero-section-about-page">
        <div class="position-relative w-100" style="height: 380px;" data-aos="fade-down" data-aos-delay="200">
            <img src="{{ asset('assets/img/g_img-2.jpg') }}"  alt="Breadcrumb" class="w-100 h-100 object-fit-cover">
            <div class="position-absolute top-0 start-0 w-100 h-100 d-flex flex-column justify-content-center align-items-center text-center"
                 style="background: rgba(0, 47, 108, 0.85);">
                <p class="display-4 fw-bold text-white mb-3" style="font-family: 'Poppins', sans-serif; letter-spacing: 1px;" data-aos="fade-up" data-aos-delay="400">
                    News & Events Detail
                </p>
            </div>
        </div>
    </div>

    <!-- Main Content -->
    <div class="container-xl container-fluid py-5">
        <div class="row g-5">

            <!-- Event Detail -->
            <div class="col-lg-8">
                <div class="mb-4 border-bottom pb-3">
                    <span class="text-muted">
                        <i class="cil-calendar me-1"></i> {{ date('d M, Y', strtotime($detail['date'])) }}
                    </span>
                    <h2 class="fw-bold mt-2">{{ $detail['title'] }}</h2>
                </div>

                <img src="{{ $detail['image'] }}"
                     alt="{{ $detail['title'] }}"
                     class="img-fluid rounded mb-4 shadow-sm"
                     style="aspect-ratio: 1200 / 630; object-fit: cover; width: 100%;">

                <p class="fs-6 lh-lg text-secondary">{!! $detail['description'] !!}</p>

                <a href="{{ route('newsEvent') }}" class="btn btn-outline-primary mt-4">
                    ← Back to News & Events
                </a>
            </div>

            <!-- Sidebar -->
            <div class="col-lg-4">
                <h5 class="fw-bold mb-4">Recent News & Events</h5>

                @forelse($recentEvents as $recent)
                    <div class="d-flex mb-4 align-items-start border-bottom pb-3">
                        <!-- Thumbnail -->
                        <a href="{{ route('newsEventDetail', $recent['slug']) }}" class="me-3 flex-shrink-0">
                            <img src="{{ $recent['image'] ?? asset('assets/img/default.jpg') }}"
                                 alt="{{ $recent['title'] }}"
                                 class="rounded"
                                 style="width: 80px; height: 70px; object-fit: cover;">
                        </a>

                        <!-- Title + Date -->
                        <div>
                            <a href="{{ route('newsEventDetail', $recent['slug']) }}"
                               class="text-decoration-none text-dark">
                                <h6 class="fw-semibold mb-1">{{ \Illuminate\Support\Str::limit($recent['title'], 50) }}</h6>
                            </a>
                            <small class="text-muted">
                                <i class="cil-calendar"></i> {{ date('d M, Y', strtotime($recent['date'])) }}
                            </small>
                        </div>
                    </div>
                @empty
                    <p class="text-muted">No recent events available.</p>
                @endforelse
            </div>
        </div>
    </div>

@endsection