@extends('layouts.main-app')

@section('title')

@section('content')
    @include('layouts.navbar')

    <div class="w-full h-full relative mb-24">
        <img class="absolute w-full h-96 object-cover" src="{{ asset('images/images/banner-blogs.png') }}"
            alt="blog topics banner">
        <div class="relative text-center py-32">
            <h1 class="text-5xl text-white anton-regular">BLOGS</h1>
            <p class=" text-white py-2"><a href="{{ url('/') }}" class="hover:text-[#ef5400]">HOME</a> / BLOGS</p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 py-24 px-4 lg:px-0 container mx-auto gap-8">
            <div class="lg:col-span-2">
                <div class="grid gap-4">
                    <div>
                        <!-- Display blog image if it exists -->
                        <img class="w-full h-auto object-fill" src="{{ asset($selectedBlog->image) }}" alt="{{ $selectedBlog->title }}">

                        <!-- Blog Title -->
                        <h1 class="anton-regular text-xl md:text-2xl py-2">{{ strtoupper($selectedBlog->title) }}</h1>

                        <!-- Blog Date -->
                        <p class="text-sm md:text-base">{{ \Carbon\Carbon::parse($selectedBlog->created_at)->format('F d, Y') }}</p>

                        <!-- Blog Content -->
                        <div class="py-2 text-sm md:text-base">
                            {!! $selectedBlog->content !!}
                        </div>
                    </div>
                </div>
            </div>

            <div>
                <div class="mt-8 lg:mt-0">
                    <div class="border-2 rounded-lg px-4 py-6 sm:px-6 bg-white">
                        <div class="max-w-md mx-auto">
                            <!-- Search Section -->
                            <div class="relative">
                                <form action="{{ route('blogs.search') }}" method="GET" onsubmit="return false;">
                                    <input type="text" 
                                           id="search-input"
                                           name="query"
                                           placeholder="Search blogs..." 
                                           class="w-full px-4 py-3 pl-10 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-[#ef5400] text-sm sm:text-base"
                                           oninput="filterBlogs()">
                                    <button type="submit" class="absolute right-3 top-1/2 transform -translate-y-1/2">
                                        <svg xmlns="http://www.w3.org/2000/svg"
                                            class="h-5 w-5 text-gray-400"
                                            fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M11 19a8 8 0 100-16 8 8 0 000 16zm4.293-4.293l5.414 5.414" />
                                        </svg>
                                    </button>
                                </form>
                            </div>
    
                            <!-- Latest Posts Section -->
                            <div class="py-4" id="blog-list">
                                <h1 class="font-semibold py-2 sm:py-4">Latest Post</h1>
                                <!-- Latest Post Items -->
                                <div class="space-y-4">
                                    @foreach ($blogs->sortByDesc('created_at')->take(3) as $latestBlog)
                                        <div class="blog-item flex gap-3 sm:gap-8 py-2 sm:py-4" data-title="{{ $latestBlog->title }}">
                                            <img class="w-20 h-20 sm:w-24 sm:h-24 object-cover" 
                                                src="{{ $latestBlog->image ? asset($latestBlog->image) : asset('images/images/business1.png') }}"
                                                alt="{{ $latestBlog->title }}">
                                            <div class="flex-1 min-w-0">
                                                <h1 class="font-semibold text-sm sm:text-base truncate">
                                                    {{ $latestBlog->category ? $latestBlog->category->name : '' }}
                                                </h1>
                                                <p class="text-xs sm:text-sm text-gray-400">
                                                    {{ \Carbon\Carbon::parse($latestBlog->created_at)->format('F d, Y') }}
                                                </p>
                                                <h1 class="text-sm sm:text-base line-clamp-2">{{ $latestBlog->title }}</h1>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
    
                                <!-- Tags Section -->
                                <div class="mt-6">
                                    <h1 class="font-semibold mb-4">Tags</h1>
                                    <div class="grid grid-cols-2 sm:grid-cols-3 gap-2 sm:gap-4 w-full max-w-md mx-auto">
                                        @foreach ($categories as $category)
                                            <div class="border border-gray-300 p-2 sm:p-4 text-center text-sm sm:text-base truncate">
                                                {{ $category->name }}
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
    
                                <!-- Advertisement Banner -->
                                <div class="py-4 flex justify-center">
                                    <img class="w-full h-auto" 
                                        src="{{ asset('images/images/ads banner.png') }}"
                                        alt="blog topics banner">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @include('layouts.footer')




    
<script>
    function filterBlogs() {
        const query = document.getElementById('search-input').value.toLowerCase();
        const blogItems = document.querySelectorAll('.blog-item');

        blogItems.forEach(item => {
            const title = item.getAttribute('data-title').toLowerCase();
            if (title.includes(query)) {
                item.style.display = ''; // Show item
            } else {
                item.style.display = 'none'; // Hide item
            }
        });
    }
</script>
@endsection