$(document).ready(function ()
{
    $("#emsg").hide();
    $("#form_ticket_emsg").hide();

    canvasSign();

    // Data e Hora
    $(".dt").inputmask("dd/mm/yyyy", {placeholder: "__/__/____"});
    //retira  o datepicker 
    $(".dt").on("focus blur keypress click", function () {
        $(this).datepicker("disable");
    });
    //componten abre o datepicker, e remove depois 
    $('.open_dt').click(function () {
        var t = $(this).parent().find('input.dt');
        t.datepicker('enable');
        t.datepicker('show').on("change", function (e) {
            t.datepicker("disable");
        });
    });

    $(".clockpicker").inputmask("hh:mm", {placeholder: "__:__"});
    var inputclockpicker;
    $('body').on("click", '.open_clockpicker', function (e) {
        var t = $(this).data("id");
        inputclockpicker = $("#" + t).clockpicker({
            donetext: 'Adicionar',
            autoclose: false,
        });

        e.stopPropagation();
        inputclockpicker.clockpicker('show');
        $("#" + t).on("change", function (e) {
            e.preventDefault();
            e.stopPropagation();
            $('.clockpicker').off();
            $(".clockpicker").inputmask("hh:mm", {placeholder: "__:__"});
            inputclockpicker = false;

        });
    });
    $("body").on("focus blur keypress click", '.clockpicker', function (e) {
        if (inputclockpicker) {
            $('.clockpicker').off();
            $(".clockpicker").inputmask("hh:mm", {placeholder: "__:__"});
            inputclockpicker = false;
        }

        var validate = $(this).val().split(":");
        if ((validate[0] > 23) ||
                (validate[1] > 59)) {
            $(this).val('');
            $(this).focus();
            return;
        }
    });


    $(".multiple_select").select2({
        theme: "bootstrap"
    });

    // Toggle do grupo de perguntas
    $(".level-0").hide();
    $('.level-1').css('cursor', 'pointer');
    $(".level-1").on('click', function (event)
    {
        if ($(this).hasClass("open")) {
            $(".level-0").hide();
            $("body,html").animate(
                    {
                        scrollTop: $('#' + $(this).attr('id')).offset().top - 55
                    },
                    300 //speed
                    );
            $(this).removeClass("open");
        } else {
            $(".level-0").hide();

            var parent_id = $(this).attr('data-question_id');
            $("tr[data-parent-id='" + parent_id + "']").show();

            $("body,html").animate(
                    {
                        scrollTop: $('#' + $(this).attr('id')).offset().top - 55
                    },
                    300 //speed
                    );
            $(this).addClass("open");
        }
    });

    // Clonar o elemento anterior com o ADD MORE
    $('.add-more').on('click', function (e)
    {
        var first_clone = true;

        var cloneAux = $(this).parent().parent().prev();
        var main_question_id = cloneAux.find('.question_id').val();


        // Verifico se é o primeiro clone
        var count_clone = parseInt($('#question_clone_' + main_question_id).val());

        if (count_clone == 0)
        {

        } else
        {

        }
        count_clone = count_clone + 1;
        $('#question_clone_' + main_question_id).val(count_clone);

        var clone = cloneAux.clone();
        clone.attr('id', 'recordsArray_' + main_question_id + '_' + count_clone);

        clone.insertAfter(cloneAux);

        var question_id = clone.find('.question_id');
        question_id.attr('name', 'questionId_' + main_question_id + '_' + count_clone + '[]');
        question_id.attr('id', 'question_id_' + main_question_id + '_' + count_clone);

        var question_type = clone.find('.question_type');
        question_type.attr('name', 'questionId_' + main_question_id + '_' + count_clone + '[]');
        question_type.attr('id', 'question_type_' + main_question_id + '_' + count_clone);

        var question_field = clone.find('.question_field');
        question_field.attr('name', 'questionId_' + main_question_id + '_' + count_clone + '[]');
        question_field.attr('id', 'question_field_' + main_question_id + '_' + count_clone);

        var question_clone = clone.find('.question_clone');
        question_clone.attr('name', 'questionId_' + main_question_id + '_' + count_clone + '[]');
        question_clone.attr('id', 'question_clone_' + main_question_id + '_' + count_clone);

        //campo destinado a manter o id da linha da tatela para não alterar caso o usuário não marque
        var question_clone = clone.find('.module_helpdesk_form_data');
        question_clone.attr('name', 'questionId_' + main_question_id + '_' + count_clone + '[]');
        question_clone.attr('id', 'module_helpdesk_form_data_' + main_question_id + '_' + count_clone);


        var question_value = clone.find('.field-value');
        question_value.attr('name', 'questionId_' + main_question_id + '_' + count_clone + '[]');
        question_value.attr('id', 'questionId_' + main_question_id + '_' + count_clone);
        $('#' + 'questionId_' + main_question_id + '_' + count_clone).val('');

        var canvas = clone.find('.myCanvas');
        if (canvas) {
            canvas.attr('id', 'canvas_' + main_question_id + '_' + count_clone);
            canvas.attr('data-id', 'questionId_' + main_question_id + '_' + count_clone);
        }
        var canvas = clone.find('.canvas-name');
        if (canvas) {
            canvas.attr('name', 'questionId_' + main_question_id + '_' + count_clone + '[]');
            canvas.attr('id', 'name_question_' + main_question_id + '_' + count_clone);
            $('#' + 'name_question_' + main_question_id + '_' + count_clone).val('');
        }


        var clear = clone.find('.btn-clear');
        if (clear != null) {
            clear.attr("data-id", 'canvas_' + main_question_id + '_' + count_clone);
            clear.attr("id", 'btn_canvas_' + main_question_id + '_' + count_clone);
            var clearBtn = document.getElementById(clear.attr('id'));


            clearBtn.addEventListener("click", function (e) {
                e.preventDefault();
                var canvas = document.getElementById($(this).attr('data-id'));
                canvas.width = canvas.width;
            }, false);
        }
        //tratamento do upload, um campo file, e 2 campos, texto e nome arquivo
        var file = clone.find('.fl-upload');
        if (file) {
            file.val('');
            file.attr('data-id', main_question_id + '_' + count_clone);
            file.attr('id', "upload_" + main_question_id + '_' + count_clone);

        }
        var upload = clone.find('.upload-name');
        if (upload) {
            upload.attr('id', 'name_question_' + main_question_id + '_' + count_clone);
            upload.attr('name', 'questionId_' + main_question_id + '_' + count_clone + '[]');
        }


        // faço o ajuste do campo de valor do parâmetro
//        clone.find('.field-value').
//        if(question_type.val() == '')
//        {
//            
//        }
//        elseif(question_type.val() == '')
//        {
//            
//        }
        InitThis();
    });

    $('body').find('[data-toggle="tooltip"]').tooltip();

    var _url = $("#_url").val();

    $('#form_id').on('change', function (event) {

        var ticket_id = $("#ticket_id").val();
        var form_id = $(this).val();
        event.preventDefault();
        $.ajax(
                {
                    type: 'POST',
                    url: _url + "module_helpdesk/ajax/selectForm/" + ticket_id + '/' + form_id,
                    processData: false,
                    contentType: false,
                    success: function (result) {
                        var data = JSON.parse(result);
                        if (data.status == "OK") {
                            location.reload();
                        } else {
                            $("#ibox-form").unblock();
                            var body = $("html, body");
                            body.animate({scrollTop: 0}, '1000', 'swing');
                            $("#form_ticket_emsgbody").html(data.msg);
                            $("#form_ticket_emsg").show("slow");
                        }
                    }
                });
    });


    //Necessário para o botão que remove o campo que mostra anexo, e libera o input para alteração no banco
    $('.reload_input').on('click', function (event) {
        event.preventDefault();
        $('#not_update_' + $(this).data("id")).remove();
        $('.input_' + $(this).data("id")).toggleClass('hide');
    });


    $('#responsible_id').on('change', function (event) {
        event.preventDefault();
        $('#form-filter').submit();
    });


    //seta do componente checkbox  
    $('.checkbox_form').on('change', function (event) {
        if ($(this).prop("checked") == true) {
            $("#" + $(this).data("id")).val(1);
        } else {
            $("#" + $(this).data("id")).val(0);
        }
    });




    $('.scale').on('click', function (event) {
        event.preventDefault();
//                $(this).parent().find('.scale').removeClass('active');
//                $(this).addClass('active');
        $(this).parent().find('.scale').css('background-color', '#2196f3');
        $(this).css('background-color', '#184d75');
        $(this).parent().find('.scale_hidden').val($(this).attr('data-value'));
//            $('#form-filter').submit();
    });

    $('.scale.active').click();

    $('#status').on('change', function (event) {
        event.preventDefault();
        $('#form-filter').submit();
    });


    $('#sla').on('change', function (event) {
        event.preventDefault();
        $('#form-filter').submit();
    });

    // Advanced
    $('#items_per_page').on('change', function (event) {
        event.preventDefault();
        var items = $(this).find('option:selected').val();
        $("input[name=items_per_page]").val(items);
        $('#form-filter').submit();
    });

// Period all, day, week, month
    $('#filter-period a').on('click', function (event) {
        event.preventDefault();

        var period = $(this).data('val');
        $("input[name=period]").val(period);

        $('#form-filter').submit();
    });

    // Period interval datepicker close on selected
    $('input[name=period_ini]').on('change', function () {
        $(this).datepicker('hide');
    });
    $('input[name=period_end]').on('change', function () {
        $(this).datepicker('hide');
    });



    // Clear
    $('#filter-clear').on('click', function (event) {
        event.preventDefault();
        $("input[name=search]").val('');
        $("input[name=items_per_page]").val('');
        $("#client_id").val('');
        $("#responsible_id").val('');
        $("input[name=status]").val('all');
        $("input[name=period]").val('all');
        $('#form-filter').submit();
    });

    $('.dropdown-period').click(function (event) {
        event.stopPropagation();
    });



    /**
     * Popup de confirmação de aceite
     */

    $('.ticket-accept').on('click', function (event) {
        event.preventDefault();

        var href = $(this).attr('href');
        var ticket_id = $(this).attr('data-id');
        var dialog = bootbox.confirm({
            message: 'Tem Certeza que deseja aceitar esse Ticket?',
            buttons: {
                confirm: {
                    label: _L['Yes'],
                    className: "btn-primary"
                },
                cancel: {
                    label: _L['No'],
                    className: "btn-danger"
                }
            },
            callback: function (result) {
                if (result == true)
                {
                    $.ajax(
                            {
                                type: 'POST',
                                url: _url + "module_helpdesk/ajax/accept/" + ticket_id,
                                data: {'ticket_id': ticket_id},
                                processData: false,
                                contentType: false,
                                success: function (result) {
                                    var data = JSON.parse(result);
                                    if (data.status == "OK") {
                                        location.reload();
                                    } else {
                                        $("#ibox-form").unblock();
                                        var body = $("html, body");
                                        body.animate({scrollTop: 0}, '1000', 'swing');
                                        $("#form_ticket_emsgbody").html(data.msg);
                                        $("#form_ticket_emsg").show("slow");
                                    }
                                }
                            });
                } else {
                    dialog.modal('hide');
                    return false;
                }
            }
        });

    });

    // Coloco as máscaras nos campos
    $(".field-date").inputmask("99/99/9999? 99:99");
    $(".field-hour").inputmask("hh:mm", {placeholder: "__:__"});
    $(".field-number").inputmask("9?99999999999999999999999999999999999999999999999999999");

    function validateform() {
        var erro = '';
        $(".field-value[required]").each(function (e) {
            if ($(this).val() == "") {
                erro += "<br/>" + ($(this).parent().find("label").find('span').html());
            }
        });

        if (erro != "") {
            $("#form_ticket_emsgbody").html("Verifique os campos de preenchimento obrigatório " + erro);
            $("#form_ticket_emsg").show("slow");

//                $(".modal-scrollable").scrollTop(0);
            var body = $(".modal-scrollable");
            body.animate({scrollTop: 0}, '1000', 'swing');
            return false;
        } else {
            $("#form_ticket_emsg").hide();
            return true;
        }

    }
    // Envio formulário
    $("#submit").click(function (e) {
        if (validateform()) {

        } else {
            return false;
        }
        $('.myCanvas').each(function (e) {
            var canvas = document.getElementById($(this).attr('id'));
            document.getElementById($(this).data('id')).value = (canvas.toDataURL('image/png'));

        });

        totalUpload = $('.fl-upload').length;
        numeroUpload = 0;
        $('.fl-upload').each(async function (e) {
            var file = document.querySelector('#upload_' + $(this).data("id")).files[0];
            if (file) {
                var promise = getBase64(file);
                document.getElementById("questionId_" + $(this).data("id")).value = await promise;
                document.getElementById("name_question_" + $(this).data("id")).value = file.name;

            }

            numeroUpload++;
            if (numeroUpload >= totalUpload) {
                finalizaForm();
            }
        });

    });
});
var totalUpload = 0;
var numeroUpload = 0;
function finalizaForm() {
    var formData = new FormData($("#form-ticket")[0]);

    var o = {};
    for (var pair of formData.entries()) {
        if (o[pair[0]]) {
            if (!o[pair[0]].push) {
                o[pair[0]] = [o[pair[0]]];
            }
            o[pair[0]].push(pair[1] || '');
        } else {
            o[pair[0]] = pair[1] || '';
        }
    }
    console.log(o);
    localStorage.setItem('helpdedk_form_ticket', JSON.stringify(o));
    postDataForm();
}

