@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%;
    }

    .app {
        transition: width, height, margin-top, cubic-bezier(0.25, 1, 0.5, 1) 100ms;
    }

    .app:hover {
        width: 90px;
        height: 90px;
        margin-top: -30px;
    }

    .app:hover+.app {
        width: calc(80px + var(--dock-offset-right, 0px));
        height: calc(80px + var(--dock-offset-right, 0px));
        margin-top: calc(-20px + var(--dock-offset-right, 0px) * -1);
    }

    .app:hover+.app+.app {
        width: calc(70px + var(--dock-offset-right, 0px));
        height: calc(70px + var(--dock-offset-right, 0px));
        margin-top: calc(-10px + var(--dock-offset-right, 0px) * -1);
    }

    .app:has(+ .app:hover) {
        width: calc(80px + var(--dock-offset-left, 0px));
        height: calc(80px + var(--dock-offset-left, 0px));
        margin-top: calc(-20px + var(--dock-offset-left, 0px) * -1);
    }

    .app:has(+ .app + .app:hover) {
        width: calc(70px + var(--dock-offset-left, 0px));
        height: calc(70px + var(--dock-offset-left, 0px));
        margin-top: calc(-10px + var(--dock-offset-left, 0px) * -1);
    }

    .page {
        min-height: 100dvh;
        display: flex;
    }

    .dock {
        margin: auto auto 12px auto;
        border-radius: 24px;
        padding: 0 12px;
        background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.15));
        box-shadow: rgba(255, 255, 255, 0.17) 0px 0px 0px 1px inset;
    }

    .dock ul {
        display: flex;
        list-style-type: none;
        padding: 0;
    }

    .app {
        width: 60px;
        height: 60px;
        position: relative;
    }

    .app img {
        width: 50px;
        height: 50px;
    }

    .app a {
        width: 100%;
        height: 100%;
        display: block;
        border-radius: 12px;
        color: #fff;
    }

    .app:hover .tooltip,
    .app:focus-within .tooltip {
        opacity: 1;
    }

    .tooltip {
        position: absolute;
        top: -40px;
        left: 50%;
        transform: translateX(-50%);
        opacity: 0;
        transition: ease-in opacity 100ms;
        display: block;
        background: rgba(0, 0, 0, 0.58);
        padding: 8px;
        border-radius: 12px;
        height: 22px;
        width: auto;
        box-shadow: rgba(0, 0, 0, 0.17) 0px 12px 8px 1px;
        white-space: nowrap;
    }

    .source-links {
        position: absolute;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        right: 20px;
        top: 20px;
        text-align: right;
    }

    .source-links a {
        color: #fff;
        opacity: 0.3;
        margin-bottom: 8px;
    }

    .source-links a:hover {
        opacity: 1;
    }

    .mobile-message {
        position: absolute;
        width: 100%;
        height: 100%;
        color: #fff;
        font-size: 18px;
        font-weight: 600;
        line-height: 1.2;
        justify-content: center;
        align-items: center;
        display: none;
    }

    @media only screen and (max-width: 800px) {
        .mobile-message {
            display: flex;
        }
    }

    .mobile-message p {
        max-width: 70vw;
    }

    .mobile-message a {
        color: #fff;
    }

    .mobile-message::before {
        content: "";
        position: fixed;
        inset: 0;
        background-color: rgba(255, 255, 255, 0.3);
        filter: blur(80px);
        -webkit-filter: blur(80px);
    }

    .loader-image {
        animation: continuousScale 5s linear forwards;
        transform-origin: center;
    }

    @keyframes continuousScale {
        0% {
            transform: scale(1);
        }

        100% {
            transform: scale(50);
            width: 100vw;
            height: 100vh;
        }
    }

    .app-clicked {
        animation: bookBounce 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
        transform-origin: bottom center;
    }

    @keyframes bookBounce {

        0%,
        100% {
            transform: translateY(0) scale(1);
        }

        25% {
            transform: translateY(-10px) scale(1.05);
        }

        50% {
            transform: translateY(0) scale(1);
        }

        75% {
            transform: translateY(-5px) scale(1.02);
        }
    }

    @media (min-width: 768px) {
        .loading-pulse {
            display: none !important;
        }
    }

    @media (min-width: 768px) {
        .loading-pulse2 {
            display: flex !important;
        }
    }
