@extends('admin.layouts.default')
@section('page_title', 'Categories' . config('default.page_title_delimiter') . config('default.app_name'))
@section('content')
<div class="w-full max-w-7xl mx-auto px-4 md:px-6 py-6 md:py-8" 
     x-data="{ 
        selectAll: false, 
        selectedCount: 0,
        updateCount() {
            this.selectedCount = document.querySelectorAll('.item-checkbox:checked').length;
        }
     }">

    <div class="mb-8 flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
        <div class="flex items-center gap-3">
            <div class="p-2.5 bg-primary-50 dark:bg-primary-500/10 rounded-xl text-primary-600 shadow-sm">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6"><rect x="3" y="3" width="7" height="7"></rect><rect x="14" y="3" width="7" height="7"></rect><rect x="14" y="14" width="7" height="7"></rect><rect x="3" y="14" width="7" height="7"></rect></svg>
            </div>
            <div>
                <h1 class="text-2xl md:text-3xl font-bold text-secondary-900 dark:text-white tracking-tight">Categories Center</h1>
                <div class="flex items-center gap-2 mt-1">
                    <span class="inline-flex px-2 py-0.5 rounded-md bg-secondary-100 dark:bg-secondary-800 text-[11px] font-medium text-secondary-500">
                        {{ $categories->count() }} total categories
                    </span>
                </div>
            </div>
        </div>

        <div>
            <a href="{{ route('admin.categories.create') }}" class="bg-secondary-900 hover:bg-secondary-800 dark:bg-white dark:hover:bg-secondary-100 text-white dark:text-secondary-900 font-bold text-xs px-4 py-2 rounded-xl transition-all cursor-pointer">
                + Add New Category
            </a>
        </div>
    </div>

    @if(session('success'))
        <div class="mb-6 p-4 bg-emerald-50 dark:bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border border-emerald-100 dark:border-emerald-500/20 rounded-2xl text-sm font-bold">
            {{ session('success') }}
        </div>
    @endif

    <div class="bg-white dark:bg-secondary-900 border border-secondary-200 dark:border-secondary-800 rounded-3xl shadow-sm overflow-hidden">
        <div class="overflow-x-auto text-secondary-900 dark:text-white">
            <table class="w-full text-sm text-left">
                <thead class="bg-secondary-50/30 dark:bg-secondary-800/20 text-[11px] text-secondary-400 uppercase font-bold tracking-wider border-b border-secondary-100 dark:border-secondary-800">
                    <tr class="h-16">
                        <th class="px-6 w-12 text-center">
                            <input type="checkbox" 
                                   x-model="selectAll" 
                                   @change="document.querySelectorAll('.item-checkbox').forEach(el => el.checked = selectAll); updateCount()"
                                   class="w-4 h-4 rounded border-secondary-300 text-primary-600 focus:ring-primary-500 bg-white dark:bg-secondary-800 cursor-pointer">
                        </th>
                        <th class="px-4 w-20">ID</th>
                        <th class="px-4">Category Name</th>
                        <th class="px-4">Slug / URL</th>
                        <th class="px-4 text-center">Status</th>
                        <th class="px-6 text-right">Actions</th>
                    </tr>
                </thead>
                <tbody class="">
                    @forelse($categories as $category)
                    <tr class="h-20 hover:bg-secondary-50/30 dark:hover:bg-secondary-800/30 transition-colors">
                        <td class="px-6 text-center">
                            <input type="checkbox" 
                                   value="{{ $category->id }}"
                                   @change="updateCount(); selectAll = (document.querySelectorAll('.item-checkbox:checked').length === document.querySelectorAll('.item-checkbox').length)"
                                   class="item-checkbox w-4 h-4 rounded border-secondary-300 text-primary-600 focus:ring-primary-500 bg-white dark:bg-secondary-800 cursor-pointer">
                        </td>
                        <td class="px-4 font-medium text-secondary-400">#{{ $category->id }}</td>
                        <td class="px-4">
                            <span class="text-secondary-900 dark:text-white font-bold text-base">{{ $category->name }}</span>
                        </td>
                        <td class="px-4 text-secondary-500 dark:text-secondary-400 font-medium font-mono text-xs">
                            {{ $category->slug }}
                        </td>
                        <td class="px-4 text-center">
                            @if($category->is_active)
                                <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-[10px] font-bold bg-emerald-50 dark:bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border border-emerald-100 dark:border-emerald-500/20 uppercase tracking-wider">
                                    <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
                                    Active
                                </span>
                            @else
                                <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-[10px] font-bold bg-secondary-100 dark:bg-secondary-800 text-secondary-400 border border-secondary-200 dark:border-secondary-700 uppercase tracking-wider">
                                    <span class="w-1.5 h-1.5 rounded-full bg-secondary-400"></span>
                                    Inactive
                                </span>
                            @endif
                        </td>
                        <td class="px-6 text-right">
                            <div class="flex justify-end gap-2">
                                <a href="{{ route('admin.categories.edit', $category->id) }}" 
                                   class="p-2 text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-500/10 rounded-xl transition-all cursor-pointer">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 1 1 3 3L12 15l-4 1 1-4Z"></path></svg>
                                </a>

                                <form action="{{ route('admin.categories.destroy', $category->id) }}" method="POST" onsubmit="return confirm('Are you sure you want to delete this category?');" class="inline">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="p-2 text-secondary-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-500/10 rounded-xl transition-all cursor-pointer">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/></svg>
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="6" class="py-24 text-center text-secondary-300 dark:text-secondary-600 italic">No categories found. Start by creating one!</td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <div x-show="selectedCount > 0" 
             x-transition
             class="p-4 bg-secondary-50 dark:bg-secondary-800/50 border-t border-secondary-100 dark:border-secondary-800 flex flex-col sm:flex-row items-center gap-3 justify-between">
            <div class="text-xs font-bold text-secondary-500 dark:text-secondary-400">
                With selected <span class="text-primary-600 dark:text-primary-400" x-text="selectedCount"></span> items:
            </div>
            <div class="flex items-center gap-2 w-full sm:w-auto">
                <select id="table-with-selected" 
        class="bg-white dark:bg-secondary-800 border border-secondary-200 dark:border-secondary-700 rounded-xl px-3 py-2 text-xs font-bold outline-none text-secondary-700 dark:text-white focus:ring-2 focus:ring-primary-500">
    <option value="">Choose action...</option>
    <option value="activate">Mark as Active 🟢</option>
    <option value="deactivate">Mark as Inactive 🔴</option>
    <option value="delete">Delete Permanently 🗑️</option>
