@foreach($doctors->take($cols) as $doctor )
    <div class="col-lg-3 mb-4">
        <div class="swiper-slide">
            <div class="testimonial-item item doctor-img-box position-relative overflow-hidden">
                @if(!is_null($doctor->media))
                    <img src="{{ $doctor->media->thumbnail_url }}" class="img-fluid" alt="{{ $doctor->AltInfo }}" />
                @elseif($doctor->gender->Gender === 'Male')
                    <img src="{{ asset('img/default-doctor-male.jpg') }}" class="img-fluid" alt="{{ $doctor->AltInfo }}" />
                @else
                    <img src="{{ asset('img/default-doctor-female.jpg') }}" class="img-fluid" alt="{{ $doctor->AltInfo }}" />
                @endif
                <div class="doctor-content-box">
                    <div class="doctor-text-wrapper">
                        <h3>{{ $doctor->DoctorName }}</h3>
                        <p class="doctors-sort-dis">{{ $doctor->CurrentDesignation }}</p>
                        <p class="exp doctor-specialities-detail">
                            {{ count($doctor->specialities) ? $doctor->specialities[0]->SpecialityName : '' }}
                        </p>
                    </div>
                    <div class="doctor-hover-meta">
                        <a href="{{ route('doctors.show', $doctor->Slug) }}" class="clrBlueDark3 fs-10">View Profile</a>
                        @if($doctor->enableForOnlineBooking())
                            <a href="{{ route('appointment.doctor-select', $doctor->id ) }}" class="btn no-underline d-inline-block">
                                Book Appointment
                            </a>
                        @else
                            <a href="javascript:void(0)" class="btn no-underline d-inline-block"
                                data-bs-toggle="modal"
                                data-doctor-name="{{ $doctor->DoctorName }}"
                                data-doctor-id="{{ $doctor->id }}"
                                data-person-id="{{ $doctor->PersonID }}"
                                data-bs-target="#doctorAppointmentModal"
                            >
                                Book Appointment
                            </a>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
@endforeach

@include('partials.appointment-booking-popup')