<?php
// Copyright 1999-2023. Plesk International GmbH. All rights reserved.
?>
<div id="<?php echo $this->element->getId(); ?>-form-row" class="form-row">
    <div class='field-name'>
        <?php echo $this->element->getLabel() ?>
        <?= $this->requiredMark($this->element->isRequired()) ?>
    </div>
    <div class='field-value'>
        <div class="text-value">
            <?php foreach ($this->element->getMultiOptions() as $provider => $areas): ?>
                <?php echo $this->formMultiCheckbox($this->element->getName(), $this->element->getValue(), null, [$provider => $provider]) ?>
                <?php if (is_array($areas) && !empty($areas)): ?>
                    <?php
                        $options = [];
                        foreach ($areas as $area) {
                            $options[$provider . '-' . $area] = $area;
                        }
                    ?>
                    <div class="checkbox-group">
                        <?php
                        echo $this->formMultiCheckbox(
                            $this->element->getName(),
                            $this->element->getValue(),
                            ['data-parent' => $provider],
                            $options,
                            ''
                        ) ?>
                    </div>
                <?php endif; ?>
            <?php endforeach; ?>
        </div>

        <span class="field-errors"></span>

        <?php if ($this->element->getDescription()): ?>
            <span class="hint"><?php echo $this->element->getDescription(); ?></span>
        <?php endif; ?>
    </div>
</div>
<script type="text/javascript">
//<![CDATA[
    Jsw.onReady(function() {
        document.getElementById('provider-form-row').querySelectorAll('input[type="checkbox"]').forEach(function (checkbox) {
            checkbox.addEventListener('click', function () {
                document.querySelectorAll(`[data-parent="${checkbox.value}"]`).forEach(i => {
                    i.checked = checkbox.checked;
                });
            });
        });
    });
//]]>
</script>
