@extends('layouts.app')

@section('content')
<section class="bg-white py-12">
    <div class="max-w-7xl mx-auto px-4 lg:px-8 grid grid-cols-1 lg:grid-cols-4 gap-10">

        {{-- KONTEN ARTIKEL --}}
        <div class="lg:col-span-3">
            {{-- Breadcrumb --}}
            <nav class="text-sm mb-5 text-gray-500 flex items-center gap-1">
                <a href="/" class="hover:text-sky-700">Beranda</a> /
                @if ($item->kategori)
                    <a href="{{ route('kategori.index', $item->kategori->slug) }}" class="hover:text-sky-700">
                        {{ $item->kategori->nama_kategori }}
                    </a> /
                @endif
                <span class="text-gray-900 font-semibold">{{ $item->judul }}</span>
            </nav>

            <article class="space-y-8">

                {{-- Judul & Meta --}}
                <h1 class="text-4xl font-extrabold text-gray-900 leading-tight">
                    {{ $item->judul }}
                </h1>

                <div class="flex flex-wrap gap-4 text-sm text-gray-500">
                    <div class="flex items-center gap-1">
                        <i class="fa-solid fa-calendar text-sky-500"></i>
                        {{ date('d M Y', strtotime($item->tanggal)) }}
                    </div>

                    <div class="flex items-center gap-1">
                        <i class="fa-solid fa-user text-emerald-500"></i>
                        {{ $item->penulis }}
                    </div>

                    @if($item->kategori)
                    <div class="flex items-center gap-1">
                        <i class="fa-solid fa-tag text-amber-500"></i>
                        <span class="bg-amber-100 text-amber-700 px-2 py-1 rounded text-xs font-semibold">
                            {{ $item->kategori->nama_kategori }}
                        </span>
                    </div>
                    @endif
                </div>

                {{-- Gambar 1 --}}
                @if($item->gambar1)
                <div class="overflow-hidden rounded-xl shadow-lg">
                    <img src="{{ asset('storage/' . $item->gambar1) }}"
                        class="w-full max-h-[450px] object-cover transition duration-300 hover:scale-105">
                </div>
                @if($item->ket1)
                <p class="text-center text-sm text-gray-500 mt-2 italic">{{ $item->ket1 }}</p>
                @endif
                @endif

                {{-- Isi 1 --}}
                <div class="prose prose-lg max-w-none prose-img:rounded-xl prose-img:shadow prose-a:text-sky-600 prose-strong:text-gray-900 prose-li:marker:text-sky-500">
                    {!! $item->isi1 !!}
                </div>

                {{-- Gambar 2 --}}
                @if($item->gambar2)
                <div class="pt-6">
                    <div class="overflow-hidden rounded-xl shadow-lg">
                        <img src="{{ asset('storage/' . $item->gambar2) }}"
                            class="w-full max-h-[450px] object-cover transition hover:scale-105">
                    </div>
                    @if($item->ket2)
                    <p class="text-center text-sm text-gray-500 mt-2 italic">{{ $item->ket2 }}</p>
                    @endif
                </div>
                @endif

                {{-- Isi 2 --}}
                @if($item->isi2)
                <div class="prose prose-lg max-w-none
                            prose-ul:list-disc prose-ul:list-inside
                            prose-ol:list-decimal prose-ol:list-inside
                            prose-li:marker:text-sky-500">
                    {!! $item->isi2 !!}
                </div>

                @endif

                {{-- Gambar 3 --}}
                @if($item->gambar3)
                <div class="pt-6">
                    <div class="rounded-xl overflow-hidden shadow-lg">
                        <img src="{{ asset('storage/' . $item->gambar3) }}"
                            class="w-full max-h-[450px] object-cover transition hover:scale-105">
                    </div>
                    @if($item->ket3)
                    <p class="text-center text-sm text-gray-500 mt-2 italic">{{ $item->ket3 }}</p>
                    @endif
                </div>
                @endif

                {{-- Isi 3 --}}
                @if($item->isi3)
                <div class="prose prose-lg max-w-none prose-img:rounded-xl prose-img:shadow prose-a:text-sky-600 prose-strong:text-gray-900 prose-li:marker:text-sky-500">
                    {!! $item->isi3 !!}
                </div>
                @endif

                {{-- SHARE (Mobile Only) --}}
                <div class="lg:hidden">
                    @include('partials.share', ['item' => $item])
                </div>
            </article>
        </div>

        {{-- SIDEBAR --}}
        <aside class="space-y-8">

            {{-- Bagikan (Desktop) --}}
            <div class="hidden lg:block">
                @include('partials.share', ['item' => $item])
            </div>

            {{-- Artikel Terkait --}}
            @if($related->count())
            <div class="bg-white p-5 rounded-xl shadow">
                <h4 class="font-semibold text-gray-700 mb-4 text-lg">Konten Terkait</h4>
                <div class="space-y-5">
                    @foreach($related as $rel)
                    <a href="{{ route('kategori.show', $rel->slug) }}"
                        class="group flex gap-4 items-start hover:bg-sky-50 p-2 rounded-lg transition">
                        <div class="w-20 h-16 overflow-hidden rounded">
                            <img src="{{ asset('storage/' . $rel->gambar1) }}"
                                class="w-full h-full object-cover group-hover:scale-105 transition">
                        </div>
                        <div class="flex-1">
                            <h4 class="text-sm font-semibold text-gray-800 line-clamp-2 group-hover:text-sky-600">
                                {{ $rel->judul }}
                            </h4>
                            <p class="text-xs text-gray-500 mt-1">
                                {{ $rel->created_at->isoFormat('D MMMM YYYY') }}
                            </p>
                        </div>
                    </a>
                    @endforeach
                </div>
            </div>
            @endif

        </aside>

    </div>
</section>
@endsection