@extends('front.app')

@section('content')
<section data-aos="fade-up" class="inner_banner">
	<img class="img-fluid w-100 d-none d-md-block" src="{{asset('front/images/patient_story_banner.webp')}}" alt="banner">
	<img class="img-fluid w-100 d-block d-md-none" src="{{asset('front/images/patient_story_mobbanner.webp')}}" alt="banner">
	<div class="innerbanner_text"></div>
	@include('front.banner_base')
</section>
<!--************************************* patient_story *************************************-->
<section class="patient_story">
	<div class="container">
		<div class="row">
			<div data-aos="fade-up" class="col-12 text-center">
				<h1 class="mb-5">Patient Story</h1>
			</div>
		</div>
		<div class="row">
			<div data-aos="fade-up" class="col-12">
				<h5 class="mb-3">{{$blog->name}} - {{$blog->age}} Yrs {{$blog->diagnosis_short == '.' ? '' : '– '.$blog->diagnosis_short}}</h5>

				@if($blog->diagnosis != '.')
				<h5 class="mb-2">Diagnosis</h5>
				<h6 class="mb-3">{{$blog->diagnosis}}</h6>
				@endif
			</div>

			@foreach($blog->diagnosis_heading as $atribute)
			<div data-aos="fade-up" class="col-lg-3 col-sm-6 col-12 mb-3">
				<div class="w-100 h-100 float-start bg-white p-3 rounded-4">
					<h5 class="mb-3">{{$atribute->name}}</h5>
					<ul class="w-100 float-start ps-3">
						@foreach($atribute->options as $opt)
						<li class="mb-3">{{$opt->name}}</li>
						@endforeach
					</ul>
				</div>
			</div>
			@endforeach
			
		</div>
	</div>
</section>
@if(count($blog->galleries))
<section class="patient_story_swiper">
	<div data-aos="fade-up" class="container">
		<h2 class="text-center mb-md-5 mb-4">Medical Report</h2>
		<div class="swiper swiper4">
			<div class="swiper-wrapper">

			@foreach($blog->galleries as $gal)
				<div class="swiper-slide">
					<a data-src="{{asset('assets/images/'.$gal->photo)}}" data-fancybox="gallery" data-caption="">
						<img class="img-fluid d-block w-100 rounded-3" src="{{asset('assets/images/'.$gal->photo)}}" alt="Patient Story">
					</a>
				</div>
				@endforeach
			</div>
		</div>
	</div>
</section>
@endif

<div class="w-100 float-start text-center back_btn">
	<a class="send_btn trs" href="{{route('front.patient_story')}}"><i class="fa-sharp fa-solid fa-arrow-left me-3"></i> Patient Story</a>
</div>
@endsection

@section('page_js')
<script type="text/javascript" src="{{asset('front/js/swiper-bundle.min.js')}}"></script>
<script>
	var swiper4 = new Swiper('.swiper4', {
		slidesPerView: 1,
		spaceBetween: 30,
      	grabCursor: false,
		loop: true,
		autoplay: {
			delay: 3000,
			disableOnInteraction: false,
		},
		breakpoints: {
			100: {slidesPerView: 2},
        	450: {slidesPerView: 3},
        	767: {slidesPerView: 4},
        	991: {slidesPerView: 4},
			1199: {slidesPerView: 6},
		},
	});
</script>
<script type="text/javascript" src="{{asset('front/js/fancybox.umd.js')}}"></script>
<script>
	Fancybox.bind('[data-fancybox]', {
		Image: {
			zoom: false,
		},
		showClass: "fancybox-zoomIn",
		hideClass: "fancybox-zoomOut",
	});
</script>


@endsection