if ($('#campaigns_modal_whatsapp').length > 0) {
    var campaignsWhatsapp = new Vue({
        el: '#campaigns_modal_whatsapp',
        components: {
            vuejsDatepicker: window.vuejsDatepicker
        },
        data() {

            return {
                ru: vdp_translation_ru.js,
                agency_id: $('#session_agency_id').val() || null,
                user_id: $('#session_user_id').val(),
                is_show: false,
                is_load: 0,
                all: true,
                OpenIndicator: {
                    render: createElement => createElement('span', { class: { 'vueToggleSpan': true } }),
                },
                clients: [],
                clients_ids: [],
                list_api_id: 0,
                isPreloader: 1,
                errors: {
                    error_title_list: 0,
                    error_subject: 0,
                    error_template_id: 0,
                },
                title_list: '',
                isCreateList: false,
                isSendList: false,
                isCreateApiList: false,
                subject: '',
                templates: [{ 'code': 0, 'name': '' }],
                templats_api: [],
                template_id: null,
                type: 'client',
                selectedFiles: [],
                isSelect: 0,
                progressUoload: [],
            }
        },
        methods: {
            //Открытие
            open() {
                this.isPreloader = 1;
                this.list_api_id = 0;
                this.errors.error_title_list = 0;
                this.errors.error_subject = 0;
                this.title_list = '';
                this.isCreateList = false;
                this.isSendList = false;
                this.isCreateApiList = false;
                this.subject = '';
                this.template_id = null;
                this.is_load = false;
                this.clients = [];
                this.selectedFiles = [];
                this.isSelect = 0;
                this.progressUoload = [];

                axios.post('/ajax/ajax_vue_whatsapp.php', {
                    request: 'open_campaigns',
                    agency_id: this.agency_id,
                    all: this.all,
                    clients_ids: this.clients_ids,
                    type: this.type,
                }, )
                    .then((response) => {
                        $("body").addClass("lock");

                        this.is_show = true;
                        this.isPreloader = 0;
                        console.log(response.data);
                        if (response.data.client_list && response.data.client_list.length > 0) {
                            this.clients = response.data.client_list;
                            this.title_list = response.data.title_list;
                            if (this.clients.length > 0) {
                                this.sendList();
                            }
                        } else {
                            alert("Нет выбранных клиентов");
                        }

                    })
                    .catch(function(error) {
                        console.log(error);
                    });


            },
            save() {
                var error = false
                this.errors.error_template_id = 0;
                this.errors.error_subject = 0;
                if (this.template_id == 0 || this.template_id == null) {
                    this.errors.error_template_id = 1;
                    error = true;
                }

                if (this.selectedFiles.length > 0 && !this.isEmpty(this.subject)) {
                    this.errors.error_subject = 1;
                    error = true;
                    alert("Необходимо или выбрать файл или ввести текст. Одновременное заполнение этих двух полей невозможно.")
                }

                if (!error) {
                    const templateId = this.template_id;
                    let templateNum = this.templates.find(t => {
                        return t.code === templateId;
                    });

                    this.is_load = true;
                    axios.post('/ajax/ajax_vue_whatsapp.php', {
                        request: 'save_campaign',
                        agency_id: this.agency_id,
                        template_id: this.template_id,
                        template_num: templateNum ? templateNum.name : "",
                        subject: this.subject,
                        list_id: this.list_api_id,
                        clients: this.clients,
                        user_id: this.user_id,
                    }, )
                        .then((response) => {
                            console.log(response.data);
                            if (response.data.error) {
                                this.errors.error_sender_email = 2;
                            } else {
                                this.closes();
                            }
                            this.is_load = false;
                            $("#whatsapp_sended_win_bg").fadeIn(500);
                            $("#whatsapp_sended_win").toggle(10);
                            $("body").addClass("lock");
                        })
                        .catch(function(error) {
                            console.log(error);
                        });
                }

            },

            onFileSelected(event) {
                var files = Array.from(event.target.files);
                this.isSelect = event.target.files.length;
                files[0].typeFile = this.typeFile(files[0].name).toLowerCase();

                if (files[0].typeFile !== 'doc' && files[0].typeFile !== 'docx' && files[0].typeFile !== 'xls'
                    && files[0].typeFile !== 'xlsx' && files[0].typeFile !== 'pdf' && files[0].typeFile !== 'jpeg' && files[0].typeFile !== 'jpg'
                    && files[0].typeFile !== 'gif' && files[0].typeFile !== 'png' && files[0].typeFile !== 'mp3'
                    && files[0].typeFile !== 'zip' && files[0].typeFile !== 'rar') {
                    alert("Неверный тип файла");
                    return;
                }

                files[0].guid = '';
                var proc = { 'progress': 0, 'isUpload': false, 'uploads': false, 'isEdit': false, 'edit_name': '', 'real_name': files[0].name }
                this.$set(this.progressUoload, 0, proc);
                this.$set(this.selectedFiles, 0, files[0]);

                this.onUpload(files[0]);
            },

            onUpload: function(file) {

                this.$set(this.progressUoload[0], 'uploads', true);

                let fd = new FormData();

                fd.append('type_file', file.typeFile);
                fd.append('file', this.selectedFiles[0]);
                fd.append('list_id', this.list_api_id);

                axios.post('/ajax/vue_ajax/whatsapp_upload_axios.php', fd, {
                    onUploadProgress: progressEvent => {
                        var pr = Math.ceil(progressEvent.loaded / progressEvent.total * 100);
                        this.$set(this.progressUoload[0], 'progress', pr);
                    }
                })
                    .then((response) => {
                        var res = response.data;
                        if (res.res !== 'done') {
                            alert(res.res);
                        } else {
                            this.$set(this.selectedFiles[0], 'guid', res.guid);
                            this.$set(this.progressUoload[0], 'isUpload', true);
                            this.$set(this.progressUoload[0], 'uploads', false);
                        }
                    })
                    .catch(function(error) {
                        console.log(error);
                    });

            },

            onDeleteFile: function(index) {
                this.selectedFiles.splice(index, 1);
                $('.ui-tooltip').remove();
                this.progressUoload.splice(index, 1);
            },

            typeFile: function(nameFile) {
                var tchk = nameFile.lastIndexOf(".");

                if (tchk != -1) {
                    return nameFile.slice(tchk + 1);
                }

                return 'undefined';
            },

            closes() {
                this.is_show = false;
                this.clients_ids = [];
                $("body").removeClass("lock");
            },

            sendList() {
                this.list_api_id = 0;
                this.isSendList = true;
                this.errors.error_title_list = 0;
                if (this.isEmpty(this.title_list)) {
                    this.errors.error_title_list = 1;
                    this.isSendList = false;
                } else {
                    axios.post('/ajax/ajax_vue_whatsapp.php', {
                        request: 'create_api_list',
                        agency_id: this.agency_id,
                        title_list: this.title_list,
                        clients: this.clients,

                    }, )
                        .then((response) => {
                            this.isCreateApiList = true;
                            console.log(response.data);
                            var res = response.data;
                            if (res.result) {
                                this.list_api_id = res.result.id;
                                //console.log(this.list_api_id);
                                this.getTemplates();
                            }

                        })
                        .catch(function(error) {
                            console.log(error);
                        });
                }

            },

            openCreateListform() {
                this.isCreateList = true;
            },

            getTemplates() {
                axios.post('/ajax/ajax_vue_whatsapp.php', {
                    request: 'get_api_templates',
                    agency_id: this.agency_id,

                }, )
                    .then((response) => {

                        console.log(response.data);
                        this.templates = response.data.templats;
                    })
                    .catch(function(error) {
                        console.log(error);
                    });
            },

            //Выбор шаблона
            select_template() {

            },

            //Проверка на пустоту
            isEmpty(data) {
                if (typeof(data) === 'object') {
                    if (JSON.stringify(data) === '{}' || JSON.stringify(data) === '[]') {
                        return true;
                    } else if (!data) {
                        return true;
                    }
                    return false;
                } else if (typeof(data) === 'string') {
                    if (!data.trim()) {
                        return true;
                    }
                    return false;
                } else if (typeof(data) === 'undefined') {
                    return true;
                } else if (data == 0) {
                    return true;
                } else {
                    return false;
                }
            },

        },
        mounted() {

        },
        created: function() {

            $("#campaigns_modal_whatsapp").removeClass("hidden");

        }
    })
}

