@extends('frontend.layouts.master')
@section('styles')
@parent
@stop
@section('content')
<main>
  <section class="inner_banner">
    <div class="bg_ p_img">
      <picture>
      @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="{{lang('project_page_banner_alt_keywords')}}">
        </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('blogs')}}</span>
        </h1>
        @if($banner->getData('sub_title'))
        <div class="text_box">
            {!! $banner->getData('sub_title') !!}
        </div>
        @endif        
      </div>
      <div class="title_box w_tool">
        <div class="t_box">
          <h3 class="section-title">
            <span>{{lang('blog_page__latest')}}</span>
          </h3>
          <h5 class="small_title_">
            <span>{{lang('blog_page__blog_title')}}</span>
          </h5>
        </div>

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

    
    <div class="project_list_wrap blog_wrap">
      @if(!empty($blogs) && $blogs->isNotEmpty())
      <div class="p_row" id="blog-grid">

        @foreach($blogs as $blog)
        <div class="p_item">
          <a href="{{route('blog-details',[$lang,$blog->post_slug])}}" class="inner_ link_tilt">
            <div class="img_box p_img">
                <picture>
                  <source srcset="{{webp($blog->getData('blog_image'))}}" type="image/webp">
                  <source srcset="{{PT($blog->getData('blog_image'))}}" type="image/{{FT($blog->getData('blog_image'))}}">
                  <img src="{{PT($blog->getData('blog_image'))}}" loading="lazy" alt="{{$blog->getData('post_title')}}">
                </picture>
            </div>
            <div class="content_box">
              <div class="c_">
                <div class="title">
                  <span>{{$blog->getData('post_title')}}</span
                  >
                </div>
                <div class="meta_">
                  <span>{{DTF($blog->getData('blog_date'))}}</span>
                </div>
              </div>
            </div>
          </a>
        </div>
        @endforeach

      </div>
      @else
      <div class="empty_">
          <h3>{{lang('no_details_found')}}</h3>
      </div>          
      @endif

      @include('frontend.blog.partials.popular-blog')

    </div>

      @if(!empty($blogs->nextPageUrl()))
      <div class="more_wrap">
        <a id="show-more" class="dir-btn" href="{{$blogs->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

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

  

</main>

@stop

@section('scripts')
@parent
<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={};
    loadBlogs(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};
    loadBlogs(data,url_,'replace');
})
function loadBlogs(data,url_,action)
{
      $('.aj_loader').addClass('show');
      sendAjax(url_,'GET',data,function(response){
        $('.aj_loader').removeClass('show');
        if(response.status)
        { 
            if(action=="append"){
                $('#blog-grid').append(response.list);
            }else{
                $('#blog-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
				});
            })
        }
      });	
}

if ($(window).width() > 1024) {
      $(".p_row.blog-thumb .thumb-wrapper").stickit({
        top: 100
      });
    }
</script>

@stop