@extends('website.layout.app')
@section('title', __('Badar Expo Solutions'))
@section('content')
    <div class="" style="padding-top:40ppx; width:100% !important">
        <video autoplay muted loop playsinline style="width: 100%;">
            <source src="{{ asset('assets/videos/banner1.mp4') }}" type="video/mp4">
            Your browser does not support the video tag.
        </video>
    </div>



    <!-- upcomming-event-section - start
      ================================================== -->
    <section id="upcomming-event-section" class="upcomming-event-section sec-ptb-100 clearfix">
        <div class="container">

            <!-- section-title - start -->
            <div class="section-title text-center mb-50">
                <small class="sub-title">upcoming events</small>
                <h2 class="big-title">Latest <strong>Events</strong></h2>
            </div>
            <!-- section-title - end -->

            <!-- upcomming-event-carousel - start -->
            <div id="upcomming-event-carousel" class="upcomming-event-carousel owl-carousel owl-theme">

                @foreach ($latest_events as $item)

                    <!-- item - start -->
                    <div class="item">
                        <div class="event-item">

                            <!-- <div class="countdown-timer">
                                    <ul class="countdown-list" data-countdown="2020/08/08"></ul>
                                </div> -->

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

                            <div class="event-content">
                                <div class="event-title mb-30">
                                    <h3 class="title">
                                        {{ $item->name }}
                                    </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:i A').' - '.$item->end_time->format('h:i A') }}
                                        </li>
                                        @if($item->city && $item->country)
                                        <li>
                                            <span class="icon">
                                                <i class="fas fa-map-marker-alt"></i>
                                            </span> {{ $item->city.', '.$item->country }}
                                        </li>
                                        @endif
                                    </ul>
                                </div>
                                <a href="{{ route('event',$item) }}" class="custom-btn">
                                    More Details
                                </a>
                            </div>

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

        </div>
    </section>
    <!-- upcomming-event-section - end
      ================================================== -->




  <!-- about-section - start
		================================================== -->
    <section id="about-section" class="about-section sec-ptb-100 clearfix">
        <div class="container">
            <div class="row">

                <!-- section-title - start -->
                <div class="col-lg-4 col-md-12 col-sm-12">
                    <div class="section-title text-left mb-30">
                        <span class="line-style"></span>
                        <small class="sub-title">we are Badar Expo</small>
                        <h2 class="big-title"><strong>No.1</strong> Events Management</h2>
                        <p class="black-color mb-50">
                            Badar Expo Solutions (BXSS) is one of Pakistan’s leading event management companies, known for delivering world-class experiences through expert planning
                              </p>
                        <a href="{{ route('about_us') }}" class="custom-btn">
								about Badar Expo
							</a>
                    </div>
                </div>
                <!-- section-title - end -->

                <!-- about-item-wrapper - start -->
                <div class="col-lg-8 col-md-12 col-sm-12">
                    <div class="about-item-wrapper ul-li">
                        <ul>

                            <li>
                                <a href="#!" class="about-item">
										<span class="icon">
											<i class="fa-solid fa-user-group"></i>
										</span>
										<strong class="title">
											Friendly Team
										</strong>
										<small class="sub-title">
											More than 200 teams
										</small>
									</a>
                            </li>
                            <li>
                                <a href="#!" class="about-item">
										<span class="icon">
											<i class="fa-solid fa-magnifying-glass-location"></i>
										</span>
										<strong class="title">
											perfect venues
										</strong>
										<small class="sub-title">
											perfect venues
										</small>
									</a>
                            </li>
                            <li>
                                <a href="#!" class="about-item">
										<span class="icon">
											<i class="fa-solid fa-champagne-glasses"></i>
										</span>
										<strong class="title">
											Unique Scenario
										</strong>
										<small class="sub-title">
											We thinking out of the box
										</small>
									</a>
                            </li>

                            <li>
                                <a href="#!" class="about-item">
										<span class="icon">
											<i class="fa-solid fa-gift"></i>
										</span>
										<strong class="title">
											Unforgettable Time
										</strong>
										<small class="sub-title">
											We make you perfect event
										</small>
									</a>
                            </li>
                            <li>
                                <a href="#!" class="about-item">
										<span class="icon">
											<i class="fa-solid fa-headset"></i>
										</span>
										<strong class="title">
											24/7 Hours Support
										</strong>
										<small class="sub-title">
											Anytime anywhere
										</small>
									</a>
                            </li>
                            <li>
                                <a href="#!" class="about-item">
										<span class="icon">
											<i class="fa-solid fa-lightbulb"></i>
										</span>
										<strong class="title">
											Briliant Idea
										</strong>
										<small class="sub-title">
											We have million idea
										</small>
									</a>
                            </li>

                        </ul>
                    </div>
                </div>
                <!-- about-item-wrapper - end -->

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







    <!-- conference-section - start
		================================================== -->
    <section id="conference-section" class="conference-section clearfix">
        <div class="jarallax" style="background-image: url({{ asset('assets/images/conference/pexels-photo-262669.jpg') }});">
            <div class="overlay-black sec-ptb-100">

                <div class="mb-50">
                    <div class="container">
                        <div class="row">

                            <!-- section-title - start -->
                            <div class="col-lg-6 col-md-12 col-sm-12">
                                <div class="section-title text-left">
                                    <span class="line-style"></span>
                                    <small class="sub-title">Badar Expo Corporate venues</small>
                                    <h2 class="big-title">Conference <strong>Rooms & Hotels</strong></h2>
                                </div>
                            </div>
                            <!-- section-title - end -->

                            <!-- conference-location - start -->
                            <div class="col-lg-6 col-md-12 col-sm-12">
                                <div class="conference-location ul-li clearfix">
                                    <ul>

                                        <!-- country-select - start -->
             <!--                           <li class="country-select">-->
             <!--                               <form action="#!">-->
             <!--                                   <label for="country">Country :</label>-->
             <!--                                   <select class="custom-select" id="country">-->
													<!--	<option selected>Netherland</option>-->
													<!--	<option value="1">USA</option>-->
													<!--	<option value="2">england</option>-->
													<!--	<option value="3">germany</option>-->
													<!--</select>-->
             <!--                               </form>-->
             <!--                           </li>-->
                                        <!-- country-select - end -->

                                        <!-- city-select - start -->
             <!--                           <li class="city-select">-->
             <!--                               <form action="#!">-->
             <!--                                   <label for="city">city :</label>-->
             <!--                                   <select class="custom-select" id="city">-->
													<!--	<option selected>Amsterdam</option>-->
													<!--	<option value="1">washington</option>-->
													<!--	<option value="2">london</option>-->
													<!--	<option value="3">berlin</option>-->
													<!--</select>-->
             <!--                               </form>-->
             <!--                           </li>-->
                                        <!-- city-select - end -->

                                    </ul>
                                </div>
                            </div>
                            <!-- conference-location - end -->

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

                <!-- conference-content-wrapper - start -->
                <div class="tab-wrapper">

                    <!-- tab-menu - start -->
                    <div class="container">
                        <div class="row justify-content-lg-start">
                            <div class="col-lg-6 col-md-12 col-sm-12">
                                <div class="tab-menu">
                                    <ul class="nav tab-nav mb-50">

                                        <li class="nav-item">
                                            <a class="nav-link active" id="nav-one-tab" data-toggle="tab" href="#nav-one" aria-expanded="true">
													<span class="image">
														<img src="{{ asset('assets/imgs/venue/venue(1).jpeg')}}" alt="Image_not_found">
													</span>
													<span class="title">
														<strong class="yellow-color"><i class="fas fa-star"></i> Open Area </strong>

													</span>
													<!--<small class="sub-title">Party Room 2.500 seats</small>-->

												</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" id="nav-two-tab" data-toggle="tab" href="#nav-two" aria-expanded="false">
													<span class="image">
														<img src="{{ asset('assets/imgs/venue/venue(2).jpeg')}}" alt="Image_not_found">
													</span>
													<span class="title">
														<strong class="yellow-color"> <i class="fas fa-star"></i> Dubai Conventions  </strong>
														Center
													</span>
													<!--<small class="sub-title">Party Room 2.500 seats</small>-->

												</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" id="nav-three-tab" data-toggle="tab" href="#nav-three" aria-expanded="false">
													<span class="image">
														<img src="{{ asset('assets/imgs/venue/venue(3).jpeg')}}" alt="Image_not_found">
													</span>
													<span class="title">
														<strong class="yellow-color"><i class="fas fa-star"></i> Lahore  </strong>
														Expo
													</span>
													<!--<small class="sub-title">Party Room 2.500 seats</small>-->

												</a>
                                        </li>

                                        <li class="nav-item">
                                            <a class="nav-link" id="nav-four-tab" data-toggle="tab" href="#nav-four" aria-expanded="false">
													<span class="image">
														<img src="{{ asset('assets/imgs/venue/venue(4).jpeg')}}" alt="Image_not_found">
													</span>
													<span class="title">
														<strong class="yellow-color"><i class="fas fa-star"></i> Marriot Hotel  </strong>
														Islamabad
													</span>
													<!--<small class="sub-title">Party Room 2.500 seats</small>-->

												</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" id="nav-five-tab" data-toggle="tab" href="#nav-five" aria-expanded="false">
													<span class="image">
														<img src="{{ asset('assets/imgs/venue/venue(5).jpeg')}}" alt="Image_not_found">
													</span>
													<span class="title">
														<strong class="yellow-color"><i class="fas fa-star"></i> Lahore Expo</strong>
														Conference Hall
													</span>
													<!--<small class="sub-title">Party Room 2.500 seats</small>-->

												</a>
                                        </li>
            <!--                            <li class="nav-item">-->
            <!--                                <a class="nav-link" id="nav-six-tab" data-toggle="tab" href="#nav-six" aria-expanded="false">-->
												<!--	<span class="image">-->
												<!--		<img src="imgs/venue" alt="Image_not_found">-->
												<!--	</span>-->
												<!--	<span class="title">-->
												<!--		<strong class="yellow-color">3 <i class="fas fa-star"></i> pear </strong>-->
												<!--		Hotel-->
												<!--	</span>-->
													<!--<small class="sub-title">Party Room 2.500 seats</small>-->

												<!--</a>-->
            <!--                            </li>-->

                                    </ul>
           <!--                         <div class="more-btn">-->
           <!--                             <a href="#!">-->
											<!--	<strong class="yellow-color">VIEW ALL</strong> HOTEL & RESORT-->
											<!--</a>-->
           <!--                         </div>-->
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- tab-menu - end -->

                    <!-- tab-content - start -->
                    <div class="tab-content">
                        <!-- tab-pane - start -->
                        <div class="tab-pane fade active show" id="nav-one" role="tabpanel" aria-labelledby="nav-one-tab" aria-expanded="true">
                            <div class="image">
                                <img src="{{ asset('assets/imgs/venue/venue(1).jpeg')}}" alt="Image_not_found">
                                <a href="{{ route('events') }}" class="custom-btn">
									More Events
									</a>
                                <!--<div class="badge-item">-->
                                <!--    <div class="content">-->
                                <!--        <i class="fas fa-star"></i>-->
                                <!--        <strong>5.0</strong>-->
                                <!--        <small>featured hotel</small>-->
                                <!--    </div>-->
                                <!--</div>-->
                            </div>
                        </div>
                        <!-- tab-pane - end -->

                        <!-- tab-pane - start -->
                        <div class="tab-pane fade" id="nav-two" role="tabpanel" aria-labelledby="nav-two-tab" aria-expanded="false">
                            <div class="image">
                                <img src="{{ asset('assets/imgs/venue/venue(2).jpeg')}}" alt="Image_not_found">
                                <a href="event-grid.php" class="custom-btn">
										More Events
									</a>
                                <div class="badge-item">
                                    <div class="content">
                                        <i class="fas fa-star"></i>
                                        <strong>5.0</strong>
                                        <small>featured hotel</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- tab-pane - end -->

                        <!-- tab-pane - start -->
                        <div class="tab-pane fade" id="nav-three" role="tabpanel" aria-labelledby="nav-three-tab" aria-expanded="false">
                            <div class="image">
                                <img src="{{ asset('assets/imgs/venue/venue(3).jpeg')}}" alt="Image_not_found">
                                <a href="event-grid.php" class="custom-btn">
										More Events
									</a>
                                <div class="badge-item">
                                    <div class="content">
                                        <i class="fas fa-star"></i>
                                        <strong>5.0</strong>
                                        <small>featured hotel</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- tab-pane - end -->

                        <!-- tab-pane - start -->
                        <div class="tab-pane fade" id="nav-four" role="tabpanel" aria-labelledby="nav-four-tab" aria-expanded="false">
                            <div class="image">
                                <img src="{{ asset('assets/imgs/venue/venue(4).jpeg')}}" alt="Image_not_found">
                                <a href="event-grid.php" class="custom-btn">
										More Events
									</a>
                                <div class="badge-item">
                                    <div class="content">
                                        <i class="fas fa-star"></i>
                                        <strong>5.0</strong>
                                        <small>featured hotel</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- tab-pane - end -->

                        <!-- tab-pane - start -->
                        <div class="tab-pane fade" id="nav-five" role="tabpanel" aria-labelledby="nav-five-tab" aria-expanded="false">
                            <div class="image">
                                <img src="{{ asset('assets/imgs/venue/venue(5).jpeg')}}" alt="Image_not_found">
                                <a href="event-grid.php" class="custom-btn">
										More Events
									</a>
                                <div class="badge-item">
                                    <div class="content">
                                        <i class="fas fa-star"></i>
                                        <strong>5.0</strong>
                                        <small>featured hotel</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- tab-pane - end -->

                        <!-- tab-pane - start -->
                        <div class="tab-pane fade" id="nav-six" role="tabpanel" aria-labelledby="nav-six-tab" aria-expanded="false">
                            <div class="image">
                                <img src="{{ asset('assets/images/conference/midlands-park-hotel-meeting-rooms.jpg') }}" alt="Image_not_found">
                                <a href="event-grid.php" class="custom-btn">
										More Events
									</a>
                                <div class="badge-item">
                                    <div class="content">
                                        <i class="fas fa-star"></i>
                                        <strong>5.0</strong>
                                        <small>featured hotel</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- tab-pane - end -->

                    </div>
                    <!-- tab-content - end -->

                </div>
                <!-- conference-content-wrapper - end -->

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





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

            <div class="mb-50">
                <div class="row">

                    <!-- section-title - start -->
                    <div class="col-lg-3 col-md-12 col-sm-12">
                        <div class="section-title text-left">
                            <span class="line-style"></span>
                            <small class="sub-title">Badar Expo events</small>
                            <h2 class="big-title"><strong>event</strong> listing</h2>
                        </div>
                    </div>
                    <!-- section-title - end -->

                    <!-- event-tab-menu - start -->
                    <div class="col-lg-8 col-md-12 col-sm-12">
                        <div class="event-tab-menu clearfix">
                            <ul class="nav">
                                @foreach($categories as $key => $category)
                                    <li>
                                        <a data-toggle="tab" href="#category-event-{{ $category->id }}" {{ $key === 0 ? 'class="active"' : '' }}>
                                            <strong>{{ $category->name }}</strong> event
                                        </a>
                                    </li>
                                @endforeach
                                <li>
                                    <a data-toggle="tab" href="#other-event">
                                        <strong>other</strong> event
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <!-- event-tab-menu - end -->

                </div>
            </div>

            <!-- tab-content - start -->
            <div class="tab-content">

                @foreach($categories as $key => $category)
                    <div id="category-event-{{ $category->id }}" class="tab-pane fade {{ $key === 0 ? 'in active show' : '' }}">
                        <div class="row">
                            @foreach($category->events as $event)
                                <div class="col-lg-6 col-md-12 col-sm-12">
                                    <div class="event-item clearfix">

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

                                        <div class="event-content">
                                            <div class="event-title mb-15">
                                                <h3 class="title">{{ $event->name }}</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 {{ $event->start_time->format('h:i A') }} - {{ $event->end_time->format('h:i A') }}
                                                    </li>
                                                    @if ($event->city && $event->country)
                                                        <li>
                                                            <span class="icon"><i class="fas fa-map-marker-alt"></i></span>
                                                            {{ $event->city.', '.$event->country }}
                                                        </li>
                                                    @endif
                                                </ul>
                                            </div>
                                            <a href="{{ route('event',$event) }}" class="tickets-details-btn">
                                                More Details
                                            </a>
                                        </div>

                                    </div>
                                </div>
                            @endforeach

                        </div>
                    </div>
                @endforeach

                <!-- other-event - start -->
                <div id="other-event" class="tab-pane fade">
                    <div class="row">
                        @foreach($otherEvents as $event)
                            <!-- event-item - start -->
                            <div class="col-lg-6 col-md-12 col-sm-12">
                                <div class="event-item clearfix">

                                    <!-- event-image - start -->
                                    <div class="event-image">
                                        <div class="post-date">
                                            <span class="date">{{ $event->start_time->day }}</span>
                                            <small class="month">{{ $event->start_time->format('M') }}</small>
                                        </div>
                                        <img src="{{ $event->imagePath . $event->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">
                                                {{ $event->name }}
                                            </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 {{ $event->start_time->format('H:i A') }} - {{ $event->end_time->format('H:i A') }}
                                                </li>
                                                @if ($event->city && $event->country)
                                                    <li>
                                                        <span class="icon">
                                                            <i class="fas fa-map-marker-alt"></i>
                                                        </span>  {{ $event->city.', '.$event->country }}
                                                    </li>
                                                @endif
                                            </ul>
                                        </div>
                                        <a href="{{ route('event',$event) }}" class="tickets-details-btn">
                                            More Details
                                        </a>
                                    </div>
                                    <!-- event-content - end -->

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

            </div>
            <!-- tab-content - end -->

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






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

            <!-- section-title - start -->
            <div class="section-title text-center mb-50">
                <small class="sub-title">our services</small>
                <h2 class="big-title">Badar Expo <strong>Expertise</strong></h2>
            </div>
            <!-- section-title - end -->

            <!-- event-expertise-carousel - start -->
            <div id="event-expertise-carousel" class="event-expertise-carousel owl-carousel owl-theme">

                <!-- expertise-item - start -->
                <div class="item">
                    <span class="expertise-title">Badar Expo party events</span>
                    <div class="expertise-item">
                        <div class="image image-wrapper">
                            <img src="{{ asset('assets/imgs/service/EventPlanning&Management.png') }}" alt="Image_not_found">
                            <a href="#!" class="plus-effect"></a>
                        </div>
                        <div class="content">
                            <h3 class="title">Event Planning & Management</h3>
                        </div>
                    </div>
                </div>
                <!-- expertise-item - end -->

                <!-- expertise-item - start -->
                <div class="item">
                    <span class="expertise-title">Badar Expo party events</span>
                    <div class="expertise-item">
                        <div class="image image-wrapper">
                            <img src="{{ asset('assets/imgs/service/Theme&Decor.png')}}" alt="Image_not_found">
                            <a href="#!" class="plus-effect"></a>
                        </div>
                        <div class="content">
                            <h3 class="title">Theme & Decor</h3>
                        </div>
                    </div>
                </div>
                <!-- expertise-item - end -->

                <!-- expertise-item - start -->
                <div class="item">
                    <span class="expertise-title">Badar Expo party events</span>
                    <div class="expertise-item">
                        <div class="image image-wrapper">
                            <img src="{{ asset('assets/imgs/service/Corporate&PREvents.png')}}" alt="Image_not_found">
                            <a href="#!" class="plus-effect"></a>
                        </div>
                        <div class="content">
                            <h3 class="title">Corporate & PR Events</h3>
                        </div>
                    </div>
                </div>
                <!-- expertise-item - end -->

                <!-- expertise-item - start -->
                <div class="item">
                    <span class="expertise-title">Badar Expo party events</span>
                    <div class="expertise-item">
                        <div class="image image-wrapper">
                            <img src="{{ asset('assets/imgs/service/Entertainment.png')}}" alt="Image_not_found">
                            <a href="#!" class="plus-effect"></a>
                        </div>
                        <div class="content">
                            <h3 class="title">Entertainment</h3>
                        </div>
                    </div>
                </div>
                <!-- expertise-item - end -->

                <!-- expertise-item - start -->
                <div class="item">
                    <span class="expertise-title">Badar Expo party events</span>
                    <div class="expertise-item">
                        <div class="image image-wrapper">
                            <img src="{{ asset('assets/imgs/service/DefenseExpo.png')}}" alt="Image_not_found">
                            <a href="#!" class="plus-effect"></a>
                        </div>
                        <div class="content">
                            <h3 class="title">Defense Exhibition</h3>
                        </div>
                    </div>
                </div>
                <!-- expertise-item - end -->

                <!-- expertise-item - start -->
                <div class="item">
                    <span class="expertise-title">Badar Expo party events</span>
                    <div class="expertise-item">
                        <div class="image image-wrapper">
                            <img src="{{ asset('assets/imgs/service/BusinessConference.png')}}" alt="Image_not_found">
                            <a href="#!" class="plus-effect"></a>
                        </div>
                        <div class="content">
                            <h3 class="title">Business Conference </h3>
                        </div>
                    </div>
                </div>
                <!-- expertise-item - end -->

                <!-- expertise-item - start -->
                <div class="item">
                    <span class="expertise-title">Badar Expo party events</span>
                    <div class="expertise-item">
                        <div class="image image-wrapper">
                            <img src="{{ asset('assets/imgs/service/FestivalEvents.png')}}" alt="Image_not_found">
                            <a href="#!" class="plus-effect"></a>
                        </div>
                        <div class="content">
                            <h3 class="title">Festival Events</h3>
                        </div>
                    </div>
                </div>
                <!-- expertise-item - end -->

                <!-- expertise-item - start -->
                <div class="item">
                    <span class="expertise-title">Badar Expo party events</span>
                    <div class="expertise-item">
                        <div class="image image-wrapper">
                            <img src="{{ asset('assets/imgs/service/healthcareevents.png')}}" alt="Image_not_found">
                            <a href="#!" class="plus-effect"></a>
                        </div>
                        <div class="content">
                            <h3 class="title">Healthcare Events</h3>
                        </div>
                    </div>
                </div>
                <!-- expertise-item - end -->

                <!-- expertise-item - start -->
                <div class="item">
                    <span class="expertise-title">Badar Expo party events</span>
                    <div class="expertise-item">
                        <div class="image image-wrapper">
                            <img src="{{ asset('assets/imgs/service/groundbreakingceremony.png')}}" alt="Image_not_found">
                            <a href="#!" class="plus-effect"></a>
                        </div>
                        <div class="content">
                            <h3 class="title">Ground breaking ceremony </h3>
                        </div>
                    </div>
                </div>
                <!-- expertise-item - end -->

                <!-- expertise-item - start -->
                <div class="item">
                    <span class="expertise-title">Badar Expo party events</span>
                    <div class="expertise-item">
                        <div class="image image-wrapper">
                            <img src="{{ asset('assets/imgs/service/Conference.png')}}" alt="Image_not_found">
                            <a href="#!" class="plus-effect"></a>
                        </div>
                        <div class="content">
                            <h3 class="title">Conference</h3>
                        </div>
                    </div>
                </div>
                <!-- expertise-item - end -->

                <!-- expertise-item - start -->
                <div class="item">
                    <span class="expertise-title">Badar Expo party events</span>
                    <div class="expertise-item">
                        <div class="image image-wrapper">
                            <img src="{{ asset('assets/imgs/service/Convocationsceremony.png')}}" alt="Image_not_found">
                            <a href="#!" class="plus-effect"></a>
                        </div>
                        <div class="content">
                            <h3 class="title">Convocations</h3>
                        </div>
                    </div>
                </div>
                <!-- expertise-item - end -->

            </div>
            <!-- event-expertise-carousel - end -->

        </div>
    </section>
    <!-- event-expertise-section - end
		================================================== -->







    <!-- speaker-section - start
		================================================== -->
 <style>
    .founder-img{
          height: 70vh;
    }
  </style>

  <section id="speaker-section" class="speaker-section clearfix" style="background-image: url({{ asset('assets/images/speaker/Black-White-Dubai-Wallpaper.jpg') }});">
    <div class="overlay-white">
        <div class="container">

            <div class="row align-items-center">

                <div class="col-lg-6">
                    <div class="speaker-image image-wrapper text-center">
                        <img src="{{ asset('assets/images/founder.png')}}" class="founder-img" alt="Image_not_found">
                        <!--<span class="speaker-name"><strong>Jenni</strong> Berthas</span>-->
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="speaker-content">

                        <div class="section-title text-left mb-50">
                            <span class="line-style"></span>
                            <small class="sub-title">Message from the Founder</small>
                            <h2 class="big-title">Meet Our <strong>Visionary</strong></h2>
                        </div>
                        <div class="speaker-info">
                            <div class="speaker-title mb-30">
                                <span class="speaker-name" style="color:black"><strong>{{ $our_message->name }}</strong></span>
                                <!--<span class="work-experienc yellow-color"><strong>15 Years</strong> experienced</span>-->
                            </div>
                            <p class="black-color mb-30">
                                {{  strip_tags($our_message->message) }}
                            </p>
                        </div>

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

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

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

            <!-- section-title - start -->
            <div class="section-title text-center mb-50">
                <small class="sub-title">we are Badar Expo</small>
                <h2 class="big-title">We have <strong>Best Partners & Clients</strong></h2>
                <p class="m-0 black-color">
                    Lorem ipsum dollor site amet the best consectuer adipiscing elites sed diam nonummy nibh euismod
                    tincidunt ut laoreet dolore magna aliquam erat volutpat insignia the consectuer adipiscing elit.
                </p>
            </div>
            <!-- section-title - end -->

            <div class="row">

                <!-- partners-wrapper - start -->
                <div class="col-lg-6 col-md-12 col-sm-12">
                    <div class="partners-wrapper">
                        <span class="carousel-title">
                            Badar Expo <strong>sponsors</strong>
                        </span>

                        <div id="partners-carousel" class="partners-carousel owl-carousel owl-theme">
                            @foreach($our_clients as $clientBatch)
                                @if($clientBatch->count() === 6)
                                    <div class="item">
                                        <ul>
                                            @foreach($clientBatch as $item)
                                                <li>
                                                    <a href="#">
                                                        <img src="{{ $item->imagePath.$item->image }}" alt="{{ $item->name }}">
                                                    </a>
                                                </li>
                                            @endforeach
                                        </ul>
                                    </div>
                                @endif
                            @endforeach
                        </div>
                    </div>
                </div>
                <!-- partners-wrapper - end -->

                <!-- clients-testimonial - start -->
                <div class="col-lg-6 col-md-12 col-sm-12">
                    <div class="clients-testimonial"
                        style="background-image: url({{ asset('assets/images/1.testimonial-bg.jpg')}});">
                        <div class="overlay-black">

                            <div class="section-title text-center mb-50">
                                <small class="sub-title">testimonial</small>
                                <h2 class="big-title">client <strong>says</strong></h2>
                            </div>

                            <div id="clients-testimonial-carousel"
                                class="clients-testimonial-carousel owl-carousel owl-theme">
                                @foreach ($testimonials as $item)
                                    <div class="item text-center">
                                        <p class="mb-30 text-white">
                                            “{{ substr($item->message, 0, 150) }}”
                                        </p>
                                        <div class="client-info">
                                            <h3 class="client-name">{{$item->name}}</h3>
                                            <span class="client-sub-title">{{$item->designation}}</span>
                                        </div>
                                    </div>
                                @endforeach
                            </div>

                        </div>
                    </div>
                </div>
                <!-- clients-testimonial - end -->

            </div>

        </div>
    </section>
    <!-- partners-clients-section - end
      ================================================== -->





    <!-- news-update-section - start
      ================================================== -->
    <section id="news-update-section" class="news-update-section sec-ptb-100 clearfix">
        <div class="container">
            <div class="row">

                <!-- faq-accordion - start -->
                <div class="col-lg-6 col-md-12 col-sm-12">
                    <!-- section-title - start -->
                    <div class="section-title mb-30">
                        <span class="line-style"></span>
                        <small class="sub-title">find your answer</small>
                        <h2 class="big-title">ask a <strong>question</strong></h2>
                    </div>
                    <!-- section-title - end -->

                    <div id="faq-accordion" class="faq-accordion">
                        @foreach ($faqs as $index => $faq)
                            <div class="card">
                                <div class="card-header" id="heading{{ $index }}">
                                    <button class="btn {{ $index !== 0 ? 'collapsed' : '' }}"
                                            data-toggle="collapse"
                                            data-target="#collapse{{ $index }}"
                                            aria-expanded="{{ $index === 0 ? 'true' : 'false' }}"
                                            aria-controls="collapse{{ $index }}">
                                        <span>{{ str_pad($index + 1, 2, '0', STR_PAD_LEFT) }}.</span>
                                        {{ $faq->question }}
                                    </button>
                                </div>

                                <div id="collapse{{ $index }}"
                                    class="collapse {{ $index === 0 ? 'show' : '' }}"
                                    aria-labelledby="heading{{ $index }}"
                                    data-parent="#faq-accordion">
                                    <div class="card-body">
                                        <h3>answer</h3>
                                        {!! $faq->answer !!}
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>

                <!-- faq-accordion - end -->

                <!-- latest-blog-wrapper - start -->
                <div class="col-lg-6 col-md-12 col-sm-12">
                    <div class="latest-blog-wrapper">

                        <!-- section-title - start -->
                        <div class="section-title mb-30">
                            <span class="line-style"></span>
                            <small class="sub-title">our blog</small>
                            <h2 class="big-title">latest <strong>news</strong></h2>
                        </div>
                        <div class="row">
                            <!-- section-title - end -->
                            @foreach ($blogs as $item)
                                    <!-- latest-blog - start -->
                                    <div class="latest-blog clearfix">
                                        <div class="blog-image">
                                            <img src="{{ $item->imagePath. $item->image}}" alt="Image_not_found">
                                            <a href="#!" class="plus-effect"></a>
                                        </div>
                                        <div class="blog-content">
                                            <div class="blog-title mb-30">
                                                <h3>{{ substr($item->title,0,30) }}</h3>
                                                <span>{{ $item->created_at->format('Y:m:d') }}</span>
                                            </div>
                                            <p class="m-0">
                                                {{ substr(strip_tags($item->description),0,100) }}
                                            </p>
                                        </div>
                                    </div>
                                    <!-- latest-blog - end -->
                            @endforeach
                            <!-- section-title - end -->
                        </div>
                    </div>
                </div>
                <!-- latest-blog-wrapper - end -->

            </div>
        </div>
    </section>
    <!-- news-update-section - end
      ================================================== -->
@endsection