@extends('layouts.app')

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

@section('content')
    <div x-data="{
        showModal: false,
        isEditing: false,
        category: { id: null, name: '' },
        formAction: '{{ route('admin.categories.store') }}',
        formMethod: 'POST',
    
        openModal(editMode, data = null) {
            this.isEditing = editMode;
            if (editMode && data) {
                this.category = data;
                this.formAction = `{{ url('admin/categories') }}/${data.id}`;
                this.formMethod = 'PUT';
            } else {
                this.category = { id: null, name: '' };
                this.formAction = '{{ route('admin.categories.store') }}';
                this.formMethod = 'POST';
            }
            this.showModal = true;
        }
    }" class="bg-gray-50 min-h-screen font-sans">

        {{-- Top Decoration Bar --}}
        <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 py-8 px-4 sm:px-6 lg:px-8 relative z-10">

            {{-- 
                PERBAIKAN NOTIFIKASI DI SINI:
                1. top-6 diubah jadi top-24 (supaya turun ke bawah header/navbar)
                2. z-50 diubah jadi z-[999] (supaya layer-nya paling atas)
            --}}
            @if (session('success') || session('error'))
                <div x-data="{ show: true }" x-show="show" x-transition.duration.500ms x-init="setTimeout(() => show = false, 5000)"
                    class="fixed top-24 right-6 z-[999] flex items-center w-full max-w-xs p-4 space-x-3 text-gray-500 bg-white rounded-xl shadow-2xl border-l-4 {{ session('success') ? 'border-green-500' : 'border-red-500' }}"
                    role="alert">
                    <div class="flex-shrink-0">
                        @if (session('success'))
                            <svg class="w-6 h-6 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                            </svg>
                        @else
                            <svg class="w-6 h-6 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                            </svg>
                        @endif
                    </div>
                    <div class="text-sm font-medium">{{ session('success') ?: session('error') }}</div>
                    <button @click="show = false"
                        class="ml-auto bg-white text-gray-400 hover:text-gray-900 rounded-lg p-1.5 hover:bg-gray-100 inline-flex h-8 w-8">
                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd"
                                d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
                                clip-rule="evenodd"></path>
                        </svg>
                    </button>
                </div>
            @endif

            {{-- Header Section --}}
            <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 font-semibold tracking-wide uppercase text-xs mb-2">Manajemen Konten</h2>
                    <h1 class="text-4xl font-extrabold tracking-tight">Kategori Artikel</h1>
                    <p class="mt-2 text-blue-100 max-w-lg text-lg opacity-90">Organisir konten Anda agar lebih mudah
                        ditemukan oleh pembaca.</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>
                    <button @click="openModal(false)"
                        class="px-5 py-3 rounded-xl bg-white text-blue-900 font-bold shadow-[0_10px_20px_rgba(0,0,0,0.2)] hover:shadow-[0_15px_25px_rgba(0,0,0,0.3)] hover:-translate-y-1 transition-all duration-300 flex items-center gap-2">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                            <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" />
                        </svg>
                        Buat Kategori
                    </button>
                </div>
            </div>

            {{-- Content Grid (Card Layout) --}}
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
                @forelse ($categories as $category)
                    <div
                        class="group bg-white rounded-2xl p-6 shadow-sm border border-gray-100 hover:shadow-xl hover:border-blue-100 transition-all duration-300 relative overflow-hidden">
                        {{-- Background Decoration --}}
                        <div
                            class="absolute top-0 right-0 -mt-4 -mr-4 w-24 h-24 bg-gray-50 rounded-full group-hover:bg-blue-50 transition-colors duration-300 z-0">
                        </div>

                        <div class="relative z-10 flex flex-col h-full">
                            <div class="flex justify-between items-start mb-4">
                                <div class="bg-blue-100 text-blue-700 p-3 rounded-xl">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none"
                                        viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
                                    </svg>
                                </div>
                                <span
                                    class="bg-gray-100 text-gray-600 text-xs font-bold px-3 py-1 rounded-full group-hover:bg-blue-600 group-hover:text-white transition-colors">
                                    {{ $category->articles_count }} Artikel
                                </span>
                            </div>

                            <h3 class="text-xl font-bold text-gray-800 mb-1 group-hover:text-blue-700 transition-colors">
                                {{ $category->name }}</h3>
                            <p class="text-gray-400 text-sm font-mono mb-6">/{{ $category->slug }}</p>

                            <div
                                class="mt-auto pt-4 border-t border-gray-50 flex justify-between items-center opacity-80 group-hover:opacity-100 transition-opacity">
                                <button @click="openModal(true, {{ $category->toJson() }})"
                                    class="text-sm font-semibold text-gray-600 hover:text-blue-600 flex items-center gap-1">
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z">
                                        </path>
                                    </svg>
                                    Edit
                                </button>

                                <form action="{{ route('admin.categories.destroy', $category) }}" method="POST"
                                    onsubmit="return confirm('Hapus kategori {{ $category->name }}?');">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit"
                                        class="text-sm font-semibold text-gray-400 hover:text-red-500 flex items-center gap-1 transition-colors">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16">
                                            </path>
                                        </svg>
                                        Hapus
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>
                @empty
                    <div class="col-span-full">
                        <div class="bg-white rounded-2xl p-12 text-center border-2 border-dashed border-gray-200">
                            <div
                                class="mx-auto w-20 h-20 bg-gray-50 rounded-full flex items-center justify-center mb-4 text-gray-300">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10" fill="none" viewBox="0 0 24 24"
                                    stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
                                </svg>
                            </div>
                            <h3 class="text-lg font-medium text-gray-900">Belum ada kategori</h3>
                            <p class="text-gray-500 mt-1">Mulai dengan membuat kategori baru untuk artikel Anda.</p>
                        </div>
                    </div>
                @endforelse
            </div>

            @if ($categories->hasPages())
                <div class="mt-8">
                    {{ $categories->links() }}
                </div>
            @endif
        </div>

        {{-- Modal Backdrop --}}
        <div x-show="showModal" style="display: none;" class="fixed inset-0 z-50 overflow-y-auto"
            aria-labelledby="modal-title" role="dialog" aria-modal="true">

            <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">

                <div x-show="showModal" x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0"
                    x-transition:enter-end="opacity-100" x-transition:leave="ease-in duration-200"
                    x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"
                    class="fixed inset-0 bg-slate-900/60 backdrop-blur-sm transition-opacity" aria-hidden="true"
                    @click="showModal = false">
                </div>

                <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>

                <div x-show="showModal" x-transition:enter="ease-out duration-300"
                    x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
                    x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
                    x-transition:leave="ease-in duration-200"
                    x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
                    x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
                    class="relative inline-block align-bottom bg-white rounded-2xl text-left overflow-hidden shadow-[0_25px_50px_-12px_rgba(0,0,0,0.25)] transform transition-all sm:my-8 sm:align-middle sm:max-w-lg w-full">

                    <form :action="formAction" method="POST">
                        @csrf
                        <template x-if="isEditing">
                            <input type="hidden" name="_method" value="PUT">
                        </template>

                        {{-- Modal Header --}}
                        <div class="relative bg-blue-600 px-6 py-6 overflow-hidden">
                            <div class="absolute top-0 right-0 -mt-2 -mr-2 w-24 h-24 bg-white/10 rounded-full blur-xl">
                            </div>
                            <div class="absolute bottom-0 left-0 -mb-2 -ml-2 w-16 h-16 bg-black/10 rounded-full blur-lg">
                            </div>

                            <h3 class="text-xl leading-6 font-bold text-white relative z-10" id="modal-title"
                                x-text="isEditing ? 'Edit Kategori' : 'Kategori Baru'"></h3>
                            <p class="text-blue-200 text-sm mt-1 relative z-10">Pastikan nama kategori singkat dan jelas.
                            </p>

                            <button type="button" @click="showModal = false"
                                class="absolute top-4 right-4 text-blue-200 hover:text-white transition-colors">
                                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M6 18L18 6M6 6l12 12"></path>
                                </svg>
                            </button>
                        </div>

                        <div class="px-6 py-8">
                            <div class="space-y-4">
                                <div>
                                    <label for="name" class="block text-sm font-bold text-gray-700 mb-2">Nama
                                        Kategori</label>
                                    <input type="text" name="name" id="name" x-model="category.name"
                                        class="block w-full px-4 py-3 rounded-xl bg-gray-50 border-gray-200 text-gray-900 placeholder-gray-400 focus:bg-white focus:border-blue-500 focus:ring-4 focus:ring-blue-500/10 transition-all duration-200 @error('name') border-red-500 @enderror"
                                        placeholder="Contoh: Teknologi, Kesehatan..." required>
                                    @error('name')
                                        <p class="text-red-500 text-xs mt-2 flex items-center">
                                            <svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
                                                <path fill-rule="evenodd"
                                                    d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"
                                                    clip-rule="evenodd"></path>
                                            </svg>
                                            {{ $message }}
                                        </p>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="bg-gray-50 px-6 py-4 flex flex-row-reverse gap-3">
                            <button type="submit"
                                class="w-full sm:w-auto inline-flex justify-center rounded-xl border border-transparent shadow-sm px-6 py-2.5 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-200 sm:text-sm">
                                <span x-text="isEditing ? 'Simpan Perubahan' : 'Buat Kategori'"></span>
                            </button>
                            <button type="button" @click="showModal = false"
                                class="mt-3 w-full sm:mt-0 sm:w-auto inline-flex justify-center rounded-xl border border-gray-300 shadow-sm px-6 py-2.5 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-200 sm:text-sm">
                                Batal
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection