@push('style_css')
<style>
    .max-w-5xl {
        max-width: 1600px !important;
    }


    .slider-container {
        display: flex;
        overflow-x: scroll;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }

    .slider-item {
        flex: 0 0 80%;
        min-width: 80%;
        scroll-snap-align: start;
        margin-left: 1%;

    }
</style>
@endpush


@section('title')
مجله خبری سرمایه گذاری اهرم - آموزش ارز دیجیتال و اخبار روز
@endsection
@section('metaSEO')
<meta name="description"
    content="در مجله خبری سرمایه گذاری اهرم  میتوانید به مقالات تخصصی درباره آموزش ارزهای دیجیتال و بلاکچین و پیگیری اخبار جدید دسترسی داشته باشید." />
<link rel="canonical" href="{{ env('APP_URL') }}/" />
<meta property="og:locale" content="fa_IR" />
<meta property="og:type" content="website" />
<meta property="og:title" content="مجله خبری سرمایه گذاری اهرم  - آموزش ارز دیجیتال و اخبار روز" />
<meta property="og:description"
    content="در مجله خبری سرمایه گذاری اهرم  میتوانید به مقالات تخصصی درباره آموزش ارزهای دیجیتال و بلاکچین و پیگیری اخبار جدید دسترسی داشته باشید." />
<meta property="og:url" content="{{ env('APP_URL') }}/" />
<meta property="og:site_name" content="مجله خبری سرمایه گذاری اهرم " />
<script type="application/ld+json">
    {
        "@context": "https://schema.org/",
        "@type": "WebSite",
        "name": "سرمایه گذاری اهرم",
        "url": "/",
        "potentialAction": {
            "@type": "SearchAction",
            "target": "https://ahrominvest.ir/mag/search?q={search_term_string}",
            "query-input": "required name=search_term_string"
        }
    }
</script>
@endsection

