@extends('frontend.layouts.master')
@section('styles')
@parent
@stop
@section('content')
<main>
  <section class="inner_banner">
    <div class="bg_ p_img">
      @if(!empty($banner))
      <picture>
        <source srcset="{{webp($banner->getData('banner_image'))}}" type="image/webp">
        <source srcset="{{PP($banner->getData('banner_image'))}}" type="image/{{FT($banner->getData('banner_image'))}}">
        <img src="{{PP($banner->getData('banner_image'))}}" loading="lazy" alt="{{lang('media_banner_alt_keywords')}}">
      </picture>
      @else
      <picture>
        <source srcset="{{getFrontendAsset('images/event_banner.webp')}}" type="image/webp">
        <source srcset="{{getFrontendAsset('images/event_banner.jpg')}}" type="image/jpeg">
        <img src="{{getFrontendAsset('images/event_banner.jpg')}}" loading="lazy" alt="">
      </picture>
      @endif
    </div>

    <div class="container">
      <div class="page_title no_p_b">
        <div class="breadcrumb_wrap">
          <ul>
            <li>
              <a href="{{URL::to('/')}}" class="link_">
                {{lang('home')}}
              </a>
            </li>
            <li>
              <a href="{{route('media-center',$lang)}}" class="link_">
                {{lang('media_center')}}
              </a>
            </li>
            <li class="active_">
              <span>{{lang('events')}}</span>
            </li>
          </ul>
        </div>
        <h1>
          <span>{!!lang('events')!!}</span>
        </h1>
      </div>
      <div class="title_box w_tool">
        <div class="t_box">

        </div>
        <div class="tool_wrap">
          <ul>
            <li>
              <div class="input_box">
                <select id="month-filter">
                  <option value="">{{lang('month')}}</option>
                  <option value="01">{{lang('jan')}}</option>
                  <option value="02">{{lang('feb')}}</option>
                  <option value="03">{{lang('mar')}}</option>
                  <option value="04">{{lang('apr')}}</option>
                  <option value="05">{{lang('may')}}</option>
                  <option value="06">{{lang('jun')}}</option>
                  <option value="07">{{lang('jul')}}</option>
                  <option value="08">{{lang('aug')}}</option>
                  <option value="09">{{lang('sep')}}</option>
                  <option value="10">{{lang('oct')}}</option>
                  <option value="11">{{lang('nov')}}</option>
                  <option value="12">{{lang('dec')}}</option>
                </select>
              </div>
            </li>
          </ul>
        </div>

      </div>
    </div>
     @include('frontend.layouts.social')
  </section>
  <section class="page-section w_marq">

    <div class="container ">
          <div class="aj_loader" id="p-loader">
              <div class="inner_loader">
                <div class="c_loader"></div>
              </div>
        </div>
        @if(!empty($eventsList) && $eventsList->isNotEmpty())
      <div class="latest_news_wrap style_2" id="event-grid">
        
         @foreach($eventsList->chunk(2) as $eventsListArr)
          <div class="news_row">
            @foreach($eventsListArr as $event)
            <div class="n_item">
              <a href="{{route('event-details',[$lang,$event->post_slug])}}" class="inner_ ">
                <div class="img_box p_img">
                     <picture>
                        <source srcset="{{webp($event->getData('event_image'))}}" type="image/webp">
                        <source srcset="{{PP($event->getData('event_image'))}}" type="image/{{FT($event->getData('event_image'))}}">
                        <img src="{{PP($event->getData('event_image'))}}" loading="lazy" alt="{{$event->getData('post_title')}}">
                      </picture>
                </div>
                <div class="content_box">
                  <div class="c_">
                        <div class="title">
                          <span>{{$event->getData('post_title')}}</span>
                        </div>
                        <div class="meta_">
                          <span>{{DTF($event->getData('event_date'))}}</span>
                        </div>
                  </div>
                </div>
              </a>
            </div>
            @endforeach
            <div class="place_"></div>
          </div>
         @endforeach
      </div>
      @if(!empty($eventsList->nextPageUrl()))
            <div class="more_wrap">
              <a id="show-more" class="dir-btn" href="{{$eventsList->nextPageUrl()}}">{{lang('view_more')}}<span></span><span></span><span></span><span></span><b
                  aria-hidden="true">{{lang('view_more')}}</b><b aria-hidden="true">{{lang('view_more')}}</b><b aria-hidden="true">{{lang('view_more')}}</b><b
                  aria-hidden="true">{{lang('view_more')}}</b></a>
            </div>
            @endif
      @else
            <div class="empty_">
                <h3>{{lang('no_details_found')}}</h3>
            </div>
        @endif
    </div>
    <div class="text_marc_box">
        @include('frontend.partials.marquee')
    </div>
  </section>

</main>

@stop

@section('scripts')
@parent
<script>
    $(function () {
        $('.tool_wrap select').selectric({ disableOnMobile: false, nativeOnMobile: false });

    });
    $('#show-more').on('click',function(e){
        e.preventDefault();
        var url_ = $(this).attr('href');
        var data={};
        $('.aj_loader').addClass('show');
        sendAjax(url_,'GET',{},function(response){
          $('.aj_loader').removeClass('show');
          if(response.status)
          {
            $('#event-grid').append(response.list);
            $('#show-more').attr('href',response.moreLink);
            if(response.viewmore){
                $('.more_wrap').show();
            }else{
                $('.more_wrap').hide();
            } 
          }
        });	
    }); 

  $('#month-filter').on('change',function(e){
    var month= $(this).val();
    var url_ ="{{route('events',$lang)}}";
    $('.aj_loader').addClass('show');
    sendAjax(url_,'GET',{"month":month},function(response){
      $('.aj_loader').removeClass('show');
      if(response.status)
      {
        $('#event-grid').html(response.list);
        $('#show-more').attr('href',response.moreLink);
        if(response.viewmore){
            $('.more_wrap').show();
        }else{
            $('.more_wrap').hide();
        } 
      }
    });	
  })

</script>
@stop