@extends('master')

@section('title')
New Gallery
@stop

@section('styles')
    <link rel="stylesheet" href="{{ asset('css/nav.css') }}">
@stop

@section('content')
<div class="row fullWidth">
        <div class="autoplay">
            <div><img class="" src="{{ asset('img/home/osizweni-header-blue.jpg') }}"></div>
        </div>
        @include('partials.dashboard-nav')
    </div>

    <div class="row">
        <div class="large-12 columns">
            <h1>New Gallery</h1>
        </div>
    </div>

    <div class="row">
        <div class="large-12 columns">
            <form action="{{ route('admin.gallery.image.store', $gallery->id) }}" enctype="multipart/form-data"
                class="dropzone"
                id="my-awesome-dropzone">
                @csrf
                <input type="hidden" name="file">
            </form>
            <button class="button tiny hidden radius" id="uploadFiles">Upload Files Now</button>
        </div>
    </div>
    @include('partials.footer')
@stop

@section('scripts')
    <script src="{{ asset('js/dropzone.min.js') }}"></script>
    <script>
        (function(){
            Dropzone.options.myAwesomeDropzone = {
                paramName: "file", // The name that will be used to transfer the file
                autoProcessQueue: false,
                parallelUploads: 30,
                maxFiles: 30,
                addRemoveLinks: true,
                acceptedFiles: 'image/*',
                maxAllowedContentLength: 100,
                timeout: 30000000,

                init: function() {
                    var submitButton = document.querySelector("#uploadFiles");
                    myDropzone = this; // closure

                    submitButton.addEventListener("click", function() {
                        myDropzone.processQueue(); // Tell Dropzone to process all queued files.
                    });

                    // You might want to show the submit button only when
                    // files are dropped here:
                    this.on("addedfile", function() {
                        $('#uploadFiles').show();
                    });
                    /*
                    this.on("complete", function (file) {
                        if (this.getUploadingFiles().length === 0 && this.getQueuedFiles().length === 0) {
                            window.location = '/gallery-dashboard';
                        }
                    });*/

                }
            };
        })();

    </script>
@stop