@include('header') 

<section class="body-section">
  @if (session('success'))
      <div class="alert alert-success">
          {{ session('success') }}
      </div>
  @endif
  @if (session('error'))
      <div class="col-sm-12">
          <div class="alert alert-error" role="alert">
              {{ session('error') }}
          </div>
      </div>
  @endif
    <div class="max-w-content">
      <div class="body-outer-wrapper">
        @cannot('hide-ai-topic-search-container')
          <div class="body-left-panel topic-clusters">
            <h3 class="left-panel-title">Ask AI for Ideas</h3>
            <div class="left-panel-description">Start with a topic, phrase, or keyword and Composer will brainstorm new topics to add.</div>
            <div class="tc-custom-form w-form">
                  <input type="hidden" name="_token" id="_token" value="{{csrf_token()}}">
                  <input class="w-input" style='background-image: url("{{ asset('images/ai_stars.svg')}}")'maxlength="256" name="prompt" data-name="Name" placeholder="Ask AI for ideas" type="text" id="keyword-input" required>
                  <span class="invalid-feedback" id="url-error-message" role="alert" style="display: none">
                    <strong>Please enter any text</strong>
                  </span>
                  <button type="submit" id="open-ai-custom-keywords" class="button button-shadow purple-gradient w-inline-block">
                      <div class="button-label white-text">Research</div>
                  </button>
              <div class="w-form-done">
                <div>Thank you! Your submission has been received!</div>
              </div>
              <div class="w-form-fail">
                <div>Oops! Something went wrong while submitting the form.</div>
              </div>
            </div>
          </div>
        @endcannot
        <div class="topic-clusters-right-panel">
          <div style='display:flex;'>
            <div class="tc-topics-left-parent">
              <div onclick="window.location.href='/composer/topic-clusters'" class="tc-topics-back"><img src="{{asset('images/left-arrow-black.svg')}}" loading="lazy" alt="" class="tc-back-icon">
                <a href="/composer/topic-clusters" class="tc-topics-back-text">Back to content ideas</a>
              </div>
            </div>
            <div class="body-main-title-block">
              <h1 class="body-main-title"><strong>Favorite Topics</strong></h1>
              <div class="body-main-description">Choose from one of the topics below and start generating relevant headline ideas.</div>
            </div>
          </div>
          <div class="w-layout-grid tc-topics-list-grid">
          @if(isset($keywords['data']) && count($keywords['data']) > 0)
            @php
            $keywordsCount = count($keywords['data']);
            $numberOfLists = ceil($keywordsCount / 10); // Calculate the number of <ul> lists needed
            $keywordsIndex = 0; // Initialize keyword index
            @endphp

            @for ($i = 0; $i < $numberOfLists; $i++)
                <ul role="list" class="tc-topics-list w-list-unstyled">
                    @for ($j = 0; $j < 10 && $keywordsIndex < $keywordsCount; $j++)
                        <div id="topic-item-{{$keywords['data'][$keywordsIndex]['id']}}" class="tc-topic-items">
                          <li>
                            <input type="hidden" id="base_url" value="{{ URL::to('/')}}">
                            <a href="#" onclick="headingRedirection({{$keywords['data'][$keywordsIndex]['id']}}, 'promptheadlines', true, {{ auth()->user()->user_role}})">{{strtolower($keywords['data'][$keywordsIndex]['keyword'])}}</a>
                            <img onclick="topicClusterActions({{$keywords['data'][$keywordsIndex]['id']}}, '{{$keywords['data'][$keywordsIndex]['keyword']}}', '{{csrf_token()}}', 'delete')" src="{{asset('images/delete-box.svg')}}" width="24" title="Delete" id="delete-icon" class="topic-icon hide" />
                            <img onclick="topicClusterActions({{$keywords['data'][$keywordsIndex]['id']}}, '{{$keywords['data'][$keywordsIndex]['keyword']}}','{{csrf_token()}}', 'favourite', {{$keywords['data'][$keywordsIndex]['is_custom_keyword']}})" src="{{$keywords['data'][$keywordsIndex]['is_favourite'] ? asset('images/favourite-filled.svg'):asset('images/favourite-icon.svg')}}" width="24" height="29.45" title="{{$keywords['data'][$keywordsIndex]['is_favourite'] ? 'Remove from favorite':'Add to favorite'}}" id="fav-icon" class="topic-icon hide fav-{{$keywords['data'][$keywordsIndex]['id']}}" />
                          </li>
                        </div>
                        @php
                            $keywordsIndex++;
                        @endphp
                    @endfor
                </ul>
            @endfor
          @else
          <div class="tc-topics-right-parent">
            <div class="body-main-title-block">
              <h1 class="body-main-title"><strong>No record found!</strong></h1>
            </div>
          </div>
        @endif
          </div>

          <div class="pagination-wrapper">
            @if(!empty($keywords['to']))
              @foreach ($keywords['links'] as $link)
                  <div class="pagination-bubble {{$link['active'] ? 'active' : ''}}">
                    <a class="pagination-number {{$link['active'] ? 'white' : ''}}" href="{{!empty($link['url']) ? $link['url'] : '#' }}" tabindex="-1">{{html_entity_decode($link['label'])}}</a>
                  </div>
              @endforeach
            @endif
          </div>
        </div>
      </div>
    </div>
  </section>

  <div class="background-screen" style="display: none;">
    <form id="custom-topics-form" action="{{ route('saveCustomTopics') }}" method="POST">
      @csrf
      <div class="tc-custom-pop-parent">
        <div class="tc-custom-links">
          <div class="tc-custom-pop-title"></div>
          <div class="checkbox-links"><a href="#" id="check-all">Check All</a> / <a href="#" id="uncheck-all">Uncheck All</a></div>
        </div>
        <div class="w-layout-grid tc-custom-pop-grid">
            <ul id="keyword-list" role="list" class="list w-list-unstyled"></ul>
            <ul id="keyword-list-1" role="list" class="list w-list-unstyled"></ul>
            <ul id="keyword-list-2" role="list" class="list w-list-unstyled"></ul>
        </div>
        <div class="tc-popup-cta-wrapper">
          <button type="submit" class="button button-shadow purple-gradient w-inline-block">
            <div class="button-label white-text">Add Topics</div>
            <div class="button-icon-container"><img src="{{asset('images/arrow-up-white.svg')}}" loading="lazy" alt="" class="image-2"></div>
          </button>
        </div>
      </div>
    </form>
  </div>

@include('footer')