@php
	$initStrRandom = \Illuminate\Support\Str::random(7);
@endphp

<div class="flex flex-col gap-2">
	<dt class="text-sm font-medium text-gray-500">
		<span>{{ $label }}</span>
	</dt>
	<dd class="text-sm text-gray-900 sm:mt-0 sm:col-span-2">
		<textarea class="border w-full px-3 py-2 mb-6 hidden" rows="5" cols="5" name="{{ $name }}" id="path-uploads">{{ isset($query) ? $query : '[]' }}</textarea>

		<div class="flex flex-wrap gap-2">
			<div class="result-image-upload flex flex-wrap gap-4">

				@isset($query)
					@foreach(json_decode($query) as $item)
						@php
							$strRandom = \Illuminate\Support\Str::random(7);
						@endphp
						<div style="width: 240px; height: 304px" id="div-file-upload-{{ $strRandom }}" data-path="{{ $item->image }}" class="mb-3 img-path">
							<div class="flex justify-center items-center border cursor-pointer div-file-upload">
								<img src="{{ $item->image }}" alt="image" class="object-contain img-upload" data-id="{{ $strRandom }}" style="width: 240px !important; height: 150px !important;">
							</div>
							<div class="w-full flex justify-center items-center cursor-pointer">
								<textarea cols="5" rows="5" class="border px-3 py-2 w-full img-desc" placeholder="Description" data-id="{{ $strRandom }}">{{ $item->description }}</textarea>
							</div>
							<div class="w-full flex justify-center items-center bg-red-500 text-white px-3 py-2 img-remove cursor-pointer" data-id="{{ $strRandom }}">
								<i class="fas fa-trash mr-1"></i>
								ลบรูปภาพ
							</div>
						</div>
					@endforeach
				@else
					<div style="width: 240px; height: 304px" id="div-file-upload-{{ $initStrRandom }}" class="mb-3 img-path">
						<div class="flex justify-center items-center border rounded cursor-pointer div-file-upload">
							<img src="{{ asset('images/file-upload.png') }}" alt="image" class="object-contain img-upload" data-id="{{ $initStrRandom }}" style="width: 240px !important; height: 150px !important;">
						</div>
						<div class="w-full flex justify-center items-center cursor-pointer">
							<textarea cols="5" rows="5" class="border px-3 py-2 w-full img-desc" placeholder="Description" data-id="{{ $strRandom }}"></textarea>
						</div>
						<div class="w-full flex justify-center items-center bg-red-500 text-white px-3 py-2 img-remove cursor-pointer" data-id="{{ $initStrRandom }}">
							<i class="fas fa-trash mr-1"></i>
							ลบรูปภาพ
						</div>
					</div>
				@endisset
			</div>
		</div>

		<div class="w-full flex justify-start items-center mt-6">
			<button type="button" class="border rounded bg-green-500 text-white cursor-pointer add-image-upload px-4 py-3">
				<i class="fal fa-plus mr-1"></i>
				เพิ่มรูปภาพ
			</button>
		</div>

	</dd>
</div>

