@use('app\Helpers\Helpers')
@extends('frontend.layout.master')
@section('title', __('frontend::static.blogs.blogs'))

@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>
        <span class="breadcrumb-item active">{{ __('frontend::static.blogs.blogs') }}</span>
    </nav>
@endsection
@section('content')
    <!-- Blog Section Start -->
    <section class="blog-section section-b-space" id="blog">
        <div class="container-fluid-lg">
            <div class="row g-xl-5">
                <div class="col-xxl-3 col-xl-4 border-right">
                    <div class="blog-left-box">
                        <div class="blog-top-title">
                            <h3>Filter</h3>
                            <button class="btn close-filter">
                                <i data-feather="x"></i>
                            </button>
                        </div>

                        <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>

                        <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>

                        <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>

                        <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-xxl-9 col-xl-8">
                    <div class="filter-div">
                        <div class="d-xl-none d-block mb-3">
                            <a href="#!" class="btn btn-solid filter-btn w-max"><i class="iconsax" icon-name="filter"></i> Show Filter</a>
                        </div>
                    </div>
                    <div class="blog-content">
                        <div class="row row-cols-1 row-cols-sm-2 g-sm-4 g-3">
                            @forelse ($blogs as $blog)
                                <div class="col">
                                    <div class="blog-main">
                                        <div class="card">
                                            <div class="card-head">
                                                <a href="{{ route('frontend.blog.details', $blog?->slug) }}"
                                                    class="card-img">
                                                    <img src="{{ $blog?->web_img_thumb_url }}" alt="{{ $blog?->title }}"
                                                        class="img-fluid">
                                                </a>
                                            </div>
                                            <div class="card-body">
                                                <ul class="blog-detail">
                                                    <li>{{ $blog?->categories?->first()?->title }}</li>
                                                    <li> {{ Helpers::dateTimeFormat($blog?->created_at, 'd M, Y') }}</li>
                                                </ul>
                                                <h4>
                                                    <a href="{{ route('frontend.blog.details', $blog?->slug) }}">{{ $blog?->title }}</a>
                                                </h4>
                                                <p class="four">{{ $blog->description }}</p>
                                                <a href="{{ route('frontend.blog.details', $blog?->slug) }}" class="link">Read More<i class="iconsax" icon-name="arrow-right"></i></a> 
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @empty
                                <div class="no-data-found">
                                    <img class="img-fluid no-data-img" src="{{ asset('frontend/images/no-data.svg') }}" alt="">
                                    <p>{{ __('frontend::static.blogs.not_found') }} </p>
                                </div>
                            @endforelse
                        </div>
                    </div>

                    <div class="pagination-main pt-0">
                        @if ($blogs->hasPages())
                            <div class="pagination-main pt-0">
                                {!! $blogs->links() !!}
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Blog Section End -->
@endsection

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

            const $filterButton = $(".filter-btn");
            const $blogLeftBox = $(".blog-left-box");
            const $closeBtns = $(".close-filter ");
            const $bgOverlay = $(".bg-overlay");

            // Add class to the element
            $filterButton.on("click", function() {
                $blogLeftBox.addClass("show");
                $("body").css("overflow", "hidden"); // Disable body scroll
                if ($bgOverlay.length) $bgOverlay.addClass("show");
            });

            // Loop through each close button and add event listener
            $closeBtns.on("click", function() {
                $blogLeftBox.removeClass("show");
                $("body").css("overflow", ""); // Restore body scroll
                if ($bgOverlay.length) $bgOverlay.removeClass("show");
            });
        });
    </script>
@endpush