@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">{{$article_category_name}}</li>
            </ol>
        </nav>
    </div>

    <!-- 文章列表 -->
    <section class="section">
        <div class="container">
            <div class="section-header">
                <h2 class="section-heading fw-bold text-center">{{$article_category_name}}</h2>
                <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_list', ['article_category_name' => \App\Models\ArticleCategory::categoryMap()[$article_category_name], 'sortParm' => 'new', 'sortOrder' => 'DESC'])}}">按上架時間新到舊</a></li>
                          <li><a class="dropdown-item @if($sortParm == 'new' && $sortOrder == 'ASC') disabled active @endif" href="{{route('frontend.article_list', ['article_category_name' => \App\Models\ArticleCategory::categoryMap()[$article_category_name], 'sortParm' => 'new', 'sortOrder' => 'ASC'])}}">按上架時間舊到新</a></li>
                          <li><a class="dropdown-item @if($sortParm == 'scan' && $sortOrder == 'DESC') disabled active @endif" href="{{route('frontend.article_list', ['article_category_name' => \App\Models\ArticleCategory::categoryMap()[$article_category_name], 'sortParm' => 'scan', 'sortOrder' => 'DESC'])}}">按瀏覽量高到低</a></li>
                          <li><a class="dropdown-item @if($sortParm == 'scan' && $sortOrder == 'ASC') disabled active @endif" href="{{route('frontend.article_list', ['article_category_name' => \App\Models\ArticleCategory::categoryMap()[$article_category_name], 'sortParm' => 'scan', 'sortOrder' => 'ASC'])}}">按瀏覽量低到高</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="row">
                @foreach($articles as $article)
                    <div class="col-6 col-lg-4 mb-4">
                        <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>
                    </div>
                @endforeach
            </div>

            <!-- pagination -->
            {{$articles->links('pagination')}}
        </div>

    </section>


@endsection