@php $setting = sitesSettings(); @endphp
<!-- Event Section Start -->
<div class="event-section pb-0">
  <div class="container">
    <div class="row">
      <div class="col-md-6 col-sm-12 text-md-left text-sm-center">
        <div class="heading">
          <h1>Upcoming Events</h1>
          <p>Find more upcoming events in Your Local Buzz</p>
        </div>
      </div>
      <div class="col-md-6 col-sm-12 text-sm-center">
        <div class="btn all-event-btn">
          <a href="{{route('directory.category.list',['moduleSlug' => 'event'])}}">View All Events</a>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-xl-8 col-lg-12">
        <div class="event-content-box eventlist">
          
          @if(isset($events) && count($events))
            @foreach($events as $event)
              <div class="row event-content">
                <div class="col-md-4">
                  <div class="event-image">
                    @if(isset($event->featured_image))
                      <img src="{{asset('event/'.$event->featured_image )}}" class="img-fluid" alt="{!!$event->featured_image!!}">
                    @else
                      <img src="{{asset('site-settings/logo16240014531624292244.png')}}" class="img-fluid" alt="Event Image">
                    @endif
                  </div>
                </div>
                <div class="col-md-8">
                  <div class="event-detail">
                    <div class="event-title">
                      <h3><a href="{{route('event.detail',$event->slug)}}">{!!$event->title!!}</a></h3>
                    </div>
                    <div class="event-date">
                      <p>{!!$event->event_start_date!!}</p>
                    </div>
                    <p class="description">{!!substr(strip_tags($event->overview_description),0,100)!!}</p>
                    <div class="row event-detail-bottom">
                      <div class="col-md-8">
                        <ul class="event-meta">
                        
                          <li><span><i class="fas fa-map-marker-alt"></i></span>
                            @if( isset( $event->street_address ) ) 
                              {{$event->street_address}}, 
                            @endif 
                            @if( isset( $event->city ) )
                              {{$event->city}}
                            @endif
                          </li>
                          <li><span><i class="far fa-clock"></i></span> {{$event->event_start_time}} - {{$event->event_end_time}}</li>
                        </ul>
                      </div>
                      <div class="col-md-4">
                        <a href="{{route('event.detail',$event->slug)}}" class="btn btn-warning mt-3"><i class="fas fa-eye"></i> Read More</a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            @endforeach
          @endif
          
        </div>
        <!-- <div class="scroll">
          <a href="#scrollTop" class="mouse"><i class="fas fa-chevron-up"></i></a>
          <a href="#scrollBottom"><i class="fas fa-chevron-down"></i></a>
        </div> -->
      </div>
      <div class="col-xl-4 col-lg-12 calendar-section">
        <div class="heading">
          <h1>Events Calendar</h1>
        </div>
       <div id="calendar-app"></div>
    
        <div class="weather-widget">
         <!-- weather widget start -->
         <div id="m-booked-bl-simple-81270"> <div class="booked-wzs-160-110 weather-customize" style="background-color:#137AE9;width:160px;" id="width1"> <div class="booked-wzs-160-110_in"> <div class="booked-wzs-160-data"> <div class="booked-wzs-160-left-img wrz-18"></div> <div class="booked-wzs-160-right"> <div class="booked-wzs-day-deck"> <div class="booked-wzs-day-val"> <div class="booked-wzs-day-number"><span class="plus">+</span>20</div> <div class="booked-wzs-day-dergee"> <div class="booked-wzs-day-dergee-val">&deg;</div> <div class="booked-wzs-day-dergee-name">C</div> </div> </div> <div class="booked-wzs-day"> <div class="booked-wzs-day-d"><span class="plus">+</span>16&deg;</div> <div class="booked-wzs-day-n"><span class="plus">+</span>8&deg;</div> </div> </div> <div class="booked-wzs-160-info"> <div class="booked-wzs-160-city smolest">Lac La Biche</div> <div class="booked-wzs-160-date">Saturday, 28</div> </div> </div> </div> <div class="booked-wzs-center"><span class="booked-wzs-bottom-l"> See 7-Day Forecast</span></div> </div> </div> </div><script type="text/javascript"> var css_file=document.createElement("link"); var widgetUrl = location.href; css_file.setAttribute("rel","stylesheet"); css_file.setAttribute("type","text/css"); css_file.setAttribute("href",'https://s.bookcdn.com/css/w/booked-wzs-widget-160.css?v=0.0.1'); document.getElementsByTagName("head")[0].appendChild(css_file); function setWidgetData_81270(data) { if(typeof(data) != 'undefined' && data.results.length > 0) { for(var i = 0; i < data.results.length; ++i) { var objMainBlock = document.getElementById('m-booked-bl-simple-81270'); if(objMainBlock !== null) { var copyBlock = document.getElementById('m-bookew-weather-copy-'+data.results[i].widget_type); objMainBlock.innerHTML = data.results[i].html_code; if(copyBlock !== null) objMainBlock.appendChild(copyBlock); } } } else { alert('data=undefined||data.results is empty'); } } var widgetSrc = "https://widgets.booked.net/weather/info?action=get_weather_info;ver=7;cityID=35494;type=1;scode=2;ltid=3458;domid=w209;anc_id=57798;countday=undefined;cmetric=1;wlangID=1;color=137AE9;wwidth=160;header_color=ffffff;text_color=333333;link_color=08488D;border_form=1;footer_color=ffffff;footer_text_color=333333;transparent=0;v=0.0.1";widgetSrc += ';ref=' + widgetUrl;widgetSrc += ';rand_id=81270';var weatherBookedScript = document.createElement("script"); weatherBookedScript.setAttribute("type", "text/javascript"); weatherBookedScript.src = widgetSrc; document.body.appendChild(weatherBookedScript) </script><!-- weather widget end -->
        </div>
      </div>
    </div>
     <div class="row home-box-row">
      <div class="col-lg-8 col-md-12 mx-auto home-box-wrapper">
        {!! $setting->home_notice ?? '' !!}
      </div>
    </div>
  </div>
</div>
<!-- Event Section End -->
<style>
  .booked-wzs-160-110_in .booked-wzs-center span{
    display: none !important;
  }
</style>