@props([
'course'
])
<div
    class="bg-[#FAFAFA] border border-[#EBEBEB] rounded-lg p-4 shadow-sm"
>
    <a href="{{ route('course_page',$course->url) }}" class="relative mb-4">
    <img
        src="{{ asset('assets/images/'.$course->image) }}" alt="{{ $course->name }}"
        class="w-full h-28 object-cover rounded-lg mb-4"
    />
    </a>
    <div class="space-y-2">
        <a href="{{ route('courses_page',['categories[]'=>$course->Category?->url]) }}"
            class="{{ config('app.COURSES_CATEGORY_COLOR.'.$course->Category?->id) }} text-[#FFF8EC] px-3 py-1 rounded-lg text-sm inline-block"
        >
            {{ $course->Category?->name }}
        </a>
        <h3 class="text-sm font-medium text-[#202020] text-right">
            <a href="{{ route('course_page',$course->url) }}">
                {{ \Illuminate\Support\Str::limit($course->name,20) }}
            </a>
        </h3>
        <div class="bg-[#EBEBEB] h-[2px] w-full"></div>
        <a href="{{ route('instructor_page',$course->Instructor?->url) }}" class="flex justify-start items-center gap-2">
            <div class="w-8 h-8">
                <img
                    src="{{ asset('assets/images/'.$course->Instructor?->pic) }}"
                    class="w-full h-full object-contain"
                    alt="{{ $course->Instructor?->name }}"
                />
            </div>
            <div class="text-right">
                <div class="text-sm font-medium text-[#202020]">
                    {{ $course->Instructor?->name }}
                </div>
                <div class="text-xs text-[#202020]">{{ $course->Instructor?->title }}</div>
            </div>
        </a>
        <div
            class="bg-[#F5F5F5] rounded-lg p-2 flex justify-between items-center text-[#434343]"
        >
            <div class="flex items-center gap-2">
                <img
                    src="{{ asset('frontend/images') }}/admin-view/video-icon.svg"
                    class="w-6 h-6"
                    alt="Video Icon"
                />
                <span class="text-base font-medium">{{ $course->curriculum_number }} محاضرات</span>
            </div>
            <div class="flex items-center gap-2">
                <img
                    src="{{ asset('frontend/images') }}/admin-view/clock-icon.svg"
                    class="w-6 h-6"
                    alt="Clock Icon"
                />
                <span class="text-base">{{ ceil($course->hours_numbers) }} ساعة</span>
            </div>
        </div>
        <div class="flex items-center gap-4">
            <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>
            <button aria-label="Add to Wishlist"
                class="w-8 h-8 {{ isFav($course->id)?'bg-[#EE3030]':'bg-[#FDEAEA]' }} rounded-lg flex items-center justify-center toggleFav" data-type="courses" data-id="{{ $course->id }}"
            >
                <svg class="w-5 h-5 {{ isFav($course->id)?'text-white':'text-[#EE3030]' }}" fill="none" stroke="currentColor"
                     viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
                    </path>
                </svg>
            </button>
        </div>
    </div>
</div>