@use('app\Helpers\Helpers')
@extends('frontend.layout.master')
@section('title', @$blog?->title)

@section('meta_description', @$blog?->meta_description ?? @$blog?->description)
@section('og_title', @$blog?->meta_title ?? @$blog?->title)
@section('og_description', @$blog->meta_description ?? @$blog?->description)
@section('og_image', @$blog?->media?->first()?->getUrl())
@section('twitter_title', @$blog?->meta_title ?? @$blog?->title)
@section('twitter_description', @$blog?->meta_description ?? @$blog?->description)
@section('twitter_image', @$blog?->media?->first()?->getUrl())


@section('breadcrumb')
    <nav class="breadcrumb breadcrumb-icon">
        <a class="breadcrumb-item" href="{{ url('/') }}"><i class="iconsax" icon-name="home-2"></i>
            {{ __('frontend::static.blogs.home') }}</a>
        <a class="breadcrumb-item" href="{{ route('frontend.blog.index') }}">{{ __('frontend::static.blogs.blogs') }}</a>
        <span class="breadcrumb-item active">{{ $blog->title }}</span>
    </nav>
@endsection
@section('content')
    @if ($blog)
        <!-- Blog Section Start -->
        <section class="blog-section">
            <div class="container-fluid-lg">
                <div class="row gx-xl-5">
                    <div class="col-xl-3 border-right">
                        <div class="blog-left-box">
                            <div class="blog-box">
                                <div class="blog-title">
                                    <h4>{{ __('frontend::static.header.category') }}</h4>
                                </div>
                                <ul class="blog-list">
                                    @foreach ($blogCategories as $category)
                                        <li>
                                            <a href="{{ route('frontend.blog.category', $category->slug) }}">
                                                {{ $category->title }} ({{ $category->blogs_count }})
                                            </a>
                                        </li>
                                    @endforeach
                                </ul>
                            </div>

                            <!-- Popular Posts -->
                            <div class="blog-box">
                                <div class="blog-title">
                                    <h4>{{ __('frontend::static.blogs.popular_post') }}</h4>
                                </div>
                                <ul class="blog-post-list">
                                    @foreach($popularPosts as $post)
                                        <li class="post-box">
                                            <a href="{{ route('frontend.blog.details', $post->slug) }}" class="post-image">
                                                <img src="{{ $post->web_img_thumb_url }}" class="img-fluid" alt="{{ $post->title }}">
                                            </a>
                                            <div class="post-content">
                                                <a href="{{ route('frontend.blog.details', $post->slug) }}">{{ $post->title }}</a>
                                                <h6>{{ Helpers::dateTimeFormat($post->created_at,'d M, Y') }}</h6>
                                            </div>
                                        </li>
                                    @endforeach
                                </ul>
                            </div>

                            <!-- Recent Posts -->
                            <div class="blog-box">
                                <div class="blog-title">
                                    <h4>{{ __('frontend::static.blogs.recent_post') }}</h4>
                                </div>
                                <ul class="blog-post-list">
                                    @foreach($recentPosts as $post)
                                        <li class="post-box">
                                            <a href="{{ route('frontend.blog.details', $post->slug) }}" class="post-image">
                                                <img src="{{ $post->web_img_thumb_url }}" class="img-fluid" alt="">
                                            </a>
                                            <div class="post-content">
                                                <a href="{{ route('frontend.blog.details', $post->slug) }}">{{ $post->title }}</a>
                                                <h6>{{ Helpers::dateTimeFormat($post->created_at,'d M, Y') }}</h6>
                                            </div>
                                        </li>
                                    @endforeach
                                </ul>
                            </div>

                            <!-- Tags -->
                            <div class="blog-box">
                                <div class="blog-title">
                                    <h4>{{ __('frontend::static.blogs.tags') }}</h4>
                                </div>
                                <ul class="tag-list">
                                    @foreach($tags as $tag)
                                        <li>
                                            <a href="{{ route('frontend.blog.tag', $tag->slug) }}">{{ $tag->name }}</a>
                                        </li>
                                    @endforeach
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-9">
                        <div class="details-image-box">
                            <img src="{{ $blog?->web_img_thumb_url }}" alt="{{ $blog?->title }}" class="img-fluid">
                            <span class="badge">
                                {{ $blog?->tags?->first()?->name }}
                            </span>
                            <div class="detail-content">
                                <div class="title">
                                    <h4>{{ $blog?->title }}</h4>
                                </div>
                                <div class="blog-details-list">
                                    <ul class="blog-detail">
                                        <li>{{ $blog?->categories?->first()->title }}</li>
                                        <li>{{ Helpers::dateTimeFormat($blog?->created_at, 'd M, Y') }}</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="detail-content">
                            <div class="detail-sec">
                                <div class="details-title">
                                    <h3>{{ __('frontend::static.blogs.description') }}</h3>
                                    <p>{{ $blog?->description }}</p>
                                </div>

                                <ul class="overview-list">
                                    {!! $blog?->content !!}
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- Blog Section End -->
    @endif

    <!-- Recent Blog Section Start -->
    <section class="blog-section section-b-space">
        <div class="container-fluid-lg">
            <div class="title-1">
                <h6><span>Blog</span></h6>
                <h2>{{ __('frontend::static.blogs.recent_blogs') }}</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam facilis aperiam hic debitis facere
                    dignissimos non mollitia eum inventore nobis nulla.</p>
                <a class="view-all" href="{{ route('frontend.blog.index') }}">
                    {{__('frontend::static.home_page.view_all')}}
                    <i class="iconsax" icon-name="arrow-right"></i>
                </a>
            </div>
            <div class="blog-content">
                <div class="row g-3 row-cols-xl-3 row-cols-sm-2 row-cols-1">
                    @forelse ($recentBlogs as $recentBlog)
                        <div class="col">
                            <div class="blog-main">
                                <div class="card">
                                    <div class="card-head">
                                        <a href="{{ route('frontend.blog.details', $recentBlog?->slug) }}"
                                            class="card-img">
                                            <img src="{{ $recentBlog?->web_img_thumb_url }}"
                                                alt="{{ $recentBlog?->title }}" class="img-fluid">
                                        </a>
                                    </div>
                                    <div class="card-body">
                                        <ul class="blog-detail">
                                            <li>{{ $recentBlog?->categories?->first()->title }}</li>
                                            <li> {{ Helpers::dateTimeFormat($recentBlog?->created_at, 'd M, Y') }}</li>
                                        </ul>
                                        <h4>
                                            <a href="{{ route('frontend.blog.details', $recentBlog?->slug) }}">{{ $recentBlog?->title }}
                                            </a>
                                        </h4>
                                        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque blanditiis,
                                            repudiandae ullam at placeat possimus sequi, sed consectetur laudantium
                                            architecto cum corporis assumenda esse, repellendus ex. Eos dolor animi harum!
                                        </p>
                                        <a href="{{ route('frontend.blog.details', $recentBlog?->slug) }}" class="link">Read More <i class="iconsax" icon-name="arrow-right"></i></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @empty
                        <div class="no-data-found">
                            <p> {{ __('frontend::static.blogs.not_found') }}</p>
                        </div>
                    @endforelse
                </div>
            </div>
        </div>
    </section>
    <!-- Recent Blog Section End -->
@endsection

@push('js')
    <script>
        $(document).ready(function() {
            "use strict";

            $("#commentForm").validate({
                ignore: [],
                rules: {
                    "message": "required",
                }
            });
        });
    </script>
@endpush