
var select2Opt = {minimumResultsForSearch: -1, dropdownAutoWidth: false, width: '100%'},
    select2OptPH = Object.assign({}, select2Opt, {allowClear: true, placeholder: ""
        {#placeholder: {
            id: "-1",
            text:"",
            selected:'selected'
        }#}
    });

var conf = {
    form: '#form_',
    is_ajax: false,
    lang : '{{ app.js_validator_language }}',
    showHelpOnFocus : true,
    validateHiddenInputs: true,
    ignore: ['.ignore'],
    modules: 'jsconf, logic',
    onSuccess: function () {
        if (!conf.is_ajax) {
            $(conf.form).get(0).submit();
        } else {
            var sendData = {};
            $('input.own_fields, textarea.own_fields', conf.form).each(function(){
                sendData[$(this).attr('name')] = $(this).val();
            });
            ajaxPostSend($(conf.form).attr('action'), sendData, false, false);
        }
        return false;
    },
    onError: function () {
        return false;
    }
};


function DemoSelect2() {

    {#$('select option:empty').text('&nbsp;');#}

    $('#form_packages').select2(select2Opt);
    select2OptPH.placeholder = "{{ 'Time until the end of the tariff'|trans }}";
    $('select[id^="form_notification"]').select2(select2OptPH);
    select2OptPH.placeholder = "{{ 'Message template'|trans }}";
    $('select[id^="form_template"]').select2(select2OptPH);
    select2OptPH.placeholder = "";
}

function yelp() {
    $(document).ready(function () {

        $.validate(conf);
        LoadSelect2Script(DemoSelect2);

        $(document).on('change', '#form_external_id', function (e) {
            var _this = $(this);
            _this.next('div').html('').hide();

            if ($.trim(_this.val()).length) {
                ajaxPostSend('{{app.request_context.baseUrl}}/{{app.controller_alias}}/check-external-id', {externalid: _this.val(), selfid: $('#form_id').val(), plans: true}, false);
            }
        });

        $("#add_noti_row").click(function(e){
            e.stopPropagation();
            e.preventDefault();

            var lastRow = $('[id^="form_notification_delay_in_hours"]:last'), newRowNum = 0, cloneRow;

            if (lastRow.length != 0) {
                newRowNum = parseInt(lastRow.attr('id').replace(/[^\d]/ig, ''), 10) + 1;
                cloneRow = $('#noti_row_tmpl').tmpl({num: newRowNum}).insertAfter( lastRow.closest('div.noti_row'));
            } else {
                cloneRow = $('#noti_row_tmpl').tmpl({num: newRowNum}).prependTo( $(this).closest('div.form-group>div') );
            }

            select2OptPH.placeholder = "{{ 'Time until the end of the tariff'|trans }}";
            $('select[id^="form_notification"]', cloneRow).select2(select2OptPH);
            select2OptPH.placeholder = "{{ 'Message template'|trans }}";
            $('select[id^="form_template"]', cloneRow).select2(select2OptPH);
            select2OptPH.placeholder = "";
            $.validate();

            ajaxPostSend("{{ app.request_context.baseUrl }}/events/message-templates-list-json", {action: 'updateFormField'});

        });

        $(document).on('click', 'button.del_noti_row', function(e){
            e.stopPropagation();
            e.preventDefault();
            var rowContainer = $('[id^="form_notification_delay_in_hours_' + $(this).data('rownum') + '"]').closest('div.noti_row');
            $('select', rowContainer).select2('destroy');
            rowContainer.remove();
        });

        $(document).on("click", "#add_noti_template", function(e){
            if (e.currentTarget != e.target) {
                return;
            }
            e.stopPropagation();
            e.preventDefault();

            getTemplateForm();

            $('#modalbox').show();

            return false;
        });

        $(document).on('click', '#form_save', function(e){
            e.stopPropagation();
            e.preventDefault();
            conf.form = '#form_';
            conf.is_ajax = false;
            if ($(conf.form).isValid({}, conf, true)) {
                conf.onSuccess();
            } else {
                conf.onError();
            }
            return false;
        });

        $(document).on('click', "#modalbox button[type='submit']", function (e) {
            e.stopPropagation();
            e.preventDefault();
            conf.is_ajax = true;
            conf.form = '#save_message_template';
            if ($("#save_message_template").isValid({}, conf, true)) {
                conf.onSuccess();
            } else {
                conf.onError();
            }

            return false;
        });

        $(document).on('click', "#modalbox button[type='reset']", function (e) {
            e.stopPropagation();
            e.preventDefault();
            JScloseModalBox();
            return false;
        });

        //--------------------------------------------------------------------------------------------------------

        (function($){
            $.fn.packagePicker = function(options){

                var _this = $(this);

                var defaults = {
                    optional_title : 'optional',
                    packages_optional : '#form_packages_optional',
                    container_id: "opt_container",
                    row_container_format: "<div class='row'></div>",
                    block_container_format: "<div class='col-xs-10 col-sm-6'><div class='checkbox'><label></label></div></div>",
                    package_chbox_format: "<input type='checkbox' name='packages[]' disabled checked='checked' value=''>",
                    optional_chbox_format: "<input type='checkbox' name='optionals[]' value=''>",
                    package_icon_format: "<i class='fa fa-square-o txt-success'></i>",
                    optional_icon_format: "<i class='fa fa-square-o'></i>"
                };

                _this.opts = $.extend(defaults, options);

                _this.getPackOpt = function(){
                    return JSON.parse($(_this.opts.packages_optional).val());
                };

                _this.setPackOpt = function(input){
                    $(_this.opts.packages_optional).val(JSON.stringify(input));
                };

                _this.getOptChBox = function(key){
                    var currVal = key + '';
                    var opt = $(this.opts.block_container_format);
                    $(this.opts.optional_chbox_format + this.opts.optional_title + this.opts.optional_icon_format).appendTo(opt.find('label'));
                    opt.find('input').val(currVal).attr('checked', (currVal != '' && currVal != 'off' && currVal != '0' && currVal != 0));
                    return opt;

                };

                _this.getPackChBox = function(key){
                    var item = this.find('option:selected[value="' + key + '"]')
                    var pack = '';
                    if (item.length) {
                        pack =  $(this.opts.block_container_format);
                        $(this.opts.package_chbox_format + item.text() + this.opts.package_icon_format).appendTo(pack.find('label'));
                        pack.find('input').val(item.val()).attr('checked', true);
                    }
                    return pack;
                };

                _this.getOptRow = function(key, val){
                    var row =  $(this.opts.row_container_format);
                    $(this.getPackChBox(key)).appendTo(row);
                    $(this.getOptChBox(val)).appendTo(row);
                    return row;
                };

                _this.checkOptArr = function(){
                    var _this = this;
                    var packages_optional_arr = {};
                    this.find('option:selected').each(function(){
                        var currPackVal = $(this).val();
                        var currOptVal = 0;
                        var pack = $("#" + _this.opts.container_id).find("input[name^='packages'][value='" + currPackVal + "']");
                        if (pack.length != 0){
                            currOptVal = pack.closest(".row").find("input[name^='optionals']").get(0).checked ? "1": "0";
                        }
                        packages_optional_arr[currPackVal] = currOptVal;
                    });
                    this.setPackOpt(packages_optional_arr);
                };

                _this.render = function(){
                    if ($("#" + this.opts.container_id).length == 0) {
                        _this.init();
                    } else {
                        this.checkOptArr();
                    }
                    $("#" + this.opts.container_id).empty();
                    var packages_optional_arr = this.getPackOpt();
                    $.each(packages_optional_arr, function(key, val){
                        $(_this.getOptRow(key, val)).appendTo($("#" + _this.opts.container_id));
                    });
                };

                $(_this).on("change", _this.find('option'), function(){
                    _this.render();
                });

                _this.init = function(){
                    $(this.opts.packages_optional).before("<div id='" + this.opts.container_id + "'></div>")
                    $("#" + _this.opts.container_id).on("click", "input[name^='packages']", function(){
                        var currPackVal = $(this).val();
                        $(this).closest('.row').remove();
                        _this.find('option[value="' + currPackVal + '"]').removeAttr('selected').change();
                    });

                    $("#" + _this.opts.container_id).on("change", "input[name^='optionals']", function(){
                        var packages_optional_arr = _this.getPackOpt();
                        var currPackVal = $(this).closest('.row').find("input[name^='packages']").val()+"";
                        var currOptVal = $(this).is(":checked");
                        packages_optional_arr[currPackVal] = currOptVal ? "1": "0";
                        _this.setPackOpt(packages_optional_arr);
                    })
                };

                _this.closest("form").on("submit", function(){
                    _this.render();
                    $("#" + _this.opts.container_id + " input").attr("disabled", "disabled");
                });

                _this.render();

                return _this;
            }
        })(jQuery);

        $('#form_packages').packagePicker({});

        $('#form_ .form-group .i-hint').tooltip({
            animation: true,
            placement: "right"
        });
    });
}
document.addEventListener("DOMContentLoaded", yelp, false);

var checkExternalId = function(data){
    $('#form_external_id').next('div').append('<i class="txt-success fa fa-check"></i> ' + data.chk_rezult).css('visibility', 'visible');
};

var checkExternalIdError = function(data){
    var msg = '';
    msg = (typeof(data.responseJSON) != 'undefined') ? data.responseJSON.error: data.chk_rezult;
    $('#form_external_id').next('div').append('<i class="txt-danger fa fa-ban"></i> ' + msg).css('visibility', 'visible');
};

var getTemplateForm = function(templateName){
    $("#modalbox").data('complete', 1);
    if (templateName) {
        $('#modalbox').find('.modal-header-name span').text('{{ 'Editing template'|trans }} "' + templateName + '"');
    } else {
        $('#modalbox').find('.modal-header-name span').text('{{ 'New template'|trans }}');
    }

    $('#modalbox').find('.devoops-modal-inner').html($("#modal_form_body").text());
    $('#modalbox').find('.devoops-modal-bottom').html($("#modal_form_buttons").text());
};

var updateFormField = function(obj){
    $('select[id^="form_template"]').each(function(e){
        var selected = $('option:selected', this).val();
        $(this).select2('destroy').empty();
        var _this = $(this);
        _this.append('<option value="" ' + (!selected ? '': 'selected="selected"') + '>&nbsp;</option>');
        $.each(obj.data, function(){
            var optStr = '<option value="' + this.id + '" ' + (this.id == selected ? 'selected="selected"': '') + '>'+ this.title +'</option>';
            _this.append(optStr);
        });
        select2OptPH.placeholder = "{{ 'Message template'|trans }}";
        $(this).select2(select2OptPH);
        select2OptPH.placeholder = "";
    });

    JScloseModalBox();
};