Vue.http.headers.common['X-CSRF-TOKEN'] = $("#token").attr("value");
new Vue({
    el: '#manage-vue-staff',
    data: {
        items: [],
        pagination: {
            total: 0,
            per_page: 2,
            from: 1,
            to: 0,
            current_page: 1
        },
        search:'',
        offset: 4,
        formErrors: {},
        formErrorsUpdate: {},
        newItem: {'nama': '', 'pangkat': '', 'gelar': '', 'jabatan': ''},
        fillItem: {'nama': '', 'pangkat': '', 'gelar': '', 'jabatan': '', 'id': ''}
    },
    computed: {
        isActived: function () {
            return this.pagination.current_page;
        },
        pagesNumber: function () {
            if (!this.pagination.to) {
                return [];
            }
            var from = this.pagination.current_page - this.offset;
            if (from < 1) {
                from = 1;
            }
            var to = from + (this.offset * 2);
            if (to >= this.pagination.last_page) {
                to = this.pagination.last_page;
            }
            var pagesArray = [];
            while (from <= to) {
                pagesArray.push(from);
                from++;
            }
            return pagesArray;
        }
    },
    ready: function () {
        this.getVueItems(this.pagination.current_page);
    },
    methods: {
        getVueItems: function (page) {
            this.$http.get('/staffitems?page=' + page + '&search=' + this.search).then((response) => {
                this.$set('items', response.data.data.data);
                this.$set('pagination', response.data.pagination);
            });
            setTimeout(this.getVueItems, 5000);
        },
        createItem: function () {
            var input = this.newItem;
            this.$http.post('/staffitems', input).then((response) => {
                this.changePage(this.pagination.current_page);
                this.newItem = {'nama': '', 'pangkat': '', 'gelar': '', 'jabatan': ''};
                $("#create-item").modal('hide');
                toastr.success('Penyidik Sukses Ditambahkan.', 'Success Alert', {timeOut: 5000});
            }, (response) => {
                this.formErrors = response.data;
            });
        },
        deleteItem: function (item) {
            this.$http.delete('/staffitems/' + item.id).then((response) => {
                this.changePage(this.pagination.current_page);
                toastr.success('Penyidik Sukses Dihapus.', 'Success Alert', {timeOut: 5000});
            });
        },
        editItem: function (item) {
            this.fillItem.id = item.id;
            this.fillItem.nama = item.nama;
            this.fillItem.pangkat = item.pangkat;
            this.fillItem.gelar = item.gelar;
            this.fillItem.jabatan = item.jabatan;
            $("#edit-item").modal('show');
        },
        updateItem: function (id) {
            var input = this.fillItem;
            this.$http.put('/staffitems/' + id, input).then((response) => {
                this.changePage(this.pagination.current_page);
                this.newItem = {'nama': '', 'pangkat': '', 'gelar': '', 'jabatan': ''};
                $("#edit-item").modal('hide');
                toastr.success('Data Penyidik Sukses Dimutakhirkan.', 'Success Alert', {timeOut: 5000});
            }, (response) => {
                this.formErrors = response.data;
            });
        },
        changePage: function (page) {
            this.pagination.current_page = page;
            this.getVueItems(page);
        }
    }
});