@extends('frontend.layouts.app')

@section('title', $event->seo_title)
@section('description', $event->seo_description)
@section('keywords', $event->seo_keyword)
@section('tags', $event->seo_tags)

@section('content')

    <style>
        .faq-section { margin-top: 30px; }
        .faq-item { border-bottom: 1px solid #ddd; padding: 10px 0; }

        input[type=checkbox] ~ label:before { display: none; }
        .faq-toggle { display: none; }

        .faq-question {
            display: block;
            font-weight: 600;
            cursor: pointer;
            position: relative;
            padding-right: 20px;
        }

        .faq-question::after {
            content: '+';
            position: absolute;
            right: 0;
            transition: 0.3s;
        }

        .faq-toggle:checked + .faq-question::after {
            content: '-';
        }

        .faq-answer {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease;
        }

        .faq-toggle:checked + .faq-question + .faq-answer {
            max-height: 500px;
            margin-top: 10px;
        }
    </style>

    <!-- Breadcrumb -->
    <div class="breadcumb-wrapper" data-bg-src="{{ asset('frontend/coreui/assets/img/breadcumb/breadcumb-bg.jpg') }}">
        <div class="container">
            <div class="breadcumb-content">
                <p class="breadcumb-title h1">News and Event Detail</p>
                <p class="breadcumb-text">Linking life to learning</p>
                <ul class="breadcumb-menu">
                    <li><a href="{{ route('front.home') }}">Home</a></li>
                    <li><a href="{{ route('front.news-event') }}">News & Events</a></li>
                    <li>{{ $event->name }}</li>
                </ul>
            </div>
        </div>
    </div>

    <!-- Blog Detail -->
    <section class="vs-blog-wrapper blog-details space-top space-extra-bottom">
        <div class="container">
            <div class="blog-meta mb-3">
                <i class="far fa-calendar-alt"></i>
                {{ \Carbon\Carbon::parse($event->event_date)->format('M d, Y') }}
            </div>

            <h1 class="blog-title mb-4">{{ $event->name }}</h1>

            <div class="vs-blog blog-single">
                <div class="row">

                    <!-- Event Image -->
                    <div class="col-lg-8">
                        <div class="blog-img mb-4">
                            <img src="{{ asset('storage/News-and-Events/Cover/'.$event->cover_image) }}"
                                 alt="{{ $event->name }}"
                                 class="img-fluid rounded w-100">
                        </div>

                        <!-- Description -->
                        <div class="blog-content mt-4">
                            {!! $event->description !!}
                        </div>
                    </div>

                    <!-- Related Events -->
                    <div class="col-lg-4">
                        <h4 class="mb-3">Related Events</h4>

                        @forelse($relatedEvents as $related)
                            <div class="d-flex mb-3 align-items-center">
                                <img src="{{ asset('storage/News-and-Events/Cover/'.$related->cover_image) }}"
                                     alt="{{ $related->name }}"
                                     width="90"
                                     class="img-fluid rounded me-3">

                                <div>
                                    <a href="{{ route('front.news-event-detail', $related->slug) }}">
                                        <h6 class="mb-1">{{ $related->name }}</h6>
                                    </a>
                                    <small class="text-muted">
                                        {{ \Carbon\Carbon::parse($related->event_date)->format('d M Y') }}
                                    </small>
                                </div>
                            </div>
                        @empty
                            <p>No related events found.</p>
                        @endforelse
                    </div>

                </div>



                <!-- FAQ -->
                <h3 class="mt-5 text-center">Frequently Asked Questions</h3>

                <div class="faq-section">
                    @forelse($faqs as $index => $faq)
                        <div class="faq-item">
                            <input type="checkbox" id="faq-{{ $index }}" class="faq-toggle">
                            <label for="faq-{{ $index }}" class="faq-question">
                                {{ $faq->question }}
                            </label>
                            <div class="faq-answer">
                                <p class="ms-4">{{ $faq->answer }}</p>
                            </div>
                        </div>
                    @empty
                        <p>No FAQs available.</p>
                    @endforelse
                </div>

                <!-- Tags -->
                <div class="share-links clearfix mt-4">
                    <span class="share-links-title">Tags:</span>
                    <div class="tagcloud">
                        @foreach($event->tags as $tag)
                            <a href="#">{{ $tag->name }}</a>
                        @endforeach
                    </div>
                </div>

            </div>
        </div>
    </section>

@endsection