@extends('layouts.app')
@section('title', 'بنود المصروفات')
@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('expenses.index') }}">المصروفات</a></li>
    <li class="breadcrumb-item active">البنود</li>
@endsection

@section('page_actions')
    @can('expenses.create')
        <a href="{{ route('expense-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="expCatTable" :headers="['#', 'اسم البند', 'الوصف', 'عدد الحركات', 'الإجمالي', 'الحالة', 'الإجراءات']"/>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(function () {
    $('#expCatTable').DataTable(dtDefaults({
        ajax: '{{ route('expense-categories.index') }}',
        columns: [
            { data: 'id', name: 'id', className: 'text-center', width: '50px' },
            { data: 'name', name: 'name' },
            { data: 'description', name: 'description' },
            { data: 'expenses_count', name: 'expenses_count', className: 'text-center', searchable: false },
            { data: 'total', name: 'expenses_sum_amount', 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