@extends('user.layout.default')

@section('content')

<!-- // Navbar Top start // -->
<div class="navabar1">
    <nav class="navbar navbar-expand-lg">
        <div class="container-fluid">
            <h6 class="dashbod_title">Blog</h6>
            @include('user.inc.navbar')
        </div>
    </nav>
</div>
<!-- // Navbar Top End // -->

<!-- // Section-one-Dashboard // -->
<div class="stucture">
    <section class="Section-one-blog">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <!-- boxes-dashboard start -->
                    <div class="boxes-dashboard">
                        <!-- box-1 -->
                        <div class="box-1-dashboard">
                            <div class="row">
                                <div class="col-12">
                                    <div class="serch-container">
                                        <input class="form-control global-search" type="search" id="searchInput" placeholder="Search" aria-label="Search">
                                        <img src="{{ asset('assets/images/icons/search.svg') }}" alt="" class="search-icon">
                                    </div>

                                </div>
                            </div>

                            <div class="row blog-data">
                                @foreach ($data as $data)
                                <div class="col-sm-4 col-12">
                                    <div class="cards-blog">
                                        <div class="card">
                                            <img src="{{asset('assets/images/blog/blog-img-04.png')}}" class="card-img-top" alt="blog-img">
                                            <div class="card-body">
                                                <p class="card-text">{{$data->title}}</p>

                                                <p>
                                                    {{$data->description}}
                                                </p>

                                                <div class="read-more-card-btn-container">
                                                    <a href="{{ route('readBlog', ['id' => base64_encode($data->id)])}}" class="btn-read-more">Read More</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                @endforeach
                            </div>
                        </div>
                        <!-- End -->
                    </div>
                    <!-- boxes-dashboard End -->
                </div>
            </div>
        </div>
    </section>
</div>

@endsection

@section('script')
<script>
    window.onload = function() {
        document.getElementById('searchInput').value = "";
    };

    $('.global-search').on('keyup', function() {

        var query = $(this).val().trim();
        if (query !== '') {

            $.ajax({
                url: "{{ route('searchBlog') }}",
                type: 'GET',
                data: {
                    search: query
                },
                success: function(response) {

                    console.log(response);
                    $('.blog-data').empty(); // Clear the previous content
                    $('.blog-data').html(response.content); // Replace with new content
                },
                error: function(error) {
                    console.error('Error:', error);
                }
            });
        }
    });
</script>
@endsection