@extends('admin.layouts.master')

@section('title', 'العملاء')

@section('page-header')
    <div class="row align-items-center">
        <div class="col">
            <div class="page-pretitle">الأطراف</div>
            <h2 class="page-title"><i class="ti ti-user-check ms-1"></i> العملاء</h2>
        </div>
        <div class="col-auto">
            <a href="{{ route('admin.customers.create') }}" class="btn btn-primary">
                <i class="ti ti-plus ms-1"></i> إضافة عميل جديد
            </a>
        </div>
    </div>
@endsection

@section('content')
    <div class="card">
        <div class="card-body">
            <table class="table table-vcenter table-striped" id="customers-table" style="width: 100%">
                <thead>
                <tr>
                    <th>#</th>
                    <th>الكود</th>
                    <th>الاسم</th>
                    <th>النوع</th>
                    <th>التصنيف</th>
                    <th>الجوال</th>
                    <th>الفرع</th>
                    <th>الرصيد الحالي</th>
                    <th>الحالة</th>
                    <th>إجراءات</th>
                </tr>
                </thead>
            </table>
        </div>
    </div>
@endsection

@push('scripts')
<script>
$(function () {
    $('#customers-table').DataTable({
        processing: true,
        serverSide: true,
        responsive: true,
        order: [[0, 'desc']],
        language: window.dtArabic,
        ajax: '{{ route('admin.customers.index') }}',
        columns: [
            { data: 'id', name: 'id' },
            { data: 'code', name: 'code' },
            { data: 'name', name: 'name' },
            { data: 'type_label', name: 'type', orderable: false },
            { data: 'category_label', name: 'category', orderable: false },
            { data: 'mobile', name: 'mobile' },
            { data: 'branch_name', name: 'branch.name' },
            { data: 'balance_formatted', name: 'current_balance' },
            { data: 'status', name: 'is_active', orderable: false },
            { data: 'actions', name: 'actions', orderable: false, searchable: false },
        ],
        dom: '<"row mb-3"<"col-md-6"l><"col-md-6"f>>rt<"row mt-3"<"col-md-6"i><"col-md-6"p>>',
        pageLength: 25,
    });
});
</script>
@endpush