@model Guid

<script type="text/javascript">
    init.push(function () {
        refreshNotes();
        $('#btnNewNote').click(showCreateNewNoteWindow);
        $(document).on('hide.bs.modal', '#modalAddNote', canCloseEditNoteWindow);
    });

    function refreshNotes() {
        blockUI();
        $.get('@Url.Action("LoadNotes", "Scenarios", new { @scenarioId = Model })', function (data, status, xhr) {
            $('#notesList').html(data);
            $('#notes-panel').removeClass('hidden');
            $('#notes-error-panel').addClass('hidden');
        }).fail(function () {
            $('#notes-panel').addClass('hidden');
            $('#notes-error-panel').removeClass('hidden');
        }).always(unblockUI);
    };

    function showCreateNewNoteWindow() {
        $.get('@Url.Action("AddNote", "Scenarios", new { Id = Model })', function (data) {
            $('#divEditNote').html(data);
            $('#modalAddNote').modal("show");
        }).fail(function () {
            showErrorModal('Oops...', 'An error occurred while processing your request. Please, try again later.');
        });
    };

    function canCloseEditNoteWindow(e) {
        if ($(e.target).attr('id') != 'modalAddNote')
            return true; // close modal form

        if (typeof isNoteDataChanged === 'function') {
            if (isNoteDataChanged()) {
                if (confirm("Note editing form contains unsaved changes, do you really want to close the form?")) {
                    if (typeof resetNoteDataChanged === 'function') {
                        resetNoteDataChanged();
                        $('#modalAddNote').modal("hide");
                    }
                };
                return false; // DO NOT close modal form
            }
        }
        return true; // close modal form
    };

    function editNote(id) {
        if (!id)
            return "";

        var text = "@Url.Action("EditNote", "Scenarios", new { Id = "JSVar" })".replace("JSVar", id);
        $.get(text, function (data) {
            $('#divEditNote').html(data);
            $('#modalAddNote').modal("show");
        }).fail(function () {
            showErrorModal('Oops...', 'An error occurred while processing your request. Please, try again later.');
        });
    };

    function deleteNote(id) {
        if (!id)
            return "";

        bootbox.confirm({
            message: "Are you sure you want to delete this note?",
            callback: function (result) {
                if (result) {
                    var text = "@Url.Action("DeleteNote", "Scenarios", new { Id = "JSVar" })".replace("JSVar", id);
                    blockUI();
                    $.post(text, function () {
                        refreshNotes();
                    }).fail(function () {
                        showErrorModal('Oops...', 'An error occurred while processing your request. Please, try again later.');
                    }).always(unblockUI);
                }
            },
            className: "bootbox-sm"
        });
    };

    function closeEditNoteWindow() {
        $('#modalAddNote').modal('hide');
    }
</script>

<div class="panel-body hidden" style="border: 0;" id="notes-panel">
    <button class="btn btn-primary lockable" id="btnNewNote"><i class="fa fa-plus"></i> Add Note</button>
    <div class="table-light table-responsive no-margin" id="notesList"></div>
    <div id="modalAddNote" class="modal fade" data-width="600" tabindex="-1" role="dialog" style="display: none;" data-backdrop="static">
        <div class="modal-dialog" id="divEditNote">
        </div> <!-- / .modal-dialog -->
    </div> <!-- / .modal -->
</div>
<div class="panel-body hidden" style="border: 0;" id="notes-error-panel">
    <div class="alert alert-danger">
        Errors occurred during loading scenario's notes.
    </div>
</div>