@extends('layouts.main')
@section('title', 'Posts – World Gymnastics')

@section('styles')
<style>
    .posts-hero {
        background: linear-gradient(135deg, #0a0a1a 0%, #1a1a3e 50%, #0d1b2a 100%);
        padding: 60px 0 40px;
        margin-bottom: 0;
    }
    .posts-hero h1 {
        font-family: 'Montserrat', sans-serif;
        font-weight: 800;
        font-size: 2.5rem;
        color: #fff;
        letter-spacing: 3px;
    }
    .posts-hero p {
        color: rgba(255,255,255,0.6);
        font-size: 1rem;
    }
    .posts-section {
        background: #f4f6fa;
        padding: 50px 0 80px;
    }
    .post-card {
        background: #fff;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 2px 15px rgba(0,0,0,0.07);
        transition: transform 0.2s, box-shadow 0.2s;
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    .post-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 30px rgba(0,0,0,0.13);
    }
    .post-card-img {
        width: 100%;
        height: 200px;
        object-fit: cover;
    }
    .post-card-img-placeholder {
        width: 100%;
        height: 200px;
        background: linear-gradient(135deg, #1a1a3e, #0d3b6e);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .post-card-img-placeholder i {
        font-size: 3rem;
        color: rgba(255,255,255,0.3);
    }
    .post-card-body {
        padding: 20px;
        flex: 1;
        display: flex;
        flex-direction: column;
    }
    .post-status-badge {
        font-size: 0.7rem;
        font-weight: 600;
        letter-spacing: 1px;
        padding: 3px 10px;
        border-radius: 20px;
        text-transform: uppercase;
    }
    .badge-published { background: #d4edda; color: #155724; }
    .badge-draft { background: #fff3cd; color: #856404; }
    .post-card h5 {
        font-family: 'Montserrat', sans-serif;
        font-weight: 700;
        font-size: 1rem;
        color: #1a1a3e;
        margin: 10px 0 8px;
        line-height: 1.4;
    }
    .post-card p.excerpt {
        color: #666;
        font-size: 0.88rem;
        line-height: 1.6;
        flex: 1;
    }
    .post-card-footer {
        border-top: 1px solid #f0f0f0;
        padding: 12px 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 0.8rem;
        color: #999;
    }
    .btn-create-post {
        background: linear-gradient(135deg, #1a1a3e, #0d3b6e);
        color: #fff;
        border: none;
        padding: 10px 28px;
        border-radius: 8px;
        font-weight: 600;
        font-size: 0.9rem;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        transition: opacity 0.2s;
    }
    .btn-create-post:hover { opacity: 0.85; color: #fff; }
    .alert-success-custom {
        background: #d4edda;
        border: 1px solid #c3e6cb;
        color: #155724;
        border-radius: 8px;
        padding: 12px 18px;
        margin-bottom: 24px;
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .read-more-link {
        color: #0d3b6e;
        font-weight: 600;
        font-size: 0.85rem;
        text-decoration: none;
    }
    .read-more-link:hover { color: #1a1a3e; }
</style>
@endsection

@section('content')
<div class="posts-hero">
    <div class="container">
        <div class="d-flex align-items-center justify-content-between flex-wrap gap-3">
            <div>
                <h1>POSTS</h1>
                <p>Latest updates, articles and announcements</p>
            </div>
            @auth
            <a href="{{ route('posts.create') }}" class="btn-create-post">
                <i class="bi bi-pencil-square"></i> New Post
            </a>
            @endauth
        </div>
    </div>
</div>

<div class="posts-section">
    <div class="container">

        @if(session('success'))
        <div class="alert-success-custom">
            <i class="bi bi-check-circle-fill"></i>
            {{ session('success') }}
        </div>
        @endif

        @if($posts->isEmpty())
        <div class="text-center py-5">
            <i class="bi bi-newspaper" style="font-size:3rem;color:#ccc;"></i>
            <p class="mt-3 text-muted">No posts yet. Be the first to write one!</p>
            @auth
            <a href="{{ route('posts.create') }}" class="btn-create-post mt-2">
                <i class="bi bi-pencil-square"></i> Create Post
            </a>
            @endauth
        </div>
        @else
        <div class="row g-4">
            @foreach($posts as $post)
            <div class="col-sm-6 col-lg-4">
                <div class="post-card">
                    @if($post->image)
                    <img src="{{ asset('storage/' . $post->image) }}" class="post-card-img" alt="{{ $post->title }}">
                    @else
                    <div class="post-card-img-placeholder">
                        <i class="bi bi-image"></i>
                    </div>
                    @endif
                    <div class="post-card-body">
                        <div>
                            <span class="post-status-badge {{ $post->status === 'published' ? 'badge-published' : 'badge-draft' }}">
                                {{ $post->status }}
                            </span>
                        </div>
                        <h5>{{ $post->title }}</h5>
                        <p class="excerpt">{{ Str::limit(strip_tags($post->body), 110) }}</p>
                        <a href="{{ route('posts.show', $post) }}" class="read-more-link mt-2">
                            Read more <i class="bi bi-arrow-right"></i>
                        </a>
                    </div>
                    <div class="post-card-footer">
                        <span><i class="bi bi-person me-1"></i>{{ $post->user->name }}</span>
                        <span><i class="bi bi-calendar3 me-1"></i>{{ $post->created_at->format('d M Y') }}</span>
                    </div>
                </div>
            </div>
            @endforeach
        </div>

        <div class="mt-5 d-flex justify-content-center">
            {{ $posts->links() }}
        </div>
        @endif

    </div>
</div>
@endsection