@extends('frontend_eng.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 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 }}</h3>

                            {!! $about->content !!}
                        </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 }}</h3>
                                            {!! $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