@section('page_title')
    {{ "Composer - Social Post" }}
@endsection
@include('header')
@php
  // Set no-cache headers
  header('Cache-Control: no-cache, no-store, must-revalidate');
  header('Pragma: no-cache');
  header('Expires: 0');
  // If no selected image is found in DB, use the first image as default
    $defaultSelectedImage = !empty($selectedImage) ? $selectedImage : (count($images) > 0 ? $images[0] : '');
@endphp
<section class="body-section">
  @php
      $socialPostData = !empty($socialPostData['data']) ? $socialPostData['data'][0] : '';
  @endphp
  <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">
              <div class="body-main-head-container">
                <div class="body-main-title-block">
                  <h1 class="body-main-title">Social Post Canvas</h1>
                  <div class="body-main-description">Choose from the revision notes below or provide custom revisions in the textbox.</div>
                </div>
              </div>
              @isset($approvedHeadline)
                <div class="social-post-composer-article-container">
                  @php
                    $originalDateString = $socialPostData->created_at;
                    // Parse the original date string using Carbon
                    $formattedDate = Carbon\Carbon::parse($originalDateString)->format('n/j/y');
                  @endphp
                  <div class="sp-composer-edit"><img class="curser-pointer" onclick="handleClick('{{ $isArticle }}', '{{ $articleSessionId }}')" src="{{asset('images/blk-pencil-icon.svg')}}" loading="lazy" alt=""></div>
                  <div class="w-layout-grid spcial-post-composer-grid">
                    <div id="w-node-_39704094-a3f6-ba84-6581-e1952ff322e0-d6bc3d46" class="sp-composer-grid-title">
                      <div>Date Generated</div>
                    </div>
                    <div id="w-node-_04660269-e417-1571-5cf6-a40fea73f342-d6bc3d46" class="sp-composer-grid-title">
                      <div>Headline</div>
                    </div>
                    <div id="w-node-_04c74cba-3a00-83bc-716f-af9a190ac487-d6bc3d46" class="sp-composer-grid-title">
                      <div>Status</div>
                    </div>
                    <div id="w-node-_3c00d0d8-5db3-2ffb-0c4b-cf92c1adc28b-d6bc3d46" class="sp-composer-grid-content">
                      <div>{{$formattedDate}}</div>
                    </div>
                    <div id="w-node-a6409018-cf05-2998-6ed2-0aa2c63093c8-d6bc3d46" class="sp-composer-grid-content">
                      <div>{{$approvedHeadline}}</div>
                    </div>
                    <div id="w-node-_663f9463-63bc-0696-1768-266542791f2d-d6bc3d46" class="sp-composer-grid-content">
                      <div>{{($isArticlePublished == 1) ? 'Published' : 'Not Published'}}</div>
                    </div>
                  </div>
                </div>
              @endisset
              <div class="revision-pill-wrapper">
                <a href="#" class="revision-note-pill" data-text="Improve clarity throughout the text">Improve Clarity</a>
                <a href="#" class="revision-note-pill" data-text="Enhance readability of the content">Enhance Readability</a>
                <a href="#" class="revision-note-pill" data-text="Write the content in the first person perspective">Write in First Person</a>
                <a href="#" class="revision-note-pill" data-text="Write the content in the second person perspective">Write in Second Person</a>
                <a href="#" class="revision-note-pill" data-text="Write the content in the third person perspective">Write in Third Person</a>
                <a href="#" class="revision-note-pill" data-text="Add a call-to-action to engage readers">Add Engagement CTA</a>
                <a href="#" class="revision-note-pill" data-text="Refine the content for better quality">Refine Post</a>
                <a href="#" class="revision-note-pill" data-text="Simplify the content for easier understanding">Simplify Post</a>
                <a href="#" class="revision-note-pill" data-text="Remove all emojis from the content">Remove Emojis</a>
                <a href="#" class="revision-note-pill" data-text="Add appropriate emojis to the content">Add Emojis</a>
                <a href="#" class="revision-note-pill" data-text="Add a word count to the content">Add Word Count</a>
                <a href="#" class="revision-note-pill" data-text="Reduce the word count for conciseness">Reduce Word Count</a>
                <a href="#" class="revision-note-pill" data-text="Translate the content to Spanish">Translate to Spanish</a>
                <a href="#" class="revision-note-pill" data-text="Translate the content to French">Translate to French</a>
                <a href="#" class="revision-note-pill" data-text="Translate the content to Italian">Translate to Italian</a>
                <a href="#" class="revision-note-pill" data-text="Translate the content to Portuguese">Translate to Portuguese</a>
                <a href="#" class="revision-note-pill" data-text="Translate the content to German">Translate to German</a>
              </div>
              <div class="social-post-platform-tab-wrapper">
                <input type="hidden" id="base_url" value="{{ URL::to('/')}}">
                <a href="#" class="social-post-tabs center-text button {{$socialPostData->request_for == 'Facebook' ? 'button-shadow orange-gradiant' : 'button-grey'}}  w-inline-block">
                  <div class="social-post-icon-container">
                    <i class="fa-brands fa-facebook fa-lg social-post-icons" style="color: {{$socialPostData->request_for == 'Facebook' ? 'rgb(255, 255, 255)' : 'rgb(0, 0, 0)'}}" data-value="Facebook"></i>
                  </div>
                </a>
                <a href="#" class="social-post-tabs center-text button {{$socialPostData->request_for == 'LinkedIn' ? 'button-shadow orange-gradiant' : 'button-grey'}} w-inline-block">
                  <div class="social-post-icon-container">
                    <i class="fa-brands fa-linkedin fa-lg social-post-icons" style="color: {{$socialPostData->request_for == 'LinkedIn' ? 'rgb(255, 255, 255)' : 'rgb(0, 0, 0)'}}" data-value="LinkedIn"></i>
                  </div>
                </a>
                <a href="#" class="social-post-tabs center-text button {{$socialPostData->request_for == 'X' ? 'button-shadow orange-gradiant' : 'button-grey'}} w-inline-block" id="btn-x-post">
                  <div class="social-post-icon-container">
                    <i class="fa-brands fa-x-twitter fa-lg social-post-icons" style="color: {{$socialPostData->request_for == 'X' ? 'rgb(255, 255, 255)' : 'rgb(0, 0, 0)'}}" data-value="X"></i>
                  </div>
                </a>
                <a href="#" class="social-post-tabs center-text button {{$socialPostData->request_for == 'Instagram' ? 'button-shadow orange-gradiant' : 'button-grey'}} w-inline-block">
                  <div class="social-post-icon-container">
                    <i class="fa-brands fa-square-instagram fa-lg social-post-icons" style="color: {{$socialPostData->request_for == 'Instagram' ? 'rgb(255, 255, 255)' : 'rgb(0, 0, 0)'}}" data-value="Instagram"></i>
                  </div>
                </a>
                <a href="#" class="social-post-tabs center-text button {{$socialPostData->request_for == 'Google Business' ? 'button-shadow orange-gradiant' : 'button-grey'}} w-inline-block">
                  <div class="social-post-icon-container">
                    <i class="fa-brands fa-google fa-lg social-post-icons" style="color: {{$socialPostData->request_for == 'Google Business' ? 'rgb(255, 255, 255)' : 'rgb(0, 0, 0)'}}" data-value="Google Business"></i>
                  </div>
                </a>
              </div>
              <div class="revision-select-form w-form">
                <form action="#" id="wf-form-revision-note-select" name="wf-form-revision-note-select" data-name="revision-note-select" method="get" data-wf-page-id="6671cb2192fb1a85d6bc3d46" data-wf-element-id="657e7e32-6de6-7ccc-6bd2-79aef2ba4b04">
                    <textarea id="revision-notes" name="revision-note" maxlength="5000" data-name="revision-note" placeholder="e.g. Punch up the introduction and refine the conclusion for stronger impact." class="revision-textarea w-input"></textarea>
                </form>
                <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 class="gen-flow-cta-container">
                <div class="gen-flow-button-block">
                  <a href="#" class="button button-shadow purple-gradient w-inline-block" id="regenerate-social-post">
                    <div class="button-label white-text">Regenerate</div>
                    <div class="button-icon-container"><img src="{{asset('images/refresh.svg')}}" loading="lazy" alt="" class="image-2"></div>
                  </a>
                </div>
              </div>
            </div>
            <div class="preview-panel-container">
              <div class="body-main-head-container">
                <div class="body-main-controls-block">
                  <div class="social-post-control-grid">
                    <a href="#" class="center-text  button white-button w-inline-block" id="sp-preview-button">
                      <div class="button-label white-text dark-text">Preview</div>
                    </a>
                    <a href="#" onclick="initializeQuill('#social-post-textarea', {{json_encode($socialPostData->post)}})" class="center-text button white-button w-inline-block" id="sp-edit-button">
                      <div class="button-label white-text dark-text">Edit</div>
                    </a>
                    <a href="#" class="center-text button white-button w-inline-block" id="sp-update-button" style="display: none;">
                      <div class="button-label white-text dark-text">Update</div>
                    </a>
                    <a href="#" class="center-text button white-button w-inline-block" id="sp-cancel-button" style="display: none;">
                      <div class="button-label white-text dark-text">Cancel</div>
                    </a>
                    <a href="#" class="center-text button white-button w-inline-block" id="sp-copy-button">
                      <div class="button-label white-text dark-text">Copy</div>
                    </a>
                  </div>
                </div>
              </div>
              <div class="social-posts-copy-paste-block">
              <img src="{{ !empty($defaultSelectedImage) ? asset('storage/' . $defaultSelectedImage) : '' }}" class="selected-post-image">
                  {!! Str::markdown(trim($socialPostData->post)) !!}
              </div>
              <div class="w-form">
                <input type="hidden" id="base_url" value="{{ URL::to('/')}}">
                <input type="hidden" id="socialPostId" value="{{ $socialPostData->id}}">
                <input type="hidden" id="requestFor" value="{{ $socialPostData->request_for }}">
                <div id="social-post-textarea" class="editor textarea w-input outline-textarea" style="display: none;">
                  {!! Str::markdown(trim($socialPostData->post)) !!}
                </div>
                <input type="hidden" id="_token" value="{{ csrf_token() }}" />
                <input type="hidden" id="articleSessionId" value="{{$articleSessionId}}" />
                <input type="hidden" id="scrappedContentId" value="{{$scrappedContentId}}" />
                <input type="hidden" id="imagesCount" value="{{ count($images) }}" />
              </div>
              @isset($images[0])
                <div class="social-post-image-container">
                  @for ($index = 0; $index < count($firstThreeImages); $index++)
                    @php
                      $imagePath = $firstThreeImages[$index];
                      $imageUrl = asset('storage/' . $imagePath);
                      $radioId = 'radio' . ($index + 1);
                      $isChecked = ($selectedImage == $imagePath) || (empty($selectedImage) && $index == 0);
                    @endphp
                    <div id="w-node-{{$index}}" class="social-post-image-cell {{ $index === 2 ? 'third-image' : '' }}">
                        <div class="social-post-img-radio">
                            <div class="w-form">
                                <form action="#" id="email-form-{{$index + 2}}" name="email-form-{{$index + 2}}" method="get">
                                  <label class="w-radio">
                                      <input type="radio" id="{{$radioId}}" name="radioGroup" class="w-form-formradioinput w-radio-input"
                                            value="{{ $imageUrl }}" {{ $isChecked ? 'checked' : '' }}>
                                      <span class="radio-button-label-2 w-form-label" for="{{$radioId}}">Radio {{$index + 1}}</span>
                                  </label>
                                </form>
                            </div>
                        </div>
                        <img src="{{ $imageUrl }}" loading="lazy" height="75px" 
                            style="width: auto; cursor: pointer;" 
                            class="clickable-image"
                            data-image-url="{{ $imageUrl }}"
                            data-image-path="{{ $imagePath }}">
                    </div>
                  @endfor
                </div>
                <div class="social-post-img-action-container">
                  @isset($images[3])
                  <div class="gen-flow-cta-containers" id="btn-show-image-modal">
                    <div class="gen-flow-button-block">
                      <a href="#" class="button button-grey w-inline-block" id="showImageModalButton">
                        <div class="button-label white-text dark-text">Show More</div>
                      </a>
                    </div>
                  </div>
                  @endisset
                  <div class="gen-flow-cta-container" id="btn-download-img">
                    <div class="gen-flow-button-block">
                      <a href="#" class="button button-grey w-inline-block" id="downloadButton">
                        <div class="button-label white-text dark-text">Download Image</div>
                      </a>
                    </div>
                  </div>
                </div>
              @else
                <div class="alert-warning-message">
                  <div class="cta-alert-container">
                    <div class="alert-text">We couldn’t find any suitable images on this webpage.</div>
                  </div>
                </div>
              @endisset
              <div class="social-post-images-upload-container">
                  <div class="w-embed">
                      <form action="{{ route('upload-social-post-image') }}" method="POST" id="social-post-custom-image-form" enctype="multipart/form-data">
                          @csrf
                          <input type="hidden" id="client_id" name="client_id" value="{{ auth()->user()->companies[0]->client_id }}">
                          <input type="hidden" name="articleSessionId" id="articleSessionId" value="{{$articleSessionId}}" />
                          <input type="hidden" name="postId" id="postId" value="{{ $socialPostData->id}}">
                          <input type="hidden" name="scrappedContentId" id="scrappedContentId" value="{{$scrappedContentId}}" />
                          @include('custom-image-upload')
                      </form>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      {{-- </div> --}}
  </div>
