<div class="swiper-overflow-container">
    <div class="swiper-container swiper position-relative">
        <div class="swiper-wrapper">
            @foreach($doctors as $doctor)
                <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-detai">
                                    {{ 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)"
                                        data-bs-toggle="modal"
                                        data-doctor-name="{{ $doctor->DoctorName }}"
                                        data-doctor-id="{{ $doctor->id }}"
                                        data-person-id="{{ $doctor->PersonID }}"
                                        data-bs-target="#doctorAppointmentModal"
                                        class="btn no-underline d-inline-block"
                                    >
                                        Book Appointment
                                    </a>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
        <div class="swiper-button-next"><i class="fa-solid fa-angle-right"></i></div>
        <div class="swiper-button-prev"><i class="fa-solid fa-angle-left"></i></div>
    </div>
</div>

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