@extends('layouts.app3')

@section('content')
<style>
    .blog-list-wrap { background-color: #f8f9fa; }
    .blogs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 2rem; margin: 2rem 0; }
    .blog-card { background: white; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 6px rgba(0,0,0,0.1); transition: transform 0.3s ease; }
    .blog-card:hover { transform: translateY(-5px); }
    .blog-image { width: 100%; height: auto; max-height: 350px; object-fit: contain; }
    .blog-content { padding: 1.5rem; }
    .blog-title { font-size: 1.25rem; font-weight: bold; margin-bottom: 0.5rem; color: #2c3e50; }
    .blog-excerpt { color: #495057; margin-bottom: 1rem; }
    .blog-category { background-color: #e9ecef; padding: 0.5rem; border-radius: 4px; font-size: 0.9rem; margin-bottom: 1rem; }
    .btn-blog { background-color: #007bff; color: white; padding: 0.75rem 1.5rem; text-decoration: none; border-radius: 4px; display: inline-block; }
    .btn-blog:hover { background-color: #0056b3; color: white; }
    .badge-featured { background-color: #ffc107; color: #212529; padding: 0.25rem 0.5rem; border-radius: 0.25rem; font-size: 0.75rem; font-weight: bold; }
    .no-blogs { text-align: center; padding: 4rem 0; color: #6c757d; }
    .blog-tags { margin-top: 1rem; }
    .tag { background-color: #f8f9fa; padding: 0.2rem 0.5rem; margin: 0.2rem; border-radius: 3px; font-size: 0.8rem; color: #495057; display: inline-block; }
    #blog-pagination nav { display: flex; justify-content: center; }
    #blog-pagination ul, #blog-pagination .pagination {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 4px !important;
        justify-content: center !important;
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    #blog-pagination li a,
    #blog-pagination li span,
    #blog-pagination .page-link,
    #blog-pagination button {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 5px 11px !important;
        font-size: 0.85rem !important;
        line-height: 1.4 !important;
        border-radius: 4px !important;
        min-width: unset !important;
        width: auto !important;
        height: auto !important;
        background: none;
        border: 1px solid #dee2e6;
        color: #004085;
        text-decoration: none;
    }
    #blog-pagination svg { display: none !important; }
</style>

<div class="blog-list-wrap">
    <div class="container py-5">
        <h2 class="mb-4">Events</h2>

        @if($blogs->count() > 0)
            <div class="blogs-grid">
                @foreach($blogs as $blog)
                    <div class="blog-card">
                        @if($blog->image)
                            <img src="{{ asset('blogs/' . $blog->image) }}" alt="{{ $blog->title }}" class="blog-image">
                        @else
                            <div style="height: 200px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; align-items: center; justify-content: center; color: white; font-size: 1.2rem;">
                                {{ $blog->title }}
                            </div>
                        @endif

                        <div class="blog-content">
                            <div style="display: flex; justify-content: space-between; align-items: start; margin-bottom: 0.5rem;">
                                <h3 class="blog-title">{{ $blog->title }}</h3>
                                @if($blog->is_featured)
                                    <span class="badge-featured">Featured</span>
                                @endif
                            </div>

                            <div class="blog-category">
                                📂 {{ $blog->category }}
                            </div>

                            <div class="blog-excerpt">
                                {{ $blog->excerpt_or_content }}
                            </div>

                            @if($blog->tags)
                                <div class="blog-tags">
                                    @foreach($blog->tags as $tag)
                                        <span class="tag">#{{ $tag }}</span>
                                    @endforeach
                                </div>
                            @endif

                            <div style="margin-top: 1rem;">
                                <a href="{{ route('blogs.show', $blog->slug) }}" class="btn-blog">Read More</a>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>

            <div id="blog-pagination" class="d-flex justify-content-center my-4">
                {{ $blogs->links() }}
            </div>
        @else
            <div class="no-blogs">
                <h3>No Blog Posts Found</h3>
                <p>There are currently no published blog posts. Please check back later.</p>
            </div>
        @endif
    </div>
</div>
@endsection