@include('header') 
@php
    $timezone = auth()->user()->timezone ?? 'UTC';
@endphp
<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>Sources</div>
            <div class="title-block-description">We will use this data to personalize your articles so they incorporate details about your company, products and services, and target audience into your content.<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="url-details">
                @if(!isset($records[0]))
                    <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 url-details-grid">
                        @if(!empty($records))
                            @foreach ($records as $record)
                                <div class="company-profile-row">
                                    <div class="company-urls-table-grid">
                                        <div class="table-grid-row-value">
                                            <input type="checkbox" class="company-profile-checkbox record-checkbox" name="record_ids[]" value="{{ $record->id }}" {{ $record->is_checked ? 'checked' : '' }}>
                                        </div>
                                        <div id="w-node-dab1547c-217b-6884-da8c-e88bdab00325-1efa3617" class="table-grid-value">
                                            <div>{{isset($record->url) ? $record->url : $record->file_name }}</div>
                                        </div>
                                    </div>
                                    <div id="w-node-f8db3852-0eb7-95fe-1102-8b6a87e8cf3f-1efa3617" class="table-grid-date-value">
                                    {{-- <div>{{$record->created_at}}</div> --}}
                                    <div>{{ \Carbon\Carbon::parse($record->created_at)->setTimezone($timezone)->format('m/d/y (g:i A)') }}</div>
                                    </div>
                                    <div id="w-node-_2f439e03-d23b-a314-bed3-44f331eb2335-1efa3617" class="table-grid-action-btn">
                                        <form method="POST" action="{{ route('record.delete') }}" onsubmit="confirmDeletion(event)">
                                            @csrf
                                            <input type="hidden" name="id" id="id" value="{{$record->id}}">
                                            <button type="submit" class="btn btn-link" data-id="{{ $record->id }}" style="margin-right: 15px;">Delete</button>
                                        </form>
                                    </div>
                                </div>
                            @endforeach
                        @endif
                    </div>
                </div>
                @if(isset($records[0]))
                    <div class="counter-display">
                        <span id="selectedCount">0</span> of 10 selected
                    </div>
                @endif
            </div>
            {{ csrf_field() }}
            <input type="hidden" id="_token" value="{{ csrf_token() }}" />
            <input type="hidden" id="articleSessionId" value="{{$articleSessionId}}" />
            <input type="hidden" id="clientId" value="{{$clientId}}" />

            @if(auth()->user()->user_role === 3)
                <div class="canvas-submit-container right">
                <a href="#" class="button button-shadow purple-gradient w-inline-block" id="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>
    // Function to handle confirmation dialog
    function confirmDeletion(event) {
        if (!confirm("Are you sure you want to delete this record?")) {
            event.preventDefault();
        }
    }
</script>
<script>
    $('document').ready(function () {
        const checkboxes = document.querySelectorAll('.record-checkbox');
        const selectedCountDisplay = document.getElementById('selectedCount');
        let selectedCount = 0;
        const maxSelection = 10;

        // Function to update the selected count display
        function updateCount() {
            selectedCountDisplay.textContent = selectedCount;
        }

        // Handle checkbox clicks
        checkboxes.forEach(checkbox => {
            // Update the count based on initial state
            if (checkbox.checked) {
                selectedCount++;
            }

            checkbox.addEventListener('change', function () {
                if (this.checked) {
                    if (selectedCount < maxSelection) {
                        selectedCount++;
                    } else {
                        this.checked = false;
                        // alert(`You can only select up to ${maxSelection} URLs.`);
                    }
                } else {
                    selectedCount--;
                }
                updateCount();

                // Send AJAX request to update the database
                const recordId = this.value;
                const isChecked = this.checked ? 1 : 0;
                const data = {
                    recordId,
                    isChecked,
                    _token: $("#_token").val()
                };

                $.ajax({
                    type: 'POST',
                    dataType: "json",
                    url: '/composer/update-selected-url',
                    data,
                    success: function (data) {
                        if (data.success) {
                            location.href = data.redirectUrl;
                        } else {
                            $('#loader-overlay').hide();
                        }
                    },
                    error: function () {
                        $('#loader-overlay').hide();
                    }
                });
            });
        });

        // Initially update the count
        updateCount();
    });
</script>
@include('footer')