@extends('layouts.master')

@section('content')
    <div class="main-content app-content mt-0">
        <div class="side-app">

            <!-- CONTAINER -->
            <div class="main-container container-fluid">

                <!-- PAGE-HEADER -->
                <div class="page-header">
                    <h1 class="page-title">{{__('common.app_users')}}</h1>
                    <div>
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="javascript:void(0)">{{__('common.tables')}}</a></li>
                            <li class="breadcrumb-item active" aria-current="page">{{__('common.app_users')}} </li>
                        </ol>
                    </div>

                </div>

                <div class="row row-sm">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title">{{__('common.app_users')}} {{__('common.details')}}</h3>
                            </div>
                            <div class="card-body">
                                <div >
                                    <table class="table table-bordered text-nowrap border-bottom dt-responsive" id="responsive-datatable-company" style="width:100%">
                                        <thead>
                                            <tr>
                                                <th class="wd-15p border-bottom-0">S.no</th>
                                                <th class="wd-15p border-bottom-0">{{__('common.name')}} & {{__('common.logo')}}</th>
                                                <th class="wd-15p border-bottom-0">{{__('common.email')}}</th>
                                                <th class="wd-20p border-bottom-0">{{__('common.phone')}}</th>
                                                <th class="wd-15p border-bottom-0">{{__('common.status')}}</th>
                                                <th class="wd-10p border-bottom-0">{{__('common.created_at')}}</th>
                                                <th class="wd-25p border-bottom-0">{{__('common.action')}}</th>
                                            </tr>
                                        </thead>

                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('bottom_script')
    <script>
        $(function() {
            $('#responsive-datatable-company').DataTable({
                processing: true,
                serverSide: true,
                responsive: true,
                ajax: '{{ route('get-users') }}',
                columns: [
                    {
                        data: null,
                        name: 'index',
                        orderable: false,
                        searchable: false,
                        render: function (data, type, row, meta) {
                            return meta.row + meta.settings._iDisplayStart + 1;
                        }
                    },
                    {
                        data: 'name'
                    },
                    {
                        data: 'email'
                    },
                    {
                        data: 'phone_number'
                    },
                    {
                        data: 'status',
                        name: 'status',
                        searchable: false,
                        render: function(data, type, row, meta) {
                            return data;
                        }
                    },

                    {
                        data: 'created_at',
                    },
                    {
                        searchable: false,
                        name: 'action',
                        orderable: false,
                        data: 'action',
                    }
                ],

                language: {
                info: "{{ __('pagination.showing_entries') }}",
                lengthMenu: "{{ __('pagination.length_menu') }}",
                zeroRecords: "{{ __('pagination.zero_records') }}",
                infoEmpty: "{{ __('pagination.info_empty') }}",
                infoFiltered: "{{ __('pagination.info_filtered') }}",
                search: "{{ __('pagination.search') }}",
                paginate: {
                    first: "{{ __('pagination.first') }}",
                    last: "{{ __('pagination.last') }}",
                    next: "{{ __('pagination.next') }}",
                    previous: "{{ __('pagination.previous') }}"
                }
            }
                // columnDefs: [
                //     { targets: '_all', className: 'dt-responsive' }
                // ]
            });
        });
    </script>
     <script src="{{ asset('panel/assets/plugins/datatable/js/jquery.dataTables.min.js') }}"></script>
     <script src="{{ asset('panel/assets/plugins/datatable/js/dataTables.bootstrap5.js') }}"></script>
     <script src="{{ asset('panel/assets/plugins/datatable/js/dataTables.buttons.min.js') }}"></script>
     <script src="{{ asset('panel/assets/plugins/datatable/js/buttons.bootstrap5.min.js') }}"></script>
     <script src="{{ asset('panel/assets/plugins/datatable/js/jszip.min.js') }}"></script>
     <script src="{{ asset('panel/assets/plugins/datatable/pdfmake/pdfmake.min.js') }}"></script>
     <script src="{{ asset('panel/assets/plugins/datatable/pdfmake/vfs_fonts.js') }}"></script>
     <script src="{{ asset('panel/assets/plugins/datatable/js/buttons.html5.min.js') }}"></script>
     <script src="{{ asset('panel/assets/plugins/datatable/js/buttons.print.min.js') }}"></script>
     <script src="{{ asset('panel/assets/plugins/datatable/js/buttons.colVis.min.js') }}"></script>
     <script src="{{ asset('panel/assets/plugins/datatable/dataTables.responsive.min.js') }}"></script>
     <script src="{{ asset('panel/assets/plugins/datatable/responsive.bootstrap5.min.js') }}"></script>
     <script src="{{ asset('panel/assets/js/table-data.js') }}"></script>
@endsection