@extends('layouts.main')
@section('title', $post->title . ' – World Gymnastics')

@section('styles')
<style>
    .post-hero {
        background: linear-gradient(135deg, #0a0a1a 0%, #1a1a3e 50%, #0d1b2a 100%);
        padding: 60px 0 40px;
    }
    .post-hero .breadcrumb-item a { color: rgba(255,255,255,0.6); text-decoration: none; }
    .post-hero .breadcrumb-item.active { color: rgba(255,255,255,0.9); }
    .post-hero .breadcrumb-divider { color: rgba(255,255,255,0.4); }
    .post-section { background: #f4f6fa; padding: 50px 0 80px; }
    .post-wrapper {
        max-width: 820px;
        margin: 0 auto;
        background: #fff;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 4px 30px rgba(0,0,0,0.09);
    }
    .post-cover {
        width: 100%;
        max-height: 420px;
        object-fit: cover;
    }
    .post-body-wrap { padding: 40px; }
    .post-status {
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        padding: 4px 12px;
        border-radius: 20px;
    }
    .status-published { background: #d4edda; color: #155724; }
    .status-draft { background: #fff3cd; color: #856404; }
    .post-title {
        font-family: 'Montserrat', sans-serif;
        font-weight: 800;
        font-size: 2rem;
        color: #1a1a3e;
        margin: 16px 0 10px;
        line-height: 1.3;
    }
    .post-meta {
        display: flex;
        align-items: center;
        gap: 20px;
        color: #888;
        font-size: 0.85rem;
        margin-bottom: 30px;
        padding-bottom: 24px;
        border-bottom: 1px solid #f0f0f0;
    }
    .post-meta i { margin-right: 5px; }
    .post-content {
        color: #333;
        font-size: 1rem;
        line-height: 1.85;
        white-space: pre-wrap;
    }
    .post-actions {
        margin-top: 36px;
        padding-top: 24px;
        border-top: 1px solid #f0f0f0;
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
    }
    .btn-edit-post {
        background: linear-gradient(135deg, #1a1a3e, #0d3b6e);
        color: #fff;
        border: none;
        padding: 10px 24px;
        border-radius: 8px;
        font-weight: 600;
        font-size: 0.88rem;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 7px;
    }
    .btn-edit-post:hover { opacity: 0.85; color: #fff; }
    .btn-delete-post {
        background: #fee2e2;
        color: #991b1b;
        border: none;
        padding: 10px 24px;
        border-radius: 8px;
        font-weight: 600;
        font-size: 0.88rem;
        display: inline-flex;
        align-items: center;
        gap: 7px;
        cursor: pointer;
    }
    .btn-delete-post:hover { background: #fca5a5; }
    .btn-back {
        color: #666;
        font-size: 0.88rem;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }
    .btn-back:hover { color: #1a1a3e; }
</style>
@endsection

@section('content')
<div class="post-hero">
    <div class="container">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-0">
                <li class="breadcrumb-item"><a href="{{ route('posts.index') }}">Posts</a></li>
                <li class="breadcrumb-item active" aria-current="page">{{ Str::limit($post->title, 50) }}</li>
            </ol>
        </nav>
    </div>
</div>

<div class="post-section">
    <div class="container">
        <div class="post-wrapper">

            @if($post->image)
            <img src="{{ asset('storage/' . $post->image) }}" class="post-cover" alt="{{ $post->title }}">
            @endif

            <div class="post-body-wrap">
                <span class="post-status {{ $post->status === 'published' ? 'status-published' : 'status-draft' }}">
                    {{ $post->status }}
                </span>

                <h1 class="post-title">{{ $post->title }}</h1>

                <div class="post-meta">
                    <span><i class="bi bi-person-circle"></i>{{ $post->user->name }}</span>
                    <span><i class="bi bi-calendar3"></i>{{ $post->created_at->format('d M Y') }}</span>
                    @if($post->updated_at->ne($post->created_at))
                    <span><i class="bi bi-pencil"></i>Updated {{ $post->updated_at->diffForHumans() }}</span>
                    @endif
                </div>

                <div class="post-content">{{ $post->body }}</div>

                <div class="post-actions">
                    <a href="{{ route('posts.index') }}" class="btn-back">
                        <i class="bi bi-arrow-left"></i> Back to Posts
                    </a>

                    @auth
                    @if(auth()->id() === $post->user_id || auth()->user()->is_admin)
                    <a href="{{ route('posts.edit', $post) }}" class="btn-edit-post">
                        <i class="bi bi-pencil"></i> Edit
                    </a>
                    <form method="POST" action="{{ route('posts.destroy', $post) }}" id="deleteForm">
                        @csrf
                        @method('DELETE')
                        <button type="button" class="btn-delete-post" onclick="confirmDelete()">
                            <i class="bi bi-trash"></i> Delete
                        </button>
                    </form>
                    @endif
                    @endauth
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
function confirmDelete() {
    if (confirm('Are you sure you want to delete this post? This cannot be undone.')) {
        document.getElementById('deleteForm').submit();
    }
}
</script>
@endsection