@foreach($certificates as $certificate)
    @php(generateCertificateImage($certificate))
    @php(list($path, $certificateFile)=getCertificatePathAndImage($certificate))
    <!-- Certificate Card {{ $loop->index+1 }} -->
    <div class="bg-neutral-50 border border-[#ebebeb] rounded-lg">
        <div
            class="flex flex-col lg:flex-row lg:items-center justify-between p-4 sm:p-6 gap-4 lg:gap-0">

            <!-- Right Side Content -->
            <div
                class="flex flex-col sm:flex-row gap-3 sm:gap-4 items-start sm:items-center flex-1">
                <!-- Certificate Image -->
                <div
                    class="w-full sm:w-[120px] lg:w-[141px] h-[80px] sm:h-[85px] lg:h-[100px] bg-gray-200 rounded-lg bg-cover bg-center flex-shrink-0">
                    <img src="{{ asset($path.$certificateFile) }}" alt="شهادة الدورة"
                         class="w-full h-full object-cover rounded-lg"
                         onerror="this.style.display='none'; this.parentElement.style.backgroundColor='#0000001a'" />
                </div>

                <!-- Certificate Details -->
                <div class="flex flex-col items-start justify-between flex-1 min-w-0">
                    <h3
                        class="font-alexandria font-bold text-[#06241b] text-sm sm:text-base leading-6 sm:leading-10 text-right mb-2 w-full">
                        شهادة الدورة التدريبية
                        {{ $certificate->Course?->name }}
                    </h3>
                    <div
                        class="flex flex-col sm:flex-row sm:gap-2 items-start justify-start text-right mb-2 w-full gap-1">
                                                    <span
                                                        class="font-alexandria font-medium text-[#79797b] text-xs sm:text-sm">
                                                        المحاضر:
                                                        <span class="font-alexandria font-bold text-[#3b3b3b]">
                                                            {{ $certificate->Course?->Instructor?->name }}
                                                        </span>
                                                    </span>
                        <span
                            class="font-alexandria font-medium text-[#79797b] text-xs sm:text-sm">
                                                        مقدمة من:
                                                        <span class="font-alexandria font-medium text-[#3b3b3b]"> جامعة
                                                            EBU</span>
                                                    </span>
                    </div>
                    <!-- Badge -->
                    <div class="flex items-start justify-start">
                        <div class="bg-orange-light px-2 sm:px-2.5 py-0.5 rounded-lg">
                                                        <span
                                                            class="font-alexandria font-medium text-orange-bg text-xs sm:text-sm leading-4 sm:leading-5">
                                                            تصميم
                                                        </span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Left Side Actions -->
            <div
                class="flex flex-row gap-3 sm:gap-4 items-stretch sm:items-center lg:flex-shrink-0">
                <!-- Quick View Button -->
                <a href="{{ route('certificate_ar_page',['encodeId'=>encrypt($certificate->id)]) }}" target="_blank"
                    class="bg-neutral-100 border border-[#ebebeb] rounded-lg px-3 sm:px-4 py-2.5 sm:py-3 h-auto sm:h-8 flex items-center justify-center sm:justify-start gap-1 hover:bg-gray-200 transition-colors">
                                                <span
                                                    class="font-alexandria font-medium text-brand-secondary-normal text-xs sm:text-sm tracking-wide">
                                                    عرض سريع للشهادة
                                                </span>
                    <svg width="14" height="14" class="sm:w-4 sm:h-4" viewBox="0 0 24 24"
                         fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"
                              stroke="#00b34f" stroke-width="2" />
                        <circle cx="12" cy="12" r="3" stroke="#00b34f" stroke-width="2" />
                    </svg>
                </a>
                <!-- Download Icon -->
                <a href="{{ asset($path.$certificateFile) }}" target="_blank" download
                    class="bg-brand-primary-light rounded-lg p-2 w-8 h-8 sm:w-10 sm:h-10 flex items-center justify-center cursor-pointer hover:bg-brand-primary-normal transition-colors group mx-auto sm:mx-0">
                    <svg width="18" height="18" class="sm:w-6 sm:h-6" viewBox="0 0 24 24"
                         fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" stroke="#144394"
                              class="group-hover:stroke-white" stroke-width="2"
                              stroke-linecap="round" stroke-linejoin="round" />
                        <polyline points="7,10 12,15 17,10" stroke="#144394"
                                  class="group-hover:stroke-white" stroke-width="2"
                                  stroke-linecap="round" stroke-linejoin="round" />
                        <line x1="12" y1="15" x2="12" y2="3" stroke="#144394"
                              class="group-hover:stroke-white" stroke-width="2"
                              stroke-linecap="round" />
                    </svg>
                </a>
            </div>
        </div>
    </div>
@endforeach