@props(['isMulti'])
<style>
    #FileUpload.active {
    / / When files dragged over / / @apply shadow-outline-blue border-blue-300;
        box-shadow: 0 0 0 3px rgba(164, 202, 254, 0.45);
        border-color: #a4cafe;
    }
</style>
<div class="h-full pb-16" x-data="upmdata()">
<div  class="flex h-full flex-col flex-grow">
    <div id="FileUpload"
         class="block w-full h-full overflow-scroll px-3 relative bg-white appearance-none border-2 border-gray-300 border-solid rounded-md hover:shadow-outline-gray">
        <input type="file" multiple
               class="absolute inset-0 z-50 m-0 p-0 w-full h-full outline-none opacity-0"
               x-on:change="files = $event.target.files;"
               x-on:dragover="$el.classList.add('active')" x-on:dragleave="$el.classList.remove('active')"
               x-on:drop="$el.classList.remove('active')"
        >
        <template x-if="files !== null">
            <div class="grid grid-cols-3 gap-4 space-y-1 ">
                <template class="overflow-hidden" x-for="(_,index) in Array.from({ length: files.length })">
                    <div class="flex justify-center items-center space-x-2 ">
                        <div>
                            <div class="bg-white rounded-lg shadow-sm hover:shadow-lg flex items-center justify-center ">
                                <template x-if="files[index].type.includes('audio/')"><i
                                        class="mdi mdi-music-note mdi-48px"></i>
                                </template>
                                <template x-if="files[index].type.includes('application/')"><i
                                        class="mdi mdi-application mdi-48px"></i></template>
                                <template x-if="files[index].type.includes('image/')">
                                    <i class="mdi mdi-image mdi-48px"></i>
                                </template>
                                <template x-if="files[index].type.includes('video/')"><i
                                        class="mdi mdi-video mdi-48px"></i>
                                </template>
                            </div>
                            <h6 class="font-medium text-gray-900 text-center" x-text="files[index].name"></h6>

                            {{--                        <span class="text-xs self-end text-gray-500" x-text="filesize(files[index].size)">...</span>--}}
                        </div>
                    </div>
                </template>
            </div>
        </template>
        <template x-if="files.length === 0">
            <div class="flex flex-col py-8 space-y-8 items-center justify-center">
                <i class="fas fa-cloud-upload-alt fa-3x text-currentColor"></i>
                <p class="text-gray-700">
                    {{ __('Drag your image or click on button') }}
                </p>
                <a href="javascript:void(0)"
                   class="flex items-center mx-auto py-2 px-4 text-button text-center font-medium border border-transparent rounded-md outline-none border border-button">
                    {{ __('Select Image') }}
                </a>
            </div>
        </template>
    </div>
</div>
{{--    <div class="flex items-center justify-between">--}}
    <button x-bind:disabled="disableButton ||  files.length===0" @click="uploadImage()" type="button" :class="{'bg-gray-300 hover:bg-gray-300 cursor-not-allowed':disableButton || files.length===0,'bg-button hover:bg-blue-700':!disableButton && files.length!==0}"
            class="md:w-48 w-full py-3 px-6 mt-4 float-left transition duration-300 ease-in-out rounded-lg text-white justify-center flex items-center">
        <svg x-show="disableButton" class="animate-spin -ms-1 me-3 h-5 w-5 text-white"
             xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor"
                    stroke-width="4"></circle>
            <path class="opacity-75" fill="currentColor"
                  d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
        </svg>
        <span  x-show="!disableButton">
             {{ __('Accept') }}
                    </span>
        <span x-show="disableButton">
            {{ __('Uploading') }}
                    </span>
    </button>
{{--    </div>--}}
</div>
<script>

    function upmdata() {
        return {
            files: [],
            disableButton:false,
            uploadImage(){
                this.disableButton=true;
                console.log('files',this.files);
                var formData = new FormData();
                for (var i = 0; i <this.files.length ; i++) {
                    formData.append('files[]', this.files[i]);
                }

                axios.post('{{route('admin.upload-files')}}',
                    formData,
                    {
                        headers: {
                            'Content-Type': 'multipart/form-data'
                        }
                    }
                ).then(response => {
                    var m = document.getElementById('ar-btn-tb');
                    if (m){
                        m.click();
                    }
                    if (window.location.pathname == '/admin/gallery'){
                        location.reload();
                    }else {
                    }
                    this.disableButton=false;


                }).catch(error => {
                    if (window.location.pathname == '/admin/gallery'){
                        location.reload();
                    }
                    console.log(error);
                    this.disableButton=false;

                });


            }
        }
    }

    </script>