@props([
'course'
])
<div
    class="bg-[#FAFAFA] border border-[#EBEBEB] rounded-lg p-4 shadow-sm relative"
>
    <!-- Content Updated Badge -->
    @if($course->lastedit_date)
    <div
        class="absolute top-6 right-6 bg-[#E1FEE3] px-3 py-1 rounded-lg"
    >
              <span class="text-[#08B339] text-sm font-medium"
              >تم تحديث المحتوي</span
              >
    </div>
    @elseif($course->views)
        <div
            class="absolute top-6 right-6 bg-[#E1FDFE] px-3 py-1 rounded-lg"
        >
              <span class="text-[#08ADB3] text-sm font-medium"
              >الاكثر طلبا</span
              >
        </div>
    @else
        <div
            class="absolute top-6 right-6 bg-[#E1E2FE] px-3 py-1 rounded-lg"
        >
            <span class="text-[#081CB3] text-sm font-medium">جديد</span>
        </div>
    @endif

    <img
        src="{{ asset('assets/images/'.$course->image) }}" alt="{{ $course->name }}"
        class="w-full h-28 object-cover rounded-lg mb-4"
    />
    <div cla0ss="space-y-2">
        @if($course->Category)
        <div
            class="{{ config('app.COURSES_CATEGORY_COLOR.'.$course->Category?->id) }} text-brand-tertiary-light px-3 py-1 rounded-lg text-sm inline-block"
        >
            <a href="{{ route('courses_page',['categories[]'=>$course->Category?->url]) }}">
                {{ $course->Category?->name }}
            </a>
        </div>
        @endif
        <h3 class="text-base font-medium text-[#202020] text-right">
            <a href="{{ route('course_page',$course->url) }}">
                {{ \Illuminate\Support\Str::limit($course->name,20) }}
            </a>
        </h3>
        <p class="text-sm text-[#4A4A4A] text-right">
            <a href="{{ route('course_page',$course->url) }}">
                {{ \Illuminate\Support\Str::limit($course->short_description,80) }}
            </a>
        </p>
        <a href="{{ route('instructor_page',$course->Instructor?->url) }}" class="flex justify-start items-center gap-3">
            <div class="w-8 h-8 bg-gray-300 rounded-lg">
                <img
                    src="{{ asset('assets/images/'.$course->Instructor?->pic) }}"
                    alt="{{ $course->Instructor?->name }}"
                    class="w-full h-full rounded-lg"
                />
            </div>
            <div class="text-right">
                <div class="text-sm font-medium text-[#202020]">
                    {{ $course->Instructor?->name }}
                </div>
                <div class="text-xs text-[#202020] inline-block">{{ $course->Instructor?->title }}</div>
            </div>
        </a>
        <div class="flex items-center gap-3">
            <a href="{{ route('course_page',$course->url) }}"
                class="flex-1 bg-brand-secondary text-white py-2 px-4 rounded-lg text-sm font-medium flex items-center justify-between gap-2"
            >
                ابدأ الآن
                <svg class="w-6 h-6" viewBox="0 0 24 24" fill="none">
                    <path
                        d="M8.414 13.343L12.364 17.293C12.546 17.482 12.647 17.734 12.645 17.996C12.642 18.259 12.537 18.509 12.352 18.695C12.166 18.88 11.916 18.985 11.653 18.988C11.391 18.99 11.139 18.889 10.95 18.707L5.293 13.05C5.2 12.957 5.126 12.847 5.075 12.726C5.025 12.605 4.999 12.474 4.999 12.343C4.999 12.212 5.025 12.081 5.075 11.96C5.126 11.839 5.2 11.729 5.293 11.636L10.95 5.979C11.042 5.883 11.153 5.807 11.275 5.755C11.397 5.702 11.528 5.675 11.661 5.674C11.793 5.673 11.925 5.698 12.048 5.748C12.171 5.798 12.283 5.873 12.376 5.967C12.47 6.06 12.545 6.172 12.595 6.295C12.645 6.418 12.67 6.55 12.669 6.682C12.668 6.815 12.641 6.946 12.588 7.068C12.536 7.19 12.46 7.301 12.364 7.393L8.414 11.343H18C18.265 11.343 18.52 11.448 18.707 11.636C18.895 11.823 19 12.078 19 12.343C19 12.608 18.895 12.863 18.707 13.05C18.52 13.238 18.265 13.343 18 13.343H8.414Z"
                        fill="white"
                    />
                </svg>
            </a>
            <div class="relative flex-shrink-0">
                <button
                    class="w-8 h-8 bg-brand-primary-light rounded-lg flex items-center justify-center 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>

                <!-- Dropdown Menu -->
                <div
                    class="course-options-dropdown hidden absolute left-0 top-[-100px] 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>
            </div>
        </div>
    </div>
</div>