@extends('frontend.layouts.master')
@section('content')
<div class="page-content">
	<!--section slider-->
	<div class="section mt-0">
		<div class="quickLinks-wrap js-quickLinks-wrap-d d-none d-lg-flex">
			<div class="quickLinks js-quickLinks closed">
				<div class="container">
					<div class="row no-gutters">
						<div class="col">
							<a href="#" class="link">
								<i class="icon-placeholder"></i><span>Location</span></a>
							<div class="link-drop p-0">
								<div class="google-map">
									<iframe src="{{$map->location}}"></iframe>
								</div>
							</div>
						</div>
						{{-- <div class="col">
							<div class="test-button">    
								<button class=" btn btn-primary test_button" href="#">Test Reports</button>
							</div>
						</div> --}}
						<div class="col">
							<a href="#" class="link">
								<i class="icon-emergency-call"></i><span>Emergency Case</span></a>
							<div class="link-drop">
								<h5 class="link-drop-title"><i class="icon-emergency-call"></i>Emergency Case</h5>
								@foreach($cnt_msg as $cnt_msg)
								<p>{{$cnt_msg->text}}</p>
								
								<ul class="icn-list">
									<li><i class="icon-telephone"></i><span class="phone">{{$cnt_msg->phone}}
									</li>
									<li><i class="icon-black-envelope"></i><a href="mailto:{{$settings->email}}">{{$settings->email}}</a></li>
								</ul>
								@endforeach
								{{-- <p class="text-right mt-2"><a href="#contactForm" class="btn btn-sm btn-hover-fill link-inside">Our Contacts</a></p> --}}
							</div>
						</div>
						<div class="col col-close"><a href="#" class="js-quickLinks-close"><i class="icon-top" data-toggle="tooltip" data-placement="top" title="Close panel"></i></a></div>
					</div>
				</div>
				<div class="quickLinks-open js-quickLinks-open"><span data-toggle="tooltip" data-placement="left" title="Open panel">+</span></div>
			</div>
		</div>
		<div id="mainSliderWrapper">
			<div class="loading-content">
				<div class="loader-dna">
					<column>
						<dot></dot>
						<dot></dot>
						<dot></dot>
						<dot></dot>
						<dot></dot>
						<dot></dot>
						<dot></dot>
						<dot></dot>
					</column>
					<column>
						<dash></dash>
						<dash></dash>
						<dash></dash>
						<dash></dash>
						<dash></dash>
						<dash></dash>
						<dash></dash>
						<dash></dash>
					</column>
					<column>
						<dot></dot>
						<dot></dot>
						<dot></dot>
						<dot></dot>
						<dot></dot>
						<dot></dot>
						<dot></dot>
						<dot></dot>
					</column>
				</div>
			</div>
			<div class="main-slider mb-0 arrows-white arrows-bottom" id="mainSlider" data-slick='{"arrows": false, "dots": true}'>
                @foreach ($banners as $banner)
				<div class="slide">
					<div class="img--holder" data-bg="{{$banner->image}}"></div>
					<div class="slide-content center">
						<div class="vert-wrap container">
							<div class="vert">
								<div class="container">
									{{-- <div style="color:#3368C6" class="slide-txt1 text-no-uppercase" data-animation="fadeInDown" data-animation-delay="1s">{{$banner->title}}<br>
										<b></b></div> --}}
									{{-- <div class="slide-txt2 text-no-uppercase" data-animation="fadeInUp" data-animation-delay="1.5s">Advanced medicine. Compassionate care</div> --}}
									{{-- <div class="slide-btn"><a href="{{$banner->url}}" class="btn link-inside" data-animation="fadeInUp" data-animation-delay="2s"><i class="icon-right-arrow"></i><span>{{$banner->name}}</span><i class="icon-right-arrow"></i></a></div> --}}
								</div>
							</div>
						</div>
					</div>
				</div>
                @endforeach
			</div>
		</div>
	</div>
	<!--//section slider-->
	<!--section departments-->
	<div class="section bg-bottom bg-right bg-norepeat bg-md-none bg-fixed section-bottom-padding section-top-padding" style="background-image: url('{{ asset('public/frontend/images/bg-bottom-right.png') }}')">
		<div class="container">
			<div class="row mt-lg-4">
				<div class="col-md-6 col-xl-6 pr-xl-7">
					<img src="{{$about_us_immigration->image}}" style="height: 400px; width: 520px;" alt="about us image">
					<div class="department-tabs2-bg"><img src="{{asset('public/frontend/images/bg-department.png')}}" alt=""></div>
				</div>
				<div class="col-md-6 col-xl-6">
					<div class="department-carousel2">
						<div class="department-item">
							<div class="h-sub theme-color">About us</div>
							<h2>Personal Licensed<br>Diagnostic <span class="theme-color">Lab Services</span></h2>
							{!! $about_us_immigration->body !!}
							{{-- <ul class="marker-list-md">
								<li>All reports for clients are made simple and easy to understand</li>
								<li>User- friendly website offers custom settings for each physician</li>
								<li>We customize panels to meet physician’s needs.</li>
							</ul> --}}
							<a href="{{route('goal-&-objective')}}" class="btn mt-3" ><i class="icon-right-arrow"></i><span>schedule a visit</span><i class="icon-right-arrow"></i></a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!--//section  departments-->
	<!--section-->
	<div class="section bg-grey mt-md-0">
		<div class="container">
			<div class="title-wrap text-center">
				<h2 class="h1 double-title double-title--white double-title--center double-title--vcenter" data-title="General Tests">
					<span>Ab Siddiq<span class="clearfix d-sm-none"></span> Diagnostic Centre Services</span>
				</h2>
				<div class="h-decor"></div>
			</div>
	
			<div class="nav nav-pills-icons js-nav-pills-carousel slick-initialized slick-slider" role="tablist">
				@foreach($services as $service)
					<a class="nav-link" data-toggle="pill" href="#tab-{{ $service->id }}" role="tab">
						<i class="{{ $service->class }}"></i>
						<span>{{ $service->title }}</span>
					</a>
				@endforeach
			</div>
	
			<div id="tab-content" class="tab-content mt-2 mt-sm-4">
				@foreach($services as $service)
					<div id="tab-{{ $service->id }}" class="tab-pane fade" role="tabpanel">
						<div class="tab-bg">
							<img src="images/content/bg-map.png" alt="">
						</div>
						<div class="row">
							<div class="col-md-6 h-100 mb-2 mb-md-0">
								<img src="{{ asset($service->thumbnail) }}" alt="" class="img-fluid">
							</div>
							<div class="col-md-6">
								<div class="pt-xl-1">
									<h3>{{ $service->name }}</h3>
									<p>{!! $service->content !!}</p>
									<ul class="marker-list-md">
										{{-- <li>{{ $service->test_details }}</li> --}}
									</ul>
									<a href="{{$service->slug}}" class="btn mt-3">
										<i class="icon-right-arrow"></i><span>See Details</span><i class="icon-right-arrow"></i>
									</a>
								</div>
							</div>
						</div>
					</div>
				@endforeach
			</div>
		</div>
	</div>
	
	<!--//section-->
	<!--//section faq-->
	<!--section specialists-->
	<div class="section bg-norepeat bg-right bg-md-none section-top-padding" style="background-image: url(images/bg-top-right.png)">
		<div class="container">
			<div class="title-wrap text-center">
				<div class="h-sub theme-color">Perfect Team</div>
				<h1 class="double-title double-title--center double-title--vcenter" data-title="Perfect Team">
					<span>A Professional & Care Provider</span>
				</h1>
				<div class="h-decor"></div>
			</div>
	
			<!-- Dropdown Selection -->
			<form class="content-search content-search--style2 d-flex mb-3">
				<div class="input-wrap">
					<select id="categorySelect" class="form-control">
						<option value="" disabled selected>Filter Doctor By category</option>
						@foreach($ad_catg as $category)
							<option value="{{ $category->id }}">{{ $category->name }}</option>
						@endforeach
					</select>
				</div>
			</form>
	
			<!-- Doctors List -->
			<div id="doctorList" class="row specialist-carousel js-specialist-carousel">
				@foreach($specialists as $specialist)
				<div class="col-sm-6 col-md-4 category-item" data-member-type="{{ $specialist->member_type }}">
					<div class="doctor-box doctor-box-style3 text-center">
						<div class="doctor-box-photo">
							<a href="{!! url('administrative-profile/' . $specialist->slug) !!}">
								<img src="{{ asset($specialist->image) }}" class="img-fluid" alt="">
							</a>
							<div class="doctor-box-links">
								<a href="#"><i class="icon-facebook-logo"></i></a>
								<a href="#"><i class="icon-google-logo"></i></a>
								<a href="#"><i class="icon-instagram"></i></a>
							</div>
						</div>
						<div class="doctor-box-top">
							<h5 class="doctor-box-name">
								<a style="text-decoration: none;" href="{!! url('administrative-profile/' . $specialist->slug) !!}">
									{{$specialist->name}}
								</a>
							</h5>
							<div class="doctor-box-position">{{$specialist->designation}}</div>
						</div>
					</div>
				</div>
				@endforeach
			</div>
		</div>
	</div>
	
	<script>
		document.addEventListener('DOMContentLoaded', function () {
			const categorySelect = document.getElementById('categorySelect');
			const doctorList = document.getElementById('doctorList');
			const allDoctors = document.querySelectorAll('.category-item');
	
			categorySelect.addEventListener('change', function () {
				const selectedCategory = this.value;
	
				// Filter doctors by member_type
				allDoctors.forEach(doctor => {
					if (doctor.getAttribute('data-member-type') === selectedCategory) {
						doctor.style.display = 'block';
					} else {
						doctor.style.display = 'none';
					}
				});
			});
		});
	</script>
	
	
	<!--//section specialists-->
	<!--section news & achieved-->
	<div class="section bg-light">
		<div class="row">
			<div class="col-lg-12">
				<div class="container">
					<div class="title-wrap mt-2 mb-5 text-center">
						<h1 class="double-title double-title--white double-title--vcenter" data-title="News"><span>News & Events</span></h2>
					</div>
					<div class="row">
						@foreach ($events as $event)
						<div class="col-md-3 mb-4">
							<div class="news-card">
								<div class="news-card-image">
									<img src="{!! $event->image !!}" alt="{{ $event->name }}" class="img-fluid">
								</div>
								<div class="news-card-date">
									<div class="date-day">{{ \Carbon\Carbon::parse($event->date)->format('d') }}</div>
									<div class="date-month-year">
										{{ \Carbon\Carbon::parse($event->date)->format('M') }}<br>
										{{ \Carbon\Carbon::parse($event->date)->format('Y') }}
									</div>
								</div>
								<div class="news-card-content">
									<h5 class="news-card-title">
										<a href="{{ 'event-details/' . $event->id }}" style="text-decoration: none;">
											<h6>{{ (session('locale') == 'bn') ? $event->bn_name : $event->name }}</h6>
										</a>
									</h5>
									<a href="{{ 'event-details/' . $event->id }}" class="news-card-readmore">
                                        Read <i class="flaticon-next"></i>
                                    </a>
								</div>
							</div>
						</div>
						@endforeach
		</div>
	</div>
	<!--//section news & achieved-->
	<section class="bg-dark text-white mt-6 py-5">
		<div class="container">
			<h2 class="" style="text-align: center;">Our Achivement</h2>
			<div class="row text-center">
				<!-- Project Completed -->
				<div class="col-md-4">
					<h2 class="display-4 fw-bold">{{$statistics_counter->ex_year}}<span class="text-primary">+</span></h2>
					<p class="h5">Test Performed</p>
				</div>
				
				<!-- On Going Projects -->
				<div class="col-md-4">
					<h2 class="display-4 fw-bold">{{$statistics_counter->happy_cus}}<span class="text-primary">+</span></h2>
					<p class="h5">Permanent Staff</p>
				</div>
				
				<!-- Proposed Projects -->
				<div class="col-md-4">
					<h2 class="display-4 fw-bold">{{$statistics_counter->new_cus}}<span class="text-primary">+</span></h2>
					<p class="h5">Suppliers</p>
				</div>
				
			</div>
		</div>
	</section>
	<!--section contact-->
	<div class="section bg-norepeat bg-bottom bg-left bg-md-none bg-fixed section-bottom-padding-half section-top-padding" style="background-image: url('{{ asset('public/frontend/images/bg-bottom-left2.png') }}')">
		<div class="banner-appointment-form">
			<div class="container">
				<div class="row no-gutters">
					<div class="col-sm-5 col-lg-5 order-2 order-sm-2 mt-3 mt-md-0 text-center">
						<img src="{{asset('public/frontend/images/content/banner-appointment.png')}}" alt="" class="banner-appointment-form-image">
					</div>
					<div class="col-sm-7 col-lg-7 order-1 order-sm-1 d-flex">
						<div class="pt-2 pt-lg-6 px-lg-3 text-center">
							<div class="title-wrap-alt">
								<h2 class="double-title double-title--vcenter double-title--center" data-title="Appointment"><span>Make an <span class="theme-color">Appointment</span></span></h2>
							</div>
							<p>We believe in providing the best possible care to all our existing patients and welcome
								new patients to sample.</p>
							<form class="contact-form" id="contactForm" method="post" novalidate="novalidate">
								<div class="successform">
									<p>Your message was sent successfully!</p>
								</div>
								<div class="errorform">
									<p>Something went wrong, try refreshing and submitting the form again.</p>
								</div>
								<div>
									<input type="text" class="form-control" name="name" placeholder="Your name*">
								</div>
								<div class="row row-sm-space mt-15">
									<div class="col-sm-6"><input type="text" class="form-control" name="phone" placeholder="Your Phone"></div>
									<div class="col-sm-6 mt-15 mt-sm-0"><input type="text" class="form-control" name="email" placeholder="Email*"></div>
								</div>
								<div class="mt-15">
									<textarea class="form-control" name="message" placeholder="Message"></textarea>
								</div>
								<div class="mt-2 mt-lg-4">
									<button type="submit" class="btn"><i class="icon-right-arrow"></i><span>Send request</span><i class="icon-right-arrow"></i></button>
								</div>
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!--//section contact-->
</div>
<style>
	.news-card {
position: relative;
background: #fff;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
border-radius: 8px;
overflow: hidden;
text-align: center;
transition: transform 0.3s;
}

.news-card:hover {
transform: translateY(-5px);
}

.news-card-image img {
width: 100%;
height: 200px;
object-fit: cover;
}

.news-card-date {
position: absolute;
top: 10px;
left: 10px;
background: #00695c;
color: #fff;
border-radius: 4px;
padding: 5px 10px;
text-align: center;
}

.news-card-date .date-day {
font-size: 20px;
font-weight: bold;
}

.news-card-date .date-month-year {
font-size: 12px;
text-transform: uppercase;
}

.news-card-content {
padding: 15px;
}

.news-card-title {
font-size: 16px;
font-weight: bold;
margin-bottom: 10px;
}

.news-card-readmore {
font-size: 14px;
color: #00695c;
text-decoration: none;
font-weight: bold;
}

.news-card-readmore:hover {
text-decoration: underline;
}
</style>
@endsection