@extends('layouts.base')

@push('page_title')
    {{ __('Home') }}
@endpush

@section('content')
    <!-- section -->
	<section class="slider slider-main">
		<!-- #slider-main -->
		<div id="slider-main" class="carousel slide carousel-fade" data-bs-ride="carousel">
			<!-- .carousel-indicators -->
			<div class="carousel-indicators">
				<button type="button" data-bs-target="#slider-main" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
				<button type="button" data-bs-target="#slider-main" data-bs-slide-to="1" aria-label="Slide 2"></button>
			</div>
			
			<!-- .carousel-inner -->
			<div class="carousel-inner">
				<!-- .carousel-item -->
				<div class="carousel-item active" style="background-image: url(assets/img/slides/1.jpg)">
					<!-- .container -->
					<div class="container h-100 carousel-content">
						<!-- .row -->
						<div class="row align-items-center h-100">
							<!-- .col -->
							<div class="col-md-6">
								<h1><strong>Experience Personalized Care</strong></h1>
								<a href="#" data-toggle="modal" data-target="#modal_video" class="btn btn-lg btn-primary m-2">Watch Video</a>
								<a href="{{ route('services.main') }}" class="btn btn-lg btn-secondary m-2">Our Services</a>
							</div>
							{{-- <div class="col-md-6">
								<div class="widget-hotline bg-maroon">
									<table class="table table-hotline">
										<tr>
											<td>Center of Diagnostic Imaging</td>
											<td><a href="tel:0939-927-0628">0939-927-0628</a></td>
										</tr>
										<tr>
											<td>Clinical Laboratory</td>
											<td><a href="tel:0998-864-2037">0998-864-2037</a></td>
										</tr>
										<tr>
											<td>Women's Ultrasound Clinic</td>
											<td><a href="tel:0918-907-9366">0918-907-9366</a></td>
										</tr>
										<tr>
											<td>Nuclear Medicine Unit (Nucmed)</td>
											<td><a href="tel:0920-978-9141">0920-978-9141</a></td>
										</tr>
									</table>
								</div>		
							</div> --}}
						</div>
					</div>					
				</div>
				
				<!-- .carousel-item -->
				<div class="carousel-item" style="background-image: url(assets/img/slides/2.jpg)">
					<!-- .container -->
					<div class="container h-100 carousel-content">
						<!-- .row -->
						<div class="row align-items-center h-100">
							<!-- .col -->
							<div class="col-md-6">
								<h1><strong>Experience Personalized Care</strong></h1>
								<a href="#" data-toggle="modal" data-target="#modal_video" class="btn btn-lg btn-primary m-2">Watch Video</a>
								<a href="{{ route('services.main') }}" class="btn btn-lg btn-secondary m-2">Our Services</a>
							</div>
						</div>
					</div>					
				</div>
			</div>
			
			<!-- .carousel-control -->
			<button class="carousel-control-prev" type="button" data-bs-target="#slider-main" data-bs-slide="prev">
				<span class="carousel-control-prev-icon" aria-hidden="true"></span>
				<span class="visually-hidden">Previous</span>
			</button>
			
			<!-- .carousel-control -->
			<button class="carousel-control-next" type="button" data-bs-target="#slider-main" data-bs-slide="next">
				<span class="carousel-control-next-icon" aria-hidden="true"></span>
				<span class="visually-hidden">Next</span>
			</button>
		</div>
	</section>
	
	<!-- section -->
	<section class="find-a-doctor my-5 p-0">
		<!-- .container -->
		<div class="container">
			<!-- .row -->
			<form class="row  align-items-center" action="{{ route('doctors.find') }}" action="GET" role="search">
				<!-- .col -->
				<div class="col-md-3">
					<!-- .widget-title -->
					<div class="widget-title">
						<h4 class="mb-0">Find a Doctor</h4>
					</div>
				</div>
				
				<!-- .col -->
				<div class="col-md-8">
					<!-- .row -->
					<div class="row h-100 align-items-center">
						<!-- .col -->
						<div class="col-md-3">
							<input name="first_name" class="form-control" type="text" placeholder="First Name" />
						</div>

						<!-- .col -->
						<div class="col-md-3">
							<input name="last_name" class="form-control" type="text" placeholder="Last Name" />
						</div>

						<!-- .col -->
						<div class="col-md-3">
							<input name="specialty" class="form-control" list="option-specialty" id="option_specialty" placeholder="Specialty">
							<datalist id="option-specialty">
								@forelse ($doctor_specialties as $item)
									<option value="{{ $item->name }}"></option>
								@empty
									<option selected disabled>No Data Found</option>
								@endforelse
							</datalist>
						</div>
						
						<!-- .col -->
						<div class="col-md-3">
							<input name="branch" class="form-control" list="option-branch" id="option_branch" placeholder="Branch">
							<datalist id="option-branch">
								<option value="San Fernando"></option>
								<option value="Clark"></option>
							</datalist>
						</div>
					</div>
				</div>
				
				<!-- .col -->
				<div class="col-md-1">
					<button type="submit" class="btn btn-primary"><i class="fal fa-search"></i></button>
				</div>
			</form>
		</div>
	</section>
	
	<!-- .medical-departments -->
	<section class="medical-departments hidden">
		<!-- .container -->
		<div class="container">
			<!-- .row -->
			<div class="row">
				<!-- .col -->
				<div class="col-md-12">
					<!-- .medical-departments-carousel -->
					<div class="medical-departments-carousel specialization">
						<!-- .single-item text-center -->
						<div class="single-item text-center">
							<!-- .icon-holder -->
							<div class="icon-holder"><i class="fal fa-heartbeat"></i></div>
							
							<!-- .text-holder -->
							<div class="text-holder">
								<h4>Cardiology</h4>
								<p>Deals with the diagnosis and treatment of such conditions as congenital heart diseases</p>
							</div>
							<a class="readmore" href="{{ route('services.main') }}">View All</a>
						</div>

						<!-- .single-item text-center -->
						<div class="single-item text-center">
							<!-- .icon-holder -->
							<div class="icon-holder"><i class="fal fa-lungs"></i></div>
							
							<!-- .text-holder -->
							<div class="text-holder">
								<h4>Pulmonology</h4>
								<p>Deals with adult health, diagnoses and treats diseases of the respiratory system</p>
							</div>
							<a class="readmore" href="{{ route('services.main') }}">View All</a>
						</div>

						<!-- .single-item text-center -->
						<div class="single-item text-center">
							<!-- .icon-holder -->
							<div class="icon-holder"><i class="fal fa-stomach"></i></div>
							
							<!-- .text-holder -->
							<div class="text-holder">
								<h4>Gastroenterology</h4>
								<p>specialist with expertise in the disorders and diseases that affect the digestive system</p>
							</div>
							<a class="readmore" href="{{ route('services.main') }}">View All</a>
						</div>

						<!-- .single-item text-center -->
						<div class="single-item text-center">
							<!-- .icon-holder -->
							<div class="icon-holder"><i class="fal fa-tint"></i></div>
							
							<!-- .text-holder -->
							<div class="text-holder">
								<h4>Hematology</h4>
								<p>Highly trained healthcare providers who specialize in diseases of the blood and blood components</p>
							</div>
							<a class="readmore" href="{{ route('services.main') }}">View All</a>
						</div>
						
						<!-- .single-item text-center -->
						<div class="single-item text-center">
							<!-- .icon-holder -->
							<div class="icon-holder"><i class="fal fa-disease"></i></div>
							
							<!-- .text-holder -->
							<div class="text-holder">
								<h4>Infectious Diseases</h4>
								<p>Illnesses caused by harmful organisms (pathogens) that get into your body from the outside</p>
							</div>
							<a class="readmore" href="{{ route('services.main') }}">View All</a>
						</div>
						
						<!-- .single-item text-center -->
						<div class="single-item text-center">
							<!-- .icon-holder -->
							<div class="icon-holder"><i class="fal fa-viruses"></i></div>
							
							<!-- .text-holder -->
							<div class="text-holder">
								<h4>Oncology</h4>
								<p>Diagnosis and treatment of cancer, use of medical oncology, radiation oncology, and surgical oncology</p>
							</div>
							<a class="readmore" href="{{ route('services.main') }}">View All</a>
						</div>
						
						<!-- .single-item text-center -->
						<div class="single-item text-center">
							<!-- .icon-holder -->
							<div class="icon-holder"><i class="fal fa-skeleton"></i></div>
							
							<!-- .text-holder -->
							<div class="text-holder">
								<h4>Rheumatology</h4>
								<p>Diagnosis and treatment of diseases that affect the muscles, bones, joints, ligaments, and tendons</p>
							</div>
							<a class="readmore" href="{{ route('services.main') }}">View All</a>
						</div>
					</div>
				</div>    
			</div>
		</div>
	</section>
	
	<!-- section -->
	<section class="section bg-maroon section-hotline fc-white" style="background-image: url(assets/img/home/bg-hotline.jpg);">
		
		<div class="overlay bg-maroon"></div>
		
		<!-- .container -->
		<div class="container">
			<!-- .row -->
			<div class="row justify-content-around align-items-center">
				<!-- .col -->
				<div class="col-md-4">
					<!--img src="assets/img/logo-primary-inverse.png" class="img-fluid mb-3" alt="" /-->
					<h2>OLMCMC Hotlines</h2>
					<h5 class="mb-3">You can now schedule your needed procedures by calling these numbers</h5>
					<p><em>Operating Hours Monday to Saturday 8:00am – 5:00pm</em></p>
				</div>
				
				<!-- .col -->
				<div class="col-md-5">
					
					<div class="widget-hotline">
						<table class="table table-hotline">
							<tr>
								<td>Center of Diagnostic Imaging</td>
								<td><a href="tel:0939-927-0628">0939-927-0628</a></td>
							</tr>
							<tr>
								<td>Clinical Laboratory</td>
								<td><a href="tel:0998-864-2037">0998-864-2037</a></td>
							</tr>
							<tr>
								<td>Women's Ultrasound Clinic</td>
								<td><a href="tel:0918-907-9366">0918-907-9366</a></td>
							</tr>
							<tr>
								<td>Nuclear Medicine Unit (Nucmed)</td>
								<td><a href="tel:0920-978-9141">0920-978-9141</a></td>
							</tr>
						</table>
					</div>					
				</div>
			</div>
		</div>
	</section>
	
	@if ($departments->isNotEmpty())
        <section class="services">
            <!-- .container -->
            <div class="container">
                <!-- .row -->
                <div class="row section-title">
                    <!-- .col -->
                    <div class="col-md-6">
                        <h2>Our Featured Deparments</h2>
                    </div>
                </div>
                
                <!-- .row -->
                <div class="row g-4">
                    <!-- .col -->
                    @foreach ($departments as $item)
                        <div class="col-md-3">
                            <div class="featured-department-container">
                                <img src="{{ $item->image_file }}" class="featured-department-img" alt="{{ $item->name }}" />
            
                                <div class="featured-department-content">
                                    <h4>{{ $item->name }}</h4>
                                    <p title="{{ $item->description }}">{{ $item->description }}</p>
                                </div>    
                            </div>
                        </div>   
                    @endforeach
                </div>
            </div>
        </section>
    @endif
	
	{{-- <!-- .doctors -->
	<section class="doctors">
		<!-- .container -->
		<div class="container">
			<!-- .row -->
			<div class="row section-title">
				<!-- .col -->
				<div class="col-md-6">
					<h2>OLMCMC Doctors</h2>
				</div>
				
				<!-- .col -->
				<div class="col-md-6 text-right for-screen">
					<a class="btn btn-primary btn-lg fa-pull-right" href="{{ route('doctors') }}">View all Doctors</a>
				</div>
			</div>
			
			<!-- .row -->
			<div class="row deck-doctors">
				<!-- .col -->
				@foreach ($doctors as $doctor)
					<div class="col-md-3">
						<a href="{{ route('doctors.view', $doctor->slug) }}">
							<!-- .card-doctor -->
							<div class="card-doctor">
								<!-- .img-holder -->
								<div class="img-holder">
									<img src="{{ $doctor->image_file }}" alt="">
									
									<!-- .overlay-style -->
									<div class="overlay-style">
										<!-- .box -->
										<div class="box">
											<!-- .content -->
											<div class="content h-100">
												<!-- .top -->
												<div class="top">
													<h4>{{ $doctor->doctor_name }}</h4>
													<span>{{ $doctor->specialty }}</span>
													<span class="border"></span>
												</div>
												
												<!-- .bottom -->
												<div class="bottom">
													<ul class="list-unstyled doctor-details">
														<li><i class="fal fa-door-open"></i> {{ $doctor->room_number }}</li>
														<li><i class="fal fa-clock"></i> {{ $doctor->schedule }}</li>
														<li><i class="fa fa-phone" aria-hidden="true"></i> {{ $doctor->contact_number }}</li>
														@if ($doctor->email)
															<li><i class="fa fa-envelope" aria-hidden="true"></i> {{ $doctor->email }}</li>
														@endif
													</ul>    
												</div>
											</div>
										</div>
									</div>
									
									<!-- .text-holder -->
									<div class="text-holder">
										<h3>{{ $doctor->doctor_name }}</h3>
										<span>{{ $doctor->specialty }}</span>
									</div>    
								</div>
							</div>
						</a>
					</div>
				@endforeach
			</div>
			
			<!-- .for-mobile -->
			<div class="row text-center for-mobile">
				<a class="btn btn-secondary" href="{{ route('doctors') }}">View all Doctors</a>
			</div>
		</div>
	</section>  --}}

	<!-- .blog -->  
	<section class="blog">
		<!-- .container -->
		<div class="container">
            
            <div class="row g-5">
                <div class="col-xl-6">
                    <!-- .section-title -->
                    <div class="section-title">
                        <h2>FB Feeds</h2>
                    </div>

                    <div>
                        <iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fweb.facebook.com%2Fmtcarmelpampanga&tabs=timeline&width=500&height=500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" width="500" height="500" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>
        
                        {{-- <iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fweb.facebook.com%2FOLMCMCClark&tabs=timeline&width=500&height=500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" width="500" height="500" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe> --}}
                    </div>
                </div>
                <div class="col-xl-6">
                    <div class="section-title">
                        <h2>Patient Experiences</h2>
                    </div>

                    <div id="patient_experiences" class="carousel bg-maroon p-5 slide" data-bs-ride="carousel">
                        
                        <div class="carousel-inner">
                            @forelse ($patientExperiences as $key => $value)
                                <div class="carousel-item text-white {{ $loop->first ? 'active' : '' }}">
                                    <i class="fa fa-quote-left fs-4 mb-3"></i>
                                    <p>{{ $value->experience }}</p>
                                    <b> - {{ $value->name }}</b>
                                </div>
                            @empty
                                <div class="carousel-item text-white text-center active">
                                    <i class="fa fa-quote-left fs-4 mb-3"></i>
                                    <p>No patient experience data available</p>
                                </div>
                            @endforelse
                        </div>
                        
                        <div class="carousel-control">
                            <button class="carousel-control-prev" type="button" data-bs-target="#patient_experiences" data-bs-slide="prev">
                                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                <span class="visually-hidden">Previous</span>
                            </button>
                            <button class="carousel-control-next" type="button" data-bs-target="#patient_experiences" data-bs-slide="next">
                                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                <span class="visually-hidden">Next</span>
                            </button>
                        </div>
                    </div>

                    {{-- <div class="body">
                        <div class="outer-border">
                           <div class="mid-border">
                                <div class="inner-border">
                                    <img class="corner-decoration corner-left-top" src="https://i.ibb.co/4mKvK3N/corner-decoration.jpg"></img>
                                    <img class="corner-decoration corner-right-top" src="https://i.ibb.co/4mKvK3N/corner-decoration.jpg"></img>
                                    <img class="corner-decoration corner-right-bottom" src="https://i.ibb.co/4mKvK3N/corner-decoration.jpg"></img>
                                    <img class="corner-decoration corner-left-bottom" src="https://i.ibb.co/4mKvK3N/corner-decoration.jpg"></img>
                                    <img class="vertical-decoration top" src="https://i.ibb.co/JRTK9z4/horizontally-centered-vertical-decoration.png"></img>
                                    <img class="vertical-decoration bottom" src="https://i.ibb.co/JRTK9z4/horizontally-centered-vertical-decoration.png"></img>
                        
                                </div>
                           </div>
                        </div>
                    </div> --}}
                </div>
            </div>
		</div>
	</section>
	
	<!-- .blog -->
	@if (count($publications) > 0)  
		<section class="blog">
			<!-- .container -->
			<div class="container">
				<!-- .section-title -->
				<div class="section-title">
					<h2>News and Updates</h2>
				</div>			
				<!-- .row -->
				<div class="row">
					@foreach ($publications as $value)
						<div class="col-md-6">
							<!-- .single-blog-item -->
							<div class="single-blog-item">
								<!-- .img-holder -->
								<div class="img-holder">
									<img src="{{ $value->image_file }}" loading="lazy" alt="">
									
									<!-- .overlay-style-one -->
									<div class="overlay-style-one">
										<!-- .box -->
										<div class="box">
											<!-- .content -->
											<div class="content">
												<a href="{{ route('news.view', $value->permalink) }}"><i class="fal fa-plus fa-3x"></i></a>
											</div>
										</div>
									</div>
								</div>
								
								<!-- .text-holder -->
								<div class="text-holder">
									<h4 class="blog-title"><a href="{{ route('news.view', $value->permalink) }}">{{ $value->title }}</a></h4>
									
									<!-- .text -->
									<div class="text">
										<p>{{ $value->excerpt }}</p>
									</div>
									
									<!-- .meta-info -->
									<ul class="meta-info">
										<li><a href="{{ route('news.view', $value->permalink) }}"><i class="fa fa-calendar" aria-hidden="true"></i>{{ $value->date_format }}</a></li>
									</ul>
								</div>    
							</div>    
						</div>
					@endforeach
				</div>
			</div>
		</section>
	@endif
@endsection