@extends('layouts.user_type.guest')
@section('header_title', __('وبلاگ'))

@section('seo_description', \App\Support\Seo::description(__('آخرین مقاله‌ها، خبرها و نوشته‌های سینمایی')))
@section('canonical', localized_route('blog.index'))

@push('extra_css')
    <style>
        .blog-shell {
            padding: 120px 0 70px;
            color: var(--text);
        }

        .blog-hero {
            min-height: 310px;
            display: flex;
            align-items: flex-end;
            padding: 120px 0 44px;
            background-size: cover;
            background-position: center;
            position: relative;
        }

        .blog-hero:before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(16, 16, 20, .35), rgba(16, 16, 20, .92));
        }

        .blog-hero .container {
            position: relative;
            z-index: 1;
        }

        .blog-hero h1 {
            font-size: 44px;
            font-weight: 900;
            margin-bottom: 12px;
        }

        .blog-hero p {
            max-width: 660px;
            color: rgba(255, 255, 255, .78);
            line-height: 2;
            margin: 0;
        }

        .blog-toolbar {
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 12px;
            margin-bottom: 26px;
        }

        .blog-toolbar input {
            min-height: 52px;
            border-radius: 8px;
            background: var(--bg2);
            border: 1px solid rgba(255, 255, 255, .08);
            color: var(--text);
        }

        .blog-toolbar button {
            min-width: 130px;
            border-radius: 8px;
            border: 0;
            background: var(--primaryColor);
            color: #fff;
            font-weight: 800;
        }

        .blog-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 18px;
        }

        .blog-card {
            overflow: hidden;
            border-radius: 8px;
            background: var(--bg2);
            border: 1px solid rgba(255, 255, 255, .08);
            height: 100%;
        }

        .blog-card__image {
            aspect-ratio: 16 / 9;
            display: block;
            overflow: hidden;
            background: var(--bg_darker);
        }

        .blog-card__image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform .25s ease;
        }

        .blog-card:hover .blog-card__image img {
            transform: scale(1.04);
        }

        .blog-card__body {
            padding: 18px;
        }

        .blog-card__meta {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            color: #9fb0cc;
            font-size: 13px;
            margin-bottom: 12px;
        }

        .blog-card__body h2 {
            font-size: 19px;
            line-height: 1.8;
            margin: 0 0 10px;
        }

        .blog-card__body h2 a {
            color: var(--text);
        }

        .blog-card__body p {
            color: #9fb0cc;
            line-height: 2;
            margin-bottom: 16px;
        }

        .blog-readmore {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: #fff;
            background: rgba(73, 88, 165, .18);
            border: 1px solid rgba(73, 88, 165, .45);
            padding: 9px 13px;
            border-radius: 8px;
            font-weight: 800;
        }

        .blog-empty,
        .blog-widget {
            background: var(--bg2);
            border: 1px solid rgba(255, 255, 255, .08);
            border-radius: 8px;
        }

        .blog-empty {
            padding: 44px 20px;
            text-align: center;
            color: #9fb0cc;
        }

        .blog-pagination {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 28px;
        }

        .blog-pagination a,
        .blog-pagination span {
            color: var(--text);
        }

        @media (max-width: 991px) {
            .blog-grid {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 576px) {
            .blog-hero h1 {
                font-size: 32px;
            }

            .blog-toolbar {
                grid-template-columns: 1fr;
            }

            .blog-shell {
                padding-top: 80px;
            }
        }
    </style>
@endpush

@section('content')
    @php
        use App\Helpers\xDate;
        use Illuminate\Support\Str;

        $fallbackImage = url('assets/images/logo.png');
    @endphp

    <main>
        <section class="blog-hero" style="background-image: url('{{ url('images/01-bg-ganr.jpeg') }}')">
            <div class="container">
                <h1>{{ __('وبلاگ') }}</h1>
                <p>{{ __('یادداشت ها، خبرها و پرونده های سینمایی سایت را در همین بخش دنبال کنید.') }}</p>
            </div>
        </section>

        <section class="blog-shell">
            <div class="container">
                <div class="row g-4">
                    <div class="col-lg-8">
                        <form class="blog-toolbar" action="{{ localized_route('blog.index') }}" method="GET">
                            <input type="text" name="q" value="{{ $search }}" class="form-control" placeholder="{{ __('جستجو در مقاله ها') }}">
                            <button type="submit">{{ __('جستجو') }}</button>
                        </form>

                        <div class="blog-grid">
                            @forelse($blogs as $blog)
                                @php
                                    $image = $blog->banner ? url($blog->banner->file_path) : $fallbackImage;
                                    $date = $blog->publish_time ?: $blog->created_at;
                                    $dateLabel = $date ? xDate::dateFa('~ j F Y', $date->timestamp) : '';
                                    $excerpt = Str::limit(strip_tags($blog->short_description ?: $blog->body?->body), 160);
                                @endphp
                                <article class="blog-card">
                                    <a class="blog-card__image" href="{{ localized_route('blog.single', ['nic_name' => $blog->public_key]) }}">
                                        <img src="{{ $image }}" alt="{{ $blog->title }}">
                                    </a>
                                    <div class="blog-card__body">
                                        <div class="blog-card__meta">
                                            <span><i class="far fa-folder"></i> {{ $blog->category?->localized_title ?? __('عمومی') }}</span>
                                            @if($dateLabel)
                                                <span><i class="far fa-calendar"></i> {{ $dateLabel }}</span>
                                            @endif
                                        </div>
                                        <h2>
                                            <a href="{{ localized_route('blog.single', ['nic_name' => $blog->public_key]) }}">{{ $blog->title }}</a>
                                        </h2>
                                        @if($excerpt)
                                            <p>{{ $excerpt }}</p>
                                        @endif
                                        <a class="blog-readmore" href="{{ localized_route('blog.single', ['nic_name' => $blog->public_key]) }}">
                                            {{ __('ادامه مطلب') }} <i class="far fa-arrow-left"></i>
                                        </a>
                                    </div>
                                </article>
                            @empty
                                <div class="blog-empty">
                                    {{ __('مقاله ای برای نمایش پیدا نشد.') }}
                                </div>
                            @endforelse
                        </div>

                        @if($blogs->hasPages())
                            <div class="blog-pagination">
                                <a class="{{ $blogs->onFirstPage() ? 'disabled opacity-50' : '' }}" href="{{ $blogs->previousPageUrl() ?: '#' }}">
                                    <i class="far fa-arrow-right"></i> {{ __('قبلی') }}
                                </a>
                                <span>{{ __('صفحه :current از :last', ['current' => $blogs->currentPage(), 'last' => $blogs->lastPage()]) }}</span>
                                <a class="{{ $blogs->hasMorePages() ? '' : 'disabled opacity-50' }}" href="{{ $blogs->nextPageUrl() ?: '#' }}">
                                    {{ __('بعدی') }} <i class="far fa-arrow-left"></i>
                                </a>
                            </div>
                        @endif
                    </div>

                    <div class="col-lg-4">
                        @include('blog._sidebar')
                    </div>
                </div>
            </div>
        </section>
    </main>
@endsection