@extends('admin.layout')

@section('content')
<div class="page-header">
    <div>
        <h1 class="text-3xl font-bold text-gray-800 page-title">Blogs</h1>
        <p class="text-gray-600 mt-1">Manage your blog posts and articles</p>
    </div>
    <a href="{{ route('blogs.create') }}" style="background-color: #2563eb;" class="inline-flex items-center text-white px-5 py-2.5 rounded-lg font-semibold shadow-md hover:shadow-lg transition-all duration-200 transform hover:-translate-y-0.5">
        <svg class="w-5 h-5 mr-2" style="fill: #ffffff;" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd"></path>
        </svg>
        Create Blog
    </a>
</div>

@if(session('success'))
    <div class="mb-6 bg-green-50 border-l-4 border-green-500 text-green-800 px-6 py-4 rounded-lg shadow-sm flex items-center">
        <svg class="w-6 h-6 mr-3" style="fill: #059669;" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
        </svg>
        <span class="font-medium">{{ session('success') }}</span>
    </div>
@endif

<div class="bg-white rounded-lg shadow-lg overflow-hidden">
    <div class="overflow-x-auto table-container">
        <table class="w-full">
        <thead style="background-color: #f9fafb;">
            <tr>
                <th class="px-6 py-3 text-left text-sm font-medium text-gray-600">Title</th>
                <th class="px-6 py-3 text-left text-sm font-medium text-gray-600">Category</th>
                <th class="px-6 py-3 text-left text-sm font-medium text-gray-600">Featured Image</th>
                <th class="px-6 py-3 text-left text-sm font-medium text-gray-600">External Link</th>
                <th class="px-6 py-3 text-center text-sm font-medium text-gray-600">Actions</th>
            </tr>
        </thead>
        <tbody>
            @forelse ($blogs as $blog)
            <tr class="hover:bg-gray-50 border-b border-gray-100">
                <td class="px-6 py-4 text-sm text-gray-800 font-medium">{{ $blog->title }}</td>
                <td class="px-6 py-4 text-sm text-gray-800">
                    @if($blog->category)
                    <span class="px-3 py-1 rounded-full text-xs font-semibold bg-purple-100 text-purple-800">
                        {{ $blog->category }}
                    </span>
                    @else
                    <span class="text-gray-400 text-xs">No category</span>
                    @endif
                </td>
                <td class="px-6 py-4 text-sm text-gray-800">
                    @if($blog->featured_image)
                    <img src="/storage/{{ $blog->featured_image }}" alt="Featured Image" style="width: 160px; height: 160px; object-fit: cover; border-radius: 0.5rem; box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);">
                    @else
                    <span class="text-gray-400 text-xs">No image</span>
                    @endif
                </td>
                <td class="px-6 py-4 text-sm">
                    @if($blog->external_link)
                    <a href="{{ $blog->external_link }}" target="_blank" style="background-color: #10b981;" class="inline-flex items-center px-3 py-1.5 rounded-md text-white text-xs font-medium shadow-sm hover:shadow-md transition-all duration-200">
                        <svg class="w-4 h-4 mr-1" style="fill: #ffffff;" viewBox="0 0 20 20">
                            <path d="M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z"></path>
                            <path d="M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z"></path>
                        </svg>
                        Visit
                    </a>
                    @else
                    <span class="text-gray-400 text-xs">No link</span>
                    @endif
                </td>
                <td class="px-6 py-4 text-sm">
                    <div class="flex items-center justify-center space-x-3 mobile-actions sm:flex-row flex-col">
                        {{-- Edit Button --}}
                        <a href="{{ route('blogs.edit', $blog) }}" style="background-color: #3b82f6;" class="inline-flex items-center px-3 py-1.5 rounded-md text-white text-xs font-medium shadow-sm hover:shadow-md transition-all duration-200 transform hover:-translate-y-0.5">
                            <svg class="w-4 h-4 mr-1" style="fill: #ffffff;" viewBox="0 0 20 20">
                                <path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z"></path>
                            </svg>
                            Edit
                        </a>

                        {{-- Delete Button --}}
                        <form action="{{ route('blogs.destroy', $blog) }}" method="POST" class="inline" onsubmit="return confirm('Are you sure you want to delete this blog?');">
                            @csrf
                            @method('DELETE')
                            <button type="submit" style="background-color: #ef4444;" class="inline-flex items-center px-3 py-1.5 rounded-md text-white text-xs font-medium shadow-sm hover:shadow-md transition-all duration-200 transform hover:-translate-y-0.5">
                                <svg class="w-4 h-4 mr-1" style="fill: #ffffff;" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd"></path>
                                </svg>
                                Delete
                            </button>
                        </form>
                    </div>
                </td>
            </tr>
            @empty
            <tr>
                <td colspan="5" class="px-6 py-12 text-center text-gray-500">
                    <svg class="w-16 h-16 mx-auto mb-4" style="fill: #d1d5db;" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M2 5a2 2 0 012-2h8a2 2 0 012 2v10a2 2 0 002 2H4a2 2 0 01-2-2V5zm3 1h6v4H5V6zm6 6H5v2h6v-2z" clip-rule="evenodd"></path>
                        <path d="M15 7h1a2 2 0 012 2v5.5a1.5 1.5 0 01-3 0V7z"></path>
                    </svg>
                    <p class="text-lg font-medium">No blogs found</p>
                    <p class="text-sm mt-1">Get started by creating your first blog post</p>
                </td>
            </tr>
            @endforelse
        </tbody>
    </table>
    </div>
</div>
@endsection