<div class="mt-10 md:mt-0">
    <button
        class="fixed hidden left-4 bottom-4 z-20 rounded-2xl bg-ahrom p-3 text-white opacity-0 transition-opacity ease-out lg:bottom-6 lg:left-6 lg:p-4"
        id="btnGoTop" title="Go to top">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
            stroke-linecap="round" stroke-linejoin="round" class="h-6 w-6">
            <polyline points="18 15 12 9 6 15"></polyline>
        </svg>
    </button>
    @if (count($blogs2) > 0)
    <div href="#"
        class="text-black   hidden mb-3 font-bold px-4 pt-10   lg:my-8 text-[16px] lg:text-[20px] text-start items-center   gap-2">
        <span> مطالب منتخب</span>
    </div>
    <div x-cloak x-show="window.innerWidth > 1024 "
        class="visible relative z-10 mx-auto  max-w-5xl mb-5  flex-col items-center  px-4  lg:flex-row lg:justify-between no-scrollbar">
        <div class="  w-full mt-3">
            @php
            $step = 0;
            @endphp
            <div
                class="lg:grid mb-0 mt-5 lg:my-5 flex  lg:grid-cols-2 gap-4 lg:gap-1 lg:h-[60vh] overflow-scroll lg:overflow-hidden no-scrollbar">
                @foreach ($blogs2 as $key => $item)
                @php
                if ($step == 0) {
                $count = 0;
                $step = 1;
                }
                @endphp
                @endforeach
                @if (isset($blogs2[$count]) )
                <div lazy class="col-span-1 grid-cols-1 h-full  ">
                    <div
                        class="relative group rounded-xl overflow-hidden  h-[200px] lg:h-full lg:w-auto w-[300px]">
                        <a href="{{ route('detail', ['slug' => $blogs2[$count]->slug]) . '/' }}" wire:navigate
                            class="w-full group-hover:transform group-hover:scale-110 duration-700 h-full absolute rounded-xl">
                            <img src="{{  env('APP_URL_IMAGE').'images/'.$blogs2[$count]->image   }}"
                                alt="{{ $blogs2[$count]->slug }}" class="bg-cover bg-center w-full h-full ">
                        </a>
                        <a href="{{ route('detail', ['slug' => $blogs2[$count]->slug]) . '/' }}" wire:navigate>
                            <div class="relative p-6 lg:p-7 h-full text-white rounded-xl overflow-hidden">
                                @if (true)
                                <div
                                    class="w-[120px] pt-[16px] pb-[3px] items-center content-center -left-[48px] -rotate-45 flex justify-center bg-[#2163E8] absolute -top-[8px]">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
                                        viewBox="0 0 576 512">
                                        <path fill="#ffffff"
                                            d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z" />
                                    </svg>
                                </div>
                                @endif
                                <div class="h-full flex flex-col gap-2 justify-end">

                                    <div class="text-white text-sm">

                                    </div>

                                </div>
                            </div>
                        </a>
                    </div>
                    @php
                    $count++;
                    @endphp
                </div>
                @endif
                <div class="col-span-1 lg:grid flex lg:grid-rows-2 gap-1">

                    <div class="row-span-1 lg:grid lg:grid-cols-2 flex gap-4 lg:gap-1 ">
                        @if (isset($blogs2[$count]) )
                        <div class="relative group rounded-xl overflow-hidden h-full lg:w-auto w-[300px]">
                            <a href="{{ route('detail', ['slug' => $blogs2[$count]->slug]) . '/' }}"
                                wire:navigate
                                class="w-full group-hover:transform group-hover:scale-110 duration-700 h-full absolute rounded-xl">
                                <img src="{{  env('APP_URL_IMAGE').'images/'.$blogs2[$count]->image }}"
                                    alt="{{ $blogs2[$count]->slug }}"
                                    class="bg-cover bg-center w-full h-full ">
                            </a>
                            <a href="{{ route('detail', ['slug' => $blogs2[$count]->slug]) . '/' }}"
                                wire:navigate>
                                <div class="relative p-7 h-full text-white rounded-xl overflow-hidden">
                                    @if (true)
                                    <div
                                        class="w-[120px] pt-[16px] pb-[3px] items-center content-center -left-[48px] -rotate-45 flex justify-center bg-[#2163E8] absolute -top-[8px]">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="20"
                                            height="20" viewBox="0 0 576 512">
                                            <path fill="#ffffff"
                                                d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z" />
                                        </svg>
                                    </div>
                                    @endif
                                    <div class="h-full flex flex-col gap-2 justify-end">

                                        <div class="text-white text-sm">

                                        </div>

                                    </div>
                                </div>
                            </a>
                        </div>

                        @php
                        $count++;
                        @endphp
                        @endif
                        @if (isset($blogs2[$count]) )
                        <div class="relative group rounded-xl overflow-hidden h-full lg:w-auto w-[300px]">
                            <a href="{{ route('detail', ['slug' => $blogs2[$count]->slug]) . '/' }}"
                                wire:navigate
                                class="w-full group-hover:transform group-hover:scale-110 duration-700 h-full absolute rounded-xl">
                                <img src="{{  env('APP_URL_IMAGE').'images/'.$blogs2[$count]->image }}"
                                    alt="{{ $blogs2[$count]->slug }}"
                                    class="bg-cover bg-center w-full h-full ">
                            </a>
                            <a href="{{ route('detail', ['slug' => $blogs2[$count]->slug]) . '/' }}"
                                wire:navigate>
                                <div class="relative p-7 h-full text-white rounded-xl overflow-hidden">
                                    @if (true)
                                    <div
                                        class="w-[120px] pt-[16px] pb-[3px] items-center content-center -left-[48px] -rotate-45 flex justify-center bg-[#2163E8] absolute -top-[8px]">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="20"
                                            height="20" viewBox="0 0 576 512">
                                            <path fill="#ffffff"
                                                d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z" />
                                        </svg>
                                    </div>
                                    @endif
                                    <div class="h-full flex flex-col gap-2 justify-end">

                                        <div class="text-white text-sm">

                                        </div>

                                    </div>
                                </div>
                            </a>
                        </div>

                        @php
                        $count++;
                        @endphp
                        @endif
                    </div>

                    <div class="row-span-1 lg:grid lg:grid-cols-2 flex gap-4 lg:gap-1">
                        {{-- order 3 --}}
                        @if (isset($blogs2[$count]) )
                        <div class="col-span-1  ">
                            <div
                                class="relative group rounded-xl overflow-hidden h-[200px] lg:h-full lg:w-auto w-[300px]">
                                <a href="{{ route('detail', ['slug' => $blogs2[$count]->slug]) . '/' }}"
                                    wire:navigate
                                    class="w-full group-hover:transform group-hover:scale-110 duration-700 h-full absolute rounded-xl">
                                    <img src="{{ env('APP_URL_IMAGE').'images/'.$blogs2[$count]->image  }}"
                                        alt="{{ $blogs2[$count]->slug }}"
                                        class="bg-cover bg-center w-full h-full ">
                                </a>
                                <a href="{{ route('detail', ['slug' => $blogs2[$count]->slug]) . '/' }}"
                                    wire:navigate>
                                    <div
                                        class="relative p-6 lg:p-7 h-full text-white rounded-xl overflow-hidden">
                                        @if (true)
                                        <div
                                            class="w-[120px] pt-[16px] pb-[3px] items-center content-center -left-[48px] -rotate-45 flex justify-center bg-[#2163E8] absolute -top-[8px]">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="20"
                                                height="20" viewBox="0 0 576 512">
                                                <path fill="#ffffff"
                                                    d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z" />
                                            </svg>
                                        </div>
                                        @endif
                                        <div class="h-full flex flex-col gap-2 justify-end">
                                            <div class="  flex-wrap gap-2 items-center  hidden lg:flex">

                                            </div>

                                            <div class="text-white text-sm">

                                            </div>

                                        </div>
                                    </div>
                                </a>
                            </div>

                            @php
                            $count++;
                            @endphp
                        </div>
                        @endif


                        @if (isset($blogs2[$count]) )
                        <div class="col-span-1  ">
                            <div
                                class="relative group rounded-xl overflow-hidden h-[200px] lg:h-full lg:w-auto w-[300px]">
                                <a href="{{ route('detail', ['slug' => $blogs2[$count]->slug]) . '/' }}"
                                    wire:navigate
                                    class="w-full group-hover:transform group-hover:scale-110 duration-700 h-full absolute rounded-xl">
                                    <img src="{{  env('APP_URL_IMAGE').'images/'.$blogs2[$count]->image   }}"
                                        alt="{{ $blogs2[$count]->slug }}"
                                        class="bg-cover bg-center w-full h-full ">
                                </a>
                                <a href="{{ route('detail', ['slug' => $blogs2[$count]->slug]) . '/' }}"
                                    wire:navigate>
                                    <div
                                        class="relative  p-6 lg:p-7 h-full text-white rounded-xl overflow-hidden">
                                        @if (true)
                                        <div
                                            class="w-[120px] pt-[16px] pb-[3px] items-center content-center -left-[48px] -rotate-45 flex justify-center bg-[#2163E8] absolute -top-[8px]">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="20"
                                                height="20" viewBox="0 0 576 512">
                                                <path fill="#ffffff"
                                                    d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z" />
                                            </svg>
                                        </div>
                                        @endif
                                        <div class="h-full flex flex-col gap-2 justify-end">
                                            <div class="  flex-wrap gap-2 items-center  hidden lg:flex">

                                            </div>

                                            <div class="text-white text-sm">

                                            </div>

                                        </div>
                                    </div>
                                </a>
                            </div>

                            @php
                            $count++;
                            @endphp
                        </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div x-cloak x-data="{ show: window.innerWidth < 1024 }" x-show="show"
        class="visible relative z-10 mt-10 mb-5 mx-auto   max-w-5xl  flex-col items-center  px-4  lg:flex-row lg:justify-between no-scrollbar">
        <div class="slider-container gap-4   no-scrollbar w-full  ">
            @php
            $step = 0;
            @endphp
            @foreach ($blogs2 as $key => $item)
            @if (isset($item) )
            <div class="col-span-1 grid-cols-1 h-full slider-item">
                <div class="relative group rounded-xl overflow-hidden h-[200px] lg:h-full lg:w-auto  ">
                    <a href="{{ route('detail', ['slug' => $item->slug]) . '/' }}" wire:navigate
                        class="w-full group-hover:transform group-hover:scale-110 duration-700 h-full absolute rounded-xl">
                        <img src="{{ env('APP_URL_IMAGE').'images/'.$item->image   }}"
                            alt="{{ $item->slug }}"
                            class="bg-cover bg-center w-full h-full">
                    </a>
                    <a href="{{ route('detail', ['slug' => $item->slug]) . '/' }}" wire:navigate>
                        <div class="relative p-6 lg:p-7 h-full text-white rounded-xl overflow-hidden">
                            @if (true)
                            <div
                                class="w-[120px] pt-[16px] pb-[3px] items-center content-center -left-[48px] -rotate-45 flex justify-center bg-[#2163E8] absolute -top-[8px]">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
                                    viewBox="0 0 576 512">
                                    <path fill="#ffffff"
                                        d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z" />
                                </svg>
                            </div>
                            @endif
                            <div class="h-full flex flex-col gap-2 justify-end">

                                <div class="text-white text-sm"></div>

                            </div>
                        </div>
                    </a>
                </div>
            </div>
            @endif
            @endforeach
        </div>
    </div>
    @endif

    <div
        class="visible relative z-10 mx-auto flex max-w-5xl flex-col items-center mt-8 px-4 lg:flex-col  lg:justify-between">
        <div class="w-full mb-12">
            <div class="mb-4 border-b   align-items-center justify-between flex ">
                <h2 class="inline-block text-[18px]  pb-2 border-b-2 rounded-t-lg  text-[#0075e7] border-[#0075e7] ">
                    مطالب</h2>
                {{-- <div class="md:block hidden">--}}
                {{-- @if ($selectedCategoryPosts)--}}
                {{-- @foreach ($categories as $item)--}}
                {{-- @if (count($item->blogs) > 0 && $selectedCategoryPosts == $item->id)--}}
                {{-- <a class="text-[#16205b]   rounded-xl px-2 text-[16px]"--}}
                {{-- href=" {{ route('CategoryBlog.index', ['slug' => $item->slug]) . '/' }}"--}}
                {{-- wire:navigate>مشاهده همه</a>--}}
                {{-- @endif--}}
                {{-- @endforeach--}}
                {{-- @else--}}
                {{-- <a class="text-[#16205b]   rounded-xl px-2 text-[16px]"--}}
                {{-- href=" {{ route('CategoryBlog.index', ['slug' => 'all']) . '/' }}" wire:navigate>مشاهده--}}
                {{-- همه</a>--}}
                {{-- @endif--}}
                {{-- </div>--}}
            </div>

            <div class="flex items-center gap-2 overflow-scroll md:overflow-hidden no-scrollbar md:flex-wrap mb-4">
                <button wire:click="resetCategory('posts')"
                    class="px-3 py-1 text-sm rounded-md transition-colors duration-200 text-nowrap"
                    :class="{
                                'bg-blue-100 text-blue-600': !$wire.selectedCategoryPosts,
                                'bg-gray-100 hover:bg-gray-200': $wire.selectedCategoryPosts
                            }">
                    آخرین مطالب
                </button>

                @foreach ($categories->sortByDesc('priority') as $item)
                @if (count($item->blogs) > 0)
                <button wire:click="selectCategory({{ $item->id }}, 'posts')"
                    class="px-3 py-1 text-sm rounded-md transition-colors duration-200 text-nowrap"
                    :class="{
                                        'bg-blue-100 text-blue-600': $wire.selectedCategoryPosts == {{ $item->id }},
                                        'bg-gray-100 hover:bg-gray-200': $wire.selectedCategoryPosts != {{ $item->id }}
                                    }">
                    {{ $item->title }}
                </button>
                @endif
                @endforeach
                <a class="rounded-md transition-colors duration-200 py-1 px-3 font-semibold text-[16px] mr-auto bg-gray-100 hover:bg-gray-200 hidden md:block"
                    href="{{ isset($selectedRoutePosts) ? $selectedRoutePosts : route('CategoryBlog.index', ['slug' => 'all']) . '/' }}" wire:navigate>مشاهده
                    همه</a>
            </div>

            <div
                class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 justify-between gap-5 my-4 lg:my-8">
                @if($selectedCategoryPosts)
                @foreach($this->getCategoryItems($selectedCategoryPosts, 'posts') as $blog)
                <div
                    class="w-full justify-between md:justify-normal flex items-center px-2 py-2 md:py-0 md:px-0 flex-row-reverse md:flex-col gap-2 border-b md:border md:rounded-xl md:bg-[#F3F4F6] md:shadow">
                    <a href="{{ route('detail', ['slug' => $blog->slug]) .'/'}}" wire:navigate
                        class="relative w-[80px] md:w-full">
                        <div x-data="{
                                        loaded: false,
                                        init() {
                                            const observer = new IntersectionObserver((entries) => {
                                                entries.forEach(entry => {
                                                    if (entry.isIntersecting && !this.loaded) {
                                                        const img = new Image();
                                                        img.src = '{{ env('APP_URL_IMAGE').'images/'.$blog->image }}';
                                                        img.onload = () => {
                                                            this.loaded = true;
                                                            observer.unobserve(this.$el);
                                                        };
                                                    }
                                                });
                                            }, {
                                                rootMargin: '200px'
                                            });
                                            observer.observe(this.$el);
                                        }
                                    }"
                            class="w-[80px] md:w-full md:h-[260px] h-[80px] rounded-xl md:rounded-b-none bg-gray-200 flex items-center justify-center">
                            <img x-cloak x-show="loaded"
                                x-transition:enter="transition ease-out duration-300"
                                x-transition:enter-start="opacity-0"
                                x-transition:enter-end="opacity-100"
                                :src="'{{ env('APP_URL_IMAGE').'images/'.$blog->image }}'"
                                alt="{{ $blog->subject }}"
                                class="w-[80px] md:w-full md:h-[260px] h-[80px] rounded-xl md:rounded-b-none"
                                loading="lazy">
                        </div>
                    </a>
                    <div
                        class="flex md:w-full justify-start w-[73%] md:justify-normal flex-col gap-2 h-full md:p-4">
                        <a href="{{ route('detail', ['slug' => $blog->slug]) .'/'}}" wire:navigate
                            class="text-[#005eb9] text-[14px] md:text-[16px] font-bold">
                            {!! $blog->subject !!}
                        </a>
                        <div class="md:block hidden text-[#16205b]">
                            @php
                            $preview = Str::limit($blog->preview, 80, '...');
                            @endphp
                            {!! $preview !!}
                        </div>
                        <div class="flex gap-1 text-white md:mt-auto">
                            <div class="hidden md:flex flex-col justify-center">
                                <img class="bg-cover bg-center rounded-full size-8"
                                    src="{{ env('APP_URL_IMAGE').'images/static/'.$blog->user->picture }}" alt="">
                            </div>
                            <div class="flex items-center justify-between w-full flex-wrap">
                                <div class="flex items-center gap-1">
                                    <div class="text-xs text-gray-600  flex-col justify-center hidden md:flex">
                                        {{ $blog->user->full_name }}
                                    </div>
                                    <span style="font-variation-settings: 'wght' 500;"
                                        class="text-xs text-[#A0A4BC] flex flex-col justify-center">|</span>
                                    <div class="text-xs text-gray-600 flex flex-col justify-center">
                                        {{ jalaliDate($blog->published_at, '%d %B، %Y') }}
                                    </div>
                                </div>
                                <div class="text-xs text-gray-600 hidden md:flex items-center gap-1">
                                    <svg class="w-3 h-3 stroke-[20px] fill-gray-600" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                                        <path d="M430.972,511.871h-10.999c-7.142-2.466-13.451-6.138-18.729-11.711-6.527-6.891-13.598-13.272-20.021-20.253-3.006-3.267-5.237-3.134-8.84-1.088-28.127,15.97-58.257,25.77-90.473,29.319-47.013,5.179-91.431-3.412-133.616-24.417-4.587-2.284-9.583-7.067-13.578-6.325-4.372,.812-7.779,6.72-11.649,10.361-9.586,9.019-17.429,20.289-31.052,24.113h-10.999c-8.202-2.712-15.535-6.634-20.261-14.296-7.688-12.465-5.856-27.038,5.095-38.358,6.698-6.924,13.639-13.613,20.464-20.399C-10.549,340.462-.476,184.709,95.021,96.924c89.903-82.643,229.862-83.648,320.705-.831,45.2,41.207,71.314,92.614,76.822,153.495,6.584,72.768-16.736,135.633-67.656,189.955,1.708,1.156,3.598,2.055,4.997,3.447,6.49,6.46,13.324,12.659,19.129,19.699,8.158,9.893,9.058,21.088,3.402,32.701-4.413,9.062-12.424,13.427-21.449,16.48ZM80.649,256.827c6.65,0,13.342-.58,19.865,.215,3.998,.487,8.445,2.281,11.433,4.915,4.574,4.03,5.346,9.864,3.002,15.643-2.322,5.725-6.668,9.209-12.927,9.446-7.09,.269-14.198,.062-21.344,.062,6.497,90.251,84.175,156.516,160.193,159.907,0-6.988-.24-13.969,.069-20.926,.296-6.655,3.997-11.126,10.273-13.342,5.863-2.07,12.72-.593,16.136,4.561,2.156,3.253,3.324,7.549,3.709,11.497,.6,6.157,.159,12.416,.159,18.676,93.711-8.127,156.121-86.508,159.881-160.355-6.981,0-13.949,.24-20.892-.064-7.73-.338-13.564-6.15-14.21-13.544-.784-8.975,5.554-16.312,14.685-16.616,6.889-.229,13.791-.045,20.734-.045-7.275-89.982-82.342-155.346-160.307-160.017,0,6.973,.225,13.926-.057,20.859-.353,8.684-7.279,14.722-15.937,14.332-7.841-.353-13.932-6.397-14.226-14.576-.247-6.889-.051-13.795-.051-20.737-84.691,6.171-154.306,76.702-160.19,160.109Z" />
                                        <path d="M317.727,21.635c35.238-27.229,91.729-31.059,133.974,2.822,41.268,33.097,50.437,87.812,32.775,127.807-37.143-67.069-92.524-110.581-166.749-130.629Z" />
                                        <path d="M194.322,21.62C120.136,41.616,64.83,85.023,27.787,151.768c-14.977-29.145-13.64-83.098,24.228-119.983C94.052-9.162,155.466-8.002,194.322,21.62Z" />
                                        <path d="M318.68,294.953c-8.33,0-16.662,.116-24.988-.063-2.918-.063-4.789,.78-6.712,3.106-11.939,14.448-32.667,18.701-48.849,10.269-17.717-9.231-25.978-27.547-21.312-46.475,.529-2.148-.168-5.249-1.459-7.096-15.363-21.964-30.993-43.741-46.453-65.638-8.537-12.091-6.535-26.283,4.579-33.894,9.341-6.397,21.933-5.138,29.529,3.365,3.643,4.078,6.677,8.712,9.862,13.184,13.136,18.442,26.28,36.879,39.275,55.421,2.076,2.962,4.251,4.494,8.032,4.748,10.643,.717,19.487,5.564,26.308,13.63,2.329,2.754,4.59,3.613,8.017,3.581,16.491-.157,32.988-.267,49.476-.008,16.712,.263,27.444,15.387,22.095,30.665-3.146,8.987-11.38,14.945-21.414,15.146-8.659,.174-17.325,.036-25.987,.036v.022Z" />
                                    </svg>
                                    <span class="text-nowrap text-xs text-gray-600 mt-[2px]">{{ convertEnglishToPersianNumber($blog->reed_time) }} دقیقه</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                @endforeach
                @else
                @foreach ($lastNewsPosts as $blog)
                <div
                    class="w-full justify-between md:justify-normal flex items-center px-2 py-2 md:py-0 md:px-0 flex-row-reverse md:flex-col gap-2 border-b md:border md:rounded-xl md:bg-[#F3F4F6] md:shadow">
                    <a href="{{ route('detail', ['slug' => $blog->slug]) .'/'}}" wire:navigate
                        class="relative w-[80px] md:w-full">
                        <div x-data="{
                                        loaded: false,
                                        init() {
                                            const observer = new IntersectionObserver((entries) => {
                                                entries.forEach(entry => {
                                                    if (entry.isIntersecting && !this.loaded) {
                                                        const img = new Image();
                                                        img.src = '{{ env('APP_URL_IMAGE').'images/'.$blog->image }}';
                                                        img.onload = () => {
                                                            this.loaded = true;
                                                            observer.unobserve(this.$el);
                                                        };
                                                    }
                                                });
                                            }, {
                                                rootMargin: '200px'
                                            });
                                            observer.observe(this.$el);
                                        }
                                    }"
                            class="w-[80px] md:w-full md:h-[260px] h-[80px] rounded-xl md:rounded-b-none bg-gray-200 flex items-center justify-center">
                            <img x-cloak x-show="loaded"
                                x-transition:enter="transition ease-out duration-300"
                                x-transition:enter-start="opacity-0"
                                x-transition:enter-end="opacity-100"
                                :src="'{{ env('APP_URL_IMAGE').'images/'.$blog->image }}'"
                                alt="{{ $blog->subject }}"
                                class="w-[80px] md:w-full md:h-[260px] h-[80px] rounded-xl md:rounded-b-none"
                                loading="lazy">
                        </div>
                    </a>
                    <div
                        class="flex md:w-full justify-start w-[73%] md:justify-normal flex-col gap-2 h-full md:p-4">
                        <a href="{{ route('detail', ['slug' => $blog->slug]) .'/'}}" wire:navigate
                            class="text-[#005eb9] text-[14px] md:text-[16px] font-bold">
                            {!! $blog->subject !!}
                        </a>
                        <div class="md:block hidden text-[#16205b]">
                            @php
                            $preview = Str::limit($blog->preview, 80, '...');
                            @endphp
                            {!! $preview !!}
                        </div>
                        <div class="flex gap-1 text-white md:mt-auto">
                            <div class="hidden md:flex flex-col justify-center">
                                <img class="bg-cover bg-center rounded-full size-8"
                                    src="{{ env('APP_URL_IMAGE').'images/static/'.$blog->user->picture }}" alt="">
                            </div>
                            <div class="flex items-center justify-between w-full flex-wrap">
                                <div class="flex items-center gap-1">
                                    <div class="text-xs text-gray-600  flex-col justify-center hidden md:flex">
                                        {{ $blog->user->full_name }}
                                    </div>
                                    <span style="font-variation-settings: 'wght' 500;"
                                        class="text-xs text-[#A0A4BC] hidden md:flex flex-col justify-center">|</span>
                                    <div class="text-xs text-gray-600 flex flex-col justify-center">
                                        {{ jalaliDate($blog->published_at, '%d %B، %Y') }}
                                    </div>
                                </div>
                                <div class="text-xs text-gray-600 flex items-center gap-1">
                                    <svg class="w-3 h-3 stroke-[20px] fill-gray-600" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                                        <path d="M430.972,511.871h-10.999c-7.142-2.466-13.451-6.138-18.729-11.711-6.527-6.891-13.598-13.272-20.021-20.253-3.006-3.267-5.237-3.134-8.84-1.088-28.127,15.97-58.257,25.77-90.473,29.319-47.013,5.179-91.431-3.412-133.616-24.417-4.587-2.284-9.583-7.067-13.578-6.325-4.372,.812-7.779,6.72-11.649,10.361-9.586,9.019-17.429,20.289-31.052,24.113h-10.999c-8.202-2.712-15.535-6.634-20.261-14.296-7.688-12.465-5.856-27.038,5.095-38.358,6.698-6.924,13.639-13.613,20.464-20.399C-10.549,340.462-.476,184.709,95.021,96.924c89.903-82.643,229.862-83.648,320.705-.831,45.2,41.207,71.314,92.614,76.822,153.495,6.584,72.768-16.736,135.633-67.656,189.955,1.708,1.156,3.598,2.055,4.997,3.447,6.49,6.46,13.324,12.659,19.129,19.699,8.158,9.893,9.058,21.088,3.402,32.701-4.413,9.062-12.424,13.427-21.449,16.48ZM80.649,256.827c6.65,0,13.342-.58,19.865,.215,3.998,.487,8.445,2.281,11.433,4.915,4.574,4.03,5.346,9.864,3.002,15.643-2.322,5.725-6.668,9.209-12.927,9.446-7.09,.269-14.198,.062-21.344,.062,6.497,90.251,84.175,156.516,160.193,159.907,0-6.988-.24-13.969,.069-20.926,.296-6.655,3.997-11.126,10.273-13.342,5.863-2.07,12.72-.593,16.136,4.561,2.156,3.253,3.324,7.549,3.709,11.497,.6,6.157,.159,12.416,.159,18.676,93.711-8.127,156.121-86.508,159.881-160.355-6.981,0-13.949,.24-20.892-.064-7.73-.338-13.564-6.15-14.21-13.544-.784-8.975,5.554-16.312,14.685-16.616,6.889-.229,13.791-.045,20.734-.045-7.275-89.982-82.342-155.346-160.307-160.017,0,6.973,.225,13.926-.057,20.859-.353,8.684-7.279,14.722-15.937,14.332-7.841-.353-13.932-6.397-14.226-14.576-.247-6.889-.051-13.795-.051-20.737-84.691,6.171-154.306,76.702-160.19,160.109Z" />
                                        <path d="M317.727,21.635c35.238-27.229,91.729-31.059,133.974,2.822,41.268,33.097,50.437,87.812,32.775,127.807-37.143-67.069-92.524-110.581-166.749-130.629Z" />
                                        <path d="M194.322,21.62C120.136,41.616,64.83,85.023,27.787,151.768c-14.977-29.145-13.64-83.098,24.228-119.983C94.052-9.162,155.466-8.002,194.322,21.62Z" />
                                        <path d="M318.68,294.953c-8.33,0-16.662,.116-24.988-.063-2.918-.063-4.789,.78-6.712,3.106-11.939,14.448-32.667,18.701-48.849,10.269-17.717-9.231-25.978-27.547-21.312-46.475,.529-2.148-.168-5.249-1.459-7.096-15.363-21.964-30.993-43.741-46.453-65.638-8.537-12.091-6.535-26.283,4.579-33.894,9.341-6.397,21.933-5.138,29.529,3.365,3.643,4.078,6.677,8.712,9.862,13.184,13.136,18.442,26.28,36.879,39.275,55.421,2.076,2.962,4.251,4.494,8.032,4.748,10.643,.717,19.487,5.564,26.308,13.63,2.329,2.754,4.59,3.613,8.017,3.581,16.491-.157,32.988-.267,49.476-.008,16.712,.263,27.444,15.387,22.095,30.665-3.146,8.987-11.38,14.945-21.414,15.146-8.659,.174-17.325,.036-25.987,.036v.022Z" />
                                    </svg>
                                    <span class="text-nowrap text-xs text-gray-600 mt-[2px]">{{ convertEnglishToPersianNumber($blog->reed_time) }} دقیقه</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                @endforeach
                @endif
            </div>

            <div class="md:hidden block">
                @if ($selectedCategoryPosts)
                @foreach ($categories as $item)
                @if (count($item->blogs()->where('status', 1)->get()) > 0 && $selectedCategoryPosts == $item->id)
                <a href="{{ route('CategoryBlog.index', ['slug' => $item->slug]) . '/' }}" wire:navigate
                    class="w-full p-3 md:hidden block mb-6 rounded-xl text-center border border-[#084642] text-[#084642]">
                    مشاهده مطالب بیشتر </a>
                @endif
                @endforeach
                @else
                <a href="{{ route('CategoryBlog.index', ['slug' => 'all']) . '/' }}" wire:navigate
                    class="w-full p-3 md:hidden block mb-6 rounded-xl text-center border border-[#084642] text-[#084642]">
                    مشاهده مطالب بیشتر </a>
                @endif
            </div>
        </div>
        <div class="w-full">
            <div class="mb-4 border-b  align-items-center justify-between flex ">
                <h2 class="inline-block text-[18px]  pb-2 border-b-2 rounded-t-lg  text-[#0075e7] border-[#0075e7] ">
                    اخبار</h2>
                {{-- <div class="md:block hidden">--}}
                {{-- @if ($selectedCategoryNews)--}}
                {{-- @foreach ($categorieNews as $item)--}}
                {{-- @if (!is_null($item->parent_id) && $selectedCategoryNews == $item->id)--}}
                {{-- <a class="text-[#16205b]   rounded-xl px-2 text-[16px]"--}}
                {{-- href=" {{ route('NewsCategory.show', ['slug' => $item->slug]) . '/' }}"--}}
                {{-- wire:navigate>مشاهده همه</a>--}}
                {{-- @endif--}}
                {{-- @endforeach--}}
                {{-- @else--}}
                {{-- <a class="text-[#16205b]   rounded-xl px-2 text-[16px]"--}}
                {{-- href=" {{ route('NewsCategory.index') . '/' }}" wire:navigate>مشاهده همه</a>--}}
                {{-- @endif--}}
                {{-- </div>--}}
            </div>
            <div class="flex items-center gap-2 overflow-scroll md:overflow-hidden no-scrollbar md:flex-wrap mb-4">
                <button wire:click="resetCategory('news')"
                    class="px-3 py-1 text-sm rounded-md transition-colors duration-200 text-nowrap"
                    :class="{
                                'bg-blue-100 text-blue-600': !$wire.selectedCategoryNews,
                                'bg-gray-100 hover:bg-gray-200': $wire.selectedCategoryNews
                            }">
                    آخرین اخبار
                </button>

                @foreach ($categorieNews->sortByDesc('priority') as $item)
                @if (!is_null($item->parent_id))
                @php
                $parent = App\Models\Category::where('id', $item->parent_id)->first();
                @endphp
                <button wire:click="selectCategory({{ $item->id }}, 'news')"
                    class="px-3 py-1 text-sm rounded-md transition-colors duration-200 text-nowrap"
                    :class="{
                                        'bg-blue-100 text-blue-600': $wire.selectedCategoryNews == {{ $item->id }},
                                        'bg-gray-100 hover:bg-gray-200': $wire.selectedCategoryNews != {{ $item->id }}
                                    }">
                    {{ $parent->title }} {{ $item->title }}
                </button>
                @endif
                @endforeach
                <a class="rounded-md transition-colors duration-200 py-1 px-3 font-semibold text-[16px] mr-auto bg-gray-100 hover:bg-gray-200 hidden md:block"
                    href="{{ isset($selectedRouteNews) ? $selectedRouteNews : route('CategoryBlog.index', ['slug' => 'news']) . '/' }}" wire:navigate>مشاهده
                    همه</a>
            </div>

            <div
                class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 justify-between gap-5 my-4 lg:my-8">
                @if($selectedCategoryNews)
                @foreach($this->getCategoryItems($selectedCategoryNews, 'news') as $blog)
                <div
                    class="w-full justify-between md:justify-normal flex items-center px-2 py-2 md:py-0 md:px-0 flex-row-reverse md:flex-col gap-2 border-b md:border md:rounded-xl md:bg-[#F3F4F6] md:shadow">
                    <a href="{{ route('detail', ['slug' => $blog->slug]) .'/'}}" wire:navigate
                        class="relative w-[80px] md:w-full">
                        <div x-data="{
                                        loaded: false,
                                        init() {
                                            const observer = new IntersectionObserver((entries) => {
                                                entries.forEach(entry => {
                                                    if (entry.isIntersecting && !this.loaded) {
                                                        const img = new Image();
                                                        img.src = '{{ env('APP_URL_IMAGE').'images/'.$blog->image }}';
                                                        img.onload = () => {
                                                            this.loaded = true;
                                                            observer.unobserve(this.$el);
                                                        };
                                                    }
                                                });
                                            }, {
                                                rootMargin: '200px'
                                            });
                                            observer.observe(this.$el);
                                        }
                                    }"
                            class="w-[80px] md:w-full md:h-[260px] h-[80px] rounded-xl md:rounded-b-none bg-gray-200 flex items-center justify-center">
                            <img x-cloak x-show="loaded"
                                x-transition:enter="transition ease-out duration-300"
                                x-transition:enter-start="opacity-0"
                                x-transition:enter-end="opacity-100"
                                :src="'{{ env('APP_URL_IMAGE').'images/'.$blog->image }}'"
                                alt="{{ $blog->subject }}"
                                class="w-[80px] md:w-full md:h-[260px] h-[80px] rounded-xl md:rounded-b-none"
                                loading="lazy">
                        </div>
                    </a>
                    <div
                        class="flex md:w-full justify-start w-[73%] md:justify-normal flex-col gap-2 h-full md:p-4">
                        <a href="{{ route('detail', ['slug' => $blog->slug]) .'/'}}" wire:navigate
                            class="text-[#005eb9] text-[14px] md:text-[16px] font-bold">
                            {!! $blog->subject !!}
                        </a>
                        <div class="md:block hidden text-[#16205b]">
                            @php
                            $preview = Str::limit($blog->preview, 80, '...');
                            @endphp
                            {!! $preview !!}
                        </div>
                        <div class="flex gap-1 text-white md:mt-auto">
                            <div class="hidden md:flex flex-col justify-center">
                                <img class="bg-cover bg-center rounded-full size-8"
                                    src="{{ env('APP_URL_IMAGE').'images/static/'.$blog->user->picture }}" alt="">
                            </div>
                            <div class="flex items-center justify-between w-full flex-wrap">
                                <div class="flex items-center gap-1">
                                    <div class="text-xs text-gray-600  flex-col justify-center hidden md:flex">
                                        {{ $blog->user->full_name }}
                                    </div>
                                    <span style="font-variation-settings: 'wght' 500;"
                                        class="text-xs text-[#A0A4BC] hidden md:flex flex-col justify-center">|</span>
                                    <div class="text-xs text-gray-600 flex flex-col justify-center">
                                        {{ jalaliDate($blog->published_at, '%d %B، %Y') }}
                                    </div>
                                </div>
                                <div class="text-xs text-gray-600 flex items-center gap-1">
                                    <svg class="w-3 h-3 stroke-[20px] fill-gray-600" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                                        <path d="M430.972,511.871h-10.999c-7.142-2.466-13.451-6.138-18.729-11.711-6.527-6.891-13.598-13.272-20.021-20.253-3.006-3.267-5.237-3.134-8.84-1.088-28.127,15.97-58.257,25.77-90.473,29.319-47.013,5.179-91.431-3.412-133.616-24.417-4.587-2.284-9.583-7.067-13.578-6.325-4.372,.812-7.779,6.72-11.649,10.361-9.586,9.019-17.429,20.289-31.052,24.113h-10.999c-8.202-2.712-15.535-6.634-20.261-14.296-7.688-12.465-5.856-27.038,5.095-38.358,6.698-6.924,13.639-13.613,20.464-20.399C-10.549,340.462-.476,184.709,95.021,96.924c89.903-82.643,229.862-83.648,320.705-.831,45.2,41.207,71.314,92.614,76.822,153.495,6.584,72.768-16.736,135.633-67.656,189.955,1.708,1.156,3.598,2.055,4.997,3.447,6.49,6.46,13.324,12.659,19.129,19.699,8.158,9.893,9.058,21.088,3.402,32.701-4.413,9.062-12.424,13.427-21.449,16.48ZM80.649,256.827c6.65,0,13.342-.58,19.865,.215,3.998,.487,8.445,2.281,11.433,4.915,4.574,4.03,5.346,9.864,3.002,15.643-2.322,5.725-6.668,9.209-12.927,9.446-7.09,.269-14.198,.062-21.344,.062,6.497,90.251,84.175,156.516,160.193,159.907,0-6.988-.24-13.969,.069-20.926,.296-6.655,3.997-11.126,10.273-13.342,5.863-2.07,12.72-.593,16.136,4.561,2.156,3.253,3.324,7.549,3.709,11.497,.6,6.157,.159,12.416,.159,18.676,93.711-8.127,156.121-86.508,159.881-160.355-6.981,0-13.949,.24-20.892-.064-7.73-.338-13.564-6.15-14.21-13.544-.784-8.975,5.554-16.312,14.685-16.616,6.889-.229,13.791-.045,20.734-.045-7.275-89.982-82.342-155.346-160.307-160.017,0,6.973,.225,13.926-.057,20.859-.353,8.684-7.279,14.722-15.937,14.332-7.841-.353-13.932-6.397-14.226-14.576-.247-6.889-.051-13.795-.051-20.737-84.691,6.171-154.306,76.702-160.19,160.109Z" />
                                        <path d="M317.727,21.635c35.238-27.229,91.729-31.059,133.974,2.822,41.268,33.097,50.437,87.812,32.775,127.807-37.143-67.069-92.524-110.581-166.749-130.629Z" />
                                        <path d="M194.322,21.62C120.136,41.616,64.83,85.023,27.787,151.768c-14.977-29.145-13.64-83.098,24.228-119.983C94.052-9.162,155.466-8.002,194.322,21.62Z" />
                                        <path d="M318.68,294.953c-8.33,0-16.662,.116-24.988-.063-2.918-.063-4.789,.78-6.712,3.106-11.939,14.448-32.667,18.701-48.849,10.269-17.717-9.231-25.978-27.547-21.312-46.475,.529-2.148-.168-5.249-1.459-7.096-15.363-21.964-30.993-43.741-46.453-65.638-8.537-12.091-6.535-26.283,4.579-33.894,9.341-6.397,21.933-5.138,29.529,3.365,3.643,4.078,6.677,8.712,9.862,13.184,13.136,18.442,26.28,36.879,39.275,55.421,2.076,2.962,4.251,4.494,8.032,4.748,10.643,.717,19.487,5.564,26.308,13.63,2.329,2.754,4.59,3.613,8.017,3.581,16.491-.157,32.988-.267,49.476-.008,16.712,.263,27.444,15.387,22.095,30.665-3.146,8.987-11.38,14.945-21.414,15.146-8.659,.174-17.325,.036-25.987,.036v.022Z" />
                                    </svg>
                                    <span class="text-nowrap text-xs text-gray-600 mt-[2px]">{{ convertEnglishToPersianNumber($blog->reed_time) }} دقیقه</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                @endforeach
                @else
                @foreach ($lastNewsArticles as $blog)
                <div
                    class="w-full justify-between md:justify-normal flex items-center px-2 py-2 md:py-0 md:px-0 flex-row-reverse md:flex-col gap-2 border-b md:border md:rounded-xl md:bg-[#F3F4F6] md:shadow">
                    <a href="{{ route('detail', ['slug' => $blog->slug]) .'/'}}" wire:navigate
                        class="relative w-[80px] md:w-full">
                        <div x-data="{
                                        loaded: false,
                                        init() {
                                            const observer = new IntersectionObserver((entries) => {
                                                entries.forEach(entry => {
                                                    if (entry.isIntersecting && !this.loaded) {
                                                        const img = new Image();
                                                        img.src = '{{ env('APP_URL_IMAGE').'images/'.$blog->image }}';
                                                        img.onload = () => {
                                                            this.loaded = true;
                                                            observer.unobserve(this.$el);
                                                        };
                                                    }
                                                });
                                            }, {
                                                rootMargin: '200px'
                                            });
                                            observer.observe(this.$el);
                                        }
                                    }"
                            class="w-[80px] md:w-full md:h-[260px] h-[80px] rounded-xl md:rounded-b-none bg-gray-200 flex items-center justify-center">
                            <img x-cloak x-show="loaded"
                                x-transition:enter="transition ease-out duration-300"
                                x-transition:enter-start="opacity-0"
                                x-transition:enter-end="opacity-100"
                                :src="'{{ env('APP_URL_IMAGE').'images/'.$blog->image }}'"
                                alt="{{ $blog->subject }}"
                                class="w-[80px] md:w-full md:h-[260px] h-[80px] rounded-xl md:rounded-b-none"
                                loading="lazy">
                        </div>
                    </a>
                    <div
                        class="flex md:w-full justify-start w-[73%] md:justify-normal flex-col gap-2 h-full md:p-4">
                        <a href="{{ route('detail', ['slug' => $blog->slug]) .'/'}}" wire:navigate
                            class="text-[#005eb9] text-[14px] md:text-[16px] font-bold">
                            {!! $blog->subject !!}
                        </a>
                        <div class="md:block hidden text-[#16205b]">
                            @php
                            $preview = Str::limit($blog->preview, 80, '...');
                            @endphp
                            {!! $preview !!}
                        </div>
                        <div class="flex gap-1 text-white md:mt-auto">
                            <div class="hidden md:flex flex-col justify-center">
                                <img class="bg-cover bg-center rounded-full size-8"
                                    src="{{ env('APP_URL_IMAGE').'images/static/'.$blog->user->picture }}" alt="">
                            </div>
                            <div class="flex items-center justify-between w-full flex-wrap">
                                <div class="flex items-center gap-1">
                                    <div class="text-xs text-gray-600  flex-col justify-center hidden md:flex">
                                        {{ $blog->user->full_name }}
                                    </div>
                                    <span style="font-variation-settings: 'wght' 500;"
                                        class="text-xs text-[#A0A4BC] hidden md:flex flex-col justify-center">|</span>
                                    <div class="text-xs text-gray-600 flex flex-col justify-center">
                                        {{ jalaliDate($blog->published_at, '%d %B، %Y') }}
                                    </div>
                                </div>
                                <div class="text-xs text-gray-600 flex items-center gap-1">
                                    <svg class="w-3 h-3 stroke-[20px] fill-gray-600" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                                        <path d="M430.972,511.871h-10.999c-7.142-2.466-13.451-6.138-18.729-11.711-6.527-6.891-13.598-13.272-20.021-20.253-3.006-3.267-5.237-3.134-8.84-1.088-28.127,15.97-58.257,25.77-90.473,29.319-47.013,5.179-91.431-3.412-133.616-24.417-4.587-2.284-9.583-7.067-13.578-6.325-4.372,.812-7.779,6.72-11.649,10.361-9.586,9.019-17.429,20.289-31.052,24.113h-10.999c-8.202-2.712-15.535-6.634-20.261-14.296-7.688-12.465-5.856-27.038,5.095-38.358,6.698-6.924,13.639-13.613,20.464-20.399C-10.549,340.462-.476,184.709,95.021,96.924c89.903-82.643,229.862-83.648,320.705-.831,45.2,41.207,71.314,92.614,76.822,153.495,6.584,72.768-16.736,135.633-67.656,189.955,1.708,1.156,3.598,2.055,4.997,3.447,6.49,6.46,13.324,12.659,19.129,19.699,8.158,9.893,9.058,21.088,3.402,32.701-4.413,9.062-12.424,13.427-21.449,16.48ZM80.649,256.827c6.65,0,13.342-.58,19.865,.215,3.998,.487,8.445,2.281,11.433,4.915,4.574,4.03,5.346,9.864,3.002,15.643-2.322,5.725-6.668,9.209-12.927,9.446-7.09,.269-14.198,.062-21.344,.062,6.497,90.251,84.175,156.516,160.193,159.907,0-6.988-.24-13.969,.069-20.926,.296-6.655,3.997-11.126,10.273-13.342,5.863-2.07,12.72-.593,16.136,4.561,2.156,3.253,3.324,7.549,3.709,11.497,.6,6.157,.159,12.416,.159,18.676,93.711-8.127,156.121-86.508,159.881-160.355-6.981,0-13.949,.24-20.892-.064-7.73-.338-13.564-6.15-14.21-13.544-.784-8.975,5.554-16.312,14.685-16.616,6.889-.229,13.791-.045,20.734-.045-7.275-89.982-82.342-155.346-160.307-160.017,0,6.973,.225,13.926-.057,20.859-.353,8.684-7.279,14.722-15.937,14.332-7.841-.353-13.932-6.397-14.226-14.576-.247-6.889-.051-13.795-.051-20.737-84.691,6.171-154.306,76.702-160.19,160.109Z" />
                                        <path d="M317.727,21.635c35.238-27.229,91.729-31.059,133.974,2.822,41.268,33.097,50.437,87.812,32.775,127.807-37.143-67.069-92.524-110.581-166.749-130.629Z" />
                                        <path d="M194.322,21.62C120.136,41.616,64.83,85.023,27.787,151.768c-14.977-29.145-13.64-83.098,24.228-119.983C94.052-9.162,155.466-8.002,194.322,21.62Z" />
                                        <path d="M318.68,294.953c-8.33,0-16.662,.116-24.988-.063-2.918-.063-4.789,.78-6.712,3.106-11.939,14.448-32.667,18.701-48.849,10.269-17.717-9.231-25.978-27.547-21.312-46.475,.529-2.148-.168-5.249-1.459-7.096-15.363-21.964-30.993-43.741-46.453-65.638-8.537-12.091-6.535-26.283,4.579-33.894,9.341-6.397,21.933-5.138,29.529,3.365,3.643,4.078,6.677,8.712,9.862,13.184,13.136,18.442,26.28,36.879,39.275,55.421,2.076,2.962,4.251,4.494,8.032,4.748,10.643,.717,19.487,5.564,26.308,13.63,2.329,2.754,4.59,3.613,8.017,3.581,16.491-.157,32.988-.267,49.476-.008,16.712,.263,27.444,15.387,22.095,30.665-3.146,8.987-11.38,14.945-21.414,15.146-8.659,.174-17.325,.036-25.987,.036v.022Z" />
                                    </svg>
                                    <span class="text-nowrap text-xs text-gray-600 mt-[2px]" lang="fa">{{ convertEnglishToPersianNumber($blog->reed_time) }} دقیقه</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                @endforeach
                @endif
            </div>


            <div class="md:hidden block">
                @if ($selectedCategoryNews)
                @foreach ($categorieNews as $item)
                @if (!is_null($item->parent_id) && $selectedCategoryNews == $item->id)
                <a href="{{ cleanRouteUrl('NewsCategory.show', ['slug' => $item->slug]) . '/' }}"
                    wire:navigate
                    class="w-full p-3 md:hidden block mb-6 rounded-xl text-center border border-[#084642] text-[#084642]">
                    مشاهده اخبار بیشتر </a>
                @endif
                @endforeach
                @else
                <a href="{{ cleanRouteUrl('NewsCategory.index') . '/' }}" wire:navigate
                    class="w-full p-3 md:hidden block mb-6 rounded-xl text-center border border-[#084642] text-[#084642]">
                    مشاهده اخبار بیشتر </a>
                @endif
            </div>

        </div>


    </div>

</div>