@extends('front.layout.app')
@section('title', $blog->meta_title ?? 'Default Blog Title')
@section('description', $blog->meta_description ?? 'Default Blog Description')
@section('content')


    <section class="blogInner">
        <div class="container">
            <div class="row">

                    <div class="col-md-12">
                        <h4 class="title">{{ $blog['title'] }}</h4>
                        <p>{!! $blog['description'] !!}</p>
                    </div>


            </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()