<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kelola Artikel Blog | Admin Haji Apud</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
</head>
<body class="bg-stone-50 text-gray-800 font-sans flex h-screen overflow-hidden">

    <!-- Sidebar -->
    <aside class="w-64 bg-gray-950 text-white flex flex-col z-20">
        <div class="h-20 flex items-center px-6 border-b border-gray-800">
            <span class="text-2xl font-bold font-serif text-amber-500">Haji Apud.</span>
        </div>
        <nav class="flex-1 px-4 py-6 space-y-2">
            <a href="{{ route('admin.dashboard') }}" class="flex items-center gap-3 text-gray-400 hover:bg-gray-800 hover:text-white px-4 py-3 rounded-xl font-medium transition-colors">
                <i class="fas fa-home w-5"></i> Dashboard
            </a>
            <a href="{{ route('admin.dashboard') }}#kelola-produk" class="flex items-center gap-3 text-gray-400 hover:bg-gray-800 hover:text-white px-4 py-3 rounded-xl font-medium transition-colors">
                <i class="fas fa-box w-5"></i> Kelola Produk
            </a>
            <a href="{{ route('admin.article.index') }}" class="flex items-center gap-3 bg-gray-800 text-white px-4 py-3 rounded-xl font-medium transition-colors">
                <i class="fas fa-newspaper w-5"></i> Kelola Artikel
            </a>
        </nav>
    </aside>

    <!-- Main Content -->
    <main class="flex-1 flex flex-col h-screen overflow-y-auto p-8">
        <div class="flex justify-between items-center mb-8">
            <h2 class="text-2xl font-bold text-gray-900">Manajemen Blog & SEO</h2>
            <a href="{{ route('admin.article.create') }}" class="bg-amber-600 hover:bg-amber-700 text-white px-6 py-3 rounded-xl font-bold transition-colors shadow-lg flex items-center gap-2">
                <i class="fas fa-pen"></i> Tulis Artikel Baru
            </a>
        </div>

        <div class="bg-white rounded-3xl border border-stone-100 shadow-sm overflow-hidden">
            <table class="w-full text-left">
                <thead class="bg-stone-50 text-stone-500 text-sm">
                    <tr>
                        <th class="px-6 py-4 font-semibold w-16">Cover</th>
                        <th class="px-6 py-4 font-semibold">Judul Artikel</th>
                        <th class="px-6 py-4 font-semibold text-center">Status</th>
                        <th class="px-6 py-4 font-semibold text-center">Tanggal</th>
                        <th class="px-6 py-4 font-semibold text-center">Aksi</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-stone-100 text-sm">
                    @foreach($articles as $article)
                    <tr class="hover:bg-stone-50 transition-colors">
                        <td class="px-6 py-4">
                            @if($article->image)
                                <img src="{{ asset('storage/' . $article->image) }}" class="w-16 h-12 object-cover rounded-lg border border-stone-200">
                            @else
                                <div class="w-16 h-12 bg-stone-100 rounded-lg flex items-center justify-center text-stone-400"><i class="fas fa-image"></i></div>
                            @endif
                        </td>
                        <td class="px-6 py-4 font-bold text-gray-900">{{ $article->title }}</td>
                        <td class="px-6 py-4 text-center">
                            <span class="px-3 py-1 rounded-full text-xs font-bold uppercase {{ $article->status == 'published' ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-700' }}">
                                {{ $article->status }}
                            </span>
                        </td>
                        <td class="px-6 py-4 text-center text-stone-500">{{ $article->created_at->format('d M Y') }}</td>
                        <td class="px-6 py-4 text-center">
                            <div class="flex items-center justify-center gap-2">
                                <a href="{{ route('admin.article.edit', $article->id) }}" class="text-blue-600 bg-blue-50 hover:bg-blue-100 p-2 rounded-lg"><i class="fas fa-edit"></i></a>
                                <form action="{{ route('admin.article.destroy', $article->id) }}" method="POST" onsubmit="return confirm('Hapus artikel ini?');">
                                    @csrf @method('DELETE')
                                    <button type="submit" class="text-red-600 bg-red-50 hover:bg-red-100 p-2 rounded-lg"><i class="fas fa-trash"></i></button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </main>
</body>
</html>