@extends('index')

@section('share-image')
    <!-- Canonical：文章正本網址 -->
    <link rel="canonical" href="{{url()->current()}}" />

    <meta property="fb:app_id" content="512020754375970" />
    <meta property="og:url" content="{{url()->current()}}" />
    <meta property="og:type" content="website" />
    <meta property="og:title" content="{{$article->article_title}}" />
    <meta property="og:description" content="{{$article->article_summary}}" />
    <meta property="og:image" content="{{asset('storage/' . $article->article_image)}}" />

    <!-- 結構化資料 Schema.org (NewsArticle) -->
    <script type="application/ld+json">
        {
          "@context": "https://schema.org",
          "@type": "NewsArticle",
          "mainEntityOfPage": {
            "@type": "WebPage",
            "@id": "{{url()->current()}}"
          },
          "headline": "{{$article->article_title}}",
          "description": "{{$article->article_summary}}",
          "image": ["https://shiangchin.com/storage/your-image.jpg"],
          "datePublished": "2025-07-22T10:00:00+08:00",
          "dateModified": "2025-07-22T10:00:00+08:00",
          "author": {
            "@type": "Person",
            "name": "鄉親新聞網記者"
          },
          "publisher": {
            "@type": "Organization",
            "name": "鄉親新聞網",
            "logo": {
              "@type": "ImageObject",
              "url": "https://shiangchin.com/images/logo.png"
            }
          }
        }
    </script>
@endsection

@section('title', $article->article_title)
@section('meta_description', $article->article_summary)

@section('custom-css')
<style>
    table {
        border: 2px solid;
    }

    table th,
    td {
        border: 1px solid black;
    }

    .article-content a {
        color: blue;
    }

    @media print {
        body * {
            visibility: hidden;
            /* 先隱藏整頁內容 */
        }

        #float-start,
        #article-info,
        #article-info *,
        #article-content,
        #article-content * {
            visibility: visible;
            /* 顯示目標區塊與內部元素 */
        }

        #float-start {
            position: absolute;
            top: 0;
            left: 50px;
            width: 100%;
            margin-top: 60px;
            padding-right: 150px;
        }

        #article-info {
            position: absolute;
            top: 0;
            left: 50px;
            width: 100%;
            margin-top: 215px;
            padding-right: 150px;
        }

        #article-content {
            position: absolute;
            top: 0;
            left: 50px;
            width: 100%;
            margin-top: 265px;
            padding-right: 150px;
        }
    }
</style>
@endsection

@section('content')
<!-- breadcrumb -->
<div class="container pt-5">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb mb-0">
            <li class="breadcrumb-item"><a href="{{route('frontend.home')}}">首頁</a></li>
            <li class="breadcrumb-item active" aria-current="page">{{$category_item[$article->article_category_id]}}</li>
        </ol>
    </nav>
</div>


