@extends('layouts.app')
@section('content')

<div role="main" class="main">

	<div class="slider-container slider-container-height-600 rev_slider_wrapper">

		<div id="revolutionSlider" class="slider rev_slider" data-version="5.4.7" data-plugin-revolution-slider data-plugin-options="{'delay': 9000, 'gridwidth': [1140,960,720,540], 'gridheight': [600,600,600,600], 'disableProgressBar': 'on', 'responsiveLevels': [4096,1200,992,576], 'navigation' : {'arrows': { 'enable': true, 'style': 'slider-arrows-style-1 slider-arrows-dark' }, 'bullets': {'enable': false, 'style': 'bullets-style-1', 'h_align': 'center', 'v_align': 'bottom', 'space': 7, 'v_offset': 35, 'h_offset': 0}}}">

			<ul>
				@if(isset($sliders) && count($sliders) > 0)
					@foreach($sliders as $key => $value)
					<li data-transition="fade">
						<img src="{{ url("uploads/sliders/".$value->image) }}"  
							alt=""
							data-bgposition="center center" 
							data-bgfit="cover" 
							data-bgrepeat="no-repeat" 
							class="rev-slidebg">

						<div class="tp-caption text-color-{{ $value->color }} font-primary font-weight-bold"
							data-x="['left','left','left','30']"
							data-y="center" data-voffset="['-95','-95','-95','-90']"
							data-start="1900"
							data-fontsize="['28','28','28','28']"
							data-transform_in="y:[100%];opacity:0;s:1000;"
							data-transform_out="y:[100%];opacity:0;s:1000;">{{ $value->title2 }}</div>

						<div class="tp-caption text-color-{{ $value->color }} font-primary font-weight-bold"
							data-frames='[{"delay":800,"speed":2000,"frame":"0","from":"sX:1.5;opacity:0;fb:20px;","to":"o:1;fb:0;","ease":"Power3.easeInOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;fb:0;","ease":"Power3.easeInOut"}]'
							data-x="['left','left','left','30']"
							data-y="center" data-voffset="['-40','-40','-40','-40']"
							data-fontsize="['77','77','77','47']"
							data-lineheight="['60','60','60','41']">{{ $value->title }}</div>

						<div class="tp-caption text-color-{{ $value->color }} font-primary font-weight-thin"
							data-x="right" data-hoffset="['578','395','155','167']"
							data-y="center" data-voffset="['15','15','15','10']"
							data-start="1900"
							data-fontsize="['28','28','28','28']"
							data-transform_in="y:[-100%];opacity:0;s:1000;"
							data-transform_out="y:[-100%];opacity:0;s:1000;">{{ $value->title3 }}<br>{{ $value->title4 }}</div>					

					</li>	
					@endforeach
				@endif
			</ul>

		</div>

	</div>

	<section class="section section-content-pull-top py-0">

		<div class="container custom-max-width-1">

			<div class="row align-items-stretch align-items-lg-center justify-content-center">

				<div class="col-md-6 col-lg-4 p-0 appear-animation" data-appear-animation="fadeInLeftShorter" data-appear-animation-delay="400">

					<div class="card bg-primary border-0 min-height-200 h-100 py-2">

						<div class="card-body text-center text-lg-right p-4 d-flex flex-column justify-content-center">

							<div class="icon-box icon-box-reverse icon-box-style-1 align-items-center justify-content-center justify-content-lg-end mb-4 pb-2">

								<div class="icon-box-icon pt-1">									

									<img width="45" src="{{ asset('img/icons/icon-3.svg') }}" alt="" data-icon data-plugin-options="{'color': '#FFF', 'animated': true, 'delay': 600}" />

								</div>

								<div class="icon-box-info text-left">

									<div class="icon-box-info-title">

										<span class="icon-box-sub-title text-color-light">MAKE AN</span>

										<h2 class="text-color-light font-weight-semibold text-4 line-height-1 mb-0">Appointment</h2>

									</div>

								</div>

							</div>

							<span class="custom-text-color-1 d-block">Call us at <font style="color:white">(03) 6411 1234</font> or <font style="color:white">(012) 641 1900</font></span>


							<p class="custom-text-color-1 mb-0 mt-2">or email us at <a href="mailto:info@nozomiclinic.com.my" style="color:white">info@nozomiclinic.com.my</a></p>
							<a href="https://wa.me/60126411900" target="_blank" style="color:white">
								<h3 class="btn btn-success btn-rounded btn-v-4 btn-h-2 font-weight-semibold">
									<img src="{{ asset('img/whatsapp_PNG8.png') }}" height="20" >&nbsp;  Message us on WhatsApp
								</h3>
							</a>
						</div>

					</div>

				</div>

				<div class="col-md-6 col-lg-4 z-index-1 p-0 appear-animation" data-appear-animation="fadeInUpShorter">

					<div class="card bg-dark-2 border-0">

						<div class="card-body text-center px-4 py-5">

							<div class="icon-box icon-box-style-1 align-items-center justify-content-center mb-4 pb-2">

								<div class="icon-box-icon pt-1">

									<img width="45" src="{{ asset('img/demos/medical/icons/appointment.svg') }}" alt="" data-icon data-plugin-options="{'color': '#FFF', 'animated': true, 'delay': 600}" />

								</div>

								<div class="icon-box-info text-left">

									<div class="icon-box-info-title">

										<span class="icon-box-sub-title text-color-light">VIEW DOCTORS</span>

										<h2 class="text-color-light font-weight-semibold text-4 line-height-1 mb-0">Timetable</h2>

									</div>

								</div>

							</div>

							<p class="text-color-light-3 mb-0">You are encouraged to request for appointment as priorities will be given to appointment cases first, except for Emergency cases.</p><br>

							<a href="#" class="btn btn-dark bg-dark-3 btn-rounded btn-v-4 btn-h-3 font-weight-semibold mb-3">DOCTORS TIMETABLE</a>

							

						</div>

					</div>

				</div>

				<div class="col-md-9 col-lg-4 p-0 appear-animation" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="400">

					<div class="card bg-primary border-0 min-height-200 py-2">

						<div class="card-body p-4">

							<div class="icon-box icon-box-style-1 align-items-center justify-content-center justify-content-lg-start mb-4 pb-2">

								<div class="icon-box-icon pt-2">

									<img width="45" src="{{ asset('img/demos/medical/icons/opening-hours.svg') }}" alt="" data-icon data-plugin-options="{'color': '#FFF', 'animated': true, 'delay': 600}" />

								</div>

								<div class="icon-box-info">

									<div class="icon-box-info-title">

										<span class="icon-box-sub-title text-color-light">CLINIC</span>

										<h2 class="text-color-light font-weight-semibold text-4 line-height-1 mb-0">Hours</h2>

									</div>

								</div>

							</div>

							<div class="row">

								<div class="col-sm-12 justify-content-center py-12 my-12 py-sm-0 my-sm-0">

									<span class="custom-text-color-1 d-block">We are open <font style="color:white">7 days</font> a week</span>

									<span class="font-primary text-color-light text-1">9.30 AM - 6.30 PM</span>

								</div>



								{{--

								<div class="col-sm-4 custom-border-style-1 text-center py-4 my-4 py-sm-0 my-sm-0">

									<span class="custom-text-color-1 d-block">SATURDAY</span>

									<span class="font-primary text-color-light text-1">8AM - 11AM</span>

								</div>

								<div class="col-sm-4 text-center">

									<span class="custom-text-color-1 d-block">SUNDAY</span>

									<span class="font-primary text-color-light text-1">CLOSED</span>

								</div>

								--}}

							</div>

						</div>

					</div>

				</div>

			</div>

		</div>

	</section>

	<section class="section">

		<div class="container">

			<div class="row justify-content-center text-center">

				<div class="col-md-8 col-lg-7">

					{{--<div class="overflow-hidden">

						<span class="d-block top-sub-title text-color-primary appear-animation" data-appear-animation="maskUp">LOREM IPSUM DOLOR SIT</span>

					</div>--}}

					<div class="overflow-hidden mb-2">

						<h2 class="font-weight-bold mb-0 appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="200">我们提供的服务</h2>

					</div>

					{{--<div class="overflow-hidden mb-5">

						<p class="lead pb-xlg mb-0 appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="400">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus blandit massa enim. Nullam id varius nunc id varius nunc. </p>

					</div>--}}

				</div>

			</div>

			<div class="row">
				@if(isset($entities) && count($entities) > 0)
					@foreach($entities as $key => $value)
							<div class="col-md-6 col-lg-4 mb-4 mb-md-0 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="400">

								<div class="card border-0">

									<div class="card-body text-center p-2">

										<div class="image-frame mb-4">

											<img src="{{ asset('img/clinic/doctor-icon.png') }}" class="img-fluid rounded-circle" alt="">

										</div>										

										@if(isset($value->service) && count($value->service) > 0)
										<div class="card">
											<div class="card-header accordion-header" role="tab" id="tags">
												<h3 class="text-3 mb-0">	 
								                            
													<a href="#" data-toggle="collapse" data-target="#toggleTags{{ $value->id}}" aria-expanded="true" aria-controls="toggleTags" class=""> 
														<font style="color:#0000CD">{!! $value->service_name !!}</font> 
													</a>

												</h3>

											</div>
										@else
										<div>
											<h3 class="text-3 mb-0">	 
							                            
												 {!! $value->service_name !!}

											</h3>
										@endif

											@if(isset($value->service) && count($value->service) > 0)
											<div id="toggleTags{{ $value->id}}" class="accordion-body collapse hide" role="tabpanel" aria-labelledby="tags" style="">
												<div class="card-body">
													<ul class="list-inline">														
								                        @foreach($value->service as $k => $v)
								                            @if($v->delete_status != 1)
								                            
								                           	<li class="list-inline-item"><a href="#" class="badge badge-dark badge-sm badge-pill px-3 py-2 mb-2">{!! $v->service_details !!} </a></li>
								                            @endif
								                        @endforeach

													</ul>
												</div>
											</div>
											@endif
										</div>							

									</div>

								</div>

							</div>
                    @endforeach
				@endif
			</div>

		</div>

	</section>

	<section class="section bg-light-5">

		<div class="container">

			<div class="row align-items-center">

				<div class="col-lg-6 pb-5 mb-5 pb-md-0 mb-lg-0">

					{{--<div class="overflow-hidden">

						<span class="d-block top-sub-title text-color-primary appear-animation" data-appear-animation="maskUp">LOREM IPSUM DOLOR SIT</span>

					</div>--}}

					<div class="overflow-hidden mb-3">

						<h2 class="font-weight-bold text-5 mb-0 appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="200">Our Beloved Staff & Doctor</h2>

					</div>

					<quote class="lead text-color-dark mb-3 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="400">Dr Anna Sim <small>MBBChBAO (NUI)</small>

					</quote>

					<p class="text-color-light-3 mb-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="600">

						<blockquote class="blockquote blockquote-style-1 blockquote-primary">

							<p class="mb-4 font-tertiary font-italic">Being Female and a mother myself, my passion is to help all other ladies and mothers out there, and to share my knowledge and experiences.</p>

							<footer class="blockquote-footer blockquote-footer-style-1">

								- Dr Anna Sim

							</footer>

						</blockquote>

					</p>

					<div class="d-block d-sm-inline-block text-center appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="800">

						<a href="{{ route('aboutus') }}" class="btn btn-outline btn-rounded btn-primary btn-v-3 btn-h-4 font-weight-bold">MORE ABOUT US</a>

						<span class="d-block mt-3">or<a class="text-underline ml-2" href="{{ route('contactus') }}">CONTACT US</a></span>

					</div>

				</div>

				<div class="col-8 col-md-10 col-lg-5 ml-auto ml-md-auto mb-5 mb-lg-0 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="400">

					<div class="bg-primary position-relative mx-auto" data-plugin-float-element data-plugin-options="{'startPos': 'none', 'speed': 10, 'transition': true, 'style': 'max-width: 250px;'}">

						<div class="rect-size"></div>

						<div class="position-absolute" data-plugin-float-element data-plugin-options="{'startPos': 'none', 'speed': 8.5, 'transition': true, 'style': 'bottom: -20px; left: -56%; width: 150%;'}">

							<div class="owl-carousel owl-theme dots-style-3 mb-0" data-plugin-options="{'items': 1, 'dots': true, 'nav': false}">

								<div>

									<img src="{{ asset('img/clinic/doc1_anna.jpg') }}" width="300" class="img-fluid" alt="" />

								</div>

								{{--<div>

									<img src="{{ asset('img/demos/medical/carousel/carousel-2.jpg') }}" class="img-fluid" alt="" />

								</div>

								<div>

									<img src="{{ asset('img/demos/medical/carousel/carousel-3.jpg') }}" class="img-fluid" alt="" />

								</div>--}}

							</div>

						</div> 

					</div>

				</div>

			</div>

		</div>

	</section>

	{{--<section class="section">

		<div class="container">

			<div class="row text-center">

				<div class="col">

					<div class="overflow-hidden">

						<span class="d-block top-sub-title text-color-primary appear-animation" data-appear-animation="maskUp">OUR BLOG</span>

					</div>

					<div class="overflow-hidden mb-5">

						<h2 class="font-weight-bold mb-0 appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="200">Latest News</h2>

					</div>

				</div>

			</div>

			<div class="row mb-5">

				<div class="col-md-4 mb-4 mb-md-0 appear-animation" data-appear-animation="fadeInLeftShorter" data-appear-animation-delay="800">

					<article class="blog-post">

						<header class="mb-2">

							<div class="image-frame hover-effect-2">

								<a href="blog-single-post.html" class="d-block">

									<img src="{{ asset('img/demos/medical/blog/blog-1.jpg') }}" class="img-fluid mb-3" alt="" />

								</a>

							</div>

							<h3 class="font-weight-bold text-4 mb-1"><a href="blog-single-post.html" class="text-color-dark">Diagnosis for a better life</a></h3>

							<i class="far fa-clock mt-1 text-color-primary"></i>

							<time class="font-tertiary text-1" datetime="2018-01-17">Jan 17, 2018</time>

						</header>

						<p>Phasellus blandit massa enim. Nullam id varius nunc. Lorem ipsum dolor sit amet, consectetur adipiscing...</p>

					</article>

				</div>

				<div class="col-md-4 mb-4 mb-md-0 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="400">

					<article class="blog-post">

						<header class="mb-2">

							<div class="image-frame hover-effect-2">

								<a href="blog-single-post.html" class="d-block">

									<img src="{{ asset('img/demos/medical/blog/blog-2.jpg') }}" class="img-fluid mb-3" alt="" />

								</a>

							</div>

							<h3 class="font-weight-bold text-4 mb-1"><a href="blog-single-post.html" class="text-color-dark">Medical Scientists</a></h3>

							<i class="far fa-clock mt-1 text-color-primary"></i>

							<time class="font-tertiary text-1" datetime="2018-01-17">Jan 17, 2018</time>

						</header>

						<p>Phasellus blandit massa enim. Nullam id varius nunc. Lorem ipsum dolor sit amet, consectetur adipiscing...</p>

					</article>

				</div>

				<div class="col-md-4 appear-animation" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="800">

					<article class="blog-post">

						<header class="mb-2">

							<div class="image-frame hover-effect-2">

								<a href="blog-single-post.html" class="d-block">

									<img src="{{ asset('img/demos/medical/blog/blog-3.jpg') }}" class="img-fluid mb-3" alt="" />

								</a>

							</div>

							<h3 class="font-weight-bold text-4 mb-1"><a href="blog-single-post.html" class="text-color-dark">Team of Doctors</a></h3>

							<i class="far fa-clock mt-1 text-color-primary"></i>

							<time class="font-tertiary text-1" datetime="2018-01-17">Jan 17, 2018</time>

						</header>

						<p>Phasellus blandit massa enim. Nullam id varius nunc. Lorem ipsum dolor sit amet, consectetur adipiscing...</p>

					</article>

				</div>

			</div>

			<div class="row text-center">

				<div class="col">

					<a href="blog-grid-right-sidebar.html" class="btn btn-outline btn-primary btn-h-4 btn-v-3 font-weight-semibold text-0">VIEW BLOG</a>

				</div>

			</div>

		</div>

	</section>

	<section class="section pt-0">

		<div class="container">

			<div class="row mb-5">

				<div class="col">

					<div class="d-flex align-items-center justify-content-center">

						<hr class="w-100">

						<h2 class="text-color-primary font-secondary text-1 absolute-xy-center bg-light px-4">INSURANCE BRANDS</h2>

					</div>

				</div>

			</div>

			<div class="row justify-content-center align-items-center appear-animation" data-appear-animation="fadeInUpShorter">

				<div class="col-4 col-md-1-5 text-center text-md-left">

					<img src="{{ asset('img/logos/logo-7.png') }}" width="170" alt="" class="img-fluid">

				</div>

				<div class="col-4 col-md-1-5 text-center">

					<img src="{{ asset('img/logos/logo-8.png') }}" width="80" alt="" class="img-fluid">

				</div>

				<div class="col-4 col-md-1-5 text-center">

					<img src="{{ asset('img/logos/logo-24.png') }}" width="100" alt="" class="img-fluid">

				</div>

				<div class="col-4 col-md-1-5 text-center text-md-right mt-5 mt-md-0">

					<img src="{{ asset('img/logos/logo-10.png') }}" width="140" alt="" class="img-fluid">

				</div>

				<div class="col-4 col-md-1-5 text-center text-md-right mt-5 mt-md-0">

					<img src="{{ asset('img/logos/logo-11.png') }}" width="100" alt="" class="img-fluid">

				</div>

			</div>

		</div>

	</section>

	--}}

</div>



@endsection



@section('css')



@endsection



@section('js')  



@endsection