@php
    if (isset($categoryName) && $categoryName) {
        $categories = $categories->filter(function ($category) use ($categoryName) {
            return $category->name === $categoryName;
        });
    }
@endphp
<div class='flex flex-col gap-10 px-6 pt-10 pb-5 laptop:px-[60px] '>
    @foreach($categories as $category)
        <div>
            <div class='flex items-center justify-start gap-8 mb-10 relative before:absolute before:w-full before:h-[2px] before:bg-lightGray before:-top-[40px] mobile:flex-row mobile:items-center '>
                <img loading="lazy" src="{{ $category->icon }}" width="64" height="53" class=' '
                    alt="diagram icon">
                <h2 class='text-base text-navyDark font-black laptop:text-lg'>{{ $category->name }} <span
                        class='text-orange'>Programs</span>
                </h2>
            </div>
            <div class='mb-10'>
                <ul class='relative  space-y-4 font-bold text-base text-navy gap-14 tablet:text-lg hd:columns-2'>
                    @foreach($category->programs as $program)
                        <li
                            class='pl-5 underline relative before:absolute before:-left-0 before:top-[10px] before:w-2 before:h-2 before:rounded-full before:bg-teal '>
                            <a href="/course/{{ $program->slug }}" class='cursor-pointer'>{{ $program->name }}</a>
                        </li>
                    @endforeach
                </ul>
            </div>
        </div>
    @endforeach
</div>