@extends('layouts.app')

@section('title', $post->title . ' | Blog')

@section('content')
<div class="bg-gray-50 min-h-screen">
    <!-- Hero Section -->
    <div class="relative">
        @if($post->image)
            <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black opacity-60"></div>
            <div class="h-64 md:h-80 w-full bg-cover bg-center" style="background-image: url('{{ asset('storage/blog/' . $post->image) }}')"></div>
        @else
            <div class="h-64 md:h-80 w-full bg-gradient-to-r from-red-800 to-red-500"></div>
        @endif
        
        <div class="absolute bottom-0 left-0 right-0 p-6 md:p-12 text-white">
            <div class="container mx-auto max-w-4xl">
                <div class="flex flex-wrap items-center gap-4 mb-2">
                    <span class="bg-red-600 text-white text-xs font-bold uppercase px-3 py-1 rounded-full">
                        {{ $post->category }}
                    </span>
                    
                    @if($post->featured)
                    <span class="bg-red-500 text-white text-xs font-bold uppercase px-3 py-1 rounded-full">
                        Featured
                    </span>
                    @endif
                </div>
                <h1 class="text-3xl md:text-4xl lg:text-5xl font-bold mb-2">{{ $post->title }}</h1>
                
                <div class="flex flex-wrap items-center text-sm md:text-base mt-4 text-gray-100">
                    <div class="flex items-center mr-6">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <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" />
                        </svg>
                        {{ $post->author }}
                    </div>
                    
                    <div class="flex items-center">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <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" />
                        </svg>
                        {{ $post->publish_date->format('F d, Y') }}
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Main Content -->
    <div class="container mx-auto py-12 px-4">
        <div class="max-w-4xl mx-auto">
            <!-- Post Summary -->
            <div class="mb-8">
                <p class="text-xl text-gray-700 leading-relaxed font-semibold">
                    {{ $post->summary }}
                </p>
            </div>
            
            <!-- Divider -->
            <div class="border-b-2 border-gray-200 w-24 mb-8"></div>
            
            <!-- Post Content -->
            <div class="prose prose-lg max-w-none prose-red">
                {!! $post->content !!}
            </div>
            
            <!-- Social Sharing -->
            <div class="mt-12 pt-6 border-t border-gray-200">
                <h4 class="text-lg font-semibold mb-4">Share this post</h4>
                <div class="flex space-x-4">
                    <a href="https://twitter.com/intent/tweet?url={{ urlencode(url()->current()) }}&text={{ urlencode($post->title) }}" 
                       target="_blank" 
                       class="bg-blue-400 hover:bg-blue-500 text-white p-2 rounded-full transition duration-300">
                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                            <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.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.072 4.072 0 012.8 9.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 012 18.407a11.616 11.616 0 006.29 1.84" />
                        </svg>
                    </a>
                    <a href="https://www.facebook.com/sharer/sharer.php?u={{ urlencode(url()->current()) }}" 
                       target="_blank" 
                       class="bg-blue-600 hover:bg-blue-700 text-white p-2 rounded-full transition duration-300">
                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                            <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.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.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd" />
                        </svg>
                    </a>
                    <a href="https://www.linkedin.com/shareArticle?mini=true&url={{ urlencode(url()->current()) }}&title={{ urlencode($post->title) }}" 
                       target="_blank" 
                       class="bg-blue-800 hover:bg-blue-900 text-white p-2 rounded-full transition duration-300">
                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                            <path fill-rule="evenodd" d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" clip-rule="evenodd" />
                        </svg>
                    </a>
                </div>
            </div>
            
            <!-- Related Posts -->
            @if(isset($relatedPosts) && $relatedPosts->count() > 0)
            <div class="mt-16 pt-12 border-t border-gray-200">
                <h2 class="text-2xl font-bold mb-8">You might also like</h2>
                
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    @foreach($relatedPosts as $relatedPost)
                    <a href="{{ route('blog.show', $relatedPost->slug) }}" class="group">
                        <div class="bg-white rounded-lg shadow-sm overflow-hidden transition-transform duration-300 transform group-hover:-translate-y-1 group-hover:shadow-md">
                            @if($relatedPost->image)
                            <div class="h-48 bg-cover bg-center" style="background-image: url('{{ asset('storage/blog/' . $relatedPost->image) }}')"></div>
                            @else
                            <div class="h-48 bg-gradient-to-r from-red-700 to-red-500 flex items-center justify-center">
                                <span class="text-white text-xl font-semibold">{{ $relatedPost->category }}</span>
                            </div>
                            @endif
                            <div class="p-6">
                                <div class="text-xs text-gray-600 mb-2">{{ $relatedPost->publish_date->format('F d, Y') }}</div>
                                <h3 class="text-lg font-semibold mb-2 group-hover:text-red-600 line-clamp-2">{{ $relatedPost->title }}</h3>
                                <p class="text-gray-700 line-clamp-3">{{ $relatedPost->summary }}</p>
                            </div>
                        </div>
                    </a>
                    @endforeach
                </div>
            </div>
            @endif
            
            <!-- Back to Blog Link -->
            <div class="mt-12 text-center">
                <a href="{{ route('blog.index') }}" class="inline-flex items-center text-red-600 hover:text-red-800">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
                    </svg>
                    Back to Blog
                </a>
            </div>
        </div>
    </div>
</div>
@endsection