@extends('layouts.frontend')

@section('title', $post->title . ' - ' . ($settings['site_name'] ?? 'সাংসদ পোর্টাল'))

@section('content')
    <!-- Hero Section -->
    <section class="bg-bd-green-500 text-white py-12">
        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
            <nav class="mb-4">
                <a href="{{ route('blog') }}" class="text-bd-green-100 hover:text-white transition">
                    <i class="fas fa-arrow-left mr-2"></i>সব পোস্ট
                </a>
            </nav>
            <div class="flex items-center gap-3 mb-4">
                <span class="px-4 py-1 text-sm font-medium rounded-full bg-bd-green-400 text-white">
                    {{ $post->category_label }}
                </span>
                <span class="text-bd-green-100">{{ $post->published_at->format('d F, Y') }}</span>
            </div>
            <h1 class="text-3xl md:text-4xl font-bold leading-tight">{{ $post->title }}</h1>

            <!-- Author Info -->
            <div class="flex items-center gap-4 mt-6">
                @if ($post->author->photo)
                    <img src="{{ Storage::url($post->author->photo) }}" alt="{{ $post->author->name }}"
                        class="w-12 h-12 rounded-full object-cover border-2 border-white">
                @else
                    <div class="w-12 h-12 rounded-full bg-bd-green-400 flex items-center justify-center">
                        <i class="fas fa-user text-white"></i>
                    </div>
                @endif
                <div>
                    <p class="font-medium">{{ $post->author->name }}</p>
                    @if ($post->author->designation)
                        <p class="text-bd-green-100 text-sm">{{ $post->author->designation }}</p>
                    @endif
                </div>
            </div>
        </div>
    </section>

    <!-- Main Content -->
    <section class="py-12 bg-gray-50">
        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
            <article class="bg-white rounded-xl shadow-md overflow-hidden">
                @if ($post->featured_image)
                    <div class="aspect-video">
                        <img src="{{ Storage::url($post->featured_image) }}" alt="{{ $post->title }}"
                            class="w-full h-full object-cover">
                    </div>
                @endif

                <div class="p-8 md:p-12">
                    <!-- Reading Info -->
                    <div class="flex items-center gap-6 text-sm text-gray-500 mb-8 pb-6 border-b">
                        <span>
                            <i class="fas fa-eye mr-2"></i>{{ $post->views_count }} বার পড়া হয়েছে
                        </span>
                        <span>
                            <i class="fas fa-book-reader mr-2"></i>{{ $post->reading_time }} মিনিট পড়ার সময়
                        </span>
                    </div>

                    <!-- Excerpt -->
                    @if ($post->excerpt)
                        <p class="text-xl text-gray-600 mb-8 font-medium italic border-l-4 border-bd-green-500 pl-4">
                            {{ $post->excerpt }}
                        </p>
                    @endif

                    <!-- Content -->
                    <div class="prose prose-lg max-w-none">
                        {!! $post->content !!}
                    </div>

                    <!-- Tags / Share -->
                    <div class="mt-12 pt-8 border-t">
                        <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-6">
                            <div>
                                <h4 class="text-sm font-medium text-gray-500 mb-2">শেয়ার করুন</h4>
                                <div class="flex gap-3">
                                    <a href="https://www.facebook.com/sharer/sharer.php?u={{ urlencode(request()->url()) }}"
                                        target="_blank"
                                        class="w-10 h-10 rounded-full bg-blue-600 text-white flex items-center justify-center hover:bg-blue-700 transition">
                                        <i class="fab fa-facebook-f"></i>
                                    </a>
                                    <a href="https://twitter.com/intent/tweet?url={{ urlencode(request()->url()) }}&text={{ urlencode($post->title) }}"
                                        target="_blank"
                                        class="w-10 h-10 rounded-full bg-sky-500 text-white flex items-center justify-center hover:bg-sky-600 transition">
                                        <i class="fab fa-twitter"></i>
                                    </a>
                                    <a href="https://wa.me/?text={{ urlencode($post->title . ' - ' . request()->url()) }}"
                                        target="_blank"
                                        class="w-10 h-10 rounded-full bg-green-500 text-white flex items-center justify-center hover:bg-green-600 transition">
                                        <i class="fab fa-whatsapp"></i>
                                    </a>
                                    <a href="https://www.linkedin.com/shareArticle?mini=true&url={{ urlencode(request()->url()) }}&title={{ urlencode($post->title) }}"
                                        target="_blank"
                                        class="w-10 h-10 rounded-full bg-blue-700 text-white flex items-center justify-center hover:bg-blue-800 transition">
                                        <i class="fab fa-linkedin-in"></i>
                                    </a>
                                </div>
                            </div>

                            <a href="{{ route('blog') }}"
                                class="inline-flex items-center px-6 py-3 bg-bd-green-500 text-white rounded-lg font-medium hover:bg-bd-green-600 transition">
                                <i class="fas fa-newspaper mr-2"></i>আরো পোস্ট দেখুন
                            </a>
                        </div>
                    </div>
                </div>
            </article>

            <!-- Author Bio -->
            @if ($post->author->bio)
                <div class="mt-8 bg-white rounded-xl shadow-md p-8">
                    <h3 class="text-lg font-bold text-gray-900 mb-4">লেখক সম্পর্কে</h3>
                    <div class="flex items-start gap-4">
                        @if ($post->author->photo)
                            <img src="{{ Storage::url($post->author->photo) }}" alt="{{ $post->author->name }}"
                                class="w-16 h-16 rounded-full object-cover">
                        @else
                            <div class="w-16 h-16 rounded-full bg-bd-green-100 flex items-center justify-center">
                                <i class="fas fa-user text-bd-green-600 text-xl"></i>
                            </div>
                        @endif
                        <div>
                            <h4 class="font-bold text-gray-900">{{ $post->author->name }}</h4>
                            @if ($post->author->designation)
                                <p class="text-sm text-bd-green-600">{{ $post->author->designation }}</p>
                            @endif
                            <p class="text-gray-600 mt-2">{{ $post->author->bio }}</p>
                        </div>
                    </div>
                </div>
            @endif

            <!-- Related Posts -->
            @if ($relatedPosts->count() > 0)
                <div class="mt-12">
                    <h3 class="text-xl font-bold text-gray-900 mb-6">সম্পর্কিত পোস্ট</h3>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        @foreach ($relatedPosts as $relatedPost)
                            <article class="group bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition">
                                <a href="{{ route('blog.show', $relatedPost->slug) }}" class="flex">
                                    @if ($relatedPost->featured_image)
                                        <div class="w-32 flex-shrink-0">
                                            <img src="{{ Storage::url($relatedPost->featured_image) }}"
                                                alt="{{ $relatedPost->title }}" class="w-full h-full object-cover">
                                        </div>
                                    @endif
                                    <div class="p-4">
                                        <span
                                            class="text-xs text-gray-500">{{ $relatedPost->published_at->format('d M, Y') }}</span>
                                        <h4
                                            class="font-bold text-gray-900 group-hover:text-bd-green-600 transition line-clamp-2">
                                            {{ $relatedPost->title }}
                                        </h4>
                                    </div>
                                </a>
                            </article>
                        @endforeach
                    </div>
                </div>
            @endif
        </div>
    </section>

    @push('styles')
        <style>
            .prose h2 {
                font-size: 1.5rem;
                font-weight: 700;
                margin-top: 2rem;
                margin-bottom: 1rem;
            }

            .prose h3 {
                font-size: 1.25rem;
                font-weight: 600;
                margin-top: 1.5rem;
                margin-bottom: 0.75rem;
            }

            .prose p {
                margin-bottom: 1rem;
                line-height: 1.8;
            }

            .prose ul,
            .prose ol {
                margin-left: 1.5rem;
                margin-bottom: 1rem;
            }

            .prose li {
                margin-bottom: 0.5rem;
            }

            .prose a {
                color: #006A4E;
                text-decoration: underline;
            }

            .prose blockquote {
                border-left: 4px solid #006A4E;
                padding-left: 1rem;
                font-style: italic;
                color: #666;
            }

            .line-clamp-2 {
                overflow: hidden;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
            }
        </style>
    @endpush
@endsection