@section('page_title')
    {{ "Composer - Dashboard" }}
@endsection
@php
// Set no-cache headers
header('Cache-Control: no-cache, no-store, must-revalidate');
header('Pragma: no-cache');
header('Expires: 0');
@endphp
@include('header')

<section class="body-section">
    <x-transient-message />
    <div class="content-width-container split-view">
        @include('left-split-view')
      <div class="primary-content-container">
        @php
            $isPricingPermission = auth()->user()->can('3-up-pricing-page') || auth()->user()->can('single-pricing-page');
        @endphp
        @if(auth()->user()->roles[0]->id == 3 && $isPricingPermission && !hasActiveSubscription(Auth::user()->stripe_id))
            <div class="alert-warning">
                <div class="cta-alert-container">
                    <div class="alert-text">Click here to upgrade to one of our paid plans.</div>
                    <div class="alert-cta">
                                                @if(Auth::user()->stripe_plan_id !== null && auth()->user()->can('single-pricing-page'))
                            <a href="/composer/single-pricing" class="button button-shadow purple-gradient w-inline-block">
                        @elseif(Auth::user()->stripe_plan_id == null && auth()->user()->can('single-pricing-page'))
                                                        <a href="#" onclick="alert('Please speak with your sales representative to begin using one of our affordable plans!')" class="button button-shadow purple-gradient w-inline-block">
                        @elseif(auth()->user()->can('3-up-pricing-page'))
                            <a href="/composer/pricing" class="button button-shadow purple-gradient w-inline-block">
                        @endif
                            <div class="button-label white-text">{{$buttonLabel}}</div>
                            <div class="button-icon-container"><img src="{{asset('images/arrow-up-white.svg')}}" loading="lazy" alt="" class="image-2"></div>
                        </a>
                    </div>
                </div>
            </div>
        @endif

        {{-- Check that if article limit has reached or not --}}
        @if(checkIfArticleLimitReached())
            @if(auth()->user()->can('3-up-pricing-page') && auth()->user()->stripe_id !== null && !empty($targetKeywords['data'] && is_array($targetKeywords['data']) && count($targetKeywords['data']) == 1))
                <div class="alert-error">
                Looks like you've enjoyed your free article! Ready for more? <a
                    class="plan-change-request-click-link"
                    href="/composer/pricing"
                    style="color: #A66;"
                    >
                    Click here</a> to upgrade your account and keep reading.
                </div>
            {{-- Single Pricing flow for Direct Sales users --}}
            @elseif(auth()->user()->can('single-pricing-page') && auth()->user()->stripe_plan_id !== null && !empty($targetKeywords['data']) && is_array($targetKeywords['data']) && count($targetKeywords['data']) == 1)
                {{-- If user is logged in and plan id is not assigned --}}
                <div class="alert-error">
                Looks like you've enjoyed your free article! Ready for more? <a
                class="plan-change-request-click-link"
                href="/composer/single-pricing"
                style="color: #A66;"
                >
                Click here</a> to upgrade your account and keep reading.
                </div>
            @elseif(auth()->user()->can('plan-change-request-container'))
                <div class="alert-error">
                You have reached your limit for articles this month.
                <span
                    id="plan-change-request-link"
                    class="plan-change-request-click-link"
                    onclick="document.getElementById('plan-change-request-box').style.display='block'">
                    Click here</span>
                if you would like to make changes to your plan.
                </div>
            @elseif(auth()->user()->can('3-up-pricing-page'))
                <div class="alert-error">
                    You have reached your limit for articles this month.
                    <a
                        class="plan-change-request-click-link"
                        href="/composer/pricing">
                        Click here
                    </a>
                    if you would like to make changes to your plan.
                </div>
            @endif
        @endif
        <div class="title-block">
          <div class="title-block-title">
            <div>{{ auth()->user()->roles[0]->id === 3 ? 'My' : 'All'}} Articles</div>
            <div class="title-block-description">Click on an article component to make a revision to a specific input, then continue through the flow to regenerate your article.<br></div>
          </div>
          <div class="title-block-controls">
            @if(auth()->user()->roles[0]->id === 3)
                <div class="subscription-usage">
                @php
                    $articlesCount = checkIfArticleLimitReached('isArticleCount');
                @endphp
                    You have used <b>{{$articlesCount['usedArticles']}}</b> of <b>{{$articlesCount['totalArticles']}}</b> articles.
                </div>
            @endif
          </div>
        </div>
        @if(!isset($targetKeywords['data']) || empty($targetKeywords['data']))
            <div class="primary-content-after-title-block">
                <div class="inline-message">
                    <div>Oh no! It looks like you haven't written any articles yet.</div>
                </div>
            </div>
        @endif
        <div class="table-grid-scroller">
          <div class="w-layout-grid table-grid {{auth()->user()->roles[0]->id !== 3 ? 'dashboard-grid' : 'dashboard-7-column-grid'}}">
            @php
                // Remove the last element from the array
                array_pop($tableColumns);
                // array_shift($tableColumns);
            @endphp

            @if(isset($targetKeywords) && !empty($targetKeywords))
                @if(isset($targetKeywords['data']) && !empty($targetKeywords['data']))
                    @foreach($tableColumns as $key => $column)
                        <div id="w-node-cd62ec5e-bd7a-02ee-11c7-e4c12a33130a-1efa3617" class="table-grid-title">
                            <div>{{$column}}</div>
                        </div>
                    @endforeach

                    <div class="grid-action-container"></div>
                    @foreach($targetKeywords['data'] as $keyword)
                        @php
                            $approvedContent = getApprovedArticleComponentsByArticleSessionID($keyword->session_id);
                        @endphp
                        @if(auth()->user()->roles[0]->id !== 3)
                            <div id="w-node-dab1547c-217b-6884-da8c-e88bdab00325-1efa3617" class="table-grid-value">
                                <div class="grid-text-center">#{{$keyword->client_id}}</div>
                            </div>
                            <div id="w-node-dab1547c-217b-6884-da8c-e88bdab00325-1efa3617" class="table-grid-value">
                                <div class="grid-text-center">{{$keyword?->email}}</div>
                            </div>
                        @endif
                        <div id="w-node-dab1547c-217b-6884-da8c-e88bdab00325-1efa3617" class="table-grid-value">
                            @php
                                // Convert the string to a Carbon instance
                                $carbonDate = \Carbon\Carbon::parse($keyword->dt);
        
                                // Format the date as mm/dd/yyyy
                                $formattedDate = $carbonDate->format('n/j/y');
                            @endphp
                            <div class="grid-text-center">{{$formattedDate}}</div>
                        </div>
                        <div id="w-node-f8db3852-0eb7-95fe-1102-8b6a87e8cf3f-1efa3617" class="table-grid-value headline">
                            @if(isset($approvedContent['headline']) && !empty($approvedContent['headline']))
                                <div onclick="location.href='/composer/headline/{{$keyword->session_id}}'" style="cursor: pointer;">{{removeQuotesFromString($keyword->headline)}}</div>
                            @endif
                        </div>
                        <div id="w-node-_68f03e5a-0278-32c7-2d21-966edcb4a632-1efa3617" class="table-grid-value">
                            <div class="grid-text-center">{{$keyword->target_keyword}}</div>
                        </div>
                        <div id="w-node-_618fde29-ab5a-266a-fefd-59f401890b55-1efa3617" class="grid-check-container">
                            @if(isset($approvedContent['narrative']) && !empty($approvedContent['narrative']))
                                <a href="/composer/perspective/{{$keyword->session_id}}">
                                <img src="{{asset('images/purple-check.svg')}}" loading="lazy" alt="" class="grid-check-img">
                                </a>
                            @else
                                <img src="{{asset('images/unfinished-grey.svg')}}" loading="lazy" alt="" class="grid-check-img">
                            @endif
                        </div>
                        <div id="w-node-a8e8d8ac-6441-512a-ab27-c9e337a5ed04-1efa3617" class="grid-check-container">
                            @if(isset($approvedContent['outline']) && !empty($approvedContent['outline']))
                                <a href="/composer/outline/{{$keyword->session_id}}">
                                <img src="{{asset('images/purple-check.svg')}}" loading="lazy" alt="" class="grid-check-img">
                                </a>
                            @else
                                <img src="{{asset('images/unfinished-grey.svg')}}" loading="lazy" alt="" class="grid-check-img">
                            @endif
                        </div>
                        <div id="w-node-_2f439e03-d23b-a314-bed3-44f331eb2335-1efa3617" class="grid-check-container">
                            @if(isset($approvedContent['article_text']) && !empty($approvedContent['article_text']))
                                <a href="/composer/final-draft/{{$keyword->session_id}}">
                                <img src="{{asset('images/purple-check.svg')}}" loading="lazy" alt="" class="grid-check-img">
                                </a>
                            @else
                                <img src="{{asset('images/unfinished-grey.svg')}}" loading="lazy" alt="" class="grid-check-img">
                            @endif
                        </div>
                        @can('access-social-post-dropdown')
                            <div class="grid-action-container">
                                @if (auth()->user()->roles[0]->id == 3)
                                    <div class="form-select w-form action-w-form">
                                        <button type="button" class="btn btn-primary create-social-post-btn" data-article-id="{{ $keyword->session_id }}">Create Social Post</button>
                                    </div>
                                @endif
                                @can('delete-articles-from-dashboard')
                                    <div class="form-select w-form">
                                        <button type="button" class="btn btn-primary delete-article-btn" data-article-id="{{ $keyword->session_id }}" data-article-available="{{ $keyword->isArticleAvailable }}">Delete</button>
                                    </div>
                                @endcan
                                <input type="hidden" name="_token" id="_token" value="{{csrf_token()}}">
                            </div>
                        @endcan
                    @endforeach
                @endif
            @endif
          </div>
        </div>
        @if(!empty($targetKeywords['to']))
            <div class="pagination-container">
                @foreach ($targetKeywords['links'] as $link)
                  <a href="{{!empty($link['url']) ? $link['url'] : '#' }}" class="pagination-elipse{{$link['active'] ? ' pagination-active' : ''}}">{{html_entity_decode($link['label'])}}</a>
                @endforeach
            </div>
        @endif
      </div>
    </div>
