@extends('layouts.admin')

@section('title', 'View Blog')

@section('content')
<div class="min-h-screen bg-gray-50 dark:bg-gray-900 py-6">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Header -->
        <div class="mb-8">
            <div class="flex justify-between items-center">
                <div>
                    <h1 class="text-3xl font-bold text-gray-900 dark:text-white">{{ $blog->title }}</h1>
                    <div class="mt-2 flex items-center space-x-4 text-sm text-gray-600 dark:text-gray-400">
                        <span>By {{ $blog->author->name }}</span>
                        <span>•</span>
                        <span>{{ $blog->created_at->setTimezone('Asia/Dhaka')->format('F d, Y') }}</span>
                        <span>•</span>
                        <span>{{ number_format($blog->views_count) }} views</span>
                        @if($blog->category)
                            <span>•</span>
                            <span class="px-2 py-1 bg-blue-100 text-blue-800 rounded-full text-xs">{{ $blog->category->name }}</span>
                        @endif
                    </div>
                </div>
                <div class="flex space-x-4">
                    <a href="{{ route('admin.blogs.edit', $blog) }}" 
                       class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-medium">
                        Edit Blog
                    </a>
                    <a href="{{ route('admin.blogs.index') }}" 
                       class="px-4 py-2 bg-gray-600 hover:bg-gray-700 text-white rounded-lg font-medium">
                        Back to Blogs
                    </a>
                </div>
            </div>
        </div>

        <!-- Status Badges -->
        <div class="mb-6 flex space-x-2">
            @if($blog->is_published)
                <span class="px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm font-medium">Published</span>
            @else
                <span class="px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm font-medium">Draft</span>
            @endif
            
            @if($blog->is_featured)
                <span class="px-3 py-1 bg-yellow-100 text-yellow-800 rounded-full text-sm font-medium">Featured</span>
            @endif
            
            <span class="px-3 py-1 rounded-full text-sm font-medium
                @if($blog->type === 'video') bg-red-100 text-red-800
                @elseif($blog->type === 'mixed') bg-purple-100 text-purple-800
                @else bg-green-100 text-green-800 @endif">
                {{ ucfirst($blog->type) }} Content
            </span>
        </div>

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

            <div class="p-6 space-y-6">
                <!-- Excerpt -->
                @if($blog->excerpt)
                    <div class="border-l-4 border-blue-500 pl-4">
                        <p class="text-lg text-gray-700 dark:text-gray-300 font-medium italic">
                            {{ $blog->excerpt }}
                        </p>
                    </div>
                @endif

                <!-- Content -->
                <div class="prose max-w-none dark:prose-invert">
                    {!! nl2br(e($blog->content)) !!}
                </div>

                <!-- Gallery Images -->
                @if($blog->images && count($blog->images) > 0)
                    <div class="border-t pt-6">
                        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Gallery</h3>
                        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
                            @foreach($blog->images as $image)
                                <div class="group relative">
                                    <img src="{{ asset('storage/' . $image) }}" 
                                         alt="Gallery Image" 
                                         class="w-full h-32 object-cover rounded-lg cursor-pointer hover:opacity-90 transition-opacity"
                                         onclick="openImageModal('{{ asset('storage/' . $image) }}')">
                                </div>
                            @endforeach
                        </div>
                    </div>
                @endif

                <!-- Video Content -->
                @if($blog->facebook_video_url || $blog->youtube_video_url)
                    <div class="border-t pt-6">
                        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Videos</h3>
                        
                        @if($blog->facebook_video_url)
                            <div class="mb-6">
                                <h4 class="text-md font-medium text-gray-900 dark:text-white mb-2">Facebook Video</h4>
                                <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=560"
                                            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-2 text-sm text-gray-500">
                                    <a href="{{ $blog->facebook_video_url }}" target="_blank" class="text-blue-600 hover:underline">
                                        View on Facebook
                                    </a>
                                </p>
                            </div>
                        @endif

                        @if($blog->youtube_video_url)
                            <div class="mb-6">
                                <h4 class="text-md font-medium text-gray-900 dark:text-white mb-2">YouTube Video</h4>
                                @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-4 rounded-lg">
                                        <p class="text-gray-600">Invalid YouTube URL format</p>
                                    </div>
                                @endif
                                <p class="mt-2 text-sm text-gray-500">
                                    <a href="{{ $blog->youtube_video_url }}" target="_blank" class="text-blue-600 hover:underline">
                                        View on YouTube
                                    </a>
                                </p>
                            </div>
                        @endif
                    </div>
                @endif

                <!-- Meta Information -->
                <div class="border-t pt-6">
                    <dl class="grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm">
                        <div>
                            <dt class="font-medium text-gray-900 dark:text-white">Slug</dt>
                            <dd class="text-gray-600 dark:text-gray-400 font-mono">{{ $blog->slug }}</dd>
                        </div>
                        <div>
                            <dt class="font-medium text-gray-900 dark:text-white">Created</dt>
                            <dd class="text-gray-600 dark:text-gray-400">{{ $blog->created_at->setTimezone('Asia/Dhaka')->format('F d, Y g:i A') }}</dd>
                        </div>
                        <div>
                            <dt class="font-medium text-gray-900 dark:text-white">Last Updated</dt>
                            <dd class="text-gray-600 dark:text-gray-400">{{ $blog->updated_at->setTimezone('Asia/Dhaka')->format('F d, Y g:i A') }}</dd>
                        </div>
                        @if($blog->published_at)
                            <div>
                                <dt class="font-medium text-gray-900 dark:text-white">Published</dt>
                                <dd class="text-gray-600 dark:text-gray-400">{{ $blog->published_at->setTimezone('Asia/Dhaka')->format('F d, Y g:i A') }}</dd>
                            </div>
                        @endif
                    </dl>
                </div>
            </div>
        </div>
    </div>
</div>

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

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

function closeImageModal() {
    document.getElementById('imageModal').classList.add('hidden');
}

// 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>
@endsection