@extends('landing.layout')

@section('title', 'Artikel')

@section('header')
    @include('landing.header-beranda')
@endsection

@section('content')
    @include('landing.breadcrumb')

    <section class="relative py-16 md:py-24">
        <div class="container relative">
            <div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-12">
                <div class="order-2 md:order-1 lg:col-span-8">
                    <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
                        @forelse($blogs as $blog)
                            <article
                                class="group relative h-fit overflow-hidden rounded-md bg-white shadow-sm transition-all duration-500 dark:bg-slate-900 dark:shadow-gray-700">
                                <div class="relative overflow-hidden">
                                    <img class="w-full object-cover transition-transform duration-500 group-hover:scale-105"
                                        src="{{ $blog->image ? asset('storage/' . $blog->image) : asset('landing/images/course/default.jpg') }}"
                                        alt="{{ $blog->title }}" style="height: 200px;" loading="lazy">

                                    <div class="absolute bottom-6 start-6">
                                        <span
                                            class="inline-flex items-center rounded-md bg-violet-600 px-2.5 py-1 text-[12px] font-medium text-white">
                                            {{ $blog->category->name ?? 'Article' }}
                                        </span>
                                    </div>
                                </div>

                                <div class="relative p-6">
                                    <div class="mb-4 flex justify-between text-sm text-slate-400">
                                        <span class="flex items-center">
                                            <i class="me-1 size-4" data-feather="calendar"></i>
                                            {{ $blog->created_at->format('d M y') }}
                                        </span>
                                        <span class="flex items-center">
                                            <i class="me-1 size-4" data-feather="eye"></i>
                                            {{ $blog->views ?? 0 }}
                                        </span>
                                    </div>

                                    <h3 class="mb-3">
                                        <a class="text-lg font-medium transition-colors hover:text-violet-600"
                                            href="{{ route('landing.artikel.show', $blog->slug) }}">
                                            {{ Str::limit($blog->title, 50) }}
                                        </a>
                                    </h3>

                                    <div class="mt-3">
                                        <a class="btn btn-link inline-flex items-center duration-500 ease-in-out after:bg-violet-600 hover:text-violet-600"
                                            href="{{ route('landing.artikel.show', $blog->slug) }}">
                                            Baca Selengkapnya <i class="mdi mdi-arrow-right ml-1"></i>
                                        </a>
                                    </div>
                                </div>
                            </article>
                        @empty
                            <div class="col-span-full py-12 text-center">
                                <div class="mx-auto max-w-sm">
                                    <i class="mx-auto mb-4 size-16 text-slate-300" data-feather="file-text"></i>
                                    <h3 class="mb-2 text-lg font-semibold">Tidak ada artikel</h3>
                                    <p class="text-slate-400">Belum ada artikel yang tersedia saat ini.</p>
                                </div>
                            </div>
                        @endforelse
                    </div>

                    @if ($blogs->hasPages())
                        <div class="mt-6 grid grid-cols-1 md:grid-cols-12">
                            <div class="text-center md:col-span-12">
                                {{ $blogs->links('landing.pagination') }}
                            </div>
                        </div>
                    @endif
                </div>

                @include('landing.artikel.sidebar')
            </div>
        </div>
    </section>
@endsection