<div class="ml-[280px] min-h-screen p-6">

    <!-- HEADER -->
    <div class="flex justify-between items-center mb-6">
        <h2 class="text-2xl font-semibold">Blogs</h2>

        <div class="flex items-center gap-3">
            <!-- SEARCH -->
            <input type="text" wire:model.debounce.500ms="search" placeholder="Search blogs..."
                class="w-64 px-4 py-2 border rounded-lg text-sm
                       focus:ring-1 focus:ring-black focus:outline-none" />

            <!-- ADD -->
            <a href="/console/blogs/create" class="px-5 py-2 rounded-lg bg-black text-white text-sm hover:bg-gray-800">
                + Add Blog
            </a>
        </div>
    </div>

    <!-- SUCCESS MESSAGE -->
    @if (session()->has('success'))
        <div
            class="mb-4 px-4 py-3 rounded-lg
                    bg-green-50 border border-green-200
                    text-green-700 text-sm font-medium">
            {{ session('success') }}
        </div>
    @endif

    <!-- TABLE -->
    <div class="bg-white border rounded-xl overflow-hidden">
        <table class="w-full text-sm">
            <thead class="bg-gray-50 border-b text-gray-600">
                <tr class="text-left">
                    <th class="px-4 py-3">Blog</th>
                    <th class="px-4 py-3">Description</th>
                    <th class="px-4 py-3">Month</th>
                    <th class="px-4 py-3">Status</th>
                    <th class="px-4 py-3 text-right">Action</th>
                </tr>
            </thead>

            <tbody>
                @forelse($blogs as $blog)
                    <tr class="border-b hover:bg-gray-50 align-top">

                        <!-- IMAGE + TITLE -->
                        <td class="px-4 py-3">
                            <div class="flex items-center gap-4">

                                <!-- IMAGE WRAPPER -->
                                <div class="relative group">
                                    <img src="{{ $blog->hero_image ? asset($blog->hero_image) : asset('uploads/placeholder.png') }}"
                                        alt="{{ $blog->title }}"
                                        class="w-16 h-16 object-cover rounded-xl border
                       shadow-sm bg-white
                       transition-transform duration-200
                       group-hover:scale-105">

                                    <!-- HOVER PREVIEW -->
                                    @if ($blog->hero_image)
                                        <div
                                            class="absolute left-0 top-full mt-2 hidden group-hover:block
                           z-50 bg-white border rounded-xl shadow-xl p-2">
                                            <img src="{{ asset($blog->hero_image) }}"
                                                class="w-40 h-40 object-cover rounded-lg">
                                        </div>
                                    @endif
                                </div>

                                <!-- TITLE -->
                                <div class="leading-tight">
                                    <p class="font-semibold text-gray-900">
                                        {{ $blog->title }}
                                    </p>

                                    <p class="text-xs text-gray-400 mt-0.5">
                                        Blog ID: {{ $blog->id }}
                                    </p>
                                </div>

                            </div>
                        </td>



                        <!-- DESCRIPTION -->
                        <td class="px-4 py-3 text-gray-600">
                        {{ \Illuminate\Support\Str::limit(trim(preg_replace('/\s+/', ' ', strip_tags($blog->content))), 80) }}
                        </td>


                        <!-- MONTH -->
                        <td class="px-4 py-3">
                            {{ \Carbon\Carbon::parse($blog->publish_date)->format('M Y') }}
                        </td>

                        <!-- STATUS -->
                        <td class="px-4 py-3">
                            <span
                                class="inline-flex items-center px-2 py-1 rounded-full text-xs font-semibold
                                {{ $blog->status ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-500' }}">
                                {{ $blog->status ? 'Published' : 'Draft' }}
                            </span>
                        </td>

                        <!-- ACTION -->
                        <td class="px-4 py-3 text-right">
                            <div class="inline-flex items-center gap-4 text-sm">

                                <!-- VIEW -->
                                <a href="/blogs/{{ $blog->slug }}" target="_blank"
                                    class="flex items-center gap-1.5 text-gray-600
                  hover:text-black transition font-medium">

                                    <!-- Eye Icon -->
                                    <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none"
                                        viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                                        <path stroke-linecap="round" stroke-linejoin="round"
                                            d="M2.25 12s3.75-7.5 9.75-7.5 9.75 7.5 9.75 7.5-3.75 7.5-9.75 7.5S2.25 12 2.25 12z" />
                                        <path stroke-linecap="round" stroke-linejoin="round"
                                            d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                                    </svg>

                                    <span>View</span>
                                </a>

                                <!-- EDIT -->
                                <a href="/console/blogs/{{ $blog->id }}/edit"
                                    class="flex items-center gap-1.5 text-blue-600
                  hover:text-blue-800 transition font-medium">

                                    <!-- Pencil Icon -->
                                    <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none"
                                        viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                                        <path stroke-linecap="round" stroke-linejoin="round"
                                            d="M16.862 3.487a2.25 2.25 0 113.182 3.182L7.5 19.213 3 21l1.787-4.5L16.862 3.487z" />
                                    </svg>

                                    <span>Edit</span>
                                </a>

                            </div>
                        </td>


                    </tr>
                @empty
                    <tr>
                        <td colspan="5" class="px-4 py-8 text-center text-gray-400">
                            No blogs found
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <!-- FOOTER -->
    <div class="flex justify-between items-center mt-4 text-sm text-gray-500">
        <span>
            Showing {{ $blogs->count() }} of {{ $blogs->total() }} blogs
        </span>

        {{ $blogs->links() }}
    </div>

</div>
