@extends('layouts.landing-page.index', ['title' => 'Artikel'])

@section('main')
    <section id="article" class="product section mt-5">

        <div class="container mt-3 mb-5" data-aos="fade-up" data-aos-delay="100">

            {{-- <div class="container section-title pb-0 mb-5" data-aos="fade-up">
      <h2>Produk</h2>
      <p>Produk</p>
    </div> --}}

            <!-- Toolbar -->
            <form class="row align-items-center mb-4 w-full" method="GET" action="{{ route('article.search') }}">

                <div class="col-12 col-md-7">
                    <div class="search-wrapper shadow-sm">
                        <i class="bi bi-search"></i>
                        <input type="text" class="search-input" name="search" placeholder="Cari artikel..."
                            value="{{ request('search') }}">
                    </div>
                </div>

                <div class="col-12 col-md-3">
                    <div class="sort-wrapper shadow-sm">
                        <i class="bi bi-filter"></i>
                        <select class="sort-select" name="sort">
                            <option value="terbaru" {{ request('sort') == 'terbaru' ? 'selected' : '' }}>
                                Terbaru
                            </option>
                            <option value="terlama" {{ request('sort') == 'terlama' ? 'selected' : '' }}>
                                Terlama
                            </option>
                            <option value="popular" {{ request('sort') == 'popular' ? 'selected' : '' }}>
                                Paling Banyak Dibaca
                            </option>
                            <option value="az" {{ request('sort') == 'az' ? 'selected' : '' }}>
                                Judul A - Z
                            </option>
                        </select>
                    </div>
                </div>
                <input type="hidden" name="category" value="{{ request('category') }}">

                <div class="col-md-2 col-12">
                    <button type="submit" class="btn btn-outline-primary w-100">
                        <i class="bi bi-search"></i> Cari
                    </button>
                </div>
            </form>
            <!-- Filter Category -->
            <div class="mb-4 d-flex gap-2 flex-wrap">
                <button class="filter-btn {{ !request()->has('category') || request('category') == '' ? 'active' : '' }}"
                    data-filter="all" onclick="filterByCategory('')">
                    Semua
                </button>
                @foreach ($categories as $category)
                    <button class="filter-btn {{ request('category') == $category->name ? 'active' : '' }}"
                        data-filter="{{ $category->name }}" onclick="filterByCategory('{{ $category->name }}')">
                        {{ $category->name }}
                    </button>
                @endforeach
            </div>

            <!-- Form untuk submit filter (hidden) -->
            <form id="categoryFilterForm" method="GET" action="{{ route('article.search') }}" style="display: none;">
                <input type="hidden" name="category" id="categoryInput">
                <input type="hidden" name="search" value="{{ request('search') }}">
                <input type="hidden" name="sort" value="{{ request('sort') }}">
            </form>


            <!-- Article Grid -->
            <div class="row g-3">

                @foreach ($articles as $article)
                    <div class="col-12 col-md-6 col-xl-4 article-item" data-category="berita">
                        <a href="{{ route('article.detail', ['slug' => $article->slug]) }}" class="article-link">
                            <div class="article-card">
                                <img src="{{ asset('storage') }}/{{ $article->thumbnail }}" class="article-img"
                                    alt="Artikel">
                                <div class="article-body">
                                    <div class="article-title mb-3">
                                        {{ $article->title }}
                                    </div>
                                    <div class="article-meta">
                                        @if (isset($article->publish_date))
                                            <span><i class="bi bi-calendar"></i>
                                                {{ \Carbon\Carbon::parse($article->publish_date)->locale('id')->translatedFormat('d F Y') }}</span>
                                        @else
                                            <span><i class="bi bi-calendar"></i>
                                                Draft</span>
                                        @endif
                                        <span><i class="bi bi-eye"></i> {{ $article->visitors }} dibaca</span>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                @endforeach

            </div>
        </div>
    </section>
@endsection

