@extends('layouts.app')

@section('title', __('menu.deleted_trashed'))
@section('content')
<div class="row row-deck row-cards">
    <div class="col-12">
        <div class="card" id="trashed-table-card">

            <div class="card-header">
                <h3 class="card-title">{{ __('menu.deleted_trashed') }}</h3>
            </div>

            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-vcenter card-table" id="trashedTable">
                        <thead>
                            <tr>
                                <th width="60">#</th>

                                <th>{{ __('common.name') }}</th>

                                <th>{{ __('devotee.mobile') }}</th>

                                <th>{{ __('common.deleted_at') }}</th>

                                <th class="text-end">{{ __('common.actions') }}</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>

        </div>
    </div>
</div>
@endsection
@push('scripts')
<script>

    let trashedTable;

    $(document).ready(function () {

        /* ===============================
         * YAJRA DATATABLE INIT
         * =============================== */
        trashedTable = $('#trashedTable').DataTable({
            processing: true,
            serverSide: true,
            responsive: true,
            language: {
                url: `/datatables/${locale}.json`
            },
            ajax: {
                url: "{{ route('deleted.list.ajax') }}",
                type: "GET"
            },
            columns: [
                {
                    data: 'DT_RowIndex',
                    orderable: false,
                    searchable: false,
                    width: '60px'
                },
                { data: 'name', name: 'name' },
                { data: 'mobile', name: 'mobile' },
                { data: 'deleted_at', name: 'deleted_at',"searchable": false },
                {
                    data: 'actions',
                    orderable: false,
                    searchable: false,
                    className: 'text-end'
                }
            ]
        });
    });

    /* ===============================
     * RELOAD TABLE
     * =============================== */
    function reloadTable() {
        if (trashedTable) {
            trashedTable.ajax.reload(null, false);
        }
    }

    window.i18n = {
        devotee: {
            restoreTitle: "{{ __('common.restore_title') }}",
            restoreConfirm: "{{ __('common.restore_confirm') }}",
            deleteYes: "{{ __('common.yes') }}",
            deleteCancel: "{{ __('actions.cancel') }}"
        }
    };

    $(document).on('click', '.restore-user', function () {

        const btn  = this;
        const id   = $(btn).data('id');
        const role = $(btn).data('role'); // devotee | saint

        const title  = window.i18n.devotee.restoreTitle;

        const content = window.i18n.devotee.restoreConfirm;

        $.confirm({
            title: title,
            content: content,
            type: 'green',
            theme: 'bootstrap',
            icon: 'fa fa-undo',
            animation: 'scale',
            buttons: {
                cancel: {
                    text: window.i18n.devotee.deleteCancel
                },
                confirm: {
                    text: window.i18n.devotee.deleteYes,
                    btnClass: 'btn-success',
                    action: function () {

                        $(btn).prop('disabled', true);

                        ajaxRequest({
                            url: "{{ route('deleted.restore') }}",
                            method: "POST",
                            data: {
                                user_id: id,
                                role: role
                            },
                            loaderTarget: "#trashed-table-card"
                        })
                        .then(res => {
                            showAlert(
                                'success',
                                res.message || window.i18n.common.restored_successfully
                            );
                            reloadTable();
                        })
                        .catch(() => {
                            $(btn).prop('disabled', false);
                        });
                    }
                }
            }
        });
    });


</script>
@endpush