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

    .pagination {
        display: flex;
        list-style: none;
        padding: 0;
        direction: ltr;
    }

    .pagination li {}

    .pagination li a,
    .pagination li span {
        display: flex;
        align-items: center;
        justify-content: center;
        /*background-color: #e9e9e9;*/
        color: #000;
        text-decoration: none;
        border-radius: 50%;
        width: 2rem;
        height: 2rem;
        padding-top: 3px;
        transition: background-color 0.3s ease-in-out;
    }

    .pagination li span:hover,
    .pagination li a:hover {
        background-color: #e9e9e9;
    }

    .pagination li.active span {
        background-color: #0875E1;
        color: #ffffff;
    }

    @media screen and (max-width: 1200) {
        .customxl\:grid-cols-3 {
            grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        }
    }


    .text-sm.font-medium.text-center.border-b.border-\[\#e2e3eb\] ul li a.active {
        border-bottom: 4px solid #0075e7;
        color: #0075e7;
    }

    .header--above-sheet {
        z-index: 10 !important;
    }
</style>
@endpush

@section('title')
دسته بندی مطالب {{ $title }} - سرمایه گذاری اهرم
@endsection

<div>
    <div x-data="{
          isOpen: false,
          observer: null,
          isDragging: false,
          startY: 0,
          currentY: 0,
          translateY: 1000, // start off-screen (adjust later)
          selectedUrl: null,
          selectedCatId: null,
          fetchedSubCat:[],
          fetchedParentCat: [],
          selected_parent: null,
          selected_sub_cat: {{ (isset($selectedSecondLevelCategory?->id)) ? $selectedSecondLevelCategory->id : 0 }},
          selected_sub_sub_cat: {{ (isset($selectedThirdLevelCategory?->id)) ? $selectedThirdLevelCategory->id : 0 }},
          selected_sub_parent: null,
          fetchedSubSubCat: [],
          allCats: null,
          init() {
            this.$wire.loadCategoriesAndChilds().then(data => {
                this.allCats = data?.original
            })
          },
          open() {
            this.isOpen = true;
                @if(isset($selectedTopLevelCategoryId))
                this.handlePCatClick({{$selectedTopLevelCategoryId}}, true)
                @endif
                @if(isset($selectedThirdLevelCategory))
                setTimeout(() => {
                    this.handleSCatClick({{ $selectedSecondLevelCategory->id }}, true)
                }, 500)
                @endif
            this.$nextTick(() => {
                const header = document.querySelector('#main_header');
                if (header) {
                  header.style.zIndex = '10';

                  // Start observing the header's style changes
                  this.observer = new MutationObserver(mutations => {
                    mutations.forEach(mutation => {
                      if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
                        const currentZ = header.style.zIndex;
                        if (this.isOpen && currentZ !== '10') {
                          header.style.zIndex = '10'; // force back
                          console.log('Resetting z-index to 10 because it was changed.');
                        }
                      }
                    });
                  });

                  this.observer.observe(header, { attributes: true, attributeFilter: ['style'] });
                }
            });
            this.translateY = 500; // start below view (adjust to your sheet height)
            setTimeout(() => {
              this.translateY = 0;
            }, 10);
            document.body.style.overflow = 'hidden';
            {{--            window.dispatchEvent(new CustomEvent('sheet-opened'));--}}
          },
          close() {
            this.translateY = 700; // animate down
            setTimeout(() => {
              this.isOpen = false;
              this.translateY = 1000;
            }, 200);
            setTimeout(() => {
                // Stop observing
                  if (this.observer) {
                    this.observer.disconnect();
                    this.observer = null;
                  }
                const header = document.querySelector('#main_header');
                if (header) {
                  header.style.zIndex = '3000'; // restore or reset if needed
                }
            }, 400)
            document.body.style.overflow = ''
{{--            window.dispatchEvent(new CustomEvent('sheet-closed'));--}}
          },
          startDrag(event) {
            this.isDragging = true;
            this.startY = event.touches ? event.touches[0].clientY : event.clientY;
            this.currentY = this.startY;
          },
          handlePCatClick(catId, ignore = false) {
            if(!ignore) {
                this.resetSubCat();
                this.resetSubSubCat()
            }
            if (this.allCats) {
                // Find the selected parent category by ID
                const selectedCat = this.allCats.find(cat => cat.id === catId);
                console.log(selectedCat?.children_recursive)
                this.selected_parent = selectedCat ?? null

                if (selectedCat && selectedCat?.children_recursive) {
                    // Access subcategories (children)
                    this.fetchedSubCat = selectedCat?.children_recursive;

                    console.log('Subcategories:', this.fetchedSubCat);
                } else {
                    this.fetchedSubCat = [];  // No subcategories found
                }
            }
{{--            fetch(`{{url('api/category')}}${`/` + catId + `?is_news=` + is_news}`)--}}
{{--                .then(response => response.json())--}}
{{--                .then(data => {--}}
{{--                    this.fetchedParentCat = data?.prents ?? [];--}}
{{--                    this.fetchedSubCat = data?.sub_category ?? [];--}}
{{--                    this.selected_parent = data?.selected_parent ?? null--}}
{{--                    console.log(data)--}}
{{--                })--}}
{{--                .catch(error => {--}}
{{--                    console.error('Error:', error);--}}
{{--                });--}}
          },
          handleSCatClick(catId, ignore = false) {
            if(!ignore) {
                this.resetSubSubCat()
            }
             if (this.fetchedSubCat) {
                // Find the selected parent category by ID
                const selectedCat = this.fetchedSubCat.find(cat => cat.id === catId);
                console.log(selectedCat?.children_recursive)
                this.selected_sub_parent = selectedCat ?? null

                if (selectedCat && selectedCat?.children_recursive) {
                    // Access subcategories (children)
                    this.fetchedSubSubCat = selectedCat?.children_recursive;

                    console.log('SubSubcategories:', this.fetchedSubSubCat);
                } else {
                    this.fetchedSubSubCat = [];  // No subcategories found
                }
            }
{{--            fetch(`{{url('api/sub-category')}}${`/` + catId + `?is_news=` + is_news}`)--}}
{{--                .then(response => response.json())--}}
{{--                .then(data => {--}}
{{--                    this.fetchedSubSubCat = data?.sub_sub_category ?? [];--}}
{{--                    this.selected_sub_parent = data?.sub_selected_parent ?? null--}}
{{--                    console.log(data)--}}
{{--                })--}}
{{--                .catch(error => {--}}
{{--                    console.error('Error:', error);--}}
{{--                });--}}
          },
          resetSubCat() {
            this.fetchedParentCat = [];
            this.fetchedSubCat = [];
            this.selected_parent = null;
            this.selected_sub_cat = 0;
            this.selected_sub_sub_cat = 0;
          },
          resetSubSubCat() {
            this.fetchedSubSubCat = [];
            this.selected_sub_parent = null;
            this.selected_sub_sub_cat = 0;
          },
          drag(event) {
            if (!this.isDragging) return;
            this.currentY = event.touches ? event.touches[0].clientY : event.clientY;
            let delta = this.currentY - this.startY;
            if (delta > 0) {
              this.translateY = delta;
            } else {
              this.translateY = 0;
            }
          },
          endDrag() {
            this.isDragging = false;
            if (this.translateY > 100) {
              this.close();
            } else {
              this.translateY = 0;
            }
          },
          watch: {
              selectedUrl(value) {
                @this.set('selectedUrl', value);
              }
            },
        }" @keydown.escape.window="close()"
        class="visible relative z-10 mx-auto flex max-w-5xl flex-col items-center px-4 py-8 lg:flex-col lg:justify-between">
        <div class="text-[#16205b] my-3 w-full font-bold text-[16px] lg:text-[18px] text-start items-center flex gap-2">
            <div class="text-[#16205b] my-3 w-full font-bold text-[16px] lg:text-[18px] text-start items-center flex gap-2">
                <div class="text-transparent bg-[#084642] w-[8px] h-[23px] rounded-[2px]"></div>
                <span class="text-[#16205b]">
                    @if ($blogOrNotBlog == 'blog')
                    مطالب {{ $title }}
                    @else
                    {{ $title }}
                    @endif
                </span>
            </div>
            <button
                @click="open()"
                wire:loading.attr="disabled"
                wire:target="loadCategoriesAndChilds,goToCategory"
                x-cloak
                class="bg-gray-100 items-center justify-center py-2 px-2 rounded-full z-20 flex lg:hidden"
                type="button">
                <svg wire:loading.remove
                    wire:target="goToCategory,loadCategoriesAndChilds,generateSlugAndNavigate" fill="#000000" height="18px" width="18px" class="dark-fill-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                    <path d="M0 73.7C0 50.7 18.7 32 41.7 32H470.3c23 0 41.7 18.7 41.7 41.7c0 9.6-3.3 18.9-9.4 26.3L336 304.5V447.7c0 17.8-14.5 32.3-32.3 32.3c-7.3 0-14.4-2.5-20.1-7l-92.5-73.4c-9.6-7.6-15.1-19.1-15.1-31.3V304.5L9.4 100C3.3 92.6 0 83.3 0 73.7zM55 80L218.6 280.8c3.5 4.3 5.4 9.6 5.4 15.2v68.4l64 50.8V296c0-5.5 1.9-10.9 5.4-15.2L457 80H55z"></path>
                </svg>
                <svg wire:loading wire:target="goToCategory,loadCategoriesAndChilds,generateSlugAndNavigate" class=" animate-spin text-black w-[18px] h-[18px] stroke-black" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                    <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                    <path fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                </svg>
            </button>
        </div>

        <!-- Backdrop -->
        <div
            x-show="isOpen"
            @click="close()"
            x-transition.opacity
            class="fixed inset-0 bg-black bg-opacity-50 z-40"
            style="display: none;"></div>

        <!-- Bottom Sheet -->
        <div
            x-show="isOpen"
            x-cloak
            style="will-change: transform;"
            :style="`transform: translateY(${translateY}px); transition: transform 300ms ease`"
            class="fixed bottom-0 left-0 right-0 bg-white rounded-t-xl shadow-xl pt-4 z-50">
            <div
                @touchstart="startDrag($event)"
                @touchmove.prevent="drag($event)"
                @touchend="endDrag()"
                @mousedown="startDrag($event)"
                @mousemove.prevent="drag($event)"
                @mouseup="endDrag()"
                @mouseleave="isDragging && endDrag()"
                class="w-12 h-1.5 bg-gray-300 rounded mx-auto mb-4 cursor-grab"
                :class="{ 'cursor-grabbing': isDragging }"></div>
            <!-- Sheet Content -->
            <div class="h-fit max-h-[70vh] overflow-y-auto no-scrollbar rounded-2xl space-y-1 mt-3 relative">

                {{-- <div wire:loading wire:target="goToCategory" class="fixed inset-0 bg-black bg-opacity-50 z-50">--}}
                {{-- <svg class="mr-3 -ml-1 size-5 animate-spin text-white absolute top-[45%] right-[45%]" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>--}}
                {{-- </div>--}}
                <div x-data="{
                            selectedId: @js($selectedTopLevelCategoryId ?? ($is_news ? (is_array($category) ? $category['id'] : $category->id) : 0)),
                            scrollToSelected() {
                                this.$nextTick(() => {
                                    const el = this.$refs['category-' + this.selectedId];
                                    if (el) {
                                        el.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
                                    }
                                });
                            }
                        }"
                    x-init="scrollToSelected()">
                    <ul
                        {{--                        class="flex items-center  py-3 -mb-px bg-gray-100 rounded-2xl relative">--}}
                        class="flex items-center  py-3 -mb-px rounded-2xl relative">
                        <div class="w-full relative">
                            {{-- <li class="text-sm font-semibold rounded-md transition-colors duration-200 text-nowrap w-full px-3 sticky top-0 bg-gray-100 pb-3 shadow-sm">--}}
                            <li class="text-sm font-semibold rounded-md transition-colors duration-200 text-nowrap w-full sticky bg-white top-0 px-3  pb-3">
                                <span>دسته‌بندی‌ها</span>
                            </li>
                            <li class="text-sm rounded-md font-semibold transition-colors duration-200 text-nowrap w-full flex items-center px-3">
                                <div
                                    {{--                                   wire:navigate--}}

                                    {{--                                       onclick="document.getElementById('pc-{{ $parent->id }}').checked=true;"--}}
                                    class="flex items-center text-sm rounded-md transition-colors duration-200 text-nowrap w-full h-full cursor-pointer"
                                    aria-current="page">
                                    <input
                                        {{-- wire:click="goToCategory(`{{ $is_news ? 'news' : 'all' }}`, `{{ $is_news ? route('NewsCategory.index').'/' : route('CategoryBlog.index', ['slug' => 'all']).'/' }}`)" --}}
                                        {{-- @click="selectedId = {{ ($is_news && url()->current() == route('NewsCategory.index') || $selectedUrl == route('NewsCategory.index') || $selectedUrl == route('NewsCategory.index') . '/page/' . $page) ? $category->id : 0 }};selectedUrl=`{{ $is_news ? route('NewsCategory.index').'/' : route('CategoryBlog.index', ['slug' => 'all']).'/' }}`" --}}
                                        @click="handlePCatClick({{ $is_news ? $selectedTopLevelCategoryId : 0 }});selectedId={{ $is_news ? $selectedTopLevelCategoryId : 0 }};selectedCatId = {{ $is_news ? $selectedTopLevelCategoryId : 0}};"
                                        :checked="selectedId == {{ $is_news ? $selectedTopLevelCategoryId : 0}}"
                                        name="mpc"
                                        id="mpc-0"
                                        type="radio" class="rounded-[4px] cursor-pointer border-2" @if (url()->current() == route('CategoryBlog.index', ['slug' => 'all']) || url()->current() == route('CategoryBlog.index', ['slug' => 'all']) . '/page/' . $page) checked @endif>
                                    <label for="mpc-0" class=" w-full cursor-pointer px-3 py-3 border-b">
                                        همه
                                    </label>
                                </div>
                            </li>
                            @foreach ($parentCategories->sortByDesc('priority') as $parent)
                            <li x-ref="category-{{ $parent->id }}" class="text-sm rounded-md font-semibold transition-colors duration-200 text-nowrap w-full flex items-center px-3">
                                <div
                                    {{--                                       wire:navigate--}}

                                    {{--                                       onclick="document.getElementById('pc-{{ $parent->id }}').checked=true;"--}}
                                    class="flex items-center text-sm rounded-md transition-colors duration-200 text-nowrap w-full h-full cursor-pointer"
                                    aria-current="page">
                                    <input
                                        {{--                                            wire:click="goToCategory(`{{ $parent->slug }}`, `{{ $is_news ? route('NewsCategory.show', ['slug' => $parent->slug]).'/' : route('CategoryBlog.index', ['slug' => $parent->slug]).'/' }}`)"--}}
                                        {{--                                            @click="selectedId = {{ $parent->id }};selectedUrl=`{{ $is_news ? route('NewsCategory.show', ['slug' => $parent->slug]).'/' : route('CategoryBlog.index', ['slug' => $parent->slug]).'/' }}`"--}}
                                        {{--                                                @click="handlePCatClick({{ $parent->id }}, {{ $is_news ? 1 : 0 }});selectedCatId={{$parent->id}};"--}}
                                        @click="handlePCatClick({{ $parent->id }});selectedCatId = {{$parent->id}}"
                                        :checked="selectedId == {{ $parent->id }}" name="mpc" id="mpc-{{ $parent->id }}" type="radio" class="rounded-[4px] cursor-pointer border-2" @if (url()->current() == route('CategoryBlog.index', ['slug' => $parent->slug]) || url()->current() == route('NewsCategory.show', ['slug' => $parent->slug]) || url()->current() == route('CategoryBlog.index', ['slug' => $parent->slug]) . '/page/' . $page || $parent->id == $selectedTopLevelCategoryId) checked @endif>
                                    <label for="mpc-{{ $parent->id }}" class=" w-full cursor-pointer px-3 py-3 @if(!$loop->last) border-b @endif">
                                        {{ $parent->title }}
                                    </label>
                                </div>
                            </li>
                            @endforeach
                        </div>
                    </ul>
                </div>

                <ul x-show="fetchedSubCat.length > 0" class="flex items-center  py-3 -mb-px  rounded-2xl">
                    <div class="w-full relative">
                        <li class="text-sm font-semibold rounded-md transition-colors duration-200 text-nowrap w-full sticky bg-white top-0 px-3 pb-3">
                            <span>دسته‌بندی‌ <span x-text="selected_parent?.title"></span></span>
                        </li>

                        <li class="text-sm rounded-md font-semibold transition-colors duration-200 text-nowrap w-full flex items-center px-3">
                            <div class="flex items-center text-sm rounded-md transition-colors duration-200 text-nowrap w-full h-full cursor-pointer" aria-current="page">
                                <input
                                    type="radio"
                                    name="mcc"
                                    id="mcc-0"
                                    class="rounded-[4px] cursor-pointer border-2"
                                    :checked="selected_sub_cat == 0"
                                    {{--                                    @click="handlePCatClick(selected_parent?.id, {{ $is_news ? 1 : 0 }});selected_sub_cat=0;selectedCatId=selected_parent?.id;"--}}
                                    @click="selected_sub_cat = 0;selectedCatId = selected_parent?.id;">
                                <label for="mcc-0" class="w-full cursor-pointer px-3 py-3 border-b">
                                    همه
                                </label>
                            </div>
                        </li>

                        <template x-for="(item, index) in fetchedSubCat" :key="item.id">
                            <li class="text-sm rounded-md font-semibold transition-colors duration-200 text-nowrap w-full flex items-center px-3">
                                <div class="flex items-center text-sm rounded-md transition-colors duration-200 text-nowrap w-full h-full cursor-pointer">
                                    <input
                                        type="radio"
                                        :name="'mcc'"
                                        :id="`mcc-${item.id}`"
                                        class="rounded-[4px] cursor-pointer border-2"
                                        :checked="selected_sub_cat == item.id"
                                        @click="selected_sub_cat = item.id;handleSCatClick(item.id);selectedCatId = item?.id">
                                    <label
                                        :for="`mcc-${item.id}`"
                                        :class="index !== fetchedSubCat.length - 1 ? 'border-b' : ''"
                                        class="w-full cursor-pointer px-3 py-3"
                                        x-text="item.title"></label>
                                </div>
                            </li>
                        </template>
                    </div>
                </ul>

                <ul x-show="fetchedSubSubCat.length > 0" class="flex items-center  py-3 -mb-px  rounded-2xl">
                    <div class="w-full relative">
                        <li class="text-sm font-semibold rounded-md transition-colors duration-200 text-nowrap w-full sticky bg-white top-0 px-3 pb-3">
                            <span>دسته‌بندی‌ <span x-text="selected_sub_parent?.title"></span></span>
                        </li>

                        <li class="text-sm rounded-md font-semibold transition-colors duration-200 text-nowrap w-full flex items-center px-3">
                            <div class="flex items-center text-sm rounded-md transition-colors duration-200 text-nowrap w-full h-full cursor-pointer" aria-current="page">
                                <input
                                    type="radio"
                                    name="mss"
                                    id="mss-0"
                                    class="rounded-[4px] cursor-pointer border-2"
                                    :checked="selected_sub_sub_cat === 0"
                                    @click="selected_sub_sub_cat = 0;selectedCatId = selected_sub_parent?.id">
                                <label for="mss-0" class="w-full cursor-pointer px-3 py-3 border-b">
                                    همه
                                </label>
                            </div>
                        </li>

                        <template x-for="(item, index) in fetchedSubSubCat" :key="item.id">
                            <li class="text-sm rounded-md font-semibold transition-colors duration-200 text-nowrap w-full flex items-center px-3">
                                <div class="flex items-center text-sm rounded-md transition-colors duration-200 text-nowrap w-full h-full cursor-pointer">
                                    <input
                                        type="radio"
                                        :name="'mss'"
                                        :id="`mss-${item.id}`"
                                        class="rounded-[4px] cursor-pointer border-2"
                                        :checked="selected_sub_sub_cat === item.id"
                                        @click="selected_sub_sub_cat = item.id;selectedCatId = item?.id">
                                    <label
                                        :for="`mss-${item.id}`"
                                        :class="index !== fetchedSubSubCat.length - 1 ? 'border-b' : ''"
                                        class="w-full cursor-pointer px-3 py-3"
                                        x-text="item.title"></label>
                                </div>
                            </li>
                        </template>
                    </div>
                </ul>

                <div class="sticky bottom-0 bg-white border-t p-4 flex items-center justify-between gap-2">
                    <div @navigate-to.window="Livewire.navigate($event.detail)" class="w-full" x-data="{ isNews: {{ $is_news ? 1 : 0 }} }">
                        {{-- <button--}}
                        {{-- class="w-full bg-blue-600 text-white py-2 rounded-md"--}}
                        {{-- wire:navigate--}}
                        {{-- wire:click="goToCategory(selectedCatId, isNews)"--}}
                        {{-- @click="close()"--}}
                        {{-- :disabled="selectedCatId < 0"--}}
                        {{-- @click="if (selectedCatId >= 0) { $wire.goToCategory(selectedCatId, isNews); close(); }"--}}
                        {{-- >--}}
                        {{-- ثبت--}}
                        {{-- </button>--}}
                        <button
                            class="w-full bg-blue-600 text-white py-2 rounded-md"
                            wire:click="generateSlugAndNavigate(selectedCatId, {{ $is_news ? 'true' : 'false' }})"
                            @click="close()"
                            :disabled="selectedCatId < 0">
                            ثبت
                        </button>
                    </div>
                    <button
                        class="w-full border border-red-600 text-red-600 py-2 rounded-md"
                        @click="close()">
                        بستن
                    </button>
                </div>
            </div>
        </div>

        <div class="w-full mb-6">
            <div class="text-sm font-medium text-center border-b border-[#e2e3eb] py-3">
                <ul class="flex items-center gap-2 overflow-scroll md:overflow-hidden no-scrollbar md:flex-wrap -mb-px">
                    @if (!$is_news )
                    <!-- mag -->
                    <li class="text-sm rounded-md transition-colors duration-200 text-nowrap py-1">
                        <a href="{{ route('CategoryBlog.index', ['slug' => 'all']).'/' }}"
                            wire:navigate
                            class="px-3 py-1 text-sm rounded-md transition-colors duration-200 text-nowrap @if (url()->current() == route('CategoryBlog.index', ['slug' => 'all']) || url()->current() == route('CategoryBlog.index', ['slug' => 'all']) . '/page/' . $page) bg-blue-100 text-blue-600 @else bg-gray-100 hover:bg-gray-200 @endif"
                            aria-current="page">همه دسته‌ها</a>
                    </li>

                    {{-- @if ($category['id'] == 0)--}}
                    {{-- <!-- main mag show-->--}}
                    @foreach ($parentCategories->sortByDesc('priority') as $parent)
                    <li class="text-sm rounded-md transition-colors duration-200 text-nowrap py-1">
                        @if(isset($topParent->id))
                        <a href="{{ route('CategoryBlog.index', ['slug' => $parent->slug]).'/' }}"
                            wire:navigate
                            class="px-3 py-1 text-sm rounded-md transition-colors duration-200 text-nowrap @if (url()->current() == route('CategoryBlog.index', ['slug' => $parent->slug]) || url()->current() == route('CategoryBlog.index', ['slug' => $parent->slug]) . '/page/' . $page || $topParent->id == $parent->id)  bg-blue-100 text-blue-600 @else bg-gray-100 hover:bg-gray-200 @endif"
                            aria-current="page">{{ $parent->title }}</a>
                        @else
                        <a href="{{ route('CategoryBlog.index', ['slug' => $parent->slug]).'/' }}"
                            wire:navigate
                            class="px-3 py-1 text-sm rounded-md transition-colors duration-200 text-nowrap @if (url()->current() == route('CategoryBlog.index', ['slug' => $parent->slug]) || url()->current() == route('CategoryBlog.index', ['slug' => $parent->slug]) . '/page/' . $page )  bg-blue-100 text-blue-600 @else bg-gray-100 hover:bg-gray-200 @endif"
                            aria-current="page">{{ $parent->title }}</a>
                        @endif
                    </li>
                    @endforeach
                    {{-- @else--}}
                    {{-- --}}
                    {{-- @endif--}}
                    @else
                    <!-- news -->

                    {{-- @if ($category['slug'] == 'news')--}}
                    <!-- nain news-->
                    <li class="text-sm rounded-md transition-colors duration-200 text-nowrap py-1">
                        <a href="{{ route('NewsCategory.index').'/' }}"
                            wire:navigate
                            class="px-3 py-1 text-sm rounded-md transition-colors duration-200 text-nowrap @if (url()->current() == route('NewsCategory.index') || url()->current() == route('NewsCategory.index') . '/page/' . $page || $selectedTopLevelCategoryId == 15 ) bg-blue-100 text-blue-600 @else bg-gray-100 hover:bg-gray-200 @endif"
                            aria-current="page">همه اخبار</a>
                    </li>
                    @foreach ($parentCategories->sortByDesc('priority') as $parent)
                    <li class="text-sm rounded-md transition-colors duration-200 text-nowrap py-1">
                        @if(isset($category))
                        <a href="{{ route('NewsCategory.show', ['slug' => $parent->slug]).'/' }}"
                            wire:navigate
                            class="px-3 py-1 text-sm rounded-md transition-colors duration-200 text-nowrap @if (url()->current() == route('NewsCategory.show', ['slug' => $parent->slug]) || url()->current() == route('NewsCategory.show', ['slug' => $parent->slug]) . '/page/' . $page || (is_array($category) ? $category['id'] : $category->id) == $parent->id) bg-blue-100 text-blue-600 @else bg-gray-100 hover:bg-gray-200 @endif"
                            aria-current="page">{{ $parent->title }}</a>
                        @else
                        <a href="{{ route('NewsCategory.show', ['slug' => $parent->slug]).'/' }}"
                            wire:navigate
                            class="px-3 py-1 text-sm rounded-md transition-colors duration-200 text-nowrap @if (url()->current() == route('NewsCategory.show', ['slug' => $parent->slug]) || url()->current() == route('NewsCategory.show', ['slug' => $parent->slug]) . '/page/' . $page) bg-blue-100 text-blue-600 @else bg-gray-100 hover:bg-gray-200 @endif"
                            aria-current="page">{{ $parent->title }}</a>
                        @endif
                    </li>
                    @endforeach
                    {{-- @else--}}
                    {{-- <!-- sub news show-->--}}
                    {{-- @php--}}
                    {{-- $parentCategory = null;--}}
                    {{-- if ($this->category->parent_id) {--}}
                    {{-- $parentCategory = App\Models\Category::find($this->category->parent_id);--}}
                    {{-- } elseif ($this->category->parent_below) {--}}
                    {{-- $parentCategory = App\Models\Category::find($this->category->parent_below);--}}
                    {{-- }--}}
                    {{-- @endphp--}}
                    {{-- @if ($parentCategory)--}}
                    {{-- <li class="text-sm rounded-md transition-colors duration-200 text-nowrap py-1">--}}
                    {{-- <a href="{{ route('NewsCategory.index', ['slug' => $parentCategory->slug]).'/' }}"--}}
                    {{-- wire:navigate--}}
                    {{-- class="px-3 py-1 text-sm rounded-md transition-colors duration-200 text-nowrap @if (url()->current() == route('NewsCategory.index' ) || url()->current() == route('NewsCategory.index', ['slug' => $parentCategory->slug]) . '/page/' . $page) bg-blue-100 text-blue-600 @else bg-gray-100 hover:bg-gray-200 @endif"--}}
                    {{-- aria-current="page">{{ $parentCategory->title }}</a>--}}
                    {{-- </li>--}}
                    {{-- @endif--}}

                    {{-- <li class="text-sm rounded-md transition-colors duration-200 text-nowrap py-1">--}}
                    {{-- <a href="{{ route('NewsCategory.show', ['slug' => $category->slug]).'/' }}"--}}
                    {{-- wire:navigate--}}
                    {{-- class="px-3 py-1 text-sm rounded-md transition-colors duration-200 text-nowrap @if (url()->current() == route('NewsCategory.show', ['slug' => $category->slug]) || url()->current() == route('NewsCategory.index', ['slug' => $category->slug]) . '/page/' . $page) bg-blue-100 text-blue-600 @else bg-gray-100 hover:bg-gray-200 @endif"--}}
                    {{-- aria-current="page">{{ $category->title }}</a>--}}
                    {{-- </li>--}}

                    {{-- @foreach ($categoriesNotBlog->sortByDesc('priority') as $item)--}}
                    {{-- <li class="text-sm rounded-md transition-colors duration-200 text-nowrap py-1">--}}
                    {{-- <a href="{{ route('NewsCategory.show', ['slug' => $item['slug']]) .'/' }}"--}}
                    {{-- wire:navigate--}}
                    {{-- class="px-3 py-1 text-sm rounded-md transition-colors duration-200 text-nowrap @if (url()->current() == route('NewsCategory.index', ['slug' => $item['slug']]) || url()->current() == route('NewsCategory.index', ['slug' => $item['slug']]) . '/page/' . $page) bg-blue-100 text-blue-600 @else bg-gray-100 hover:bg-gray-200 @endif"--}}
                    {{-- aria-current="page">{{ $item['title'] }}</a>--}}
                    {{-- </li>--}}
                    {{-- @endforeach--}}
                    {{-- @endif--}}
                    @endif
                </ul>
            </div>
        </div>
        @if ($blogs && $blogs->count() > 0)
        <div
            class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-9 justify-between gap-5 my-4 lg:my-8 w-full relative">
            <div class="col-span-2 h-fit max-h-[83vh] rounded-2xl sticky top-[100px] space-y-1 hidden lg:block">
                <div x-data="{
                            selectedId: @js($selectedTopLevelCategoryId ?? ($is_news ? (is_array($category) ? $category['id'] : $category->id) : 0)),
                            scrollToSelected() {
                                this.$nextTick(() => {
                                    const el = this.$refs['category-' + this.selectedId];
                                    if (el) {
                                        el.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
                                    }
                                });
                            }
                        }"
                    x-init="scrollToSelected()">
                    <ul
                        class="flex items-center  py-3 -mb-px bg-gray-100 rounded-2xl relative">
                        <div class="max-h-[25vh] scroll-smooth overflow-y-auto md:flex-wrap w-full relative" style="scrollbar-color: gray #F3F4F6 !important;">
                            <li class="text-sm font-semibold rounded-md transition-colors duration-200 text-nowrap w-full px-3 sticky top-0 bg-gray-100 pb-3 shadow-sm">
                                <span>دسته‌بندی‌ها</span>
                            </li>
                            <li class="text-sm rounded-md font-semibold transition-colors duration-200 text-nowrap w-full flex items-center px-3">
                                <a href="{{ $is_news ? route('NewsCategory.index').'/' : route('CategoryBlog.index', ['slug' => 'all']).'/' }}"
                                    wire:navigate
                                    @click.prevent="selectedId = {{ ($is_news && url()->current() == route('NewsCategory.index') || url()->current() == route('NewsCategory.index') . '/page/' . $page) ? $category->id : 0 }}"
                                    {{--                                       onclick="document.getElementById('pc-{{ $parent->id }}').checked=true;"--}}
                                    class="flex items-center text-sm rounded-md transition-colors duration-200 text-nowrap w-full h-full cursor-pointer"
                                    aria-current="page">
                                    <input :checked="selectedId == {{ ($is_news && url()->current() == route('NewsCategory.index') || url()->current() == route('NewsCategory.index') . '/page/' . $page) ? $category->id : 0 }}" name="pc-0" id="pc-0" type="checkbox" class="rounded-[4px] cursor-pointer border-2" @if (url()->current() == route('CategoryBlog.index', ['slug' => 'all']) || url()->current() == route('CategoryBlog.index', ['slug' => 'all']) . '/page/' . $page) checked @endif>
                                    <label for="pc-0" class=" w-full cursor-pointer px-3 py-3 border-b">
                                        همه
                                    </label>
                                </a>
                            </li>
                            @foreach ($parentCategories->sortByDesc('priority') as $parent)
                            <li x-ref="category-{{ $parent->id }}" class="text-sm rounded-md font-semibold transition-colors duration-200 text-nowrap w-full flex items-center px-3">
                                <a href="{{ $is_news ? route('NewsCategory.show', ['slug' => $parent->slug]).'/' : route('CategoryBlog.index', ['slug' => $parent->slug]).'/' }}"
                                    wire:navigate
                                    @click.prevent="selectedId = {{ $parent->id }}"
                                    {{--                                       onclick="document.getElementById('pc-{{ $parent->id }}').checked=true;"--}}
                                    class="flex items-center text-sm rounded-md transition-colors duration-200 text-nowrap w-full h-full cursor-pointer"
                                    aria-current="page">
                                    <input :checked="selectedId === {{ $parent->id }}" name="pc-{{ $parent->id }}" id="pc-{{ $parent->id }}" type="checkbox" class="rounded-[4px] cursor-pointer border-2" @if (url()->current() == route('CategoryBlog.index', ['slug' => $parent->slug]) || url()->current() == route('NewsCategory.show', ['slug' => $parent->slug]) || url()->current() == route('CategoryBlog.index', ['slug' => $parent->slug]) . '/page/' . $page || $parent->id == $selectedTopLevelCategoryId) checked @endif>
                                    <label for="pc-{{ $parent->id }}" class=" w-full cursor-pointer px-3 py-3 @if(!$loop->last) border-b @endif">
                                        {{ $parent->title }}
                                    </label>
                                </a>
                            </li>
                            @endforeach
                        </div>
                    </ul>
                </div>

                @if($childCategories->isNotEmpty())
                <div x-data="{
                            selectedId: @js($selectedSecondLevelCategory->id ?? 0),
                            scrollToSelected() {
                                this.$nextTick(() => {
                                    const el = this.$refs['psub_category_' + this.selectedId];
                                    if (el) {
                                        el.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
                                    }
                                });
                            }
                        }"
                    x-init="scrollToSelected()">
                    <ul class="flex items-center  py-3 -mb-px bg-gray-100 rounded-2xl">
                        <div class="max-h-[30vh] scroll-smooth overflow-y-auto md:flex-wrap w-full" style="scrollbar-color: gray #F3F4F6 !important;">
                            <li class="text-sm font-semibold rounded-md transition-colors duration-200 text-nowrap w-full px-3 sticky top-0 bg-gray-100 pb-3 shadow-sm">
                                <span>دسته‌بندی‌ {{ $topParent->title }}</span>
                            </li>
                            <li class="text-sm rounded-md font-semibold transition-colors duration-200 text-nowrap w-full flex items-center px-3">
                                <a href="{{ $is_news ? route('NewsCategory.show', ['slug' => $topParent->slug]).'/' : route('CategoryBlog.index', ['slug' => $topParent->slug]).'/' }}"
                                    wire:navigate
                                    @click.prevent="selectedId = 0"
                                    {{--                                       onclick="document.getElementById('pc-{{ $parent->id }}').checked=true;"--}}
                                    class="flex items-center text-sm rounded-md transition-colors duration-200 text-nowrap w-full h-full cursor-pointer"
                                    aria-current="page">
                                    <input :checked="selectedId == 0" name="cc-0" id="cc-0" type="checkbox" class="rounded-[4px] cursor-pointer border-2" @if (url()->current() == route('CategoryBlog.index', ['slug' => $topParent->slug]) || url()->current() == route('NewsCategory.show', ['slug' => $topParent->slug]) || url()->current() == route('CategoryBlog.index', ['slug' => $topParent->slug]) . '/page/' . $page) checked @endif>
                                    <label for="cc-0" class=" w-full cursor-pointer px-3 py-3 border-b">
                                        همه
                                    </label>
                                </a>
                            </li>
                            @foreach ($childCategories->sortByDesc('priority') as $child)
                            <li x-ref="psub_category_{{ $child->id }}" class="text-sm rounded-md font-semibold transition-colors duration-200 text-nowrap w-full flex items-center px-3">
                                <a href="{{ $is_news ? route('NewsCategory.show', ['slug' => $child->slug]).'/' : route('CategoryBlog.index', ['slug' => $child->slug]).'/' }}"
                                    wire:navigate
                                    @click.prevent="selectedId = {{ $child->id }}"
                                    {{--                                       onclick="document.getElementById('pc-{{ $child->id }}').checked=true;"--}}
                                    class="flex items-center text-sm rounded-md transition-colors duration-200 text-nowrap w-full h-full cursor-pointer"
                                    aria-current="page">
                                    @if(isset($selectedSecondLevelCategory->id))
                                    <input :checked="selectedId === {{ $child->id }}" name="cc-{{ $child->id }}" id="cc-{{ $child->id }}" type="checkbox" class="rounded-[4px] cursor-pointer border-2" @if (url()->current() == route('CategoryBlog.index', ['slug' => $child->slug]) || url()->current() == route('CategoryBlog.index', ['slug' => $child->slug]) . '/page/' . $page || $selectedSecondLevelCategory->id == $child->id) checked @endif>
                                    @else
                                    <input :checked="selectedId === {{ $child->id }}" name="cc-{{ $child->id }}" id="cc-{{ $child->id }}" type="checkbox" class="rounded-[4px] cursor-pointer border-2" @if (url()->current() == route('CategoryBlog.index', ['slug' => $child->slug]) || url()->current() == route('CategoryBlog.index', ['slug' => $child->slug]) . '/page/' . $page) checked @endif>
                                    @endif
                                    <label for="cc-{{ $child->id }}" class=" w-full cursor-pointer px-3 py-3 @if(!$loop->last) border-b @endif">
                                        {{ $child->title }}
                                    </label>
                                </a>
                            </li>
                            @endforeach
                        </div>
                    </ul>
                </div>
                @endif
                @if($subChildCategories->isNotEmpty())
                <div x-data="{
                            selectedId: @js($category->id),
                            scrollToSelected() {
                                this.$nextTick(() => {
                                    const el = this.$refs['sub_category_' + this.selectedId];
                                    if (el) {
                                        el.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
                                    }
                                });
                            }
                        }"
                    x-init="scrollToSelected()">
                    <ul class="flex items-center  py-3 -mb-px bg-gray-100 rounded-2xl">
                        <div class="max-h-[20vh] scroll-smooth overflow-y-auto md:flex-wrap w-full relative" style="scrollbar-color: gray #F3F4F6 !important;">
                            <li class="text-sm font-semibold rounded-md transition-colors duration-200 text-nowrap w-full px-3 sticky top-0 bg-gray-100 pb-3 shadow-sm">
                                <span>دسته‌بندی‌ {{ $selectedSecondLevelCategory->title }}</span>
                            </li>
                            <li class="text-sm rounded-md font-semibold transition-colors duration-200 text-nowrap w-full flex items-center px-3">
                                <a href="{{ $is_news ? route('NewsCategory.show', ['slug' => $selectedSecondLevelCategory->slug]).'/' : route('CategoryBlog.index', ['slug' => $selectedSecondLevelCategory->slug]).'/' }}"
                                    wire:navigate
                                    @click.prevent="selectedId = {{ $selectedSecondLevelCategory->id }}"
                                    {{--                                       onclick="document.getElementById('pc-{{ $parent->id }}').checked=true;"--}}
                                    class="flex items-center text-sm rounded-md transition-colors duration-200 text-nowrap w-full h-full cursor-pointer"
                                    aria-current="page">
                                    <input :checked="selectedId == {{ $selectedSecondLevelCategory->id }}" name="sc-0" id="sc-0" type="checkbox" class="rounded-[4px] cursor-pointer border-2" @if (url()->current() == route('CategoryBlog.index', ['slug' => $selectedSecondLevelCategory->slug]) || url()->current() == route('NewsCategory.show', ['slug' => $selectedSecondLevelCategory->slug]) || url()->current() == route('CategoryBlog.index', ['slug' => $selectedSecondLevelCategory->slug]) . '/page/' . $page) checked @endif>
                                    <label for="sc-0" class=" w-full cursor-pointer px-3 py-3 border-b">
                                        همه
                                    </label>
                                </a>
                            </li>
                            @foreach ($subChildCategories->sortByDesc('priority') as $subChild)
                            <li x-ref="sub_category_{{ $subChild->id }}" class="text-sm rounded-md font-semibold transition-colors duration-200 text-nowrap w-full flex items-center px-3">
                                <a href="{{ $is_news ? route('NewsCategory.index', ['slug' => $subChild->slug]) : route('CategoryBlog.index', ['slug' => $subChild->slug]).'/' }}"
                                    wire:navigate
                                    @click.prevent="selectedId = {{ $subChild->id }}"
                                    class="flex items-center text-sm rounded-md transition-colors duration-200 text-nowrap w-full h-full cursor-pointer"
                                    aria-current="page">
                                    {{-- @if(isset($selectedSecondLevelCategory->id))--}}
                                    <input :checked="selectedId === {{ $subChild->id }}" name="sc-{{ $subChild->id }}" id="sc-{{ $subChild->id }}" type="checkbox" class="rounded-[4px] cursor-pointer border-2" @if (url()->current() == route('CategoryBlog.index', ['slug' => $subChild->slug]) || url()->current() == route('CategoryBlog.index', ['slug' => $subChild->slug]) . '/page/' . $page) checked @endif>
                                    {{-- @else--}}
                                    {{-- <input name="sc-{{ $subChild->id }}" id="sc-{{ $subChild->id }}" type="checkbox" class="rounded-[4px] cursor-pointer border-2" @if (url()->current() == route('CategoryBlog.index', ['slug' => $subChild->slug]) || url()->current() == route('CategoryBlog.index', ['slug' => $subChild->slug]) . '/page/' . $page) checked @endif>--}}
                                    {{-- @endif--}}

                                    <label for="sc-{{ $subChild->id }}" class=" w-full cursor-pointer px-3 py-3 @if(!$loop->last) border-b @endif">
                                        {{ $subChild->title }}
                                    </label>
                                </a>
                            </li>
                            @endforeach
                        </div>
                    </ul>
                </div>
                @endif
            </div>
            <div class="col-span-7 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 h-fit gap-5">
                @foreach ($blogs as $index => $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-slate-100 md:shadow">
                    <a href="{{ route('detail', ['slug' => $blog->slug]) .'/'}}" wire:navigate
                        class="relative w-[80px] md:w-full">
                        <img class="w-[80px] md:w-full md:h-[260px] h-[80px] rounded-xl md:rounded-b-none"
                            src="{{ env('APP_URL_IMAGE').'images/'.$blog->image }}" alt="">
                    </a>
                    <div
                        class="flex w-[74%] justify-start md:justify-normal flex-col md:w-full 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 items-center gap-1 text-white md:mt-auto">
                            <div class="hidden md:flex md: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 flex-col justify-center hidden md:block">
                                        {{ $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
            </div>
        </div>

        @if ($blogs->hasPages())
        <nav class="mt-6">
            <ul class="pagination flex gap-4">

                {{-- First + Prev (only show if not on first page) --}}
                @if (!$blogs->onFirstPage())
                <li>
                    <a class="pb-[4px]"
                        href="{{ $is_news
                            ? ($category['id'] == 0
                                ? route('NewsCategory.index')
                                : route('NewsCategory.show', ['slug' => $slug]))
                            : route('CategoryBlog.index', ['slug' => $slug]).'/' }}"
                        wire:navigate rel="first">
                        <svg style="width: 12px; height: 12px" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 233.91 226.965">
                            <path d="M139.099,113.926c7.785-7.807,14.811-14.878,21.865-21.921,20.745-20.71,41.523-41.387,62.244-62.121,7.631-7.635,7.275-18.796-.662-24.879-5.824-4.463-14.02-4.42-19.781,.152-1.071,.85-2.04,1.834-3.01,2.803-30.792,30.774-61.581,61.55-92.362,92.334-8.813,8.814-8.798,17.48,.051,26.329,30.87,30.872,61.777,61.706,92.6,92.625,5.006,5.022,10.648,7.376,17.58,5.229,10.645-3.298,14.599-16.097,7.775-24.894-1.065-1.373-2.333-2.596-3.568-3.828-26.395-26.351-52.796-52.697-79.216-79.023-.96-.956-2.126-1.706-3.517-2.806Z" />
                            <path d="M43.716,113.46c7.308-7.331,14.332-14.404,21.387-21.447,20.573-20.538,41.144-41.078,61.751-61.582,4.559-4.537,6.232-9.891,4.569-16.05-1.631-6.039-5.739-9.877-11.817-11.285-5.789-1.341-10.825,.331-15.034,4.542-11.729,11.737-23.476,23.456-35.212,35.187-19.236,19.228-38.475,38.454-57.701,57.693-8.661,8.666-8.718,17.444-.124,26.044,30.958,30.975,62.066,61.802,92.832,92.966,9.589,9.713,24.356,6.018,27.766-5.415,1.972-6.612,.065-12.214-4.786-17.025-12.492-12.387-24.921-24.836-37.373-37.262-14.661-14.629-29.321-29.258-43.976-43.892-.696-.695-1.336-1.444-2.282-2.474Z" />
                        </svg>
                    </a>
                </li>
                @if(($blogs->currentPage() - 1) === 1)
                <li>
                    <a class="pb-[4px]"
                        href="{{ $is_news
                            ? ($category['id'] == 0
                                ? route('NewsCategory.index')
                                : route('NewsCategory.show', ['slug' => $slug]))
                            : route('CategoryBlog.index', ['slug' => $slug]).'/' }}"
                        wire:navigate rel="prev">
                        <svg style="width: 12px; height: 12px" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 233.91 226.965">
                            <path d="M91.264,113.926c7.785-7.807,14.811-14.878,21.865-21.921,20.745-20.71,41.523-41.387,62.244-62.121,7.631-7.635,7.275-18.796-.662-24.879-5.824-4.463-14.02-4.42-19.781,.152-1.071,.85-2.04,1.834-3.01,2.803-30.792,30.774-61.581,61.55-92.362,92.334-8.813,8.814-8.798,17.48,.051,26.329,30.87,30.872,61.777,61.706,92.6,92.625,5.006,5.022,10.648,7.376,17.58,5.229,10.645-3.298,14.599-16.097,7.775-24.894-1.065-1.373-2.333-2.596-3.568-3.828-26.395-26.351-52.796-52.697-79.216-79.023-.96-.956-2.126-1.706-3.517-2.806Z" />
                        </svg>
                    </a>
                </li>
                @else
                <li>
                    <a class="pb-[4px]"
                        href="{{ $is_news
                            ? ($category['id'] == 0
                                ? route('NewsCategorySimple', ['page' => $blogs->currentPage() - 1])
                                : route('NewsCategory.show.page', ['slug' => $slug, 'page' => $blogs->currentPage() - 1]))
                            : route('CategoryBlogSimple', ['slug' => $slug, 'page' => $blogs->currentPage() - 1]).'/' }}"
                        wire:navigate rel="prev">
                        <svg style="width: 12px; height: 12px" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 233.91 226.965">
                            <path d="M91.264,113.926c7.785-7.807,14.811-14.878,21.865-21.921,20.745-20.71,41.523-41.387,62.244-62.121,7.631-7.635,7.275-18.796-.662-24.879-5.824-4.463-14.02-4.42-19.781,.152-1.071,.85-2.04,1.834-3.01,2.803-30.792,30.774-61.581,61.55-92.362,92.334-8.813,8.814-8.798,17.48,.051,26.329,30.87,30.872,61.777,61.706,92.6,92.625,5.006,5.022,10.648,7.376,17.58,5.229,10.645-3.298,14.599-16.097,7.775-24.894-1.065-1.373-2.333-2.596-3.568-3.828-26.395-26.351-52.796-52.697-79.216-79.023-.96-.956-2.126-1.706-3.517-2.806Z" />
                        </svg>
                    </a>
                </li>
                @endif
                @endif
                {{-- Page Numbers: show only 2 before and 2 after current --}}
                @for ($page = max(1, $blogs->currentPage() - 2); $page <= min($blogs->lastPage(), $blogs->currentPage() + 2); $page++)
                    @if ($page == $blogs->currentPage())
                    <li class="active"><span>{{ $page }}</span></li>
                    @else
                    @if($page == 1)
                    <li>
                        <a href="{{ $is_news
                                            ? ($category['id'] == 0
                                                ? route('NewsCategory.index')
                                                : route('NewsCategory.show', ['slug' => $slug]))
                                            : route('CategoryBlog.index', ['slug' => $slug]).'/' }}"
                            wire:navigate>{{ $page }}</a>
                    </li>
                    @else
                    <li>
                        <a href="{{ $is_news
                                            ? ($category['id'] == 0
                                                ? route('NewsCategorySimple', ['page' => $page])
                                                : route('NewsCategory.show.page', ['slug' => $slug, 'page' => $page]))
                                            : route('CategoryBlogSimple', ['slug' => $slug, 'page' => $page]).'/' }}"
                            wire:navigate>{{ $page }}</a>
                    </li>
                    @endif
                    @endif
                    @endfor

                    {{-- Next + Last (only show if not on last page) --}}
                    @if ($blogs->hasMorePages())
                    <li>
                        <a class="pb-[4px]"
                            href="{{ $is_news
                            ? ($category['id'] == 0
                                ? route('NewsCategorySimple', ['page' => $blogs->currentPage() + 1])
                                : route('NewsCategory.show.page', ['slug' => $slug, 'page' => $blogs->currentPage() + 1]))
                            : route('CategoryBlogSimple', ['slug' => $slug, 'page' => $blogs->currentPage() + 1]).'/' }}"
                            wire:navigate rel="next">
                            <svg style="width: 12px; height: 12px" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 233.91 226.965">
                                <path d="M142.646,112.233c-7.785-7.807-14.811-14.878-21.865-21.921-20.745-20.71-41.523-41.387-62.244-62.121-7.631-7.635-7.275-18.796,.662-24.879,5.824-4.463,14.02-4.42,19.781,.152,1.071,.85,2.04,1.834,3.01,2.803,30.792,30.774,61.581,61.55,92.362,92.334,8.813,8.814,8.798,17.48-.051,26.329-30.87,30.872-61.777,61.706-92.6,92.625-5.006,5.022-10.648,7.376-17.58,5.229-10.645-3.298-14.599-16.097-7.775-24.894,1.065-1.373,2.333-2.596,3.568-3.828,26.395-26.351,52.796-52.697,79.216-79.023,.96-.956,2.126-1.706,3.517-2.806Z" />
                            </svg>
                        </a>
                    </li>
                    <li>
                        <a class="pb-[4px]"
                            href="{{ $is_news
                            ? ($category['id'] == 0
                                ? route('NewsCategorySimple', ['page' => $blogs->lastPage()])
                                : route('NewsCategory.show.page', ['slug' => $slug, 'page' => $blogs->lastPage()]))
                            : route('CategoryBlogSimple', ['slug' => $slug, 'page' => $blogs->lastPage()]).'/' }}"
                            wire:navigate rel="last">
                            <svg style="width: 12px; height: 12px" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 233.91 226.965">
                                <path d="M94.81,113.926c-7.785-7.807-14.811-14.878-21.865-21.921C52.199,71.296,31.422,50.618,10.7,29.885c-7.631-7.635-7.275-18.796,.662-24.879,5.824-4.463,14.02-4.42,19.781,.152,1.071,.85,2.04,1.834,3.01,2.803,30.792,30.774,61.581,61.55,92.362,92.334,8.813,8.814,8.798,17.48-.051,26.329-30.87,30.872-61.777,61.706-92.6,92.625-5.006,5.022-10.648,7.376-17.58,5.229-10.645-3.298-14.599-16.097-7.775-24.894,1.065-1.373,2.333-2.596,3.568-3.828,26.395-26.351,52.796-52.697,79.216-79.023,.96-.956,2.126-1.706,3.517-2.806Z" />
                                <path d="M190.194,113.46c-7.308-7.331-14.332-14.404-21.387-21.447-20.573-20.538-41.144-41.078-61.751-61.582-4.559-4.537-6.232-9.891-4.569-16.05,1.631-6.039,5.739-9.877,11.817-11.285,5.789-1.341,10.825,.331,15.034,4.542,11.729,11.737,23.476,23.456,35.212,35.187,19.236,19.228,38.475,38.454,57.701,57.693,8.661,8.666,8.718,17.444,.124,26.044-30.958,30.975-62.066,61.802-92.832,92.966-9.589,9.713-24.356,6.018-27.766-5.415-1.972-6.612-.065-12.214,4.786-17.025,12.492-12.387,24.921-24.836,37.373-37.262,14.661-14.629,29.321-29.258,43.976-43.892,.696-.695,1.336-1.444,2.282-2.474Z" />
                            </svg>
                        </a>
                    </li>
                    @endif

            </ul>
        </nav>
        @endif

        @section('metaSEO')
        <meta name="description"
            content="مطالب مربوط به {{ $title }} را می توانید از این دسته بندی مشاهده کنید" />
        @if ($blogs->currentPage() > 1)
        @if ($blogs->currentPage() == 2)
        <link rel="prev"
            href="{{ $is_news ? route('NewsCategory.index', ['slug' => $slug]) : route('CategoryBlog.index', ['slug' => $slug]) .'/'}}" />
        @else
        <link rel="prev"
            href="{{ $is_news ? route('NewsCategorySimple', ['slug' => $slug, 'page' => $blogs->currentPage() - 1]) : route('CategoryBlogSimple', ['slug' => $slug, 'page' => $blogs->currentPage() - 1]) .'/'}} " />
        @endif
        @endif
        <link rel="canonical"
            href="{{ $is_news ? route('NewsCategory.index', ['slug' => $slug]).'/' : route('CategoryBlog.index', ['slug' => $slug]).'/' }}" />
        <link rel="next"
            href="{{ $blogs->currentPage() < $blogs->lastPage() ? ($is_news ? route('NewsCategorySimple', ['slug' => $slug, 'page' => $blogs->currentPage() + 1]) : route('CategoryBlogSimple', ['slug' => $slug, 'page' => $blogs->currentPage() + 1])) : '' }}/" />
        <meta property="og:locale" content="fa_IR" />
        <meta property="og:type" content="article" />
        <meta property="og:title" content="دسته بندی مطالب {{ $title }} - سرمایه گذاری اهرم" />
        <meta property="og:description"
            content="مطالب مربوط به {{ $title }} را می توانید از این دسته بندی مشاهده کنید" />
        <meta property="og:url" content="{{ url()->current() }}/" />
        <meta property="og:site_name" content="مجله خبری سرمایه گذاری اهرم" />
        @if (!$is_news && $slug == 'all')
        <meta name='robots'
            content='noindex, nofollow, max-image-preview:large, max-snippet:-1, max-video-preview:-1' />
        @endif
        @endsection
        @else
        <div class="text-center text-gray-500">
            هیچ مطلبی یافت نشد.
        </div>
        @section('metaSEO')
        <meta name="description"
            content="مطالب مربوط به {{ $title }} را می توانید از این دسته بندی مشاهده کنید" />
        <meta property="og:locale" content="fa_IR" />
        <meta property="og:type" content="article" />
        <meta property="og:title" content="دسته بندی مطالب {{ $title }} - سرمایه گذاری اهرم" />
        <meta property="og:description"
            content="مطالب مربوط به {{ $title }} را می توانید از این دسته بندی مشاهده کنید" />
        <meta property="og:url" content="{{ url()->current() }}/" />
        <meta property="og:site_name" content="مجله خبری سرمایه گذاری اهرم" />
        @if (!$is_news && $slug == 'all')
        <meta name='robots'
            content='noindex, nofollow, max-image-preview:large, max-snippet:-1, max-video-preview:-1' />
        @endif
        @endsection
        @endif
    </div>
</div>
@script
<script>
    document.addEventListener('livewire:update', () => {
        const alpineComponent = document.querySelector('[x-data]');
        if (alpineComponent && alpineComponent.__x) {
            alpineComponent.__x.$data.loadCats();
        }
    });
</script>
@endscript