@extends('website.layout.app')
@section('title', __('Badar Expo Solutions'))
@section('content')
      <!-- breadcrumb-section - start
		================================================== -->
    <section id="breadcrumb-section" class="breadcrumb-section clearfix">
        <div class="jarallax" style="background-image: url({{ asset('assets/images/breadcrumb/0.breadcrumb-bg.jpg') }});">
            <div class="overlay-black">
                <div class="container">
                    <div class="row justify-content-center mt-5 pt-5">
                        <div class="col-lg-6 col-md-12 col-sm-12">

                            <!-- breadcrumb-title - start -->
                            <div class="breadcrumb-title text-center mb-50">
                                <span class="sub-title">badar expo solutions events</span>
                                <h2 class="big-title">badar expo solutions <strong>event</strong></h2>
                            </div>
                            <!-- breadcrumb-title - end -->

                            <!-- breadcrumb-list - start -->
                            <div class="breadcrumb-list">
                                <ul>
                                    <li class="breadcrumb-item"><a href="index-1.html" class="breadcrumb-link">Home</a></li>
                                    <li class="breadcrumb-item active" aria-current="page">events</li>
                                </ul>
                            </div>
                            <!-- breadcrumb-list - end -->

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- breadcrumb-section - end
		================================================== -->




    <!-- event-section - start
		================================================== -->
    <section id="event-section" class="event-section bg-gray-light sec-ptb-100 clearfix">
        <div class="container">
            <div class="row">

                <!-- - start -->
                <div class="col-lg-12 col-md-12 col-sm-12">

                    <div class="search-result-form">


                        <ul class="nav event-layout-btngroup">
                            <li><a data-toggle="tab" href="#list-style"><i class="fas fa-th-list"></i></a></li>
                            <li><a class="active" data-toggle="tab" href="#grid-style"><i class="fas fa-th"></i></a></li>
                        </ul>
                    </div>

                    <div class="tab-content">
                        <div id="list-style" class="tab-pane fade">

                            @foreach ($events as $item)
                                <!-- event-item - start -->
                                <div class="event-list-item clearfix">

                                    <!-- event-image - start -->
                                    <div class="event-image">
                                        <div class="post-date">
                                            <span class="date">{{ $item->start_time->format('d') }}</span>
                                            <small class="month">{{ $item->start_time->format('M') }}</small>
                                        </div>
                                        <img src="{{ $item->imagePath . $item->image }}" alt="Image_not_found">
                                    </div>
                                    <!-- event-image - end -->

                                    <!-- event-content - start -->
                                    <div class="event-content">
                                        <div class="event-title mb-15">
                                            <h3 class="title">
                                                <strong>{{ \Illuminate\Support\Str::limit(@$item->name, 50, $end = '...') }}</strong>
                                            </h3>

                                        </div>
                                        <p class="discription-text mb-30">
                                            {{ substr(strip_tags($item->description),0,250) }}
                                        </p>
                                        <div class="event-info-list ul-li clearfix">
                                            <ul>
                                                <li>
                                                    <a href="{{ route('event',$item->id) }}" class="tickets-details-btn">
                                                            More details
                                                        </a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                    <!-- event-content - end -->

                                </div>
                                <!-- event-item - end -->
                            @endforeach


                        </div>

                        <div id="grid-style" class="tab-pane fade in active show">
                            <div class="row justify-content-center">

                                @foreach ($events as $item)
                                    <!-- event-grid-item - start -->
                                    <div class="col-lg-6 col-md-6 col-sm-12">
                                        <div class="event-grid-item">
                                            <!-- event-image - start -->
                                            <div class="event-image">
                                                <div class="post-date">
                                                    <span class="date">{{ $item->start_time->format('d') }}</span>
                                                    <small class="month">{{ $item->start_time->format('M') }}</small>
                                                </div>
                                                <img src="{{ $item->imagePath . $item->image }}" alt="Image_not_found">
                                            </div>
                                            <!-- event-image - end -->

                                            <!-- event-content - start -->
                                            <div class="event-content">
                                                <div class="event-title mb-30">
                                                    <h3 class="title">
                                                        {{ \Illuminate\Support\Str::limit(@$item->name, 40, $end = '...') }}
                                                    </h3>

                                                </div>
                                                <div class="event-post-meta ul-li-block mb-30">
                                                    <ul>
                                                        <li>
                                                            <span class="icon">
                                                                    <i class="far fa-clock"></i>
                                                                </span> Start {{$item->start_time->format('H:iA')}} - {{$item->end_time->format('H:iA')}}
                                                        </li>
                                                        <li>

                                                            @if ($item->city && $item->country)
                                                            <span class="icon">
                                                                    <i class="fas fa-map-marker-alt"></i>
                                                                </span>{{ $item->city.', '.$item->country }}
                                                            @else
                                                            <span class="icon" style="visibility:hidden">
                                                                <i class="fas fa-map-marker-alt"></i>
                                                            </span>
                                                            @endif
                                                        </li>
                                                    </ul>
                                                </div>
                                                <a href="{{ route('event',$item->id) }}" class="tickets-details-btn">
                                                        more details
                                                    </a>
                                            </div>
                                            <!-- event-content - end -->
                                        </div>
                                    </div>
                                    <!-- event-grid-item - end -->
                                @endforeach
                                <!-- pagination - start -->

                                <!-- pagination - end -->

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

                </div>
                <!-- - end -->

            </div>
        </div>
    </section>
    <!-- event-section - end
		================================================== -->
@endsection