@if ($tutors->count())
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-12 gap-6">
        @foreach ($tutors as $tutor)
            <div class="lg:col-span-4">
                <div class="card">
                    <div class="bg-white rounded-3xl border border-[#E2E2E2] p-5 overflow-hidden">
                        <img src="{{ $tutor->profile ?? $tutor->tutorDefaultImage }}" class="object-cover rounded-3xl w-[508.66px] h-[400px]" />

                        <div class="pt-5">
                            <div class="flex justify-between items-center mb-2">
                                <h3 class="fo-xb xldesk:text-[24px] text-lg text-[#434343] font-semibold">
                                    {{ $tutor->first_name . ' ' . $tutor->last_name }}
                                </h3>
                                <span
                                    class="fm-xb bg-teal-400 text-white px-3 py-1 rounded-lg text-[21px] font-semibold">
                                    $ {{ $tutor->tutor_hourly_rate }}/<span class="fm-xb text-[14px]">hr</span>
                                </span>
                            </div>

                            <p class="text-black mb-4 text-[18px] h-[54px]">
                                {{ \Illuminate\Support\Str::limit($tutor->headline, 80, '...') }}

                            </p>

                            <div class="flex justify-between mb-2">
                               <div>
    <p class="font-semibold text-[#143453] text-[18px] pb-2">Qualification</p>
    <p class="text-[#000] text-[16px] font-semibold">
        {!! \Illuminate\Support\Str::words($tutor->qualification, 10, '...') !!}
    </p>
</div>
                                
                                <div class="text-right">
                                    <p class="font-semibold text-[#143453] text-[18px]">Rating</p>
                                    <p class="text-yellow-500 font-semibold text-[21px]">
                                        ★ <span class="text-[#000] text-[16px]">{{ $tutor->average_rating }} /5</span>
                                    </p>
                                </div>
                            </div>

                            <hr class="my-2 text-[#E2E2E2]">

                            <div class="mb-4 h-[68px]">
                                <p class="font-semibold text-[#143453] text-[18px] mb-2">Subjects</p>
                                @php
                                    $subjects = $tutor->subjects;
                                    $visibleSubjects = $subjects->take(3);
                                    $extraCount = $subjects->count() - $visibleSubjects->count();
                                @endphp

                                <div class="flex flex-wrap gap-2">
                                    @if($subjects->count()>0)
                                    @foreach ($visibleSubjects as $subject)
                                        <span
                                            class="border-2 rounded px-3 py-1 border-[#EBEBEB] font-semibold text-[14px]">
                                            {{ $subject->subject_name }}
                                        </span>
                                    @endforeach

                                    @if ($extraCount > 0)
                                        <span
                                            class="border-2 rounded px-3 py-1 border-[#EBEBEB] font-semibold text-[14px] cursor-pointer text-blue-600">
                                            +{{ $extraCount }} More
                                        </span>
                                    @endif
                                    @else
                                          <h3 class="fo-xb xldesk:text-[24px] text-lg text-[#434343] font-semibold">
                                                No subjects added!
                                </h3>
                                    @endif
                                </div>

                            </div>

                            <button
                                class="cursor-pointer w-full bg-yellow-400 hover:bg-yellow-500 xldesk:p-5 p-3 rounded-xl font-semibold"
                                onclick="window.location.href='{{ route('tutor.detail',encrypt($tutor->id)) }}'">
                                View Details
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            
        @endforeach
    </div>

    {{-- ✅ PAGINATION (GRID KE BAHAR) --}}
    <div class="w-full flex justify-center mt-12">
        {!! $tutors->links('site.partials.ajax-pagination') !!}
    </div>
@endif
