<div>
      <form wire:submit.prevent="onQrCodeDecoder">

          <div class="image-container mb-3">

              <div>
                  <!-- Session Status -->
                  <x-auth-session-status class="mb-4" :status="session('status')" />
                                              
                  <!-- Validation Errors -->
                  <x-auth-validation-errors class="mb-4" :errors="$errors" />
              </div>
              
              <div class="image-wrapper {{ ($convertType == 'remoteURL') ? 'show-remote-box' : '' }}">

                  <div class="local-image-box dropzone d-flex flex-column p-3">
                      <div class="d-flex mt-auto mx-auto w-75">
                        <div class="row w-100">
                            <div class="col">
                              <div class="form-group">
                                <input type="file" class="form-control" accept=".jpg,.jpeg,.png" wire:model.defer="local_image" {{ $convertType == 'localImage' ? 'required' : '' }}>
                              </div>
                            </div>
                            <p class="mt-3 text-center">{{ __('Maximum upload file size') }}: {{ \App\Models\Admin\General::first()->file_size }} {{ __(' MB') }}</p>
                        </div>
                      </div>

                      <div class="d-flex mt-auto flex-end">
                          <small class="ms-auto badge badge-info cursor-pointer" wire:click="onConvertType('remoteURL')">
                              <i class="fas fa-link icon"></i>
                              {{ __('Use Remote URL') }}
                          </small>
                      </div>
                  </div>

                  <div class="remote-box d-flex flex-column">
                        <div class="d-flex mt-auto mx-auto w-75">
                          <div class="row w-100">
                              <div class="col">
                                <div class="input-group input-group-flat">
                                    <input type="text" id="remote_url" class="form-control" wire:model.defer="remote_url" placeholder="https://..." {{ $convertType == 'remoteURL' ? 'required' : '' }}>
                                    <span class="input-group-text">
                                        <div id="paste" class="cursor-pointer" title="{{ __('Paste') }}" data-bs-original-title="{{ __('Paste') }}" data-bs-toggle="tooltip" wire:ignore>
                                          <i class="far fa-clipboard fa-fw"></i>
                                        </div>
                                    </span>
                                </div>
                              </div>
                          </div>
                        </div>

                        <div class="d-flex mt-auto flex-end">
                            <small class="ms-auto badge badge-info cursor-pointer" wire:click="onConvertType('localImage')">
                                <i class="fas fa-laptop icon"></i>
                                {{ __('Upload from device') }}
                            </small>
                        </div>
                  </div>

              </div>
          </div>

          @if ($generalSettings->captcha_status && ($generalSettings->captcha_for_registered || !auth()->check()))
            <x-public.recaptcha />
          @endif
        
          <div class="form-group mb-0">
              <button class="btn bg-gradient-info mx-auto d-block mb-0" wire:loading.attr="disabled">
                <span>
                  <div wire:loading.inline wire:target="onQrCodeDecoder">
                    <x-loading />
                  </div>
                  <span>{{ __('Decode') }}</span>
                </span>
              </button>
          </div>

          @if ( !empty($data) )
            <div class="form-group position-relative mt-3 mb-0">
                <textarea id="result" class="form-control" rows="10">{{ $data['text'] }}</textarea>
                <a onclick="copyToClipboard()" class="btn btn-icon-only btn-success cursor-pointer position-absolute top-0 end-0 m-2" title="{{ __('Copy') }}" data-bs-toggle="tooltip" data-bs-original-title="{{ __('Copy') }}">
                    <i class="fas fa-copy"></i>
                </a>
            </div>
          @endif

      </form>

	<script>
	  function copyToClipboard() {
		document.getElementById("result").select();
		document.execCommand('copy');
	  }
	</script>
	
  <script>
      (function( $ ) {
        "use strict";

        document.addEventListener('livewire:load', function () {

          var el      = document.getElementById('paste');
          var input   = document.getElementById('remote_url');
          var tooltip = new bootstrap.Tooltip(el);

          var pasteIcon = '<i class="far fa-clipboard fa-fw"></i>';
          var clearIcon = '<i class="fas fa-trash fa-fw"></i>';

          function setPasteIcon() {
            el.innerHTML = pasteIcon;
            tooltip.dispose();
            el.setAttribute('title', '{{ __('Paste') }}');
            el.classList.remove('text-danger');
            tooltip = new bootstrap.Tooltip(el);
          }

          function setClearIcon() {
            el.innerHTML = clearIcon;
            tooltip.dispose();
            el.setAttribute('title', '{{ __('Clear') }}');
            el.classList.add('text-danger');
            tooltip = new bootstrap.Tooltip(el);
          }

          function checkInputValue() {
            if (input.value) {
              setClearIcon();
            } else {
              setPasteIcon();
            }
          }

          checkInputValue(); // Initial check in case there's a value already

          // Handle click on the icon
          el.addEventListener('click', function() {
            if (el.innerHTML === clearIcon) {
              // Clear action
              @this.set('remote_url', ''); // Update Livewire state
              setPasteIcon();
            } else {
              // Paste action
              navigator.clipboard.readText().then(function(clipText) {
                @this.set('remote_url', clipText);
                setClearIcon();
              }).catch(function() {
                // Handle error if needed
              });
            }
          });

          // Handle changes to the input field
          input.addEventListener('input', checkInputValue);

          //onSetRemoteURL
          jQuery('input#remote_url').change(function() { 
            window.livewire.emit('onSetRemoteURL', this.value)
          });

        });

      })( jQuery );
  </script>
</div>