@extends('front.layouts.master')

@section('content')
    <!-- banner section start -->
    <section class="description-banner">
        <div class="container">
            <div class="banner-content">
                <h1 class="text-light font-heavy text-uppercase">OUR HOSPITALS / NETWORK</h1>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item font-medium text-light"><a href="{{ route('front.home') }}">Home</a></li>
                        <li class="breadcrumb-item font-medium text-light">Our Hospitals</li>
                    </ol>
                </nav>
            </div>
        </div>
    </section>
    <!-- banner section end -->

    <!-- start network section -->
     @if(isset($hospitals) && count($hospitals) > 0)
     <section class="network">
        <div class="container">
            <div class="row justify-content-center">
                <div class="heading facility-heading network-heading mb-3">
                    <h2 class="text-center font-bold">Our Hospitals / Network</h2>
                </div>
                <div class="network-list row ">
                    @foreach($hospitals as $hospital)
                        <div class="col-12 col-md-6 col-lg-4">
                            <a href="{{ route('front.hospital-detail', $hospital->id) }}">
                                <div class="network-box position-relative">
                                    <span class="d-block">
                                        <img src="{!! image($hospital->image, HOSPITAL_PATH) !!}" class="w-100 h-100" alt="{{ $hospital->name }}">
                                    </span>
                                    <div class="heading facility-heading mb-4 network-title">
                                        <h2 class="text-light font-bold text-uppercase">{{ $hospital->name }}</h2>
                                    </div>
                                </div>
                            </a>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </section>
    @endif
    <!-- end network section -->
@endsection