@* Show Batch or Group Session Data Modal *@
<div class="modal fade" id="sessionModal" tabindex="-1" data-bs-config='{"backdrop":"static", "focus":true, "keyboard":false}'>
    <div class="modal-dialog modal-lg modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header align-items-start">
                <h5 class="modal-title text-truncate flex-grow-1">Current session data</h5>
                <button class="btn btn-close2 btn-xs btn-nav" type="button" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="mb-2" id="sessionInfo">
                    <i class="bi-exclamation-triangle text-warning pe-1"></i>
                    Changing session data can affect your running study. You should only edit them if you know what you are doing.
                </div>
                <form class="form-batch" id="sessionForm">
                    <div class="row mb-3">
                        <label class="col-sm-2 col-form-label" for="sessionFormJsonData" data-bs-tooltip="Edit your session data here">
                            Session data<br>
                            <button type="button" class="btn btn-outline-secondary btn-sm pretty-json-button" data-target="#sessionJsonEditor" data-bs-tooltip="Format your session's JSON nicely">Pretty</button>
                        </label>
                        <div class="col-sm-10">
                            <div class="form-control" id="sessionJsonEditor"></div>
                            @* We use hidden textarea and input here to transfer the JSON data and version to the form POST *@
                            <textarea id="sessionFormJsonData" name="data" hidden></textarea>
                            <input type="hidden" id="sessionFormVersion" name="version" />
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer" id="sessionModalFooter">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-batch" id="sessionConfirmed">Save</button>
            </div>
        </div>
    </div>
</div>

<script @{helper.CSPNonce.attr} type="module">
    import * as Helpers from "@routes.Assets.versioned("lib/jatos-gui/javascripts/helpers.js")";
    import * as Alerts from "@routes.Assets.versioned("lib/jatos-gui/javascripts/alerts.js")";
    import * as FormValidation from "@routes.Assets.versioned("lib/jatos-gui/javascripts/formValidation.js")";
    import * as Editor from "@routes.Assets.versioned("lib/jatos-gui/javascripts/editor.js")";

    const alerts = new Alerts.Named("session");
    $("#sessionModal").on('hide.bs.modal', alerts.hideAll);

    $('#batchTable').on('click', '.batch-session', function() {
        const batch = Helpers.getDataFromDataTableRow($("#batchTable").DataTable(), this);
        const dataUrl = window.routes.Api.getBatchSession(batch.id);
        $('#sessionModal').data('type', 'batch');
        $('#sessionModal').data('properties', batch);
        loadSession(dataUrl);
    });

    $('#groupsModal').on('click', '.group-session', function() {
        const tr = $(this).closest('tr');
        const group = $("#groupsTable").DataTable().row(tr).data();
        const dataUrl = window.routes.Api.getGroupSession(group.id);
        $('#sessionModal').data('type', 'group');
        $('#sessionModal').data('properties', group);
        loadSession(dataUrl);
    });

    function loadSession(dataUrl) {
        $.ajax({
            url: dataUrl,
            success: fillSessionModal,
            error: (err) => Alerts.error("Couldn't load session data.")
        });
    }

    function fillSessionModal(session) {
        $("#sessionForm")[0].reset();
        FormValidation.clear("#sessionForm");
        const type = $('#sessionModal').data('type');
        const properties = $('#sessionModal').data('properties');
        if (type == 'batch') {
            $('#sessionModal .modal-title').text("Current batch session data");
            Helpers.generateModalSubtitles("#sessionModal", {"Batch": properties.title});
        } else if (type == 'group') {
            $('#sessionModal .modal-title').text("Current group session data");
            Helpers.generateModalSubtitles("#sessionModal", {"Group ID": properties.id});
        }

        const sessionData = session.data?.sessionData ?? "{}";
        Editor.setup("json", sessionData, "#sessionJsonEditor", 10000);
        Editor.focus("#sessionJsonEditor");

        $('#sessionFormVersion').val(session.data.version);
        $('#sessionModal').modal('show');
    }

    $("#sessionConfirmed").click(function(e) {
        event.preventDefault(e);
        const jsonData = Editor.getValue('#sessionJsonEditor');
        $("#sessionFormJsonData").val(jsonData);
        const properties = $('#sessionModal').data('properties');
        const type = $('#sessionModal').data('type');
        const version = $('#sessionFormVersion').val();

        if (type == 'batch') {
            const postUrl = window.routes.Api.updateBatchSession(properties.id, version);
            postSession(postUrl);
        } else if (type == 'group') {
            const postUrl = window.routes.Api.updateGroupSession(properties.id, version);
            postSession(postUrl);
        }
    });

    function postSession(postUrl) {
        const sessionData = Editor.getValue('#sessionJsonEditor');
        $.ajax({
            type: 'PATCH',
            url: postUrl,
            headers: { 'Csrf-Token': '@helper.CSRF.getToken.value' },
            contentType: 'application/json; charset=UTF-8',
            dataType: 'json',
            processData: false,
            data: sessionData,
            success: function(response) {
                $('#sessionModal').modal('hide');
                Alerts.success("The session data were changed successfully.");
            },
            error: function(err) {
                FormValidation.clear("#sessionForm");
                alerts.warning("The session data were not saved.");
                const message = err?.responseJSON?.error?.message;
                if (message) {
                    alerts.error(message);
                } else {
                    alerts.error("Couldn't change session data");
                }
            }
        });
    }
</script>