@extends('layouts.app')

@section('content')
    <div class="container mx-auto sm:mt-2 mt-8">
        <div class="grid grid-cols-1 md:grid-cols-12 gap-6">
            <div class="md:col-span-9">
                <!-- Page Title and Description -->
                <div class="ml-4 mb-10 mr-4">
                    {{ Breadcrumbs::render('articles') }}
                    <h1 class="text-3xl font-bold">{{ __('messages.blog') }}</h1>
                    <p class="text-gray-600 mt-3">{{ __('messages.blog_description') }}</p>
                </div>
                <!-- Category Bar with Swiper -->
                <div class="mb-8 mt-3 ml-4">
                    <div class="swiper category-swiper">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <a href="{{ route('articles.index') }}"
                                    class="inline-block px-4 py-2 rounded-full bg-gray-200 text-gray-700 hover-e hover:text-white transition {{ !request()->routeIs('articles.category') ? 'bgd-color text-white' : '' }}">
                                    {{ __('messages.all_articles') }}
                                </a>
                            </div>
                            @foreach ($categories as $category)
                                <div class="swiper-slide">
                                    <a href="{{ route('articles.category', $category->slug) }}"
                                        class="inline-block px-4 py-2 rounded-full bg-gray-200 text-gray-700 hover-e hover:text-white transition">
                                        {{ $category->name }}
                                    </a>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>

                <!-- Articles Grid -->
                <div class="mt-6 ml-2 mr-2">
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                        @forelse ($articles as $article)
                            <div class="bg-white rounded-lg shadow-md overflow-hidden">
                                <img src="{{ $article->getImageUrl() }}" class="w-full h-48 object-cover"
                                    alt="{{ $article['title'] }}">
                                <div class="p-4">
                                    <h5 class="text-xl font-semibold mb-2">{{ $article['title'] }}</h5>
                                    <p class="text-gray-700 text-sm line-clamp-2">
                                        {{ Str::limit(strip_tags($article['content']), 100) }}
                                    </p>
                                    <a href="{{ route('articles.show', $article['slug']) }}"
                                        class="inline-block bgd-color text-white px-4 py-2 rounded  transition mt-2">
                                        {{ __('messages.read_more') }}
                                    </a>
                                </div>
                            </div>
                        @empty
                            <p class="col-span-3 text-center text-gray-500">{{ __('messages.no_articles') }}</p>
                        @endforelse
                    </div>

                    <!-- Pagination -->
                    <div class="mt-8">
                        {{ $articles->links('pagination::tailwind') }}
                    </div>
                </div>
            </div>

            <!-- Sidebar (Right Column) -->
            <div class="md:col-span-3">
                @include('partials.sidebar')
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const swiper = new Swiper('.category-swiper', {
                slidesPerView: "auto",
                spaceBetween: 1,
                breakpoints: {
                    0: {
                        slidesPerView: 3.5,
                    },

                    640: {
                        slidesPerView: 6.5,
                    },
                },
                freeMode: true,
            });
        });
    </script>
@endsection