{{--@php($courses=collect([]))--}}
@if($courses->count())
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    @foreach($courses as $course)
        <!-- Course Card {{ $loop->index+1 }} -->
            <x-course-card-progress :course="$course"/>
        @endforeach
    </div>
@else
    @if(request()->routeIs('company_my_courses_page'))
        <div
            id="empty-state"
            class="flex flex-col items-center justify-center text-center max-w-[533px] mx-auto mb-[9rem] mt-12"
        >
            <div class="w-[329px] h-[329px] mb-6">
                <img
                    src="{{ asset('frontend/images/no-courses.png') }}"
                    alt="No current courses"
                    class="w-full h-full object-contain"
                />
            </div>

            <!-- Content -->
            <div class="flex flex-col gap-1 items-center mb-6">
                <h2
                    class="font-tajawal font-bold text-[20px] text-[#1c1c1c] leading-[30px] mb-1"
                >
                    لا يوجد اي دورات تدريبية حالية يمكنك إستكمالها
                </h2>
                <p
                    class="font-tajawal font-medium text-[14px] text-[#4a4a4a] leading-[20px]"
                >
                    يمكنك البدأ الآن و اختيار الدورة التدريبية المناسبة لمجالك
                </p>
            </div>

            <!-- CTA Button -->
            <a href="{{ route('courses_page') }}"
                class="bg-[#144394] hover:bg-[#0f3a7a] transition-colors rounded-lg px-6 py-3 min-w-[305px]"
            >
            <span
                class="font-tajawal font-medium text-[16px] text-white leading-[24px]"
            >
              استكشف الدورات التدريبية
            </span>
            </a>
        </div>
        @elseif(request()->routeIs('company_my_learning_page'))
        <div
            id="history-empty-state"
            class="flex flex-col items-center justify-center text-center max-w-[533px] mx-auto mb-[9rem] mt-12"
        >
            <div class="w-[259px] h-[300px] mb-6">
                <img
                    src="{{ asset('frontend/images/graduating.png') }}"
                    alt="No learning history"
                    class="w-full h-full object-contain"
                />
            </div>

            <!-- Content -->
            <div class="flex flex-col gap-1 items-center mb-6">
                <h2
                    class="font-tajawal font-bold text-[20px] text-[#1c1c1c] leading-[30px] mb-1"
                >
                    لا يوجد اي دورات تدريبية حالية يمكنك إستكمالها
                </h2>
                <p
                    class="font-tajawal font-medium text-[14px] text-[#4a4a4a] leading-[20px]"
                >
                    يمكنك البدأ الآن و اختيار الدورة التدريبية المناسبة لمجالك
                </p>
            </div>

            <!-- CTA Button -->
            <a href="{{ route('courses_page') }}"
                class="bg-[#144394] hover:bg-[#0f3a7a] transition-colors rounded-lg px-6 py-3 min-w-[305px]"
            >
            <span
                class="font-tajawal font-medium text-[16px] text-white leading-[24px]"
            >
              استكشف الدورات التدريبية
            </span>
            </a>
        </div>
        @else
    <div
        id="favorites-empty-state"
        class="flex  flex-col items-center justify-center text-center max-w-[533px] mx-auto mb-[9rem] mt-12"
    >
        <div class="w-[435px] h-[305px] mb-6">
            <img
                src="{{ asset('frontend/images') }}/no-favorites.png"
                alt="No favorite courses"
                class="w-full h-full object-contain"
            />
        </div>

        <!-- Content -->
        <div class="flex flex-col gap-1 items-center mb-6">
            <h2
                class="font-tajawal font-bold text-[20px] text-[#1c1c1c] leading-[30px] mb-1"
            >
                لا يوجد اي دورات مفضلة حالية يمكنك بدأها
            </h2>
            <p
                class="font-tajawal font-medium text-[14px] text-[#4a4a4a] leading-[20px]"
            >
                يمكنك البدأ الآن و اختيار الدورة التدريبية المناسبة لمجالك
            </p>
        </div>

        <!-- CTA Button -->
        <a href="{{ route('courses_page') }}"
            class="bg-[#144394] hover:bg-[#0f3a7a] transition-colors rounded-lg px-6 py-3 min-w-[305px]"
        >
            <span
                class="font-tajawal font-medium text-[16px] text-white leading-[24px]"
            >
              استكشف الدورات التدريبية
            </span>
        </a>
    </div>
        @endif
@endif