/* ---------------------------------------------------------------------------------

    Component: Table grid


    Input Options for gridOptions:
    - title: confirm modal title
    - text: confirm text
    - confirm_if: condition upon confirm should be shown or not
    - onclick: event that should happen on ok clicked. If there are parameters to be used with event use -  onclick: ()=>{ OrderCancel(order); }

    Usage:
    <button v-confirm="{ title: 'Isprazni korpu', confirm_if: order.status_kljuc > 7, text:'Da li ste sigurni da zelite celu korpu da ispraznite?', onclick:EmptyBasket }">Delete</button>
*/
Vue.directive('confirm', 
{  
    bind: function (el, binding) 
    {
        setTimeout(function()
        {
            if(binding.value.confirm_if != undefined && binding.value.confirm_if == true)
            {
                return false;
            }

            var rand = Math.floor(Math.random() * 100000);


            $(el).on('click', function(e)
            {
                $('.confirmOverlay').remove();
                $('body').append('<div id="confirm'+rand+'" class="confirmOverlay" style="display:none">'+
                                '    <div class="confirmDialog">'+
                                '            <div class="confirmHeader">'+binding.value.title+'</div>'+
                                '            <div class="confirmText">'+binding.value.text+'</div>'+
                                '            <div class="confirmFooter">'+
                                '                <button class="blue" id="confirmOK'+rand+'">OK</button>'+
                                '                <button class="clear" id="confirmCancel'+rand+'">Cancel</button>'+
                                '            </div>'+
                                '        </div>'+
                                '</div>');

                $('#confirmOK'+rand).on('click', function()
                {
                    binding.value.onclick();
                    $('#confirm'+rand).fadeOut(400, function(){ $('#confirm'+rand).remove();});
                });

                $('#confirmCancel'+rand).on('click', function()
                {
                    $('#confirm'+rand).fadeOut(100, function(){ $('#confirm'+rand).remove();});
                });

                $('#confirm'+rand).fadeIn(200);
            });
        },200);
    }
});