</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">
    <div class="px-6 mt-2 sm:px-6">
        <div class="max-w-5xl mx-auto">
            <div x-data="{ getVideoHeight() { if (window.innerWidth < 768) return 400; if (window.innerHeight < 900) return 500; return 650; } }" x-init=" let updateHeight = () => $el.style.height = `${getVideoHeight()}px`; updateHeight(); let throttleTimer; const throttle = (callback, time) => { if (throttleTimer) return; throttleTimer = true; setTimeout(() => { callback(); throttleTimer = false; }, time); }; window.addEventListener('resize', () => throttle(updateHeight, 100)); " class="relative me-auto overflow-hidden w-[70%] rounded-[15px]">
                <div class="absolute inset-0 bg-[#00000086] mix-blend-multiply z-10"></div>
                <video autoplay loop muted playsinline class="w-full h-full object-cover">
                    <source src="{{ asset('video/appvideo.mp4') }}" type="video/mp4">
                    مرورگر شما از پخش ویدیو پشتیبانی نمی‌کند.
                </video>
                <div class="absolute inset-0 bg-gradient-to-t bg-[#0a0f52a9] z-10"></div>
                <div x-data="bookList" class="relative">
                    <div id="custom-page-loader" class="hidden fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50">
                        <img x-bind:src="currentImage" class="loader-image w-16 h-16 object-contain" />
                    </div>
                    <nav dir="ltr" class="absolute bg-[#121864bd] bg-gradient-to-t dock dock-transition bottom-10 left-1/2 px-2 pb-2 pt-3 -translate-x-1/2 mx-auto rounded-[15px] z-20">
                        @php
                        $items = [
                        ['slug' => 'what-is-walt-disney', 'name' => 'دیزنی'],
                        ['slug' => 'what-is-cocacola', 'name' => 'کوکاکولا'],
                        ['slug' => 'what-is-netflix', 'name' => 'نتفلیکس'],
                        ['slug' => 'what-is-walmart', 'name' => 'والمارت'],
                        ['slug' => 'what-is-mcdonalds', 'name' => 'مک‌دونالد'],
                        ['slug' => 'what-is-amazon', 'name' => 'آمازون'],
                        ['slug' => 'what-is-microsoft', 'name' => 'مایکروسافت'],
                        ['slug' => 'what-is-meta', 'name' => 'متا'],
                        ['slug' => 'what-is-tesla', 'name' => 'تسلا'],
                        ['slug' => 'what-is-google', 'name' => 'گوگل'],
                        ['slug' => 'what-is-apple', 'name' => 'اپل'],
                        ['slug' => 'what-is-nvidia', 'name' => 'انویدیا'],
                        ]
                        @endphp
                        <ul>
                            @foreach ($items as $item)
                            <li class="app" @mousemove="handleAppHover($event, $el)" @click="handleClick($event, $el, '{{ $item['slug'] }}')" x-ref="app-{{ $item['slug'] }}">
                                <a href="{{ route('detail', ['slug' => $item['slug']]) }}" wire:navigate target="_blank" @click.prevent>
                                    <img src="{{ asset('image/shortcut-mini-' . $item['slug'] . '.svg') }}" />
                                </a>
                            </li>
                            @endforeach
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </div>

    <div x-data="catList" class="visible z-10 mx-auto flex max-w-5xl flex-col items-center mt-8 px-4 mb-12 lg:flex-col lg:justify-between">
        <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>
        </div>
        <div class="w-full h-full flex md:flex-wrap items-center overflow-scroll md:overflow-hidden no-scrollbar gap-6 my-4 lg:my-8">
            @php
            $icons = [
            asset("image/cats/financial markets.svg"),
            asset("image/cats/invest.svg"),
            asset("image/cats/blockchain.svg"),
            asset("image/cats/nft.svg"),
            asset("image/cats/metaverse.svg"),
            asset("image/cats/ai.svg"),
            asset("image/cats/tecnology.svg"),
            asset("image/cats/biography.svg"),
            asset("image/cats/company.svg"),
            asset("image/cats/scam.svg")
            ];
            @endphp
            @foreach($categories->sortByDesc('priority') as $category)
            <div @click="handleCatClick({{ $category->id }}, '{{ $category->title }}', '{{ $category->slug }}')" class=" cursor-pointer rounded-full text-center my-2 flex flex-col items-center justify-center space-y-2 w-[85px]">
                <img class="object-cover object-center min-w-[55px]  h-[55px] w-[55px] rounded-full bg-gray-100 aspect-square" src="{{ $icons[$loop->index] }}"
                    loading="lazy" />
                <span class="font-semibold text-sm text-nowrap">{{ ($category->id == 67) ? "کلا‌هبرداری‌ها" : (($category->id == 29) ? "شرکت‌ها" : $category->title) }}</span>
            </div>
            @endforeach
        </div>
        <div wire:ignore
            x-show="showBackdrop"
            x-transition:enter="transition-opacity duration-300"
            x-transition:enter-start="opacity-0"
            x-transition:enter-end="opacity-100"
            x-transition:leave="transition-opacity duration-300"
            x-transition:leave-start="opacity-100"
            x-transition:leave-end="opacity-0"
            x-cloak
            style="z-index: 5000; backdrop-filter: brightness(0.5); filter: blur(4px);"
            class="fixed top-0 right-0 h-screen w-screen ">
        </div>
        <div x-show="showBackdrop" x-transition:enter="transition-transform duration-300 ease-out"
            x-transition:enter-start="-translate-x-full"
            x-transition:enter-end="translate-x-0"
            x-transition:leave="transition-transform duration-300 ease-in"
            x-transition:leave-start="translate-x-0"
            x-transition:leave-end="-translate-x-full" @click.outside="closeBackdrop()" x-cloak class="fixed top-0 left-0 z-[8000] flex h-[100vh] mx-auto w-[100%] 2xl:w-[25%] lg:w-[40%] flex-col p-4 md:p-4  md:py-3 rounded-none bg-gray-50 lg:rounded-tr-xl lg:rounded-br-xl">
            <div class="flex items-center justify-between w-full border-b pb-2">
                <span class="font-bold text-[18px]" x-text="selectedTitle">دسته بندی ها</span>
                <button @click="closeBackdrop()"
                    class="bg-gray-100 flex h-10 items-center justify-center pb-1 px-2 rounded-full w-10 z-20 block lg:hidden"
                    type="button ">
                    <svg class="w-4 h-4 fill-[#62686f] cursor-pointer mt-1" xmlns="http://www.w3.org/2000/svg" fill="#000" viewBox="0 0 384 512">
                        <path d="M378.4 71.4c8.5-10.1 7.2-25.3-2.9-33.8s-25.3-7.2-33.8 2.9L192 218.7 42.4 40.6C33.9 30.4 18.7 29.1 8.6 37.6S-2.9 61.3 5.6 71.4L160.7 256 5.6 440.6c-8.5 10.2-7.2 25.3 2.9 33.8s25.3 7.2 33.8-2.9L192 293.3 341.6 471.4c8.5 10.1 23.7 11.5 33.8 2.9s11.5-23.7 2.9-33.8L223.3 256l155-184.6z">
                        </path>
                    </svg>
                </button>
                </butto>
            </div>
            <div style="z-index: 5001" class="flex flex-col justify-between gap-3 py-3 h-full">
                <div class="h-full w-full overflow-auto no-scrollbar">
                    <div class="flex items-center gap-3 sticky top-0 bg-gray-50 z-50 pb-4">
                        <button
                            @click="changeActiveTab('latest')"
                            :class="{'bg-blue-100 text-blue-600': activeTab == 'latest', 'bg-gray-100 hover:bg-gray-200': activeTab != 'latest'}"
                            class="rounded-md transition-colors font-semibold duration-200 py-1 px-3 text-[14px] flex items-center gap-2 h-10 text-[16px]">
                            جدیدترین‌ها
                            <div x-ref="lottieIcon" class="w-14 h-14"></div>
                        </button>
                        <button
                            @click="changeActiveTab('hotest')"
                            :class="{'bg-blue-100 text-blue-600': activeTab == 'hotest', 'bg-gray-100 hover:bg-gray-200': activeTab != 'hotest'}"
                            class="rounded-md transition-colors font-semibold duration-200 py-1 px-3 text-[14px] flex items-center gap-2 h-10 text-[16px]">
                            داغ‌ترین‌ها
                            <div x-ref="lottieIcon2" class="w-[1.7rem] h-[1.7rem]"></div>
                        </button>
                    </div>
                    @php
                    $routeTemplate = route('detail', ['slug' => '__SLUG__']).'/';
                    $catRoute = route('CategoryBlog.index', ['slug' => '__SLUG__']).'/';
                    @endphp
                    {{-- <div class="mt-4" x-show="!loadingFetch && fetchedItems.length > 0">--}}
                    {{-- <div class="w-full h-full grid grid-cols-1">--}}
                    {{-- <template x-for="item in fetchedItems" :key="item.id">--}}
                    {{-- <div class="col-span-1 flex items-center gap-4 p-2 h-[100px]">--}}
                    {{-- <a :href="getDetailUrl(item.slug)" wire:navigate class="relative w-[100px] h-[80px]">--}}
                    {{-- <img class="w-[100px] h-[80px] border rounded-xl" :src="getImageUrl(item.image)" :alt="item.subject">--}}
                    {{-- </a>--}}
                    {{-- <div class="flex flex-col gap-2 h-full justify-between w-[73%]">--}}
                    {{-- <a style="line-height:28px" :href="getDetailUrl(item.slug)" x-text="item.subject" wire:navigate class="text-[#005eb9] text-start font-bold text-[14px]">--}}

                    {{-- </a>--}}
                    {{-- <div x-text="item.published_at" class="text-xs text-gray-400 flex flex-col justify-center text-[12px]">--}}
                    {{-- --}}{{-- {{ jdate($item->published_at)->ago() }}--}}
                    {{-- </div>--}}
                    {{-- </div>--}}
                    {{-- </div>--}}
                    {{-- </template>--}}
                    {{-- </div>--}}
                    {{-- </div>--}}
                    <div class="flex flex-col"
                        x-show="!loadingFetch && fetchedItems.length > 0"
                        {{--                         x-init="--}}
                        {{--                        calculateVisibleItems();--}}
                        {{--                        if (!window.__resizeBound) {--}}
                        {{--                            window.addEventListener('resize', () => calculateVisibleItems());--}}
                        {{--                            window.__resizeBound = true;--}}
                        {{--                        }--}}
                        {{--                    "--}}
                        {{--                         x-ref="listContainer"--}}>
                        <template x-for="item in fetchedItems" :key="item.id">
                            <div class="col-span-1 flex items-center gap-4 py-2 px-0 h-[100px]">
                                <a :href="getDetailUrl(item.slug)" wire:navigate class="relative w-[100px] h-[80px]">
                                    <img class="w-[100px] h-[80px] border rounded-xl" :src="getImageUrl(item.image)" :alt="item.subject">
                                </a>
                                <div class="flex flex-col h-full justify-between w-[73%]">
                                    <a style="line-height:28px" :href="getDetailUrl(item.slug)" x-text="item.subject" wire:navigate class="text-[#005eb9] text-start font-bold text-[14px]"></a>
                                    <div x-text="item.published_at" class="text-xs text-gray-400 flex flex-col justify-center text-[12px] mb-[7px]"></div>
                                </div>
                            </div>
                        </template>

                    </div>
                    <div x-show="loadingFetch" class="grid grid-cols-1 gap-4">
                        <div class="col-span-1 flex items-center gap-4 py-2 px-0 h-[100px]  rounded-lg animate-pulse">
                            <div class="w-[100px] h-[80px] bg-gray-200 rounded-xl"></div>
                            <div class="flex flex-col gap-2 h-full justify-between w-[73%]">
                                <div class="h-4 bg-gray-200 rounded w-full"></div>
                                <div class="h-3 bg-gray-200 rounded w-1/2 mb-[7px]"></div>
                            </div>
                        </div>

                        <div class="col-span-1 flex items-center gap-4 py-2 px-0 h-[100px]  rounded-lg animate-pulse">
                            <div class="w-[100px] h-[80px] bg-gray-200 rounded-xl"></div>
                            <div class="flex flex-col gap-2 h-full justify-between w-[73%]">
                                <div class="h-4 bg-gray-200 rounded w-full"></div>
                                <div class="h-3 bg-gray-200 rounded w-1/2 mb-[7px]"></div>
                            </div>
                        </div>
                    </div>
                    <div x-show="loadingFetch" class="grid grid-cols-1 gap-4">
                        <div class="col-span-1 flex items-center gap-4 py-2 px-0 h-[100px]  rounded-lg animate-pulse">
                            <div class="w-[100px] h-[80px] bg-gray-200 rounded-xl"></div>
                            <div class="flex flex-col gap-2 h-full justify-between w-[73%]">
                                <div class="h-4 bg-gray-200 rounded w-full"></div>
                                <div class="h-3 bg-gray-200 rounded w-1/2 mb-[7px]"></div>
                            </div>
                        </div>

                        <div class="col-span-1 flex items-center gap-4 py-2 px-0 h-[100px]  rounded-lg animate-pulse">
                            <div class="w-[100px] h-[80px] bg-gray-200 rounded-xl"></div>
                            <div class="flex flex-col gap-2 h-full justify-between w-[73%]">
                                <div class="h-4 bg-gray-200 rounded w-full"></div>
                                <div class="h-3 bg-gray-200 rounded w-1/2 mb-[7px]"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Show More Button -->
                <div x-show="!loadingFetch && fetchedItems.length > 0" class="flex justify-center mb-8">
                    {{-- <button @click="redirectToMore()" class="text-sm text-blue-600 underline">مشاهده همه</button>--}}
                    <a :href="showAllCat()" wire:navigate
                        class="w-full p-3 rounded-xl text-center border border-black text-black">
                        مشاهده همه
                    </a>
                </div>
            </div>
        </div>
    </div>

    <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 dir="ltr" class="md:block hidden relative h-[40px] w-[700px] mb-2 overflow-hidden">--}}
                {{-- <div x-data="magsSlider" class="h-full">--}}
                {{-- <a x-show="!isCollapsed"--}}
                {{-- x-transition:enter="transition ease-out duration-300"--}}
                {{-- x-transition:enter-start="-translate-x-full"--}}
                {{-- x-transition:enter-end="translate-x-0"--}}
                {{-- x-transition:leave="transition ease-in duration-300"--}}
                {{-- x-transition:leave-start="translate-x-0"--}}
                {{-- x-transition:leave-end="-translate-x-full"--}}
                {{-- :href="currentMagLink"--}}
                {{-- style="width:max-content"--}}
                {{-- class="absolute h-[40px] flex items-center gap-2 px-2 py-2 rounded-md shadow text-start bg-[#fee5db]">--}}
                {{-- <p dir="rtl" class="text-[#eb7425] text-sm p-0 m-0" x-text="currentMagSubject"></p>--}}
                {{-- <svg xmlns="http://www.w3.org/2000/svg" fill="#eb7425" width="24px" height="24px" viewBox="-80 0 512 512"><path d="M176 80c-52.94 0-96 43.06-96 96 0 8.84 7.16 16 16 16s16-7.16 16-16c0-35.3 28.72-64 64-64 8.84 0 16-7.16 16-16s-7.16-16-16-16zM96.06 459.17c0 3.15.93 6.22 2.68 8.84l24.51 36.84c2.97 4.46 7.97 7.14 13.32 7.14h78.85c5.36 0 10.36-2.68 13.32-7.14l24.51-36.84c1.74-2.62 2.67-5.7 2.68-8.84l.05-43.18H96.02l.04 43.18zM176 0C73.72 0 0 82.97 0 176c0 44.37 16.45 84.85 43.56 115.78 16.64 18.99 42.74 58.8 52.42 92.16v.06h48v-.12c-.01-4.77-.72-9.51-2.15-14.07-5.59-17.81-22.82-64.77-62.17-109.67-20.54-23.43-31.52-53.15-31.61-84.14-.2-73.64 59.67-128 127.95-128 70.58 0 128 57.42 128 128 0 30.97-11.24 60.85-31.65 84.14-39.11 44.61-56.42 91.47-62.1 109.46a47.507 47.507 0 0 0-2.22 14.3v.1h48v-.05c9.68-33.37 35.78-73.18 52.42-92.16C335.55 260.85 352 220.37 352 176 352 78.8 273.2 0 176 0z"/></svg>--}}
                {{-- </a>--}}
                {{-- <div x-show="isCollapsed"--}}
                {{-- x-transition:enter="transition ease-out duration-300"--}}
                {{-- x-transition:leave="transition ease-in duration-300"--}}
                {{-- class="absolute h-[40px] flex items-center gap-2 px-1 py-2 rounded-l-md shadow text-start bg-[#fee5db]"--}}
                {{-- style="width: 2px; left: 0;">--}}
                {{-- </div>--}}
                {{-- </div>--}}
                {{-- </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()->where('status', 1)->get()) > 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 wire:loading.remove wire:target="selectCategory" class="loading-pulse2 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 hidden md:flex flex-col justify-center">
                                        {{ $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

                <div wire:loading wire:target="selectCategory" class="grid grid-cols-1 w-full gap-4 block md:hidden loading-pulse">
                    <div class="col-span-1 flex items-center gap-4 p-2 h-[100px]  rounded-lg animate-pulse justify-between">
                        <div class="flex flex-col gap-2 h-full justify-between w-[73%]">
                            <div class="h-4 bg-gray-200 rounded w-full"></div>
                            <div class="h-3 bg-gray-200 rounded w-1/2"></div>
                        </div>
                        <div class="w-[80px] h-[80px] bg-gray-200 rounded-xl"></div>
                    </div>

                    <div class="col-span-1 flex items-center gap-4 p-2 h-[100px]  rounded-lg animate-pulse justify-between">
                        <div class="flex flex-col gap-2 h-full justify-between w-[73%]">
                            <div class="h-4 bg-gray-200 rounded w-full"></div>
                            <div class="h-3 bg-gray-200 rounded w-1/2"></div>
                        </div>
                        <div class="w-[80px] h-[80px] bg-gray-200 rounded-xl"></div>
                    </div>
                </div>
                <div wire:loading wire:target="selectCategory" class="grid grid-cols-1 w-full gap-4 block md:hidden loading-pulse">
                    <div class="col-span-1 flex items-center gap-4 p-2 h-[100px]  rounded-lg animate-pulse justify-between">
                        <div class="flex flex-col gap-2 h-full justify-between w-[73%]">
                            <div class="h-4 bg-gray-200 rounded w-full"></div>
                            <div class="h-3 bg-gray-200 rounded w-1/2"></div>
                        </div>
                        <div class="w-[80px] h-[80px] bg-gray-200 rounded-xl"></div>
                    </div>

                    <div class="col-span-1 flex items-center gap-4 p-2 h-[100px]  rounded-lg animate-pulse justify-between">
                        <div class="flex flex-col gap-2 h-full justify-between w-[73%]">
                            <div class="h-4 bg-gray-200 rounded w-full"></div>
                            <div class="h-3 bg-gray-200 rounded w-1/2"></div>
                        </div>
                        <div class="w-[80px] h-[80px] bg-gray-200 rounded-xl"></div>
                    </div>
                </div>
                @else
                @foreach ($lastNewsPosts as $blog)
                <div wire:loading.remove wire:target="selectCategory,resetCategory" class="loading-pulse2 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 hidden md:flex flex-col justify-center">
                                        {{ $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

                <div wire:loading wire:target="selectCategory,resetCategory" class="grid grid-cols-1 w-full gap-4 block md:hidden loading-pulse">
                    <div class="col-span-1 flex items-center gap-4 p-2 h-[100px]  rounded-lg animate-pulse justify-between">
                        <div class="flex flex-col gap-2 h-full justify-between w-[73%]">
                            <div class="h-4 bg-gray-200 rounded w-full"></div>
                            <div class="h-3 bg-gray-200 rounded w-1/2"></div>
                        </div>
                        <div class="w-[80px] h-[80px] bg-gray-200 rounded-xl"></div>
                    </div>

                    <div class="col-span-1 flex items-center gap-4 p-2 h-[100px]  rounded-lg animate-pulse justify-between">
                        <div class="flex flex-col gap-2 h-full justify-between w-[73%]">
                            <div class="h-4 bg-gray-200 rounded w-full"></div>
                            <div class="h-3 bg-gray-200 rounded w-1/2"></div>
                        </div>
                        <div class="w-[80px] h-[80px] bg-gray-200 rounded-xl"></div>
                    </div>
                </div>
                <div wire:loading wire:target="selectCategory,resetCategory" class="grid grid-cols-1 w-full gap-4 block md:hidden loading-pulse">
                    <div class="col-span-1 flex items-center gap-4 p-2 h-[100px]  rounded-lg animate-pulse justify-between">
                        <div class="flex flex-col gap-2 h-full justify-between w-[73%]">
                            <div class="h-4 bg-gray-200 rounded w-full"></div>
                            <div class="h-3 bg-gray-200 rounded w-1/2"></div>
                        </div>
                        <div class="w-[80px] h-[80px] bg-gray-200 rounded-xl"></div>
                    </div>

                    <div class="col-span-1 flex items-center gap-4 p-2 h-[100px]  rounded-lg animate-pulse justify-between">
                        <div class="flex flex-col gap-2 h-full justify-between w-[73%]">
                            <div class="h-4 bg-gray-200 rounded w-full"></div>
                            <div class="h-3 bg-gray-200 rounded w-1/2"></div>
                        </div>
                        <div class="w-[80px] h-[80px] bg-gray-200 rounded-xl"></div>
                    </div>
                </div>
                @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 dir="ltr" class="md:block hidden relative h-[40px] w-[700px] mb-2 overflow-hidden">--}}
                {{-- <div x-data="newsSlider" class="h-full">--}}
                {{-- <a x-show="!isCollapsed"--}}
                {{-- x-transition:enter="transition ease-out duration-300"--}}
                {{-- x-transition:enter-start="-translate-x-full"--}}
                {{-- x-transition:enter-end="translate-x-0"--}}
                {{-- x-transition:leave="transition ease-in duration-300"--}}
                {{-- x-transition:leave-start="translate-x-0"--}}
                {{-- x-transition:leave-end="-translate-x-full"--}}
                {{-- :href="currentNewsLink"--}}
                {{-- style="width:max-content"--}}
                {{-- class="absolute h-[40px] flex items-center gap-2 px-2 py-2 rounded-md shadow text-start bg-[#fee5db]">--}}
                {{-- <p dir="rtl" class="text-[#eb7425] text-sm p-0 m-0" x-text="currentNewsSubject"></p>--}}
                {{-- <svg xmlns="http://www.w3.org/2000/svg" fill="#eb7425" width="24px" height="24px" viewBox="-80 0 512 512"><path d="M176 80c-52.94 0-96 43.06-96 96 0 8.84 7.16 16 16 16s16-7.16 16-16c0-35.3 28.72-64 64-64 8.84 0 16-7.16 16-16s-7.16-16-16-16zM96.06 459.17c0 3.15.93 6.22 2.68 8.84l24.51 36.84c2.97 4.46 7.97 7.14 13.32 7.14h78.85c5.36 0 10.36-2.68 13.32-7.14l24.51-36.84c1.74-2.62 2.67-5.7 2.68-8.84l.05-43.18H96.02l.04 43.18zM176 0C73.72 0 0 82.97 0 176c0 44.37 16.45 84.85 43.56 115.78 16.64 18.99 42.74 58.8 52.42 92.16v.06h48v-.12c-.01-4.77-.72-9.51-2.15-14.07-5.59-17.81-22.82-64.77-62.17-109.67-20.54-23.43-31.52-53.15-31.61-84.14-.2-73.64 59.67-128 127.95-128 70.58 0 128 57.42 128 128 0 30.97-11.24 60.85-31.65 84.14-39.11 44.61-56.42 91.47-62.1 109.46a47.507 47.507 0 0 0-2.22 14.3v.1h48v-.05c9.68-33.37 35.78-73.18 52.42-92.16C335.55 260.85 352 220.37 352 176 352 78.8 273.2 0 176 0z"/></svg>--}}
                {{-- </a>--}}
                {{-- <div x-show="isCollapsed"--}}
                {{-- x-transition:enter="transition ease-out duration-300"--}}
                {{-- x-transition:leave="transition ease-in duration-300"--}}
                {{-- class="absolute h-[40px] flex items-center gap-2 px-1 py-2 rounded-l-md shadow text-start bg-[#fee5db]"--}}
                {{-- style="width: 2px; left: 0;">--}}
                {{-- </div>--}}
                {{-- </div>--}}
                {{-- </div>--}}
            </div>
            <div class="flex items-center gap-2 overflow-scroll md:overflow-hidden no-scrollbar md:flex-wrap mb-4">
                <button wire:click="resetCategoryNews('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="selectCategoryNews({{ $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 wire:loading.remove wire:target="selectCategoryNews" class="loading-pulse2 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 hidden md:flex flex-col justify-center">
                                        {{ $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
                <div wire:loading wire:target="selectCategoryNews" class="grid grid-cols-1 w-full gap-4 block md:hidden loading-pulse">
                    <div class="col-span-1 flex items-center gap-4 p-2 h-[100px]  rounded-lg animate-pulse justify-between">
                        <div class="flex flex-col gap-2 h-full justify-between w-[73%]">
                            <div class="h-4 bg-gray-200 rounded w-full"></div>
                            <div class="h-3 bg-gray-200 rounded w-1/2"></div>
                        </div>
                        <div class="w-[80px] h-[80px] bg-gray-200 rounded-xl"></div>
                    </div>

                    <div class="col-span-1 flex items-center gap-4 p-2 h-[100px]  rounded-lg animate-pulse justify-between">
                        <div class="flex flex-col gap-2 h-full justify-between w-[73%]">
                            <div class="h-4 bg-gray-200 rounded w-full"></div>
                            <div class="h-3 bg-gray-200 rounded w-1/2"></div>
                        </div>
                        <div class="w-[80px] h-[80px] bg-gray-200 rounded-xl"></div>
                    </div>
                </div>
                <div wire:loading wire:target="selectCategoryNews" class="grid grid-cols-1 w-full gap-4 block md:hidden loading-pulse">
                    <div class="col-span-1 flex items-center gap-4 p-2 h-[100px]  rounded-lg animate-pulse justify-between">
                        <div class="flex flex-col gap-2 h-full justify-between w-[73%]">
                            <div class="h-4 bg-gray-200 rounded w-full"></div>
                            <div class="h-3 bg-gray-200 rounded w-1/2"></div>
                        </div>
                        <div class="w-[80px] h-[80px] bg-gray-200 rounded-xl"></div>
                    </div>

                    <div class="col-span-1 flex items-center gap-4 p-2 h-[100px]  rounded-lg animate-pulse justify-between">
                        <div class="flex flex-col gap-2 h-full justify-between w-[73%]">
                            <div class="h-4 bg-gray-200 rounded w-full"></div>
                            <div class="h-3 bg-gray-200 rounded w-1/2"></div>
                        </div>
                        <div class="w-[80px] h-[80px] bg-gray-200 rounded-xl"></div>
                    </div>
                </div>
                @else
                @foreach ($lastNewsArticles as $blog)
                <div wire:loading.remove wire:target="selectCategoryNews,resetCategoryNews" class="loading-pulse2 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 hidden md:flex flex-col justify-center">
                                        {{ $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

                <div wire:loading wire:target="selectCategoryNews,resetCategoryNews" class="grid grid-cols-1 w-full gap-4 block md:hidden loading-pulse">
                    <div class="col-span-1 flex items-center gap-4 p-2 h-[100px]  rounded-lg animate-pulse justify-between">
                        <div class="flex flex-col gap-2 h-full justify-between w-[73%]">
                            <div class="h-4 bg-gray-200 rounded w-full"></div>
                            <div class="h-3 bg-gray-200 rounded w-1/2"></div>
                        </div>
                        <div class="w-[80px] h-[80px] bg-gray-200 rounded-xl"></div>
                    </div>

                    <div class="col-span-1 flex items-center gap-4 p-2 h-[100px]  rounded-lg animate-pulse justify-between">
                        <div class="flex flex-col gap-2 h-full justify-between w-[73%]">
                            <div class="h-4 bg-gray-200 rounded w-full"></div>
                            <div class="h-3 bg-gray-200 rounded w-1/2"></div>
                        </div>
                        <div class="w-[80px] h-[80px] bg-gray-200 rounded-xl"></div>
                    </div>
                </div>
                <div wire:loading wire:target="selectCategoryNews,resetCategoryNews" class="grid grid-cols-1 w-full gap-4 block md:hidden loading-pulse">
                    <div class="col-span-1 flex items-center gap-4 p-2 h-[100px]  rounded-lg animate-pulse justify-between">
                        <div class="flex flex-col gap-2 h-full justify-between w-[73%]">
                            <div class="h-4 bg-gray-200 rounded w-full"></div>
                            <div class="h-3 bg-gray-200 rounded w-1/2"></div>
                        </div>
                        <div class="w-[80px] h-[80px] bg-gray-200 rounded-xl"></div>
                    </div>

                    <div class="col-span-1 flex items-center gap-4 p-2 h-[100px]  rounded-lg animate-pulse justify-between">
                        <div class="flex flex-col gap-2 h-full justify-between w-[73%]">
                            <div class="h-4 bg-gray-200 rounded w-full"></div>
                            <div class="h-3 bg-gray-200 rounded w-1/2"></div>
                        </div>
                        <div class="w-[80px] h-[80px] bg-gray-200 rounded-xl"></div>
                    </div>
                </div>
                @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 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>
            <div class="flex items-center gap-2 overflow-scroll md:overflow-hidden no-scrollbar md:flex-wrap mb-4">
                <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="{{ route('CategoryBlog.index', ['slug' => "biography"]).'/' }}" wire:navigate>مشاهده
                    همه</a>
            </div>
            <div class="w-full flex items-center overflow-scroll md:overflow-hidden no-scrollbar md:grid md:grid-cols-4 lg:grid-cols-4 xl:grid-cols-8 justify-between gap-5 my-4 lg:my-8">
                <a href="#" class="aspect-[1/1.7] md:aspect-[5/8] lg:aspect-[9/15] min-w-[180px] md:min-w-full rounded-3xl transition-all duration-300 hover:grayscale cursor-pointer text-center">
                    <div class="bg-gray-300 rounded-3xl overflow-hidden h-full w-full mb-2">
                        <img
                            src="{{ asset('/image/persons/elon-musk.jpg') }}"
                            class="object-cover object-center h-full w-full rounded-3xl"
                            alt="ایلان ماسک"
                            loading="lazy" />
                    </div>
                    <span class="font-semibold text-nowrap text-xs md:text-base">ایلان ماسک</span>
                </a>
                <a href="#" class="aspect-[1/1.7] md:aspect-[5/8] lg:aspect-[9/15] min-w-[180px] md:min-w-full rounded-3xl transition-all duration-300 hover:grayscale cursor-pointer text-center">
                    <div class="bg-gray-300 rounded-3xl overflow-hidden h-full w-full mb-2">
                        <img
                            src="{{ asset('/image/persons/donald-trump.jpg') }}"
                            class="object-cover object-center h-full w-full rounded-3xl"
                            alt="دونالد ترامپ"
                            loading="lazy" />
                    </div>
                    <span class="font-semibold text-nowrap text-xs md:text-base">دونالد ترامپ</span>
                </a>
                <a href="#" class="aspect-[1/1.7] md:aspect-[5/8] lg:aspect-[9/15] min-w-[180px] md:min-w-full rounded-3xl transition-all duration-300 hover:grayscale cursor-pointer text-center">
                    <div class="bg-gray-300 rounded-3xl overflow-hidden h-full w-full mb-2">
                        <img
                            src="{{ asset('/image/persons/bill-gates.jpg') }}"
                            class="object-cover object-center h-full w-full rounded-3xl"
                            alt="بیل گیتس"
                            loading="lazy" />
                    </div>
                    <span class="font-semibold text-nowrap text-xs md:text-base">بیل گیتس</span>
                </a>
                <a href="#" class="aspect-[1/1.7] md:aspect-[5/8] lg:aspect-[9/15] min-w-[180px] md:min-w-full rounded-3xl transition-all duration-300 hover:grayscale cursor-pointer text-center">
                    <div class="bg-gray-300 rounded-3xl overflow-hidden h-full w-full mb-2">
                        <img
                            src="{{ asset('/image/persons/tim-cook.jpg') }}"
                            class="object-cover object-center h-full w-full rounded-3xl"
                            alt="تیم کوک"
                            loading="lazy" />
                    </div>
                    <span class="font-semibold text-nowrap text-xs md:text-base">تیم کوک</span>
                </a>
                <a href="#" class="aspect-[1/1.7] md:aspect-[5/8] lg:aspect-[9/15] min-w-[180px] md:min-w-full rounded-3xl transition-all duration-300 hover:grayscale cursor-pointer text-center">
                    <div class="bg-gray-300 rounded-3xl overflow-hidden h-full w-full mb-2">
                        <img
                            src="{{ asset('/image/persons/warren-buffett.jpg') }}"
                            class="object-cover object-center h-full w-full rounded-3xl"
                            alt="وارن بافت"
                            loading="lazy" />
                    </div>
                    <span class="font-semibold text-nowrap text-xs md:text-base">وارن بافت</span>
                </a>
                <a href="#" class="aspect-[1/1.7] md:aspect-[5/8] lg:aspect-[9/15] min-w-[180px] md:min-w-full rounded-3xl transition-all duration-300 hover:grayscale cursor-pointer text-center">
                    <div class="bg-gray-300 rounded-3xl overflow-hidden h-full w-full mb-2">
                        <img
                            src="{{ asset('/image/persons/satushi-nakamoto.jpg') }}"
                            class="object-cover object-center h-full w-full rounded-3xl"
                            alt="ساتوشی ناکاموتو"
                            loading="lazy" />
                    </div>
                    <span class="font-semibold text-nowrap text-xs md:text-base">ساتوشی ناکاموتو</span>
                </a>
                <a href="#" class="aspect-[1/1.7] md:aspect-[5/8] lg:aspect-[9/15] min-w-[180px] md:min-w-full rounded-3xl transition-all duration-300 hover:grayscale cursor-pointer text-center">
                    <div class="bg-gray-300 rounded-3xl overflow-hidden h-full w-full mb-2">
                        <img
                            src="{{ asset('/image/persons/jeffrey-bazos.jpg') }}"
                            class="object-cover object-center h-full w-full rounded-3xl"
                            alt="جف بیزوس"
                            loading="lazy" />
                    </div>
                    <span class="font-semibold text-nowrap text-xs md:text-base">جف بیزوس</span>
                </a>
                <a href="#" class="aspect-[1/1.7] md:aspect-[5/8] lg:aspect-[9/15] min-w-[180px] md:min-w-full rounded-3xl transition-all duration-300 hover:grayscale cursor-pointer text-center">
                    <div class="bg-gray-300 rounded-3xl overflow-hidden h-full w-full mb-2">
                        <img
                            src="{{ asset('/image/persons/pavel-durov.jpg') }}"
                            class="object-cover object-center h-full w-full rounded-3xl"
                            alt="پاول دورف"
                            loading="lazy" />
                    </div>
                    <span class="font-semibold text-nowrap text-xs md:text-base">پاول دورف</span>
                </a>
            </div>
        </div>
    </div>
</div>

@script
{{--<script type="module">--}}
{{-- import { DotLottie } from "https://cdn.jsdelivr.net/npm/@lottiefiles/dotlottie-web/+esm";--}}

{{-- new DotLottie({--}}
{{-- autoplay: true,--}}
{{-- loop: true,--}}
{{-- canvas: document.getElementById("canvas"),--}}
{{-- src: asset('image/icons/NewLabel.json'), // or .json file--}}
{{-- });--}}
{{--</script>--}}
<script>
{{--Alpine.data('newsSlider', () => ({--}}
{{-- currentIndex: 0,--}}
{{-- isCollapsed: false,--}}
{{-- interval: null,--}}
{{-- lightnews: @json($lightnews),--}}

{{-- init() {--}}
{{-- if (!Array.isArray(this.lightnews)) {--}}
{{-- this.lightnews = Object.values(this.lightnews || {});--}}
{{-- }--}}
{{-- this.startSlider();--}}
{{-- },--}}

{{-- get currentNewsSubject() {--}}
{{-- const item = this.getCurrentItem();--}}
{{-- return item?.subject || item?.title || 'عنوان پیش‌فرض';--}}
{{-- },--}}

{{-- get currentNewsLink() {--}}
{{-- const item = this.getCurrentItem();--}}
{{-- return '/mag/' + (item?.slug || '') + '/';--}}
{{-- },--}}

{{-- getCurrentItem() {--}}
{{-- if (!this.lightnews || this.lightnews.length === 0) return {};--}}
{{-- return Array.isArray(this.lightnews) ? this.lightnews[this.currentIndex] || {} : this.lightnews[this.currentIndex] || {};--}}
{{-- },--}}

{{-- startSlider() {--}}
{{-- this.interval = setInterval(() => {--}}
{{-- this.toggleSlide();--}}
{{-- }, 5000);--}}
{{-- },--}}

{{-- toggleSlide() {--}}
{{-- this.isCollapsed = true;--}}
{{-- setTimeout(() => {--}}
{{-- this.currentIndex = (this.currentIndex + 1) % this.getItemsCount();--}}
{{-- setTimeout(() => {--}}
{{-- this.isCollapsed = false;--}}
{{-- }, 1000);--}}
{{-- }, 300);--}}
{{-- },--}}

{{-- getItemsCount() {--}}
{{-- if (!this.lightnews) return 0;--}}
{{-- return Array.isArray(this.lightnews) ? this.lightnews.length : Object.keys(this.lightnews).length;--}}
{{-- }--}}
{{--}));--}}

{{--Alpine.data('magsSlider', () => ({--}}
{{-- currentIndex: 0,--}}
{{-- isCollapsed: false,--}}
{{-- interval: null,--}}
{{-- lightmags: @json($lightmags),--}}

{{-- init() {--}}
{{-- if (!Array.isArray(this.lightmags)) {--}}
{{-- this.lightmags = Object.values(this.lightmags || {});--}}
{{-- }--}}
{{-- this.startSlider();--}}
{{-- },--}}

{{-- get currentMagSubject() {--}}
{{-- const item = this.getCurrentItem();--}}
{{-- return item?.subject || item?.title || 'عنوان پیش‌فرض';--}}
{{-- },--}}

{{-- get currentMagLink() {--}}
{{-- const item = this.getCurrentItem();--}}
{{-- return '/mag/' + (item?.slug || '') + '/';--}}
{{-- },--}}

{{-- getCurrentItem() {--}}
{{-- if (!this.lightmags || this.lightmags.length === 0) return {};--}}
{{-- return Array.isArray(this.lightmags) ? this.lightmags[this.currentIndex] || {} : this.lightmags[this.currentIndex] || {};--}}
{{-- },--}}

{{-- startSlider() {--}}
{{-- this.interval = setInterval(() => {--}}
{{-- this.toggleSlide();--}}
{{-- }, 5000);--}}
{{-- },--}}

{{-- toggleSlide() {--}}
{{-- this.isCollapsed = true;--}}
{{-- setTimeout(() => {--}}
{{-- this.currentIndex = (this.currentIndex + 1) % this.getItemsCount();--}}
{{-- setTimeout(() => {--}}
{{-- this.isCollapsed = false;--}}
{{-- }, 1000);--}}
{{-- }, 300);--}}
{{-- },--}}

{{-- getItemsCount() {--}}
{{-- if (!this.lightmags) return 0;--}}
{{-- return Array.isArray(this.lightmags) ? this.lightmags.length : Object.keys(this.lightmags).length;--}}
{{-- }--}}
{{--}));--}}

Alpine.data('bookList', () => ({
maxAdditionalSize: 5,
currentImage: null,
navigationProgress: 0,
isLoading: false,
clickedItem: null,


init(){
document.addEventListener('livewire:navigate', (event) => {
let all = document.querySelectorAll('.app-clicked');
all.forEach(element => {
element.classList.remove('app-clicked');
});
});
document.addEventListener('livewire:navigated', (event) => {
let all = document.querySelectorAll('.app-clicked');
all.forEach(element => {
element.classList.remove('app-clicked');
});
});
},

scaleValue(value, from, to) {
const scale = (to[1] - to[0]) / (from[1] - from[0]);
const capped = Math.min(from[1], Math.max(from[0], value)) - from[0];
return Math.floor(capped * scale + to[0]);
},

handleAppHover(event, element) {
const dock = document.querySelector('.dock');
if (!dock) return;

const mousePosition = event.clientX;
const iconPositionLeft = element.getBoundingClientRect().left;
const iconWidth = element.getBoundingClientRect().width;

const cursorDistance = (mousePosition - iconPositionLeft) / iconWidth;
const offsetPixels = this.scaleValue(
cursorDistance,
[0, 1],
[this.maxAdditionalSize * -1, this.maxAdditionalSize]
);

dock.style.setProperty('--dock-offset-left', `${offsetPixels * -1}px`);
dock.style.setProperty('--dock-offset-right', `${offsetPixels}px`);
},

handleClick(event, element, slug) {
if (this.isLoading) return;
this.clickedItem = element;
element.classList.add('app-clicked');
},

}));

Alpine.data('catList', () => ({
showBackdrop: false,
loadingFetch: false,
isExpanded: false,
selectedTitle: 'دسته بندی ها',
selectedSlug: '',
activeTab: "latest",
fetchedItems: [], // <-- new property
    selectedId: null,
    routeTemplate: '{{ $routeTemplate }}' ,
    catRoute: '{{ $catRoute }}' ,
    visibleItems: [],
    itemHeight: 110, // height of each item in px
    lottieInstance: null,
    lottieInstance2: null,

    init(){
    document.body.style.overflow='auto' ;
    // Delay Lottie load until DOM is ready
    Alpine.nextTick(()=> {
    if (!this.$refs.lottieIcon) return;

    // If instance exists, destroy it before creating new
    if (this.lottieInstance) {
    this.lottieInstance.destroy();
    this.lottieInstance = null;
    }

    this.$refs.lottieIcon.innerHTML = ''

    this.lottieInstance = lottie.loadAnimation({
    container: this.$refs.lottieIcon,
    renderer: 'svg',
    loop: true,
    autoplay: true,
    path: "{{ asset('image/icons/NewLabel.json') }}"
    });

    this.lottieInstance.setSpeed(1.5);

    window.addEventListener('keydown', event => {
    if (event.key === 'Escape') this.closeBackdrop();
    });
    });
    Alpine.nextTick(() => {
    if (!this.$refs.lottieIcon2) return;

    // If instance exists, destroy it before creating new
    if (this.lottieInstance2) {
    this.lottieInstance2.destroy();
    this.lottieInstance2 = null;
    }

    this.$refs.lottieIcon2.innerHTML = ''

    this.lottieInstance2 = lottie.loadAnimation({
    container: this.$refs.lottieIcon2,
    renderer: 'svg',
    loop: true,
    autoplay: true,
    path: "{{ asset('image/icons/Fire.json') }}"
    });

    this.lottieInstance2.setSpeed(1.5);
    });
    },


    // redirectToMore() {
    // // Redirect to a full page (update URL to fit your route)
    // window.location.href = `/category/${this.selectedId}`;
    // },

    calculateVisibleItems() {
    Alpine.nextTick(() => {
    // Protect against missing context or refs
    if (!this.$refs || !this.$refs.listContainer) return;

    const container = this.$refs.listContainer;

    const availableHeight = window.innerHeight - container.getBoundingClientRect().top - 40; // adjust buffer if needed
    const maxItems = Math.floor(availableHeight / this.itemHeight);

    this.visibleItems = this.fetchedItems.slice(0, maxItems);
    });
    },


    handleCatClick(id, title, slug) {
    this.selectedId = id;
    this.selectedTitle = title;
    this.selectedSlug = slug;
    this.showBackdrop = true;
    this.loadingFetch = true;
    document.body.style.overflow = 'hidden';
    fetch(`{{url('api/categoryTabs')}}${"/" + id}`)
    .then(response => response.json())
    .then(data => {

    console.log(data)
    this.fetchedItems = data?.blogs;
    this.loadingFetch = false;
    // setTimeout(() => {
    // this.calculateVisibleItems();
    // }, 100)
    })
    .catch(error => {
    console.error('Error:', error);
    this.loadingFetch = false;
    });
    },

    getImageUrl(image) {
    return `{{ env('APP_URL_IMAGE') }}images/${image}`;
    },

    getDetailUrl(slug) {
    return this.routeTemplate.replace('__SLUG__', slug);
    },

    showAllCat() {
    return this.catRoute.replace('__SLUG__', this.selectedSlug);
    },

    closeBackdrop() {
    this.showBackdrop = false;
    this.isExpanded = false;
    document.body.style.overflow = '';
    this.visibleItems = [];
    setTimeout(() => {
    this.fetchedItems = [];
    this.visibleItems = [];
    this.selectedTitle = 'دسته بندی ها';
    this.selectedId = null;
    }, 300)
    },

    changeActiveTab(tab) {
    this.activeTab = tab;
    this.handleCatClick(this.selectedId, this.selectedTitle)
    }
    }))
</script>
@endscript