<?php
cs()->registerScriptFile(Yii::app()->baseUrl . '/js/resumableJS/resumable.js', CClientScript::POS_HEAD);
?>
<div class="form-horizontal">
    
    <div class="control-group">
        <label class="control-label required" for="browseButton" data-translation-id="BACKUP_FILE_FIELD_LABLE"><?php echo __("BACKUP_FILE_FIELD_LABLE") ?><span class="required">*</span></label>
        <div class="controls">
            <button id="browseButton" data-translation-id="BACKUP_FILE_FIELD_BUTTON"><?php echo __("BACKUP_FILE_FIELD_BUTTON") ?></button>
            <span id="resumable-file" class="help-inline" ></span>
            <span class="help-inline error" id="BackupFile_data_em_"></span>
        </div>
    </div>
<?php
 $this->widget('bootstrap.widgets.TbProgress', array(
                'percent'=>0, // the progress
                'striped'=>true,
                'animated'=>true,
                'htmlOptions' => array(
                    'id'=>'Backup_upload_Modal_progressBar',
                    "class" => "fade out",
                    'style' => 'margin-bottom:0'
                )
            ));
if (app()->user->translateMode) {
    echo "<i data-translation-id='UPLOAD_ERROR_FILE_ALREADY_EXISTS'> UPLOAD_ERROR_FILE_ALREADY_EXISTS: " . __("UPLOAD_ERROR_FILE_ALREADY_EXISTS") . "</i>";
}
?>    

    
</div>

<script>
    
    
var r = new Resumable({
  target: '/index.php?r=systemBackupRestore/default/chunkedUpload',
  simultaneousUploads:1,
  testChunks:false,
  maxFiles:1,
  throttleProgressCallbacks: 0.6,
});

var isValidFile = false;
var hasError = false;
r.assignBrowse(document.getElementById('browseButton'));

r.on('fileAdded', function(file, event) {   
    $('#resumable-file').text(file.fileName);
    isValidFile = validateFileName(file.fileName);
});

r.on('uploadStart', function() {
    hasError = false;
    $("#backup-grid_Modal_saveBtn").button("loading");
    $("#Backup_upload_Modal_progressBar").removeClass("out").addClass("in");
});

r.on('complete', function()
{
    $.fn.yiiGridView.update("backup-grid");
    if (!hasError) { 
        setTimeout(function () {
            $("#Backup_upload_Modal_progressBar").removeClass("in").addClass("out");
            $("#backup-grid_Modal_saveBtn").button("reset");
            $("#backup-grid_Modal").modal("hide");
        }, 1000);
    } else {
        $("#Backup_upload_Modal_progressBar").removeClass("in").addClass("out");
        $("#backup-grid_Modal_saveBtn").button("reset");
    }
});

r.on('progress', function() {
    var progress = Math.round(r.progress()*100);
    $("#Backup_upload_Modal_progressBar .bar").width(progress + "%");
    $("#Backup_upload_Modal_progressBar > div").text(progress + "%");
});
  
r.on('error', function(errorResponse, message) {
    hasError = true
    var error = JSON.parse(errorResponse);
    $(".control-group").removeClass("success").addClass("error");
    $("#resumable-file").removeClass("success").addClass("error");

    $('#BackupFile_data_em_').show();
    $('#BackupFile_data_em_').text(error.message);
});
  
$('#backup-grid_Modal_saveBtn').click(function() {  
    if (isValidFile) {
        r.upload(); 
    }
});

function validateFileName(fileName) {
    var hash = {'.pdba': 1};
    var re = /\.(?:pdba)$/i;
    var ext = fileName.match(re);
    var errorText = "<?php  echo __('SYSTEM_BACKUP_RESTORE_ERROR_MESSAGE_NO_VALID_FORMAT'); ?>";

    if (!hash[ext]) {

        $(".control-group").removeClass("success").addClass("error");
        $("#resumable-file").removeClass("success").addClass("error");

        $('#BackupFile_data_em_').show();
        $('#BackupFile_data_em_').text(errorText);
        return false;
    } else {

        $(".control-group").removeClass("error").addClass("success");
        $("#resumable-file").removeClass("error").addClass("success");

        $('#BackupFile_data_em_').hide();
        $('#BackupFile_data_em_').text('');
        return true;
    }
}
</script>