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

<!-- main div -->
<div class="mainDiv">
  <!-- 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" 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="ভিডিও"
              href="{{ url('/videos') }}"><strong>ভিডিও <i
                  class="fa fa-caret-right title1_8 verticalAlignMiddle"></i></strong></a></h1>
        </div>

        <div class="col-sm-9 col-md-9">
          @php
            $language_id = Session::has('language')
              ? Session::get('language')
              : DB::table('languages')->where('is_default', '=', 1)->first()->id;

            $videoPosts = DB::table('posts')
              ->where('is_videoGallery', 1)
              ->where('language_id', $language_id)
              ->orderBy('id', 'DESC')
              ->paginate(19);

            $leadPost = $videoPosts->first();
          @endphp

          @if($videoPosts->count() > 0)
          <!-- lead news -->
          @if($leadPost)
          <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="{{ strlen($leadPost->title) > 100 ? mb_substr($leadPost->title, 0, 100, 'utf-8').'...' : $leadPost->title }}">
                      <span class="fa fa-play pvIconMedium"></span>
                    </div>
                    @php $leadCat = DB::table('categories')->find($leadPost->category_id); @endphp
                    <a href="{{ route('frontend.postBySubcategory.details', [$leadCat->slug ?? 'videos', $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> {{ \Carbon\Carbon::parse($leadPost->created_at)->format('d M Y, h:i A') }}</p>
                    </div>
                    <a href="{{ route('frontend.postBySubcategory.details', [$leadCat->slug ?? 'videos', $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 ($videoPosts->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>
                      ভিডিও</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 }}">
                  <span class="fa fa-play pvIconLarge"></span>
                </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> {{ \Carbon\Carbon::parse($post->created_at)->format('d M Y, h:i A') }}</p>
                </div>
              </div>
              @php $postCat = DB::table('categories')->find($post->category_id); @endphp
              <a href="{{ route('frontend.postBySubcategory.details', [$postCat->slug ?? 'videos', $post->slug]) }}" class="linkOverlay"></a>
            </div>
            @endforeach
          </div>

          <!-- load more button -->
          <div class="text-center marginT20 marginB20">
            @if($videoPosts->hasMorePages())
            <span data-page="2" class="loadMoreButton clickLoadMore">আরও দেখুন <i class="fa fa-spinner loadingIcon" style="display: none;"></i></span>
            @endif
          </div>
          @else
          <div class="col-md-12">
            <div class="text-center padding20">
              <p class="colorBrand">{{ __('No Videos Available') }}</p>
            </div>
          </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 -->
        </div>

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

</div>
<!-- main div end -->

@endsection

@section('scripts')
<script>
$(document).ready(function(){
  // Load more
  $('.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();
    });
  });

  // Tab toggle
  $('.latestNav').click(function(){
    $('.latestCaret').show();
    $('.highestCaret').hide();
  });
  $('.highestNav').click(function(){
    $('.highestCaret').show();
    $('.latestCaret').hide();
  });
});
</script>
@endsection