<!-- 文章內容 -->
<section class="section overflow-visible pb-4 pb-lg-0">
    <div class="container">
        <div class="row">
            <div class="col-lg-7 pe-lg-0">
                <h1 id="float-start" class="article-title">{{$article->article_title}}</h1>
                <div class="article-bar">
                    <div class="article-tags">
                        @if (json_decode($article->article_tag))
                        @foreach(array_filter(json_decode($article->article_tag)) as $tag)
                        <a href="{{route('frontend.article_search', ['search' => "#{$tag}"])}}" class="tag"># {{$tag}}</a>
                        @endforeach
                        @endif
                    </div>
                    <div class="article-share">
                        <a href="javascript:void(0)" class="item facebook facebook-share" target="_blank">
                            <img src="{{asset('images/icons/facebook-w.svg')}}">
                            <span>分享</span>
                        </a>
                        <a href="javascript:void(0)" class="item line line-share" target="_blank">
                            <img src="{{asset('images/icons/line-w.svg')}}">
                            <span>分享</span>
                        </a>
                    </div>
                </div>

                <div id="article-info" class="d-flex align-items-center justify-content-between mb-4">
                    <div class="article-date">{{date_format($article->article_begin_at, 'Y-m-d')}}</div>
                    <div class="d-flex align-items-center text-muted">
                        <button onclick="window.print()" style="border: none; background: none; cursor: pointer; display: flex; align-items: center; gap: 8px;
                                        margin-top: 2px; margin-right: 3px; font: inherit; color: inherit;">
                            <img src="{{asset('images/icons/print-icon.png')}}" alt="列印" style="width: 20px; height: 20px;" />
                            列印
                        </button>

                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
                            <path d="M12 15a3 3 0 100-6 3 3 0 000 6z"></path>
                            <path fill-rule="evenodd" d="M1.323 11.447C2.811 6.976 7.028 3.75 12.001 3.75c4.97 0 9.185 3.223 10.675 7.69.12.362.12.752 0 1.113-1.487 4.471-5.705 7.697-10.677 7.697-4.97 0-9.186-3.223-10.675-7.69a1.762 1.762 0 010-1.113zM17.25 12a5.25 5.25 0 11-10.5 0 5.25 5.25 0 0110.5 0z" clip-rule="evenodd"></path>
                        </svg>
                        <span class="ms-1">{{$article->article_scan_count}}</span>
                    </div>
                </div>

                <div id="article-content" class="article-content mb-5">
                    <img src="{{asset('storage/' . $article->article_image)}}" class="img-fluid mb-2">
                    <p class="mb-3">{{ $article->article_summary }}</p>
                    {!! $article->article_content !!}
                </div>

                <!-- 浮動分享 -->
                <div class="floats-btns">
                    <a href="" class="btn-item facebook facebook-share" target="_blank">
                        <img src="{{asset('images/icons/facebook-blue.svg')}}">
                        <span>分享臉書</span>
                    </a>
                    <a href="" class="btn-item line line-share" target="_blank">
                        <img src="{{asset('images/icons/line-green.svg')}}">
                        <span>分享Line</span>
                    </a>
                </div>

                <div id="float-end" class="article-bar">
                    <div class="article-tags">
                        @if (json_decode($article->article_tag))
                        @foreach(array_filter(json_decode($article->article_tag)) as $tag)
                        <a href="{{route('frontend.article_search', ['search' => "#{$tag}"])}}" class="tag"># {{$tag}}</a>
                        @endforeach
                        @endif
                    </div>
                    <div class="article-share">
                        <a href="javascript:void(0)" class="item facebook facebook-share" target="_blank">
                            <img src="{{asset('images/icons/facebook-w.svg')}}">
                            <span>分享</span>
                        </a>
                        <a href="javascript:void(0)" class="item line line-share" target="_blank">
                            <img src="{{asset('images/icons/line-w.svg')}}">
                            <span>分享</span>
                        </a>
                    </div>
                </div>
                @if($prev_article)
                    <a alt="{{$prev_article->article_title}}" title="{{$prev_article->article_title}}" href="{{route('frontend.article_show', ['article_category_id' => $prev_article->article_category_id, 'article_title' => $prev_article->article_title])}}" class="image-box"></a>
                @endif
                @if($next_article)
                    <a alt="{{$next_article->article_title}}" title="{{$next_article->article_title}}" href="{{route('frontend.article_show', ['article_category_id' => $next_article->article_category_id, 'article_title' => $next_article->article_title])}}" class="image-box"></a>
                @endif
            </div>
            <div class="col-lg-1 px-lg-0 article-divider d-none d-lg-block">
                <div class="divider-vertical"></div>
            </div>
            <div class="col-lg-4 ps-lg-0 related-articles d-none d-lg-block">
                <h3 class="block-title">相關文章</h3>
                <div class="sidebar-listing">
                    @foreach($most_scan_articles as $article)
                    <div class="image-card">
                        <a alt="{{$article->article_title}}" title="{{$article->article_title}}" href="{{route('frontend.article_show', ['article_category_id' => $article->article_category_id, 'article_title' => $article->article_title])}}" class="image-box">
                            <span class="image-box-outer ratio-16-9">
                                <span class="image-box-inner">
                                    <img src="{{asset('storage/' . $article->article_image)}}" class="object-fit-contain img-fluid">
                                </span>
                            </span>
                        </a>
                        <h4 class="image-card__caption">
                            <a alt="{{$article->article_title}}" title="{{$article->article_title}}" href="{{route('frontend.article_show', ['article_category_id' => $article->article_category_id, 'article_title' => $article->article_title])}}" class="ellipsis ellipsis-line-3">
                                {{$article->article_title}}
                            </a>
                        </h4>
                        <div class="image-card__footer">
                            <div class="text-muted">{{date_format($article->article_begin_at, 'Y-m-d')}}</div>
                            <div class="d-flex align-items-center text-muted">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
                                    <path d="M12 15a3 3 0 100-6 3 3 0 000 6z" />
                                    <path fill-rule="evenodd" d="M1.323 11.447C2.811 6.976 7.028 3.75 12.001 3.75c4.97 0 9.185 3.223 10.675 7.69.12.362.12.752 0 1.113-1.487 4.471-5.705 7.697-10.677 7.697-4.97 0-9.186-3.223-10.675-7.69a1.762 1.762 0 010-1.113zM17.25 12a5.25 5.25 0 11-10.5 0 5.25 5.25 0 0110.5 0z" clip-rule="evenodd" />
                                </svg>
                                <span class="ms-1">{{$article->article_scan_count}}</span>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</section>


