@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: transform 0.3s ease;
        }
        .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>
    <!--==============================
    Breadcumb
============================== -->
    <div class="breadcumb-wrapper " data-bg-src="{{asset('frontend/coreui/assets/img/breadcumb/breadcumb-bg.jpg')}}">
        <div class="container z-index-common">
            <div class="breadcumb-content">
                <h1 class="breadcumb-title">News and Event Detail</h1>
                <p class="breadcumb-text">Linking life to learning</p>
                <div class="breadcumb-menu-wrap">
                    <ul class="breadcumb-menu">
                        <li><a href="{{route('front.home')}}">Home</a></li>
                        <li><a href="{{route('front.news-event')}}">News and  Event</a></li>
                        <li>{{$event->name}}</li>
                    </ul>
                </div>
            </div>
        </div>
    </div><!--==============================
    Blog Details Area
    ==============================-->
    <section class="vs-blog-wrapper blog-details space-top space-extra-bottom">
        <div class="container">
            <div class="row gx-40">
                <div class="col-lg-12">
                    <div class="vs-blog blog-single">
                        <div class="blog-img">
                            <img src="{{ asset("storage/News-and-Events/Cover/{$event->cover_image}") }}"
                                 alt="Blog Image">
                        </div>
                        <div class="blog-content">
                            <div class="blog-meta">
                                <a href="#"><i class="far fa-calendar-alt"></i>{{ date('M j Y', strtotime($event->event_date)) }}</a>
                            </div>
                            <h2 class="blog-title">{{$event->name}}</h2>
                            <p>{!! $event->description !!}</p>

                            <h3 class="mt-5 text-center">Frequently Asked Questions</h3>
                            <div class="faq-section">
                                @if($faqs && $faqs->count())
                                    @foreach($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-5">{{ $faq->answer }}</p>
                                            </div>
                                        </div>
                                    @endforeach
                                @else
                                    <p>No FAQs available.</p>
                                @endif
                            </div>
                        <div class="share-links clearfix  ">
                            <div class="row justify-content-between">
                                <div class="col-xl-auto">
                                    <span class="share-links-title">Tags:</span>
                                    <div class="tagcloud">
                                     @foreach($event->tags as $event)
                                        <a href="#">{{$event->name}}</a>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                </div>
            </div>
        </div>
    </section>
@endsection