@extends('admin.layouts.admin')

@section('title', 'Portfolio Categories')
@section('page_title', 'Portfolio Categories')

@section('title_actions')
    <a href="{{ route('admin.portfolio-categories.create') }}"
        class="bg-primary text-white px-6 py-2 rounded-md font-black text-[10px] uppercase tracking-widest shadow-lg shadow-blue-500/20 hover:bg-primary-hover transition-all flex items-center space-x-2">
        <i class="fas fa-folder-plus"></i>
        <span>Add Category</span>
    </a>
@endsection

@section('content')
    <div
        class="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden dark:bg-[#1a233a] dark:border-white/5 transition-colors duration-300">
        <div class="overflow-x-auto">
            <table class="w-full text-left border-collapse">
                <thead>
                    <tr class="bg-slate-50 border-b border-slate-100 dark:bg-white/5 dark:border-white/5">
                        <th class="px-6 py-4 text-[11px] font-black text-slate-500 uppercase tracking-widest w-16">Sort</th>
                        <th class="px-6 py-4 text-[11px] font-black text-slate-500 uppercase tracking-widest">Name</th>
                        <th
                            class="px-6 py-4 text-[11px] font-black text-slate-500 uppercase tracking-widest w-24 text-right">
                            Actions</th>
                    </tr>
                </thead>
                <tbody id="categories-table-body">
                    @forelse($categories as $category)
                        <tr class="border-b border-slate-50 last:border-0 hover:bg-slate-50/50 transition-colors dark:border-white/5 dark:hover:bg-white/[0.02]"
                            data-id="{{ $category->id }}">
                            <td class="px-6 py-4 cursor-move text-slate-300">
                                <i class="fas fa-grip-vertical"></i>
                            </td>
                            <td class="px-6 py-4">
                                <div class="text-sm font-bold text-slate-700 dark:text-slate-200">{{ $category->name }}</div>
                                <div class="text-[10px] text-slate-400 font-mono tracking-tighter uppercase">
                                    {{ $category->slug }}</div>
                            </td>
                            <td class="px-6 py-4 text-right">
                                <div class="flex items-center justify-end space-x-2">
                                    <a href="{{ route('admin.portfolio-categories.edit', $category->id) }}"
                                        class="w-8 h-8 rounded-lg border border-slate-200 flex items-center justify-center text-slate-400 hover:text-primary hover:border-primary transition-all dark:border-white/10">
                                        <i class="fas fa-edit text-xs"></i>
                                    </a>
                                    <form action="{{ route('admin.portfolio-categories.destroy', $category->id) }}"
                                        method="POST"
                                        onsubmit="return confirm('Delete this category? All associated items will be deleted!')">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit"
                                            class="w-8 h-8 rounded-lg border border-slate-200 flex items-center justify-center text-slate-400 hover:text-rose-500 hover:border-rose-500 transition-all dark:border-white/10">
                                            <i class="fas fa-trash text-xs"></i>
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="3" class="px-6 py-12 text-center font-bold text-slate-500 uppercase tracking-widest">No
                                categories found.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const body = document.getElementById('categories-table-body');
            new Sortable(body, {
                animation: 150,
                handle: '.cursor-move',
                onEnd: function () {
                    const orders = [];
                    body.querySelectorAll('tr').forEach((row, index) => {
                        orders.push({ id: row.dataset.id, sort_order: index });
                    });
                    fetch('{{ route("admin.portfolio-categories.update-order") }}', {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
                        body: JSON.stringify({ orders: orders })
                    });
                }
            });
        });
    </script>
@endsection