<!-- 閱讀更多 -->
<section class="section bg-color-gray border-bottom">
    <div class="container pb-5">
        <div class="section-header">
            <h2 class="section-heading fw-bold text-center">閱讀更多</h2>
        </div>
        <div class="row listing">
            @foreach($same_category_articles as $article)
            <div class="col-lg-6 list-item">
                <div class="image-card--h">
                    <div class="inner-content">
                        <h4 class="image-card__caption mt-0 mb-1">
                            <a alt="{{$article->article_title}}" title="{{$article->article_title}}" href="{{route('frontend.article_show', ['article_category_id' => $article->article_category_id, 'article_title' => $article->article_title])}}" class="ellipsis ellipsis-line-3">
                                {{$article->article_title}}
                            </a>
                        </h4>
                        <p class="image-card__summary mb-1">{{$article->article_summary}}</p>
                        <div class="image-card__footer">
                            <div class="text-muted">{{date_format($article->article_begin_at, 'Y-m-d')}}</div>
                            <div class="d-flex align-items-center text-muted">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
                                    <path d="M12 15a3 3 0 100-6 3 3 0 000 6z" />
                                    <path fill-rule="evenodd" d="M1.323 11.447C2.811 6.976 7.028 3.75 12.001 3.75c4.97 0 9.185 3.223 10.675 7.69.12.362.12.752 0 1.113-1.487 4.471-5.705 7.697-10.677 7.697-4.97 0-9.186-3.223-10.675-7.69a1.762 1.762 0 010-1.113zM17.25 12a5.25 5.25 0 11-10.5 0 5.25 5.25 0 0110.5 0z" clip-rule="evenodd" />
                                </svg>
                                <span class="ms-1">{{$article->article_scan_count}}</span>
                            </div>
                        </div>
                    </div>
                    <a alt="{{$article->article_title}}" title="{{$article->article_title}}" href="{{route('frontend.article_show', ['article_category_id' => $article->article_category_id, 'article_title' => $article->article_title])}}" class="image-box">
                        <span class="image-box-outer ratio-16-9">
                            <span class="image-box-inner">
                                <img src="{{asset('storage/' . $article->article_image)}}" class="object-fit-contain img-fluid">
                            </span>
                        </span>
                    </a>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section>

<script>
    $(document).ready(function() {
        let currentUrl = window.location.href;
        // facebook
        $('.facebook-share').attr('href', `http://www.facebook.com/share.php?u=${currentUrl}`);
        // line
        $('.line-share').attr('href', `https://social-plugins.line.me/lineit/share?url=${currentUrl}`);

        const links = document.querySelectorAll('.article-content a');
        links.forEach(el => {
            let href = el.getAttribute('href');

            if (href.substr(0, 17) === 'https://youtu.be/' && href.length === 28) {
                el.parentElement.setAttribute('style', 'position: relative; height: 0; padding-bottom: 56.25%;');
                el.parentElement.innerHTML = `<iframe style="width: 85%; height: 85%; position: absolute;" src="https://www.youtube.com/embed/${href.substr(17, 28)}"></iframe>`;
            }
        });
    });

    // function handlePrint() {
    //     window.print();
    // }
</script>
@endsection