</section>

<!-- Model code for request plan upgrade -->
<div id="plan-change-request-box" class="modal">
    <form class="modal-content" action="#">
      <div class="container">
        <span onclick="document.getElementById('plan-change-request-box').style.display='none'" class="close" title="Close">x</span>
        <p>To request a change to your account, please fill out the form below.</p>
  
        <div class="clearfix">
          <select class="client-select-menui w-select w-100" id="plan-for-upgrade">
            @if(count($availablePlans) > 0)
              @foreach($availablePlans as $plan)
                  <option class="menu-option" value="{{$plan['price_id']}}">{{$plan['name']}}</option>
              @endforeach
            @endif
          </select>
          <input type="hidden" id="userId" value="{{auth()->user()->id}}" />
          <button type="button" id="btn-submit-plan-change" class="button white-text purple w-100 mt-20 justify-center">Submit</button>
          <button type="button" id="btn-submit-plan-change-loader" style="display: none;" class="button white-text purple w-100 mt-20 justify-center"><img src="{{asset('images/loader.gif')}}" width="20" alt=""></button>
        </div>
      </div>
    </form>
</div>
<script>
    // Get the modal
    var modal = document.getElementById('plan-change-request-box');
  
    // When the user clicks anywhere outside of the modal, close it
    window.onclick = function(event) {
      if (event.target == modal) {
        modal.style.display = "none";
      }
    }
</script>
  
@if(session('isEmailActivated'))
    <script>
        var emailActivate = {
            'event': 'email_activated',
            'isEmailActivated': true,
        };
        dataLayer.push(emailActivate);
        // pushDataLayer(emailActivate);
    </script>
    @php
    session()->forget('isEmailActivated');
    @endphp
@endif
  
@php
    $planName = session('plan_name');
@endphp
@if($planName)
    <script>
        var planName = {
            'event': 'plan_purchased',
            'plan_name': '{{$planName}}',
        };
        dataLayer.push(planName);
    </script>
    @php
        session()->forget('plan_name');
    @endphp
@endif

@include('footer')