@extends('layouts.spages')

@section('content')
<div id="app">
    <div class="container box">
        <div class="">
            <div class="">
                <div class="ques-title-box">
                    <h1 class="ques-title">QA問答網-蒐集各式常見網路問答快速解答</h1>
                    <img src="https://i.imgur.com/WDhVYJf.png"  alt="QA問答網">
                </div>
                @if(!empty($superSearchHomepage))
                    <div class="">
                        @foreach($superSearchHomepage as $key=>$keyPrint)
                            <div class='eshome-area'>
                                <div class="section-head">
                                    <a href="/keyprint/{{$key}}">
                                        <h2 class="entry-title">{{$keyPrint['keyPrintName']}}-相關問題</h2>
                                    </a>
                                </div>
                                <div class="content">
                                @if(!empty($keyPrint['article']))
                                    @foreach($keyPrint['article'] as $article)
                                    <div class="col-12 col-lg-6">
                                        <div class="cause-wrap">
                                            <div class="item" >
                                                <img src="https://picsum.photos/seed/urtag{{$article['keywordId']}}/300/200?blur=2" alt="{{$article['keyword']}}">
                                            </div>
                                            <div class="cause-content-wrap">
                                                <h3 class="entry-title w-100 m-0">
                                                    <a href="/article/{{$article['keywordId']}}" >{{$article['title']}} </a>
                                                </h3>
                                                <p class="entry-content">{{mb_substr($article['description'],0,200,"utf-8")}}...</p>
                                                <div class="entry-footer mt-5">
                                                    <a href="/article/{{$article['keywordId']}}" class="btn gradient-bg mr-2">立即找答案</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    @endforeach
                                @endif
                                </div>
                            </div>
                        @endforeach
                    </div>
                @endif
            </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