@extends('admin.master')
@section('content')
    <main class="main-content position-relative max-height-vh-100 h-100 mt-1 border-radius-lg ">
        <!-- Navbar -->
        <nav class="navbar navbar-main navbar-expand-lg px-0 mx-4 shadow-none border-radius-xl" id="navbarBlur"
            navbar-scroll="true">
            <div class="container-fluid py-1 px-3">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb bg-transparent mb-0 pb-0 pt-1 px-0 me-sm-6 me-5">
                        <li class="breadcrumb-item text-sm"><a class="opacity-5 text-dark" href="javascript:;">Home</a>
                        </li>
                        <li class="breadcrumb-item text-sm text-dark active" aria-current="page">Upload files</li>
                    </ol>
                    <h6 class="font-weight-bolder mb-0">Upload files</h6>
                </nav>
                @include('admin.info')
            </div>
            </div>
        </nav>
        <!-- End Navbar -->
        <div class="container-fluid py-4">
            <div class="row">
                <div class="col-12">
                    <div class="card mb-4">
                        @if(Session::has('flag'))
                            <div class="alert alert-{{Session::get('flag')}}"><b>{{Session::get('messege')}}</b></div>
                        @endif

                        <div class="card-header pb-0">
                            <div class="col-lg-6 select">
                                <div class="form-group">
                                    <label class="form-control-label" for="basic-url">Chọn user</label>
                                    <select class="form-control" id="user_token" name="user_token">
                                        <option value="">-- Vui lòng chọn user --</option>
                                        @foreach ($users as $us)
                                            <option value="{{ $us->user_token }}">{{ $us->name }} - {{ $us->user_token }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="card-body">
                            <div id="actions" class="row">
                                <div class="col-lg-6">
                                  <div class="btn-group w-100">
                                    <span class="btn btn-success col fileinput-button">
                                      <i class="fas fa-plus"></i>
                                      <span>Thêm files</span>
                                    </span>
                                    <button type="submit" class="btn btn-primary col start">
                                      <i class="fas fa-upload"></i>
                                      <span>Tải lên</span>
                                    </button>
                                    <button type="reset" class="btn btn-warning col cancel">
                                      <i class="fas fa-times-circle"></i>
                                      <span>Huỷ tải lên</span>
                                    </button>
                                  </div>
                                </div>
                                <div class="col-lg-6 d-flex align-items-center">
                                  <div class="fileupload-process w-100">
                                    <div id="total-progress" class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
                                      <div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                              <div class="table table-striped files" id="previews">
                                <div id="template" class="row mt-2">
                                  <div class="col-auto">
                                      <span class="preview"><img src="data:," alt="" data-dz-thumbnail /></span>
                                  </div>
                                  <div class="col d-flex align-items-center">
                                      <p class="mb-0">
                                        <span class="lead" data-dz-name></span>
                                        (<span data-dz-size></span>)
                                      </p>
                                      <strong class="error text-danger" data-dz-errormessage></strong>
                                  </div>
                                  <div class="col-4 d-flex align-items-center">
                                      <div class="progress progress-striped active w-100" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
                                        <div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div>
                                      </div>
                                  </div>
                                  <div class="col-auto d-flex align-items-center">
                                    <div class="btn-group">
                                      <button class="btn btn-primary start">
                                        <i class="fas fa-upload"></i>
                                        <span>Tải</span>
                                      </button>
                                      <button data-dz-remove class="btn btn-warning cancel">
                                        <i class="fas fa-times-circle"></i>
                                        <span>Huỷ</span>
                                      </button>
                                      <button data-dz-remove class="btn btn-danger delete">
                                        <i class="fas fa-trash"></i>
                                        <span>Xoá</span>
                                      </button>
                                    </div>
                                  </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @include('admin.partials.footer')
    </main>
@endsection
@section('script')
<script type="text/javascript">
    // DropzoneJS Demo Code Start
    Dropzone.autoDiscover = false

    // Get the template HTML and remove it from the doumenthe template HTML and remove it from the doument
    var previewNode = document.querySelector("#template")
    previewNode.id = ""
    var previewTemplate = previewNode.parentNode.innerHTML
    previewNode.parentNode.removeChild(previewNode)

    var myDropzone = new Dropzone(document.body, { // Make the whole body a dropzone
    url: "{{ route('uploadFiles') }}", // Set the url
    method: "POST",
    headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
    maxFilesize: 100,
    parallelUploads: 15,
    thumbnailWidth: 80,
    thumbnailHeight: 80,
    timeout: 600000,
    previewTemplate: previewTemplate,
    autoQueue: false, // Make sure the files aren't queued until manually added
    previewsContainer: "#previews", // Define the container to display the previews
    clickable: ".fileinput-button" // Define the element that should be used as click trigger to select files.
    })

    myDropzone.on("addedfile", function(file) {
        if ($('#user_token').val() == '') {
            Swal.fire({
                icon: 'error',
                title: 'Mời bạn chọn user',
                showConfirmButton: false,
                timer: 2000
            })
        }
        // Hookup the start button
        file.previewElement.querySelector(".start").onclick = function(formData) {
            myDropzone.enqueueFile(file, formData)
        }
    })

    // Update the total progress bar
    myDropzone.on("totaluploadprogress", function(progress) {
        document.querySelector("#total-progress .progress-bar").style.width = progress + "%"
    })

    myDropzone.on("sending", function(file, xhr, formData) {
        formData.append("user_token", $('#user_token').val());
        // Show the total progress bar when upload starts
        document.querySelector("#total-progress").style.opacity = "1"
        // And disable the start button
        file.previewElement.querySelector(".start").setAttribute("disabled", "disabled")
    })

    // Hide the total progress bar when nothing's uploading anymore
    myDropzone.on("queuecomplete", function(progress) {
        document.querySelector("#total-progress").style.opacity = "0"
    })


    // Setup the buttons for all transfers
    // The "add files" button doesn't need to be setup because the config
    // `clickable` has already been specified.
    document.querySelector("#actions .start").onclick = function() {
        myDropzone.enqueueFiles(myDropzone.getFilesWithStatus(Dropzone.ADDED))
    }
    document.querySelector("#actions .cancel").onclick = function() {
        myDropzone.removeAllFiles(true)
    }
    // DropzoneJS Demo Code End

</script>
@endsection