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

        <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="form-group mb-3">
                <label class="form-label required">{{ __('Website URL') }}</label>
                <input type="text" class="form-control" wire:model.defer="link" required>
            </div>

            <div class="form-group mb-3">
                <label class="form-label required">{{ __('UTM Source') }}</label>
                <input type="text" class="form-control" wire:model.defer="utm_source" required>
            </div>

            <div class="form-group mb-3">
                <label class="form-label required">{{ __('UTM Medium') }}</label>
                <input type="text" class="form-control" wire:model.defer="utm_medium" required>
            </div>

            <div class="form-group mb-3">
                <label class="form-label required">{{ __('UTM Campaign') }}</label>
                <input type="text" class="form-control" wire:model.defer="utm_campaign" required>
            </div>

            <div class="form-group mb-3">
                <label class="form-label required">{{ __('UTM Content') }}</label>
                <input type="text" class="form-control" wire:model.defer="utm_content" required>
            </div>

            <div class="form-group mb-3">
                <label class="form-label required">{{ __('UTM Term') }}</label>
                <input type="text" class="form-control" wire:model.defer="utm_term" required>
            </div>

            @if ( \App\Models\Admin\General::first()->captcha_status )
              <x-public.recaptcha />
            @endif

            <div class="form-group text-center">
                <button class="btn btn-info" wire:loading.attr="disabled">
                    <span>
                        <div wire:loading.inline wire:target="onUtmBuilder">
                            <x-loading />
                        </div>
                        <span>{{ __('Generate') }}</span>
                    </span>
                </button>

                <button class="btn btn-lime" wire:click.prevent="onSample" wire:loading.attr="disabled">
                  <span>
                    <div wire:loading.inline wire:target="onSample">
                      <x-loading />
                    </div>
                    <span>{{ __('Sample') }}</span>
                  </span>
                </button>

                <button class="btn btn-warning" wire:click.prevent="onReset" wire:loading.attr="disabled">
                  <span>
                    <div wire:loading.inline wire:target="onReset">
                      <x-loading />
                    </div>
                    <span>{{ __('Reset') }}</span>
                  </span>
                </button>
            </div>

            @if ( !empty($data) )
              <div class="form-group position-relative mt-3">
                  <textarea id="result" class="form-control" rows="10">{{ $data['text'] }}</textarea>
                  <a onclick="copyToClipboard()" class="btn btn-icon btn-success cursor-pointer position-absolute top-0 end-0 m-2" title="{{ __('Copy') }}" data-bs-toggle="tooltip" data-bs-original-title="{{ __('Copy') }}">
                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <rect x="8" y="8" width="12" height="12" rx="2"></rect> <path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path> </svg>
                  </a>
              </div>
            @endif

      </form>

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