<?php
// Copyright 1999-2021. Plesk International GmbH. All rights reserved.
?>

<div class="form-box">
    <div class="title">
        <div class="title-area"><h3><span><?php echo $this->lmsg('detailsSection'); ?></span></h3></div>
    </div>

    <?php foreach ($this->taskProperties as $name => $value): ?>
        <div class="form-row">
            <div class="field-name">
                <?php echo $this->lmsg('property' . ucfirst($name)); ?>
            </div>
            <div class="field-value">
                <div class="text-value" id="<?php echo $name ?>"><?php echo $this->escape($value); ?></div>
            </div>
        </div>
    <?php endforeach; ?>

    <?php if ('working' == $this->taskStatus): ?>
        <div class="form-row">
            <div class="field-name">
                <?php echo $this->lmsg('propertyProgress'); ?>
            </div>
            <div class="field-value">
                <div class="text-value">
                    <div class="progress-box">
                        <div class="progress progress-sm">
                            <div class="progress-bar" id="taskProgress" style="width: <?php echo $this->progress; ?>%"></div>
                        </div>
                        <div class="progress-label" id="taskProgressText"><?php echo $this->progress; ?>%</div>
                    </div>
                </div>
            </div>
        </div>
    <?php endif; ?>
</div>

<div id="errorLogSection" class="form-box" <?php if ('finished' != $this->taskStatus) echo 'style="display:none"'?>>
    <div class="title">
        <div class="title-area"><h3><span><?php echo $this->lmsg('errorLogSection'); ?></span></h3></div>
    </div>
    <div id="errorLog"><?php if ('finished' == $this->taskStatus) echo $this->errorLog; ?></div>
</div>

<div class="btns-box">
    <div class="box-area">
        <div class="form-row">
            <div class="field-name"></div>
            <div class="field-value">
                <button id="btn-ok" class="btn action"></button>
                <button id="btn-stop" class="btn"></button>
                <input type="hidden" name="hidden" value="" id="hidden">
                <!-- ability to submit form via Enter -->
                <input type="image" src="<?= $this->skinUrl('/images/blank.gif') ?>" style="border: 0; height: 0; width: 0; position: absolute;">
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    //<![CDATA[
    Jsw.onReady(function() {
        new Jsw.CommandButton({
            applyTo: 'btn-ok',
            title: <?php echo $this->jsLmsg('ok'); ?>,
            cls: 'btn',
            name: 'ok',
            value: '',
            description: '',
            disabled: false,
            handler: function(event) { Jsw.redirect('<?php echo $this->urls['list'] ?>'); }
        });

        new Jsw.CommandButton({
            applyTo: 'btn-stop',
            title: <?php echo $this->jsLmsg('stop'); ?>,
            cls: 'btn',
            name: 'stop',
            value: '',
            description: '',
            disabled: <?php echo 'working' == $this->taskStatus ? 'false': 'true' ?>,
            handler: function(event) { Jsw.redirectPost('<?php echo $this->urls['stopTask'] ?>'); }
        });

        function taskDetailsAjaxUpdate() {
            Jsw.api.get(<?= $this->jsEscape($this->ajaxUpdateUrl) ?>)
                .then(function (response) {
                    var taskStatus = response.taskStatus;
                    if (taskStatus === 'working') {
                        document.getElementById('taskProgress').style.width = response.progress + '%';
                        document.getElementById('taskProgressText').innerHTML = response.progress + '%';
                        document.getElementById('currentOperation').innerHTML = response.currentOperation;
                        setTimeout(function () {
                            taskDetailsAjaxUpdate();
                        }, 1000);
                    } else {
                        Jsw.getComponent('btn-stop').disable();
                        if (document.getElementById('taskProgress')) {
                            document.getElementById('taskProgress').style.width = '100%';
                            document.getElementById('taskProgressText').innerHTML = '100%';
                            document.getElementById('currentOperation').innerHTML = '';
                        }
                        if (response.errorLog) {
                            document.getElementById('errorLogSection').style.display = '';
                            document.getElementById('errorLog').innerHTML = response.errorLog;
                        }
                    }
                });
        }

        taskDetailsAjaxUpdate();
    });
    //]]>
</script>
