@extends('website.layouts.web-layouts')
@section('title', "FBCCI | $event->title ")
@section('description', "FBCCI | $event->title ")
@section('image', site_setting()->logo)
@section('url', url()->full())

@section('content')

    <div class="breadcrumb mb-0" style="background: url('{{ asset('images/sm-2.jpg') }}');">
        <div class="overlay">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="content">
                            <h3 class="text-white">Event Details</h3>
                            <ul class="d-flex pt-2 list-unstyled">
                                <li><a href="{{ url('/') }}"> <i class="fas fa-home"></i> Home</a></li>
                                <li class="px-2">/</li>
                                <li><a href="{{ route('web.event.show', $event->slug) }}"> <i class="fas fa-home"></i>
                                        Event</a>
                                </li>
                                <li class="px-2">/</li>
                                <li>{{ $event->title }}</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <section class="event-details-page">
        <div class="container">
            <div class="row">
                <div class="col-lg-8">
                    <div class="event-details-content">
                        <div class="img">
                            <img src="{{ $event->thumb_two }}" alt="{{ $event->title }}" class="img-fluid w-100">
                        </div>
                        <div class="text pt-4 p-4">
                            <h1>
                                {{ global_title_format($event->title) }}
                            </h1>
                            <ul class="d-flex list-unstyled">
                                {{-- <li>
                                    <i class="far fa-clock"></i>
                                    08:00 am - 10:00 am
                                </li> --}}
                                <li>
                                    <i class="far fa-calendar"></i>
                                    {{ global_date_format($event->start_date) }}
                                </li>
                                <li>
                                    <i class="fas fa-map-marker-alt"></i>
                                    {{ $event->venue }}
                                </li>
                            </ul>
                            <h3 class="pt-4 pb-3">The Event Description:</h3>
                            <p class="pb-3">
                                {!! $event->description !!}
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="right-part py-4 px-3 sticky">
                        <div class="recent-news">
                            <h3 class="pb-3">Upcomming Events</h3>
                            <div class="row">
                                @forelse ($upcoming as $item)
                                    <div class="col-lg-12 col-md-6">
                                        <a href="{{ route('web.event.show', $item->slug) }}" class="d-block pb-3">
                                            <div class="news-main">
                                                <div class="news-image">
                                                    <img src="{{ $item->thumb }}" alt="{{ $item->title }}"
                                                        class="img-fluid w-100">
                                                </div>
                                                <div class="news-text p-3 py-2">
                                                    <h4>{{ global_title_format($item->title) }}</h4>
                                                    <span> {{ global_date_format($item->start_date) }} </span>
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                @empty
                                @endforelse
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>


@endsection