@extends('layouts.master')
@section('title', __('users.list_page_title'))
@section('content')
    <x-header title="{{ __('layout.users') }}" subtitle="{{ __('layout.list') }}" icon="users"
              tab="{{ __('layout.list') }}" tab-icon="list" />
    <!-- page content -->
    <div class="page-content-wrapper">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12 mb-4">
                    <div class="card card-flush rounded-8 mb-0">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <h5 class="card-title">{{ __('users.list_page_title') }}</h5>
                            <x-btn.add link="{{ route('users.create') }}" icon="plus" name="{{ __('users.add_index_btn') }}" />
                        </div>

                        <div class="card-body">
                            <table id="datatable" class="table-bordered table table-hover table-striped nowrap">
                                <thead>
                                <tr>
                                    <th>{{ __('users.fields.created_at') }}</th>
                                    <th>{{ __('layout.action') }}</th>
                                    <th>{{ __('users.fields.id') }}</th>
                                    <th>{{ __('users.fields.image') }}</th>
                                    <th>{{ __('users.fields.name') }}</th>
                                    <th>{{ __('users.fields.last_name') }}</th>
                                    <th>{{ __('users.fields.email') }}</th>
                                    <th>{{ __('users.fields.phone') }}</th>
                                    <th>{{ __('users.fields.role') }}</th>
                                </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('plugins_js')
<script>
    $(function () {
        let ajaxRoute = "{{route("users.dt")}}";
        let columns = [
            {data: 'created_at', name: 'created_at', visible: false},
            {data: 'actions',class: "text-center", orderable: false},
            {data: 'id', name: 'id'},
            {data: 'image', name: 'image',orderable: false, searchable: false},
            {data: 'name', name: 'name'},
            {data: 'last_name', name: 'last_name'},
            {data: 'email', name: 'email'},
            {data: 'phone', name: 'phone'},
            {data: 'role', name: 'role'},
            /*{data: 'created_at', name: 'created_at', class: "text-center"},*/

        ];

        initDatatables("#datatable", ajaxRoute, columns,[0, 'desc']);

        $(document).on('click','.ACTION_DELETE', function (e) {
            e.preventDefault();
            let deleteUrl = $(this).data('href');
            myDelete('{{ __('layout.delete_confirm_msg') }}','{{ __('layout.delete') }}', function(){
                $.ajax({
                    type: "post",
                    url: deleteUrl,
                    data: {'_method': 'delete','_token': document.head.querySelector("meta[name=csrf-token]").content}, // serializes the form's elements.
                    success: function (response) {
                        Swal.fire(response.message, "", "success");
                        $("#datatable").DataTable().ajax.reload(null, false);
                    }
                });
            })
        });
    });

</script>
@endsection