@extends('website.layouts.app-ar')
@section('content')
<!--************************************* header *************************************-->
	<section class="inner_banner px-md-5 px-0">
		<div class="container-fluid">
    @include('website.layouts.appoinment_btn-ar')
			<div class="inner_banner_bg doctors_banner p-sm-5 p-3">
    @include('website.layouts.head_nav-ar')
				<nav data-aos="fade-up" class="w-100 float-start my-md-5 my-sm-4 my-0 justify-content-sm-start justify-content-center d-flex order-sm-1 order-2" style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
					<ol class="breadcrumb m-0">
						<li class="breadcrumb-item"><a class="trs" href="/{{ env('Arabic_url') }}">الصفحة الرئيسية</a></li>
						<li class="breadcrumb-item active" aria-current="page">الأطباء</li>
					</ol>
				</nav>
				<div data-aos="fade-up" class="w-100 row align-items-sm-center align-items-start order-sm-2 order-1">
					<h1 class="inner_title text-xl-center text-sm-start text-center">الأطباء</h1>
				</div>
			</div>
		</div>
	</section>
	<section class="doctors px-md-5 px-0">
		<div class="container-fluid">
			<div class="row gy-4">

				@foreach($doctors as $doc)
				<div data-aos="fade-up" class="col-xxl-4 col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12 ">
					<div class="hm_dentists_bg text-center d-flex flex-column justify-content-center p-3 pb-0 h-100">
						<div>
							<h4 class="w-100 mt-4 mb-5">{{ $doc->service_name_ar }}<span class="mt-2 fs-6 text-muted d-block">{{ $doc->category_name_ar }}</span></h4>
							<img class="img-fluid doc-profile-img" src="{{ asset('uploads/services/'.$doc->section_image) }}" alt="{{ $doc->service_name }}">
						</div>
						<div class="doc-profile-desc h-100">
							<ul>
								<li>{{ $doc->section_description_ar }}</li>
																@foreach($splitelements as $splt)
								<li>{{ $splt }}</li>
								@endforeach
							</ul>
							<span class="language-info">Spoken Language: {{ $doc->features_title_ar }}</span>
						</div>
					</div>
				</div>
				@endforeach

			</div>
		</div>
	</section>
@endsection