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

        <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" 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="onJpgToPng">
                    <x-loading />
                  </div>
                  <span>{{ __('Convert') }}</span>
                </span>
              </button>
          </div>
      </form>

        <div class="modal fade" id="modalPreviewDownloadImage" tabindex="-1" role="dialog" aria-labelledby="modalPreviewDownloadImage" aria-hidden="true">
            <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title">
                    <svg baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 36 36" class="icon me-1 my-auto"><path fill="#A4D06D" d="M16.688 25.728l-6.61-6.61 2.152-2.152 3.902 3.902 6.08-9.758 2.583 1.61"></path><path fill="#A4D06D" d="M18 35.875C8.144 35.875.125 27.855.125 18S8.145.125 18 .125 35.875 8.145 35.875 18 27.855 35.875 18 35.875zm0-33.468C9.402 2.407 2.407 9.402 2.407 18c0 8.598 6.995 15.593 15.593 15.593 8.598 0 15.593-6.995 15.593-15.593 0-8.598-6.995-15.593-15.593-15.593z"></path></svg>
                    <span>{{ __('Save your image') }}</span>
                  </h5>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ __('Close') }}"></button>
                </div>

                <div class="modal-body">
                    <div class="form-group text-center mb-0 mx-auto">
                        <a class="btn btn-success download-image">
                            <i class="fas fa-download fa-fw"></i>
                            {{ __('Download Image') }}
                        </a>
                    </div>

                    <p><img class="preview-download-image img-fluid d-block m-auto"></p>
                    <p>{{ __('Note: This is a preview only. Click the "Download Image" button for the final image.') }}</p>
                </div>

                <div class="modal-footer">
                  <button type="button" class="btn bg-gradient-secondary" data-bs-dismiss="modal">{{ __('Close') }}</button>
                </div>

              </div>
            </div>
        </div>

        <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);
            
                jQuery('input#remote_url').change(function() { 
                  window.livewire.emit('onSetRemoteURL', this.value)
                });

                /**
                 * -------------------------------------------------------------------------------
                 *  showModal
                 * -------------------------------------------------------------------------------
                **/
                window.addEventListener('showModal', event => {
                    jQuery('.download-image').attr( 'href', event.detail.download );
                    jQuery('.preview-download-image').attr('src', event.detail.preview);
                    jQuery('#' + event.detail.id).modal('show');
                });

            });

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