@extends('layouts.app')

@section('title', $article->title)

@section('content')
    <main class="container mx-auto px-4 lg:px-8 py-12">
        <div class="flex flex-col lg:flex-row gap-12">

            <div class="w-full lg:w-2/3">
                <article class="bg-white p-6 sm:p-8 rounded-lg shadow-md">
                    <header class="mb-6 pb-6 border-b">
                        <h1 class="text-3xl md:text-4xl font-extrabold text-gray-900 leading-tight">{{ $article->title }}
                        </h1>
                        <div class="flex items-center text-sm text-gray-500 mt-4">
                            <i class="far fa-user mr-2"></i>
                            <span>Admin BKKBN</span>
                            <span class="mx-2">•</span>
                            <i class="far fa-calendar-alt mr-2"></i>
                            <span>{{ $article->created_at->translatedFormat('d F Y') }}</span>
                            @if ($article->category)
                                <span class="mx-2">•</span>
                                <a href="#"
                                    class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded-full">{{ $article->category->name }}</a>
                            @endif
                        </div>
                    </header>

                    @if ($article->images->isNotEmpty())
                        <figure class="my-6">
                            @if ($article->images->count() > 1)
                                <div class="swiper rounded-lg">
                                    <div class="swiper-wrapper">
                                        @foreach ($article->images as $image)
                                            <div class="swiper-slide">
                                                <img src="{{ asset('storage/' . $image->path) }}"
                                                    alt="Gambar untuk {{ $article->title }}"
                                                    class="w-full h-[32rem] object-cover">
                                            </div>
                                        @endforeach
                                    </div>
                                    <div class="swiper-pagination"></div>
                                    <div class="swiper-button-prev text-white"></div>
                                    <div class="swiper-button-next text-white"></div>
                                </div>
                            @else
                                <img src="{{ asset('storage/' . $article->images->first()->path) }}"
                                    alt="Gambar untuk {{ $article->title }}"
                                    class="w-full h-[32rem] object-cover rounded-lg">
                            @endif
                        </figure>
                    @endif

                    <div class="prose max-w-full mt-6 break-words">
                        {!! $article->content !!}
                    </div>
                    <div class="border-t border-gray-200 mt-8 pt-6">
                        <a href="{{ route('articles.index') }}" class="text-blue-600 hover:underline inline-block">&larr;
                            Kembali ke semua artikel</a>
                    </div>

                </article>
            </div>

            @include('partials.sidebar')
        </div>
    </main>
@endsection


@push('scripts')
    <script>
        if (document.querySelector('.swiper')) {
            const swiper = new Swiper('.swiper', {
                loop: true,
                grabCursor: true,

                autoplay: {
                    delay: 3000,
                    disableOnInteraction: false,
                },

                pagination: {
                    el: '.swiper-pagination',
                    clickable: true,
                },

                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
            });
        }
    </script>
@endpush
