@extends('frontend.layouts.app')
@section('title', 'About Us')
@section('meta', 'Welcome to Om Hospital and Research Center PVt. Ltd.')
@section('content')
        	<!-- BREADCRUMB
			============================================= -->
			<div id="breadcrumb" class="division">
				<div class="container">
					<div class="row">
						<div class="col">
							<div class=" breadcrumb-holder">
                                <h4 class="h4-sm text-white">About Us</h4>
                                <!-- Breadcrumb Nav -->
                                <nav aria-label="breadcrumb">
                                    <ol class="breadcrumb">
                                    <li class="breadcrumb-item"><a href="index.html" class="text-white">Home</a></li>
                                    <li class="breadcrumb-item active text-white" aria-current="page">About Us</li>
                                    </ol>
                                </nav>
                            </div>
								<!-- Title -->
							</div>
						</div>
					</div>  <!-- End row -->
				</div>	<!-- End container -->
			</div>	<!-- END BREADCRUMB -->
            <div class="slider-overlay"></div>

			<!-- INFO-4
			============================================= -->
			<section id="info-4" class=" info-section division">
				<div class="container">
				<!-- TOP ROW -->
					<div class="top-row mb-80">
						<div class="row d-flex align-items-center">

						<!-- INFO TEXT -->
						<div class="col-lg-12">
							<div class="txt-block pc-30">
								<!-- Title -->
								<h3 class="h3-md text-h1 text-center text-uppercase">{{$about->title_np}}</h3>

                                {!!$about->content_np!!}
							</div>
						</div>	<!-- END TEXT BLOCK -->


						</div>    <!-- End row -->
					</div>	<!-- END TOP ROW -->
				</div>	   <!-- End container -->
			</section>	<!-- END INFO-4 -->

			<!-- TABS-1
			============================================= -->
            @if($timelines->isNotEmpty())
			<section id="tabs-1" class="wide-100 tabs-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 steelblue-color">Our History</h3>
						</div>
					</div>	 <!-- END SECTION TITLE -->
					</div>
				 	<div class="row">
				 		<div class="col-md-12">


				 			<!-- TABS NAVIGATION -->
							<div id="tabs-nav" class="list-group text-center">
							    <ul class="nav nav-pills" id="pills-tab" role="tablist">
                                    @foreach ($timelines as $key => $timeline)
                                    <li class="nav-item icon-xs">
								    	<a class="nav-link @if($key == '0') active @endif" id="tab{{$timeline->id}}-list" data-toggle="pill" href="#tab-{{$timeline->id}}" role="tab" aria-controls="tab-{{$timeline->id}}" aria-selected="true">
								    		 {{$timeline->year->format('Y')}}
								    	</a>
								  	</li>
                                    @endforeach
							    	<!-- TAB-1 LINK -->
								</ul>

							</div>	<!-- END TABS NAVIGATION -->


							<!-- TABS CONTENT -->
							<div class="tab-content" id="pills-tabContent">

                                @foreach ($timelines as $key => $timeline)
								<!-- TAB-1 CONTENT -->
								<div class="tab-pane fade show @if($key == '0') active @endif" id="tab-{{$timeline->id}}" role="tabpanel" aria-labelledby="tab{{$timeline->id}}-list">
									<div class="row d-flex align-items-center">


										<!-- TAB-1 IMAGE -->
										<div class="col-lg-6">
											<div class="tab-img">
												<img class="img" src="{{asset($timeline->image_path)}}" alt="tab-image" width="100%"/>
											</div>
										</div>


										<!-- TAB-1 TEXT -->
										<div class="col-lg-6">
											<div class="txt-block pc-30">

												<!-- Title -->
												<h3 class="h3-md steelblue-color">{{$timeline->title_np ? $timeline->title_np : $timeline->title}}</h3>
                                                {!!$timeline->description_np ? $timeline->description_np : $timeline->description !!}

											</div>
										</div>	<!-- END TAB-1 TEXT -->


									</div>
								</div>	<!-- END TAB-1 CONTENT -->
                                @endforeach




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


			 			</div>
				 	</div>     <!-- End row -->
				</div>     <!-- End container -->
			</section>
            @endif	<!-- END TABS-1 -->
@endsection