@extends('theme::layouts.app', ['title' => __('blog.title|Blog Post')])

@section('content')
    {{-- Breadcrumbs --}}
    @include('theme::partials.breadcrumbs')
    <main class="flex-grow w-full max-w-[1440px] mx-auto">
        @php
            $shareUrl = urlencode(request()->fullUrl());
            $shareText = urlencode($post->title);
        @endphp
        <article class="max-w-4xl mx-auto px-6 lg:px-10 py-12">
            {{-- Header --}}
            <header class="mb-10 text-center">
                @if($post->category->first())
                <a href="{{ route('blog.category', $post->category->first()->slug) }}"
                    class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-primary/10 text-primary text-xs font-semibold uppercase tracking-wider mb-6 hover:bg-primary/20 transition-colors">
                    {{ $post->category->first()->name }}
                </a>
                @endif
                <h1 class="text-3xl md:text-5xl font-bold text-text-main dark:text-white mb-6 leading-tight">
                    {{ $post->title }}
                </h1>
                <div
                    class="flex flex-wrap items-center justify-center gap-6 text-sm text-text-muted dark:text-gray-400">
                    <div class="flex items-center gap-2">
                        <img alt="{{ $post->user->name ?? 'Author' }}" class="size-8 rounded-full object-cover"
                             src="{{ !empty($post->user->avatar) ? asset('storage/' . $post->user->avatar) : 'https://ui-avatars.com/api/?name=' . urlencode($post->user->name ?? 'Guest') }}" />
                        <span class="font-medium text-text-main dark:text-white">{{ $post->user->name ?? __('blog.Guest User') }}</span>
                    </div>
                    <div class="flex items-center gap-1.5">
                        <span class="material-symbols-outlined text-[18px]">calendar_today</span>
                        <span>{{ $post->created_at->format('M d, Y') }}</span>
                    </div>
                    <div class="flex items-center gap-1.5">
                        <span class="material-symbols-outlined text-[18px]">schedule</span>
                        <span>@lang('blog.:min min read', ['min' => $post->read_time])</span>
                    </div>
                </div>
            </header>

            {{-- Featured Image --}}
            <div class="w-full aspect-video rounded-2xl overflow-hidden mb-12 shadow-soft">
                @if(!$post->hasFeaturedImage())
                    <img class="w-full h-full object-cover" src="{{asset('/assets/img/no-thumb.svg')}}" alt="{{$post->title}}">
                @else
                    <img class="w-full h-full object-cover" src="{{$post->getFeaturedImage('original')}}" alt="{{$post->title}}">
                @endif
            </div>

            <div class="flex flex-col lg:flex-row gap-12 relative">
                {{-- Sidebar / Share Buttons --}}
                <aside class="hidden lg:block w-12 sticky top-28 h-fit">
                    <div class="flex flex-col gap-4">
                        {{-- Twitter --}}
                        <a href="https://twitter.com/intent/tweet?url={{ $shareUrl }}&text={{ $shareText }}"
                           target="_blank" rel="noopener noreferrer"
                           class="size-10 rounded-full border border-border-light dark:border-border-dark flex items-center justify-center text-text-muted hover:text-white hover:bg-[#1DA1F2] hover:border-[#1DA1F2] transition-all"
                           title="@lang('blog.button|Share on Twitter')">
                            <i class="fa-brands fa-twitter text-lg"></i>
                        </a>

                        {{-- LinkedIn --}}
                        <a href="https://www.linkedin.com/shareArticle?mini=true&url={{ $shareUrl }}&title={{ $shareText }}"
                           target="_blank" rel="noopener noreferrer"
                           class="size-10 rounded-full border border-border-light dark:border-border-dark flex items-center justify-center text-text-muted hover:text-white hover:bg-[#0A66C2] hover:border-[#0A66C2] transition-all"
                           title="@lang('blog.button|Share on LinkedIn')">
                            <i class="fa-brands fa-linkedin text-lg"></i>
                        </a>

                        {{-- Facebook --}}
                        <a href="https://www.facebook.com/sharer/sharer.php?u={{ $shareUrl }}"
                           target="_blank" rel="noopener noreferrer"
                           class="size-10 rounded-full border border-border-light dark:border-border-dark flex items-center justify-center text-text-muted hover:text-white hover:bg-[#1877F2] hover:border-[#1877F2] transition-all"
                           title="@lang('blog.button|Share on Facebook')">
                            <i class="fa-brands fa-facebook text-lg"></i>
                        </a>
                    </div>
                </aside>

                {{-- Main Post Content --}}
                <div class="prose prose-lg dark:prose-invert max-w-none flex-grow">
                    {!! $post->content !!}
                </div>
            </div>

            {{-- Share Section --}}
            <section class="mt-20 py-10">
                <div class="bg-white dark:bg-surface-dark border border-border-light dark:border-border-dark rounded-xl p-8 text-center shadow-soft">
                    <h3 class="text-lg font-bold text-text-main dark:text-white mb-6">@lang('blog.heading|Share this article')</h3>
                    <div class="flex flex-wrap items-center justify-center gap-4">

                        {{-- Twitter --}}
                        <a href="https://twitter.com/intent/tweet?url={{ $shareUrl }}&text={{ $shareText }}"
                           target="_blank" rel="noopener noreferrer"
                           class="inline-flex items-center gap-2 px-6 py-2.5 bg-[#1DA1F2] text-white rounded-lg hover:bg-[#1DA1F2]/90 transition-colors font-semibold text-sm">
                            <i class="fa-brands fa-twitter text-lg"></i>
                            @lang('blog.button|Share on Twitter')
                        </a>

                        {{-- LinkedIn --}}
                        <a href="https://www.linkedin.com/shareArticle?mini=true&url={{ $shareUrl }}&title={{ $shareText }}"
                           target="_blank" rel="noopener noreferrer"
                           class="inline-flex items-center gap-2 px-6 py-2.5 bg-[#0A66C2] text-white rounded-lg hover:bg-[#0A66C2]/90 transition-colors font-semibold text-sm">
                            <i class="fa-brands fa-linkedin text-lg"></i>
                            @lang('blog.button|Share on LinkedIn')
                        </a>

                        {{-- Facebook --}}
                        <a href="https://www.facebook.com/sharer/sharer.php?u={{ $shareUrl }}"
                           target="_blank" rel="noopener noreferrer"
                           class="inline-flex items-center gap-2 px-6 py-2.5 bg-[#1877F2] text-white rounded-lg hover:bg-[#1877F2]/90 transition-colors font-semibold text-sm">
                            <i class="fa-brands fa-facebook text-lg"></i>
                            @lang('blog.button|Share on Facebook')
                        </a>
                    </div>
                </div>
            </section>

            {{-- Related Posts --}}
            <section class="mt-20">
                <h2 class="text-2xl font-bold text-text-main dark:text-white mb-8">@lang('blog.heading|Related Posts')</h2>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                    @forelse($relatedPosts as $related)
                    <article class="flex gap-4 group cursor-pointer" onclick="window.location='{{ route('blog.post', $related->slug) }}'">
                        <div class="size-24 rounded-lg overflow-hidden flex-shrink-0">
                            <img alt="{{ $related->title }}"
                                 class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
                                 src="{{ $related->image ?? get_placeholder_img('blog') }}" />
                        </div>
                        <div>
                            @if($related->category->first())
                            <span class="text-xs font-bold text-accent uppercase tracking-wider mb-1 block">{{ $related->category->first()->name }}</span>
                            @endif
                            <h3
                                class="font-bold text-text-main dark:text-white group-hover:text-primary transition-colors line-clamp-2">
                                {{ $related->title }}</h3>
                        </div>
                    </article>
                    @empty
                        <p class="text-text-muted col-span-2">@lang('blog.No related posts found.')</p>
                    @endforelse
                </div>
            </section>

            {{-- Comments --}}
            <section class="mt-20" id="comments">
                <div class="flex items-center justify-between mb-8">
                    <h2 class="text-2xl font-bold text-text-main dark:text-white">@lang('blog.heading|Comments (:count)', ['count' => $comments->count()])</h2>
                </div>

                @if(setting('blog.comments', 1))
                <div
                    class="bg-white dark:bg-surface-dark border border-border-light dark:border-border-dark rounded-xl p-4 mb-12 shadow-soft">
                    @auth
                    <div class="flex items-center gap-3 mb-4">
                        <img alt="{{ auth()->user()->name }}" class="size-8 rounded-full object-cover"
                             src="{{ !empty(auth()->user()->avatar) ? asset('storage/' . auth()->user()->avatar) : 'https://ui-avatars.com/api/?name=' . urlencode(auth()->user()->name) }}" />
                        <span class="text-sm font-medium">@lang('blog.Post as') {{ auth()->user()->name }}</span>
                    </div>
                    <form action="{{ route('blog.post.comment.store', $post->id) }}" method="POST">
                        @csrf
                        <div class="relative">
                            <textarea
                                name="content"
                                class="w-full min-h-[120px] bg-gray-50 dark:bg-background-dark border-none rounded-lg p-4 text-sm focus:ring-1 focus:ring-primary mb-3"
                                placeholder="@lang('blog.Join the discussion...')" required></textarea>
                            <div class="flex items-center justify-between">
                                <div class="flex gap-2">
                                    <button type="button" class="p-2 text-text-muted hover:text-primary transition-colors"><span
                                            class="material-symbols-outlined text-[20px]">format_bold</span></button>
                                    <button type="button" class="p-2 text-text-muted hover:text-primary transition-colors"><span
                                            class="material-symbols-outlined text-[20px]">format_italic</span></button>
                                    <button type="button" class="p-2 text-text-muted hover:text-primary transition-colors"><span
                                            class="material-symbols-outlined text-[20px]">link</span></button>
                                </div>
                                <button
                                    class="px-6 py-2 bg-primary text-white text-sm font-semibold rounded-lg hover:bg-primary-dark transition-colors">@lang('blog.button|Post Comment')</button>
                            </div>
                        </div>
                    </form>
                    @else
                        <div class="text-center py-6">
                            <p class="text-text-muted mb-4">@lang('blog.Please login to leave a comment.')</p>
                            <a href="{{ route('login') }}" class="px-6 py-2 bg-primary text-white text-sm font-semibold rounded-lg hover:bg-primary-dark transition-colors">@lang('general.Login')</a>
                        </div>
                    @endauth
                </div>

                <div class="space-y-8">
                    @forelse($comments as $comment)
                        @include('theme::partials.blog.comment-item-layout', ['comment' => $comment, 'post' => $post])
                    @empty
                        <p class="text-center text-text-muted">@lang('blog.No comments yet. Be the first to comment!')</p>
                    @endforelse
                </div>

                <div class="mt-10 text-center">
                    {{-- Pagination if available --}}
                </div>
                @endif
            </section>
        </article>
    </main>

@endsection