@extends('layouts.app')

@section('title', $post->title . ' | Prophet')
@section('meta_description', $post->summary)

@section('content')
    <!-- Main Content Detail -->
    <section class="pt-32 pb-24 px-6 max-w-7xl mx-auto w-full">
        <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-gutter">
            <!-- Article Content (Left) -->
            <article class="lg:col-span-8">
                <div class="mb-8">
                    @if($post->category)
                        <span class="inline-block border border-primary-container text-primary-container px-3 py-1 rounded font-label-caps text-xs mb-4 uppercase tracking-widest">
                            {{ $post->category->name }}
                        </span>
                    @endif
                    <h1 class="font-display-lg text-3xl md:text-5xl text-on-surface mb-6 font-bold leading-tight">
                        {{ $post->title }}
                    </h1>
                    <div class="flex items-center gap-4 text-primary-container font-body-md text-sm opacity-80">
                        <span>Tarih: {{ $post->published_at->translatedFormat('d M Y') }}</span>
                    </div>
                </div>
                
                @if($post->featured_image)
                    <div class="mb-12 rounded overflow-hidden border border-primary-container/30">
                        <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-[400px] object-cover" />
                    </div>
                @endif
                
                <div class="prose prose-lg max-w-none prose-headings:font-headline-md prose-headings:text-on-surface prose-p:font-body-lg prose-p:text-on-surface-variant prose-p:leading-relaxed mb-12">
                    {!! $post->content !!}
                </div>
                
                <!-- Share -->
                <div class="flex items-center gap-4 py-6 border-t border-primary-container/20">
                    <span class="font-label-caps text-xs text-primary-container tracking-wider">PAYLAŞ:</span>
                    <button class="w-10 h-10 rounded-full border border-primary-container/30 flex items-center justify-center text-primary-container hover:bg-primary-container hover:text-white transition-colors" onclick="window.print()">
                        <span class="material-symbols-outlined text-[20px]">print</span>
                    </button>
                    <button class="w-10 h-10 rounded-full border border-primary-container/30 flex items-center justify-center text-primary-container hover:bg-primary-container hover:text-white transition-colors" onclick="navigator.clipboard.writeText(window.location.href); alert('Bağlantı kopyalandı!')">
                        <span class="material-symbols-outlined text-[20px]">share</span>
                    </button>
                </div>
                
                <!-- Related Posts -->
                @if($relatedPosts->isNotEmpty())
                    <div class="mt-16 pt-12 border-t border-primary-container/20">
                        <h3 class="font-headline-md text-2xl text-on-surface mb-8 font-semibold">İlişkili Yazılar</h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            @foreach($relatedPosts as $related)
                                <div class="border border-primary-container/20 rounded p-6 bg-surface-container-low/30 hover:border-primary-container transition-colors group">
                                    @if($related->category)
                                        <span class="font-label-caps text-xs text-primary-container mb-3 block uppercase tracking-widest">
                                            {{ $related->category->name }}
                                        </span>
                                    @endif
                                    <h4 class="font-headline-sm text-lg text-on-surface mb-3 group-hover:text-primary-container transition-colors font-semibold">
                                        <a href="{{ route('blog.show', $related->slug) }}">
                                            {{ $related->title }}
                                        </a>
                                    </h4>
                                    @if($related->summary)
                                        <p class="font-body-md text-xs text-on-surface-variant opacity-80 line-clamp-2">
                                            {{ $related->summary }}
                                        </p>
                                    @endif
                                </div>
                            @endforeach
                        </div>
                    </div>
                @endif
            </article>
            
            <!-- Sidebar (Right) -->
            <aside class="lg:col-span-4 space-y-12">
                <!-- Search Widget -->
                <div>
                    <form action="{{ route('blog.index') }}" method="GET" class="relative">
                        <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"/>
                        <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">
                        @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 {{ $post->category_id === $category->id ? '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 {{ $post->category_id === $category->id ? '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