@extends('admin::layouts.master')

@section('title')
@lang('translation.Universities') / Image / Add
@endsection

@section('css')
<!-- Plugins css -->
<link href="{{ URL::asset('themes/backend/custom/build/libs/dropzone/dropzone.css') }}" rel="stylesheet" type="text/css" />
@endsection

@section('content')
@component('admin::components.breadcrumb')
@slot('li_1')
<a href="{{ route('admin.university.index') }}">Universities</a>
@endslot
@slot('li_2')
<a href="{{ route('admin.university.image.index', $id) }}">Images</a>
@endslot
@slot('title')
Add Image
@endslot
@endcomponent

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">

                <h4 class="card-title">Upload multiple images</h4>

                <label>Drag and Drop Multiple Images (JPG, JPEG, PNG, .webp) (upto 20 images)</label>

                <form action="{{ route('admin.university.image.store', $id) }}" method="POST" enctype="multipart/form-data" class="dropzone" id="myDragAndDropUploader">
                    @csrf
                </form>

                <h5 id="message"></h5>
            </div>
        </div>
    </div> <!-- end col -->
    <div class="flex-shrink-0">
        <a href="{{ route('admin.university.image.index', $id) }}" class="btn btn-primary">Done</a>
    </div>
</div> <!-- end row -->
@endsection
@section('script')
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.0/min/dropzone.min.js"></script>
<script type="text/javascript">
    var maxFilesizeVal = 20;
    var maxFilesVal = 20;

    // Note that the name "myDragAndDropUploader" is the camelized id of the form.
    Dropzone.options.myDragAndDropUploader = {

        paramName: "file",
        maxFilesize: maxFilesizeVal, // MB
        maxFiles: maxFilesVal,
        resizeQuality: 1.0,
        acceptedFiles: ".jpeg,.jpg,.png,.webp",
        addRemoveLinks: false,
        timeout: 60000,
        dictDefaultMessage: "Drop your files here or click to upload",
        dictFallbackMessage: "Your browser doesn't support drag and drop file uploads.",
        dictFileTooBig: "File is too big. Max filesize: " + maxFilesizeVal + "MB.",
        dictInvalidFileType: "Invalid file type. Only JPG, JPEG, PNG and GIF files are allowed.",
        dictMaxFilesExceeded: "You can only upload up to " + maxFilesVal + " files.",
        maxfilesexceeded: function(file) {
            this.removeFile(file);
            // this.removeAllFiles(); 
        },
        sending: function(file, xhr, formData) {
            $('#message').text('Image Uploading...');
        },
        success: function(file, response) {
            $('#message').text(response.success);
            console.log(response.success);
            console.log(response);
        },
        error: function(file, response) {
            $('#message').text('Something Went Wrong! ' + response);
            console.log(response);
            return false;
        }
    };
</script>
@endsection