@extends('brackets/admin-ui::admin.layout.default')

@section('title', trans('admin.quotation.general'))

@section('body')
<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.2/dropzone.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.2/min/dropzone.min.js"></script>
    <script>
		
		Dropzone.options.dropzone =
         {
			maxFilesize: 1,
			acceptedFiles: ".xlsx",
			//addRemoveLinks: true,
			//timeout: 5000,
			success: function(file, response) 
			{
				var not_exist_good=response["success"];
				var message="找不到以下貨品:\n";
				$.each( not_exist_good, function( key, value ) {
					message+=value+"\n";
				  //alert( key + ": " + value );
				});
				if(not_exist_good.length > 0)
					alert(message);
				console.log(response);
			},
			error: function(file, response)
			{
				//alert(response);
			   return false;
			}
		};
       // var dropzone = new Dropzone('#file-upload', {
			/*
            previewTemplate: document.querySelector('#preview-template').innerHTML,
            parallelUploads: 3,
            thumbnailHeight: 150,
            thumbnailWidth: 150,
            maxFilesize: 5,
            filesizeBase: 1500,
            thumbnail: function (file, dataUrl) {
                if (file.previewElement) {
                    file.previewElement.classList.remove("dz-file-preview");
                    var images = file.previewElement.querySelectorAll("[data-dz-thumbnail]");
                    for (var i = 0; i < images.length; i++) {
                        var thumbnailElement = images[i];
                        thumbnailElement.alt = file.name;
                        thumbnailElement.src = dataUrl;
                    }
                    setTimeout(function () {
                        file.previewElement.classList.add("dz-image-preview");
                    }, 1);
                }
            }*/
        //});
        
        var minSteps = 6,
            maxSteps = 60,
            timeBetweenSteps = 100,
            bytesPerStep = 100000;
        dropzone.uploadFiles = function (files) {
			/*
            var self = this;
            for (var i = 0; i < files.length; i++) {
                var file = files[i];
                totalSteps = Math.round(Math.min(maxSteps, Math.max(minSteps, file.size / bytesPerStep)));
                for (var step = 0; step < totalSteps; step++) {
                    var duration = timeBetweenSteps * (step + 1);
                    setTimeout(function (file, totalSteps, step) {
                        return function () {
                            file.upload = {
                                progress: 100 * (step + 1) / totalSteps,
                                total: file.size,
                                bytesSent: (step + 1) * file.size / totalSteps
                            };
                            self.emit('uploadprogress', file, file.upload.progress, file.upload
                                .bytesSent);
                            if (file.upload.progress == 100) {
                                file.status = Dropzone.SUCCESS;
                                self.emit("success", file, 'success', null);
                                self.emit("complete", file);
                                self.processQueue();
                            }
                        };
                    }(file, totalSteps, step), duration);
                }
            }*/
        }
    </script>
    <style>
        .dropzone {
            background: #e3e6ff;
            border-radius: 13px;
            max-width: 550px;
            margin-left: auto;
            margin-right: auto;
            border: 2px dotted #1833FF;
            margin-top: 50px;
        }
    </style>
        <div class="row">
            <div class="col">

                <div class="card">
        
		<!--
					<form class="form-horizontal" method="post" action="/admin/invoices/todayInvoicesUpdate" novalidate>
						@csrf
     -->
						<div class="card-header">
							<i class="fa fa-align-justify"></i> {{ trans('admin.quotation.general') }}
						</div>

						
							
						<div class="form-group row align-items-center" >
								
							<div :class="isFormLocalized ? 'col-md-4' : 'col-md-11 col-xl-10'" style="padding-left: 4%">
								<br/>
								<a class="btn btn-primary btn-sm m-b-0 ml-2" href="{{ url('admin/quotations/export') }}" role="button"><i class="fa fa-file-excel-o"></i>&nbsp; {{ trans('admin.good.actions.export') }}</a>
                     		
							</div>
						</div>
						
						<div id="">
							<form action="/admin/quotations/general/upload" class="dropzone" id="dropzone" enctype="multipart/form-data">
								@csrf
								<div class="dz-message">
									拉入或上傳報價單<br>
								</div>
							</form>
						</div>
						<!--
					</form>
					-->
					
					
                </div>
			</div>
        
        </div>

        </div>

    
@endsection