$(document).ready(function () {

    var _url = $("#_url").val();
    var _msg_add_new_segment = $("#_msg_add_new_segment").val();
	var _msg_parent_name = $("#_msg_parent_segment").val();
    var _msg_name = $("#_msg_name").val();
    var _msg_edit = $("#_msg_edit").val();
    var _msg_ok = $("#_msg_ok").val();
    var _msg_cancel = $("#_msg_cancel").val();


    var ib_form_bootbox = "<form class=\"form-horizontal push-10\" method=\"post\" onsubmit=\"return false;\">\n    " +
        "<div class=\"form-group\">\n        <div class=\"col-xs-12\">\n            <div class=\"form-material floating open\">\n                <select class=\"form-control select2\" style='width: 100%' id=\"parent_segment\" name=\"parent_segment\"></select>\n                <label for=\"envato_api_key\">" + _msg_parent_name + "</label>\n                           </div>\n        </div>\n    </div>\n\n" +
		"<div class=\"form-group\">\n        <div class=\"col-xs-12\">\n            <div class=\"form-material floating open\">\n                <input class=\"form-control\" type=\"text\" id=\"segment_name\" name=\"segment_name\">\n                <label for=\"envato_api_key\">" + _msg_name + "</label>\n                           </div>\n        </div>\n    </div>\n\n" +
        "</form>";

    var box =   bootbox.dialog({
            title: _msg_add_new_segment,
            message: ib_form_bootbox,
            buttons: {
                success: {
                    label: "Save",
                    className: "btn-primary",
                    callback: function () {
                        // var name = $('#name').val();
                        // var answer = $("input[name='awesomeness']:checked").val();
                        // Example.show("Hello " + name + ". You've chosen <b>" + answer + "</b>");

                        var name_val = $('#segment_name').val();
						var id_parent = $('#parent_segment').val();

                        $.post(  _url + "segment/add-post/", { segment_name: name_val, parent_segment_name: id_parent })
                            .done(function( data ) {
                                if ($.isNumeric(data)) {
                                    location.reload();
                                }
                                else {
                                    bootbox.alert(data);
                                }
                            });
                    }
                }
            },
            show: false
        }
    );

    $("#add_new_segment").click(function(e){
        e.preventDefault();
        box.modal('show');
    });

    box.on("shown.bs.modal", function() {
        var group_name = $('#segment_name');

        setTimeout(function(){
            group_name.focus();

			$('.modal').removeAttr('tabindex');
			select2Segment('#parent_segment');

        }, 1000);

    });

    $(".cdelete").click(function (e) {
        e.preventDefault();
        var id = this.id;
        bootbox.confirm(_L['are_you_sure'], function(result) {
            if(result){
                var _url = $("#_url").val();
                window.location.href = _url + "segment/delete/" + id;
            }
        });
    });

    $(".edit_segment").click(function (e) {
        e.preventDefault();

        eid = this.id;

		var name = $( this ).attr( "data-name" );
		var id_parent = $( this ).data( "id_parent" );

		var ib_form_bootbox_edit = "<form class=\"form-horizontal push-10\" method=\"post\" onsubmit=\"return false;\">\n    " +
			"<div class=\"form-group\">\n        <div class=\"col-xs-12\">\n            <div class=\"form-material floating open\">\n                <select class=\"form-control select2\" style='width: 100%' id=\"parent_segment_edit\" name=\"parent_segment\"></select>\n                <label for=\"envato_api_key\">" + _msg_parent_name + "</label>\n                           </div>\n        </div>\n    </div>\n\n" +
			"<div class=\"form-group\">\n        <div class=\"col-xs-12\">\n            <div class=\"form-material floating open\">\n                <input class=\"form-control\" type=\"text\" id=\"segment_name_edit\" name=\"segment_name\" value=\"" + name + "\">\n                <label for=\"envato_api_key\">" + _msg_name + "</label>\n                           </div>\n        </div>\n    </div>\n\n" +
			"</form>";

		var box_edit = bootbox.dialog({
				title: _msg_edit,
				message: ib_form_bootbox_edit,
				buttons: {
					success: {
						label: "Save",
						className: "btn-primary",
						callback: function () {

							var name_val = $('#segment_name_edit').val();
							var id_parent = $('#parent_segment_edit').val();

							$.post(  _url + "segment/edit-post/", { id: eid, name: name_val, parent_segment_name: id_parent })
								.done(function( data ) {

									if ($.isNumeric(data)) {
										location.reload();
									}

									else {
										bootbox.alert(data);
									}
								});
						}
					}
				},
				show: false
			}
		);

		box_edit.modal('show');

		box_edit.on("shown.bs.modal", function() {
			var group_name = $('#segment_name_edit');
			setTimeout(function(){
				group_name.focus();

				$('.modal').removeAttr('tabindex');
				select2Segment('#parent_segment_edit');

				$.post(_url + "segment/ajax-parent-list", function(data) {
                    if(data) {
						var options = '';
						$.each(data, function(index, value) {
							if(id_parent == value.id) {
								options += '<option selected="selected" value="'+ value.id +'">'+ value.name +'</option>';
							}
							else {
								options += '<option value="'+ value.id +'">'+ value.name +'</option>';
							}
						});

						$('#parent_segment_edit').html(options);
						$('#parent_segment_edit').select2('val', id_parent);
					}
				}, 'json');

			}, 500);
		});

	});

});

function select2Segment(id) {
	var _url = $("#_url").val();
	$(id).select2({
		theme: "bootstrap",
		ajax: {
			url: _url + "segment/ajax-parent-list",
			dataType: "json",
			delay: 400,
			method: "post",
			data: function(params) {
				var queryParameters = {
					term: params.term
				};

				return queryParameters;
			},
			processResults: function(data) {
				return {
					results: $.map(data, function(item) {
						return {
							id: item.id,
							text: item.name
						}
					})
				}
			}
		}
	});
}