function getBase64(file) {
    return new Promise(function (resolve, reject) {
        var reader = new FileReader();
        reader.onload = function () {
            resolve(reader.result);
        };
        reader.onerror = reject;
        reader.readAsDataURL(file);
    });
}


postDataForm();
function postDataForm() {
    result = JSON.parse(localStorage.getItem('helpdedk_form_ticket'));
    if (result != null) {
        var formData = new FormData();
        for (key in result) {
            if (Array.isArray(result[key])) {
                for (value in result[key]) {
                    formData.append(key, result[key][value]);
                }
            } else {
                formData.append(key, result[key]);

            }
        }

        $.ajax(
                {
                    type: 'POST',
                    url: $("#_url").val() + "module_helpdesk/ticket/form_post",
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function (data) {
                        if (data.status == "OK") {
                            localStorage.setItem('helpdedk_form_ticket', null);
                            reload();
//                            $("#ibox-form").unblock();
//                            var body = $("html, body");
//                            body.animate({scrollTop: 0}, '1000', 'swing');
//                            $("#form_ticket_emsgbody").html(data.msg);
//                            $("#form_ticket_emsg").show("slow");
                        } else {
                            localStorage.setItem('helpdedk_form_ticket', null);
                            $("#ibox-form").unblock();
                            var body = $("html, body");
                            body.animate({scrollTop: 0}, '1000', 'swing');
                            $("#form_ticket_emsgbody").html(data.msg);
                            $("#form_ticket_emsg").show("slow");
                        }
                        localStorage.setItem('helpdedk_form_ticket', null);

                    },
                    error: function (data) {

                        setTimeout(function () {
                            postDataForm();
                        }, 10000);
                        swal({
                            title: _L['module_helpdesk msg form offline'],
                            imageUrl: '',
                            text: '',
                            type: 'info',
                            html: true,
                            showCancelButton: false,
                            showConfirmButton: false,
                            closeOnConfirm: false,
                            closeOnCancel: true

                        });


                    }
                });
    }
}

function InitThis() {
    $(".multiple_select").select2({
        theme: "bootstrap"
    });
    var mousePressed = false;
//        var ctx = document.getElementsByClassName('myCanvas');
//        for (var i = 0; i < ctx.length; i++) {
//            ctx[0].getContext("2d");
//        }

    $('.myCanvas').mousedown(function (e) {
        ctx = document.getElementById($(this).attr('id')).getContext("2d");
        mousePressed = true;
        Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, false, $(this).attr('id'));
    });

    $('.myCanvas').mousemove(function (e) {
        ctx = document.getElementById($(this).attr('id')).getContext("2d");
        if (mousePressed) {
            Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, true, $(this).attr('id'));
        }


    });

    $('.myCanvas').mouseup(function (e) {
        ctx = document.getElementById($(this).attr('id')).getContext("2d");
        mousePressed = false;
    });

    $('.myCanvas').mouseleave(function (e) {

        var canvas = document.getElementById($(this).attr('id'));
        //   var file_upload = document.getElementById($(this).attr('id') + '_sign');
        ctx = canvas.getContext("2d");
        mousePressed = false;
    });



    //TODO: NÃO FUNCIONA
//        $(".list-components").select2();


    gerenciaTabs("#abas");

}

function canvasSign()
{
    // Get a regular interval for drawing to the screen
    window.requestAnimFrame = (function (callback) {
        return window.requestAnimationFrame ||
                window.webkitRequestAnimationFrame ||
                window.mozRequestAnimationFrame ||
                window.oRequestAnimationFrame ||
                window.msRequestAnimaitonFrame ||
                function (callback) {
                    window.setTimeout(callback, 1000 / 60);
                };
    })();

    // Set up the canvas
    $(".myCanvas").each(function (e)
    {
//        console.log( e + ": " + $(this).attr('id') );

        var canvas = document.getElementById($(this).attr('id'));
        var ctx = canvas.getContext("2d");
        ctx.strokeStyle = "#222222";
        ctx.lineWith = 2;

        // Set up the UI
        //			var sigText = document.getElementById("sig-dataUrl");
        //			var sigImage = document.getElementById("sig-image");
        //			var clearBtn = document.getElementById("sig-clearBtn");
        //			var submitBtn = document.getElementById("sig-submitBtn");
        //			clearBtn.addEventListener("click", function (e) {
        //				clearCanvas();
        //				sigText.innerHTML = "Data URL for your signature will go here!";
        //				sigImage.setAttribute("src", "");
        //			}, false);
        //			submitBtn.addEventListener("click", function (e) {
        //				var dataUrl = canvas.toDataURL();
        //				sigText.innerHTML = dataUrl;
        //				sigImage.setAttribute("src", dataUrl);
        //			}, false);

        var clearBtn = document.getElementById("btn_" + $(this).attr('id'));
//        console.log(clearBtn);
        clearBtn.addEventListener("click", function (e) {
            e.preventDefault();
            clearCanvas();
//                sigText.innerHTML = "Data URL for your signature will go here!";
//                sigImage.setAttribute("src", "");
        }, false);


        // Set up mouse events for drawing
        var drawing = false;
        var mousePos = {x: 0, y: 0};
        var lastPos = mousePos;
        canvas.addEventListener("mousedown", function (e) {
            drawing = true;
            lastPos = getMousePos(canvas, e);
        }, {passive: false});

        canvas.addEventListener("mouseup", function (e) {
            drawing = false;
        }, {passive: false});

        canvas.addEventListener("mousemove", function (e) {
            mousePos = getMousePos(canvas, e);
        }, {passive: false});

        // Set up touch events for mobile, etc
        canvas.addEventListener("touchstart", function (e) {
            mousePos = getTouchPos(canvas, e);
            var touch = e.touches[0];
            var mouseEvent = new MouseEvent("mousedown", {
                clientX: touch.clientX,
                clientY: touch.clientY
            });
            canvas.dispatchEvent(mouseEvent);
        }, {passive: false});

        canvas.addEventListener("touchend", function (e) {
            var mouseEvent = new MouseEvent("mouseup", {});
            canvas.dispatchEvent(mouseEvent);
        }, {passive: false});

        canvas.addEventListener("touchmove", function (e) {
            var touch = e.touches[0];
            var mouseEvent = new MouseEvent("mousemove", {
                clientX: touch.clientX,
                clientY: touch.clientY
            });
            canvas.dispatchEvent(mouseEvent);
        }, {passive: false});

        // Prevent scrolling when touching the canvas
        document.body.addEventListener("touchstart", function (e) {
            if (e.target == canvas) {
                e.preventDefault();
            }
        }, {passive: false});

        document.body.addEventListener("touchend", function (e) {
            if (e.target == canvas) {
                e.preventDefault();
            }
        }, {passive: false});

        document.body.addEventListener("touchmove", function (e) {
            if (e.target == canvas) {
                e.preventDefault();
            }
        }, {passive: false});

        // Get the position of the mouse relative to the canvas
        function getMousePos(canvasDom, mouseEvent) {
            var rect = canvasDom.getBoundingClientRect();
            return {
                x: mouseEvent.clientX - rect.left,
                y: mouseEvent.clientY - rect.top
            };
        }

        // Get the position of a touch relative to the canvas
        function getTouchPos(canvasDom, touchEvent) {
            var rect = canvasDom.getBoundingClientRect();
            return {
                x: touchEvent.touches[0].clientX - rect.left,
                y: touchEvent.touches[0].clientY - rect.top
            };
        }

        // Draw to the canvas
        function renderCanvas() {
            if (drawing) {
                ctx.moveTo(lastPos.x, lastPos.y);
                ctx.lineTo(mousePos.x, mousePos.y);
                ctx.stroke();
                lastPos = mousePos;
            }
        }

        // Clear the canvas
        function clearCanvas() {
            canvas.width = canvas.width;
        }

        // Allow for animation
        (function drawLoop() {
            requestAnimFrame(drawLoop);
            renderCanvas();
        })();
    });
}

function gerenciaTabs(identificador) {
    $('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
        localStorage.setItem('activeTab', $(e.target).attr('href'));
    });

    var activeTab = localStorage.getItem('activeTab');
    var reload = localStorage.getItem('reload');
    if (reload) {
        localStorage.removeItem('reload');
        if (activeTab) {
            $(identificador + ' a[href="' + activeTab + '"]').tab('show');
        }
    }
}
function reload() {
    localStorage.setItem('reload', true);
    location.reload();
}


function Draw(x, y, isDown, id) {
    if (isDown) {
        ctx.beginPath();
        ctx.strokeStyle = $('#selColor').val();
        ctx.lineWidth = $('#selWidth').val();
        ctx.lineJoin = "round";
        ctx.moveTo(lastX, lastY);
        ctx.lineTo(x, y);
        ctx.closePath();
        ctx.stroke();
    }
    lastX = x;
    lastY = y;

}

function clearArea(com) {
    // Use the identity matrix while clearing the canvas
    var canvas = document.getElementById(com.data("id"));
    ctx = canvas.getContext("2d");

    ctx.setTransform(1, 0, 0, 1, 0, 0);
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}