@include('header') 

<section class="body-section">
    <div class="transient-message"></div>
    <div class="content-width-container article-gen-flow">
      <div class="primary-content-container article-gen">
        @include('article-progress-section')
        <div class="title-block">
          <div class="title-block-title">
            <div>Create a Headline</div>
            <div class="title-block-description">Great! Now, let's create a captivating headline. Here are some suggestions that highlight your keywords and suit the Basic Article format. Click Regenerate to see a new set.<br></div>
          </div>
        </div>
        <div class="article-gen-content">
          <div class="article-gen-input-wrapper">
            <div class="article-gen-input-title">Target Keyword</div>
            <div class="article-gen-input-value">{{strtolower($articleSessionDetail->target_keyword)}}</div>
            @isset($articleSessionDetail->name)
                <div class="article-gen-input-title">Article Type</div>
                <div class="article-gen-input-value">{{strtolower($articleSessionDetail->name)}}</div>
            @endisset
            @isset($articleSessionDetail->persona_name)
                <div class="article-gen-input-title">Writer Persona</div>
                <div class="article-gen-input-value">{{strtolower($articleSessionDetail->persona_name)}}</div>
            @endisset
            @isset($articleSessionDetail->headline)
                <div class="article-gen-input-title">Headline</div>
                <div class="article-gen-input-value">{{strtolower($articleSessionDetail->headline)}}</div>
            @endisset
            @isset($articleSessionDetail->narrative)
                <div class="article-gen-input-title">Perspective</div>
                <div class="article-gen-input-value">{{strtolower($articleSessionDetail->narrative)}}</div>
            @endisset
            @include('helper_ui.article-length-toggle')
            @include('helper_ui.article-model-type')
          </div>
          <div class="article-gen-content-wrapper">
            <div class="w-form">
                @if($headlines['total'] > 5)
                  <div class="mini-pager-container" style="margin-bottom: 20px;">
                    <a href="{{!empty($headlines['prev_page_url']) ? $headlines['prev_page_url'] : '#'}}" class="mini-pager-elipse">
                      <img src="{{asset('images/left-arrow-white.svg')}}" loading="lazy" alt="" class="mini-pager-arrow">
                    </a>
                    <div class="mini-pager-label">{{$headlines['current_page']}} of {{$headlines['last_page']}}</div>
                    <a href="{{!empty($headlines['next_page_url']) ? $headlines['next_page_url'] : '#'}}" class="mini-pager-elipse">
                      <img src="{{asset('images/right-arrow-white.svg')}}" loading="lazy" alt="" class="mini-pager-arrow">
                    </a>
                  </div>
                @endif

                <input type="hidden" id="_token" value="{{ csrf_token() }}" />
                <input type="hidden" id="articleSessionId" value="{{$articleSessionId}}" />

                @isset($headlines['data'])
                  @foreach ($headlines['data'] as $key => $headline)
                    @php 
                      $headlineId = $headline['id'];

                      //Taylor added this since removeQuotesFromString() wasn't working
                      $originalHeadline = $headline['headline'];
                      $cleanHeadline = str_replace(["'", "\""], "", $originalHeadline);
                    @endphp

                    <label class="radio-button-item w-radio">
                      <input onclick="enableNextStep(this)" {{ $headline['approved'] == 1 ? 'checked' : '' }} {{$headline['approved'] !== 1 && $key == 0 ? 'checked' : ''}} type="radio" data-name="Radio" id="headline-{{$headline['id']}}" name="headline" value="{{$headline['id']}}" class="w-form-formradioinput radio-button w-radio-input">
                      <span class="radio-button-label w-form-label" for="radio">{{$headline['headline']}}</span>
                    </label>
                  @endforeach
                  <label class="radio-button-item w-radio">
                    <input onclick="enableNextStep(this)" type="radio" id="custom-headline-radio" class="w-form-formradioinput radio-button w-radio-input">
                    <input onkeyup="enableNextStep(this)" class="keyword-form-input w-input radio-button-label" id="input-custom-headline" type="text" placeholder="Enter a custom headline..." name="input-custom-headline" maxlength="250"/>
                  </label>
                @endisset
            </div>

            {{ csrf_field() }}
            <input type="hidden" id="clientId" value="{{$clientId}}" /> 
            <input type="hidden" id="articleSessionId" value="{{$articleSessionId}}" />
            <input type="hidden" id="submissionType" value="regenerate" />

            @if(auth()->user()->user_role === 3)
              <div class="canvas-submit-container right">
                <a href="#" class="button button-shadow purple-gradient w-inline-block" id="btn-regenerate-headline-flow">
                  <div class="button-label white-text">Regenerate Headlines</div>
                  <div class="button-icon-container"><img src="{{asset('images/refresh.svg')}}" loading="lazy" alt="" class="image-3"></div>
                </a>
                <a href="#" class="button button-shadow purple-gradient w-inline-block" id="btn-create-perspective-flow">
                  <div class="button-label white-text">Save &amp; Continue</div>
                  <div class="button-icon-container"><img src="{{asset('images/toggle-arrow.svg')}}" loading="lazy" alt="" class="image-3"></div>
                </a>
              </div>
            @endif
          </div>
        </div>
      </div>
    </div>
</section>
<script>
    $(document).ready(function() {
        // Select all radio input elements with name="narrative"
        $('input[type="radio"][name="headline"]').each(function() {
            if ($(this).prop('checked')) {
                $('#btn-create-perspective-flow').removeClass("disabled");
            }
        });
    });
</script>
@include('footer')