@extends('layouts.admin')
@section('title', __('app.categories'))

@section('content')
<div class="flex items-center justify-between mb-6">
    <div>
        <h1 class="text-2xl font-bold text-brand-900">{{ __('app.categories') }}</h1>
        <p class="text-sm text-brand-400 mt-0.5">{{ __('app.total') }}: {{ $categories->total() }}</p>
    </div>
    <a href="{{ route('admin.categories.create') }}" class="btn-primary !py-2.5 !px-5 text-sm">
        <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="M12 4v16m8-8H4"/></svg>
        {{ __('app.create') }}
    </a>
</div>

<div class="bg-white rounded-2xl shadow-sm border border-brand-100/50 overflow-hidden">
    <div class="overflow-x-auto">
        <table class="w-full text-sm">
            <thead class="bg-cream-50">
                <tr>
                    <th class="px-5 py-3.5 text-{{ app()->getLocale() === 'ar' ? 'right' : 'left' }} font-semibold text-brand-500 text-xs uppercase tracking-wider">{{ __('app.image') }}</th>
                    <th class="px-5 py-3.5 text-{{ app()->getLocale() === 'ar' ? 'right' : 'left' }} font-semibold text-brand-500 text-xs uppercase tracking-wider">{{ __('app.name_ar') }}</th>
                    <th class="px-5 py-3.5 text-{{ app()->getLocale() === 'ar' ? 'right' : 'left' }} font-semibold text-brand-500 text-xs uppercase tracking-wider">{{ __('app.name_en') }}</th>
                    <th class="px-5 py-3.5 text-{{ app()->getLocale() === 'ar' ? 'right' : 'left' }} font-semibold text-brand-500 text-xs uppercase tracking-wider">{{ __('app.products') }}</th>
                    <th class="px-5 py-3.5 text-{{ app()->getLocale() === 'ar' ? 'right' : 'left' }} font-semibold text-brand-500 text-xs uppercase tracking-wider">{{ __('app.is_active') }}</th>
                    <th class="px-5 py-3.5 text-{{ app()->getLocale() === 'ar' ? 'right' : 'left' }} font-semibold text-brand-500 text-xs uppercase tracking-wider">{{ __('app.actions') }}</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-brand-100/50">
                @foreach($categories as $category)
                <tr class="hover:bg-cream-50/50 transition-colors">
                    <td class="px-5 py-4">
                        @if($category->image)
                            <img src="{{ asset('storage/' . $category->image) }}" class="w-12 h-12 rounded-xl object-cover border border-brand-100" alt="">
                        @else
                            <div class="w-12 h-12 bg-gradient-to-br from-brand-50 to-brand-100 rounded-xl flex items-center justify-center">
                                <svg class="w-5 h-5 text-brand-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                            </div>
                        @endif
                    </td>
                    <td class="px-5 py-4 font-bold text-brand-800">{{ $category->t('name', 'ar') }}</td>
                    <td class="px-5 py-4 text-brand-600">{{ $category->t('name', 'en') }}</td>
                    <td class="px-5 py-4"><span class="bg-brand-50 text-brand-600 px-2.5 py-1 rounded-full text-xs font-bold">{{ $category->products_count }}</span></td>
                    <td class="px-5 py-4">
                        <span class="badge-status {{ $category->is_active ? 'bg-emerald-100 text-emerald-700' : 'bg-red-100 text-red-700' }}">
                            {{ $category->is_active ? __('app.is_active') : '—' }}
                        </span>
                    </td>
                    <td class="px-5 py-4">
                        <div class="flex items-center gap-3">
                            <a href="{{ route('admin.categories.edit', $category) }}" class="text-brand-500 hover:text-brand-700 font-semibold transition-colors text-xs">{{ __('app.edit') }}</a>
                            <form action="{{ route('admin.categories.destroy', $category) }}" method="POST" onsubmit="return confirm('{{ __('app.confirm_delete') }}')">
                                @csrf @method('DELETE')
                                <button class="text-red-400 hover:text-red-600 font-semibold transition-colors text-xs">{{ __('app.delete') }}</button>
                            </form>
                        </div>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
    <div class="p-5 border-t border-brand-100/50">{{ $categories->links() }}</div>
</div>
@endsection