@extends('frontend.layouts.main')
@section('content')
<style>
/* .card {
    height: 730px;
}
.card-description {
    height: 270px;
} */
</style>
<section class="page-about">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <h3 class="page-about-h">Timeline</h3>
            </div>
        </div>
    </div>
</section>
<section class="Blog-section mt-0 mb-0">
    <div class="container">
      <div class="row">
      </div>
      <div class="row justify-content-center mt-0">
        <div class="col-lg-10">
          <div class="row ">
            @foreach ($timelines as $timeline)
                <div class="col-lg-6">
                    <div class="card mb-5">
                        <!--<img src="{{ asset($timeline->thumbnail)}}" class="card-img-top" alt="...">-->
                        <!--<img src="{{ Storage::disk('s3')->url($timeline->thumbnail) }}" class="card-img-top" alt="...">-->
                        <img src="{{ s3_url($timeline->thumbnail) }}" class="card-img-top" alt="...">
                        
                        <div class="card-body blog">
                        <div class="d-flex">
                            <!-- <span class=""> <i class="fa-solid fa-calendar-days blog"></i></span>
                            <p class=" icon-name">{{date("M d Y",strtotime($timeline->created_at))}}</p> -->

                            <!-- <span class=""><i class="fa-solid fa-user admin"></i></span>
                            <p class="icon-name">{{$timeline->title}}</p> -->
                        </div>
                        <hr class="line mt-0 mb-0">
                        <div class="card-heading text-center">
                            <a href="{{$timeline->link}}" target="_blank">
                                {{$timeline->title}}
                            </a>
                        </div>
                        <div class="card-description text-center mt-3">
                            <p class="description">{{ substr(strip_tags($timeline->description), 0, 200) }}{{ strlen(strip_tags($timeline->description)) > 200 ? '...' : '' }}
                                <span class="read-more" style="display: {{ strlen(strip_tags($timeline->description)) > 200 ? 'inline' : 'none' }}">Read more</span>
                            </p>
                            <p class="full-description" style="display: none;">{!! $timeline->description !!}</p>
                        </div>
                        <!-- <hr class="line mt-0 mb-0"> -->
                        <!-- <div class="read-more text-center mt-3">
                            <a href="{{$timeline->slug}}" target="_blank" class="read-btn btn btn-outline-primary">Read More</a>
                        </div> -->
                        </div>
                    </div>
                </div>
            @endforeach
            <div class="col-md-12 mt-4 d-flex justify-content-center">
                {{$timelines->links('pagination::bootstrap-4')}}
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!--dynmic office section-->
  <!--<section class="">-->
  <!--  <div class="container">-->
  <!--    <div class="row">-->
  <!--      <div class="col-md-12 text-center mt-3 mb-3">-->
  <!--          <div class="services text-center">My Office</div>-->
  <!--      </div>-->
  <!--    </div>-->
  <!--    <div class="row justify-content-center mt-0">-->
  <!--      <div class="col-lg-10">-->
  <!--        <div class="row ">-->
  <!--          @foreach ($offices as $office)-->
  <!--              <div class="col-lg-6">-->
  <!--                  <div class="card-1 mb-5">-->
  <!--                      <img src="{{ asset($office->thumbnail)}}" class="card-img-top" alt="...">-->
  <!--                      <div class="card-body blog">-->
  <!--                      <div class="d-flex">-->
  <!--                      </div>-->
  <!--                      <hr class="line mt-0 mb-0">-->
  <!--                      <div class="card-heading text-center">-->
  <!--                          <a href="{{$office->link}}" target="_blank">-->
  <!--                              {{$office->title}}-->
  <!--                          </a>-->
  <!--                      </div>-->
  <!--                      <div class="card-description-office text-center mt-3">-->
  <!--                          {!!$office->description!!}-->
  <!--                      </div>-->
  <!--                      </div>-->
  <!--                  </div>-->
  <!--              </div>-->
  <!--          @endforeach-->
  <!--        </div>-->
  <!--      </div>-->
  <!--    </div>-->
  <!--  </div>-->
  <!--</section>-->
  <!--dynmic office section-->
  
  <!--Static office section-->
    <section class="">
  <div class="container">
    <div class="row">
      <div class="col-md-12 text-center mt-3 mb-3">
        <div class="services text-center">My Office</div>
      </div>
    </div>
    <div class="row justify-content-center mt-0">
      <div class="col-lg-10">
        <div class="row">
          <div class="col-lg-6">
            <div class="card-1 mb-5">
              <img src="{{ asset('image/lucknow.jpg') }}" class="card-img-top" alt="Office Image 1">
              <div class="card-body blog">
                <hr class="line mt-0 mb-0">
                <div class="card-heading text-center">
                  <a href="" >
                    Lucknow Head Office
                  </a>
                </div>
                <div class="card-description-office text-center mt-3">
                  <p>Lucknow Head Office: Samadhan Tower 27/1/B Gokhale Marg, Lucknow 226001</p>
                </div>
              </div>
            </div>
          </div>
          <div class="col-lg-6">
            <div class="card-1 mb-5">
              <img src="{{ asset('image/noida.jpg') }}" class="card-img-top" alt="Office Image 2">
              <div class="card-body blog" style="height:149px">
                <hr class="line mt-0 mb-0">
                <div class="card-heading text-center">
                  <a href="" >
                    Noida Corporate Office
                  </a>
                </div>
                <div class="card-description-office text-center mt-3">
                  <p>Noida Corporate Office A-18, First Floor Sector-6, Noida 201301</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<!--Static office section-->

@endsection
<!-- Push script to layout -->
@push('scripts')
<script>
$(document).ready(function($) {
    $('.read-more').click(function() {
        var fullDescription = $(this).closest('.card-description').find('.full-description').html();
        console.log(fullDescription);
        $(this).closest('.card-description').find('.description').html(fullDescription);
    });
});
</script>
@endpush
<!-- Push script to layout -->