<?php
// Copyright 1999-2024. WebPros International GmbH. All rights reserved.
?>
<?php
$form = $this->form ?: $this->element->getForm();
?>
<div class="form-row" id="<?php echo $this->select->getId(); ?>-form-row">
    <div class="field-name">
        <?php echo $this->elementPart($this->select)->label(); ?>
    </div>
    <div class="field-value">
        <?php echo $this->elementPart($this->select)->content(); ?>
        <span id="<?php echo $this->select->getId() . '-unit-day-label'; ?>">
            <?php echo $form->lmsg('on'); ?>
        </span>
        <span id="<?php echo $this->select->getId() . '-unit-' . $this->element->getElement('dayOfMonth')->getId(); ?>">
            <?php echo $this->elementPart($this->element->getElement('dayOfMonth'))->content(); ?>
        </span>
        <?php if ($this->element->getElement('month')): ?>
        <span id="<?php echo $this->select->getId() . '-unit-' . $this->element->getElement('month')->getId(); ?>">
            <?php echo $this->elementPart($this->element->getElement('month'))->content(); ?>
        </span>
        <?php endif; ?>
        <span id="<?php echo $this->select->getId() . '-unit-' . $this->element->getElement('dayOfMonth')->getId() . '-label'; ?>">
            <?php echo $form->lmsg('dayOfMonth'); ?>
        </span>
        <span id="<?php echo $this->select->getId() . '-unit-' . $this->element->getElement('dayOfWeek')->getId(); ?>">
            <?php echo $this->elementPart($this->element->getElement('dayOfWeek'))->content(); ?>
        </span>
        <span id="<?php echo $this->select->getId() . '-unit-time-label'; ?>">
            <?php echo $form->lmsg('at'); ?>
        </span>
        <span id="<?php echo $this->select->getId() . '-unit-' . $this->element->getElement('hour')->getId(); ?>">
            <?php echo $this->elementPart($this->element->getElement('hour'))->content(); ?> :
        </span>
        <span id="<?php echo $this->select->getId() . '-unit-' . $this->element->getElement('minute')->getId(); ?>">
            <?php echo $this->elementPart($this->element->getElement('minute'))->content(); ?>
        </span>
        <span id="<?php echo $this->select->getId() . '-unit-' . $this->element->getElement('minute')->getId() . '-label'; ?>">
            <?php echo $form->lmsg('minute'); ?>
        </span>
        <?php if ($this->element->getElement('cronStyle')): ?>
        <span id="<?php echo $this->select->getId() . '-unit-' . $this->element->getElement('cronStyle')->getId(); ?>">
            <?php echo $this->elementPart($this->element->getElement('cronStyle'))->content(); ?>
        </span>
        <?php endif; ?>
        <span class="field-errors" style="display: none;"></span>
        <?php if ($this->timezoneHint): ?>
        <div id="<?php echo $this->select->getId() ?>-timezone-hint" class="hint"><?php echo $this->timezoneHint; ?></div>
        <?php endif; ?>
        <?php if ($this->cronStyleHint): ?>
        <div id="<?php echo $this->select->getId() ?>-cron-style-hint" class="hint"><?php echo $this->cronStyleHint; ?></div>
        <?php endif; ?>
    </div>
</div>
<script type="text/javascript">
//<![CDATA[
(function () {
    var period = document.getElementById('<?php echo $this->select->getId(); ?>');

    var periodControlState = function () {
        document.querySelectorAll('span[id^=<?php echo $this->select->getId(); ?>-unit]').forEach(function (el) {
            el.style.display = 'none';
        });
        var row = document.getElementById('<?php echo $this->select->getId(); ?>-form-row');
        row.classList.remove('error');
        row.querySelector('.field-errors').style.display = 'none';
        var periodValue = parseInt(period.value);

<?php if ($this->element->getElement('cronStyle')): ?>
        if (periodValue === 0) {
            document.getElementById('<?php echo $this->select->getId() . '-unit-' . $this->element->getElement('cronStyle')->getId(); ?>').style.display = '';
        }
<?php endif; ?>
        if (periodValue === 3600) {
            document.getElementById('<?php echo $this->select->getId() . '-unit-' . $this->element->getElement('minute')->getId() . '-label'; ?>').style.display = '';
        }
        if (periodValue >= 3600) {
            document.getElementById('<?php echo $this->select->getId() . '-unit-time-label'; ?>').style.display = '';
            document.getElementById('<?php echo $this->select->getId() . '-unit-' . $this->element->getElement('minute')->getId(); ?>').style.display = '';
        }
        if (periodValue >= 86400) {
            document.getElementById('<?php echo $this->select->getId() . '-unit-' . $this->element->getElement('hour')->getId(); ?>').style.display = '';
        }
        if (periodValue === 604800) {
            document.getElementById('<?php echo $this->select->getId() . '-unit-' . $this->element->getElement('dayOfWeek')->getId(); ?>').style.display = '';
        }
        if (periodValue >= 604800) {
            document.getElementById('<?php echo $this->select->getId() . '-unit-day-label'; ?>').style.display = '';
        }
        if (periodValue === 2592000) {
            document.getElementById('<?php echo $this->select->getId() . '-unit-' . $this->element->getElement('dayOfMonth')->getId() . '-label'; ?>').style.display = '';
        }
        if (periodValue >= 2592000) {
            document.getElementById('<?php echo $this->select->getId() . '-unit-' . $this->element->getElement('dayOfMonth')->getId(); ?>').style.display = '';
        }
<?php if ($this->element->getElement('month')): ?>
        if (periodValue === 31536000) {
            document.getElementById('<?php echo $this->select->getId() . '-unit-' . $this->element->getElement('month')->getId(); ?>').style.display = '';
        }
<?php endif; ?>

<?php if ($this->timezoneHint): ?>
        document.getElementById('<?php echo $this->select->getId() ?>-timezone-hint').style.display = periodValue > 0 ? '' : 'none';
<?php endif; ?>
<?php if ($this->cronStyleHint): ?>
        document.getElementById('<?php echo $this->select->getId() ?>-cron-style-hint').style.display = periodValue === 0 ? '' : 'none';
<?php endif; ?>
    };

    period.addEventListener('change', periodControlState);
    periodControlState();
})();
//]]>
</script>
