@extends('layouts.app')

@section('title', $post->title)
@section('meta_description', $post->meta_description ?? Str::limit(strip_tags($post->content), 160))
@section('meta_keywords', $post->meta_keywords)

@section('content')
<div class="mx-auto">
    <!-- Breadcrumb -->
    <nav class="flex mb-6 text-sm text-gray-400" aria-label="Breadcrumb">
        <ol class="inline-flex items-center space-x-1 md:space-x-3">
            <li class="inline-flex items-center">
                <a href="{{ url('/') }}" class="inline-flex items-center hover:text-white">
                    <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20"><path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path></svg>
                    Home
                </a>
            </li>
            @if($post->category)
            <li>
                <div class="flex items-center">
                    <svg class="w-6 h-6 text-gray-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
                    <a href="{{ url('/category/' . $post->category->slug) }}" class="ml-1 text-gray-400 hover:text-white md:ml-2">{{ $post->category->name }}</a>
                </div>
            </li>
            @endif
            <li aria-current="page">
                <div class="flex items-center">
                    <svg class="w-6 h-6 text-gray-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
                    <span class="ml-1 text-gray-100 md:ml-2 font-medium truncate max-w-[200px] sm:max-w-xs">{{ $post->title }}</span>
                </div>
            </li>
        </ol>
    </nav>
#Letakan iklan disini
    <!-- Article Header -->
    <header class="mb-8">
        <div class="flex items-center gap-2 mb-4">
            @if($post->category)
            <span class="bg-blue-600 text-white text-xs font-bold px-2 py-1 rounded">{{ $post->category->name }}</span>
            @endif
            <span class="text-gray-400 text-sm">{{ $post->published_at->format('M d, Y') }}</span>
        </div>
        <h1 class="text-3xl md:text-4xl lg:text-5xl font-bold text-white mb-6 leading-tight">
            {{ $post->title }}
        </h1>
        <div class="flex items-center gap-3 border-b border-gray-700 pb-6">
            <div class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center text-xl">👤</div>
            <div>
                <div class="text-white font-medium">By Admin</div>
                <div class="text-gray-500 text-xs">Sports Journalist</div>
            </div>
        </div>
    </header>

    <!-- Featured Image -->
    <div class="mb-10 rounded-xl overflow-hidden shadow-2xl">
        <img src="{{ $post->image ?? 'https://placehold.co/400x300/1f2937/60a5fa?text='.$post->title }}" alt="{{ $post->title }}" class="w-full h-auto object-cover">
    </div>

    <!-- Article Content -->
    <article class="prose prose-invert prose-lg max-w-none text-gray-300">
        {!! $post->content !!}
    </article>
    
    @if($post->tags)
    <div class="mt-8">
        <h4 class="text-white font-semibold mb-2">Tags:</h4>
        <div class="flex flex-wrap gap-2">
            @foreach(explode(',', $post->tags) as $tag)
            <span class="bg-gray-800 text-gray-300 px-3 py-1 rounded-full text-sm">{{ trim($tag) }}</span>
            @endforeach
        </div>
    </div>
    @endif

    <!-- Share & Tags -->
    <div class="mt-12 pt-8 border-t border-gray-700">
        <h3 class="text-lg font-semibold text-white mb-4">Share this article</h3>
        <div class="flex gap-4">
            <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded transition">Facebook</button>
            <button class="bg-sky-500 hover:bg-sky-600 text-white px-4 py-2 rounded transition">Twitter</button>
            <button class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded transition">WhatsApp</button>
        </div>
    </div>

    <!-- Related Posts -->
    @if(isset($relatedPosts) && $relatedPosts->count() > 0)
    <div class="mt-16 pt-8 border-t border-gray-700">
        <h3 class="text-2xl font-bold text-white mb-6">Related Posts</h3>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            @foreach($relatedPosts as $relatedPost)
            <a href="{{ url('/post/' . $relatedPost->slug) }}" class="group block bg-gray-800 rounded-lg overflow-hidden shadow hover:bg-gray-750 transition">
                <div class="h-48 overflow-hidden">
                    <img src="{{ $relatedPost->image ?? 'https://placehold.co/400x300/1f2937/60a5fa?text=Related' }}" alt="{{ $relatedPost->title }}" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500">
                </div>
                <div class="p-4">
                    <h4 class="text-white font-bold text-lg mb-2 group-hover:text-blue-400 line-clamp-2">{{ $relatedPost->title }}</h4>
                    <p class="text-gray-400 text-sm line-clamp-2">{{ $relatedPost->excerpt ?? Str::limit(strip_tags($relatedPost->content), 100) }}</p>
                </div>
            </a>
            @endforeach
        </div>
    </div>
    @endif
</div>
@include('components.content-locker')
@endsection