@php
$words = \App\Models\PopularKeyword::query()->orderByRaw('pk_counts DESC, pk_id ASC')->limit(5)->get();

$articles = \App\Models\Article::withoutTrashed()
->orderByRaw('article_is_top DESC, DATE(article_begin_at) DESC, article_scan_count DESC')
->get(['article_tag']);

$tags = [];
foreach ($articles as $article) {
if (empty($article->article_tag)) continue;

$tags = array_unique(array_merge($tags, array_filter(json_decode($article->article_tag))));

if (count($tags) >= 5) {
$tags = array_slice($tags, 0, 5);

break;
}
}
@endphp

<!-- <h1 class="d-none">鄉親新聞網</h1> -->
<header class="header">
    <div class="header-container w-100">
        <a href="{{route('frontend.home')}}" class="site-logo ms-2 ms-lg-4 d-flex align-items-center">
            <img src="{{asset('images/logo.png')}}">
            <h3 class="ms-2 ms-lg-3" style="color: #F18D00; margin-top: 8px;">鄉親新聞網</h3>
        </a>
        <div class="site-nav">
            <ul class="menu">
                <!-- 平版、手機版選單搜尋按鈕 -->
                <li class="d-flex d-lg-none mobile-search nav-search-container">
                    <a href="javascript:void(0)" class="button-nav-search" data-search-collapse-button="mobile-search">搜索</a>
                </li>

                @foreach(\App\Models\ArticleCategory::categoryMap() as $category_name)
                <li><a href="{{route('frontend.article_list', ['article_category_name' => $category_name])}}">{{$category_name}}</a></li>
                @endforeach

                <!-- PC版搜尋 -->
                <li class="d-none d-lg-flex nav-search-container click-outside-close">
                    <a href="javascript:void(0)" class="button-nav-search" data-search-collapse-button="header-search">
                        <svg width="19" height="20" viewBox="0 0 19 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M16.8619 19.1466L14.1171 16.4019C12.3291 17.7384 10.1012 18.3482 7.88179 18.1084C5.66235 17.8686 3.6161 16.7971 2.1548 15.1095C0.693503 13.4219 -0.0743763 11.2435 0.00568595 9.01257C0.0857482 6.78165 1.00781 4.66385 2.58632 3.08534C4.16483 1.50683 6.28263 0.584772 8.51354 0.504709C10.7445 0.424647 12.9229 1.19253 14.6105 2.65382C16.2981 4.11512 17.3696 6.16137 17.6094 8.38081C17.8492 10.6002 17.2394 12.8281 15.9028 14.6161L18.6465 17.362C18.876 17.6001 19.003 17.9188 18.9999 18.2496C18.9969 18.5803 18.8642 18.8966 18.6303 19.1305C18.3965 19.3644 18.0801 19.4971 17.7494 19.5001C17.4187 19.5031 17.1 19.3762 16.8619 19.1466ZM2.51613 9.32456C2.51613 10.5727 2.88624 11.7928 3.57965 12.8305C4.27306 13.8683 5.25864 14.6771 6.41174 15.1547C7.56484 15.6324 8.83367 15.7573 10.0578 15.5138C11.2819 15.2704 12.4064 14.6693 13.2889 13.7868C14.1714 12.9042 14.7725 11.7798 15.016 10.5557C15.2595 9.33157 15.1345 8.06273 14.6569 6.90963C14.1792 5.75653 13.3704 4.77096 12.3326 4.07754C11.2949 3.38413 10.0748 3.01403 8.82667 3.01403C7.1536 3.01433 5.54913 3.67901 4.36598 4.86194C3.18283 6.04487 2.51787 7.64923 2.51727 9.3223L2.51613 9.32456Z" fill="#757575" />
                        </svg>
                    </a>
                    <div class="nav-search-box" data-search-collapse-content="header-search">
                        <form action="{{route('frontend.article_search')}}" method="GET">
                            <div class="search-field">
                                <input type="text" class="form-control" placeholder="搜索文章標題或關鍵字" name="search">
                                <button type="reset" class="button-reset">
                                    <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M7.50001 0C3.35785 0 0 3.35786 0 7.50003C0 11.6422 3.35785 15 7.5 15C11.6422 15 15 11.6422 15 7.50003C15 3.35786 11.6422 0 7.50003 0H7.50001ZM10.7163 9.74401C10.9848 10.0126 10.9848 10.4478 10.7163 10.7163C10.4478 10.9848 10.0125 10.9848 9.744 10.7163L7.50001 8.47234L5.25596 10.7163C4.98746 10.9848 4.55221 10.9848 4.28372 10.7163C4.01515 10.4478 4.01515 10.0126 4.28372 9.744L6.52769 7.50003L4.28371 5.25603C4.01515 4.98755 4.01515 4.55221 4.28371 4.28372C4.55221 4.01524 4.98746 4.01524 5.25594 4.28372L7.50001 6.52771L9.744 4.28372C10.0125 4.01524 10.4478 4.01524 10.7163 4.28372C10.9848 4.55221 10.9848 4.98755 10.7163 5.25603L8.47232 7.50003L10.7163 9.74401Z" fill="#DCD9D8" fill-opacity="0.5" />
                                    </svg>
                                </button>
                                <button type="submit" class="button-submit">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="#216AAF" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                                        <circle cx="11" cy="11" r="8"></circle>
                                        <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
                                    </svg>
                                </button>
                            </div>

                            <!-- 熱門文章檢索 -->
                            <div class="search-suggestion">
                                <div class="text-muted fs-12 mb-2">熱門文章檢索</div>
                                <div class="suggestion-pool">
                                    @foreach($tags as $tag)
                                    <a href="{{route('frontend.article_search', ['search' => "#{$tag}"])}}" class="suggestion-item"># {{$tag}}</a>
                                    @endforeach
                                </div>
                            </div>


                            <!-- 關鍵詞建議 -->
                            <div class="search-keywords">
                                <div class="search-keywords-pool">
                                    @foreach($words as $word)
                                    <a href="{{route('frontend.article_search', ['search' => $word->pk_word])}}" class="keyword-item"><span class="text-danger">{{$word->pk_word}}</span></a>
                                    @endforeach
                                </div>
                                <a href="{{route('frontend.article_search')}}" class="d-block text-center button-result mt-3">查看全部搜索結果</a>
                            </div>

                        </form>
                    </div>
                </li>
            </ul>
            <a href="{{route('frontend.contact')}}" class="highlight">聯絡我們</a>
        </div>
        <a href="javascript:void(0)" id="mobile-toggle" class="mobile-toggle me-3">
            <span></span>
            <span></span>
            <span></span>
        </a>
    </div>

    <!-- 平版、手機版選單搜尋畫面 -->
    <div class="nav-search-box mobile-search-box" data-search-collapse-content="mobile-search">
        <form action="">
            <div class="mobile-search-group">
                <div class="search-field">
                    <input type="text" class="form-control" placeholder="搜索文章標題或關鍵字">
                    <button type="reset" class="button-reset">
                        <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M7.50001 0C3.35785 0 0 3.35786 0 7.50003C0 11.6422 3.35785 15 7.5 15C11.6422 15 15 11.6422 15 7.50003C15 3.35786 11.6422 0 7.50003 0H7.50001ZM10.7163 9.74401C10.9848 10.0126 10.9848 10.4478 10.7163 10.7163C10.4478 10.9848 10.0125 10.9848 9.744 10.7163L7.50001 8.47234L5.25596 10.7163C4.98746 10.9848 4.55221 10.9848 4.28372 10.7163C4.01515 10.4478 4.01515 10.0126 4.28372 9.744L6.52769 7.50003L4.28371 5.25603C4.01515 4.98755 4.01515 4.55221 4.28371 4.28372C4.55221 4.01524 4.98746 4.01524 5.25594 4.28372L7.50001 6.52771L9.744 4.28372C10.0125 4.01524 10.4478 4.01524 10.7163 4.28372C10.9848 4.55221 10.9848 4.98755 10.7163 5.25603L8.47232 7.50003L10.7163 9.74401Z" fill="#DCD9D8" fill-opacity="0.5" />
                        </svg>
                    </button>
                    <button type="submit" class="button-submit">
                        <svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="#216AAF" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                            <circle cx="11" cy="11" r="8"></circle>
                            <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
                        </svg>
                    </button>
                </div>

                <a href="javascript:void(0)" class="button-close">
                    <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M27 5.41714L24.5829 3L15 12.5829L5.41714 3L3 5.41714L12.5829 15L3 24.5829L5.41714 27L15 17.4171L24.5829 27L27 24.5829L17.4171 15L27 5.41714Z" fill="#757575" />
                    </svg>
                </a>

            </div>

            <!-- 熱門文章檢索 -->
            <div class="search-suggestion">
                <div class="text-muted fs-12 mb-2">熱門文章檢索</div>
                <div class="suggestion-pool">
                    @foreach($tags as $tag)
                    <a href="" class="suggestion-item"># {{$tag}}</a>
                    @endforeach
                </div>
            </div>


            <!-- 關鍵詞建議 -->
            <div class="search-keywords">
                <div class="search-keywords-pool">
                    @foreach($words as $word)
                    <a href="{{route('frontend.article_search', ['search' => $word->pk_word])}}" class="keyword-item"><span class="text-danger">{{$word->pk_word}}</span></a>
                    @endforeach
                </div>
                <a href="{{route('frontend.article_search')}}" class="d-block text-center button-result mt-3">查看全部搜索結果</a>
            </div>

        </form>
    </div>
</header>