$('body').on('click', '.campaign__create_wazzap', function() {
    var all = 0;
    if ($('#changeClientAllFilter').prop('checked')) {
        all = 1;
    }

    if (all == 0) {
        campaignsWhatsapp.all = false;
        var clientsId = [];
        $('.changeClientInput').each(function() {
            if ($(this).prop('checked')) {
                var id = $(this).attr('id').replace("changeClient", "");
                if (id != 'All') {
                    clientsId.push(id);
                }

            }
        });
        //console.log(clientsId);

        if (clientsId.length == 0) {
            alert("Нет выбранных клиентов");
        } else {
            campaignsWhatsapp.clients_ids = clientsId;
            campaignsWhatsapp.open();
        }
    } else {
        campaignsWhatsapp.all = true;
        campaignsWhatsapp.open();
    }
});

$('body').on('click', '.campaign__create_req_wazzap', function() {
    var all = 0;
    if ($('#changeReqAllFilter').prop('checked')) {
        all = 1;
    }

    campaignsWhatsapp.type = 'req';

    if (all === 0) {
        campaignsWhatsapp.all = false;
        var reqsId = [];
        $('.changeReqInput').each(function () {
            if ($(this).prop('checked')) {
                var id = $(this).attr('id').replace("changeReq", "");
                if (id != 'All') {
                    reqsId.push(id);
                }
            }
        });

        if (reqsId.length === 0) {
            alert("Нет выбранных заявок");
        } else {
            campaignsWhatsapp.clients_ids = reqsId;
            campaignsWhatsapp.open();
        }
    } else {
        campaignsWhatsapp.all = true;
        campaignsWhatsapp.open();
    }
});

$('body').on('click', '.campaign__create_req_all_wazzap', function() {
    campaignsWhatsapp.all = true;
    campaignsWhatsapp.type = 'req';
    campaignsWhatsapp.open();
});