@extends('layouts.frontLayout.front-layout')

@section('content')
<div class="site-main main-container no-sidebar">
  <div class="section-037">
    <div class="breadcrumbs-wrapper text-uppercase">
      <div class="container">
        <div class="breadcrumbs">
          <a href="{{ url('/') }}" title="Back to the home page">Home</a>
          <a href="{{ url('/blogs') }}"><span>|</span><span class="fw-bold">Blogs</span></a>
        </div>
      </div>
    </div>
    <div class="container">
      <div class="row">
        <div class="col-md-8 col-md-offset-2">
          <div class="blog">
            @foreach($blogs as $blog)
            <div class="blog-item">
              <div class="row">
                <div class="col-md-4">
                  <div class="blog-image">
                    <img src="{{ asset('images/BlogImages/'.$blog->image) }}" alt="Blog Image" class="img-responsive">
                  </div>
                </div>
                <div class="col-md-8">
                  <div class="blog-details">
                    <h2 class="blog-title">{{ $blog->title }}</h2>
                    <p class="blog-meta">
                      <span class="blog-date">{{ $blog->date }}</span>
                    </p>
                    <div class="blog-content">
                      <div class="partial-content">
                        {!! substr(strip_tags($blog->description), 0, 200) !!}
                        @if (strlen(strip_tags($blog->description)) > 200)
                        <span class="read-more-dots">...</span>
                        <span class="read-more-content" style="display: none;">
                          {!! substr(strip_tags($blog->description), 200) !!}
                        </span>
                        <a href="{{ route('blog-show', ['id' => $blog->id]) }}" class="read-more" style="color: red;">Read More</a>
                        @endif
                      </div>
                      @if (strlen(strip_tags($blog->description)) <= 200)
                      <div class="full-content">
                        {!! $blog->description !!}
                      </div>
                      @endif
                    </div>
                  </div>
                </div>
              </div>
            </div>
            @endforeach
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection