@extends('frontend.layouts.master')
@section('styles')
@parent
@stop
@section('content')
<main>
  <section class="inner_banner">
    <div class="bg_ p_img">
      <picture>
      @if(!empty($banner) && !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        
        <source srcset="{{getFrontendAsset('images/project_banner.webp')}}" type="image/webp">
        <source srcset="{{getFrontendAsset('images/project_banner.jpg')}}" type="image/jpeg">
        <img src="{{getFrontendAsset('images/project_banner.jpg')}}" loading="lazy" alt="{{lang('project_page_banner_alt_keywords')}}">
      </picture>
      @endif
    </div>
    
    <div class="container">
      <div class="page_title">
        <h1>
          <span>{{lang('projects')}}</span>
        </h1>
      </div>
      <div class="title_box w_tool">
        <div class="t_box">
          <h3 class="section-title">
            <span>{{lang('project_page__our')}}</span>
          </h3>
          <h5 class="small_title_">
            <span>{{lang('project_page__projects_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>
  
  <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($projectList) && $projectList->isNotEmpty())
      <div class="project_list_wrap " id="project-grid">
       @foreach($projectList->chunk(2) as $projectArr)
        <div class="p_row">
          @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="{{PP($project->getData('project_image'))}}" type="image/{{FT($project->getData('project_image'))}}">
                  <img src="{{PP($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($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 class="place_"></div>
        </div>
        @endforeach
       
      </div>
      @if(!empty($projectList->nextPageUrl()))
      <div class="more_wrap">
        <a id="show-more" class="dir-btn" href="{{$projectList->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 () {
    $('.link_tilt').tilt({
      perspective: 1000,
      scale: 1.01
    });
  })
</script> -->
<script>

  $(function () {
    $('.link_tilt').tilt({
		axis: 'y',
        perspective: 500
    });
  })

$('#show-more').on('click',function(e){
    e.preventDefault();
    var url_ = $(this).attr('href');
    var lc = $('.tool_wrap ul li a.active_').data('id');
    var data={"lc":lc};
    //console.log(data);
    //var data={};
    loadProjects(data,url_,'append');
});   
$('[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};
    loadProjects(data,url_,'replace');
})
function loadProjects(data,url_,action)
{
      $('.aj_loader').addClass('show');
      sendAjax(url_,'GET',data,function(response){
        $('.aj_loader').removeClass('show');
        if(response.status)
        { 
            if(action=="append"){
                $('#project-grid').append(response.list);
            }else{
                $('#project-grid').html(response.list);
            }
          
            $('#show-more').attr('href',response.moreLink);
            if(response.viewmore){
                $('.more_wrap').show();
            }else{
                $('.more_wrap').hide();
            } 

            $(function () {
               $('.link_tilt').tilt({
					axis: 'y',
					perspective: 500
				});
            })
        }
      });	
}
</script>

@stop