<section class="xl:py-150 sm:py-80 py-40 bg-linear-(--primary-gradient) noice-overlay horizontal-section relative sm:min-h-800 overflow-hidden">
    <div class="container">
         @if (isset($args['title']) || isset($args['view_all']) || isset($args['page_id']))
        <div class="flex items-center justify-between mb-40">
            <div class="max-w-580">
                <h2 class="xl:text-6xl md:text-5xl text-4xl mb-7 text-black">{{ isset($args['title']) ? $args['title'] : '' }}</h2>
            </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>
        @endif 
        <div class="horizontal-wrapper xl:flex xl:gap-50 gap-20 grid grid-cols-12 xl:w-fit max-2xl:!w-full">

            @php
                $args['post_type'] = 'portfolio';
                $blogs = HelpDesk::elementPostsByArgs($args);
            @endphp

            @forelse($blogs as $blog)
                <div class="panel xl:min-w-[560px] max-xl:col-span-6 max-md:col-span-12 xl:shrink-0 h-full flex justify-center items-center">
                    <div class="relative overflow-hidden rounded-sm group after:content-[''] after:absolute after:size-full after:top-0 after:left-0 after:bg-black xl:after:opacity-0 after:duration-700 xl:hover:after:opacity-70 after:z-0 after:opacity-70">
                        <div class="media">
                            <img src="{{ DzHelper::getStorageImage('storage/blog-images/'.@$blog->feature_img->value) }}" alt="">
                        </div>
                        <div class="absolute duration-700 xl:top-full xl:group-hover:top-1/2 top-1/2 left-1/2 transform xl:translate-y-0 xl:group-hover:-translate-y-1/2 -translate-y-1/2 -translate-x-1/2 text-center z-1 px-15 max-w-500 w-full">
                            <a href="{{ DzHelper::laraBlogLink($blog->id) }}" class="flex xl:size-150 sm:size-100 size-60 justify-center items-center rounded-full bg-linear-(--btn-gradient) xl:mb-40 mb-10 mx-auto group/second magneticBtn">
                                <span class="overflow-hidden inline-flex">
                                    <svg class="group-hover/second:animate-toTopFromBottom xl:size-76 sm:size-60 size-40" viewBox="0 0 76 76" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M22.375 53.625L53.625 22.375" stroke="#1C1A1B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                        <path d="M22.375 22.375H53.625V53.625" stroke="#1C1A1B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                    </svg>
                                </span>
                            </a>
                            <h3 class="sm:text-[35px]/[45px] text-2xl/30 font-medium text-center text-white">{{ $blog->title }}</h3>
                        </div>
                    </div>
                </div>
            @empty
            @endforelse
            
        </div>
    </div>
    <img src="{{ theme_asset('images/background/bg7.png') }}" alt="" class="absolute bottom-0 xl:left-[10%] left-0 -z-1">
    <div class="fixed top-20 left-20 size-60 z-9999 opacity-0 duration-500 pointer-events-none bg-progress rounded-full p-5 circle-progress xl:block hidden">
        <svg class="size-full -rotate-90" viewBox="0 0 100 100">
            <circle class="stroke-transparent fill-none stroke-5" cx="50" cy="50" r="45" />
            <circle class="progress-ring stroke-primary fill-none stroke-5" cx="50" cy="50" r="45" />
            <text x="50%" y="54%" text-anchor="middle" class="fill-white text-2xxl font-medium rotate-90 origin-center progress-text">0%</text>
        </svg>
    </div>
</section>
