@php
    $categories = HelpDesk::elementCategoriesByArgs($args);
@endphp

<section class="noice-overlay">
    <div class="container">

        @if (isset($args['title']) || isset($args['view_all']) || isset($args['page_id']))
        <div class="flex justify-between items-end gap-30 mb-40">
            <div class="{{ (isset($args['view_all']) && $args['view_all'] == 'true') ? 'text-left' : 'text-center flex-1' }}">
                <p class="text-xl mb-10">{{ isset($args['subtitle']) ? $args['subtitle'] : '' }}</p>
                <h2 class="text-[45px]/35 font-semibold mb-20">{{ isset($args['title']) ? $args['title'] : '' }}</h2>
                <p class="text-lg">{{ isset($args['description']) ? $args['description'] : '' }}</p>
            </div>

            <div>
                @if (isset($args['view_all']) && $args['view_all'] == 'true')

                <a 
                    href="{{ isset($args['page_id']) ? DzHelper::laraPageLink($args['page_id']) : 'javascript:void(0);' }}"
                    class="btn btn-outline style-1 ms-auto p-2 group button--stroke flairBtn magneticBtn" 
                    data-block="button"
                >
                    <span class="button-flair"></span>
                    <span class="button__label font-normal xl:ps-25 px-10 inline-flex items-center gap-14">{{ __('View All') }}</span>
                    <span class="inline-flex justify-center items-center size-32 rounded-full bg-secondary text-white duration-100 group-hover:bg-primary group-hover:text-secondary z-0">
                        <i class="fa-solid fa-arrow-right text-sm"></i>
                    </span>
                </a>
                @endif
            </div>
        </div>
        @endif

        <div class="flex gap-20 justify-center flex-wrap">
            @forelse($categories as $category)
            <div class="sm:col-span-3 col-span-6 mb-20">
                <div class="text-center w-206">
                    <a href="{{ DzHelper::laraBlogCategoryLink($category->id) }}" class="block mb-20">
                        @if(optional($category)->image && Storage::exists('public/category-images/'.$category->image))
                            <img src="{{ asset('storage/category-images/'.$category->image) }}" class="inline-block rounded-full size-206" alt="">
                        @else
                            <img src="{{ asset('images/noimage.jpg') }}" class="inline-block rounded-full size-206" alt="">
                        @endif
                    </a>
                    <h6 class="sm:text-xl text-lg/35">
                        <a href="{{ DzHelper::laraBlogCategoryLink($category->id) }}">
                        {{  $category->title  }} <span class="text-2sm/35 dark:text-white/60 text-textlight font-normal">({{ $category->blog->count() }})</span>
                        </a>
                    </h6>
                </div>
            </div>
            @empty
            @endforelse
        </div>

        @if (isset($args['pagination']) && ($args['pagination'] == true))
        <div class="w-full">
            {!! $categories->links('elements.pagination') !!}
        </div>
        @endif

    </div>
</section>