@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>Choose a Perspective</div>
            <div class="title-block-description">What's the main story or perspective you want to explore in your article?<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')
            @include('helper_ui.article-image-toggle')
          </div>
          <div class="article-gen-content-wrapper">
            <div class="w-form">

                @if($narratives['total'] > 3)
                  <div class="mini-pager-container" style="margin-bottom: 20px;">
                    <a href="{{!empty($narratives['prev_page_url']) ? $narratives['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">{{$narratives['current_page']}} of {{$narratives['last_page']}}</div>
                    <a href="{{!empty($narratives['next_page_url']) ? $narratives['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

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

                @isset($narratives['data'])
                    @foreach ($narratives['data'] as $key => $narrative)

                    <label class="radio-button-item w-radio">
                    <input onclick="enableNextStep(this)" {{ $narrative->approved == 1 ? 'checked' : '' }} {{$narrative->approved !== 1 && $key == 0 ? 'checked' : ''}} type="radio" data-name="narrative" id="radio-{{$narrative->id}}" name="narrative" value="{{$narrative->id}}" class="w-form-formradioinput radio-button w-radio-input">
                      <span class="radio-button-label w-form-label" for="radio">{{removeQuotesFromString(trim($narrative->narrative))}}</span>
                    </label>

                    @endforeach
                    <label class="radio-button-item w-radio">
                      <input onclick="enableNextStep(this)" type="radio" id="custom-narrative-radio" class="w-form-formradioinput radio-button w-radio-input">
                      <textarea oninput="adjustHeight(this); enableNextStep(this);" 
                        class="keyword-form-input w-input radio-button-label" 
                        id="input-custom-narrative" rows="1" 
                        placeholder="Enter a custom perspective..." name="input-custom-narrative"
                        style="overflow-y: hidden; resize: none; height: 20px; min-height: 40px; max-height: 60px;" maxlength="350"></textarea>
                  </label>
                @endisset
            </div>
            @php
              $WebScrapedUrlCount = getWebScrapedUrlCount($clientId);
            @endphp
            @if(auth()->user()->user_role === 3)
              <div class="canvas-submit-container right">
                  <a href="#" class="button button-shadow purple-gradient w-inline-block" id="{{ $WebScrapedUrlCount >= 2 ? 'btn-create-sources-flow' : 'btn-create-outline-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="narrative"]').each(function() {
            if ($(this).prop('checked')) {
                $('#btn-create-outline-flow').removeClass("disabled");
                $('#btn-create-sources-flow').removeClass("disabled");
            }
        });
    });
  </script>
@include('footer')