<div class="network-slider swiper">
    <div class="swiper-wrapper">
        @foreach($hospitals as $hospital)
            <div class="swiper-slide">
            <div class="our-network-box-wrapper position-relative  ">
                <div class="hospitals_box default-box">
                    @if(!is_null($hospital->media))
                        <img src="{{ $hospital->media->thumbnail_url }}" alt="{{ $hospital->HospitalShortName }}, {{ $hospital->Location }}" class="img-fluid">
                    @else
                        <img src="{{ asset('img/hospital1.png') }}" alt="{{ $hospital->HospitalShortName }}, {{ $hospital->Location }}" class="img-fluid">
                    @endif
                    <div class="body_c">
                        <h3>{{ $hospital->HospitalShortName }}</h3>

                        <p>{{ $hospital->Location }}</p>
                        <p class="align-item-center py-1">
                            <img src="{{ asset('img/Google_Icons.webp') }}" alt="google logo" height="20px" width="20px" />
                            <span class="reviews-text">{{ round($hospital->Rating, 1) }}</span>
                            @for($i = 1; $i <= 5; $i++)
                                @if(round($hospital->Rating - .25 ) >= $i)
                                    <i class="fa-solid fa-star" style='font-size:13px;color:#ff9f00;'></i>
                                @elseif(round($hospital->Rating + .25) >= $i)
                                    <i class="fas fa-star-half-alt" style='font-size:13px;color:#ff9f00;'></i>
                                @else
                                    <i class="fa-regular fa-star" style='font-size:13px;color:#ff9f00;'></i>
                                @endif
                            @endfor
                        </p>
                    </div>
                </div>
                <a href="{{ route('hospitals.show', $hospital->Slug) }}" class="hospitals_box hover-show-box  d-block">
                    @if(!is_null($hospital->media))
                        <img src="{{ $hospital->media->thumbnail_url }}" alt="{{ $hospital->HospitalShortName }}, {{ $hospital->Location }}" class="img-fluid">
                    @else
                        <img src="{{ asset('img/hospital1.png') }}" alt="{{ $hospital->HospitalShortName }}, {{ $hospital->Location }}" class="img-fluid">
                    @endif
                    <div class="body_c">
                        <h3>{{ $hospital->HospitalShortName }}</h3>
                        <div class="d-flex justify-content-between align-item-center">
                            <p class="d-flex justify-content-between mb-3 pe-2">
                                <span>{{ $hospital->Location }}</span>
                            </p>
                             <i class="fa-solid fa-arrow-right text-white"></i>
                        </div>
                    </div>
                </a>
            </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>