@extends('admin.layouts.master-index')

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

@section('table')
    <table class="table align-middle table-row-dashed fs-4 gy-5" id="users_table">
        <thead>
            <tr class="text-start text-muted fw-bolder fs-5 text-uppercase gs-0">
                <th class="w-10px pe-2">
                    <div class="form-check form-check-sm form-check-custom form-check-solid me-3">
                        <input class="form-check-input" type="checkbox" data-kt-check="true"
                            data-kt-check-target="#users_table .form-check-input" value="1" />
                    </div>
                </th>
                <th class="min-w-125px">الصورة</th>
                <th class="min-w-125px">العميل</th>
                <th class="min-w-125px">رقم الجوال</th>
                <th class="min-w-125px">النوع</th>
                <th class="min-w-125px">تاريخ الميلاد</th>
                <th class=" min-w-100px">الاجراءات</th>
            </tr>
        </thead>
    </table>
@endsection

@section('script')
    <script type="text/javascript">
        $(function() {
            var table = $('#users_table').DataTable({
                processing: true,
                serverSide: true,
                autoWidth: false,
                responsive: true,
                deferRender: true,
                aaSorting: [],
                "dom": "<'card-header border-0 p-0 pt-6'<'card-title' <'d-flex align-items-center position-relative my-1'f> r> <'card-toolbar' <'d-flex justify-content-end add_button'B> r>>  <'row'l r> <''t><'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>", // horizobtal scrollable datatable
                lengthMenu: [
                    [10, 25, 50, 100, 250, -1],
                    [10, 25, 50, 100, 250, "الكل"]
                ],
                "language": {
                    search: '<i class="fa fa-eye" aria-hidden="true"></i>',
                    searchPlaceholder: 'بحث سريع',
                    "url": "{{ url('admin/assets/ar.json') }}"
                },
                buttons: [{
                        extend: 'print',
                        className: 'btn btn-light-primary me-3',
                        text: '<i class="bi bi-printer-fill fs-2x"></i>'
                    },
                    // {extend: 'pdf', className: 'btn btn-raised btn-danger', text: 'PDF'},
                    {
                        extend: 'excel',
                        className: 'btn btn-light-primary me-3',
                        text: '<i class="bi bi-file-earmark-spreadsheet-fill fs-2x"></i>'
                    },
                    // {extend: 'colvis', className: 'btn secondary', text: 'إظهار / إخفاء الأعمدة '}
                ],
                ajax: {
                    url: '{{ route('users.datatable') }}',
                    data: {}
                },
                columns: [{
                        data: 'checkbox',
                        name: 'checkbox',
                        "searchable": false,
                        "orderable": false
                    },
                    {
                        data: 'image',
                        name: 'image',
                        "searchable": false,
                        "orderable": false
                    },
                    {
                        data: 'name',
                        name: 'name',
                        "searchable": true,
                        "orderable": true
                    },
                    {
                        data: 'phone',
                        name: 'phone',
                        "searchable": true,
                        "orderable": true
                    },
                    {
                        data: 'gender',
                        name: 'gender',
                        "searchable": true,
                        "orderable": true
                    },
                    {
                        data: 'birth_date',
                        name: 'birth_date',
                        "searchable": true,
                        "orderable": true
                    },
                    {
                        data: 'actions',
                        name: 'actions',
                        "searchable": false,
                        "orderable": false
                    },
                ]
            });
            $.ajax({
                url: '{{ route('users.button') }}',
                success: function(data) {
                    $('.add_button').append(data);
                },
                dataType: 'html'
            });
        });
    </script>
@endsection