<?php
// Copyright 1999-2022. Plesk International GmbH. All rights reserved.
?>
<div id="<?php echo $this->escape($this->element->getId()) ?>-form-row" class="form-row">
    <div class="field-name">
        <label for="<?php echo $this->escape($this->element->getId()) ?>">
            <?php echo $this->escape($this->element->getLabel()) ?>
        </label>
    </div>
    <div class="field-value">
        <select name="<?php echo $this->escape($this->element->getFullyQualifiedName()) ?>"
                id="<?php echo $this->escape($this->element->getId()) ?>">
            <?php foreach ($this->element->getMultiOptions() as $value => $label): ?>
                <option <?php echo $this->escape($value == $this->element->getValue()) ? 'selected="selected"' : '' ?>
                        value="<?php echo $this->escape($value) ?>">
                    <?php echo $this->escape($label) ?>
                </option>
            <?php endforeach ?>
        </select>
        <span class="hint"><?php echo $this->escape($this->element->getDescription()) ?></span>
        <span class="field-errors preformatted" style="display:none;"></span>
    </div>
</div>
<script type="text/javascript">
    //<![CDATA[
    Jsw.onReady(function () {
        let errors = 0;
        const setError = function (rowId, message) {
            document.querySelector(`#${rowId}`).classList.add('error');
            document.querySelector(`#${rowId} > .field-value > .field-errors`).innerHTML = `<span class="error-hint">${message}</span>`;
            document.querySelector(`#${rowId} > .field-value > .field-errors`).style.display = '';
            ++errors;
            if (Jsw.getComponent('btn-send')) {
                Jsw.getComponent('btn-send').disable();
            }
            if (Jsw.getComponent('btn-apply')) {
                Jsw.getComponent('btn-apply').disable();
            }
        }
        const unsetError = function (rowId) {
            document.querySelector(`#${rowId}`).classList.remove('error');
            document.querySelector(`#${rowId} > .field-value > .field-errors`).style.display = 'none';
            if (0 < --errors) {
                return;
            }
            if (Jsw.getComponent('btn-send')) {
                Jsw.getComponent('btn-send').enable();
            }
            if (Jsw.getComponent('btn-apply')) {
                Jsw.getComponent('btn-apply').enable();
            }
        }

        const supportedWebServers = <?php echo json_encode($this->supportedWebServers) ?>;
        const formId = '<?php echo $this->escape($this->form->getId()) ?>';
        const updateControls = function () {
            const webServer = document.getElementById(formId + '-webServer').value;
            let isSelectedRuleSetInvalid = false;
            for (const ruleSet in supportedWebServers) {
                const ruleSetNode = document.getElementById(formId + '-ruleSet-' + ruleSet);
                ruleSetNode.disabled = !supportedWebServers[ruleSet].includes(webServer);
                if (ruleSetNode.disabled && ruleSetNode.checked) {
                    isSelectedRuleSetInvalid = true;
                }
            }
            const ruleSetRowId = formId + '-ruleSet-form-row';
            if (isSelectedRuleSetInvalid) {
                setError(ruleSetRowId, <?php echo $this->jsLmsg("{$this->localeSection}.ruleSetSelectedInvalid") ?>);
            } else {
                unsetError(ruleSetRowId);
            }

            <?php if ($this->isNginxSwitchedOff): ?>
                const webServerRowId = formId + '-webServer-form-row';
                if ('nginx' === webServer) {
                    setError(webServerRowId, '<?php echo Plesk_Base_Utils_String::safeForJs(lmsg('cu__web_app_firewall_nginx_switched_off')) ?>');
                } else {
                    unsetError(webServerRowId);
                }
            <?php endif?>
        };
        updateControls();

        document.getElementById(formId + '-webServer').addEventListener('change', updateControls);
        for (const ruleSet in supportedWebServers) {
            document.getElementById(formId + '-ruleSet-' + ruleSet).addEventListener('click', updateControls);
        }
    });
    //]]>
</script>
