@props([
'course'
])
<div
    class="course-card bg-white rounded-lg border border-[#ebebeb] shadow-[1.24px_1.24px_4.961px_0px_rgba(0,0,0,0.1)] p-4 animate"
>
    <!-- Course Image -->
    <div class="h-[142px] rounded-lg mb-4 overflow-hidden">
        <img
            src="{{ asset('assets/images/'.$course->image) }}"
            alt="{{ $course->name }}"
            class="w-full h-full object-cover rounded-lg"
        />
    </div>

    <!-- Course Content -->
    <div class="flex flex-col gap-2 mb-4">
        <!-- Badge -->
        <div class="flex justify-start mb-2">
            <div class="{{ config('app.COURSES_CATEGORY_COLOR.'.$course->Category?->id) }} rounded-lg px-3 py-1">
                        <span
                            class="font-alexandria font-medium text-[12px] text-[#fff8ec]"
                        >{{ $course->Category?->name }}</span
                        >
            </div>
        </div>

        <!-- Title -->
        <h3
            class="font-alexandria font-medium text-[14px] text-[#1c1c1c] text-right leading-normal"
        >
            {{ $course->name }}
        </h3>
        @if(request()->segment(3)!='my-favorites')
        <!-- Progress Bar -->
        <div class="h-[7px] bg-[#d9d9d9] rounded-lg mb-2">
            <div
                class="h-full bg-[#144394] rounded-lg"
                style="width: {{ $course->percentage }}%"
            ></div>
        </div>
        @endif

        <!-- Instructor Info -->
        @if($course->Instructor)
            <a href="{{ route('instructor_page',$course->Instructor?->url) }}" class="flex items-center justify-start gap-2">
                <img
                    src="{{ asset('assets/images/'.$course->Instructor?->pic) }}"
                    alt="instructor"
                    class="w-8 h-8 rounded-lg object-cover"
                />

                <div class="text-right">
                    <p
                        class="font-alexandria font-medium text-[14px] text-[#202020]"
                    >
                        {{$course->Instructor->name}}
                    </p>
                    <p
                        class="font-alexandria font-normal text-[12px] text-[#202020]"
                    >
                        {{ $course->Instructor->title }}
                    </p>
                </div>
            </a>
        @endif
    </div>

    <!-- Actions -->
    <div class="flex justify-between items-center">
        <a href="{{ route('course_page',['url'=>$course->url]) }}"
           class="bg-[#00b34f] text-white px-3 py-2 rounded-lg flex items-center gap-2 flex-1 ml-4 justify-between"
        >
                      <span class="font-alexandria font-medium text-[14px]"
                      >إستكمال الدورة</span
                      >

            <svg
                width="14"
                height="14"
                viewBox="0 0 14 14"
                fill="none"
                class="rotate-180"
            >
                <path
                    d="M10.586 5.64471L6.636 1.69471C6.45384 1.50611 6.35305 1.25351 6.35533 0.991311C6.35761 0.729114 6.46277 0.478301 6.64818 0.292893C6.83359 0.107485 7.0844 0.00231622 7.3466 3.78026e-05C7.6088 -0.00224062 7.8614 0.0985538 8.05 0.280712L13.707 5.93771C13.8002 6.03037 13.8741 6.14053 13.9246 6.26186C13.9751 6.38319 14.001 6.5133 14.001 6.64471C14.001 6.77612 13.9751 6.90623 13.9246 7.02757C13.8741 7.1489 13.8002 7.25906 13.707 7.35171L8.05 13.0087C7.95775 13.1042 7.84741 13.1804 7.72541 13.2328C7.6034 13.2852 7.47218 13.3128 7.3394 13.314C7.20662 13.3151 7.07494 13.2898 6.95205 13.2395C6.82915 13.1893 6.7175 13.115 6.62361 13.0211C6.52971 12.9272 6.45546 12.8156 6.40518 12.6927C6.3549 12.5698 6.3296 12.4381 6.33075 12.3053C6.3319 12.1725 6.35949 12.0413 6.4119 11.9193C6.46431 11.7973 6.54049 11.687 6.636 11.5947L10.586 7.64471H1C0.734784 7.64471 0.48043 7.53936 0.292893 7.35182C0.105357 7.16428 0 6.90993 0 6.64471C0 6.3795 0.105357 6.12514 0.292893 5.93761C0.48043 5.75007 0.734784 5.64471 1 5.64471H10.586V5.64471Z"
                    fill="white"
                />
            </svg>
        </a>

        <button class="{{ isFav($course->id)?'bg-[#EE3030]':'bg-[#FDEAEA]' }} p-1.5 rounded-lg 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>