@extends('layouts.default')
@section('content')
<section id="banner"> 
	<!-- Slider -->
    	<div id="main-slider" class="flexslider">
        	<ul class="slides">
            	<li>
                	<img src="img/slides/slider-2.jpg" alt="" />
                	<div class="flex-caption firstSlide">
						<div class="col-md-6">
							<h3 class="sliderText">Pakistan's # 1 Skin and Vein Treatment Experts</h3>
							<div class="p-l-20">
							<a href="{{url('/schedule-online')}}"><button class="btn btn-lg btn-primary headerbutton">Schedule Online Now</button></a>
							</div>
						</div>
                    	
                	</div>
				  </li>
				  <li>
                	<img src="img/slides/varicose_vein.jpg" alt="" />
                	<div class="flex-caption firstSlide">
						<div class="col-md-6">
							<h3 class="sliderText2">Your Road To Mind and Body Wellness</h3>
							<a href="{{url('/schedule-online')}}"><button class="btn btn-lg btn-primary headerbutton2">Schedule Online Now<br>To Discover</button></a>
						</div>
                    	
                	</div>
              	</li>
              	
            </ul>
        </div>
	<!-- end slider --> 
	</section>
	<div class="question-slides">
	<!-- Full-width slides/quotes -->
		<div class="mySlides center-questions" >
			<h1 class="questions-head">Assess Your vein health in 5 easy Questions</h1>
			<h3>Do you wear long pants to cover your bulging, discolored veins?</h3>
			<button class="yes-no-button" onClick="plusSlides(1)">Yes</button>
			<button class="yes-no-button" onClick="plusSlides(1)">No</button>
		</div>

		<div class="mySlides center-questions" style="display:none;">
			<h3>Is your sleep interrupted by restless legs or discomfort?</h3>
			<button class="yes-no-button" onClick="plusSlides(1)">Yes</button>
			<button class="yes-no-button" onClick="plusSlides(1)">No</button>
		</div>
		<div class="mySlides center-questions" style="display:none;">
			<h3>Have you experienced itching or burning?</h3>
			<button class="yes-no-button" onClick="plusSlides(1)">Yes</button>
			<button class="yes-no-button" onClick="plusSlides(1)">No</button>
		</div>
		<div class="mySlides center-questions" style="display:none;">
			<h3>Have your feet become too swollen to wear your boots or shoes comfortably?</h3>
			<button class="yes-no-button" onClick="plusSlides(1)">Yes</button>
			<button class="yes-no-button" onClick="plusSlides(1)">No</button>
		</div>
		<div class="mySlides center-questions" style="display:none;">
			<h3>Do you avoid activities that involve standing for long periods of time?</h3>
			<button class="yes-no-button" onClick="plusSlides(1)">Yes</button>
			<button class="yes-no-button" onClick="plusSlides(1)">No</button>
		</div>
		<div class="mySlides center-questions" style="display:none;">
			  <h3>If any of these was yes then you need a consultation.</h3>
			  <a href="{{url('/schedule-online')}}"><button class="btn btn-lg btn-primary headerbutton2">Schedule Your Consultation<br>Now</button></a>
		</div>
		<!-- Next/prev buttons -->
		<div class="aligncenter"></div>
		<!-- Dots/bullets/indicators -->
	</div>


	<section class="dishes first-sec">
		<div class="container p-b-2">
			<div class="row">
				<div class="col-md-12">
					<div class="alignleft"><h2 class="aligncenter landing-head">Why Skin Scape Clinic?</h2><p class="landing-para">The Skin Scape Clinics is a state-of-the-art clinic providing world-class assessment and treatment by highly trained and experienced U.S.A. Board certified doctors and a dedicated team of professionals. Our patients and their families are always our top priority. </p></div>
					<br/>
				</div>
			</div>
		</div>
	</section>
	<!-- Slideshow container -->

	<section id="content" class="gray-background"> 
		<div class="container p-b-2">
			<div class="row">
				<div class="col-md-12">
					<div class="alignleft"><h2 class="aligncenter landing-head">What We Offer?</h2><p class="landing-para">We offer patient-centered service. People who come to the Skin Scape Clinic can expect polite, friendly helpful staff members who relate to each person as an individual, recognizing their history, relationships, culture, and needs. We go the extra mile to meet their expectations. </p></div>
					<br/>
				</div>
			</div>
			<div class="row">
				@foreach($services as $ser)
					<div class="custom-w-20 servicesBtn">
						<a href="{{$ser->link_url}}">
							<button>   
								<div class="card servicesCard">
									<div class="card-body text-center">
										<div class="bg-services-title">
											<h4 class="card-title services-card-title">{{$ser->title}}</h4>
										</div>
										
										<img class="servicesImg" src="{{$ser->url}}" alt="" />
									</div>
								</div>
							</button>
						</a>
					</div>
				@endforeach
			</div>
		</div>
	</section>
	<section> 
		<div class="container">
			<section class="dishes">
				<div class="row">
					<div class="col-md-12">
						<div class="aligncenter"><h2 class="aligncenter landing-head">Before & After</h2></div>
							<!--cards-->
							<div class="row aligncenter">
								@foreach($beforeAfter as $bef)
									<div class="col-sm-3">
										<div class="card beforeAfter">
											<div class="card-body">
												<h3>{{$bef->title}}</h3>
												<img src="{{$bef->url}}" alt=""/>
											</div>
										</div>
									</div>
								@endforeach
								
					  		</div>
							<!--cards end-->
							<br/>
						</div>
					</div>
				</div>
			</section>
		</div>
	</section>
	<section class="section-padding gray-background">
		<div class="container">
			<div class="row">
				<div class="col-md-6 col-sm-6">
					<div class="about-image">
						<h2 class="landing-head">Our Clinic</h2>
						<!-- image slider -->
						<div class="flexslider2" style="max-height:200px;">
							<ul class="slides">
								@foreach($clinic as $cli)
									<li>
										<img src="{{$cli->url}}" class="stop" alt="" />
									</li>
								@endforeach
							</ul>
							
								
						</div>
						<!-- end image slider -->
					</div>
				</div>
				<div class="col-md-6 col-sm-6 parallel-video">
					<div class="card">
						<div class="card-body aligncenter">
							<div class="card-text">
								<h2>MAKE VEIN HEALTH YOU #1 PRIORITY.</h2>
								<h2>CONTACT US TODAY !</h2>
								<h3>Untreated vein diseases can become a serious medical condition leadig to life-threatening complications</h4>
								<div class="row">
									<div class="col-md-12 aligncenter">
									<a href="{{url('/conditions/poorcirculation')}}"><button class="btn btn-primary">Learn More</button>		
									</div>
								</div>
								<div class="row">
									<div class="col-md-6 aligncenter">
										<a style="width:100%;" class="btn btn-primary" href="tel:03100404444"><i class="fa fa-3x fa-mobile"></i>  0310-040-4444</a>
									</div>
									<div class="col-md-6 aligncenter">
										<a href="{{url('/schedule-online')}}"><button style="width:100%;" class="btn btn-primary">Schedule Online</button></a>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>	  
	<section class="feedback-row">
		<div class="container">
			<div class="row">
				<div class="col-md-12">
					<div class="aligncenter"><h2 class="aligncenter landing-head">Patient Feedback</h2></div>
						<!--cards-->
						<div class="row">
							@foreach($feedback as $feed)
								<div class="col-md-3 col-sm-12">
									<div class="card bg-feedback">
										<div class="card-body p-2">
											<div>
												<h3 class="feedback-head logo-color">{{$feed->customer_name}}</h3>
												<!-- <small class="feedback logo-color">{{date('F j, yy',strtotime($feed->feedback_date))}}</small> -->
											</div>
											<p class="feedback-content">{{$feed->feedback_content}}</p>
											
										</div>
										<div class="feedback-footer">
											<div class="aligncenter feedback-stars">
												<span class="fa fa-star fa-lg checked"></span>
												<span class="fa fa-star fa-lg checked"></span>
												<span class="fa fa-star fa-lg checked"></span>
												<span class="fa fa-star fa-lg checked"></span>
												<span class="fa fa-star fa-lg checked"></span>
											</div>
										</div>
									</div>
								</div>
							@endforeach
						</div>
						<!--cards end-->
						<br/>
					</div>
				</div>
			</div>
		</div>
	</section>
	<section class="section-padding">
		<div class="container">
			<div class="row">
				<div class="col-md-6 col-sm-6">
					<div class="about-text">
						<div class="widget">
							<h2>Our Contact</h2>
							<p class="landing-para" style="margin:0!important;"><strong>221-G1</strong></p>
							<p  class="landing-para">Johar Town, Near Doctors Hospital<br>
							Lahore, Pakistan.</p>
							<p  class="landing-para">
								<i class="icon-phone"></i> 0310-040-4444 <br>
								<i class="icon-envelope-alt"></i>skinscapeusa@gmail.com
							</p>
						</div>
					</div>
				</div>
				<div class="col-md-6 col-sm-6 map map-padding">
					<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3402.6466635212373!2d74.27611131547476!3d31.47890455633735!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zMzHCsDI4JzQ0LjAiTiA3NMKwMTYnNDEuOSJF!5e0!3m2!1sen!2s!4v1588756116886!5m2!1sen!2s" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
				</div>
			</div>
		</div>
	</section>	  
	
	<script type="text/javascript">
		var slideIndex = 1;
		showSlides(slideIndex);
		function plusSlides(n) {
  			showSlides(slideIndex += n);
		}
		function currentSlide(n) {
			showSlides(slideIndex = n);
		}
		function showSlides(n) {
			var i;
			var slides = document.getElementsByClassName("mySlides");
			var dots = document.getElementsByClassName("dot");
			if (n > slides.length) {slideIndex = 1}
			if (n < 1) {slideIndex = slides.length}
			for (i = 0; i < slides.length; i++) {
				slides[i].style.display = "none";
			}
			for (i = 0; i < dots.length; i++) {
				dots[i].className = dots[i].className.replace(" active", "");
			}
			slides[slideIndex-1].style.display = "block";
			// dots[slideIndex-1].className += " active";
		}
		
	</script>
@endsection