@extends('layouts.app')
@section('title', 'الموردون')
@section('breadcrumb')<li class="breadcrumb-item active">الموردون</li>@endsection

@section('page_actions')
    @can('suppliers.create')
        <a href="{{ route('suppliers.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-truck-field text-primary ms-2"></i>قائمة الموردين</span></div>
    <div class="card-body">
        <x-datatable id="suppliersTable" :headers="['#', 'الكود', 'اسم المورد', 'مسؤول التواصل', 'الجوال', 'المدينة', 'المشتريات', 'إجمالي التعامل', 'الحالة', 'الإجراءات']"/>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(function () {
    $('#suppliersTable').DataTable(dtDefaults({
        ajax: '{{ route('suppliers.index') }}',
        columns: [
            { data: 'id', name: 'id', className: 'text-center', width: '50px' },
            { data: 'code', name: 'code' },
            { data: 'name', name: 'name' },
            { data: 'contact_person', name: 'contact_person' },
            { data: 'phone', name: 'phone' },
            { data: 'city', name: 'city' },
            { data: 'purchases_count', name: 'purchases_count', className: 'text-center', searchable: false },
            { data: 'purchases_total_fmt', name: 'purchases_total', 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