@extends('front.layouts.master')

@section('content')
<!-- ========= Inner Header ======= -->
<section id="inner-header">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="inner-breadcrumb">
                    <h2>Our Doctors</h2>
                    <ul>
                        <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 Doctors</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>


<!-- ========= Doctors ======= -->

<section id="doctors" class="mt-5">

    <div class="container">

        @if (isset($doctors) && count($doctors) > 0)
        <div class="row">

            @foreach ($doctors as $doctor)
            <div class="col-lg-3 col-sm-6 d-flex mb-4">
                <div class="doctor-list-new w-100 h-100">


                    <a href="{{ route('front.doctor-detail', $doctor->doctor_slug) }}" class="doctor-link">
                        <div class="doctor-list-box">
                            <div class="doctor-bg">
                                <img src="{{ !empty($doctor->image) ? image($doctor->image, DOCTOR_PATH) : asset('front/assets/img/doc-1.png') }}"
                                    class="img-fluid" alt="{{ $doctor->name }}">
                            </div>
                            <div class="doctor-list text-center">
                                <h4>{{ $doctor->name }}</h4>
                                <div class="degree-box">
                                    <p> {{ $doctor->designations }}</p>
                                </div>
                                {{-- <div class="degree-box">
                                    <p>{{ $doctor->services }}</p>
                                </div> --}}
                            </div>
                        </div>
                    </a>
                </div>
            </div>

            @endforeach

        </div>
        @endif

    </div>

</section>
@endsection