@use('App\Models\User')
@extends('layouts.main')
@include('layouts.datatables')
@include('layouts.components.confirm-delete')
@section('content')
    <div class="row justify-content-center">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    {{ $title }}
                </div>
                <div class="d-none">
                    @can('create', User::class)
                        <x-buttons.create-small name="user" :route="route('user.create')" />
                    @endcan
                    <x-buttons.refresh-small name="user" />
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-sm table-hover table-striped align-middle" id="table-user">

                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script type="module">
        $(document).ready(function () {
            const tableUser = $('#table-user').DataTable({
                ajax: {
                    url: @json(route('datatable.user-index')),
                },
                serverSide: true,
                order: [[0, 'desc']],
                columns: [
                    {
                        data: 'id',
                        className: 'text-center',
                        visible: false,
                    }, {
                        title: '{{ __('validation.attributes.name') }}',
                        data: 'name',
                        className: 'text-nowrap',
                    }, {
                        title: '{{ __('validation.attributes.action') }}',
                        data: 'action',
                        searchable: false,
                        orderable: false,
                        className: 'text-nowrap',
                    }, {
                        title: '{{ __('validation.attributes.login') }}',
                        data: 'login',
                        className: 'text-nowrap',
                    }, {
                        title: '{{ __('general.role') }}',
                        data: 'role.name',
                        className: 'text-nowrap',
                    },
                    {
                        title: '{{ __('validation.attributes.email') }}',
                        data: 'email',
                        className: 'text-nowrap',
                    }, {
                        title: '{{ __('validation.attributes.is_active') }}',
                        data: 'is_active',
                        className: 'text-nowrap text-center',
                    }, {
                        title: '{{ __('validation.attributes.is_central') }}',
                        data: 'is_central',
                        className: 'text-nowrap text-center',
                        visible: {{ auth()->user()->is_central }}
                    }, {
                        title: '{{ __('validation.attributes.timezone') }}',
                        data: 'timezone',
                        className: 'text-nowrap text-center',
                    }, {
                        title: '{{ __('validation.attributes.phone') }}',
                        data: 'phone',
                        className: 'text-nowrap text-center',
                    }, {
                        title: '{{ __('validation.attributes.imei') }}',
                        data: 'imei',
                        className: 'text-nowrap text-center',
                    }, {
                        title: '{{ __('validation.attributes.updated_by') }}',
                        data: 'updated_at',
                        className: 'text-nowrap',
                    }
                ],
                drawCallback: function () {
                    $('button[data-delete-confirm="1"]').on('click', function () {
                        deleteConfirm($(this).data('delete-route'), $(this).data('delete-id'), tableUser)
                    })
                },
                initComplete: function () {
                    $('#datatable-toolbar2').prepend($('#btn-create-user'));
                    $('#datatable-toolbar3').prepend($('#btn-refresh-user'));
                },
            })

            $('#btn-refresh-user').on('click', function () {
                tableUser.draw();
            })
        })
    </script>
@endpush