<?php
// Copyright 1999-2021. Plesk International GmbH. All rights reserved.
?>
<?php
$selectElement = $this->element->getElement($this->select);
$customElement = $this->element->getElement($this->custom);
?>
<div id='<?php echo $selectElement->getId(); ?>-form-row' class='form-row'>
    <div class='field-name'>
        <?php echo $selectElement->getLabel(); ?>
        <?= $this->requiredMark($selectElement->isRequired()) ?>
    </div>
    <div class='field-value'>
        <span>
            <?php
            echo $this->elementPart($selectElement)->content() . '&nbsp;' .
                $this->elementPart($customElement)->content();
            ?>
        </span>
        <span class="field-errors" style="display: none;"></span>
        <?php if ($selectElement->getDescription()): ?>
            <span class="hint"><?php echo $selectElement->getDescription(); ?></span>
        <?php endif; ?>
        <?php if ($customElement->getDescription()): ?>
            <span id='<?php echo $customElement->getId(); ?>-hint' class="hint" style="display: none;"><?php echo $customElement->getDescription(); ?></span>
        <?php endif; ?>
    </div>
</div>
<script type="text/javascript">
//<![CDATA[
Jsw.onReady(function () {
    var updateState = function () {
        var customId = '<?php echo $customElement->getId(); ?>';

        if ($F('<?php echo $selectElement->getId(); ?>') === 'custom') {
            document.getElementById(customId).disabled = false;
        } else {
            document.getElementById(customId).disabled = true;
        }

        if ($F('<?php echo $selectElement->getId(); ?>') === document.getElementById('<?php echo $selectElement->getId(); ?>').querySelector('[selected]').value) {
            document.getElementById(customId + '-hint').style.display = 'none';
        } else {
            document.getElementById(customId + '-hint').style.display = '';
        }
    }

    updateState();
    document.getElementById('<?php echo $selectElement->getId(); ?>').addEventListener('change', updateState);
});
//]]>
</script>
