- 

function init() {

    $('#ajax_status').hide();

    $('#ajax_saving_msg').hide();

    $('#ajax_saving_icon').hide();

    $('#ajax_success_icon').hide();

    $('#ajax_failed_icon').hide();

    $('#ajax_failed_msg').hide();

}

$(document).ready(function() {

    var apiEndpoint = '/api/v1/rotas/';

    init();

    $('#sortable_stages').sortable({

        handle: '.drag_handle',

        placeholder: 'drag_placeholder',

        update: function(event, ui) {

            init();

            $('#sortable_stages').sortable('disable');

            var rotaId = document.getElementById('sortable_stages').dataset.rotaId;

            $('#ajax_saving_msg').text(

                document.getElementById('ajax_status').dataset.savingMsg

            );

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

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

            $('#ajax_status').fadeIn();

            var stageId = ui.item[0].id.replace(/^stage_/, '');

            var newIndex = ui.item.index();

            var newPosition = newIndex + 1;

            $.ajax({

                method: 'PUT',

                url: apiEndpoint + rotaId + '/stages/' + stageId + '/position',

                processData: false,

                contentType: 'application/json',

                data: newPosition

            })

            .done(function(data) {

                $('#ajax_success_msg').text(

                    document.getElementById('ajax_status').dataset.successMsg

                );

                $('#ajax_saving_icon').hide();

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

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

                setTimeout(

                    function() {

                        $('#ajax_status').fadeOut();

                    },

                    700

                );

            })

            .fail(function(jqXHR, status, error) {

                $('#ajax_failed_msg').text(

                    document.getElementById('ajax_status').dataset.failedMsg +

                    error

                );

                $('#ajax_saving_icon').hide();

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

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

                $('#sortable_stages').sortable('cancel');

            })

            .always(function() {

                $('#sortable_stages').sortable('enable');

            })

        }

    });

});