@php

    $singleWidgetData = [];
    if (!empty($singleWidgetDataShow)) {
        $singleWidgetData = $singleWidgetDataShow->getTranslation('widget_content');
    }
    $blogs = blog('', $singleWidgetData['show_item'] ?? '');
@endphp

<div class="blog-section2 mb-120">
    <div class="container">
        @if (isset($singleWidgetData['style']))
            @if ($singleWidgetData['style'] == 'default')
                <div class="filter-btn d-lg-none d-flex justify-content-end mb-20">
                    <svg width="18" height="18" viewBox="0 0 18 18"
                        xmlns="http://www.w3.org/2000/svg">
                        <g clip-path="url(#clip0_456_25)">
                            <path
                                d="M0.5625 3.17317H9.12674C9.38486 4.34806 10.4341 5.2301 11.6853 5.2301C12.9366 5.2301 13.9858 4.3481 14.2439 3.17317H17.4375C17.7481 3.17317 18 2.92131 18 2.61067C18 2.30003 17.7481 2.04817 17.4375 2.04817H14.2437C13.9851 0.873885 12.9344 -0.00871277 11.6853 -0.00871277C10.4356 -0.00871277 9.38545 0.873744 9.12695 2.04817H0.5625C0.251859 2.04817 0 2.30003 0 2.61067C0 2.92131 0.251859 3.17317 0.5625 3.17317ZM10.191 2.61215L10.191 2.6061C10.1935 1.78461 10.8638 1.11632 11.6853 1.11632C12.5057 1.11632 13.1761 1.78369 13.1796 2.6048L13.1797 2.61306C13.1784 3.43597 12.5086 4.10513 11.6853 4.10513C10.8625 4.10513 10.1928 3.43663 10.191 2.61422L10.191 2.61215ZM17.4375 14.8268H14.2437C13.985 13.6525 12.9344 12.7699 11.6853 12.7699C10.4356 12.7699 9.38545 13.6524 9.12695 14.8268H0.5625C0.251859 14.8268 0 15.0786 0 15.3893C0 15.7 0.251859 15.9518 0.5625 15.9518H9.12674C9.38486 17.1267 10.4341 18.0087 11.6853 18.0087C12.9366 18.0087 13.9858 17.1267 14.2439 15.9518H17.4375C17.7481 15.9518 18 15.7 18 15.3893C18 15.0786 17.7481 14.8268 17.4375 14.8268ZM11.6853 16.8837C10.8625 16.8837 10.1928 16.2152 10.191 15.3928L10.191 15.3908L10.191 15.3847C10.1935 14.5632 10.8638 13.8949 11.6853 13.8949C12.5057 13.8949 13.1761 14.5623 13.1796 15.3834L13.1797 15.3916C13.1785 16.2146 12.5086 16.8837 11.6853 16.8837ZM17.4375 8.43751H8.87326C8.61514 7.26262 7.56594 6.38062 6.31466 6.38062C5.06338 6.38062 4.01418 7.26262 3.75606 8.43751H0.5625C0.251859 8.43751 0 8.68936 0 9.00001C0 9.31068 0.251859 9.56251 0.5625 9.56251H3.75634C4.01498 10.7368 5.06559 11.6194 6.31466 11.6194C7.56439 11.6194 8.61455 10.7369 8.87305 9.56251H17.4375C17.7481 9.56251 18 9.31068 18 9.00001C18 8.68936 17.7481 8.43751 17.4375 8.43751ZM7.80901 8.99853L7.80898 9.00458C7.80652 9.82607 7.13619 10.4944 6.31466 10.4944C5.49429 10.4944 4.82393 9.82699 4.82038 9.00591L4.82027 8.99769C4.8215 8.17468 5.49141 7.50562 6.31466 7.50562C7.13753 7.50562 7.80718 8.17408 7.80905 8.99653L7.80901 8.99853Z">
                            </path>
                        </g>
                    </svg>
                    <span>{{ translate('Filters') }}</span>
                </div>
                <div class="row gy-5">
                    <div class="col-xl-9 col-lg-12">
                        <input type="hidden" value="all-blog" id="widget_name">
                        <input type="hidden" value="standard" id="style">

                        <input type="hidden" value="{{ $singleWidgetData['show_item'] ?? '' }}" id="item_show">
                        @include('front.pages.loader')
                        <div id="standard-blog">

                            @include('front.pages.blog.standard-content', [
                                'blogs' => $blogs,
                            ])
                        </div>
                    </div>
                    <div class="col-xl-3">
                        <div class="left-sidebar mb-30 package-sidebar-area">
                            <div class="filter-sidebar-header d-lg-none">
                            <h5>{{ translate('Filters') }}</h5>
                            <button class="filter-sidebar-close">&times;</button>
                        </div>
                            <form method="get" class="search-form">
                                <div class="job-widget widget-search mb-20">
                                    <div class="wp-block-search__inside-wrapper ">
                                        <input type="search" id="search_key" class="wp-block-search__input"
                                            name="search_key" placeholder="Search Here">
                                        <button type="submit" class="wp-block-search__button">
                                            <svg width="14" height="14" viewBox="0 0 20 20"
                                                xmlns="http://www.w3.org/2000/svg">
                                                <path
                                                    d="M7.10227 0.0713005C1.983 0.760967 -1.22002 5.91264 0.44166 10.7773C1.13596 12.8 2.60323 14.471 4.55652 15.4476C6.38483 16.3595 8.59269 16.5354 10.5737 15.9151C11.4023 15.6559 12.6011 15.0218 13.2121 14.5126L13.3509 14.3969L16.1281 17.1695C19.1413 20.1735 18.9932 20.0531 19.4237 19.9698C19.6505 19.9281 19.9282 19.6504 19.9699 19.4236C20.0532 18.9932 20.1735 19.1413 17.1695 16.128L14.397 13.3509L14.5127 13.212C14.7858 12.8834 15.2394 12.152 15.4755 11.6614C17.0029 8.48153 16.3271 4.74159 13.7814 2.28379C11.9994 0.561935 9.52304 -0.257332 7.10227 0.0713005ZM9.38418 1.59412C11.0135 1.9135 12.4669 2.82534 13.4666 4.15376C14.0591 4.94062 14.4572 5.82469 14.6793 6.83836C14.8136 7.44471 14.8228 8.75925 14.7025 9.34708C14.3507 11.055 13.4713 12.4622 12.1336 13.4666C11.3467 14.059 10.4627 14.4571 9.44898 14.6793C8.80097 14.8228 7.48644 14.8228 6.83843 14.6793C4.78332 14.2303 3.0985 12.9389 2.20054 11.1337C1.75156 10.2312 1.54328 9.43503 1.49699 8.4445C1.36276 5.62566 3.01055 3.05677 5.6535 1.96904C6.10248 1.7839 6.8014 1.59412 7.28741 1.52932C7.74102 1.46452 8.92595 1.50155 9.38418 1.59412Z">
                                                </path>
                                            </svg>
                                        </button>
                                    </div>
                                </div>
                            </form>                 
                            <div class="left-sidebar-wrapper style-2">
                                <div class="single-widgets mb-25">
                                    <div class="widget-title">
                                        <h5>
                                            {{ translate('Categories') }}
                                            <span class="badge badge-success clear-applicatin-filter"
                                                style="cursor:pointer; float: right;">
                                                <i class="bi bi-x"></i> {{ translate('Clear Filter') }}
                                            </span>
                                        </h5>
                                    </div>
                                    <div class="checkbox-container">
                                        <ul>
                                            @foreach (BlogCategoryShow() as $item)
                                                @php
                                                    $categoryCountBlog = CountCategoryBlog($item->id);
                                                @endphp
                                                @if ($categoryCountBlog > 0)
                                                    <li>
                                                        <label class="containerss">
                                                            <input type="checkbox" name="categoryId[]"
                                                                id="categoryIdCheckbox" value="{{ $item->id }}"
                                                                class="filter-option blog-category">
                                                            <span class="checkmark"></span><span
                                                                class="text">{{ $item->getTranslation('blog_category_name') }}</span>
                                                            <span class="qty">({{ $categoryCountBlog }})</span>
                                                        </label>
                                                    </li>
                                                @endif
                                            @endforeach
                                        </ul>
                                    </div>
                                </div>
                                <div class="single-widgets">
                                    <div class="widget-title">
                                        <h5>{{ Translate('Recent Posts') }}</h5>
                                    </div>
                                    @include('front.pages.blog.recent-posts', ['limit' => 4])
                                </div>
                            </div>
                        </div>
                        @include('front.pages.blog.sidebar-banner')                      
                    </div>
                </div>
            @else
                <div class="row gy-4 blog-grid-style">
                    @foreach ($blogs as $blog)
                        <div class="col-xl-4 col-md-6">
                            <div class="blog-card2">
                                <div class="blog-card-image">
                                    <a href="{{ route('blog.details', $blog->slug) }}">
                                        @if (fileExists('blog', $blog->blog_thumbnail) && $blog->blog_thumbnail !== '')
                                            <img class="img-fluid"
                                                src="{{ asset('storage/blog/' . $blog->blog_thumbnail) }}"
                                                alt="blog-thumb">
                                        @else
                                            <img class="img-fluid"
                                                src="{{ asset('frontend/assets/images/416-240.png') }}" alt="blog-thumb">
                                        @endif
                                    </a>
                                </div>
                                <div class="blog-card-content">
                                    <ul>
                                        <li>
                                            <a
                                                href="{{ route('blog.details', $blog->slug) }}">{{ customDateFormate($blog->created_at) }}</a>
                                        </li>
                                        <li>
                                            <a href="{{ route('blog.details', $blog->slug) }}">{{ $blog->comments_count }}
                                                {{ $blog->comments_count > 1 ? translate('Comments') : translate('Comment') }}</a>
                                        </li>
                                    </ul>
                                    <h3>
                                        <a
                                            href="{{ route('blog.details', $blog->slug) }}">{{ $blog->getTranslation('blog_title') }}</a>
                                    </h3>
                                    <p>{{ Str::words(strip_tags($blog->getTranslation('blog_details')), 15, '...') }}
                                    </p>
                                    <a href="{{ route('blog.details', $blog->slug) }}"
                                        class="primary-btn-3">{{ translate('Read Article') }}</a>
                                </div>
                            </div>
                        </div>
                    @endforeach
                    <div class="col-lg-12 d-flex justify-content-center pt-20">
                        <div class="pagination-area">
                            {{ $blogs->links('front.vendor.pagination.custom') }}
                        </div>
                    </div>
                </div>
            @endif
        @endif
    </div>
</div>

@push('post_scripts')
    @include('js.front.blog-search')
@endpush