@extends('layout.default')

@section('page_toolbar')
&nbsp;<a class="btn btn-success px-2 font-weight-bold btn-sm"  href="{{ URL::previous() }}">
<i class="fas fa-angle-double-left" aria-hidden="true"></i> Back
</a>
@endsection

@section('content')
<!--begin::Content-->
<div class="row">
    <div class="col-xl-12">
        <!--begin::Nav Panel Widget 2-->
        <div class="card card-custom gutter-b">
            <!--begin::Body-->
            <div class="card-body ">
                <div class="row mt-4">
                    <div class="d-flex align-items-center">
                       <!--  <form id="videoup"> -->
                        <div class="row">
                        <div class="col-md-12 ">
                            <div class="form-group">
                                <label>File Browser</label>
                                <div></div>
                                <div class="custom-file">
                                    <input type="file" name="import_file" id="picker" accept=".mp4" class="custom-file-input">
                                    <label class="custom-file-label" for="customFile">Choose file</label>
                                </div>
                                <span class="form-text text-muted">Allowed file types:  mp4.</span>
                                  <span class="help-block"> <p class="filetype_error text-danger"></p>
                                </span>
                            </div>
                        </div>
                        <div class="col-md-12 ">
                             <button type="submit" id="button" class="btn btn-success font-weight-bold">Start Upload</button>
                            
                        </div>
                     </div>
                <!--  </form> -->
                </div>
            </div>
        </div>
    </div>
</div>


@endsection

@push('page-css')

<link rel=stylesheet href="{{ url('plugins/fancybox/fancybox.plugin.css') }}" rel="stylesheet" type="text/css"/>
@endpush

@push('page-scripts')
<script src="https://unpkg.com/@mux/upchunk@2"></script>
<script>
const button = document.getElementById('button');

button.onclick = () => {
// Make a request to your backend API, which in turn calls Mux to create a direct-upload
// Return the URL from the Mux API response to your front end, see: https://docs.mux.com/api-reference/video#operation/create-direct-upload for response details
if(picker.files.length>0){
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
       // Typical action to be performed when the document is ready:
       const upload = UpChunk.createUpload({
        endpoint: xhttp.responseText,
        file: picker.files[0],
        chunkSize: 5120, // Uploads the file in ~5mb chunks
        });

        // subscribe to events
        upload.on('error', err => {
             console.error('💥 🙀', err.detail);
             
             Swal.fire({
                icon: 'error',
                title: 'Oops...',
                text: err.detail,
               
              });

        });

        upload.on('progress', progress => {
             console.log(`So far we've uploaded ${progress.detail}% of this file.`);
            // bar.width(progress.detail)
            //  percent.html(progress.detail);
             Swal.fire({
                  position: 'center',
                  icon: 'success',
                  title: "progressing : uploaded "+ progress.detail + "% of this file",
                  showConfirmButton: false,
                  // timer: 3000
                })
        });

        upload.on('success', () => {
            console.log("Wrap it up, we're done here. 👋");
             var percentVal = '100%';
              // bar.width(percentVal)
              // percent.html(percentVal);
              swal.close();
               showAlert("Video uploaded successfully","success"); 
               
               
             // Swal.fire({
             //      position: 'center',
             //      icon: 'success',
             //      title: "Video uploaded successfully",
             //      showConfirmButton: false,
             //      timer: 3000
             //    })

        });
      }
    };
    // make the request to your API which returns upload URL
    xhttp.open("GET", "{{ url('admin/videos/getUrl') }}", true);
    xhttp.send();
  }else
      showAlert("Please select any video file","error"); 
};
</script>

 @endpush