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

    <div class="container">
      <div class="page_title">
        <h1>
          <span>{{lang('communities')}}</span>
        </h1>
      </div>
      <div class="title_box w_tool full_">
        <!-- <div class="t_box">
          <h3 class="section-title">
            <span>{{lang('our_communities')}}</span>
          </h3>

        </div> -->
        <div class="t_box">
          <h3 class="section-title">
            <span>{{lang('communites_page__our')}}</span>
          </h3>
          <h5 class="small_title_">
            <span>{{lang('communites_page__communities_title')}}</span>
          </h5>
        </div>
        <div class="tool_wrap">
          <ul> 
            <li>
              <a href="#" data-filter data-id=""  class="link_ active_">
                <span>{{lang('all')}}</span>
              </a>
            </li>
            @if(!empty($locationList) && $locationList->isNotEmpty())
                @foreach($locationList as $location)
                    <li>
                        <a href="#" data-filter data-id="{{$location->getData('post_id')}}" class="link_ ">
                            <span>{{$location->getData('post_title')}}</span>
                        </a>
                    </li>
                @endforeach
            @endif
          </ul>
        </div>

      </div>
    </div>
    @include('frontend.layouts.social')
  </section>

  
  @if(!empty($communityList) && $communityList->isNotEmpty())
  @php $communityArr=$communityList->chunk(2);  @endphp
  <section class="page-section w_marq">
    
    <div class="container ">
      <div class="project_list_wrap" id="community-grid">
       @foreach($communityArr as $list)
        <div class="p_row">
          @foreach($list as $row) 
          <div class="p_item">
            <a href="{{route('community-details',[$lang,$row->post_slug])}}" class="inner_ link_tilt">
              <div class="img_box p_img">
                <picture>
                  <source srcset="{{webp($row->getData('community_image'))}}" type="image/webp">
                  <source srcset="{{PP($row->getData('community_image'))}}" type="image/{{FT($row->getData('community_image'))}}">
                  <img src="{{PP($row->getData('community_image'))}}" loading="lazy" alt="{{$row->getData('post_title')}}">
                </picture>
              </div>
              <div class="content_box">
                <div class="c_">
                  <div class="title">
                    <span>{{$row->getData('post_title')}}</span>
                  </div>
                  <div class="meta_">
                    <span>{{$row->getData('sub_title')}}</span>
                  </div>
                </div>

              </div>
            </a>
          </div>
          @endforeach 
          <div class="place_"></div>
        </div>
        @endforeach
      </div>

    </div>
    <div class="text_marc_box">
       @include('frontend.partials.marquee')
    </div>
  </section>
 @endif
</main>
@stop

@section('scripts')
@parent

<script>

  $(function () {
     $('.link_tilt').tilt({
		axis: 'y',
        perspective: 500
    });
  })
  $('[data-filter]').on('click',function(e){
    e.preventDefault();
    $('[data-filter]').removeClass('active_');
    $(this).addClass('active_');
    var lc = $(this).data('id');
    var url_ =window.currentUrl;
      $('.aj_loader').addClass('show');
      sendAjax(url_,'GET',{"lc":lc},function(response){
        $('.aj_loader').removeClass('show');
        if(response.status)
        {
          $('#community-grid').html(response.list);
          /* $('#show-more').attr('href',response.moreLink);
          if(response.viewmore){
            $('.more_wrap').show();
          }else{
            $('.more_wrap').hide();
          } */
        }
      });	

})
</script>
@stop