@extends('inculdes.main')
@section('content')

<div class="container-fluid mt-5 wow fadeInUp" data-wow-delay="0.1s">
    <div class="container ">
        <div class="row g-5">
            <!-- Blog list Start -->
            <div class="col-lg-8">
                @if (count($blogs) > 0)
                    
                
                <div class="row g-5">
                    @foreach ($blogs as $blog)


                    <div class="col-md-6 wow slideInUp" data-wow-delay="0.1s">
                        <div class="blog-item bg-light rounded overflow-hidden">
                            <div class="blog-img position-relative overflow-hidden">
                                <a href="{{ route('blog', ['slug' => $blog->slug]) }}"><img class="img-fluid" src="{{ asset($blog->image) }}" alt="{{ $blog->title }}" style=" height: 234px; width: 100%;"></a>
                                <a class="position-absolute top-0 start-0 bg-primary text-white rounded-end mt-5 py-2 px-4" href="{{ route('blogs', ['category'=> @$blog->category->slug]) }}">{{ @$blog->category->name }}</a>
                            </div>
                            <div class="p-4">
                                <div class="d-flex mb-3">
                                    <small class="me-3"><i class="far fa-user text-primary me-2"></i>{{ @$blog->user->name }}</small>
                                    
                                </div>
                                <a href="{{ route('blog', ['slug' => $blog->slug]) }}"><h4 class="mb-3" style="    overflow: hidden; height: 57px;">{{ $blog->title }}</h4></a>
                                <p style="    height: 50px; overflow: hidden;">{{ $blog->short_description }}</p>
                                <a class="text-uppercase" href="{{ route('blog', ['slug' => $blog->slug]) }}">Read More <i class="fa fa-arrow-right"></i></a>
                            </div>
                        </div>
                    </div>
                    @endforeach
                    @if ($blogs->lastPage() > 1)
                    {{ $blogs->onEachSide(1)->links('pages.pagination', ['paginator' => $blogs]) }}
                    @endif


                </div>
                @else
                <h4 class="text-center mt-5">No Result Found</h4>
                @endif
            </div>
            <!-- Blog list End -->

            <!-- Sidebar Start -->
            <div class="col-lg-4">
                <!-- Search Form Start -->
                <div class="mb-5 wow slideInUp" data-wow-delay="0.1s">
                    <div class="input-group">
                        <form action="{{ route('blogs') }}" class="d-flex">
                            <input type="text" name="search" value="{{ @$search_query }}" class="form-control p-3" placeholder="Keyword">
                            <button type="submit" class="btn btn-primary px-4"><i class="fa fa-search"></i></button>
                        </form>
                    </div>
                </div>
                <!-- Search Form End -->

                <!-- Category Start -->
                <div class="mb-5 wow slideInUp" data-wow-delay="0.1s">
                    <div class="section-title section-title-sm position-relative pb-3 mb-4">
                        <h3 class="mb-0">Categories</h3>
                    </div>
                    <div class="link-animated d-flex flex-column justify-content-start">
                        @foreach ($categories as $cat)
                        <a class="h5 fw-semi-bold {{ ($cat->slug == $search_cat)?'bg-primary':'bg-light' }} rounded py-2 px-3 mb-2" href="{{ route('blogs', ['category'=>$cat->slug]) }}"><i class="fa fa-arrow-right me-2"></i>{{ $cat->name }}</a>
                        @endforeach

                    </div>
                </div>
                <!-- Category End -->

                <!-- Recent Post Start -->
                {{-- <div class="mb-5 wow slideInUp" data-wow-delay="0.1s">
                    <div class="section-title section-title-sm position-relative pb-3 mb-4">
                        <h3 class="mb-0">Recent Post</h3>
                    </div>
                    <div class="d-flex rounded overflow-hidden mb-3">
                        <img class="img-fluid" src="img/blog-1.jpg" style="width: 100px; height: 100px; object-fit: cover;" alt="blog1">
                        <a href="" class="h5 fw-semi-bold d-flex align-items-center bg-light px-3 mb-0">Lorem ipsum dolor sit amet adipis elit
                        </a>
                    </div>
                    <div class="d-flex rounded overflow-hidden mb-3">
                        <img class="img-fluid" src="img/blog-2.jpg" style="width: 100px; height: 100px; object-fit: cover;" alt="blog2">
                        <a href="" class="h5 fw-semi-bold d-flex align-items-center bg-light px-3 mb-0">Lorem ipsum dolor sit amet adipis elit
                        </a>
                    </div>
                    <div class="d-flex rounded overflow-hidden mb-3">
                        <img class="img-fluid" src="img/blog-3.jpg" style="width: 100px; height: 100px; object-fit: cover;" alt="blog3">
                        <a href="" class="h5 fw-semi-bold d-flex align-items-center bg-light px-3 mb-0">Lorem ipsum dolor sit amet adipis elit
                        </a>
                    </div>
                    <div class="d-flex rounded overflow-hidden mb-3">
                        <img class="img-fluid" src="img/blog-1.jpg" style="width: 100px; height: 100px; object-fit: cover;" alt="blog4">
                        <a href="" class="h5 fw-semi-bold d-flex align-items-center bg-light px-3 mb-0">Lorem ipsum dolor sit amet adipis elit
                        </a>
                    </div>
                    <div class="d-flex rounded overflow-hidden mb-3">
                        <img class="img-fluid" src="img/blog-2.jpg" style="width: 100px; height: 100px; object-fit: cover;" alt="blog5">
                        <a href="" class="h5 fw-semi-bold d-flex align-items-center bg-light px-3 mb-0">Lorem ipsum dolor sit amet adipis elit
                        </a>
                    </div>
                    <div class="d-flex rounded overflow-hidden mb-3">
                        <img class="img-fluid" src="img/blog-3.jpg" style="width: 100px; height: 100px; object-fit: cover;" alt="blog6">
                        <a href="" class="h5 fw-semi-bold d-flex align-items-center bg-light px-3 mb-0">Lorem ipsum dolor sit amet adipis elit
                        </a>
                    </div>
                </div> --}}
                <!-- Recent Post End -->

                <!-- Image Start -->
                {{-- <div class="mb-5 wow slideInUp" data-wow-delay="0.1s">
                    <img src="img/blog-1.jpg" alt="blog1img" class="img-fluid rounded">
                </div> --}}
                <!-- Image End -->


                <!-- Plain Text Start -->
                <div class="wow slideInUp" data-wow-delay="0.1s">
                    <div class="section-title section-title-sm position-relative pb-3 mb-4">
                        <h3 class="mb-0">FREE CONSULTATION</h3>
                    </div>
                    <div class="bg-light text-center" style="padding: 30px;">
                        <p>Our dedicated team is ready to assist you with all your needs. We're here to offer you expert guidance and tailored solutions. Contact us now to discover how we can meet your requirements!</p>
                        <a href="{{ route('contact') }}" class="btn btn-primary py-2 px-4">Contact Us</a>
                    </div>
                </div>
                <!-- Plain Text End -->
            </div>
            <!-- Sidebar End -->
        </div>
    </div>
</div>
@include('inculdes.contact_form')
@endsection