@extends('layouts.app')

@section('title', 'Blog Grid | Prophet')

@section('content')
    <!-- Header Page Title -->
    <section class="bg-surface-container py-16 px-6 text-center mt-20 border-b border-primary/10">
        <div class="max-w-4xl mx-auto">
            <h1 class="font-display-lg text-4xl md:text-5xl text-primary font-bold mb-4">Blog Grid</h1>
            <div class="text-xs font-label-caps text-primary-container tracking-widest">
                <a href="/" class="hover:opacity-80">HOME</a> / <span class="opacity-60">BLOG GRID</span>
            </div>
        </div>
    </section>

    <!-- Main Grid Content -->
    <section class="py-20 px-6 max-w-7xl mx-auto">
        <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-gutter">
            <!-- Posts Grid (Left) -->
            <div class="lg:col-span-8 space-y-12">
                @if($posts->isEmpty())
                    <div class="text-center py-20 border border-primary-container/20 rounded">
                        <span class="material-symbols-outlined text-5xl text-primary-container mb-4">search_off</span>
                        <p class="font-body-md text-on-surface-variant">Aradığınız kriterlere uygun blog yazısı bulunamadı.</p>
                    </div>
                @else
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                        @foreach($posts as $post)
                            <article class="flex flex-col border border-primary-container/20 rounded overflow-hidden hover:border-primary-container transition-colors bg-[#FCFBF7]">
                                @if($post->featured_image)
                                    <a href="{{ route('blog.show', $post->slug) }}" class="block overflow-hidden h-52">
                                        <img src="{{ \Illuminate\Support\Str::startsWith($post->featured_image, ['http', 'assets/']) ? asset($post->featured_image) : \Illuminate\Support\Facades\Storage::url($post->featured_image) }}" alt="{{ $post->title }}" class="w-full h-full object-cover hover:scale-105 transition-transform duration-500" />
                                    </a>
                                @endif
                                <div class="p-6 flex-grow flex flex-col justify-between">
                                    <div>
                                        @if($post->category)
                                            <a href="{{ route('blog.index', ['category' => $post->category->slug]) }}" class="font-label-caps text-[10px] text-primary-container mb-3 block uppercase tracking-widest hover:opacity-80">
                                                {{ $post->category->name }}
                                            </a>
                                        @endif
                                        <h3 class="font-headline-sm text-lg md:text-xl text-on-surface mb-3 font-semibold line-clamp-2">
                                            <a href="{{ route('blog.show', $post->slug) }}" class="hover:text-primary-container transition-colors">
                                                {{ $post->title }}
                                            </a>
                                        </h3>
                                        @if($post->summary)
                                            <p class="font-body-md text-xs text-on-surface-variant leading-relaxed line-clamp-3 mb-4">
                                                {{ $post->summary }}
                                            </p>
                                        @endif
                                    </div>
                                    <div class="text-[11px] text-gray-500 mt-4">
                                        {{ $post->published_at->translatedFormat('d M Y') }}
                                    </div>
                                </div>
                            </article>
                        @endforeach
                    </div>
                    
                    <!-- Pagination -->
                    <div class="mt-16 flex justify-center">
                        {{ $posts->links() }}
                    </div>
                @endif
            </div>

            <!-- Sidebar (Right) -->
            <aside class="lg:col-span-4 space-y-12">
                <!-- Search Widget -->
                <div>
                    <form action="{{ route('blog.index') }}" method="GET" class="relative">
                        @if(request('category'))
                            <input type="hidden" name="category" value="{{ request('category') }}" />
                        @endif
                        <input class="w-full bg-transparent border-0 border-b border-primary-container py-3 pl-2 pr-10 focus:outline-none focus:border-primary-container focus:ring-0 font-body-md text-on-surface placeholder:text-primary-container/60" placeholder="Blogda ara..." type="text" name="search" value="{{ request('search') }}"/>
                        <button type="submit" class="absolute right-2 top-3 text-primary-container focus:outline-none">
                            <span class="material-symbols-outlined">search</span>
                        </button>
                    </form>
                </div>

                <!-- Categories Widget -->
                <div>
                    <h3 class="font-headline-sm text-lg text-on-surface mb-6 border-b border-primary-container/20 pb-2">Kategoriler</h3>
                    <ul class="space-y-4">
                        <li>
                            <a class="flex items-center group" href="{{ route('blog.index') }}">
                                <span class="w-1.5 h-1.5 rounded-full {{ !request('category') ? 'bg-primary-container scale-150' : 'bg-primary-container/30 group-hover:scale-150' }} mr-3 transition-transform"></span>
                                <span class="font-label-caps text-xs {{ !request('category') ? 'text-primary-container font-semibold' : 'text-on-surface-variant group-hover:text-primary-container' }} transition-colors uppercase tracking-widest">TÜMÜ</span>
                            </a>
                        </li>
                        @foreach($categories as $category)
                            <li>
                                <a class="flex items-center group" href="{{ route('blog.index', ['category' => $category->slug]) }}">
                                    <span class="w-1.5 h-1.5 rounded-full {{ request('category') === $category->slug ? 'bg-primary-container scale-150' : 'bg-primary-container/30 group-hover:scale-150' }} mr-3 transition-transform"></span>
                                    <span class="font-label-caps text-xs {{ request('category') === $category->slug ? 'text-primary-container font-semibold' : 'text-on-surface-variant group-hover:text-primary-container' }} transition-colors uppercase tracking-widest">
                                        {{ $category->name }} ({{ $category->blog_posts_count }})
                                    </span>
                                </a>
                            </li>
                        @endforeach
                    </ul>
                </div>

                <!-- Recent Posts Widget -->
                @if($recentPosts->isNotEmpty())
                    <div>
                        <h3 class="font-headline-sm text-lg text-on-surface mb-6 border-b border-primary-container/20 pb-2">Son Yazılar</h3>
                        <div class="space-y-6">
                            @foreach($recentPosts as $recent)
                                <a class="block group" href="{{ route('blog.show', $recent->slug) }}">
                                    <h4 class="font-body-md text-sm font-semibold text-on-surface group-hover:text-primary-container transition-colors line-clamp-2">
                                        {{ $recent->title }}
                                    </h4>
                                    <span class="font-label-caps text-[10px] text-gray-500 mt-2 block uppercase tracking-wider">
                                        {{ $recent->published_at->translatedFormat('d M Y') }}
                                    </span>
                                </a>
                            @endforeach
                        </div>
                    </div>
                @endif

                <!-- Newsletter Widget -->
                <div class="bg-primary-container rounded p-8 text-center text-white shadow-sm">
                    <span class="material-symbols-outlined text-white text-4xl mb-4">mail</span>
                    <h3 class="font-headline-sm text-lg text-white mb-2 font-semibold">Bültene Abone Ol</h3>
                    <p class="font-body-md text-xs text-white/90 mb-6">Aylık gökyüzü analizleri ve özel içerikler için e-posta listemize katılın.</p>
                    <form class="space-y-4">
                        <input class="w-full bg-white/10 border border-white/30 rounded py-2 px-4 text-white placeholder:text-white/60 focus:outline-none focus:border-white font-body-md text-sm" placeholder="E-posta adresiniz" type="email" required/>
                        <button class="w-full bg-white text-primary-container py-2 rounded font-label-caps text-xs font-semibold hover:bg-white/90 transition-colors uppercase tracking-wider" type="button">KAYIT OL</button>
                    </form>
                </div>
            </aside>
        </div>
    </section>
@endsection