</select>
                <button type="button" 
                        @click="handleApply()"
                        class="bg-secondary-900 hover:bg-secondary-800 dark:bg-white dark:hover:bg-secondary-100 text-white dark:text-secondary-900 font-bold text-xs px-4 py-2 rounded-xl transition-all cursor-pointer">
                    Apply
                </button>
            </div>
        </div>
    </div>
</div>

<script>
function handleApply() {
    const action = document.getElementById('table-with-selected').value;
    if(!action) return;

    // تجميع الـ IDs اللي اتعلم عليها
    let ids = Array.from(document.querySelectorAll('.item-checkbox:checked')).map(el => el.value);
    if(!ids.length) return;

    // إظهار الـ Spinner لو موجود عندك في الـ Layout
    const spinner = document.getElementById('global-spinner');
    if(spinner) spinner.classList.remove('hidden');

    // استخدام الفنكشن المعتمدة في السيستم عندك لقائمة التأكيد الفخمة 🚀
    appConfirm('Bulk Action', 'Are you sure you want to perform this action on ' + ids.length + ' items?', {
        'btnConfirm': {
            'click': function() {
                fetch('{{ route("admin.categories.bulk-action") }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                    },
                    body: JSON.stringify({ 
                        ids: ids, 
                        action: action 
                    })
                })
                .then(response => response.json())
                .then(data => {
                    if(data.success) {
                        location.reload(); // ريفريش فوري عشان الداتا تتحدث 🎯
                    } else {
                        if(spinner) spinner.classList.add('hidden');
                        alert(data.message || 'Something went wrong');
                    }
                })
                .catch(err => {
                    if(spinner) spinner.classList.add('hidden');
                });
            }
        },
        'btnCancel': {
            'click': function() {
                if(spinner) spinner.classList.add('hidden');
            }
        }
    });
}
</script>
@endsection