@extends('admin.template-admin')
@section('title','Home')
@section('head')
<link rel="stylesheet" type="text/css" href="{{asset('vendors/dropzone/dropzone.css')}}">
@endsection
@section('content')
<div class="container-fluid flex-grow-1 container-p-y">
    <div class="row">
      <div class="col-sm-12">
        <form action="{{route('admin.import.store')}}" enctype="multipart/form-data" method="post">@csrf
          <input type="file" name="file" id="">
          <input type="hidden" name="back" value="true">
          <button class="btn btn-primary" type="submit">Upload</button>
        </form>
      </div>
        <div class="col-12">
            <div class="card">
            <h5 class="card-header">Multiple</h5>
            <div class="card-body">
                <form id="zone-upload" style="margin-top: 20px" action="{{route('admin.import.store')}}" class='dropzone'> </form> 
            </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('script')
<script src="{{asset('vendors/dropzone/dropzone-min.js')}}" type="text/javascript"></script>
<script>

var CSRF_TOKEN = document.querySelector('meta[name="csrf-token"]').getAttribute("content");

Dropzone.autoDiscover = false;
var myDropzone = new Dropzone(".dropzone",{ 
    maxFilesize: 30,  // 3 mb
    acceptedFiles: ".csv",
    renameFile: function (file) {
        const newName = file.name;
        return newName;
    },
    addRemoveLinks: true,
    removedfile: function(file) {
      var name = file.upload.filename;
      // console.log(name)
      $.ajaxSetup({
          headers: {
              'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          }
      });
      $.ajax({
        type: 'DELETE',
        url: route_Des,
        data: {name: name},
        sucess: function(data){
        }
      }).then(function(){
        document.getElementById(name).remove();
      });
      var _ref;
        return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0;
    }
});
myDropzone.on("sending", function(file, xhr, formData) {
  formData.append("_token", CSRF_TOKEN);
});
myDropzone.on("success", function(response) {
  $( ".input-lampiran" ).append( '<input type="hidden" id="'+response.upload.filename+'" name="lampiran[]" value="'+response.upload.filename+'">' );
});
</script>
@endsection