@push('script')
	<script>

      let fileUploads = []

			@isset($query)
      if (@json($query)) {
          fileUploads = JSON.parse(@json($query))
      }
			@endisset



      $('.add-image-upload').on('click', function () {
          const strRandom = Math.floor(Math.random() * 10000)
          const html = `<div style="width: 240px; height: 304px" id="div-file-upload-${strRandom}" class="mb-3 img-path">
					<div class="flex justify-center items-center border cursor-pointer div-file-upload">
						<img src="{{ asset('images/file-upload.png') }}" alt="image" class="object-contain img-upload" data-id="${strRandom}" style="width: 240px !important; height: 150px !important;">
					</div>
					<div class="w-full flex justify-center items-center cursor-pointer">
						<textarea cols="5" rows="5" class="border px-3 py-2 w-full img-desc" placeholder="Description" data-id="{{ $strRandom }}"></textarea>
					</div>
					<div class="w-full flex justify-center items-center bg-red-500 text-white px-3 py-2 img-remove cursor-pointer" data-id="${strRandom}">
						<i class="fas fa-trash mr-1"></i>
						ลบรูปภาพ
					</div>
				</div>`
          $('.result-image-upload').append(html)
      })

      $('.result-image-upload').on('click', '.img-upload', function () {
          let that = $(this)
          let input = document.createElement('input');
          input.type = "file";
          input.onchange = function () {
              if (input.files.length > 0) {
                  for (let i = 0; i <= input.files.length - 1; i++) {
                      const fsize = input.files.item(i).size;
                      const file = Math.round((fsize / 1024));
                      if (file >= 10480) {
                          swal('ขนาดไฟล์ต้องไม่เกิน 10 MB', '', 'info')
                          input.value = ''
                      } else {
                          const objURL = URL.createObjectURL(input.files[i])
                          that.attr('src', objURL)

                          // ajax upload image
                          let formData = new FormData();
                          formData.append('file', input.files[i]);
                          $.ajax({
                              url: '/ajax/upload/image',
                              type: 'post',
                              data: formData,
                              contentType: false,
                              processData: false,
                              success: function (response) {
                                  if (response) {
                                      fileUploads = []
                                      $(`#div-file-upload-${that.attr('data-id')}`).attr('data-path', response.path)

                                      $('.img-upload').each(index => {
                                          const el = $('.img-upload')[index]
                                          const elDescription = $('.img-desc')[index]

                                          if (el.getAttribute('data-id') === that.attr('data-id')) {
                                              $('.img-upload')[index].setAttribute('data-original-src', response.path)
                                              fileUploads.push(
                                                  {
                                                      image: response.path,
                                                      description: elDescription.value
                                                  }
                                              )
                                          } else {
                                              // check contain data-original-src
                                              if (el.getAttribute('data-original-src') === null) {
                                                  fileUploads.push(
                                                      {
                                                          image: el.getAttribute('src'),
                                                          description: elDescription.value
                                                      }
                                                  )
                                              } else {
                                                  fileUploads.push(
                                                      {
                                                          image: el.getAttribute('data-original-src'),
                                                          description: elDescription.value
                                                      }
                                                  )
                                              }
                                          }
                                      })

                                      $('#path-uploads').val(JSON.stringify(fileUploads))
                                  }
                              },
                          });

                      }
                  }
              }
          }
          input.click()
      })

      $('.result-image-upload').on('keyup', '.img-desc', function () {
          const that = this
          const elValue = $(this).val()

          fileUploads = []
          $('.img-upload').each(index => {
              const el = $('.img-upload')[index]
              const elDescription = $('.img-desc')[index]

              if (el.getAttribute('data-id') === $(that).attr('data-id')) {

                  elDescription.setAttribute('value', elValue)

                  // check contain data-original-src
                  if (el.getAttribute('data-original-src') === null) {
                      fileUploads.push(
                          {
                              image: el.getAttribute('src'),
                              description: elValue
                          }
                      )
                  } else {
                      fileUploads.push(
                          {
                              image: el.getAttribute('data-original-src'),
                              description: elValue
                          }
                      )
                  }
              } else {
                  // check contain data-original-src
                  if (el.getAttribute('data-original-src') === null) {
                      fileUploads.push(
                          {
                              image: el.getAttribute('src'),
                              description: elDescription.value
                          }
                      )
                  } else {
                      fileUploads.push(
                          {
                              image: el.getAttribute('data-original-src'),
                              description: elDescription.value
                          }
                      )
                  }
              }
          })

          $('#path-uploads').val(JSON.stringify(fileUploads))
      })

      $('.result-image-upload').on('click', '.img-remove', function () {
          const dataId = $(this).attr('data-id')
          const imgs = $('.img-upload')
          let src = ''

          imgs.each(index => {
              const el = $('.img-upload')[index]
              if (el.getAttribute('data-id') === dataId) {
                  src = el.getAttribute('src')
              }
          })

          fileUploads = fileUploads.filter(item => item.image !== src)
          $(`#div-file-upload-${dataId}`).remove()
          $('#path-uploads').val(JSON.stringify(fileUploads))
      })

      $('.result-image-upload').sortable({
          update: function (event, ui) {
              const pathLists = $('.img-path')
              let reorder = []
              pathLists.each(index => {
                  const path = pathLists[index].getAttribute('data-path')
                  if (path !== null) {
                      const elDescription = $('.img-desc')[index]
                      // reorder.push(path)

                      reorder.push({
                          image: path,
                          description: elDescription.value
                      })
                  }
              })
              fileUploads = reorder
              $('#path-uploads').val(JSON.stringify(fileUploads))
          }
      })
	</script>
@endpush