@extends('layouts.layout-2')

@section('content')
    <style>
        /* Dropzone */
        .dropzone {
            min-height: 230px;
            border: 2px dashed rgba(0, 0, 0, 0.3);
            background: white;
            border-radius: 6px;
        }
        .dropzone .dz-message {
            font-size: 28px;

        }

    </style>
    <h4 class="font-weight-bold py-3 mb-4">
        SysAdmin Kontakte importieren
    </h4>

    <div class="card mb-4">
        <h5 class="card-header">
            Excel-Datei hochladen
        </h5>
        <div class="card-body">

            {!! Form::open([ 'url' => route('sysadmin_tool_store', ['import']), 'method' => 'post', 'files' => true, 'enctype' => 'multipart/form-data', 'class' => 'dropzone', 'id' => 'realDropzone' ]) !!}
            <div class="fallback">
                <input name="file" type="file" multiple>
            </div>
            {!! Form::close() !!}

            <br>
            <div class="alert alert-danger alert-dismissable" style="display:none;"></div>
        </div>
    </div>
@endsection

@section('scripts')
    <script type="text/javascript">

        var real_dropzone = {
            uploadMultiple: false,
            parallelUploads: 1,
            maxFilesize: 32,
            addRemoveLinks: true,
            dictDefaultMessage: 'Hier klicken, oder Datei hier reinziehen (Drag&Drop)',
            dictFallbackMessage: 'Dein Browser unterstützt Drag&Drop Dateiuploads nicht',
            dictFallbackText: 'Benutze das Formular um Deine Dateien hochzuladen',
            dictFileTooBig: "Die Datei ist zu groß. Die maximale Dateigröße beträgt 32 MB",
            dictInvalidFileType: 'Eine Datei dieses Typs kann nicht hochgeladen werden',
            dictResponseError: "Der Server hat ihre Anfrage mit Status error abgelehnt",
            dictCancelUpload: 'Hochladen abbrechen',
            dictCancelUploadConfirmation: null,
            dictRemoveFile: 'Datei entfernen',
            dictMaxFilesExceeded: 'Du kannst keine weiteren Dateien mehr hochladen',
            // The setting up of the dropzone
            init:function() {
                console.log("init");
                this.on("removedfile", function(file) {
                    var _ele = $('.alert-danger');
                    _ele.fadeOut();

                } );

                this.on("addedfile", function (file) {
                    var _ele = $('.alert-danger');
                    _ele.fadeOut();
                });

            },
            error: function(file, response) {
                console.log(file);
                console.log(response);
                var message
                if($.type(response) === "string")
                    message = response; //dropzone sends it's own error messages in string
                else
                    message = response.message;
                var _ele = $('.alert-danger');
                _ele.fadeIn();
                _ele.text(message);


            },
            success: function(file,response) {
                console.log(file);
                console.log(response.filename);
                console.log(response.filedata);
                console.log(response);

                if(response.redirect){
                    window.location.href = response.redirect;
                }else{
                    if(response.error === false){
                        //true
                        window.location.href = window.location.href;
                    }
                }
            }

        };

        Dropzone.options.realDropzone = real_dropzone;


    </script>
@endsection