@extends('frontend.layouts.main')
@section('content')
<section class="intro-hero">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <h2 class="text-center">Timeline</h2>
            </div>
        </div>
    </div>
</section>

<section class="timeline-card-section">
    <div class="container">
        <div class="row">
            @foreach($timelines as $timeline)
            <div class="col-lg-4 mt-3">
                <div class="card min-height" style="width: auto">
                    <img src="{{ asset($timeline->thumbnail) }}" class="card-img-top p-3" alt="..." height="318px">
                    <div class="card-body">
                        <h3 class="heading"><a>{{ $timeline->title }}</a></h3>
                       <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>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section>

<section class="intro-hero">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <h2 class="text-center">My Office</h2>
            </div>

        </div>
    </div>
</section>

<section class="timeline-card-section">
    <div class="container">
        <div class="row">
            @foreach($offices as $office)
            <div class="col-lg-4">
                <div class="card" style="width: auto">
                    <img src="{{ asset($office->thumbnail) }}" class="card-img-top p-3" alt="...">
                    <div class="card-body">
                        <h3 class="heading"><a>{{ $office->title }}</a></h3>
                        <p class="description"><a>{!! $office->description !!}
                            </a></p>
                    </div>
                </div>
            </div>
            @endforeach

        </div>
    </div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
jQuery(document).ready(function($) {
    $('.read-more').click(function() {
        var fullDescription = $(this).closest('.card-body').find('.full-description').html();
        $(this).closest('.card-body').find('.description').html(fullDescription);
    });
});
</script>
@endsection