@extends('layouts.app3')

@section('title', $event->title)

@section('content')
<div class="breadcumb-wrapper" data-bg-src="{{ url('/') }}/assets/img/bg/breadcumb-bg.jpg" data-overlay="title" data-opacity="8">
    <div class="container">
        <div class="breadcumb-content text-center">
            <h1 class="breadcumb-title">{{ $event->title }}</h1>
            <ul class="breadcumb-menu">
                <li><a href="{{ route('homered') }}">Home</a></li>
                <li>{{ $event->title }}</li>
            </ul>
        </div>
    </div>
</div>

<section class="space-top space-extra-bottom">
    <div class="container">
        <div class="row">
            <div class="col-xxl-9 col-lg-8">
                <div class="event-details-wrap">
                    <div class="event-img">
                        <img src="{{ $event->image ? url('/events/' . $event->image) : url('/assets/img/event/default-event.jpg') }}" alt="{{ $event->title }}">
                    </div>
                    <h3 class="h3 mt-n2">{{ $event->title }}</h3>
                    <p class="mb-30">{{ $event->excerpt }}</p>
                    <div class="mb-40">{!! $event->content !!}</div>
                    <div class="checklist">
                        <ul>
                            {{-- Example: If you have a $event->learnings array --}}
                            @if(!empty($event->learnings))
                                @foreach($event->learnings as $learning)
                                    <li>{{ $learning }}</li>
                                @endforeach
                            @endif
                        </ul>
                    </div>
                    {{-- Countdown and other dynamic info can be added here --}}
                </div>
            </div>
            <div class="col-xxl-3 col-lg-4">
                <aside class="sidebar-area">
                    <div class="widget widget_info">
                       <!-- <a href="https://calendar.google.com/calendar/" class="th-btn">Add To Calendar</a>
                        <a href="#" class="th-btn style4">Ical Export</a> -->
                        <h3 class="widget_title">Event Information</h3>
                        <div class="info-list">
                            <ul>
                                <li>
                                    <i class="fa-light fa-calendar-days"></i>
                                    <strong>Date: </strong>
                                    <span>{{ $event->getDateRangeAttribute() }}</span>
                                </li>
                                <li>
                                    <i class="fa-light fa-clock"></i>
                                    <strong>Time: </strong>
                                    <span>{{ $event->getTimeRangeAttribute() }}</span>
                                </li>
                                <li>
                                    <i class="fa-light fa-location-dot"></i>
                                    <strong>Venue: </strong>
                                    <span>{{ $event->venue }}</span>
                                </li>
                                @if($event->external_link)
                                <li>
                                    <i class="fa-light fa-link"></i>
                                    <strong>External Link: </strong>
                                    <span><a href="{{ $event->external_link }}" target="_blank">{{ $event->external_link }}</a></span>
                                </li>
                                @endif
                            </ul>
                        </div>
                    </div>
                    {{-- Map and other widgets --}}
                </aside>
            </div>
        </div>
    </div>
</section>
@endsection