@extends('web_site.layouts.master')

@section('content')

    <section class="breadcumb-wrapper" data-bg-src="{{ asset('assets_web/img/breadcurmb1.webp') }}">
        <div class="container">
            <h1 class="breadcumb-title">{{ $blog->title }}</h1>
        </div>
    </section>

    <section class="vs-blog-wrapper blog-details space-top space-md-bottom">
        <div class="container">
            <div class="row">
                <div class="col-lg-8">
                    <div class="vs-blog blog-single">
                        <div class="blog-img">
                            <img src="{{ $blog->main_image_path ?: asset('assets_web/img/blog/img1.webp') }}" loading="lazy" alt="{{ $blog->getTranslation('seo_title', app()->getLocale(), false) ?: $blog->title }}">
                        </div>
                        <div class="blog-content mt-4">
                            <div class="blog-meta">
                                @if ($blog->date_at)
                                    <a><i class="far fa-calendar"></i>{{ \Illuminate\Support\Carbon::parse($blog->date_at)->translatedFormat('d M Y') }}</a>
                                @endif
                                @if ($blog->publisher)
                                    <a><i class="fal fa-user"></i>{{ $blog->publisher }}</a>
                                @endif
                                @if ($blog->category)
                                    <a href="{{ route('blog.index', ['category' => $blog->category->slug]) }}"><i class="fal fa-folder"></i>{{ $blog->category->name }}</a>
                                @endif
                            </div>
                            <h2 class="blog-title h3">{{ $blog->title }}</h2>
                            <div>{!! $blog->details ?: $blog->description !!}</div>
                        </div>
                    </div>

                    @if ($blog->images->isNotEmpty())
                        <div class="row mt-4">
                            @foreach ($blog->images as $image)
                                <div class="col-md-4 mb-3">
                                    <img src="{{ $image->image_path }}" loading="lazy" alt="{{ $image->getTranslation('alt_text', app()->getLocale(), false) ?: $blog->title }}" class="w-100 rounded">
                                </div>
                            @endforeach
                        </div>
                    @endif
                </div>

                <div class="col-lg-4">
                    <aside class="sidebar-area pt-30 pt-lg-0 pl-30">
                        @if ($blogCategories->isNotEmpty())
                            <div class="widget widget_categories">
                                <h3 class="widget_title">{{ trans('site.blog.categories') }}</h3>
                                <ul>
                                    @foreach ($blogCategories as $blogCategory)
                                        <li>
                                            <a href="{{ route('blog.index', ['category' => $blogCategory->slug]) }}" class="{{ $blog->blog_category_id === $blogCategory->id ? 'text-theme1' : '' }}">{{ $blogCategory->name }}</a>
                                            <span>({{ $blogCategory->blogs_count }})</span>
                                        </li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif
                        @if ($recentBlogs->isNotEmpty())
                            <div class="widget widget_categories">
                                <h3 class="widget_title">{{ trans('site.blog.recent_posts') }}</h3>
                                <ul>
                                    @foreach ($recentBlogs as $recent)
                                        <li><a href="{{ route('blog.show', $recent) }}">{{ $recent->title }}</a></li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif
                    </aside>
                </div>
            </div>
        </div>
    </section>

@endsection