@extends('layouts.ssipages')

@section('content')
<div id="app">
    <div class="container">
        <div >
            <div class="exit-area">
                 @if(!empty($relateKeyWords))
                    <div class="questionHeader-tags">
                        <div class="template-tab">
                                                @foreach($relateKeyWords as $kid=>$keyword)
                                                        @if($count < 10)
                                <span>
                                    <a href="/article/{{$kid}}" class="tags btn">#{{$keyword}}</a>
                                </span>
                            @endif
                        @endforeach
                        </div>
                    </div>
                @endif
                <div class="site-section__header">
                    <h1 class="entry-title">{{ $title }}</h1>
                </div>
                <ol class="bread-area" 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>
                    <li class="breadcrumb-item" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
                        <a itemprop="item" href="/article/{{$keywordInfo->id}}">
                        <span itemprop="name">{{$keywordTitle}}</span></a>
                        <meta itemprop="position" content="2" />
                    </li>
                    <li class="breadcrumb-item" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
                        <a itemprop="item" href="/exit/{{$id}}"><span itemprop="name">離開本站</span></a>
                        <meta itemprop="position" content="3" />
                    </li>
                </ol>
                <div class="exit-content">
                     <p>查詢多篇網路文章後，發現{{$keywordInfo->keyword}}最有用的網路相關文章是{{$info->title}}，在文章一開頭就說到{{mb_substr(preg_replace('/\s+/','',$info->description),0,50,"utf-8")}}...還有更多文章內容可以到{{parse_url($info->url, PHP_URL_HOST)}}一探究竟</p>
                     
                     <h3 class="center">您即將離開本網站</h3>
                     <div class="exitarea">
                        <div class="item">
                            <p>並前往<a rel="nofollow" class="exit-url" target="_blank" href="{{$info->url}}">{{$info->url}}</a></p>
                            <div class="exit-btnarea">
                                <a rel="nofollow" target="_blank" href="{{$info->url}}" class="btn">確認離開</a>
                                @if(!empty(request()->headers->get('referer')))
                                    <a href="{{request()->headers->get('referer')}}" class="btn">返回上頁</a>
                                @else
                                    <a href="/article/{{$keywordInfo->id}}" class="btn">返回上層</a>
                                @endif
                            </div>
                        </div>
                     </div>


                </div>
            </div>
            <div class="exit-more-area">
                <h4>相關文章</h4>
                <div class="keyword-data-area">
                    <ul>
                        @if(!empty($relatePosts))
                            @foreach($relatePosts as $relate)
                                <li>
                                    <i class="fa-solid fa-circle-check"></i>
                                    <a class="relate-article" href='/exit/{{$relate->id}}'>{{$relate->title}}</a>
                                </li>
                            @endforeach
                        @endif
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
{{ csrf_field() }}
@endsection


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

@endpush