@extends('include.front_master')
@section('page_title','Index')
@section('content')
<style>
    .posts-thumb{
            box-sizing: border-box;

    padding: 8px 8px;
    border-radius: 4px;
    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}
    
     .hero {
           background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url({{asset('front_assets/img/hero.webp')}});
    background-size: cover;
    padding: 4rem 1rem;
    text-align: center;
    color: white;
    background-position: top;
        }
        .hero h1 {
            font-family: 'Playfair Display', serif;
            font-size: 2.5rem;
            margin-bottom: 1rem;
        }
        .hero p {
            font-size: 1.2rem;
            margin-bottom: 1.5rem;
            color: #fff;
        }
        .hero .cta {
            background-color: #e86e81;
            color: white;
            padding: 0.8rem 1.5rem;
            text-decoration: none;
            border-radius: 4px;
            font-weight: 600;
        }
        .hero .cta:hover {
            background-color: #e86e81;
            color: #fff;
        }
        .search-bar {
            padding: 1rem;
            text-align: center;
            background-color: #fff;
        }
        .search-bar input {
            padding: 0.5rem;
            width: 50%;
            max-width: 400px;
            border: 2px solid #e86e81;
            border-radius: 4px;
            font-size: 1rem;
            transition: border-color 0.3s;
        }
        .search-bar input:focus {
            border-color: #e86e81;
            outline: none;
        }
        .main-content-area {
            padding: 2rem 0;
        }
        .blog-box {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            margin-bottom: 1rem;
            transition: transform 0.3s;
        }
        .blog-box:hover {
            transform: translateY(-5px);
        }
        .posts-thumb {
            padding: 0;
            border-radius: 8px 8px 0 0;
            overflow: hidden;
        }
        
        @media (max-width: 768px) {
            .hero {
                padding: 2rem 1rem;
            }
            .hero h1 {
                font-size: 1.8rem;
            }
            .search-bar input {
                width: 80%;
            }
            .navbar-brand img {
                max-width: 100px;
            }
            .blog-box {
                margin-bottom: 1.5rem;
            }
        }
</style>
 <section class="hero">
        <h1>Immerse in Divine Bhajans</h1>
        <p>Explore Hindi and Rajasthani bhajan lyrics dedicated to Shri Ram, Krishna, Shiva, and more</p>
        <a href="#bhajans" class="cta btn">Discover Bhajans</a>
    </section>

    <section class="search-bar">
        <input type="text" id="search-input" placeholder="Search Bhajans..." aria-label="Search bhajans by title or deity">
        <div id="search-suggestions" style="display: none;"></div>
    </section>
        <section class="main-content-area ptb-40" id="bhajans">
            <div class="container">
                <div class="row" id="post-container">
                     @foreach($data as $list)
							      @if($list->count() > 0)
                    <div class="col-lg-6 post" data-id="{{ $list->id }}">
                        <div class="blog-box">
                            <div class="d-flex flex-wrap blog-box1">
                                <div class="posts-thumb align-self-stretch">
                                    <a href="{{url('/'.$list->blog_slug)}}"> <span class="fullimage thumb-bg1" style="background-image: url({{url('uploads/Blog/'.$list->blog_main_image)}});"></span> </a>
                                </div>
                                <div class="posts-content">
                                   <a href="{{url('/'.$list->blog_slug)}}" style="color: black;
    font-weight: 700;">{{$list->blog_title}}</a>
                                    <div class="posts-meta">
                                        <span class="posts-author"> <a href="{{url('/'.$list->blog_slug)}}">Admin</a> </span> <span class="posts-date">{{ date('j M Y', strtotime($list->updated_at))}}</span>
                                    </div>
                                    <p>{!! \Illuminate\Support\Str::words(strip_tags($list->blog_des), 15) !!}</p>
                                    <a href="{{url('/'.$list->blog_slug)}}" class="read-more-btn"><span>Read More</span> <i class="icofont-arrow-right"></i></a>
                                </div>
                            </div>
                        </div>
               </div>
               			@else
							<h1>Noting</h1>	
								
								@endif
								@endforeach

                        <div class="pagination-area">
    {!! $data->links('pagination::bootstrap-4') !!}
</div>
                    </div>
        
                </div>
            </div>
        </section>
@push('scripts')
<script>
$(document).ready(function(){
  
    function debounce(func, wait) {
        var timeout;
        return function() {
            var context = this, args = arguments;
            clearTimeout(timeout);
            timeout = setTimeout(function() {
                func.apply(context, args);
            }, wait);
        };
    }

    
    $('#search-input').keyup(debounce(function(){
        var query = $(this).val().trim();
        if (query.length > 0) {
            $.ajax({
                url: '{{ url("search") }}',
                method: 'GET',
                data: { query: query },
                success: function(response){
                  
                    $('#search-suggestions').empty().css({
                        'display': 'block',
                        'background': '#fff',
                        'border': '1px solid #bc1181',
                        'border-radius': '4px',
                        'max-width': '400px',
                        'margin': '0 auto',
                        'box-shadow': '0 2px 4px rgba(0,0,0,0.1)',
                        'position': 'relative',
                        'z-index': '1000'
                    });
                    if (!response || response.length === 0) {
                        $('#search-suggestions').append(
                            '<li style="padding: 0.5rem; color: #333; background: #fff; list-style: none;">No results found</li>'
                        );
                    } else {
                        $.each(response, function(index, item) {
                            if (item && item.name && item.url) {
                                $('#search-suggestions').append(
                                    '<a href="' + item.url + '" style="text-decoration: none; color: #333;">' +
                                    '<li style="padding: 0.5rem; color: #333; background: #fff; border-bottom: 1px solid #bc1181; list-style: none;">' +
                                    (item.type === 'category' ? '[Category] ' : '[Blog] ') + item.name +
                                    '</li></a>'
                                );
                            } else {
                       
                            }
                        });
                    }
                },
                error: function(xhr, status, error){
                  
                    $('#search-suggestions').empty().css({
                        'display': 'block',
                        'background': '#fff',
                        'border': '1px solid #bc1181',
                        'border-radius': '4px',
                        'max-width': '400px',
                        'margin': '0 auto',
                        'box-shadow': '0 2px 4px rgba(0,0,0,0.1)',
                        'position': 'relative',
                        'z-index': '1000'
                    }).append(
                        '<li style="padding: 0.5rem; color: #333; background: #fff; list-style: none;">Error loading results</li>'
                    );
                }
            });
        } else {
            $('#search-suggestions').empty().css('display', 'none');
          
        }
    }, 300)); 
});
</script>
@endpush


     @endsection