@* Edit batch properties Modal *@
<div class="modal fade" id="batchPropertiesModal" 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">Batch properties</h5>
                <button class="btn btn-close2 btn-xs btn-nav" type="button" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form class="form-batch" id="batchPropertiesForm">
                    <div class="row mb-3">
                        <label class="col-sm-3 col-form-label" for="batchPropertiesFormTitle">
                            Title<span class="input-required" data-bs-tooltip="required"></span>
                        </label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="batchPropertiesFormTitle" name="title" placeholder="Your batch title" required>
                        </div>
                    </div>
                    <div class="row mb-3">
                        <label class="col-sm-3 col-form-label" for="batchPropertiesFormComments" data-bs-tooltip="Something you want to share or just don't want to forget?">
                            Comments
                        </label>
                        <div class="col-sm-9">
                            <textarea rows="3" class="form-control" id="batchPropertiesFormComments" name="comments" placeholder="Your comments"></textarea>
                        </div>
                    </div>
                    <fieldset class="row mb-3">
                        <legend class="col-form-label col-sm-3 pt-0" data-bs-tooltip="Which types are allowed to run this study?">Allowed types</legend>
                        <div class="col-sm-9">
                            <div class="form-check ps-0 pb-1">
                                <label class="switch no-info-icon" data-bs-tooltip="Adds a link that can be used only once. Typically used to distribute amongst workers that you contact individually. Each link is personalized, i.e., you provide some kind of ID (e.g. name or pseudonym) when creating it.">
                                    <input type="checkbox" id="batchPropertiesFormPersonalSingle" name="allowedWorkerTypes" value="PersonalSingle">
                                    <span class="slider slider-batch round"></span>
                                </label>
                                Personal Single
                            </div>
                            <div class="form-check ps-0 pb-1">
                                <label class="switch no-info-icon" data-bs-tooltip="Adds a link that can be used multiple times and always assigns the results to the same worker. Typically used to distribute amongst your pilot workers. Each link is personalized, i.e., you provide some kind of ID (e.g. name or pseudonym) when creating it.">
                                    <input type="checkbox" id="batchPropertiesFormPersonalMultiple" name="allowedWorkerTypes" value="PersonalMultiple">
                                    <span class="slider slider-batch round"></span>
                                </label>
                                Personal Multiple
                            </div>
                            <div class="form-check ps-0 pb-1">
                                <label class="switch no-info-icon" data-bs-tooltip="Shows a link that can be used only once per browser and that adds a new worker with each run. Typically used to distribute in a mailing list or posting it in a public website.">
                                    <input type="checkbox" id="batchPropertiesFormGeneralSingle" name="allowedWorkerTypes" value="GeneralSingle">
                                    <span class="slider slider-batch round"></span>
                                </label>
                                General Single
                            </div>
                            <div class="form-check ps-0 pb-1">
                                <label class="switch no-info-icon" data-bs-tooltip="Shows a link that can be used many times and that adds a new worker with each run. Typically used where it's no problem that workers can do the same study several times.">
                                    <input type="checkbox" id="batchPropertiesFormGeneralMultiple" name="allowedWorkerTypes" value="GeneralMultiple">
                                    <span class="slider slider-batch round"></span>
                                </label>
                                General Multiple
                            </div>
                            <div class="form-check ps-0">
                                <label class="switch no-info-icon" data-bs-tooltip="MTurk workers access a study through Amazon's Mechanical Turk. MTurk workers can access a study only once.">
                                    <input type="checkbox" id="batchPropertiesFormMT" name="allowedWorkerTypes" value="MT">
                                    <span class="slider slider-batch round"></span>
                                </label>
                                MTurk
                            </div>
                        </div>
                    </fieldset>
                    <div class="row mb-3">
                        <label class="col-sm-3 col-form-label" for="batchPropertiesFormMaxTotalWorkers" data-bs-tooltip="Enter the total number of workers this batch is allowed to have. It's unlimited if you don't specify it.">
                            Max total workers
                        </label>
                        <div class="col-sm-5 col-md-3">
                            <div class="input-group">
                                <div class="input-group-text">
                                    <input type="checkbox" class="form-check-input checkbox-batch mt-0" id="batchPropertiesFormMaxTotalWorkerLimited" name="maxTotalWorkerLimited">
                                </div>
                                <input type="number" class="form-control" id="batchPropertiesFormMaxTotalWorkers" name="maxTotalWorkers" min="1">
                            </div>
                        </div>
                    </div>
                    <div class="row mb-3">
                        <label class="col-sm-3 col-form-label" for="batchPropertiesFormBatchInput" data-bs-tooltip="Your component scripts can use this input data. You can also leave it empty if not needed. Use the 'Pretty' button to format the JSON nicely.">
                            Batch input<br>
                            <button type="button" class="btn btn-outline-secondary btn-sm pretty-json-button" data-target="#batchPropertiesJsonEditor" data-bs-tooltip="Format your JSON nicely">Pretty</button>
                        </label>
                        <div class="col-sm-9">
                            <div class="form-control" id="batchPropertiesJsonEditor"></div>
                            @* We use a hidden textarea here to transfer the JSON data into the form POST *@
                            <textarea id="batchPropertiesFormBatchInput" name="batchInput" hidden></textarea>
                        </div>
                    </div>
                    <div class="card card-body mt-5" id="batchPropertiesGroupProperties">
                        <div class="card-title px-2">
                            <h5>Group properties</h5>
                        </div>
                        <p class="d-none card-text" id="batchPropertiesNotGroupStudyText">This is not a group study. You can enable this option in the study properties.</p>
                        <div class="row mb-2">
                            <label class="col-sm-4 col-form-label" for="batchPropertiesFormMaxTotalMembers" data-bs-tooltip="Enter the total number of members a group can have, active or inactive. It's unlimited if you don't specify it.">
                                Max total members
                            </label>
                            <div class="col-sm-5 col-md-3">
                                <div class="input-group">
                                    <div class="input-group-text">
                                        <input type="checkbox" class="form-check-input checkbox-batch mt-0" id="batchPropertiesFormMaxTotalMemberLimited" name="maxTotalMemberLimited">
                                    </div>
                                    <input type="number" class="form-control" id="batchPropertiesFormMaxTotalMembers" name="maxTotalMembers" min="1">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <label class="col-sm-4 col-form-label" for="batchPropertiesFormMaxActiveMembers" data-bs-tooltip="Enter the max number of active members a group can have at the same time. It's unlimited if you don't specify it.">
                                Max active members
                            </label>
                            <div class="col-sm-5 col-md-3">
                                <div class="input-group">
                                    <div class="input-group-text">
                                        <input type="checkbox" class="form-check-input checkbox-batch mt-0" id="batchPropertiesFormMaxActiveMemberLimited" name="maxActiveMemberLimited">
                                    </div>
                                    <input type="number" class="form-control" id="batchPropertiesFormMaxActiveMembers" name="maxActiveMembers" min="1">
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-batch" id="batchPropertiesConfirmed">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("batch-properties");
    $("#batchPropertiesModal").on('hide.bs.modal', alerts.hideAll);

    $('#batchTable').on('click', '.batch-properties', function() {
        const batch = Helpers.getDataFromDataTableRow($("#batchTable").DataTable(), this);
        $.ajax({
            url: window.routes.StudyLinks.batchProperties(window.study.id, batch.id),
            success: function(properties) {
                fillBatchPropertiesForm(batch, properties);
                $('#batchPropertiesModal').modal('show');
            },
            error: (err) => Alerts.error("Couldn't load batch properties.")
        });
    });

    function fillBatchPropertiesForm(batch, properties) {
        $("#batchPropertiesForm")[0].reset();
        FormValidation.clear("#batchPropertiesForm");
        $('#batchPropertiesModal').data('batch', batch);
        $('#batchPropertiesModal').data('properties', properties);

        Helpers.generateModalSubtitles("#batchPropertiesModal", {"Batch ID": batch.id});
        $('#batchPropertiesFormTitle').val(properties.title);
        $('#batchPropertiesFormComments').val(properties.comments);

        // Set allowed type checkboxes
        $.each(properties.allowedWorkerTypes, function(index, type) {
            $(`#batchPropertiesForm${type}`).prop('checked', true);
        });

        Editor.setup("json", properties.batchInput, "#batchPropertiesJsonEditor");

        // Group properties
        if (window.study.isGroupStudy) {
            $('#batchPropertiesGroupProperties').removeClass("disabled");
            $("#batchPropertiesGroupProperties input").attr("disabled", false);
            $('#batchPropertiesNotGroupStudyText').addClass("d-none");
        } else {
            $('#batchPropertiesGroupProperties').addClass("disabled");
            $("#batchPropertiesGroupProperties input").attr("disabled", true);
            $('#batchPropertiesNotGroupStudyText').removeClass("d-none");
        }

        Helpers.disableForm("#batchPropertiesForm", window.study.isLocked);
        if (window.study.isLocked) {
            alerts.warning("Study is locked. It is not possible to edit the batch properties. Unlock this study in its study page.");
        }
    }

    $('#batchPropertiesModal').on('shown.bs.modal', () => {
        const properties = $('#batchPropertiesModal').data('properties');
        drawInputGroupWithCheckbox("#batchPropertiesForm", "maxTotalWorkerLimited", "maxTotalWorkers", properties.maxTotalWorkers);
        drawInputGroupWithCheckbox("#batchPropertiesForm", "maxTotalMemberLimited", "maxTotalMembers", properties.maxTotalMembers);
        drawInputGroupWithCheckbox("#batchPropertiesForm", "maxActiveMemberLimited", "maxActiveMembers", properties.maxActiveMembers);
    });

    function drawInputGroupWithCheckbox(formSelector, checkboxName, inputName, inputValue) {
        const checkboxElem = $(`${formSelector} input[name='${checkboxName}']`);
        const inputElem = $(`${formSelector} input[name='${inputName}']`);
        if (inputValue) {
            checkboxElem.prop('checked', true);
            inputElem.prop('disabled', false);
            inputElem.removeClass('disabled');
            inputElem.val(inputValue);
            inputElem.attr('data-bs-tooltip', '');
        } else {
            checkboxElem.prop('checked', false);
            inputElem.prop('disabled', true);
            inputElem.addClass('disabled');
            inputElem.val('');
            inputElem.attr('data-bs-tooltip', 'Unlimited. If you want to set a specific number, check the checkbox first.');
        }
    }

    $("#batchPropertiesFormMaxTotalWorkerLimited").change(function(e) {
        drawInputGroupWithCheckbox("#batchPropertiesForm", "maxTotalWorkerLimited", "maxTotalWorkers", this.checked ? 1 : null);
    });

    $("#batchPropertiesFormMaxTotalMemberLimited").change(function(e) {
        drawInputGroupWithCheckbox("#batchPropertiesForm", "maxTotalMemberLimited", "maxTotalMembers", this.checked ? 1 : null);
    });

    $("#batchPropertiesFormMaxActiveMemberLimited").change(function(e) {
        drawInputGroupWithCheckbox("#batchPropertiesForm", "maxActiveMemberLimited", "maxActiveMembers", this.checked ? 1 : null);
    });

    $("#batchPropertiesConfirmed").click(function(event) {
        // Put JSON from editor into textarea to let it be picked up by form.serialize
        const batchInput = Editor.getValue('#batchPropertiesJsonEditor');
        $("#batchPropertiesFormBatchInput").val(batchInput);
        const isMaxTotalWorkerLimited = $('#batchPropertiesFormMaxTotalWorkerLimited').prop('checked');
        const isMaxTotalMemberLimited = $('#batchPropertiesFormMaxTotalMemberLimited').prop('checked');
        const isMaxActiveMemberLimited = $('#batchPropertiesFormMaxActiveMemberLimited').prop('checked');
        if (!isMaxTotalWorkerLimited) $('#batchPropertiesFormMaxTotalWorkers').val(null);
        if (!isMaxTotalMemberLimited) $('#batchPropertiesFormMaxTotalMembers').val(null);
        if (!isMaxActiveMemberLimited) $('#batchPropertiesFormMaxActiveMembers').val(null);
        const batchId = $('#batchPropertiesModal').data('properties').id;
        $.ajax({
            type: 'POST',
            url: window.routes.StudyLinks.submitEditedBatchProperties(window.study.id, batchId),
            headers: { 'Csrf-Token': '@helper.CSRF.getToken.value' },
            data: $('#batchPropertiesForm').serialize(),
            success: function(response) {
                $('#batchPropertiesModal').modal('hide');
                Alerts.success("The batch properties were changed successfully.");
                $("#batchTable").DataTable().ajax.reload();
            },
            error: function(err) {
                FormValidation.clear("#batchPropertiesForm");
                alerts.warning("The batch was not saved.");
                if (Helpers.isJson(err.responseText)) {
                    FormValidation.show("#batchPropertiesForm", err.responseJSON);
                } else if (err.responseText) {
                    alerts.error(err.responseText);
                } else {
                    alerts.error("Couldn't change batch properties");
                }
            }
        });
    });
</script>