@extends('layouts.master')

@section('content')
<div class="container mx-auto px-4 py-12">
    <!-- Title -->
    <div class="text-center mb-12">
        <h1 class="text-4xl font-extrabold text-gray-800 tracking-tight mb-4">Explore Our Blogs</h1>
        <p class="text-gray-600 text-lg">Dive into a world of knowledge, tips, and insights curated just for you.</p>
    </div>

    <!-- Blog Grid -->
     <!-- Replace the Grade Field -->
     <div class="space-y-4 mb-5">
    <!-- Levels Section -->
    <!-- <div class="flex items-center space-x-2">
        <button class="bg-orange-500 text-white font-bold px-4 py-2 rounded">
            LEVELS:
        </button>
        <div class="flex overflow-x-auto space-x-4 px-4 py-2 bg-gray-100 rounded w-full">
            @foreach ($categories->where('type', 'level') as $category)
                <span 
                    class="cursor-pointer text-gray-700 hover:text-orange-500 whitespace-nowrap"
                    data-id="{{ $category->id }}"
                    onclick="selectLevel({{ $category->id }})">
                    {{ $category->name }}
                </span>
            @endforeach
        </div>
    </div> -->

    <!-- Subjects Section -->
    <!-- <div class="flex items-center space-x-2">
        <button class="bg-orange-500 text-white font-bold px-4 py-2 rounded">
            SUBJECTS:
        </button>
        <div class="flex overflow-x-auto space-x-4 px-4 py-2 bg-gray-100 rounded w-full">
            @foreach ($categories->where('type', 'subject') as $category)
                <span 
                    class="cursor-pointer text-gray-700 hover:text-orange-500 whitespace-nowrap"
                    data-id="{{ $category->id }}"
                    onclick="selectSubject({{ $category->id }})">
                    {{ $category->name }}
                </span>
            @endforeach
        </div>
    </div> -->
</div>



    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-10">
        @foreach ($blogs as $blog)
        <div class="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-2xl transition-shadow duration-300">
            <!-- Image Section -->
            <img 
                src="{{ $blog->image_url }}" 
                alt="{{ $blog->title }}" 
                class="w-full h-56 object-cover">
            
            <!-- Content Section -->
            <div class="p-6">
                <h2 class="text-2xl font-semibold text-gray-800 mb-3">
                    {{ $blog->title }}
                </h2>
                <p class="text-gray-600 mb-5 text-sm leading-relaxed">
                    {!!  Str::limit($blog->description, 120) !!}
                </p>
                <a 
                    href="{{ route('blogs.show', $blog->id) }}" 
                    class="inline-block text-blue-600 font-medium text-sm hover:text-blue-800 transition duration-200">
                    Read More →
                </a>
            </div>

            <!-- Footer Section -->
            <div class="border-t px-6 py-3 flex justify-between items-center bg-gray-50">
                <span class="text-gray-500 text-sm">{{ $blog->created_at->format('M d, Y') }}</span>
                {{-- <span class="text-gray-500 text-sm">{{ $blog->author->name }}</span> --}}
            </div>
        </div>
        @endforeach
    </div>

    <!-- Pagination -->
    <div class="mt-12">
        {{ $blogs->links('pagination::tailwind') }}
    </div>
</div>


<script>

function selectLevel(id) {
    console.log("Selected Level ID:", id);
    // Add code to highlight or fetch related data
}

function selectSubject(id) {
    console.log("Selected Subject ID:", id);
    // Add code to highlight or fetch related data
}
</script>
@endsection