@push('styles')
    <style>
        /* Toolbar */
        .search-wrapper,
        .sort-wrapper {
            position: relative;
            background: #fff;
            border-radius: 50px;
            padding: 10px 18px 10px 44px;
            border: 1px solid #eee;
            transition: 0.3s;
        }

        .search-wrapper:focus-within,
        .sort-wrapper:focus-within {
            border-color: var(--accent-color);
            box-shadow: 0 0 0 4px rgba(201, 164, 76, .2);
        }

        .search-wrapper i,
        .sort-wrapper i {
            position: absolute;
            left: 18px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--accent-color);
        }

        .search-input,
        .sort-select {
            border: none;
            outline: none;
            width: 100%;
            background: transparent;
            font-size: 14px;
        }

        .sort-select {
            appearance: none;
            cursor: pointer;
        }

        /* Filter Category */
        .filter-btn {
            border-radius: 30px;
            padding: 6px 16px;
            font-size: 13px;
            border: 1px solid #ddd;
            background: #fff;
            cursor: pointer;
            transition: .3s;
        }

        .filter-btn.active,
        .filter-btn:hover {
            background: var(--accent-color);
            color: #fff;
            border-color: var(--accent-color);
        }

        /* Article Card */
        .article-card {
            background: #fff;
            border-radius: 14px;
            overflow: hidden;
            transition: .3s;
            height: 100%;
        }

        .article-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 10px 24px rgba(0, 0, 0, .12);
        }

        .article-img {
            height: 200px;
            width: 100%;
            object-fit: cover;
        }

        .article-body {
            padding: 14px;
        }

        .article-title {
            font-size: 16px;
            font-weight: 600;
            line-height: 1.4;
            color: var(--dark);
            margin-bottom: 6px;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            /* Batasi teks menjadi 2 baris */
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            /* height: 40px */
        }

        .article-meta {
            font-size: 12px;
            color: #888;
            display: flex;
            gap: 12px;
        }

        @media (max-width: 768px) {
            .article-img {
                height: 160px;
            }
        }

        .article-link {
            text-decoration: none;
            color: inherit;
            display: block;
            height: 100%;
        }

        .article-link:hover {
            color: inherit;
        }

        /* Efek hover terasa klik */
        .article-link:hover .article-card {
            transform: translateY(-4px);
            box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
        }
    </style>
@endpush

@push('scripts')
    <script>
        function filterByCategory(categoryId) {
            // Update active button
            document.querySelectorAll('.filter-btn').forEach(btn => {
                btn.classList.remove('active');
            });
            event.target.classList.add('active');

            // Set value ke hidden input
            document.getElementById('categoryInput').value = categoryId;

            // Submit form
            document.getElementById('categoryFilterForm').submit();
        }

        // Optional: Tambahkan keyboard navigation
        document.addEventListener('DOMContentLoaded', function() {
            const filterButtons = document.querySelectorAll('.filter-btn');

            filterButtons.forEach(button => {
                button.addEventListener('keydown', function(e) {
                    if (e.key === 'Enter' || e.key === ' ') {
                        e.preventDefault();
                        filterByCategory(this.getAttribute('data-filter'));
                    }
                });
            });
        });
    </script>
    <script>
        // Filter kategori
        // document.querySelectorAll('.filter-btn').forEach(btn => {
        //     btn.addEventListener('click', function() {
        //         document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
        //         this.classList.add('active');

        //         const filter = this.dataset.filter;
        //         document.querySelectorAll('.article-item').forEach(item => {
        //             item.style.display =
        //                 filter === 'all' || item.dataset.category === filter ? 'block' : 'none';
        //         });
        //     });
        // });

        // // Search
        // document.querySelector('.search-input').addEventListener('keyup', function() {
        //     const val = this.value.toLowerCase();
        //     document.querySelectorAll('.article-item').forEach(item => {
        //         const title = item.querySelector('.article-title').innerText.toLowerCase();
        //         item.style.display = title.includes(val) ? 'block' : 'none';
        //     });
        // });
    </script>
@endpush