@extends('frontend.layouts.master')
@section('styles')
@parent
@stop
@section('content')
<main>
  <section class="inner_banner">
    <div class="bg_ p_img">
      @if(!empty($banner))
      <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('media_banner_alt_keywords')}}">
      </picture>
      @else
      <picture>
        <source srcset="{{getFrontendAsset('images/news_banner.webp')}}" type="image/webp">
        <source srcset="{{getFrontendAsset('images/news_banner.jpg')}}" type="image/jpeg">
        <img src="{{getFrontendAsset('images/news_banner.jpg')}}" loading="lazy" alt="">
      </picture>
      @endif
    </div>

    <div class="container">
      <div class="page_title no_p_b">
        <div class="breadcrumb_wrap">
          <ul>
            <li>
              <a href="{{URL::to('/')}}" class="link_">
                {{lang('home')}}
              </a>
            </li>
            <li>
              <a href="{{route('media-center',$lang)}}" class="link_">
                {{lang('media_center')}}
              </a>
            </li>
            <li class="active_">
              <span>{{lang('videos')}}</span>
            </li>
          </ul>
        </div>
        <h1>
          <span>{!!lang('videos')!!}</span>
        </h1>
      </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($videoGallery) && $videoGallery->isNotEmpty())
      <div class="latest_news_wrap style_2 image_list " id="news-grid">
        
         @foreach($videoGallery->chunk(2) as $videoGalleryArr)
          <div class="news_row">
            @foreach($videoGalleryArr as $video)
            <div class="n_item ">
              <a href="{{youtubeEmbedUrlFromUrl($video->getData('video_link'))}}" data-fancybox="gallery" class="inner_ " >
                <div class="img_box p_img">
                     <picture>
                     <source srcset="{{webp($video->getData('video_banner'))}}" type="image/webp">
                  <source srcset="{{PP($video->getData('video_banner'))}}" type="image/{{FT($video->getData('video_banner'))}}">
                  <img src="{{PP($video->getData('video_banner'))}}" loading="lazy" alt="{{$video->getData('post_title')}}">
                      </picture>
                </div>
                <div class="content_box">
                      <div class="c_">
                        <div class="title">
                          <span>{{$video->getData('post_title')}}</span>
                        </div>
                        
                      </div>
                    </div>
               
               <!-- Icon-->
               <div class="icons_box">
                        <svg viewBox="0 0 155 155">
              <g transform="translate(-471 -6337)">
                  <path d="M20.03,6.055a4,4,0,0,1,6.941,0l16.6,28.956A4,4,0,0,1,40.1,41H6.9a4,4,0,0,1-3.47-5.989Z" transform="translate(578 6389) rotate(90)" fill="#fff"></path>
                  <g transform="translate(471 6337)" fill="none" stroke="#fff" stroke-width="2">
                  <circle cx="77.5" cy="77.5" r="77.5" stroke="none"></circle>
                  <circle cx="77.5" cy="77.5" r="76.5" fill="none"></circle>
                  </g>
              </g>
              </svg>       
             </div>
               <!-- Icon-->
              </a>
            </div>
            @endforeach
            <div class="place_"></div>
          </div>
         @endforeach
      </div>
      @if(!empty($videoGallery->nextPageUrl()))
            <div class="more_wrap">
              <a id="show-more" class="dir-btn" href="{{$videoGallery->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 () {
        $('.tool_wrap select').selectric({ disableOnMobile: false, nativeOnMobile: false });

    });
    $('#show-more').on('click',function(e){
        e.preventDefault();
        var url_ = $(this).attr('href');
        var data={};
        $('.aj_loader').addClass('show');
        sendAjax(url_,'GET',{},function(response){
          $('.aj_loader').removeClass('show');
          if(response.status)
          {
            $('#news-grid').append(response.list);
            $('#show-more').attr('href',response.moreLink);
            if(response.viewmore){
                $('.more_wrap').show();
            }else{
                $('.more_wrap').hide();
            } 
          }
        });	
    }); 

</script>
@stop