@extends('frontend_eng.layouts.app')
@section('title', 'Home')
@section('meta', 'Welcome to Om Hospital and Research Center PVt. Ltd.')
@section('content')

    @if ($sliders->isNotEmpty())
        <!-- Start Slider -->
        <!-- HERO-2
           ============================================= -->
        <section id="hero-2" class="hero-section division">
            <!-- SLIDER -->
            <div class="slider blue-nav">
                <ul class="slides">
                    <!-- SLIDE #2 -->
                    @foreach ($sliders as $slider)
                        <li id="slide-2">
                            <!-- Background Image -->
                            <img src="{{ asset($slider->image_path) }}" alt="slide-background">

                            <!-- Image Caption -->
                            <div class="caption d-flex align-items-center">
                                <div class="container">
                                    <div class="row">
                                        <div class="col-md-9 col-lg-7 offset-md-3 offset-lg-5">
                                            <div class="caption-txt">

                                                <!-- Title -->
                                                <h2 class="steelblue-color"><span
                                                        class="blue-color">{{ $slider->title }}</span></h2>

                                                <!-- Text -->
                                                <p class="p-md">
                                                    {{ $slider->caption }}
                                                </p>

                                                <!-- Button -->
                                                @if ($slider->link_url)
                                                    <a href="{{ url($slider->link_url) }}"
                                                        class="btn btn-blue blue-hover">Learn
                                                        More</a>
                                                @endif

                                            </div>
                                        </div>
                                    </div> <!-- End row -->
                                </div> <!-- End container -->
                            </div> <!-- End Image Caption -->

                        </li> <!-- END SLIDE #2 -->
                    @endforeach

                    <!-- SLIDE #2 -->
                </ul>
            </div> <!-- END SLIDER -->
        </section> <!-- END HERO-2 -->
        <div class="slider-overlay"></div>
        <!-- End Slider -->
    @endif

    @if ($about)
        <!-- Start About -->
        <section id="info-4" class="info-section division about-section py-5">
            <div class="container">
                <div class="row g-5">
                    <div class="col-lg-12 py-2">
                        <div class="section-title position-relative pb-3">
                            <h1 class="text-h1 text-uppercase">About Us</h1>
                            @if ($about->slug != 'about-us')
                                <h1 class="mb-0">{{ $about->title }}</h1>
                            @endif
                        </div>
                        <p>{!! $about->meta_description !!}</p>
                    </div>
                    <div class="col-lg-12 col-md-12 col-12 vrtTour">
                        <a href="{{ route('about') }}" class="btn btn-primary py-3 px-5 mx-2 text-center">Know More</a>
                        <a href="#" class="btn btn-primary py-3 px-5 mx-2 text-center">Virtual
                            Tour</a>
                    </div>
                    {{-- <div class="col-lg-5" style="min-height: 500px;">
                        <div class="position-relative h-100">
                            <img class="position-absolute w-100 h-100 rounded wow zoomIn" data-wow-delay="0.3s"
                                src="{{ $about->image ? asset($about->image_path) : '#' }}" style="object-fit: cover;">
                        </div>
                    </div> --}}
                </div>
            </div>

        </section>
    @endif
    <!-- End About -->
    <!-- Section statistic counter -->
    @if ($services->isNotEmpty())
        <section id="services-3" class="bg-primary wide-100 services-section division">
            <div class="container">
                <!-- SECTION TITLE -->
                <div class="row">
                    <div class="col-lg-10 offset-lg-1 section-title">
                        <!-- Title 	-->
                        <h3 class="h3-md text-white text-uppercase">Our Services</h3>
                    </div>
                </div>
                <!-- SERVICES CONTENT -->
                <div class="row">
                    <div class="col-md-12">
                        <div class="owl-carousel owl-theme services-holder">
                            <!-- SERVICE BOX #1 -->
                            @foreach ($services as $service)
                                <a href="{{ route('service.detail', $service->slug) }}">
                                    <div class="sbox-3 icon-sm" style="height: 250px;">

                                        <!-- Icon -->
                                        <div class="sbox-3-icon">
                                            <img src="{{ $service->image ? asset($service->image_path) : asset('assets/images/omhospital/favicon.png') }}"
                                                alt="" width="100%">
                                        </div>

                                        <!-- Title -->
                                        <h5 class="h5-xs steelblue-color">{{ $service->name ? $service->name : '' }}</h5>

                                        <!-- Text -->
                                        <p>{!! Str::limit($service->content, 100) !!}
                                        </p>

                                    </div>
                                </a>
                            @endforeach

                        </div>
                    </div>
                </div> <!-- END SERVICES CONTENT -->


            </div> <!-- End container -->
        </section>
    @endif

    <!-- End Our Specialist -->
    @if ($doctors->isNotEmpty())
        <section id="doctors" class="doctors  wide-100 bg-lightgrey py-5">
            <div class="container">
                <!-- SECTION TITLE -->
                <div class="row">
                    <div class="col-lg-10 offset-lg-1 section-title">
                        <!-- Title 	-->
                        <h3 class="h3-md text-h1 text-uppercase">Meet Our Doctors</h3>
                    </div>
                </div>
                <div class="row">
                    @foreach ($doctors as $doctor)
                        <div class="col-lg-4 col-md-6 col-12 p-2">
                            <div class="member d-flex align-items-start">
                                <div class="">
                                    <a href="{{ route('doctor.profile', $doctor->slug) }}"><img
                                            src="{{ $doctor->image ? asset($doctor->image_path) : asset('assets/images/omhospital/favicon.png') }}"
                                            class="img" width="100%" height="150" alt="{{ $doctor->name }}"></a>
                                </div>
                                <div class="member-info">
                                    <a href="{{ route('doctor.profile', $doctor->slug) }}">
                                        <h4>{{ $doctor->name }}</h4>
                                    </a>
                                    <span>{{ $doctor->designation }}</span>
                                    <hr>
                                    <div class="">
                                        <a href="{{ route('doctor.profile', $doctor->slug) }}"
                                            class="btn btn-primary btn-sm p-2">View Profile</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>

                <div class="row">
                    <div class="col-lg-12 col-12">
                        <div class="viewAllBtn py-3">
                            <a href="{{ route('doctors') }}" class="btn btn-primary">View All</a>
                        </div>
                    </div>
                </div>

            </div>
        </section>
    @endif

    <!-- Statistic counter ends -->
    <div id="statistic-2" class="bg-lightgrey statistic-section division counts">
        <div class="container">
            <div class="row">

                <!-- STATISTIC BLOCK #4 -->
                <div class="col-md-6 col-lg-3">
                    <div class="statistic-block icon-sm wow fadeInUp" data-wow-delay="0.8s">

                        <!-- Icon  -->
                        <span class="flaticon-036-hospital-8 blue-color"></span>

                        <!-- Text -->
                        <h5 class="statistic-number"><span
                                class="count-element">{{ setting()->year_count ? setting()->year_count : '30' }}</span>
                        </h5>
                        <p class="txt-400 text-center fw-600">Years of Service</p>

                    </div>
                </div>

                <!-- STATISTIC BLOCK #2 -->
                <div class="col-md-6 col-lg-3">
                    <div class="statistic-block icon-sm wow fadeInUp" data-wow-delay="0.4s">

                        <!-- Icon  -->
                        <span class="flaticon-137-doctor blue-color"></span>

                        <!-- Text -->
                        <h5 class="statistic-number"><span
                                class="count-element">{{ setting()->doctor_count ? setting()->doctor_count : '300' }}</span>
                        </h5>
                        <p class="txt-400 text-center fw-600">Specialied Consultants</p>

                    </div>
                </div>

                <!-- STATISTIC BLOCK #3 -->
                <div class="col-md-6 col-lg-3">
                    <div class="statistic-block icon-sm wow fadeInUp" data-wow-delay="0.6s">

                        <!-- Icon  -->
                        <span class="flaticon-065-hospital-bed blue-color"></span>

                        <!-- Text -->
                        <h5 class="statistic-number"><span
                                class="count-element">{{ setting()->bed_count ? setting()->bed_count : '258' }}</span>
                        </h5>
                        <p class="txt-400 text-center fw-600">Installed Beds</p>

                    </div>
                </div>
                <!-- STATISTIC BLOCK #1 -->
                <div class="col-md-6 col-lg-3">
                    <div class="statistic-block icon-sm wow fadeInUp" data-wow-delay="0.2s">

                        <!-- Icon  -->
                        <span class="flaticon-092-clock blue-color"></span>

                        <!-- Text -->
                        <h5 class="statistic-number"><span
                                class="count-element">24/7</span>
                        </h5>
                        <p class="txt-400 text-center fw-600">Service</p>

                    </div>
                </div>





            </div> <!-- End row -->
        </div> <!-- End container -->
    </div>
    <!-- End Services -->

    @if($packages->isNotEmpty())
    			<!-- SERVICES-3
			============================================= -->
			<section id="services-3" class="wide-100 services-section division py-5">
				<div class="container">
					<!-- SECTION TITLE -->
					<div class="row">
						<div class="col-lg-10 offset-lg-1 section-title">
							<!-- Title 	-->
                            <h3 class="h3-md text-h1 text-uppercase">Health Packages</h3>

						</div>
					</div>

					<!-- TESTIMONIALS CONTENT -->
					<div class="row ">
						<div class="col-md-12">
							<div class="owl-carousel owl-theme reviews-holder">
                                @foreach ($packages as $package)
								<div class="review-2 p-0">
									<div class="review-txt text-center">
                                        <a href="{{asset($package->image_path)}}" target="_blank">
                                            <img src="{{asset($package->image_path)}}" alt="{{$package->title}}">
                                        </a>
									</div>
								</div>
                                @endforeach

							</div>
						</div>
					</div>	<!-- END TESTIMONIALS CONTENT -->


				</div>	   <!-- End container -->
			</section>	 <!-- END SERVICES-3 -->

    @endif

    <!-- START SECTION EVENT -->
    @if (isset($popups))
        <!-- Button trigger modal -->
        <button type="button" class="btn btn-primary" id="modalBtn" data-toggle="modal" data-target="#homepageModal"
            style="visibility:hidden;">
            Launch demo modal
        </button>

        <!-- Modal -->
        <div class="modal fade" id="homepageModal" tabindex="-1" role="dialog" aria-labelledby="homepageModalLabel"
            aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h6>{{ $popups->title }}</h6>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body p-0">
                        <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
                            <div class="carousel-inner">
                                {{-- @foreach ($popups as $popup) --}}
                                    <div class="carousel-item active">
                                        <a href="{{ $popups->video_url ? $popups->video_url : '#' }}" target="_blank">
                                            <img src="{{ asset($popups->image_path) }}" class="d-block w-100"
                                                alt="{{ $popups->title }}">
                                        </a>
                                    </div>
                                {{-- @endforeach --}}

                            </div>
                            {{-- <a class="carousel-control-prev" href="#carouselExampleControls" role="button"
                                data-slide="prev">
                                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                <span class="sr-only">Previous</span>
                            </a>
                            <a class="carousel-control-next" href="#carouselExampleControls" role="button"
                                data-slide="next">
                                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                <span class="sr-only">Next</span>
                            </a> --}}
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
    @endif

@endsection
@push('script')
    <script>
        $(document).ready(function() {
            $("#modalBtn").trigger('click');
        });
    </script>
@endpush