@extends('layouts.pages')

@section('content')
<div id="app">
    <div class="container">
        <div class="row">
            <div class="col-md-12 col-sm-12 col-xs-12">
                <h1>{{$subSetting['title']}}</h1>
                <!-- below_title -->
                <ins class="adsbygoogle"
                    style="display:block"
                    data-ad-client="ca-pub-5037437173755200"
                    data-ad-slot="9211713794"
                    data-ad-format="auto"
                    data-full-width-responsive="true"></ins>
                <script>
                    (adsbygoogle = window.adsbygoogle || []).push({});
                </script>
                <ol class="breadcrumb" itemscope itemtype="http://schema.org/BreadcrumbList">
                    <li class="breadcrumb-item" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
                        <a itemprop="item" href="/">
                            <span itemprop="name">{{$subSetting['meta']['seotitle']}}</span></a>/
                        <meta itemprop="position" content="1" />
                    </li>
                </ol>
                @if(!empty($allPosts))
                    <div class="row justify-content-between">
                                                @foreach($allPosts as $key=>$posts)
                            <div class='col-md-4 eshome-area'>
                                <a href="/tag/{{$key}}"><h2>{{$mainKeywords[$key]}}</h2></a>
                                <hr>
                                <div class="icon-area"><a class="icon-link" href="/video/{{$key}}"><i class="icon fab fa-youtube"></i>{{$mainKeywords[$key]}}影片</a></div>
                                <div class="icon-area"><a class="icon-link" href="/image/{{$key}}"><i class="icon fas fa-images"></i>{{$mainKeywords[$key]}}照片</a></div>
                                @if(!empty($posts))
                                                                    @foreach($posts as $post)
                                                                                        @if($cnt <= 5)
                                                <div class="eshome-block d-flex">
                                                    <div class="fb-profile-img">
                                                        <a class="" href="/article/{{$key}}">
                                                            <img src="https://graph.facebook.com/{{$post->_data->user_id}}/picture?type=small" alt="">
                                                        </a>
                                                    </div>
                                                    <div class="post-title">
                                                        <h3 class=""><a href="/article/{{$key}}">{!!mb_substr(preg_replace("/[\n\r]+/", '', $post->_data->message),0,20,"utf-8")!!}</a></h6>
                                                        <div class="">
                                                            <span class="publish-time">{{date('Y-m-d H:i:s', strtotime($post->_data->publish_time))}}</span>
                                                            <span class="like-count">有 {{$post->_data->like_count}} 人說讚</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endif
                                    @endforeach
                                @endif
                            </div>
                            @if($cntContent == 2 || $cntContent == 5)
                                <div class="col-md-12">
                                    <!-- es_home -->
                                    <ins class="adsbygoogle"
                                        style="display:block"
                                        data-ad-client="ca-pub-5037437173755200"
                                        data-ad-slot="9318443435"
                                        data-ad-format="auto"
                                        data-full-width-responsive="true"></ins>
                                    <script>
                                        (adsbygoogle = window.adsbygoogle || []).push({});
                                    </script>
                                </div>
                            @endif
                                                    @endforeach
                    </div>
                @endif
                <div class="pagnation">
                    {{ $mainKeywords->links() }}
                </div>
            </div>
        </div>
    </div>
</div>
{{ csrf_field() }}
@endsection


@push('stylesheet')
@endpush
@push('scripts')
<script defer defer src="https://connect.facebook.net/zh_TW/sdk.js#xfbml=1&version=v3.2"></script>
<script defer src="//www.instagram.com/embed.js"></script>
<script type="text/javascript" src="/jquery.min.js"></script>
<script type="text/javascript" src="/jquery.lazy.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$("img.lazy").Lazy();
});
$(window).ready(function() {
var setPopupBottom=function(){
  var setAdBlock = '',
  isMobile = true,
  adPopupBottomGAD = '<ins class="adsbygoogle" style="display:inline-block; width:800px; height:250px;" data-ad-client="ca-pub-5037437173755200" data-ad-slot="8947621692"></ins>';
  if(isMobile) {
    setAdBlock='<div class="popup_bottom_block"><div class="popup_bottom_ad"><div class="popup_bottom_ad_close">&nbsp;關閉廣告[X]&nbsp;</div>'+adPopupBottomGAD+'</div></div>' ;
    $('body').append(setAdBlock);
    var isClosePopupBootom=false;
    var closetime=4000;
    var setTimeoutId=null;
    var scrolling=false;
    $(window).on('scroll',function(){
      scrolling=true;
      if(!!setTimeoutId){
        clearTimeout(setTimeoutId);
      }
      setTimeoutId=setTimeout(function(){
        scrolling=false;
      },closetime);
    });
    setInterval(function(){
      $('.popup_bottom_block')[ scrolling && !isClosePopupBootom ? 'addClass' : 'removeClass']('active');
      $('.popup_bottom_ad_close')[scrolling&&!isClosePopupBootom?'addClass':'removeClass']('active');},300);
      $('.popup_bottom_ad_close').on('click',function(){isClosePopupBootom=true;
      $('.popup_bottom_block ins').remove();
    });
    if(!isClosePopupBootom)(adsbygoogle=window.adsbygoogle||[]).push({});
  }}
  setPopupBottom();
});

</script>
@endpush