@extends('admin.layout')

@section('content')
    <!-- begin::main content -->

    <main class="main-content">

        <div class="container">

            <!-- begin::page header -->
            <div class="page-header">
                <h3>Upload Ebook</h3>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{ asset('dashboard') }}">Dashboard</a></li>

                        <li class="breadcrumb-item active" aria-current="page"><a href="{{ asset('admin/ebook-list') }}">Ebook
                                List</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Upload Ebook</li>
                    </ol>
                </nav>
            </div>
            <!-- end::page header -->
            <div class="card">
                <div class="card-body">
                    <form id='file-catcher' enctype="multipart/form-data">
                        <input style="width: 200px; margin-right:5px;" multiple type="file" id="file-input"
                            name="file-input" class="form-control fileinput-button input-sm pull-left" />

                        <button type='submit' class="btn btn-success" id="do_submit" name="do_submit">
                            <i class="fa fa-cloud-upload"></i>&nbsp;Start Uploading
                        </button>

                        <a href='{{ asset('admin/ebook-list') }}' class="btn btn-primary text-white pull-right">
                            <i class="fa fa-list"></i>&nbsp;Ebook List
                        </a>

                    </form>
                </div>
            </div>

            <span id="message-text" class="text-danger"></span>

            <div class="card">
                <div id="file-list-display" class="card-body">

                </div>
            </div>
        </div>

    </main>
    <!-- end::main content -->
@endsection
@push('footer-script')
    <!-- begin::dataTable -->
    <script>
        $(document).ready(function() {
            var folderNameinServer = "aia_ebooks";
            var fileCatcher = document.getElementById('file-catcher');
            var fileInput = document.getElementById('file-input');
            var fileListDisplay = document.getElementById('file-list-display');
            var fileDelete = document.getElementById('delete-file');
            var textMessage = document.getElementById('message-text');
            var fileList = [];
            var renderFileList, sendFile;

            fileCatcher.addEventListener('submit', function(evnt) {
                evnt.preventDefault();
                if (fileList.length == 0) {
                    textMessage.innerText = "";
                    textMessage.innerText = "please select file!";
                    return false;
                }
                fileList.forEach(function(file) {
                    sendFile(file);
                });
            });

            fileInput.addEventListener('change', function(evnt) {
                //fileList = [];
                textMessage.innerText = "";
                var type = $('#file_type').val();
                for (var i = 0; i < fileInput.files.length; i++) {
                    var myArray = {
                        'type': type,
                        'file': fileInput.files[i]
                    };
                    fileList.push(myArray);
                }
                renderFileList();
                fileCatcher.reset();
            });

            renderFileList = function() {
                fileListDisplay.innerHTML = '';
                var i = 1;

                fileList.forEach(function(_file, index) {
                    var file = _file['file'];
                    var fileType = _file['type'];

                    var str = folderNameinServer + "/" + file.name;
                    var dID = str.replace(/[^a-z0-9\s]/gi, '').replace(/[_\s]/g, '-');

                    var tDiv = document.createElement('div');
                    tDiv.classList.add("progress-group");
                    tDiv.id = dID;

                    var tSpanNo = document.createElement('span');
                    tSpanNo.classList.add("progress-text");
                    tSpanNo.innerText = i + ". ";

                    var tSpan = document.createElement('span');
                    tSpan.classList.add("progress-text");
                    tSpan.classList.add("text-info");
                    tSpan.innerText = file.name + " ";

                    var tSpan2 = document.createElement('span');
                    tSpan2.classList.add("progress-number");
                    tSpan2.classList.add("pull-right");
                    var tB = document.createElement('b');
                    tB.innerText = bytesToSize(file.size);
                    tSpan2.append(tB);

                    var tDiv2 = document.createElement('div');
                    tDiv2.classList.add("progress");
                    tDiv2.classList.add("small");
                    var tDiv3 = document.createElement('div');
                    tDiv3.classList.add("progress-bar");
                    tDiv3.classList.add("progress-bar-aqua");
                    tDiv3.style = "width: 0%";

                    tDiv2.append(tDiv3);
                    tDiv.append(tSpanNo);
                    tDiv.append(tSpan);
                    tDiv.append(tSpan2);
                    tDiv.append(tDiv2);

                    fileListDisplay.appendChild(tDiv);
                    i++;

                });

            };

            bytesToSize = function(bytes) {
                var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
                if (bytes == 0) return '0 Byte';
                var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
                return Math.round(bytes / Math.pow(1024, i), 2) + ' ' + sizes[i];
            }

            // upload file
            sendFile = function(file) {
                // console.log(file.file.name);
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });
                var url = "{{ asset('admin/ebook_aws_temp_url') }}";
                $.ajax({
                    url: url,
                    type: 'POST',
                    data: {
                        "file": file.file.name,
                        "type": "video"
                    },
                    success: function(json) {
                        var arr = JSON.parse(json);
                        if (arr.status == true) {
                            ajaxUploadFile(arr, file);
                            return false;
                        }
                        return false;
                    }
                });
            };

            ajaxUploadFile = function(arr, _file) {
                var file = _file['file'];
                var filetype = _file['type'];

                var formAttributes = arr['formAttributes'];
                var formInputs = arr['formInputs'];
                var post_url = formAttributes['action'];
                var formData = new FormData();

                var str = folderNameinServer + "/" + file.name;
                formInputs['key'] = str;
                Object.keys(formInputs).forEach(function(key) {
                    formData.append(key, formInputs[key]);
                });
                formData.append('x-amz-expires', '3600');
                formData.append('success_action_status', '201');

                if (file.type == "") {
                    formData.append('Content-Type', 'application/octet-stream');
                } else {
                    formData.append('Content-Type', file.type);
                }
                formData.append('file', file);

                var dID = str.replace(/[^a-z0-9\s]/gi, '').replace(/[_\s]/g, '-');
                var dtTag = $('#' + dID).find('.progress-bar');
                $.ajax({
                    url: post_url,
                    type: 'POST',
                    datatype: 'xml',
                    data: formData,
                    contentType: false,
                    processData: false,
                    xhr: function() {
                        var xhr = $.ajaxSettings.xhr();
                        if (xhr.upload) {
                            var progressbar = $('#' + dID).find('.progress-bar');
                            var progressnumber = $('#' + dID).find('.progress-number');
                            $('#do_submit').attr('disabled', 'disabled');
                            $('#file-input').attr('disabled', 'disabled');
                            xhr.upload.addEventListener('progress', function(event) {
                                var progressbar = $('#' + dID).find('.progress-bar');
                                var progressnumber = $('#' + dID).find('.progress-number');
                                var percent = 0;
                                var position = event.loaded || event.position;
                                var total = event.total;
                                if (event.lengthComputable) {
                                    percent = Math.ceil(position / total * 100);
                                    progressbar.css("width", +percent + "%");
                                    progressbar.text(percent + " %");
                                    progressnumber.html("<b>" + Math.round(position / (
                                        1024)) + " KB<b/> / " + Math.round(total / (
                                        1024)) + " KB");
                                }
                            }, true);
                        }
                        return xhr;
                    }
                }).done(function(response) {
                    var url = $(response).find("Location").text();
                    var the_file_name = $(response).find("Key").text();
                    $("#" + dID).append(
                        "<span>File has been uploaded, Here's your file <a href=https://" + url +
                        ">" + the_file_name + "</a></span>");
                });
            };
        });
    </script>
@endpush