@extends('layouts.app')

@section('content')

<section class="py-16 bg-white">
    <div class="container mx-auto px-4 max-w-4xl">
        
        <article class="prose lg:prose-lg mx-auto">
            {{-- Header Karya --}}
            <header class="mb-8">
                <h1 class="text-4xl font-extrabold text-gray-900 mb-2">
                    {{ $karya->judul }}
                </h1>
                <div class="text-gray-600 text-lg space-x-2">
                    <span class="font-semibold text-blue-600">
                        Penulis: {{ $karya->penulis }}
                    </span>
                    <span class="text-gray-400">|</span>
                    <span class="font-medium">
                        Kategori: {{ $karya->kategori->nama_kategori ?? 'Lainnya' }}
                    </span>
                    <span class="text-gray-400">|</span>
                    <span class="text-sm">
                        {{ \Carbon\Carbon::parse($karya->tanggal)->isoFormat('D MMMM YYYY') }}
                    </span>
                </div>
            </header>

            {{-- Gambar Utama --}}
            @if($karya->gambar1)
            <figure class="mb-8 rounded-xl overflow-hidden shadow-xl">
                <img src="{{ asset('storage/' . $karya->gambar1) }}" alt="{{ $karya->judul }}" class="w-full object-cover">
                @if($karya->ket1)
                <figcaption class="text-center text-sm text-gray-500 mt-2">
                    {{ $karya->ket1 }}
                </figcaption>
                @endif
            </figure>
            @endif

            {{-- Isi Konten 1 --}}
            <div class="text-gray-800 leading-relaxed prose-base">
                {!! $karya->isi1 !!}
            </div>

            {{-- Gambar Tambahan 2 (jika ada) --}}
            @if($karya->gambar2)
            <figure class="mt-8 mb-6 rounded-lg overflow-hidden border border-gray-100">
                <img src="{{ asset('storage/' . $karya->gambar2) }}" alt="{{ $karya->judul }}" class="w-full object-cover">
                @if($karya->ket2)
                <figcaption class="text-center text-sm text-gray-500 mt-2">
                    {{ $karya->ket2 }}
                </figcaption>
                @endif
            </figure>
            @endif
            
            {{-- Isi Konten 2 (jika ada) --}}
            @if($karya->isi2)
            <div class="mt-8 border-t border-gray-200 pt-6">
                <h2 class="text-2xl font-bold mb-3">Tambahan Penulis</h2>
                <div class="text-gray-800 leading-relaxed prose-base">
                    {!! $karya->isi2 !!}
                </div>
            </div>
            @endif
        </article>

        <div class="mt-12 text-center">
            <a href="{{ route('kategori.ruang-santri.index', $karya->kategori->slug) }}" class="inline-flex items-center text-blue-600 hover:text-blue-800 transition">
                ← Kembali ke Daftar {{ $karya->kategori->nama_kategori }}
            </a>
        </div>
        
    </div>
</section>

@endsection