@extends('website.layout.main')
@section('content')
    <!--Page Header Start-->
    <x-website-page-header title="{{__('messages.events')}}" bgImage="assets/images/backgrounds/page-header-bg.png" homeLink="{{ url('/') }}" />
    <!--Page Header End-->

    <!--Events Carousel Page Start-->
    <section class="events-carousel-page">
        <div class="container">
            <div class="events-carousel-style owl-carousel owl-theme carousel-dot-style">
                <!--Event One Single Start-->
                @if (count($events) > 0)
                    @foreach ($events as $event)
                        <div class="item">
                            <div class="event-one__single">
                                <div class="event-one__img-box">
                                    <div class="event-one__img">
                                        <img src="@if ($event->photo ==null) {{ asset('assets/images/null.png')}} @else {{ Storage::url($event->photo) }} @endif" alt="" style="width: 100%; height: 100%; object-fit: cover;">
                                    </div>
                                    <div class="event-one__date">
                                        <p><span class="icon-clock"></span>{{date('d M, Y', strtotime($event->date))}}</p>
                                    </div>
                                </div>
                                <div class="event-one__content">
                                    <h4 class="event-one__title"><a href="{{route('events.details', $event->slug)}}">{{$event->title}}</a></h4>
                                    <p class="event-one__text">{!!Str::limit($event->description, 150)!!}</p>
                                    <p class="event-one__location"><span class="icon-pin"></span>{{$event->location}}</p>
                                    <div class="event-one__btn-box">
                                        <a href="{{route('events.details', $event->slug)}}" class="event-one__btn thm-btn">{{__('messages.readmore')}}<span><i
                                                    class="icon-arrow-right"></i></span></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                @else
                    <!--Event One Single Start-->
                    <div class="item">
                        {{-- <div class="event-one__single">
                            <div class="event-one__img-box">
                                <div class="event-one__img">
                                    <img src="{{asset('assets/images/event/event-1-1.jpg') }}" alt="">
                                </div>
                                <div class="event-one__date">
                                    <p><span class="icon-clock"></span>20th Dec, 2024</p>
                                </div>
                            </div>
                            <div class="event-one__content">
                                <h4 class="event-one__title"><a href="{{route('contact-us')}}">Contact Us</a></h4>
                                <p class="event-one__text">Lorem Ipsum is simply dummy a of the printing and type
                                    setting industry Loreaim Ipsum has</p>
                                <p class="event-one__location"><span class="icon-pin"></span>6391 Elgin St. Celina,
                                    10299</p>
                                <div class="event-one__btn-box">
                                    <a href="{{route('contact-us')}}" class="event-one__btn thm-btn">Contact Us<span><i
                                                class="icon-arrow-right"></i></span></a>
                                </div>
                            </div>
                        </div> --}}
                    </div>
                    <!--Event One Single End-->
                   
                @endif
                <!--Event One Single End-->
            </div>
        </div>
    </section>
    <!--Events Carousel Page End-->
@endsection