@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">									

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

									</div>

								</div>

							</div>

							<span class="custom-text-color-1 d-block">ご予約をご希望の患者様は、下記までご連絡ください。
							</span>

							<p style="color:white">
								電話 / 携帯電話：03-6411-1234 / 012-641-1900<br>
								メール：<a style="color:white" href="mailto:info@nozomiclinic.com.my">info@nozomiclinic.com.my</a><br>
								<a href="https://wa.me/60126411900" target="_blank" style="color:white">
									<h3 class="btn btn-success btn-rounded btn-v-4 btn-h-2 text-color-light font-weight-semibold">
										<img src="{{ asset('img/whatsapp_PNG8.png') }}" height="20" >&nbsp;  私たちにメッセージ WhatsApp
									</h3>
								</a>
							</p>

						</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">

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

										<h2 class="text-color-light font-weight-semibold text-4 line-height-1 mb-0">スケジュール</h2>

									</div>

								</div>

							</div>

							<p class="text-color-light-3 mb-0">急患の患者様を除き、ご予約の方優先となっております。</p><br>

							<a href="{{ route('schedule', ['locale' => 'jp'] ) }}" class="btn btn-dark bg-dark-3 btn-rounded btn-v-4 btn-h-3 font-weight-semibold mb-3">医師スケジュール</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">

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

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

									</div>

								</div>

							</div>

							<div class="row">

								<div class="col-sm-12 text-left">

									<span class="custom-text-color-1 d-block"><span class="font-primary text-color-light text-1">月曜日から日曜日、午前09:00から午後6：00</span><br>
									※祝日の場合は、お手数をお掛けいたしますがお電話にてご確認をお願い致します。
									</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 mb-2">

						<h2 class="font-weight-bold mb-0 appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="200">サービス</h2>

					</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 mb-3">

						<h2 class="font-weight-bold text-5 mb-0 appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="200">医師＆スタッフ</h2>

					</div>

					<quote class="lead text-color-dark mb-3 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="400">アンナ医師 <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">女性であり、母親でもある私自身、今まで培ってきた知識と経験を活かし、少しでも多くの女性と共有し、同じ視点でできるだけ分かりやすく説明・アドバイスしていきたいと思っています。 </p>

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

								- アンナ医師

							</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', ['locale' => 'jp']) }}" class="btn btn-outline btn-rounded btn-primary btn-v-3 btn-h-4 font-weight-bold">私たちについて</a>

						<span class="d-block mt-3">or<a class="text-underline ml-2" href="{{ route('contactus', ['locale' => 'jp']) }}">お問い合わせ</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="img/demos/medical/carousel/carousel-2.jpg" class="img-fluid" alt="" />

								</div>

								<div>

									<img src="img/demos/medical/carousel/carousel-3.jpg" class="img-fluid" alt="" />

								</div>--}}

							</div>

						</div> 

					</div>

				</div>

			</div>

		</div>

	</section>	

</div>



@endsection



@section('css')



@endsection



@section('js')  



@endsection