@extends('layouts.app')

@section('content')
<section class="py-6 sm:py-10 bg-gradient-to-b from-white to-gray-50 min-h-screen">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        
        {{-- Header Section --}}
        @if ($kategori)
            <div class="mb-6 sm:mb-10 text-center">
                <div class="inline-flex items-center justify-center mb-2">
                    <span class="h-px w-8 sm:w-12 bg-gray-300"></span>
                    <span class="mx-2 sm:mx-3 text-gray-500 text-xs sm:text-sm font-medium">KATEGORI</span>
                    <span class="h-px w-8 sm:w-12 bg-gray-300"></span>
                </div>
                <h1 class="text-2xl sm:text-3xl lg:text-4xl font-bold text-gray-900">
                    {{ $kategori->nama_kategori }}
                </h1>
                <p class="mt-2 text-gray-600 text-sm sm:text-base max-w-2xl mx-auto">
                    Kumpulan konten terbaru dari kategori {{ $kategori->nama_kategori }}
                </p>
            </div>
        @endif

        <div class="grid grid-cols-1 lg:grid-cols-4 gap-6 lg:gap-8">
            {{-- MAIN CONTENT --}}
            <div class="lg:col-span-3">
                {{-- Konten Grid --}}
                @if($konten->count() > 0)
                    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6">
                        @foreach ($konten as $item)
                            <div class="group bg-white rounded-lg shadow-sm hover:shadow-md transition-all duration-300 overflow-hidden border border-gray-100 hover:border-blue-200">
                                <a href="{{ route('kategori.show', $item->slug) }}" class="block h-full">
                                    {{-- Image Container --}}
                                    <div class="relative h-40 sm:h-48 overflow-hidden bg-gray-100">
                                        @if($item->gambar1)
                                            <img src="{{ asset('storage/' . $item->gambar1) }}" 
                                                 alt="{{ $item->judul }}"
                                                 loading="lazy"
                                                 class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
                                        @else
                                            <div class="w-full h-full flex items-center justify-center bg-gradient-to-br from-gray-100 to-gray-200">
                                                <svg class="w-10 h-10 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                                                </svg>
                                            </div>
                                        @endif
                                        
                                        {{-- Date Badge --}}
                                        @if ($item->tanggal)
                                            <div class="absolute top-2 right-2 bg-white/90 backdrop-blur-sm rounded px-2 py-1">
                                                <span class="text-xs font-medium text-gray-700">
                                                    {{ \Carbon\Carbon::parse($item->tanggal)->format('d M') }}
                                                </span>
                                            </div>
                                        @endif
                                    </div>
                                    
                                    {{-- Content --}}
                                    <div class="p-4">
                                        <h2 class="text-base sm:text-lg font-semibold text-gray-900 mb-2 line-clamp-2 group-hover:text-blue-600 transition-colors duration-300">
                                            {{ $item->judul }}
                                        </h2>
                                        
                                        <p class="text-gray-600 text-sm mb-3 line-clamp-2">
                                            {{ Str::limit(strip_tags($item->isi1), 80) }}
                                        </p>
                                        
                                        <div class="flex items-center justify-between pt-3 border-t border-gray-100">
                                            <span class="text-blue-600 text-sm font-medium flex items-center gap-1 group-hover:gap-1.5 transition-all duration-300">
                                                Baca Selengkapnya
                                                <svg class="w-3.5 h-3.5 group-hover:translate-x-0.5 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                                                </svg>
                                            </span>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        @endforeach
                    </div>
                @else
                    {{-- Empty State --}}
                    <div class="text-center py-12 sm:py-16">
                        <div class="inline-flex items-center justify-center w-16 h-16 sm:w-20 sm:h-20 bg-gray-100 rounded-full mb-4">
                            <svg class="w-8 h-8 sm:w-10 sm:h-10 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                            </svg>
                        </div>
                        <h3 class="text-lg sm:text-xl font-semibold text-gray-900 mb-2">Belum ada konten</h3>
                        <p class="text-gray-600 text-sm sm:text-base max-w-md mx-auto">
                            Saat ini belum ada konten yang tersedia dalam kategori ini.
                        </p>
                    </div>
                @endif

                {{-- Pagination --}}
                @if($konten->hasPages())
                    <div class="mt-8 sm:mt-12">
                        {{ $konten->links('vendor.pagination.simple-tailwind') }}
                    </div>
                @endif
            </div>

            {{-- SIDEBAR --}}
            <div class="lg:col-span-1">
                <div class="sticky top-6 space-y-6">
                    
                    {{-- Konten Terbaru Section --}}
                    @if(isset($berita_terbaru) && $berita_terbaru->count() > 0)
                        <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                            <div class="bg-gradient-to-r from-blue-600 to-blue-500 px-4 py-3">
                                <h3 class="text-white font-semibold text-lg flex items-center gap-2">
                                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/>
                                    </svg>
                                    Konten Terbaru
                                </h3>
                            </div>
                            <div class="p-4">
                                <div class="space-y-4">
                                    @foreach($berita_terbaru as $terbaru)
                                        <a href="{{ route('kategori.show', $terbaru->slug) }}" 
                                           class="group block hover:bg-gray-50 p-2 rounded-lg transition duration-200">
                                            <div class="flex items-start gap-3">
                                                <div class="flex-shrink-0 w-12 h-12 rounded overflow-hidden bg-gray-100">
                                                    @if($terbaru->gambar1)
                                                        <img src="{{ asset('storage/' . $terbaru->gambar1) }}" 
                                                             alt="{{ $terbaru->judul }}"
                                                             class="w-full h-full object-cover group-hover:scale-105 transition duration-300">
                                                    @else
                                                        <div class="w-full h-full flex items-center justify-center bg-gray-200">
                                                            <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                                                            </svg>
                                                        </div>
                                                    @endif
                                                </div>
                                                <div class="flex-1 min-w-0">
                                                    <h4 class="text-sm font-medium text-gray-900 group-hover:text-blue-600 line-clamp-2 mb-1">
                                                        {{ $terbaru->judul }}
                                                    </h4>
                                                    <div class="flex items-center gap-2 text-xs text-gray-500">
                                                        @if($terbaru->tanggal)
                                                            <span class="flex items-center gap-1">
                                                                <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                                                                </svg>
                                                                {{ \Carbon\Carbon::parse($terbaru->tanggal)->format('d M') }}
                                                            </span>
                                                        @endif
                                                        @if($terbaru->kategori)
                                                            <span class="bg-blue-50 text-blue-700 px-1.5 py-0.5 rounded text-xs font-medium">
                                                                {{ $terbaru->kategori->nama_kategori }}
                                                            </span>
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                        </a>
                                    @endforeach
                                </div>
                                
                                {{-- View All Link --}}
                                @if(isset($kategori))
                                    <div class="mt-4 pt-4 border-t border-gray-200">
                                        <a href="{{ route('kategori.index', $kategori->slug) }}" 
                                           class="flex items-center justify-center gap-1 text-sm font-medium text-blue-600 hover:text-blue-700 group">
                                            Lihat Semua Konten
                                            <svg class="w-4 h-4 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"/>
                                            </svg>
                                        </a>
                                    </div>
                                @endif
                            </div>
                        </div>
                    @endif

                    {{-- Informasi Kategori --}}
                    @if(isset($kategori))
                        <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                            <div class="bg-gradient-to-r from-emerald-600 to-emerald-500 px-4 py-3">
                                <h3 class="text-white font-semibold text-lg flex items-center gap-2">
                                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/>
                                    </svg>
                                    Tentang Kategori
                                </h3>
                            </div>
                            <div class="p-4">
                                <div class="flex items-center justify-center mb-4">
                                    <div class="w-16 h-16 flex items-center justify-center rounded-full bg-emerald-50 text-emerald-600">
                                        <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/>
                                        </svg>
                                    </div>
                                </div>
                                <h4 class="text-center text-lg font-semibold text-gray-900 mb-2">
                                    {{ $kategori->nama_kategori }}
                                </h4>
                                <p class="text-gray-600 text-sm text-center">
                                    {{ $konten->total() }} konten tersedia
                                </p>
                            </div>
                        </div>
                    @endif

                    {{-- Call to Action --}}
                    <div class="bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg shadow-lg overflow-hidden">
                        <div class="p-5 text-center">
                            <svg class="w-12 h-12 text-white mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z"/>
                            </svg>
                            <h4 class="text-white font-bold text-lg mb-2">Jelajahi Lebih Banyak</h4>
                            <p class="text-blue-100 text-sm mb-4">
                                Temukan konten menarik lainnya di website kami
                            </p>
                            <a href="/" class="inline-block bg-white text-blue-600 font-semibold px-4 py-2 rounded-lg hover:bg-gray-100 transition duration-200">
                                Kembali ke Beranda
                            </a>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@push('styles')
<style>
    /* Custom pagination styling */
    .pagination {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.5rem;
    }
    
    .pagination .page-item.active .page-link {
        background-color: #3b82f6;
        color: white;
        border-color: #3b82f6;
    }
    
    .pagination .page-link {
        padding: 0.5rem 1rem;
        border: 1px solid #e5e7eb;
        border-radius: 0.375rem;
        color: #4b5563;
        transition: all 0.2s;
    }
    
    .pagination .page-link:hover {
        background-color: #f3f4f6;
        color: #1f2937;
    }
    
    .pagination .page-item.disabled .page-link {
        color: #9ca3af;
        cursor: not-allowed;
        background-color: #f9fafb;
    }
</style>
@endpush