@extends('user.blog.layout')
@section('title', 'وبلاگ')

@section('content')
<!-- Blog Header -->
<div class="blog-header">
    <div class="container">
        <div class="text-center">
            <h1>وبلاگ</h1>
            <p>مقالات و مطالب مفید</p>
        </div>
    </div>
</div>

<div class="container">
    <div class="row">
        <!-- Main Content -->
        <div class="col-lg-9">
            @if(request()->has('category') || request()->has('tag') || request()->has('search'))
                <div class="mb-4">
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="{{ route('blog.index') }}">وبلاگ</a></li>
                            @if(request()->has('category'))
                                <li class="breadcrumb-item active">دسته‌بندی: {{ request()->category }}</li>
                            @endif
                            @if(request()->has('tag'))
                                <li class="breadcrumb-item active">برچسب: {{ request()->tag }}</li>
                            @endif
                            @if(request()->has('search'))
                                <li class="breadcrumb-item active">جستجو: {{ request()->search }}</li>
                            @endif
                        </ol>
                    </nav>
                </div>
            @endif

            <!-- Search Form -->
            <div class="card search-form-card mb-4">
                <div class="card-body">
                    <form action="{{ route('blog.index') }}" method="GET" class="row g-3">
                        <div class="col-md-8">
                            <input type="text" name="search" class="form-control" placeholder="جستجو در وبلاگ..." value="{{ request()->search }}">
                        </div>
                        <div class="col-md-4">
                            <button type="submit" class="btn btn-primary w-100">
                                <i class="bx bx-search"></i> جستجو
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Posts Grid -->
            @if($posts->count() > 0)
                <div class="row">
                    @foreach($posts as $post)
                        <div class="col-md-6 mb-4">
                            <div class="card blog-post-card" style="overflow: hidden;">
                                <a href="{{ route('blog.show', $post->slug) }}" style="display: block; overflow: hidden;">
                                    @if(!empty($post->featured_image) && $post->featured_image !== 'undefined')
                                        {!! optimizedImage($post->featured_image, [
                                            'alt' => $post->title ?? 'تصویر شاخص',
                                            'class' => 'card-img-top',
                                            'lazy' => true,
                                            'loading' => 'lazy',
                                            'style' => 'object-fit: cover; height:220px; width:100%; display: block;',
                                            'width' => '100%'
                                        ]) !!}
                                    @else
                                        <div class="card-img-top bg-light d-flex align-items-center justify-content-center" style="height:220px; width:100%;">
                                            <i class="bx bx-image" style="font-size: 3rem; color: #ccc;"></i>
                                        </div>
                                    @endif
                                </a>
                                <div class="card-body">
                                    <h5 class="card-title">
                                        <a href="{{ route('blog.show', $post->slug) }}">{{ $post->title }}</a>
                                    </h5>
                                    <div class="blog-post-meta">
                                        <small>
                                            <i class="bx bx-calendar me-1"></i> 
                                            {{ \Morilog\Jalali\Jalalian::fromCarbon($post->published_at)->format('Y/m/d') }}
                                            <i class="bx bx-user me-1 ms-3"></i> 
                                            {{ $post->author->name ?? 'نامشخص' }}
                                            <i class="bx bx-show me-1 ms-3"></i> 
                                            {{ number_format($post->unique_views_count) }}
                                        </small>
                                    </div>
                                    @if($post->excerpt)
                                        <p class="blog-post-excerpt">{{ Str::limit($post->excerpt, 120) }}</p>
                                    @endif
                                    <div class="d-flex justify-content-between align-items-center">
                                        <a href="{{ route('blog.show', $post->slug) }}" class="btn btn-sm btn-primary">
                                            ادامه مطلب <i class="bx bx-left-arrow-alt"></i>
                                        </a>
                                        @if($post->categories->count() > 0)
                                            <div>
                                                @foreach($post->categories->take(2) as $category)
                                                    <span class="badge bg-secondary">{{ $category->name }}</span>
                                                @endforeach
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>

                <!-- Pagination -->
                @if($posts->hasPages())
                    <div class="d-flex justify-content-center mt-4">
                        {{ $posts->links() }}
                    </div>
                @endif
            @else
                <div class="card">
                    <div class="card-body empty-state">
                        <i class="bx bx-file-blank"></i>
                        <h4 class="mt-3">هیچ پستی یافت نشد</h4>
                        <p class="text-muted">در حال حاضر هیچ پستی در وبلاگ وجود ندارد.</p>
                    </div>
                </div>
            @endif
        </div>

        <!-- Sidebar -->
        <div class="col-lg-3">
            <div class="blog-sidebar">
                <!-- Categories -->
                @if($categories->count() > 0)
                    <div class="card mb-4">
                        <div class="card-header">
                            <h5 class="mb-0"><i class="bx bx-folder me-2"></i>دسته‌بندی‌ها</h5>
                        </div>
                        <div class="card-body">
                            <ul class="list-unstyled mb-0">
                                @foreach($categories as $category)
                                    <li class="mb-2">
                                        <a href="{{ route('blog.index', ['category' => $category->slug]) }}" class="text-decoration-none d-flex justify-content-between align-items-center">
                                            <span>{{ $category->name }}</span>
                                            <span class="badge bg-light text-dark">{{ $category->publishedPosts->count() }}</span>
                                        </a>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                @endif

                <!-- Popular Tags -->
                @if($popularTags->count() > 0)
                    <div class="card mb-4">
                        <div class="card-header">
                            <h5 class="mb-0"><i class="bx bx-tag me-2"></i>برچسب‌های محبوب</h5>
                        </div>
                        <div class="card-body">
                            <div class="d-flex flex-wrap gap-2">
                                @foreach($popularTags as $tag)
                                    <a href="{{ route('blog.index', ['tag' => $tag->slug]) }}" class="badge bg-primary text-decoration-none">
                                        {{ $tag->name }}
                                    </a>
                                @endforeach
                            </div>
                        </div>
                    </div>
                @endif

                <!-- Recent Posts -->
                @if(isset($recentPosts) && $recentPosts->count() > 0)
                    <div class="card">
                        <div class="card-header">
                            <h5 class="mb-0"><i class="bx bx-time me-2"></i>پست‌های اخیر</h5>
                        </div>
                        <div class="card-body">
                            <ul class="list-unstyled mb-0">
                                @foreach($recentPosts as $recentPost)
                                    <li class="mb-3 pb-3 border-bottom">
                                        <a href="{{ route('blog.show', $recentPost->slug) }}" class="text-decoration-none">
                                            <h6 class="mb-1" style="font-size: 0.9rem;">{{ Str::limit($recentPost->title, 50) }}</h6>
                                            <small class="text-muted">
                                                {{ \Morilog\Jalali\Jalalian::fromCarbon($recentPost->published_at)->format('Y/m/d') }}
                                            </small>
                                        </a>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection