@extends('admin.layout')

@section('title', 'Manajemen Artikel')
@section('page_heading', 'Manajemen Artikel & Tips Kesehatan')

@section('content')
<div class="w-full space-y-6">

    <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
        <div>
            <h2 class="font-headline-lg text-2xl font-bold text-on-surface">Manajemen Artikel</h2>
            <p class="text-sm text-on-surface-variant mt-1">Kelola konten edukasi, artikel kesehatan, dan panduan terapi untuk domain utama.</p>
        </div>
        <a href="{{ route('admin.articles.create') }}" class="flex items-center gap-2 px-5 py-2.5 bg-primary text-white rounded-xl font-semibold hover:bg-primary/90 transition-all shadow-sm active:scale-95 text-sm">
            <span class="material-symbols-outlined text-[20px]">add</span>
            <span>Tulis Artikel Baru</span>
        </a>
    </div>

    <!-- Search & Filter Bar -->
    <div class="bg-surface-container-lowest p-4 rounded-2xl border border-outline-variant/30 flex flex-col sm:flex-row gap-3 items-center justify-between shadow-xs">
        <form action="{{ route('admin.articles.index') }}" method="GET" class="flex-1 flex gap-2 w-full">
            <div class="relative flex-1">
                <span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-on-surface-variant text-lg">search</span>
                <input type="text" name="search" value="{{ request('search') }}" placeholder="Cari judul atau kategori artikel..." class="w-full pl-9 pr-4 py-2 bg-surface-container-low border border-outline-variant rounded-xl text-xs focus:ring-1 focus:ring-primary">
            </div>
            <select name="status" class="bg-surface-container-low border border-outline-variant rounded-xl text-xs px-3 py-2">
                <option value="">Semua Status</option>
                <option value="published" {{ request('status') === 'published' ? 'selected' : '' }}>Dipublikasikan</option>
                <option value="draft" {{ request('status') === 'draft' ? 'selected' : '' }}>Draft</option>
            </select>
            <button type="submit" class="px-4 py-2 bg-surface-container-high hover:bg-surface-container-highest text-on-surface rounded-xl text-xs font-bold transition-colors">
                Filter
            </button>
        </form>
    </div>

    <!-- Articles Table -->
    <div class="bg-surface-container-lowest rounded-2xl border border-outline-variant/30 shadow-xs overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full text-left text-xs">
                <thead class="bg-surface-container-low text-on-surface-variant uppercase text-[10px] font-bold border-b border-outline-variant/30">
                    <tr>
                        <th class="px-4 py-3.5">Artikel</th>
                        <th class="px-4 py-3.5">Kategori</th>
                        <th class="px-4 py-3.5">Penulis</th>
                        <th class="px-4 py-3.5 text-center">Status</th>
                        <th class="px-4 py-3.5 text-center">Views</th>
                        <th class="px-4 py-3.5 text-center">Tanggal</th>
                        <th class="px-4 py-3.5 text-right">Aksi</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-outline-variant/20">
                    @forelse($articles as $art)
                    <tr class="hover:bg-surface-container-low/50 transition-colors">
                        <td class="px-4 py-3">
                            <div class="flex items-center gap-3">
                                <img src="{{ $art->image_url }}" alt="{{ $art->title }}" class="w-12 h-10 object-cover rounded-lg bg-surface-container flex-shrink-0">
                                <div class="min-w-0">
                                    <p class="font-bold text-on-surface truncate max-w-xs">{{ $art->title }}</p>
                                    <p class="text-[11px] text-on-surface-variant truncate max-w-xs">{{ $art->slug }}</p>
                                </div>
                            </div>
                        </td>
                        <td class="px-4 py-3 whitespace-nowrap">
                            <span class="px-2.5 py-1 rounded-full text-[10px] font-bold bg-primary/10 text-primary">
                                {{ $art->category }}
                            </span>
                        </td>
                        <td class="px-4 py-3 text-on-surface whitespace-nowrap font-medium">
                            {{ $art->author_name }}
                        </td>
                        <td class="px-4 py-3 text-center whitespace-nowrap">
                            <form action="{{ route('admin.articles.toggle-status', $art->id) }}" method="POST" class="inline-block">
                                @csrf
                                <button type="submit" class="px-2.5 py-1 rounded-full text-[10px] font-bold {{ $art->is_published ? 'bg-emerald-500/15 text-emerald-700 hover:bg-emerald-500/25' : 'bg-amber-500/15 text-amber-700 hover:bg-amber-500/25' }} transition-colors">
                                    {{ $art->is_published ? 'Published' : 'Draft' }}
                                </button>
                            </form>
                        </td>
                        <td class="px-4 py-3 text-center text-on-surface-variant font-semibold">
                            {{ $art->views_count }}
                        </td>
                        <td class="px-4 py-3 text-center text-on-surface-variant whitespace-nowrap text-[11px]">
                            {{ $art->formatted_date }}
                        </td>
                        <td class="px-4 py-3 text-right whitespace-nowrap">
                            <div class="flex items-center justify-end gap-1.5">
                                <a href="{{ main_url('articles/' . $art->slug) }}" target="_blank" class="p-1.5 rounded-lg text-on-surface-variant hover:text-primary hover:bg-surface-variant/50 transition-colors" title="Lihat di Web">
                                    <span class="material-symbols-outlined text-base">visibility</span>
                                </a>
                                <a href="{{ route('admin.articles.edit', $art->id) }}" class="p-1.5 rounded-lg text-on-surface-variant hover:text-primary hover:bg-surface-variant/50 transition-colors" title="Edit">
                                    <span class="material-symbols-outlined text-base">edit</span>
                                </a>
                                <form action="{{ route('admin.articles.destroy', $art->id) }}" method="POST" onsubmit="return confirm('Apakah Anda yakin ingin menghapus artikel ini?');" class="inline-block">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="p-1.5 rounded-lg text-on-surface-variant hover:text-error hover:bg-error/10 transition-colors" title="Hapus">
                                        <span class="material-symbols-outlined text-base">delete</span>
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="7" class="px-4 py-12 text-center text-on-surface-variant">
                            <span class="material-symbols-outlined text-4xl mb-2 text-outline">article</span>
                            <p class="font-bold text-sm">Belum ada artikel</p>
                            <p class="text-xs mt-1">Silakan klik "Tulis Artikel Baru" untuk membuat artikel pertama.</p>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if($articles->hasPages())
        <div class="p-4 border-t border-outline-variant/30">
            {{ $articles->links() }}
        </div>
        @endif
    </div>

</div>
@endsection