@section('page_title')
    {{ "Composer - My Account" }}
@endsection
@include('header')

@if (session('success'))
    <div class="alert alert-success">
        <div class="alert-text">{{ session('success') }}</div>
    </div>
@endif
@if (session('error'))
    <div class="alert alert-error">
        <div class="alert-text">{{ session('error') }}</div>
    </div>
@endif

@php
    $newSocialPost = request()->path() === 'composer/generate-new-post';
@endphp

<section class="body-section">
  <div class="content-width-container split-view">
    @include('left-split-view')
    <div class="primary-content-container">
      <div class="max-w-content">
        <div class="body-outer-wrapper">
          <div class="body-main-title-block">
            @if($newSocialPost)
              <h1 class="body-main-title">Content URL</h1>
              <div class="body-main-description">To generate a social post enter a URL and click &quot;Generate Social Post&quot;.</div>
            @else
              <h1 class="body-main-title">Your Brand</h1>
              <div class="body-main-description">Enter your business URL below. We'll create a Business Profile for Composer to use for content generation, which you can edit on the next page.</div>
            @endif
          </div>
        </div>
        <div style="display: inline-block;">
          <input type="text" class="my-website-url" placeholder="https://" id="my-website-url" name="my-website-url">
          <span class="invalid-feedback" id="url-error-message" role="alert" style="display: none">
            <strong>Please enter a valid URL</strong>
          </span>
        </div>
        <div style="display: inline-block; margin-left: 10px;">
          @if(!$newSocialPost)
            <a href="#" class="button button-shadow purple-gradient w-inline-block" id="my-website-continue" style="display: none;">
              <input type="hidden" id="_token" value="{{ csrf_token() }}">
              <div class="button-label white-text">Continue</div>
              <div class="button-icon-container">
                <img src="{{asset('images/right-arrow-white.svg')}}" loading="lazy" alt="">
              </div>
            </a>
            @if (session('isArticleFlowStarted'))
              <a href="/composer/article-type/{{$articleSessionId}}" class="button white-button w-inline-block" id="my-website-skip">
                <div class="button-label white-text dark-text">Skip This Step</div>
              </a>
            @else
              <a href="/composer/about-my-business" class="button white-button w-inline-block" id="my-website-skip">
                <div class="button-label white-text dark-text">Skip This Step</div>
              </a>
            @endisset
          @else
            <a href="#" class="button button-shadow purple-gradient w-inline-block" id="generate-new-post">
              <input type="hidden" id="_token" value="{{ csrf_token() }}">
              <input type="hidden" id="newPost" value="{{ true }}">
              <div class="button-label white-text">Generate Social Post</div>
              <div class="button-icon-container">
                <img src="{{asset('images/right-arrow-white.svg')}}" loading="lazy" alt="">
              </div>
            </a>
          @endif
        </div>
      </div>
    </div>
  </div>
</section>  


<script>
document.addEventListener('DOMContentLoaded', function () {
    // Get references to the elements involved.
    const urlInput = document.getElementById('my-website-url');
    const continueButton = document.getElementById('my-website-continue');
    const skipButton = document.getElementById('my-website-skip');

    // This function toggles the display of the buttons based on the URL input's content.
    function toggleButtons() {
        if (urlInput.value.trim() !== '') {
            // If there is text in the input, show the "Continue" button and hide the "Skip" button.
            continueButton.style.display = '';
            skipButton.style.display = 'none';
        } else {
            // If the input is empty, show the "Skip" button and hide the "Continue" button.
            continueButton.style.display = 'none';
            skipButton.style.display = '';
        }
    }

    // Add an event listener to the input field to check for changes.
    urlInput.addEventListener('input', toggleButtons);

    // Initialize buttons on page load in case there's already text in the input field (e.g., browser autofill).
    toggleButtons();
});
</script>  


@include('footer')