@props(['description'=>'ファイルアップロード'])
<div class="mt-2">
    <div x-data="{
    isDropping: false,
    isUploading: false,
    progress: 0,
    init(){
      console.log('initialized file');
    },
    handleFileSelect(event) {
        if (event.target.files.length) {
            this.uploadFiles(event.target.files)
        }
    },
    handleFileDrop(event) {
        if (event.dataTransfer.files.length > 0) {
            this.uploadFiles(event.dataTransfer.files)
        }
    },
    uploadFiles(files) {
        const current_this = this
        current_this.isUploading = true
        $wire.uploadMultiple('files', files,
        function (success) {  //upload was a success and was finished
            current_this.isUploading = false
            current_this.progress = 0
        },
        function (error) {  //an error occured
            alert('ファイルアップロードに失敗しました.');
            console.log(error);

        },
        function (event) {  //upload progress was made
            current_this.progress = event.detail.progress
        })},
    removeUpload(filename) {
        $wire.removeUpload('files', filename)}
    }
    ">
        <div

            class="flex flex-col items-center justify-center "
            x-on:drop="isDroppingFile = false"
            x-on:drop.prevent="handleFileDrop($event)"
            x-on:dragover.prevent="isDroppingFile = true"
            x-on:dragleave.prevent="isDroppingFile = false">
            @if(count($this->files)>0)
                <div class="w-full border rounded-xl p-2 m-2 flex flex-wrap">
                    @foreach($this->files as $file)
                        <div class="border-b  text-xs border-green-700 p-1 m-1">{{$file->getClientOriginalName()}}</div>
                    @endforeach
                </div>
            @endif

            <label
                class="m-2 flex flex-col items-center justify-center w-full bg-white border border-dashed  cursor-pointer h-[250px]  rounded-xl hover:bg-slate-50"
                for="file-upload"
            >
                <h3 class="text-2xl">{{$description}}</h3>
                <em class="italic text-sm text-slate-400">ここにファイルのドロップ</em>
                <div class="bg-gray-200 h-[2px] w-1/2 mt-3">
                    <div class="bg-blue-500 h-[2px]"
                         style="transition: width 1s"
                         :style="`width: ${progress}%;`"
                         x-show="isUploading">
                    </div>
                </div>
            </label>
            <input type="file" id="file-upload" wire:model="files"  @change="handleFileSelect" class="w-1 h-1 opacity-0"/>
        </div>
    </div>

    @error('files') <span class="text-red-700">送信ファイルを指定してください。</span> @enderror
</div>