@extends('layouts.site')

@section('title', 'همه مطالب سایت' . ' | ' . settings('site_name'))


@section('content')



    <div class="container py-5" id="listPosts">

        <!-- نان‌بردکرامب -->
        <nav aria-label="breadcrumb" class="mb-4">
            <ol class="breadcrumb">
                <li class="breadcrumb-item">
                    <a href="{{ route('index') }}" class="text-decoration-none text-muted">خانه</a>
                </li>
                <li class="breadcrumb-item">
                    <a href="{{ route('blog.all') }}" class="text-decoration-none text-muted">وبلاگ</a>
                </li>
                <li class="breadcrumb-item active" aria-current="page">همه مطالب</li>
            </ol>
        </nav>

        <!-- هدر دسته -->
        <div class="category-header text-center">
            <h1 class="fw-bold mb-2">همه مطالب</h1>
            <p class="opacity-75 mb-0">
               تمام مطالب وبلاگ را میتوانید از این بخش مشاهده کنید
            </p>
        </div>

        <div class="row">
            <!-- لیست مقالات -->
            <div class="col-lg-8">

                <div class="row g-4">

                    @if(count($listPost))

                        @foreach($listPost as $item)

                            <div class="col-md-6">
                                <div class="post-card">

                                    @if(Storage::disk('VahabDisk')->exists($item->image))
                                        <div class="post-img-wrapper">
                                            <a href="{{ route('blog.view', $item->slug) }}">
                                                <img src="{{ Storage::disk('VahabDisk')->url($item->image) }}" class="post-img" alt="{{ $item->title }}">
                                            </a>
                                        </div>
                                    @endif
                                    <div class="post-body">
                                        <div class="post-meta">
                                            <span><i class="bi bi-calendar3"></i> {{ $item->created_at->format('Y/m/d') }}</span>
                                            <span><i class="bi bi-eye"></i> {{ $item->count_view }}</span>
                                        </div>
                                        <h5 class="fw-bold mb-3">
                                            <a href="{{ route('blog.view', $item->slug) }}" class="text-decoration-none text-dark">
                                                {{ $item->title }}
                                            </a>
                                        </h5>
                                        <p class="text-muted small flex-grow-1">
                                            {{ mb_substr($item->seo_description, 0, 255) }}
                                        </p>
                                        <a href="{{ route('blog.view', $item->slug) }}" class="text-decoration-none fw-bold mt-2" style="color: var(--primary-color);">ادامه مطلب <i class="bi bi-arrow-right small"></i></a>
                                    </div>
                                </div>
                            </div>
                        @endforeach

                    @else

                        <div class="alert alert-info">
                            <p>مطلبی برای نمایش وجود ندارد</p>
                        </div>

                    @endif

                </div>

                <!-- صفحه بندی -->
                <div class="d-flex justify-content-center mt-5">
                    {{ $listPost->links('pagination::bootstrap-5') }}
                </div>

            </div>

            <!-- سایدبار -->
            <div class="col-lg-4">

                <!-- جستجو -->
                <div class="sidebar-widget">
                    <h5 class="widget-title"><i class="bi bi-search"></i> جستجو در وبلاگ</h5>
                    <form method="get" action="{{ route('blog.all') }}" class="input-group">
                        <input type="text" class="form-control" name="search" value="{{ $search }}" placeholder="کلیدواژه...">
                        <button class="btn btn-primary" type="submit" style="background-color: var(--primary-color); border:none;">بیاب</button>
                    </form>
                </div>


                @if(count(blogCategories()))
                    <div class="sidebar-widget">
                        <h5 class="widget-title">
                            <i class="bi bi-folder"></i> دسته‌بندی‌ها
                        </h5>
                        <ul class="list-unstyled cat-list mb-0">
                            @foreach(blogCategories() as $cat)
                                <li class="mb-2">
                                    <a href="{{ route('blog.cat', $cat->slug) }}" class="text-decoration-none text-muted d-flex justify-content-between"><span>{{ $cat->name }}</span>
                                    </a>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                @endif




                @if(count(popularPosts()))
                    <div class="sidebar-widget">
                        <h5 class="widget-title"><i class="bi bi-fire"></i> پرطرفدارترین‌ها</h5>
                        @foreach(popularPosts() as $pop)
                            <div class="d-flex gap-3 mb-3 align-items-center">
                                <a href="{{ route('blog.view', $pop->slug) }}">
                                    <img src="{{ Storage::disk('VahabDisk')->url($pop->image) }}" class="rounded-3" style="width: 80px; height: 80px; object-fit: cover;" alt="{{ $pop->title }}">
                                </a>
                                <div>
                                    <h6 class="fw-bold mb-1 small">
                                        <a href="{{ route('blog.view', $pop->slug) }}" class="text-decoration-none text-dark">
                                            {{ $pop->title }}
                                        </a>
                                    </h6>
                                    <small class="text-muted">{{ $pop->created_at->format('Y/m/d') }}</small>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @endif

                <!-- خبرنامه -->
                <div class="sidebar-widget bg-primary bg-opacity-10 border-0">
                    <h5 class="widget-title text-primary"><i class="bi bi-envelope"></i> خبرنامه</h5>
                    <p class="small text-muted mb-3">برای اطلاع از آخرین مقالات ایمیل خود را وارد کنید.</p>
                    <form>
                        <input type="email" class="form-control mb-2" placeholder="ایمیل شما...">
                        <button class="btn btn-primary w-100" style="background-color: var(--primary-color); border:none;">عضویت</button>
                    </form>
                </div>

            </div>
        </div>
    </div>


@endsection
