@extends('frontend.layouts.main')
@section('content')
<style>
/* .card {
    height: 1030px;
}
.card-description {
    height: 560px;
} */
</style>
<section class="page-about">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <h3 class="page-about-h">My Initiative</h3>
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb justify-content-center">
                            <li class="breadcrumb-item text-center"><a class="breadcrumb-home"
                                    href="{{url('/')}}">Home</a></li>
                            <li class="breadcrumb-item active text-center" aria-current="page">My Initiative</li>
                        </ol>
                    </nav>
            </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 ($ventures_list as $venture)
                <div class="col-lg-6">
                    <div class="card mb-5">
                        <!--<img src="{{ asset($venture->logo)}}" class="card-img-top" alt="...">-->
                        <!--<img src="{{ Storage::disk('s3')->url($venture->logo) }}" class="card-img-top" alt="...">-->
                        <img src="{{ s3_url($venture->logo) }}" 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($venture->created_at))}}</p> -->

                            <!-- <span class=""><i class="fa-solid fa-user admin"></i></span>
                            <p class="icon-name">{{$venture->title}}</p> -->
                        </div>
                        <hr class="line mt-0 mb-0">
                        <div class="card-heading text-center">
                            <a href="{{$venture->link}}" target="_blank">
                                {{$venture->title}}
                            </a>
                        </div>
                        <div class="card-description text-center mt-3">
                            <p class="description">{{ substr(strip_tags($venture->description), 0, 200) }}{{ strlen(strip_tags($venture->description)) > 200 ? '...' : '' }}
                                <span class="read-more" style="display: {{ strlen(strip_tags($venture->description)) > 200 ? 'inline' : 'none' }}">Read more</span>
                            </p>
                            <input type="hidden" class="full-description" value="{{$venture->description}}">
                        </div>
                        <hr class="line mt-0 mb-0">
                        <div class="read-more text-center mt-3">
                            <a href="{{$venture->link}}" target="_blank" class="read-btn btn btn-outline-primary">Visit</a>
                        </div>
                        </div>
                    </div>
                </div>
            @endforeach
            <div class="col-md-12 mt-4 d-flex justify-content-center">
                {{$ventures_list->links('pagination::bootstrap-4')}}
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

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