@foreach($courses as $course)
    <!-- Course Item {{ $loop->index+1 }} -->
    <div
        class="bg-[#FAFAFA] border border-[#EBEBEB] rounded-lg p-4 sm:p-6 flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4"
    >
        <div
            class="flex flex-col sm:flex-row items-start sm:items-center gap-4 lg:gap-6 flex-1"
        >
            <!-- Course Details -->
            <div
                class="flex items-start sm:items-center gap-3 sm:gap-4 w-full sm:w-auto"
            >
                <img
                    src="{{ asset('assets/images/'.$course->image) }}" alt="{{ $course->name }}"
                    class="w-16 h-16 sm:w-20 sm:h-20 lg:w-25 lg:h-25 rounded-lg flex-shrink-0"
                />
                <div class="text-right flex-1 sm:flex-initial">
                    <h3
                        class="text-sm sm:text-base font-bold text-[#06241B] mb-1"
                    >
                        {{ \Illuminate\Support\Str::limit($course->name,20) }}
                    </h3>
                    <p class="text-xs sm:text-sm text-[#79797B] mb-2">
                        المحاضر:
                        {{ $course->Instructor?->name }}
                    </p>
                    <div
                        class="
{{--                        bg-brand-tertiary text-brand-tertiary-light--}}
                        {{ config('app.COURSES_CATEGORY_COLOR.'.$course->Category?->id) }} text-[#FFF8EC]
                         px-2 sm:px-3 py-1 rounded-lg text-xs sm:text-sm inline-block"
                    >
                        {{ $course->Category?->name }}
                    </div>
                </div>
            </div>

            <!-- Course Stats -->
            <div
                class="flex items-center gap-4 sm:gap-6 lg:gap-8 bg-[#F5F5F5] border border-[#EBEBEB] rounded-lg p-3 sm:p-4 w-full sm:w-auto"
            >
                <div class="flex items-center gap-2 text-brand-primary">
                    <img
                        src="{{ asset('frontend/images') }}/admin-view/video-icon.svg"
                        class="w-5 h-5 sm:w-6 sm:h-6"
                        alt="Video Icon"
                    />
                    <span class="text-sm sm:text-base">{{ $course->curriculum_number }} محاضرات</span>
                </div>
                <div class="flex items-center gap-2 text-brand-primary">
                    <img
                        src="{{ asset('frontend/images') }}/admin-view/clock-icon.svg"
                        class="w-5 h-5 sm:w-6 sm:h-6"
                        alt="Clock Icon"
                    />
                    <span class="text-sm sm:text-base">{{ ceil($course->hours_numbers) }} ساعة</span>
                </div>
            </div>
        </div>

        <div
            class="flex items-center gap-3 sm:gap-4 justify-start lg:justify-end"
        >
            <!-- Quick View Button -->
            @if(isCompanyType())
            <a href="{{ route('course_page',$course->url) }}"
               class="flex items-center gap-2 px-3 sm:px-4 py-2 border border-[#EBEBEB] bg-[#F5F5F5] rounded-lg text-brand-secondary text-xs sm:text-sm flex-1 sm:flex-initial justify-center sm:justify-start"
            >
                <span class="hidden sm:inline">عرض سريع للدورة</span>
                <span class="sm:hidden">عرض سريع</span>
                <img
                    src="{{ asset('frontend/images') }}/admin-view/eye-icon.svg"
                    class="w-4 h-4 sm:w-5 sm:h-5"
                    alt="Eye Icon"
                />
            </a>
            @endif
            <!-- More Options -->
            <div class="relative flex-shrink-0">


                <!-- Dropdown Menu -->
                @if(isCompanyType())
                    <button
                        class="bg-brand-primary-light p-2 rounded-lg course-options-btn"
                        onclick="toggleCourseOptions(event, this)"
                        aria-label="خيارات الدورة"
                    >
                        <svg
                            class="w-4 h-4 text-brand-primary"
                            viewBox="0 0 16 16"
                            fill="none"
                        >
                            <path
                                d="M7.125 3.609C7.125 3.841 7.217 4.064 7.381 4.228C7.545 4.392 7.768 4.484 8 4.484C8.232 4.484 8.455 4.392 8.619 4.228C8.783 4.064 8.875 3.841 8.875 3.609C8.875 3.377 8.783 3.155 8.619 2.991C8.455 2.827 8.232 2.734 8 2.734C7.768 2.734 7.545 2.827 7.381 2.991C7.217 3.155 7.125 3.377 7.125 3.609ZM7.125 7.984C7.125 8.216 7.217 8.439 7.381 8.603C7.545 8.767 7.768 8.859 8 8.859C8.232 8.859 8.455 8.767 8.619 8.603C8.783 8.439 8.875 8.216 8.875 7.984C8.875 7.752 8.783 7.53 8.619 7.366C8.455 7.202 8.232 7.109 8 7.109C7.768 7.109 7.545 7.202 7.381 7.366C7.217 7.53 7.125 7.752 7.125 7.984ZM7.125 12.359C7.125 12.591 7.217 12.814 7.381 12.978C7.545 13.142 7.768 13.234 8 13.234C8.232 13.234 8.455 13.142 8.619 12.978C8.783 12.814 8.875 12.591 8.875 12.359C8.875 12.127 8.783 11.905 8.619 11.741C8.455 11.577 8.232 11.484 8 11.484C7.768 11.484 7.545 11.577 7.381 11.741C7.217 11.905 7.125 12.127 7.125 12.359Z"
                                fill="currentColor"
                            />
                        </svg>
                    </button>
                <div
                    class="course-options-dropdown hidden absolute left-0 top-full mt-2 bg-white rounded-lg shadow-lg border border-[#EBEBEB] overflow-hidden z-50 min-w-[200px]"
                >
                    <div class="py-1">
                        <!-- Option 1: Enroll in course -->
                        <a href="{{ route('course_page',$course->url) }}"
                           class="w-full flex items-center gap-2 px-3.5 py-2.5 hover:bg-neutral-100 text-right border-b border-[#EBEBEB] transition-colors"
                        >
                            <img
                                src="{{ asset('frontend/images') }}/admin-view/icons/Frame.svg"
                                class="w-4.5 h-4.5 flex-shrink-0"
                                alt="Enroll Icon"
                            />
                            <span class="text-[#1C1C1C] text-sm">التحق بالدورة</span>
                        </a>

                        <!-- Option 2: Register employee -->
                        <button
                            class="w-full flex items-center gap-2 px-3.5 py-2.5 hover:bg-neutral-100 text-right transition-colors"
                            onclick="registerEmployee(event,{{ $course->id }})"
                        >
                            <img
                                src="{{ asset('frontend/images') }}/admin-view/icons/Frame-1.svg"
                                class="w-4.5 h-4.5 flex-shrink-0"
                                alt="Register Employee Icon"
                            />
                            <span class="text-[#3B3B3B] text-sm"
                            >تسجيل موظف بالدورة</span
                            >
                        </button>
                    </div>
                </div>
                @else
                    <a  href="{{ route('course_page',$course->url) }}"
                        class="flex-1 bg-[#00B34F] text-white py-2 px-3 rounded-lg text-sm font-medium flex items-center justify-between gap-2"
                    >
                        <span>بدأ الدورة</span>
                        <img
                            src="{{ asset('frontend/images') }}/admin-view/start-icon.svg"
                            class="w-5 h-5"
                            alt="Start Icon"
                        />
                    </a>
                @endif
            </div>
        </div>
    </div>
@endforeach