@section('customStyle')
    <link href='{{ asset("dashboard/$locale/plugins/table/datatable/datatables.css") }}' rel="stylesheet" type="text/css" />
@endsection

<div class="table-responsive">
    <table id="usersTable" class="table table-hover text-center">
        <thead>
            <tr>
                <th>#</th>
                <th>{{ __('validation.attributes.created_at') }}</th>
                <th>{{ __('validation.attributes.username') }}</th>
                <th>{{ __('validation.attributes.email') }}</th>
                <th>{{ __('validation.attributes.mobile') }}</th>
                <th>{{ __('validation.attributes.gender') }}</th>
                <th>{{ __('validation.attributes.country') }}</th>
                <th>{{ __('validation.attributes.device_type') }}</th>
                <th>{{ __('general.reservations_count') }}</th>
                <th>{{ __('validation.attributes.status') }}</th>
                <th>{{ __('general.options') }}</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>#</th>
                <th>{{ __('validation.attributes.created_at') }}</th>
                <th>{{ __('validation.attributes.username') }}</th>
                <th>{{ __('validation.attributes.email') }}</th>
                <th>{{ __('validation.attributes.mobile') }}</th>
                <th>{{ __('validation.attributes.gender') }}</th>
                <th>{{ __('validation.attributes.country') }}</th>
                <th>{{ __('validation.attributes.device_type') }}</th>
                <th>{{ __('general.reservations_count') }}</th>
                <th>{{ __('validation.attributes.status') }}</th>
                <th>{{ __('general.options') }}</th>
            </tr>
        </tfoot>
    </table>
</div>


@section('customScript')
    @parent
    <script src='{{ asset("dashboard/$locale/plugins/table/datatable/datatables.js") }}'></script>

    <script>
    var usersTable = initializeDataTable("#usersTable",{
        columns : [
            {data: 'DT_RowIndex', orderable: false, searchable: false },
            {data: "created_at"},
            {data: "name"},
            {data: "email"},
            {data: "mobile",className:"ltr"},
            {data: "gender"},
            {data: "country", searchable: false, orderable: false},
            {data: "device_type"},
            {data: "reservations_count"},
            {data: "is_active"},
            {data: "actions", searchable: false, orderable: false},
    ]},
    {
        subPlace: "users_datatable"
    }
    );
    </script>
@endsection