@extends('index')

@section('meta')
    <meta name="robots" content="noindex, nofollow">
@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">搜索</li>
        </ol>
    </nav>
</div>

<!-- 文章列表 -->
<section class="section search-listing">
    <div class="row">
        <div class="col-lg-6 mx-auto">
            <div class="search-field container">
                <form action="{{route('frontend.article_search')}}" method="GET">
                    <input type="text" class="form-control search-input" 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>
                </form>
            </div>
        </div>
    </div>

    <div class="tab-container">
        <div class="tabs-nav-container container">
            <div class="row">
                <div class="col-lg-6 mx-auto tabs-nav">
                    <a href="{{route('frontend.article_search', ['search' => $search])}}" class="@empty($category_id) active @endempty" data-tab="all">全部</a>
                    @foreach($category_item as $category_name => $row_category_id)
                    <a href="{{route('frontend.article_search', ['search' => $search, 'category_id' => $row_category_id])}}" class="@if($category_id == $row_category_id) active @endif" data-tab="startup">{{$category_name}}</a>
                    @endforeach
                </div>
            </div>
        </div>
        <hr class="pt-0 mt-0">

        <div class="tab-content">
            <div class="container">
                <!-- 數量&排序 -->
                <div class="d-flex justify-content-between mt-custom mb-custom">
                    <div>
                        搜尋到 {{$articles->total()}} 篇相關文章
                    </div>
                    <div class="listing-order">
                        <div class="dropdown">
                            <a class="btn dropdown-toggle" href="javascript:void(0)" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                                <span class="me-0 me-lg-2">排序 <span class="d-none d-lg-inline">:</span></span>
                                <span class="d-none d-lg-block">
                                    @if($sortParm == 'scan' && $sortOrder == 'DESC')
                                    按瀏覽量高到低
                                    @elseif($sortParm == 'scan' && $sortOrder == 'ASC')
                                    按瀏覽量低到高
                                    @elseif($sortParm == 'new' && $sortOrder == 'DESC')
                                    按上架時間新到舊
                                    @elseif($sortParm == 'new' && $sortOrder == 'ASC')
                                    按上架時間舊到新
                                    @else
                                    按上架時間新到舊
                                    @endif
                                </span>
                            </a>

                            <ul class="dropdown-menu dropdown-menu-end">
                                <li><a class="dropdown-item @if($sortParm == 'new' && $sortOrder == 'DESC') disabled active @endif" href="{{route('frontend.article_search', ['search' => $search, 'category_id' => $category_id, 'sortParm' => 'new', 'sortOrder' => 'DESC'])}}">按上架時間新到舊</a></li>
                                <li><a class="dropdown-item @if($sortParm == 'new' && $sortOrder == 'ASC') disabled active @endif" href="{{route('frontend.article_search', ['search' => $search, 'category_id' => $category_id, 'sortParm' => 'new', 'sortOrder' => 'ASC'])}}">按上架時間舊到新</a></li>
                                <li><a class="dropdown-item @if($sortParm == 'scan' && $sortOrder == 'DESC') disabled active @endif" href="{{route('frontend.article_search', ['search' => $search, 'category_id' => $category_id, 'sortParm' => 'scan', 'sortOrder' => 'DESC'])}}">按瀏覽量高到低</a></li>
                                <li><a class="dropdown-item @if($sortParm == 'scan' && $sortOrder == 'ASC') disabled active @endif" href="{{route('frontend.article_search', ['search' => $search, 'category_id' => $category_id, 'sortParm' => 'scan', 'sortOrder' => 'ASC'])}}">按瀏覽量低到高</a></li>
                            </ul>
                        </div>
                    </div>
                </div>

                @empty($articles->total())
                <!-- 沒有搜尋結果 -->
                <div class="fw-500 text-center mb-5 pb-5">
                    <img src="{{asset('images/no-result.png')}}" class="img-fluid mb-5">
                    <h2 class="fs-36 mb-4">沒有找到任何結果</h2>
                    <div class="fs-28">你可以篩選其他條件試試，或者換個關鍵字</div>
                </div>
                @else
                <!-- 有搜尋結果 -->
                <div class="tab-content-show">
                    <div class="active">
                        <div class="row">
                            @foreach($articles as $article)
                            <div class="col-6 col-lg-4 mb-4">
                                <div class="image-card">
                                    <a 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 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>
                            </div>
                            @endforeach
                        </div>
                    </div>

                    <!-- pagination -->
                    {{$articles->withQueryString()->links('pagination')}}
                </div>
                @endempty
            </div>
        </div>
    </div>
</section>

<script>
    @if($search)
    $('.search-input').val($('.search-input').html("{{$search}}").text());
    @endif
</script>
@endsection