<x-shop-layout :title="$blog->title . ' - Fish Blog'">
<div class="min-h-screen bg-gray-50">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <!-- Blog Header -->
        <header class="mb-8">
            <!-- Breadcrumb -->
     <div id="imag    <div id="imageModal" class="fixed inset-0 bg-black bg-opacity-75 hidden z-50 items-center justify-center p-4">Modal" class="fixed inset-0 bg-black bg-opacity-75 hidden z-50 items-center justify-center p-4">          <nav class="mb-4">
                <ol class="flex items-center space-x-2 text-sm text-gray-500">
                    <li><a href="{{ route('shop.index') }}" class="hover:text-blue-600">Home</a></li>
                    <li><span class="mx-2">/</span></li>
                    <li><a href="{{ route('blogs.index') }}" class="hover:text-blue-600">Blog</a></li>
                    @if($blog->category)
                        <li><span class="mx-2">/</span></li>
                        <li><a href="{{ route('blogs.category', $blog->category) }}" class="hover:text-blue-600">{{ $blog->category->name }}</a></li>
                    @endif
                    <li><span class="mx-2">/</span></li>
                    <li class="text-gray-900">{{ Str::limit($blog->title, 30) }}</li>
                </ol>
            </nav>

            <!-- Category and Type Badges -->
            <div class="flex items-center space-x-3 mb-4">
                @if($blog->category)
                    <span class="px-3 py-1 bg-blue-100 text-blue-800 text-sm font-medium rounded-full">
                        {{ $blog->category->name }}
                    </span>
                @endif
                
                @if($blog->type === 'video')
                    <span class="inline-flex items-center px-3 py-1 bg-red-100 text-red-800 text-sm font-medium rounded-full">
                        <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                            <path d="M2 6a2 2 0 012-2h6l2 2h6a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6zM14.553 7.106A1 1 0 0014 8v4a1 1 0 00.553.894l2 1A1 1 0 0018 13V7a1 1 0 00-1.447-.894l-2 1z"></path>
                        </svg>
                        Video Content
                    </span>
                @elseif($blog->type === 'mixed')
                    <span class="inline-flex items-center px-3 py-1 bg-purple-100 text-purple-800 text-sm font-medium rounded-full">
                        <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z" clip-rule="evenodd"></path>
                        </svg>
                        Mixed Content
                    </span>
                @endif
            </div>

            <!-- Title -->
            <h1 class="text-4xl lg:text-5xl font-bold text-gray-900 mb-6 leading-tight">
                {{ $blog->title }}
            </h1>

            <!-- Meta Information -->
            <div class="flex items-center justify-between text-gray-600 mb-8">
                <div class="flex items-center space-x-4">
                    <div class="flex items-center">
                        <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                        </svg>
                        {{ $blog->author->name }}
                    </div>
                    <div class="flex items-center">
                        <svg class="w-5 h-5 mr-2" 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"></path>
                        </svg>
                        {{ $blog->published_at->setTimezone('Asia/Dhaka')->format('F d, Y') }}
                    </div>
                    <div class="flex items-center">
                        <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
                        </svg>
                        {{ number_format($blog->views_count) }} views
                    </div>
                </div>
                
                <!-- Social Share -->
                <div class="flex items-center space-x-2">
                    <span class="text-sm text-gray-500">Share:</span>
                    <a href="https://www.facebook.com/sharer/sharer.php?u={{ urlencode(request()->fullUrl()) }}" 
                       target="_blank" 
                       class="p-2 text-blue-600 hover:bg-blue-50 rounded-full transition-colors">
                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M20 10c0-5.523-4.477-10-10-10S0 4.477 0 10c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V10h2.54V7.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V10h2.773l-.443 2.89h-2.33v6.988C16.343 19.128 20 14.991 20 10z" clip-rule="evenodd"></path>
                        </svg>
                    </a>
                    <a href="https://twitter.com/intent/tweet?url={{ urlencode(request()->fullUrl()) }}&text={{ urlencode($blog->title) }}" 
                       target="_blank" 
                       class="p-2 text-blue-400 hover:bg-blue-50 rounded-full transition-colors">
                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                            <path d="M6.29 18.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0020 3.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.073 4.073 0 01.8 7.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 010 16.407a11.616 11.616 0 006.29 1.84"></path>
                        </svg>
                    </a>
                </div>
            </div>
        </header>

        <!-- Main Content -->
        <div class="bg-white rounded-xl shadow-lg overflow-hidden">
            <!-- Featured Image -->
            @if($blog->featured_image)
                <div class="w-full h-64 md:h-96">
                    <img src="{{ asset('storage/' . $blog->featured_image) }}" 
                         alt="{{ $blog->title }}" 
                         class="w-full h-full object-cover">
                </div>
            @endif

            <article class="p-8 lg:p-12">
                <!-- Excerpt -->
                @if($blog->excerpt)
                    <div class="border-l-4 border-blue-500 pl-6 mb-8">
                        <p class="text-xl text-gray-700 font-medium italic leading-relaxed">
                            {{ $blog->excerpt }}
                        </p>
                    </div>
                @endif

                <!-- Video Content -->
                @if($blog->facebook_video_url || $blog->youtube_video_url)
                    <div class="mb-8">
                        @if($blog->facebook_video_url)
                            <div class="mb-8">
                                <h3 class="text-xl font-semibold text-gray-900 mb-4">Featured Video</h3>
                                <div class="aspect-w-16 aspect-h-9 bg-gray-100 rounded-lg overflow-hidden">
                                    <iframe src="https://www.facebook.com/plugins/video.php?href={{ urlencode($blog->facebook_video_url) }}&show_text=0&width=800"
                                            class="w-full h-full"
                                            style="border:none;overflow:hidden"
                                            scrolling="no"
                                            frameborder="0"
                                            allowfullscreen="true"
                                            allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share">
                                    </iframe>
                                </div>
                                <p class="mt-3 text-sm text-gray-500 text-center">
                                    <a href="{{ $blog->facebook_video_url }}" target="_blank" class="text-blue-600 hover:underline">
                                        Watch on Facebook
                                    </a>
                                </p>
                            </div>
                        @endif

                        @if($blog->youtube_video_url)
                            <div class="mb-8">
                                <h3 class="text-xl font-semibold text-gray-900 mb-4">YouTube Video</h3>
                                @php
                                    $youtube_id = '';
                                    if (preg_match('/(?:youtube\.com\/watch\?v=|youtu\.be\/)([^&\n?#]+)/', $blog->youtube_video_url, $matches)) {
                                        $youtube_id = $matches[1];
                                    }
                                @endphp
                                @if($youtube_id)
                                    <div class="aspect-w-16 aspect-h-9 bg-gray-100 rounded-lg overflow-hidden">
                                        <iframe src="https://www.youtube.com/embed/{{ $youtube_id }}"
                                                class="w-full h-full"
                                                frameborder="0"
                                                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                                                allowfullscreen>
                                        </iframe>
                                    </div>
                                @else
                                    <div class="bg-gray-100 p-8 rounded-lg text-center">
                                        <p class="text-gray-600">Unable to load YouTube video</p>
                                        <a href="{{ $blog->youtube_video_url }}" target="_blank" class="text-blue-600 hover:underline mt-2 inline-block">
                                            Watch on YouTube
                                        </a>
                                    </div>
                                @endif
                                <p class="mt-3 text-sm text-gray-500 text-center">
                                    <a href="{{ $blog->youtube_video_url }}" target="_blank" class="text-blue-600 hover:underline">
                                        Watch on YouTube
                                    </a>
                                </p>
                            </div>
                        @endif
                    </div>
                @endif

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

                <style>
                .blog-content h1 { 
                    font-size: 1.875rem; 
                    font-weight: 700; 
                    color: #111827; 
                    margin-bottom: 1rem; 
                    margin-top: 1.5rem; 
                }
                .blog-content h2 { 
                    font-size: 1.5rem; 
                    font-weight: 700; 
                    color: #111827; 
                    margin-bottom: 0.75rem; 
                    margin-top: 1.5rem; 
                }
                .blog-content h3 { 
                    font-size: 1.25rem; 
                    font-weight: 600; 
                    color: #111827; 
                    margin-bottom: 0.75rem; 
                    margin-top: 1rem; 
                }
                .blog-content h4 { 
                    font-size: 1.125rem; 
                    font-weight: 600; 
                    color: #111827; 
                    margin-bottom: 0.5rem; 
                    margin-top: 1rem; 
                }
                .blog-content p { 
                    color: #374151; 
                    margin-bottom: 1rem; 
                    line-height: 1.75; 
                }
                .blog-content ul { 
                    list-style-type: disc; 
                    list-style-position: inside; 
                    margin-bottom: 1rem; 
                }
                .blog-content ol { 
                    list-style-type: decimal; 
                    list-style-position: inside; 
                    margin-bottom: 1rem; 
                }
                .blog-content li { 
                    color: #374151; 
                    margin-bottom: 0.25rem; 
                }
                .blog-content strong { 
                    font-weight: 600; 
                    color: #111827; 
                }
                .blog-content em { 
                    font-style: italic; 
                }
                .blog-content blockquote { 
                    border-left: 4px solid #3B82F6; 
                    padding-left: 1rem; 
                    font-style: italic; 
                    color: #4B5563; 
                    margin-bottom: 1rem; 
                }
                .blog-content code { 
                    background-color: #F3F4F6; 
                    padding: 0.125rem 0.25rem; 
                    border-radius: 0.25rem; 
                    font-size: 0.875rem; 
                    font-family: monospace; 
                }
                .blog-content pre { 
                    background-color: #F3F4F6; 
                    padding: 1rem; 
                    border-radius: 0.5rem; 
                    overflow-x: auto; 
                    margin-bottom: 1rem; 
                }
                .blog-content a { 
                    color: #2563EB; 
                    text-decoration: underline; 
                }
                .blog-content a:hover { 
                    color: #1E40AF; 
                }
                </style>

                <!-- Gallery Images -->
                @if($blog->images && count($blog->images) > 0)
                    <div class="mt-12">
                        <h3 class="text-2xl font-bold text-gray-900 mb-6">Gallery</h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                            @foreach($blog->images as $image)
                                <div class="group relative cursor-pointer" onclick="openImageModal('{{ asset('storage/' . $image) }}')">
                                    <img src="{{ asset('storage/' . $image) }}" 
                                         alt="Gallery Image" 
                                         class="w-full h-48 object-cover rounded-lg group-hover:opacity-90 transition-opacity">
                                    <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-20 rounded-lg transition-all flex items-center justify-center">
                                        <svg class="w-8 h-8 text-white opacity-0 group-hover:opacity-100 transition-opacity" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7"></path>
                                        </svg>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                @endif
            </article>
        </div>

        <!-- Related Blogs -->
        @if($relatedBlogs->count() > 0)
            <section class="mt-16">
                <h2 class="text-3xl font-bold text-gray-900 mb-8">Related Articles</h2>
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                    @foreach($relatedBlogs as $related)
                        <article class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300">
                            @if($related->featured_image)
                                <div class="aspect-video overflow-hidden">
                                    <img src="{{ asset('storage/' . $related->featured_image) }}" 
                                         alt="{{ $related->title }}" 
                                         class="w-full h-full object-cover hover:scale-105 transition-transform duration-300">
                                </div>
                            @endif
                            <div class="p-4">
                                @if($related->category)
                                    <span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs font-medium rounded-full mb-2 inline-block">
                                        {{ $related->category->name }}
                                    </span>
                                @endif
                                <h3 class="font-bold text-gray-900 mb-2 line-clamp-2">
                                    <a href="{{ route('blogs.show', $related) }}" class="hover:text-blue-600 transition-colors">
                                        {{ $related->title }}
                                    </a>
                                </h3>
                                <p class="text-sm text-gray-600 line-clamp-2 mb-3">{{ $related->excerpt }}</p>
                                <div class="text-xs text-gray-500">
                                    {{ $related->published_at->setTimezone('Asia/Dhaka')->format('M d, Y') }} • {{ number_format($related->views_count) }} views
                                </div>
                            </div>
                        </article>
                    @endforeach
                </div>
            </section>
        @endif

        <!-- Back to Blog -->
        <div class="text-center mt-12">
            <a href="{{ route('blogs.index') }}" 
               class="inline-flex items-center px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors">
                <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16l-4-4m0 0l4-4m-4 4h18"></path>
                </svg>
                Back to All Articles
            </a>
        </div>
    </div>
</div>

<!-- Image Modal -->
<div id="imageModal" class="fixed inset-0 bg-black bg-opacity-75 hidden z-50 items-center justify-center p-4">
    <div class="relative max-w-5xl max-h-full">
        <img id="modalImage" src="" alt="" class="max-w-full max-h-full object-contain rounded-lg">
        <button onclick="closeImageModal()" 
                class="absolute top-4 right-4 text-white hover:text-gray-300 text-3xl font-bold bg-black bg-opacity-50 rounded-full w-12 h-12 flex items-center justify-center">
            ×
        </button>
    </div>
</div>

<script>
function openImageModal(imageSrc) {
    document.getElementById('modalImage').src = imageSrc;
    const modal = document.getElementById('imageModal');
    modal.classList.remove('hidden');
    modal.classList.add('flex');
}

function closeImageModal() {
    const modal = document.getElementById('imageModal');
    modal.classList.add('hidden');
    modal.classList.remove('flex');
}

// Close modal when clicking outside the image
document.getElementById('imageModal').addEventListener('click', function(e) {
    if (e.target === this) {
        closeImageModal();
    }
});

// Close modal with Escape key
document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') {
        closeImageModal();
    }
});
</script>
</x-shop-layout>