@extends('layouts.app')

@section('title', 'Kelola Artikel')

@section('content')
<div class="bg-gray-50 min-h-screen font-sans">

    <!-- 🔷 BACKGROUND HEADER -->
    <div class="h-64 bg-gradient-to-r from-blue-900 via-blue-600 to-blue-400 rounded-xl p-8 shadow-lg w-full absolute top-0 left-0 z-0"></div>

    <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-8 relative z-10">

        <!-- HEADER -->
        <div class="flex flex-col md:flex-row md:items-end justify-between mb-10 gap-6">
            <div class="text-white">
                <h2 class="text-blue-200 text-xs uppercase tracking-wide mb-2">Manajemen Konten</h2>
                <h1 class="text-4xl font-extrabold">Artikel</h1>
                <p class="text-blue-100 mt-2 opacity-90">Kelola semua artikel dengan mudah dan cepat</p>
            </div>

            <div class="flex gap-3">
                <a href="{{ route('admin.dashboard') }}"
                    class="px-5 py-3 rounded-xl bg-white/10 backdrop-blur-md border border-white/20 text-white font-medium hover:bg-white/20 transition shadow-lg">
                    Kembali
                </a>

                <a href="{{ route('admin.articles.create') }}"
                    class="px-5 py-3 rounded-xl bg-white text-blue-900 font-bold shadow-lg hover:-translate-y-1 hover:shadow-xl transition-all flex items-center gap-2">
                    ➕ Buat Artikel
                </a>
            </div>
        </div>

        <!-- 🔍 SEARCH + TABLE WRAPPER -->
        <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">

            <!-- SEARCH BAR -->
            <div class="p-5 border-b flex flex-col sm:flex-row justify-between items-center gap-4">
                <h3 class="text-lg font-semibold text-gray-800">Daftar Artikel</h3>

                <form method="GET" class="relative w-full sm:w-72">
                    <input type="text" name="search" value="{{ request('search') }}"
                        class="w-full pl-10 pr-10 py-2 rounded-xl border border-gray-200 bg-gray-50 focus:bg-white focus:ring-2 focus:ring-blue-500"
                        placeholder="Cari artikel...">

                    <div class="absolute left-3 top-2.5 text-gray-400">🔍</div>

                    @if(request('search'))
                        <a href="{{ url()->current() }}" class="absolute right-3 top-2.5 text-red-400 hover:text-red-600">✕</a>
                    @endif
                </form>
            </div>

            <!-- DESKTOP TABLE -->
            <div class="hidden md:block">
                <table class="min-w-full">
                    <thead class="bg-gray-50 text-gray-500 text-xs uppercase">
                        <tr>
                            <th class="px-6 py-3 text-left">Artikel</th>
                            <th class="px-6 py-3 text-left">Tanggal</th>
                            <th class="px-6 py-3 text-right">Aksi</th>
                        </tr>
                    </thead>

                    <tbody class="divide-y">
                        @forelse ($articles as $article)
                            <tr class="hover:bg-blue-50 transition">

                                <td class="px-6 py-4">
                                    <div class="flex items-center gap-4">

                                        <!-- IMAGE -->
                                        <div class="w-12 h-12 rounded-xl overflow-hidden bg-gray-100">
                                            @if ($article->images->isNotEmpty())
                                                <img src="{{ asset('storage/' . $article->images->first()->path) }}"
                                                    class="w-full h-full object-cover">
                                            @else
                                                <div class="flex items-center justify-center h-full text-gray-400">🖼️</div>
                                            @endif
                                        </div>

                                        <!-- TEXT -->
                                        <div>
                                            <p class="font-bold text-gray-800">
                                                {{ Str::limit($article->title, 50) }}
                                            </p>
                                            <p class="text-sm text-gray-400">
                                                {{ $article->category->name ?? '-' }}
                                            </p>
                                        </div>

                                    </div>
                                </td>

                                <td class="px-6 py-4 text-sm text-gray-500">
                                    {{ $article->created_at->translatedFormat('d F Y') }}
                                </td>

                                <td class="px-6 py-4 text-right">
                                    <div class="flex justify-end gap-3">

                                        <a href="{{ route('admin.articles.edit', $article) }}"
                                            class="px-3 py-1 rounded-lg bg-indigo-50 text-indigo-600 hover:bg-indigo-100 text-sm">
                                            Edit
                                        </a>

                                        <form method="POST" action="{{ route('admin.articles.destroy', $article) }}"
                                            onsubmit="return confirm('Hapus artikel ini?')">
                                            @csrf
                                            @method('DELETE')
                                            <button
                                                class="px-3 py-1 rounded-lg bg-red-50 text-red-600 hover:bg-red-100 text-sm">
                                                Hapus
                                            </button>
                                        </form>

                                    </div>
                                </td>

                            </tr>
                        @empty
                            <tr>
                                <td colspan="3" class="text-center py-12 text-gray-400">
                                    Belum ada artikel
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <!-- MOBILE -->
            <div class="md:hidden p-4 space-y-4">
                @foreach ($articles as $article)
                    <div class="bg-white rounded-2xl shadow-sm border p-4">

                        <div class="flex gap-3">
                            <div class="w-14 h-14 bg-gray-100 rounded-xl"></div>

                            <div>
                                <p class="text-xs text-gray-400">{{ $article->category->name ?? '-' }}</p>
                                <h3 class="font-bold text-gray-800">{{ $article->title }}</h3>
                                <p class="text-xs text-gray-500">{{ $article->created_at->translatedFormat('d M Y') }}</p>
                            </div>
                        </div>

                        <div class="mt-4 flex justify-end gap-3">
                            <a href="{{ route('admin.articles.edit', $article) }}"
                                class="text-indigo-600 text-sm">Edit</a>

                            <form method="POST" action="{{ route('admin.articles.destroy', $article) }}">
                                @csrf @method('DELETE')
                                <button class="text-red-600 text-sm">Hapus</button>
                            </form>
                        </div>

                    </div>
                @endforeach
            </div>

  
            <div class="p-4 border-t">
                {{ $articles->links() }}
            </div>

        </div>
    </div>
</div>
@endsection