<?php
if (isset($message)) {
    echo '<div class="alert alert-success" role="alert">' . $message . '</div>';
}
?>
<style>
    .progress {
        background-color: #ccc !important;
    }

    .percent {
        color: #000 !important;
    }
</style>
<div class="row">


    <div class="col-md-6">
        <?php echo $this->session->flashdata('msg'); ?>
        <div class="box box-primary">
            <div class="box-body">
                <!-- <form onSubmit="return uploadFile()">
                        <input type="text" value="<?php echo $token; ?>" id="access-token" placeholder="Access token" />
                        <input type="file" id="file-upload" />
                        <button type="submit">Submit</button>
                    </form> -->

                <!-- A place to show the status of the upload -->
                <!-- <h2 id="results"></h2> -->

                <form id="dbform">
                    <div class="form-group">
                        <label for="upload_file">Upload File</label>
                        <input type="file" id="_new_fu_file" name="upload[]" class="rm_bor form-control" />
                        <input type="hidden" value="<?php echo $folder_name; ?>" id="path" name="path" />
                        <input type="hidden" value="<?php echo $token; ?>" id="token" name="token" />
                        <br />
                        <button class="btn btn-primary pull-left" id="dboxupload" name="dboxupload" type="submit"><i class="fa fa-cloud-upload"></i> Upload</button>

                        <a class="btn btn-success pull-right" href="<?php echo base_url('admin/dropbox/filelist'); ?>">Go To Video List</a>
                        <br><br>
                        <div class="_del_msg"></div>

                    </div>
                    <div id="_v_lang" style="display: none;">
                    </div>
                </form>

            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="box box-primary">
            <div class="box-body">
                <div class="_new_fu_res">
                </div>
            </div>
        </div>
    </div>



</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/dropzone.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropbox.js/4.0.30/Dropbox-sdk.js"></script>

<script type="text/javascript">
    $(document).on('submit', '#dbform', function(e) {
        e.preventDefault();
        $(this).find(':input[type=submit]').prop('disabled', true);
        _new_fu_file = $('#_new_fu_file').get(0);
        file_input = _new_fu_file.files,
            _new_fu_attr = $('._new_fu_attr'),
            _new_fu_res = $('._new_fu_res'),
            __msg = '',
            ACCESS_TOKEN = $('#token').val(),
            UPLOAD_FOLDER = $('#path').val();
        // _v_lang = $('#_v_lang').html();

        if (typeof _new_fu_file !== 'undefined') {
            const UPLOAD_FILE_SIZE_LIMIT = 20 * 1024 * 1024;
            const MAX_UPLOAD_FILE_SIZE_LIMIT = 1024 * 1024 * 1024;

            var dbx;
            var task;

            for (var i = 0; i < file_input.length; i++) {
                var file = file_input[i];
                if (file.size < UPLOAD_FILE_SIZE_LIMIT) {
                    $('._del_msg').html("Too Small to upload Minimum file Size 20 MB!");
                    $(this).find(':input[type=submit]').prop('disabled', false);
                    return false;
                }
                if (file.size > MAX_UPLOAD_FILE_SIZE_LIMIT) {
                    $('._del_msg').html("Too Big to upload Max file Size 1024 MB!");
                    $(this).find(':input[type=submit]').prop('disabled', false);
                    return false;
                }
                var clsFileName = file.name.replace(/[^a-z0-9\s]/gi, '').replace(/[_\s]/g, '-');
                var upld_fl = $('<div class="upld_files upld_files_' + clsFileName + '">');
                _new_fu_res.append(upld_fl);
                var upld_files = $('.upld_files_' + clsFileName);
                var fileID = file.size;

                __msg = file.name + '<div id="' + file.size + '" class="progress active">' +
                    '<div id="' + file.size + '_bar" class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 0%">' +
                    '<span id="' + file.size + '_lbl" class="percent">0%</span>' +
                    '</div>' +
                    '</div>';

                upld_files.empty();
                upld_files.append(__msg);
                // extension = file.name.split('.').pop();

                dbx = new Dropbox.Dropbox({
                    accessToken: ACCESS_TOKEN,
                    fetch: fetch
                });


                const maxBlob = 10 * 1024 * 1024;
                var workItems = [];

                var offset = 0;
                while (offset < file.size) {
                    var chunkSize = Math.min(maxBlob, file.size - offset);
                    workItems.push(file.slice(offset, offset + chunkSize));
                    offset += chunkSize;
                }

                task = workItems.reduce((acc, blob, idx, items) => {

                    if (idx == 0) {
                        // Starting multipart upload of file
                        return acc.then(function() {
                            return dbx.filesUploadSessionStart({
                                    close: false,
                                    contents: blob
                                })
                                .then(response => response.session_id)
                        });


                    } else if (idx < items.length - 1) {

                        // Append part to the upload session
                        return acc.then(function(sessionId) {
                            var _msz = (file.size / 1024 / 1024);
                            var _csz = ((idx * maxBlob) / 1024 / 1024);
                            var _per = Math.round(((_csz * 100) / _msz));
                            var _pbar = $('#' + file.size).find('.progress-bar');
                            var _plbl = $('#' + file.size).find('.percent');
                            _plbl.html(_per + '%');
                            _pbar.width(_per + '%');
                            var cursor = {
                                session_id: sessionId,
                                offset: idx * maxBlob
                            };
                            return dbx.filesUploadSessionAppendV2({
                                cursor: cursor,
                                close: false,
                                contents: blob
                            }).then(() => sessionId);
                        });
                    } else {
                        // Last chunk of data, close session
                        return acc.then(function(sessionId) {
                            var cursor = {
                                session_id: sessionId,
                                offset: file.size - blob.size
                            };
                            var commit = {
                                path: '/' + UPLOAD_FOLDER + '/' + file.name,
                                mode: 'add',
                                autorename: true,
                                mute: false
                            };
                            return dbx.filesUploadSessionFinish({
                                cursor: cursor,
                                commit: commit,
                                contents: blob
                            });
                        });
                    }
                }, Promise.resolve());

                task.then(function(response) {
                    if (response.size == file.size) {
                        var _pbar = $('#' + file.size).find('.progress-bar');
                        var _plbl = $('#' + file.size).find('.percent');
                        var _mb = (response.size / 1024 / 1024);
                        _plbl.html('100% Completed (' + Math.round(_mb) + 'MB)');
                        _pbar.width('100%');
                        $(this).find(':input[type=submit]').prop('disabled', false);
                    }
                }).catch(function(error) {
                    console.error(error);
                    $(this).find(':input[type=submit]').prop('disabled', false);
                });



                // _new_fu_res.append(upld_files);
            }
        } else {
            return false;
        }
    });
</script>