</section>
<!-- Modal Structure -->
<div id="imagePreviewModal" class="social-posts-images-modal modal">
    <div class="modal-content">
        <div class="close">&times;</div>
        <div class="social-posts-images-container">
            <div class="w-layout-grid canvas-images-grid">
                @foreach ($images as $index => $imagePath)
                    @php
                        $imageUrl = asset('storage/' . $imagePath);
                        $isActive = ($selectedImage == $imagePath) ? 'active' : '';
                        // If no image is selected, make the first image active
                        if (empty($isActive) && $index === 0 && empty($selectedImage)) {
                            $isActive = 'active';
                        }
                    @endphp
                    <div class="canvas-social-posts-image-container {{ $isActive }}">
                        <img class="canvas-img" data-image-path="{{ $imagePath }}"
                             data-image-url="{{ $imageUrl }}" 
                             sizes="(max-width: 479px) 71vw, (max-width: 767px) 79vw, (max-width: 991px) 480px, 23vw" 
                             srcset="{{ $imageUrl }} 500w, {{ $imageUrl }} 792w" 
                             alt="Preview Image">
                    </div>
                @endforeach
            </div>
        </div>
    </div>
</div>
<div class="screen" style="display: none;">
  <div class="sp-preview-panel" id="li-preview-overlay" style="display: none;">
      <div class="sc-preview-close">
          <img src="{{asset('images/close.svg')}}" class="sc-overlay-close" loading="lazy" alt="">
      </div>
      <div class="sp-preview-header">
          <div class="user-info">
              <img src="{{ asset('images/userIcon.png') }}" loading="lazy" sizes="340px" srcset="{{ asset('images/userIcon.png') }} 500w, {{ asset('images/userIcon.png') }} 800w, {{ asset('images/userIcon.png') }} 1078w" alt="{{ auth()->user()->name }}">
              <div class="user-details">
                  <p class="user-name">{{ $userDetails['user_name'] }}</p>
                  <p class="company-name">{{ $userDetails['company_name'] }}</p>
              </div>
          </div>
      </div>
      <div class="sp-preview-body">
        <img src="{{ !empty($defaultSelectedImage) ? asset('storage/' . $defaultSelectedImage) : '' }}" class="selected-post-image"> 
        {!! Str::markdown(trim($socialPostData->post)) !!}
      </div>
      <div class="sp-preview-footer">
          <img src="{{asset('images/li-footer.png')}}" loading="lazy" sizes="340px" srcset="{{asset('images/li-footer-p-500.png')}} 500w, {{asset('images/li-footer-p-800.png')}} 800w, {{asset('images/li-footer-p-1080.png')}} 1080w, {{asset('images/li-footer.png')}} 1082w" alt="">
      </div>
  </div>
  <div class="sp-preview-panel" id="x-preview-overlay" style="display: none;">
      <div class="sc-preview-close">
          <img src="{{asset('images/close.svg')}}" class="sc-overlay-close" loading="lazy" alt="">
      </div>
      <div class="sp-preview-header">
          <div class="user-info">
              <img src="{{ asset('images/userIcon.png') }}" loading="lazy" sizes="340px" srcset="{{ asset('images/userIcon.png') }} 500w, {{ asset('images/userIcon.png') }} 800w, {{ asset('images/userIcon.png') }} 1078w" alt="{{ auth()->user()->name }}">
              <div class="user-details">
                  <p class="user-name">{{ auth()->user()->name }}</p>
                  <p class="company-name">{{ auth()->user()?->companies[0]?->company_name }}</p>
              </div>
          </div>
      </div>
      <div class="sp-preview-body">
        <img src="{{ !empty($defaultSelectedImage) ? asset('storage/' . $defaultSelectedImage) : '' }}" class="selected-post-image">  
        {!! Str::markdown(trim($socialPostData->post)) !!}
      </div>
      <div class="sp-preview-footer">
          <img src="{{asset('images/x-footer.png')}}" loading="lazy" sizes="340px" srcset="{{asset('images/x-footer-p-500.png')}} 500w, {{asset('images/x-footer-p-800.png')}} 800w, {{asset('images/x-footer.png')}} 1056w" alt="">
      </div>
  </div>
  <div class="sp-preview-panel" id="fb-preview-overlay" style="display: none;">
      <div class="sc-preview-close">
          <img src="{{asset('images/close.svg')}}" class="sc-overlay-close" loading="lazy" alt="">
      </div>
      <div class="sp-preview-header">
          <div class="user-info">
              <img src="{{ asset('images/userIcon.png') }}" loading="lazy" sizes="340px" srcset="{{ asset('images/userIcon.png') }} 500w, {{ asset('images/userIcon.png') }} 800w, {{ asset('images/userIcon.png') }} 1078w" alt="{{ auth()->user()->name }}">
              <div class="user-details">
                  <p class="user-name">{{ auth()->user()->name }}</p>
                  <p class="company-name">{{ auth()->user()?->companies[0]?->company_name }}</p>
              </div>
          </div>
      </div>
      <div class="sp-preview-body">
        <img src="{{ !empty($defaultSelectedImage) ? asset('storage/' . $defaultSelectedImage) : '' }}" class="selected-post-image">
        {!! Str::markdown(trim($socialPostData->post)) !!}
      </div>
      <div class="sp-preview-footer">
          <img src="{{asset('images/fb-footer.png')}}" loading="lazy" sizes="340px" srcset="{{asset('images/fb-footer-p-500.png')}} 500w, {{asset('images/fb-footer-p-800.png')}} 800w, {{asset('images/fb-footer.png')}} 986w" alt="">
      </div>
  </div>
  <div class="sp-preview-panel" id="insta-preview-overlay" style="display: none;">
      <div class="sc-preview-close">
          <img src="{{asset('images/close.svg')}}" class="sc-overlay-close" loading="lazy" alt="">
      </div>
      <div class="sp-preview-header">
          <div class="user-info">
              <img src="{{ asset('images/userIcon.png') }}" loading="lazy" sizes="340px" srcset="{{ asset('images/userIcon.png') }} 500w, {{ asset('images/userIcon.png') }} 800w, {{ asset('images/userIcon.png') }} 1078w" alt="{{ auth()->user()->name }}">
              <div class="user-details">
                  <p class="user-name">{{ auth()->user()->name }}</p>
                  <p class="company-name">{{ auth()->user()?->companies[0]?->company_name }}</p>
              </div>
          </div>
      </div>
      <div class="sp-preview-body">
        <img src="{{ !empty($defaultSelectedImage) ? asset('storage/' . $defaultSelectedImage) : '' }}" class="selected-post-image">
        {!! Str::markdown(trim($socialPostData->post)) !!}
      </div>
      <div class="sp-preview-footer">
          <img src="{{asset('images/in-footer.png')}}" loading="lazy" sizes="340px" srcset="{{asset('images/in-footer.png')}} 500w, {{asset('images/in-footer.png')}} 800w, {{asset('images/in-footer.png')}} 974w" alt="">
      </div>
  </div>
  <div class="sp-preview-panel" id="gb-preview-overlay" style="display: none;">
      <div class="sc-preview-close">
          <img src="{{asset('images/close.svg')}}" class="sc-overlay-close" loading="lazy" alt="">
      </div>
      <div class="sp-preview-header">
          <div class="user-info">
              <img src="{{ asset('images/userIcon.png') }}" loading="lazy" sizes="340px" srcset="{{ asset('images/userIcon.png') }} 500w, {{ asset('images/userIcon.png') }} 800w, {{ asset('images/userIcon.png') }} 1078w" alt="{{ auth()->user()->name }}">
              <div class="user-details">
                  <p class="user-name">{{ auth()->user()->name }}</p>
                  <p class="company-name">{{ auth()->user()?->companies[0]?->company_name }}</p>
              </div>
          </div>
      </div>
      <div class="sp-preview-body">
        <img src="{{ !empty($defaultSelectedImage) ? asset('storage/' . $defaultSelectedImage) : '' }}" class="selected-post-image">
        {!! Str::markdown(trim($socialPostData->post)) !!}
      </div>
      <div class="sp-preview-footer">
          <img src="{{asset('images/gb-footer.png')}}" loading="lazy" sizes="340px" srcset="{{asset('images/gb-footer.png')}} 500w, {{asset('images/gb-footer.png')}} 800w, {{asset('images/gb-footer.png')}} 1080w, {{asset('images/gb-footer.png')}} 1099w" alt="">
      </div>
  </div>
</div>
@include('footer')
<script>
  $(document).ready(function() {
    // Call all functions when the document is ready
    handleActiveButton();
    handleRadioButtonClick();
    handleRevisionNotes();
    handleCustomImageUpload();
    initializeImagePreview();
});

function handleClick(isArticle, articleSessionId) {
  if (isArticle == 1) {
      location.href = '/composer/final-draft/' + articleSessionId;
  } else {
      alert('Article is not available.');
  }
}

</script>