@if(!empty($projects) && $projects->isNotEmpty())
<section class="home-section projects_section" id="projects">
    <div class="container">
      <div class="title_box w_tool">
        <div class="t_box">
          <h4 class="title_small">
            <span>{{lang('whats_new')}}</span>
          </h4>
          <h2 class="section-title small_"><span>{{lang('projects')}}</span></h2>
        </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 class="projects_wrapper" >
        <div class="aj_loader" id="p-loader">
              <div class="inner_loader">
                <div class="c_loader"></div>
              </div>
        </div>
        <!-- Swiper -->
        <div class="swiper-container ">
          <div class="swiper-wrapper" id="project-grid" >
            @foreach($projects->chunk(2) as $projectArr)
            <div class="swiper-slide p_g_item" >
              @foreach($projectArr as $project)
              <div class="p_item">
                <a href="{{route('project-details',[$lang,$project->getData('project_slug')])}}" class="inner_ link_tilt">
                  <div class="img_box p_img">
                    <picture>
                      <source srcset="{{webp($project->getData('project_image'))}}" type="image/webp">
                      <source srcset="{{PT($project->getData('project_image'))}}" type="image/{{FT($project->getData('project_image'))}}">
                      <img src="{{PT($project->getData('project_image'))}}" loading="lazy" alt="{{$project->getData('project_title')}}">
                    </picture>
                  </div>
                  <div class="content_box">
                    <div class="c_">
                      <div class="title">
                        <span>{{$project->getData('project_title')}}</span>
                      </div>
                      <div class="meta_">
                        <span>{{$project->getData('project_sub_title')}}</span>
                      </div>
                    </div>
                    @if(!empty($project->getData('project_logo')))
                    <div class="logo_box p_img">
                      <picture>
                        <source srcset="{{webp($project->getData('project_logo'))}}" type="image/webp">
                        <source srcset="{{PP($project->getData('project_logo'))}}" type="image/{{FT($project->getData('project_logo'))}}">
                        <img src="{{PP($project->getData('project_logo'))}}" loading="lazy" alt="{{$project->getData('project_title')}}">
                      </picture>
                    </div>
                    @endif
                  </div>
                </a>
              </div>
              @endforeach
             
            </div>
            @endforeach
          </div>

        </div>
        <div class="nav_box  box_center_">
          <div class="nav_ left_"></div>
          <div class="nav_ right_"></div>
        </div>
        <div class="more_wrap">
          <div class="box"></div>
          <div class="box">
            <a class="dir-btn" href="{{route('projects',$lang)}}">{{lang('view_all')}}<span></span><span></span><span></span><span></span><b
                aria-hidden="true">{{lang('view_all')}}</b><b aria-hidden="true">{{lang('view_all')}}</b><b aria-hidden="true">{{lang('view_all')}}</b><b
                aria-hidden="true">{{lang('view_all')}}</b></a>
          </div>
        </div>
      </div>
    </div>
  </section>
  @endif
  @section('scripts')
@parent
<script>
   
$('[data-filter]').on('click',function(e){
    e.preventDefault();
    $('[data-filter]').removeClass('active_');
    $(this).addClass('active_');
    var lc = $(this).data('id');
    var url_ =window.currentUrl;
    var data={"lc":lc};
    $('#p-loader').addClass('show');
      sendAjax(url_,'GET',data,function(response){
        $('#p-loader').removeClass('show');
        if(response.status)
        { 
            $('#project-grid').html(response.list); 
            
            if(response.viewmore){
                $('.more_wrap').show();
            }else{
                $('.more_wrap').hide();
            } 
            projectSwipper();
        }
      });
   
})
function projectSwipper(){
  var project_slider = new Swiper(".projects_wrapper .swiper-container", {
            slidesPerView: 2,
            spaceBetween: 50,
            navigation: {
                nextEl: ".projects_wrapper .nav_.right_",
                prevEl: ".projects_wrapper .nav_.left_",
            },
            breakpoints: {
				250: {
                    slidesPerView: 1,
                    spaceBetween: 20,
                },
                320: {
                    slidesPerView: 1,
                    spaceBetween: 20,
                },
                768: {
                    slidesPerView: 1,
                    spaceBetween: 20,
                },
                1024: {
                    slidesPerView: 2,
                    spaceBetween: 50,
                },
            },
            on: {
                init: function () {
                    // Set min height
                    setTimeout(function () {
                        var this_h = $('.projects_wrapper').outerHeight();
                        $('.projects_wrapper').css('min-height', (this_h + 20));
                    }, 400);
                },
            }
        });
}
</script>

@stop