@extends('layouts.pages')

@section('content')
<div id="app">
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-sm-12 post-area col-xs-12">
                <h1>{{ $title }}</h1>
                <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">首頁</span></a>
                        <meta itemprop="position" content="1" />
                    </li>
                                        @if(!empty($sortedParentKeywords))
                        @foreach($sortedParentKeywords as $oneParent)
                            <li class="breadcrumb-item" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
                                <a itemprop="item" href="/look/{{$oneParent['id']}}">
                                <span itemprop="name">{{$oneParent['keyword']}}</span></a>
                                <meta itemprop="position" content="{{$contentLevel}}" />
                            </li>
                                                    @endforeach
                    @endif
                    <li class="breadcrumb-item" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
                        <a itemprop="item" href="/look/{{$keywordInfo->id}}">
                        <span itemprop="name">{{$keywordInfo->keyword}}</span></a>
                        <meta itemprop="position" content="{{$contentLevel}}" />
                    </li>
                    <li class="breadcrumb-item" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
                        <a itemprop="item" href="/post/{{$id}}">
                        <span itemprop="name">{{$title}}</span></a>
                        <meta itemprop="position" content="{{$contentLevel+1}}" />
                    </li>
                </ol>
                <p><i class="fa fa-calendar"></i><time itemprop="datePublished" datetime="{!!date('Y-m-d H:i:s',strtotime($info->created_at))!!}">發布日期：{!!date("Y年m月d日",strtotime($info->created_at))!!}</time></p>
                <p><i class="fa fa-calendar"></i><time itemprop="dateModified" datetime="{!!date('Y-m-d H:i:s',strtotime($info->updated_at))!!}">上次更新日期：{!!date("Y年m月d日",strtotime($info->updated_at))!!}</time></p>
                <div id="fb-root"></div>
                <script async defer src="https://connect.facebook.net/zh_TW/sdk.js#xfbml=1&version=v3.2"></script>
                @if(!empty($postContents['fb']))
                    @foreach($postContents['fb'] as $one)
                    <p class="post-content">{!!preg_replace("/[\n\r]+/", '<br/>', $one['message'])!!}</p>

                        <figure class="op-interactive fbWrapper">
                        <div class="fb-post"
                            data-href="{{$one['url']}}"
                            data-width="500">
                        </div>

                        </figure>
                    @endforeach
                @endif
                @if(!empty($postContents['ig']))
                @foreach($postContents['ig'] as $one)
                    @if(!empty(json_decode($one['edge_media_to_caption'])->edges[0]->node->text))
                    <p class="post-content">{!!preg_replace("/[\n\r]+/", '<br/>', json_decode($one['edge_media_to_caption'])->edges[0]->node->text)!!}</p>
                    @endif
                                        <figure class="op-interactive">
                        <blockquote class="instagram-media" data-instgrm-permalink="{{$iglink}}" data-instgrm-version="13" style=" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:540px; min-width:326px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);">
                        </blockquote>
                    </figure>
                    @endforeach
                @endif
                <script async src="//www.instagram.com/embed.js"></script>
                @if(!empty($postContents['yt']))
                @foreach($postContents['yt'] as $one)
                    <h2>{{$one['title']}}</h2>
                    <p class="post-content">{{mb_substr($one['description'],0,400,"utf-8")}}...</p>
                    <figure class="videoWrapper op-interactive">
                        <iframe width="560" height="315" src="https://www.youtube.com/embed/{{$one['video_id']}}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                    </figure>
                @endforeach
                @endif
            </div>
            <div class="col-md-4 col-sm-12 col-xs-12">
                @if(!empty($relateKeyWords))
                <div class="tags-area">
                    <h4>關鍵字</h4>
                    @foreach($relateKeyWords as $kid=>$keyword)
                        <span><a href="/look/{{$kid}}" class="tags">#{{$keyword}}</a></span>
                    @endforeach
                </div>
                @endif
                @if(!empty($relatePosts))
                <div class="tags-area">
                    <h4>相關文章</h4>
                    <ul>
                        @foreach($relatePosts as $relate)
                        <li><a class="relate-article" href='/post/{{$relate->id}}' taget='_blank'><p>{{$relate->title}}</p></a></li>
                        @endforeach
                    </ul>
                </div>
                @endif
                @if(!empty($keywordData) && $keywordData->count() > 0)
                <div class="keyword-data-area">
                    <h4>搜尋相關結果都幫你找好了</h4>
                    @foreach($keywordData as $oneData)
                        <div class="each">
                            @if(!empty($oneData->result))
                                <a href="/result/{{$oneData->id}}">
                            @endif
                                <h3>{{$oneData->title}}</h3>
                            @if(!empty($oneData->result))
                                </a>
                            @endif
                            @if(!empty($oneData->result))
                                <a class="keyword-data-url" href="/result/{{$oneData->id}}">{{mb_substr(urldecode($oneData->url),0,80,"utf-8")}}...</a>
                            @else
                                <a class="keyword-data-url" rel="nofollow" target="_blank" href="{{$oneData->url}}">{{mb_substr(urldecode($oneData->url),0,80,"utf-8")}}...</a>
                            @endif
                            <p>{{$oneData->description}}</p>
                        </div>
                    @endforeach
                </div>
                @endif
            </div>
        </div>
    </div>
</div>
{{ csrf_field() }}
@endsection


@push('stylesheet')
@endpush
@push('scripts')
@endpush