<style>
    #progress {
        width: 250px;
        display: none;
    }
    .progress {
        margin-bottom: 5px;
    }
    #file-errors {
        display: none;
    }
</style>

<div>
    <a href="<?php echo $this->url('fileupload')?>">&laquo; Back to Examples Listing</a>
</div>

<h2><?php echo ($this->title) ?: 'File Upload Examples' ?></h2>

<?php
// Init Form
$form = $this->form;
$form->setAttribute('class', 'form-horizontal');
$form->setAttribute('action', $this->url('fileupload/progress/session'));
$form->prepare();
?>
<?php echo $this->form()->openTag($form); ?>
<fieldset>
    <legend><?php echo ($this->legend) ?: 'Progress Upload' ?></legend>

    <?php
    //
    // Progress id hidden field.
    // *NOTE* The hidden element MUST be before the file elements.
    //
    echo $this->formFileSessionProgress();
    ?>

    <?php
    //
    // File Input
    //
    $elem = $form->get('file');
    $elem->setLabelAttributes(array('class' => 'control-label'));
    ?>
    <div id="file-controls" class="control-group">
        <?php echo $this->formLabel($elem); ?>
        <div class="controls">
            <?php echo $this->formFile($elem); ?>

            <div id="file-errors" class="help-block"></div>

            <div id="progress" class="help-block">
                <div class="progress progress-info progress-striped active">
                    <div class="bar"></div>
                </div>
                <p></p>
            </div>

        </div>
    </div>

    <div id="action-buttons" class="control-group">
        <div class="controls">
            <button class="btn btn-primary">Submit</button>
        </div>
    </div>

    <div id="output"></div>

</fieldset>
<?php echo $this->form()->closeTag($form); ?>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="/js/jquery.form.js"></script>
<script>

    /**
     * Error Message functions
     */
    function hideErrors() {
        $('#file-controls').removeClass('error');
        $('#file-errors').hide();
    }

    function showErrors(message) {
        $('#file-controls').addClass('error');
        $('#file-errors').show().html(message);
    }

    function hideFormElements() {
        $('#file').hide();
        $('#action-buttons').hide();
    }

    function showFormElements() {
        $('#file').show();
        $('#action-buttons').show();
    }

    /**
     * Progress Bar functions
     */
    var progressInterval;

    function hideProgress() {
        $('#progress').hide();
    }

    function showProgress(amount, message) {
        $('#progress').show();
        $('#progress .bar').width(amount + '%');
        $('#progress > p').html(message);
        if (amount < 100) {
            $('#progress .progress')
                .addClass('active')
                .addClass('progress-info')
                .removeClass('progress-success');
        } else {
            $('#progress .progress')
                .removeClass('active')
                .removeClass('progress-info')
                .addClass('progress-success');
        }
    }

    function getProgress() {
        var url = '/file-upload-examples/progress/session-progress?id=' + $('#progress_key').val();
        $.getJSON(url, function(data) {
            //console.log(data);
            if (data.status && !data.status.done) {
                var value = Math.floor((data.status.current / data.status.total) * 100);
                showProgress(value, 'Uploading...');
            } else {
                showProgress(100, 'Complete!');
                clearInterval(progressInterval);
            }
        });
    }

    function startProgress() {
        showProgress(0, 'Starting upload...');
        progressInterval = setInterval(getProgress, 900);
    }

    /**
     * On Ready...
     */
    $(function() {
        $('#file-form').on('submit', function(e) {
            e.preventDefault();

            hideFormElements();
            hideErrors();
            hideProgress();

            if ($('#file').val() == '') {
                showErrors('No file(s) selected');
                return;
            }

            //$.fn.ajaxSubmit.debug = true;
            $(this).ajaxSubmit({
                target: '#output',
                success: function (response, statusText, xhr, $form) {
                    showFormElements();
                },
                error: function(a, b, c) {
                    console.log(a, b, c);
                    showFormElements();
                }
            });
            startProgress();
        });
    });
</script>
