<?php

if (isset($message)) {
    echo '<div class="alert alert-success" role="alert">' . $message . '</div>';
}

if (!empty($this->session->flashdata('message'))) {
    echo $this->session->flashdata('message');
}

?>
<div id="lec_msg"></div>
<div class="row">

    <?php if ($p_type == 'list') : ?>
        <div class="col-md-12">
            <div class="box box-primary">
                <div class="box-header">
                    <!-- Sync BTN -->
                    <button class="btn btn-warning pull-left margin-r-5" type="button" id="syncvodserver">Sync VOD Server
                    </button>
                    <!-- Upload Video -->
                    <a href="<?php echo base_url(); ?>admin/vodserver/list" class="btn btn-success pull-left" type="button">List VOD
                    </a>
                </div>
                <div class="box-body">
                    <div class="row" style="border: 1px solid #ccc; margin: 0px 0px 0; padding: 8px 0px 2px 0px;">
                        <div class="card">

                            <div class="card-body">
                                <div class="col-md-8">
                                    <div class="form-group">
                                        <label for="files">Choose video files:</label>
                                        <input multiple name="files[]" type="file" class="form-control" id="files">
                                    </div>

                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <button style="margin-top:25px;" id="uploadBtn" class="btn btn-success" type="submit">Submit</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- list -->
                        <div class="col-md-12">
                            <hr>
                            <div class="form-group">
                                <label for="files">Video List</label>
                            </div>
                            <!-- Start DBOX-->
                            <div id="upload-list"></div>
                            <!-- End DBOX-->
                        </div>
                    </div>
                    <br />



                </div>
            </div>
        </div>
    <?php endif; ?>

</div>


<script src="https://cdn.jsdelivr.net/npm/tus-js-client@latest/dist/tus.js"></script>
<script>
    let upload = null;
    let uploadIsRunning = false;
    const endpoint = "https://video.bunnycdn.com/tusupload/";
    const uploadList = document.querySelector("#upload-list");
    let fileList;
    $('#uploadBtn').click(function() {
        fileList = $('#files').prop('files');

        for (let i = 0; i < fileList.length; i++) {
            var name = fileList[i].name;
            var id = name.replace(/[^A-Z0-9]/ig, "");
            add_img_to_list(fileList[i], (i + 1), id);
        }

        let current = 0;
        let max = fileList.length;
        let __file = fileList[0];
        startUploadAjax(__file, current, max);
    });

    function startUploadAjax(__file, current, max) {
        $.ajax({
            url: "<?php echo base_url('admin/vodserver/get_video_id_bunny'); ?>",
            type: 'POST',
            data: {
                "file": __file.name
            },
            success: function(header) {
                let _name = __file.name;
                let _id = _name.replace(/[^A-Z0-9]/ig, "");
                startUpload(__file, $.parseJSON(header), _id, current, max);
            },
        });
    }

    function startUpload(file, header, id, current, max) {
        chunkSize = Infinity;
        parallelUploads = 30;
        const options = {
            endpoint,
            chunkSize,
            retryDelays: [0, 1000, 3000, 5000],
            headers: {
                AuthorizationSignature: header.AuthorizationSignature,
                AuthorizationExpire: header.AuthorizationExpire,
                VideoId: header.VideoId,
                LibraryId: header.LibraryId
            },
            metadata: {
                filename: file.name,
                filetype: file.type
            },
            onError(error) {
                if (current < max) {
                    current++;
                    startUploadAjax(fileList[current], current, max);
                }
            },
            onProgress(bytesUploaded, bytesTotal) {
                const percentage = ((bytesUploaded / bytesTotal) * 100).toFixed(2);
                $('#' + id).width(`${percentage}%`);
                $('#' + id).html("<b>" + `${percentage}%` + "</b>");
            },
            onSuccess() {
                if (current < max) {
                    current++;
                    startUploadAjax(fileList[current], current, max);
                } else {
                    alert("All File upload done, Please refresh page before new upload.");
                }
            },
        };

        upload = new tus.Upload(file, options);
        upload.findPreviousUploads().then((previousUploads) => {
            upload.start();
            uploadIsRunning = true;
        });
    }

    function add_img_to_list(file, sno, id) {
        $html = '<div class="form-group">';
        $html += '<label for="' + id + '">' + sno + '. ' + file.name + '</label><div class="progress">';
        $html += '<div id="' + id + '" class="progress-bar text-white" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>';
        $html += '</div></div><hr>';
        $('#upload-list').append($html);
    }
</script>

<script type="text/javascript">
    $(document).ready(function() {

        $(document).on('click', '#syncvodserver', function() {

            // Sync VOD Server &nbsp; <i class="fa fa-spinner"></i>
            $.ajax({
                type: "POST",
                url: "<?php echo base_url(); ?>" + "admin/vodserver/sync_vod_server",
                data: {},
                beforeSend: function() {
                    $('#syncvodserver').empty();
                    $('#syncvodserver').html('<i class="fa fa-refresh fa-spin fa-1x fa-fw"></i> Please Wait..');
                },
                complete: function(data) {
                    $('#syncvodserver').empty();
                    $('#syncvodserver').html('Sync Done');
                    // if (data) {
                    //     upload_lecture_list.draw();
                    // }
                }
            });
            $(this).html('Please Wait <i class="fa fa-spinner fa-spin"></i>');
        });
    });
</script>