@include('header')
<section class="body-section">
  <div class="content-width-container article-gen-flow">
    <div class="outline-progress-bar article-gen">
        @include('article-progress-section')
    </div>
  </div>
    <div class="content-width-container split-view">
      <div class="split-container">
        @isset($outlines['data'])
          @foreach ($outlines['data'] as $outline)
            <div class="article-preview-container">
              <div class="article-preview-control-wrapper" id="default-mode">
                <div class="article-preview-control-left-new">
                  <div class="article-preview-left">
                    <a class="article-control-arrow" href="{{!empty($outlines['prev_page_url']) ? $outlines['prev_page_url'] : '#'}}">
                      <img src="{{asset('images/article-preview-arrow-left.svg')}}" loading="lazy" alt="" class="image-2">
                    </a>
                  </div>
                  <div class="article-preview-middle">
                    <div>{{$outlines['current_page']}} of {{$outlines['last_page']}}</div>
                  </div>
                  <div class="article-preview-right">
                    <a class="article-control-arrow" href="{{!empty($outlines['next_page_url']) ? $outlines['next_page_url'] : '#'}}">
                      <img src="{{asset('images/article-preview-arrow-right.svg')}}" loading="lazy" alt="">
                    </a>
                  </div>
                </div>
                <div class="article-preview-control-middle">
                    <input type="hidden" id="selectedOutlineId" value="{{$outline->id}}" />
                    <input type="hidden" id="selectedPageNumber" value="{{$outlines['current_page']}}" />
                    <input type="hidden" id="outline_sequence" value="{{$outline->outline_sequence}}">
                    <div class="article-preview-filename" id="outline-preview-filename">
                        <div class="edit-filename">{{isset($outline->file_name) && !empty($outline->file_name) ? $outline->file_name : 'Outline'}} (#{{$outline->outline_sequence}})</div>
                    </div>
                </div>
                <div class="article-preview-control-right">
                  <div data-w-id="522b4248-96db-97a0-1137-0929e92f70a1" class="article-metadata-icon">
                    <img src="{{asset('images/article-metadata-icon.svg')}}" loading="lazy" alt="">
                  </div>
                  <div class="article-preview-meta-menu" style="display: none;">
                    <div data-w-id="522b4248-96db-97a0-1137-0929e92f70a4" class="meta-menu-close">
                      <img src="{{asset('images/close-icon.svg')}}" loading="lazy" alt="">
                    </div>
                    <ul role="list" class="meta-menu-list">
                      @if(auth()->user()->roles[0]->id === 3)
                        <li class="meta-menu-list-item">
                          <a href="#" class="meta-menu-link" onclick="initializeQuill('#outline-textarea', {{json_encode($outline->outline)}})" id="edit-content-link">Edit Outline</a>
                        </li>
                      @endif
                      <li class="meta-menu-list-item">
                        <a href="#" class="meta-menu-link" id="article-inputs">Article Inputs</a>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
              <div class="article-preview-control-wrapper" id="editor-mode" style="display: none">
                <div role="toolbar" class="wysiwyg-toolbar" id="wysiwyg-toolbar">
                  <span class="ql-formats">
                    <select class="ql-header">
                    </select>
                  </span>
                  <button class="ql-bold"></button>
                  <button class="ql-italic"></button>
                  <button class="ql-underline"></button>
                  <button class="ql-link"></button>
                  <span class="ql-formats"><button type="button" class="ql-list" aria-pressed="false" value="ordered" aria-label="list: ordered"><svg viewBox="0 0 18 18"><line class="ql-stroke" x1="7" x2="15" y1="4" y2="4"></line><line class="ql-stroke" x1="7" x2="15" y1="9" y2="9"></line><line class="ql-stroke" x1="7" x2="15" y1="14" y2="14"></line><line class="ql-stroke ql-thin" x1="2.5" x2="4.5" y1="5.5" y2="5.5"></line><path class="ql-fill" d="M3.5,6A0.5,0.5,0,0,1,3,5.5V3.085l-0.276.138A0.5,0.5,0,0,1,2.053,3c-0.124-.247-0.023-0.324.224-0.447l1-.5A0.5,0.5,0,0,1,4,2.5v3A0.5,0.5,0,0,1,3.5,6Z"></path><path class="ql-stroke ql-thin" d="M4.5,10.5h-2c0-.234,1.85-1.076,1.85-2.234A0.959,0.959,0,0,0,2.5,8.156"></path><path class="ql-stroke ql-thin" d="M2.5,14.846a0.959,0.959,0,0,0,1.85-.109A0.7,0.7,0,0,0,3.75,14a0.688,0.688,0,0,0,.6-0.736,0.959,0.959,0,0,0-1.85-.109"></path></svg></button><button type="button" class="ql-list" aria-pressed="false" value="bullet" aria-label="list: bullet"><svg viewBox="0 0 18 18"><line class="ql-stroke" x1="6" x2="15" y1="4" y2="4"></line><line class="ql-stroke" x1="6" x2="15" y1="9" y2="9"></line><line class="ql-stroke" x1="6" x2="15" y1="14" y2="14"></line><line class="ql-stroke" x1="3" x2="3" y1="4" y2="4"></line><line class="ql-stroke" x1="3" x2="3" y1="9" y2="9"></line><line class="ql-stroke" x1="3" x2="3" y1="14" y2="14"></line></svg></button></span>
                  <span class="ql-formats"><button type="button" class="ql-clean" aria-pressed="false" aria-label="clean"><svg class="" viewBox="0 0 18 18"><line class="ql-stroke" x1="5" x2="13" y1="3" y2="3"></line><line class="ql-stroke" x1="6" x2="9.35" y1="12" y2="3"></line><line class="ql-stroke" x1="11" x2="15" y1="11" y2="15"></line><line class="ql-stroke" x1="15" x2="11" y1="11" y2="15"></line><rect class="ql-fill" height="1" rx="0.5" ry="0.5" width="7" x="2" y="14"></rect></svg></button></span>
                </div>
                <div class="wysiwyg-submit">
                  <a href="#" onclick="location.reload()" class="button button-shadow purple-gradient thin w-inline-block">
                    <div class="button-label white-text">Cancel </div>
                  </a>
                  <a href="#" class="button button-shadow purple-gradient thin w-inline-block" id="btn-update-outline-link">
                    <input type="hidden" id="selectedOutlineId" value="{{$outline->id}}" />
                    <input type="hidden" id="selectedPageNumber" value="{{$outlines['current_page']}}" />
                    <div class="button-label white-text">Save </div>
                  </a>
                </div>
              </div>
              <!-- Outline preview -->
              <div class="article-preview-content-wrapper" id="outline">
                <input type="hidden" id="_token" value="{{ csrf_token() }}" />
                <input type="hidden" id="articleSessionId" value="{{$articleSessionId}}" />
                <input type="hidden" id="clientId" value="{{$clientId}}" />
                <div class="article-element headline"><strong class="bold-text">{{$articleSessionDetail->headline}}</strong></div>
                <div class="article-element primary-content w-richtext">
                    {!! Str::markdown(trim($outline->outline)) !!}
                </div>
              </div>
              <!-- Outline preview ended -->
              <!-- Outline editing section start -->
              <div class="article-element headline" style="display: none;"><strong class="bold-text">{{$articleSessionDetail->headline}}</strong></div>
              <div class="article-preview-content-wrapper editor textarea w-input outline-textarea" id="outline-textarea" style="display: none;">
                <div class="article-element primary-content w-richtext">
                  {!! Str::markdown(trim($outline->outline)) !!}
                </div>
              </div>
              <!-- Outline editing section Ended -->
            </div>
          @endforeach
        @endisset
        <div class="canvas-container">
          <div class="canvas-tag-container expanded">
            <div class="canvas-section-title">Outline Revision Notes</div>
            <div class="canvas-tag-scroller outline">
              <div class="canvas-tag" data-text="Ensure SEO keyword [keyword] is seamlessly and naturally integrated into section titles and descriptions">Incorporate SEO Keywords</div>
              <div class="canvas-tag" data-text="Include relevant examples or scenarios to clarify and enhance the outline">Add Supporting Examples</div>
              <div class="canvas-tag" data-text="Break down sections into subsections to improve flow and reader comprehension">Create Subsections for Readability</div>
              <div class="canvas-tag" data-text="Emphasize key takeaways or actionable insights to maximize the value for readers">Focus on Areas of Value</div>
              <div class="canvas-tag" data-text="Make section titles more descriptive or engaging">Refine Section Titles</div>
              <div class="canvas-tag" data-text="Optimize calls-to-action and conversion opportunities to drive engagement">Refine CTAs and Conversion Points</div>
              <div class="canvas-tag" data-text="Suggest areas where statistics or data points could support the content">Add Prompts for Statistics or Data</div>
              <div class="canvas-tag" data-text="Add a CTA to the conclusion directing readers to [website]">Call-to-Action</div>
              <div class="canvas-tag" data-text="Address potential reader questions or concerns within the outline">Anticipate Reader Questions</div>
              <div class="canvas-tag" data-text="Simplify and organize the outline for better clarity and cohesion">Streamline Content Structure</div>
              <div class="canvas-tag" data-text="Identify opportunities to include relevant internal and external links">Plan for Internal and External Links</div>
              <div class="canvas-tag" data-text="Remove any and all statistics from the outline">Remove Statistics</div>
              @if(auth()->user()->roles[0]->id === 3)
                <div data-w-id="5f11af9e-3de4-d590-a44b-7c75eb142740" class="canvas-notes-add"><img src="{{asset('images/plus-icon.svg')}}" loading="lazy" alt="">
                  <div class="revision-note-form" style="display: none;">
                    <button class="close-popup">&times;</button>
                    <div class="form-block w-form">
                      <form action="#" id="email-form" name="email-form" data-name="Email Form" method="get" class="form" data-wf-page-id="669ab8db8b44155f1e721648" data-wf-element-id="26d06b88-690b-53c3-e8ce-ceb7e54e68e0">
                        <div><input class="text-field w-input" maxlength="256" name="name" data-name="Name" placeholder="" type="text" id="name"></div>
                        <div><input type="submit" data-wait="Please wait..." class="w-button" value="Submit"></div>
                      </form>
                    </div>
                  </div>
                </div>
              @endif
            </div>
          </div>
          @if(auth()->user()->roles[0]->id === 3)
            <div class="canvas-submit-container">
              <a href="#" style="display: none;" class="button button-shadow purple-gradient w-inline-block" id="btn-regenerate-outline-flow">
                <div class="button-label white-text">Re-Generate Outline</div>
                <div class="button-icon-container"><img src="{{asset('images/refresh-icon.svg')}}" loading="lazy" alt="" class="image-3"></div>
              </a>
              <a href="#" class="button button-shadow purple-gradient w-inline-block" id="btn-final-draft-flow">
                <div class="button-label white-text">Save & 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 class="article-inputs-outer-wrapper" style="display: none;">
          <div class="article-inputs-close-button"><img src="{{asset('images/close-icon.svg')}}" loading="lazy" alt=""></div>
          <div class="canvas-section-title">Article Inputs</div>
          <div class="article-inputs-wrapper">
            <div class="article-inputs-title">Article Type</div>
            <div class="article-inputs-input">{{$outlines['data'][0]->article_type}}</div>
            <div class="article-inputs-title">Target Keyword</div>
            <div class="article-inputs-input">{{$outlines['data'][0]->target_keyword}}</div>
            <div class="article-inputs-title">Headline</div>
            <div class="article-inputs-input">{{strtolower($articleSessionDetail->headline)}}</div>
            <div class="article-inputs-title">Thesis Statement</div>
            <div class="article-inputs-input">{{$outlines['data'][0]->narrative}}</div>
            <div class="article-inputs-title">Revision Notes</div>
            <div class="article-inputs-input no-bottom-margin">{!! Str::markdown(trim(isset($outline->revision_note) && !empty($outline->revision_note) ? $outline->revision_note : 'No revision notes.')) !!}</div>
          </div>
        </div>
      </div>
    </div>
  </section>
@include('footer')