@extends('layouts.app')

@section('title', $post->title . ' - Redsom Group')

@section('description', Str::limit(strip_tags($post->content), 160))

@section('content')
<div class="bg-primary text-white py-12">
    <div class="max-w-7xl mx-auto px-4">
        <a href="/media" class="text-gray-300 hover:text-white mb-4 inline-flex items-center">
            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
            </svg>
            Back to Media
        </a>
        <h1 class="text-3xl md:text-4xl font-bold">{{ $post->title }}</h1>
        <div class="flex items-center gap-4 mt-4 text-gray-300">
            <span class="px-2 py-1 bg-accent text-primary rounded text-sm font-semibold">{{ $post->type }}</span>
            <span class="px-2 py-1 bg-gray-600 rounded text-sm">{{ $post->category }}</span>
            <span>{{ $post->published_at->format('F d, Y') }}</span>
            <span>{{ $post->views }} views</span>
        </div>
    </div>
</div>

<section class="py-12">
    <div class="max-w-4xl mx-auto px-4">
        @if($post->media_path)
            @if($post->type === 'image')
            <img src="{{ asset('storage/' . $post->media_path) }}" alt="{{ $post->title }}" class="w-full rounded-xl shadow-lg mb-8">
            @elseif($post->type === 'video')
            <video controls class="w-full rounded-xl shadow-lg mb-8">
                <source src="{{ asset('storage/' . $post->media_path) }}" type="video/mp4">
                Your browser does not support the video tag.
            </video>
            @endif
        @endif

        <div class="prose max-w-none">
            @if($post->content)
                <p class="text-gray-600 text-lg leading-relaxed">{{ $post->content }}</p>
            @else
                <p class="text-gray-600 text-lg leading-relaxed">This is a {{ $post->type }} post in the {{ $post->category }} category.</p>
            @endif
        </div>

        @if($post->thumbnail_path && $post->type === 'video')
        <div class="mt-8">
            @if($post->thumbnail_path)
            <img src="{{ asset('storage/' . $post->thumbnail_path) }}" alt="Thumbnail" class="w-full rounded-xl shadow-lg">
            @endif
        </div>
        @endif
    </div>
</section>

@if($relatedPosts->count() > 0)
<section class="py-12 bg-gray-50">
    <div class="max-w-7xl mx-auto px-4">
        <h2 class="text-2xl font-bold text-primary mb-8">Related Posts</h2>
        <div class="grid md:grid-cols-3 gap-8">
            @foreach($relatedPosts as $related)
            <a href="{{ route('posts.show', $related->slug) }}" class="bg-white rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition">
                @if($related->thumbnail_path)
                <img src="{{ asset('storage/' . $related->thumbnail_path) }}" alt="{{ $related->title }}" class="w-full h-40 object-cover">
                @elseif($related->media_path)
                <img src="{{ asset('storage/' . $related->media_path) }}" alt="{{ $related->title }}" class="w-full h-40 object-cover">
                @else
                <div class="w-full h-40 bg-primary-100 flex items-center justify-center">
                    <span class="text-3xl text-accent">📰</span>
                </div>
                @endif
                <div class="p-4">
                    <h3 class="font-bold text-primary line-clamp-2">{{ $related->title }}</h3>
                    <p class="text-sm text-gray-500 mt-2">{{ $related->published_at->format('M d, Y') }}</p>
                </div>
            </a>
            @endforeach
        </div>
    </div>
</section>
@endif
@endsection