@extends('layouts.front')
@section('meta')
<title>{{$data->title}}</title>
<meta property="og:title" content="{{$data->title}}" />
<meta property="og:image" content="{{asset('assets/images/'.$gs->og_baner)}}" />
@endsection
@section('contents')

<!-- main div -->
<div class="mainDiv">
  <!-- mobile header categories -->
  <div class="bg2 marginT-15 marginB10 visible-xs">
    <div class="">
      <div class=" padding0">
        <div class="positionRelative" style="border-bottom: 3px solid #9b090d">
          <div class="mobileHeaderCategoryDiv">
            <a class="sidebarCatTitle colorBlack hoverBlue paddingLR15 textDecorationNone" aria-label="হোম"
              href="{{ route('frontend.index') }}"><strong>হোম</strong></a>
            @foreach ($categories->take(7) as $category)
              <a class="sidebarCatTitle colorBlack hoverBlue paddingLR15 textDecorationNone {{ $data->slug == $category->slug ? 'active' : '' }}" aria-label="{{ $category->title }}"
                href="{{ route('frontend.category', $category->slug) }}"><strong>{{ $category->title }}</strong></a>
            @endforeach
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- header categories end -->


  <!-- desktop and mobile version start -->
  <div class="bgWHite">
    <div class="container">
      <div class="row">

        <!-- category header -->
        <div class="col-sm-12 col-md-12 marginB20 xs-marginB10 marginT10">
          <h1 class="desktopCategoryTitle"><span class="categoryLeftCart"></span> <a aria-label="{{ $data->title }}"
              href="{{ route('frontend.category', $data->slug) }}"><strong>{{ $data->title }} <i
                  class="fa fa-caret-right title1_8 verticalAlignMiddle"></i></strong></a></h1>
          <!-- subcategories -->
          @if($data->child->count() > 0)
          <div class="desktopSubCategoryDiv borderC1B1 paddingB5 marginB10">
            <ul>
              @foreach($data->child as $sub)
              <li><span class="categoryPageSubLeftCart"></span> <h2><a aria-label="{{ $sub->title }}" href="{{ url('/'.$sub->slug) }}">{{ $sub->title }}</a></h2></li>
              @endforeach
            </ul>
          </div>
          @endif
        </div>

        <div class="col-sm-9 col-md-9">
          @if ($posts->count() > 0)
          <!-- lead news -->
          @if(request()->get('page', 1) == 1)
          @php $leadPost = $posts->first(); @endphp
          <div class="row marginLR-10">
            <div class="col-sm-12 col-md-12 paddingLR10">
              <div class="row desktopFlexRow">
                <div class="col-sm-6 col-md-6 desktopSectionLead">
                  <div class="thumbnail marginB0 borderRadius0">
                    <div class="positionRelative paddingT0">
                      <img src="{{asset('assets/images/post/'.$leadPost->image_big)}}"
                        class="img-responsive borderRadius0"
                        alt="{{ $leadPost->title }}">
                    </div>
                    <a href="{{ route('frontend.postBySubcategory.details',[$leadPost->category->slug ?? '', $leadPost->slug])}}" class="linkOverlay"></a>
                  </div>
                </div>
                <div class="col-sm-6 col-md-6 desktopSectionLead">
                  <div class="thumbnail marginB0 borderRadius0 xs-text-center">
                    <div class="marginB10 xs-marginT20">
                      <h1 class="title8 marginT0 marginB0"><strong>{{ $leadPost->title }}</strong></h1>
                      <p class="desktopSummary marginB0">{!! strlen($leadPost->short_description) > 250 ? mb_substr($leadPost->short_description, 0, 250, "utf-8").'...' : $leadPost->short_description !!}</p>
                      <p class="desktopTime marginT10"><i class="fa fa-clock title1_4 color2 verticalAlignMiddle marginT1"></i> {{ $leadPost->createdAt() }}</p>
                    </div>
                    <a href="{{ route('frontend.postBySubcategory.details',[$leadPost->category->slug ?? '', $leadPost->slug])}}" class="linkOverlay"></a>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <p class="borderC1T1 marginB15 marginT15"></p>
          @endif

          <!-- 3 column news grid -->
          <div class="row marginLR-15 desktopFlexRow loadMoreCategoryNewsDesktop borderR3rdItemNone">
            @foreach (request()->get('page', 1) > 1 ? $posts : $posts->skip(1) as $post)
            <div class="col-md-4 col-xs-12 marginB20 xs-marginB15 paddingLR15 borderC1R1 desktopSectionLead">
              <div class="thumbnail h100P borderC1B1 borderRadius0">
                <div class="positionRelative">
                  <p class="marginT15 marginB13 positionAbsolute bottom0 marginL10"><span
                      class="categoryNameClass borderC1-1 bg9 colorWhite"><i class="fa fa-regular fa-tag"></i>
                      {{ $data->title }}</span></p>
                  <img src="{{asset('assets/images/post/'.$post->image_big)}}"
                    class="img-responsive borderRadius0"
                    alt="{{ strlen($post->title) > 100 ? mb_substr($post->title, 0, 100, 'utf-8').'...' : $post->title }}">
                </div>
                <div class="caption paddingLR0">
                  <h1 class="title11 colorBlack marginT10">{{ strlen($post->title) > 100 ? mb_substr($post->title, 0, 100, 'utf-8').'...' : $post->title }}</h1>
                  <p class="desktopTime"><i class="fa fa-clock title1_4 color2 verticalAlignMiddle marginT2"></i> {{ $post->createdAt() }}</p>
                </div>
              </div>
              <a href="{{ route('frontend.postBySubcategory.details',[$post->category->slug ?? '', $post->slug])}}" class="linkOverlay"></a>
            </div>
            @endforeach
          </div>

          <!-- load more -->
          <div class="text-center marginT20 marginB20">
            @if($posts->hasMorePages())
            <span data-page="2" class="loadMoreButton clickLoadMore">আরও পড়ুন <i class="fa fa-spinner loadingIcon" style="display: none;"></i></span>
            @endif
          </div>

          @else
          <div class="text-center padding20">
            <p class="colorBrand">{{__('This Category has no news.')}}</p>
          </div>
          @endif
        </div>

        <div class="col-sm-3 col-md-3 xs-marginT30">
          <!-- latest popular news -->
          <div class="row hidden-xs">
            <div class="col-sm-12 col-md-12 marginB20">
              @include('partial.front.sidebar-latest-popular')
            </div>
          </div>
          <!-- latest popular news end -->

          <!-- sidebar ads -->
          <div class="marginB20">
            {!!$gs->sidebar_ads!!}
          </div>
        </div>

      </div>
    </div>
  </div>
  <!-- desktop and mobile version end -->
</div>
<!-- main div end -->

@endsection

@section('scripts')
<script>
$(document).ready(function(){
	$('.clickLoadMore').click(function(){
		var btn = $(this);
		var page = btn.data('page');
		btn.find('.loadingIcon').show();
		var url = new URL(window.location.href);
		url.searchParams.set('page', page);
		$.get(url.toString(), function(response){
			var newItems = $(response).find('.loadMoreCategoryNewsDesktop').children();
			if(newItems.length > 0) {
				$('.loadMoreCategoryNewsDesktop').append(newItems);
				btn.data('page', parseInt(page) + 1);
			}
			var hasMore = $(response).find('.clickLoadMore').length > 0;
			if(!hasMore) {
				btn.hide();
			}
			btn.find('.loadingIcon').hide();
		});
	});
});
</script>
@endsection