@extends('front.layout.app')
@section('title', 'Envelope Gum | Lawn Mowing Invoices | Dental Exam Forms | Nag Forms & Supplies')
@section('meta_description', 'Nag Forms & Supplies Provides High-Quality Envelope Gum, Lawn Mowing Invoices, And Dental Exam Forms. Explore Our Comprehensive Solutions.')
@section('content')


    <section class="blogInner">
        <div class="container">
            <div class="row">
                @foreach($blogs as $post)
                    <div class="col-md-4 mt-5">
                        <div class="blog-card ">
                            <h4 class="title">{{ $post['title'] }}</h4>
                            <p>{!! Illuminate\Support\str::words($post['description'],40,'...') !!}</p>
                            <a href="{{route('blog-details',$post->id)}}"
                               class="btn btn-danger">read
                                more</a>
{{--                            <a href="{{ $post['id'] == 6 ? route('blog-details',$post->id) : 'javascript:void(0);' }}"--}}
{{--                               class="{{ $post['id'] == 6 ? 'detailBtn' : 'moreBtn' }}">read--}}
{{--                                more</a>--}}
                        </div>
                    </div>
                @endforeach

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

@endsection


@section('scripts')

    <script>
        const buttons = document.querySelectorAll('.moreBtn');

        buttons.forEach(button => {
            button.addEventListener('click', function (event) {
                event.preventDefault();
                document.querySelectorAll('.blog-card').forEach(card => {
                    card.classList.remove('active');
                });
                this.closest('.blog-card').classList.add('active');
            });
        });
    </script>

@endsection()