@extends('layouts.app')
@section('title', 'تصنيفات المنتجات')
@section('breadcrumb')<li class="breadcrumb-item active">تصنيفات المنتجات</li>@endsection

@section('page_actions')
    @can('categories.create')
        <a href="{{ route('categories.create') }}" class="btn btn-primary"><i class="fa-solid fa-plus ms-2"></i>تصنيف جديد</a>
    @endcan
@endsection

@section('content')
<div class="card">
    <div class="card-header"><span><i class="fa-solid fa-tags text-primary ms-2"></i>التصنيفات</span></div>
    <div class="card-body">
        <x-datatable id="categoriesTable" :headers="['#', 'اسم التصنيف', 'الوصف', 'عدد المنتجات', 'الحالة', 'الإجراءات']"/>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(function () {
    $('#categoriesTable').DataTable(dtDefaults({
        ajax: '{{ route('categories.index') }}',
        columns: [
            { data: 'id', name: 'id', className: 'text-center', width: '50px' },
            { data: 'name', name: 'name' },
            { data: 'description', name: 'description' },
            { data: 'products_count', name: 'products_count', className: 'text-center', searchable: false },
            { data: 'status', name: 'is_active', className: 'text-center' },
            { data: 'action', name: 'action', orderable: false, searchable: false, className: 'text-center', width: '110px' },
        ],
    }));
});
</script>
@endpush