"use strict";
Vue.component('item', {
    props: ['data', 'deleteUrl', 'array'],
    data: function () {
        return {}
    },
    methods: {
        cancel: function (data, event, array) {
            event.stopPropagation();
            array.splice(array.indexOf(data), 1);
            axios.get(this.deleteUrl, {
                params: {
                    id: data.id
                }
            })
                    .then(response => {

                    })
                    .catch(error => {

                    });
        },
        link: function (data, $event, array) {
            this.cancel(data, $event, array);
            window.location.href = data.link;
            return;
        }
    },
    template: "<div class='dropdown-item cursor'>\
                            <div class='media'>\
                                <div class='media-body' v-on:click='link(data, $event, array)'>\
                                    <div class='notification-para'>{{data.title}}</div>\
                                </div>\
                                <svg v-on:click='cancel(data, $event, array)' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#da2100' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-x'><line x1='18' y1='6' x2='6' y2='18'></line><line x1='6' y1='6' x2='18' y2='18'></line></svg>\
                            </div>\
                </div>"
});
var noti = Vue.component('notification', {
    data: function () {
        return {
            lists: [],
            spin: true,
            seen: false
        }
    },
    props: ['url', 'deleteUrl', 'markSeenUrl'],
    methods: {
        load: function (id, e, lists) {

            if (id) {
                e.stopPropagation();
            }
            if (id == 1) {
                return;
            }

            axios.get(this.url, {
                params: {
                    id: id || 0
                }
            }).then(response => {
                this.lists = response.data.lists;
                this.lists.forEach(list => {
                    if (list.seen == 'false') {
                        this.seen = true;
                        return;
                    }
                });
            })
                    .catch(error => {
                        console.log(error);
                    }).finally(() => {
                this.spin = false;
            });
            if (e) {
                this.mark(lists, e, "open");
            }
            if ($(this.$el).hasClass('show')) {
                return;
            }
        },
        mark: function (lists, e, open) {
            if (lists.length == 0) {
                return;
            }
            axios.get(this.markSeenUrl, {
                params: {
                    lists: JSON.stringify(lists)
                }
            }).then(response => {

            })
                    .catch(error => {
                        console.log(error);
                    });
        }
    },
    template: "<li class='nav-item dropdown notification-dropdown' >\
                <a href='javascript:void(0);' @click='mark(lists,$event,lists)' class='nav-link dropdown-toggle' id='notificationDropdown' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>\
                    <svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-bell'><path d='M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9'></path><path d='M13.73 21a2 2 0 0 1-3.46 0'></path></svg>\
                    <span style='background-color: red' v-if='seen' class='badge badge-success'></span>\
                </a>\
                <div class='dropdown-menu position-absolute' aria-labelledby='notificationDropdown'>\
                    <div class = 'notification-scroll' style = 'max-height: 300px;overflow-y: auto;'> \
                        <div class='loader-01' v-if='spin'></div>\
                        <item v-for='list in lists' v-bind:key='list.id' v-bind:delete-url='deleteUrl' v-bind:array='lists' v-bind:data='list'></item>\
                        <a v-if='lists.length >= 5' href='javascript:void(0);' @click='load(lists[lists.length - 1].id,$event, lists)' class='nav-link dropdown-toggle' style = 'font-size: 14px;text-align: center;color:rgb(210, 105, 30);'> See Older </a>\
                         <a v-if='lists.length == 0' href='javascript:void(0);'  class='nav-link dropdown-toggle' style='font-size: 14px;text-align: center;'> No notification </a>\
                    </div>\
                </div>\
            </li>"
});

Vue.component('update', {
    props: ['url', 'type', 'name', 'value', 'required', 'id', 'param'],
    data: function () {
        return {
            saving: false
        }
    },
    methods: {

        update: function () {
            this.saving = true;

            $(this.$el).find('input').attr('disabled', true);
            $(this.$el).find('button').attr('disabled', true);
            if (this.saving) {
                axios.get(this.url, {
                    params: {
                        id: this.id,
                        value: this.value
                    }
                }).then(response => {
                    var data = response.data
                    if (data.error) {
                        Snackbar.show({
                            text: data.error,
                            pos: 'top-right'
                        });
                    } else {
                        Snackbar.show({
                            text: data.msg,
                            pos: 'top-right'
                        });
                    }
                })
                        .catch(error => {
                            console.log(error);
                        }).finally(() => {
                    this.saving = false;
                    $(this.$el).find('input').attr('disabled', false);
                    $(this.$el).find('button').attr('disabled', false);
                });
            }
        }
    },
    template: "<div class='input-group'><div class='input-group-prepend'>  </div>\
              <input v-bind:type='type' v-model='value' class='form-control' :required='required' placeholder='' > <div class='input-group-append'> <button class='btn btn-primary' @click='update' type='button'>Save <svg v-show='saving' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-loader spin'><line x1='12' y1='2' x2='12' y2='6'></line><line x1='12' y1='18' x2='12' y2='22'></line><line x1='4.93' y1='4.93' x2='7.76' y2='7.76'></line><line x1='16.24' y1='16.24' x2='19.07' y2='19.07'></line><line x1='2' y1='12' x2='6' y2='12'></line><line x1='18' y1='12' x2='22' y2='12'></line><line x1='4.93' y1='19.07' x2='7.76' y2='16.24'></line><line x1='16.24' y1='7.76' x2='19.07' y2='4.93'></line></svg></button> </div></div>"
});
Vue.component("investment", {
    props: ['user', 'init'],
    data: function () {
        return {
            data: JSON.parse(this.init)
        };
    },
    template: "<table id='style-3' class='table style-1 table-hover non-hover'>\
    <thead>\
        <tr>\
            <th>User</th>\
            <th>Amount</th>\
            <th>Payment Mode</th>\
            <th>Date</th>\
            <th class=''>Status</th>\
            <th class='text-center'>Action</th>\
        </tr>\
    </thead>\
    <tbody>\
        <tr v-if='data.length > 0'>\
            <td></td>\
            <td class=''></td>\
            <td class=''></td>\
            <td></td>\
            <td></td>\
            <td class='text-center'>\
                <div class='dropdown custom-dropdown'>\
                    <a class='dropdown-toggle' href='#' role='button' id='dropdownMenuLink' data-toggle='dropdown' aria-haspopup='true' aria-expanded='true'>\
                        <svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-more-horizontal'> <circle cx='12' cy='12' r='1'></circle> <circle cx='19' cy='12' r='1'></circle> <circle cx='5' cy='12' r='1'></circle> </svg>\
                    </a>\
                    <div class='dropdown-menu' aria-labelledby='dropdownMenuLink'>\
                        <a class='dropdown-item cursor confirm'>Confirm</a>\
                        <a class='dropdown-item cursor delete'>Delete</a>\
                    </div>\
                </div>\
            </td>\
        </tr>\
    </tbody>\
</table>\
"
});



var vm = new Vue({
    el: '#app',
    data: {
        pageTitle: ""
    }
});
vm.$refs._n.load();
var menus = $('#accordionExample').children('li.menu');
for (let index = 0; index < menus.length; index++) {
    let href = $(menus[index]).children('a').attr('href');
    let path = window.location.pathname;
    let arr = path.split('/');
    let menu = arr[arr.length - 1];
    if (menu.trim().length == 0) {
        $(menus[0]).addClass('active');
        vm.$data.pageTitle = "Users";
    } else {
        if (href.indexOf(menu) != -1) {
            $(menus[index]).addClass('active');
            vm.$data.pageTitle = $($(menus[index])).find('span').text();
            break;
        }

    }

}