@section('page_title')
    {{ "Composer - Summarize Contents" }}
@endsection
@include('header')

@php
    $topicClusterCacheKey = Cache::get('topic-cluster-job-running-' . auth()->user()->companies[0]->client_id, false);
@endphp

<section class="body-section">
    <x-transient-message />
    <div class="content-width-container split-view">
        @include('left-split-view')
        <div class="primary-content-container">
            <div class="split-container">
                <div class="my-account-form-block w-form">
                    <form method="POST" enctype="multipart/form-data" action="{{route('scrape-content')}}" id="scrapeForm">
                        @csrf
                        <div class="body-outer-wrapper">
                            <div class="body-main-title-block">
                                <h1 class="body-main-title">Enter URL</h1>
                                <div class="body-main-description">To summarize a website page enter a URL and click &quot;Summarize Content&quot;.</div>
                            </div>
                        </div>
                        <div style="display: inline-block;">
                        <input type="hidden" id="cacheKey" value="{{ $cacheKey }}">
                        <input type="hidden" id="topicClusterCacheKey" value="{{ $topicClusterCacheKey }}">
                        <input type="hidden" id="clientId" value="{{ auth()->user()->companies[0]->client_id }}">
                        <input type="text" class="my-website-url" placeholder="https://" id="url-input" name="url">
                            @error('url')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                            <span class="invalid-feedback" id="invalid-feedback-message-container" style="display: none;" role="alert">
                                <strong id="invalid-feedback-msg"></strong>
                            </span>
                            <div class="toggle-outer-wrapper" id="article-word-toggle" >
                                <div class="toggle-switch-container" onclick="toggleSwitch('web')">
                                    <div id="toggle-switch-web" class="toggle-switch active"></div>
                                </div>
                                <div class="toggle-right-label">
                                    <div class="toggle-label-all-pages">All Pages</div>
                                </div>
                                <input type="hidden" id="toggleUrl" name="toggleUrl" value=0>
                            </div>
                        </div>
                        <div class="body-outer-wrapper">
                            <div class="body-main-title-block">
                                <h1 class="body-main-title">Upload PDF <span class="max-size-text">(Max: 2MB)</span></h1>
                                <div class="body-main-description">To summarize a content from PDF upload file and click &quot;Summarize Content&quot;.</div>
                            </div>
                        </div>
                        <div style="display: inline-block;">
                            <input type="file" class="my-website-url" id="upload-pdf" name="pdf" accept="application/pdf"/>
                            @error('pdf')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                            <span class="invalid-feedback" id="url-error-message" role="alert" style="display: none">
                                <strong>Please enter a valid URL</strong>
                            </span>
                        </div>
                        <div class="cluster-topic-checkbox-wrapper">
                            <label>
                                <input type="checkbox" name="is-update-cluster-topic" id="is-update-cluster-topic" class="cluster-topic-checkbox" checked />
                                Update Topic Clusters
                            </label>
                        </div>
                        <div class="company-profile-button-container">
                            <button type="button" id="btn-train-composer" class="button button-shadow purple-gradient w-inline-block" disabled>
                                <div class="button-label white-text">Train Composer</div>
                                <div class="button-icon-container">
                                    <img src="{{asset('images/right-arrow-white.svg')}}" loading="lazy" alt="">
                                </div>
                            </button>
                        </div>
                    </form>
                </div>
                @isset($records)
                    <div class="url-details">
                        <div class="web-scrapper-progress-bar" id="web-scrapper-progress-container">
                            <div id="progress-message">
                                Scraping in Progress:
                                <span id="scrapped-urls-count">0</span> of
                                <span id="total-urls-count">10</span> URLs scraped
                                <span id="loader-icon" class="loader-icon"></span>
                            </div>
                            <div class="linear-progress-bar">
                                <div class="progress" id="progress-bar"></div>
                            </div>
                            <div id="progress-percentage" class="progress-percentage">0%</div>
                        </div>
                        <div class="body-outer-wrapper">
                            <div class="body-main-title-block">
                                <h1 class="body-main-title">Data Sources</h1>
                                <div class="body-main-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</div>
                            </div>
                        </div>
                        @include('summary.scrapped-record-list')
                    </div>
                @endisset
            </div>
            <!-- My Company View Container -->
            @can('view-company-profile')
                @cannot('hide-company-profile')
                    @include('account.about')
                @endcannot
            @endcan
            <!-- My Company View Container END -->
        </div>
    </div>
</section>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        const urlInput = document.getElementById('url-input');
        const pdfInput = document.getElementById('upload-pdf');
        const trainButton = document.getElementById('btn-train-composer');
        
        // Function to check if the URL or PDF is entered/uploaded
        function validateForm() {
            if (urlInput.value.trim() !== "" || pdfInput.files.length > 0) {
                trainButton.disabled = false;
            } else {
                trainButton.disabled = true;
            }
        }

        // Attach event listeners to validate the form whenever the URL or PDF changes
        urlInput.addEventListener('input', validateForm);
        pdfInput.addEventListener('change', validateForm);

        // Initial validation in case there is already a URL or PDF uploaded
        validateForm();
    });
</script>
<script>
    $(document).ready(function() {
        const form = $('#scrapeForm');
        const loader = $('#loader-overlay');

        form.on('submit', function() {
            loader.show();

            // Disable the submit button to prevent multiple submissions
            form.find('button[type="submit"]').prop('disabled', true);
        });
    });

    document.getElementById('url-input').addEventListener('input', function() {
        if (this.value) {
            document.getElementById('upload-pdf').value = ''; // Clear PDF input
        }
    });

    document.getElementById('upload-pdf').addEventListener('change', function() {
        if (this.files.length > 0) {
            document.getElementById('url-input').value = ''; // Clear URL input
        }
    });
</script>
<script>
    // Function to handle confirmation dialog
    function confirmDeletion(event) {
        if (!confirm("Are you sure you want to delete this record?")) {
            event.preventDefault();
        }
    }
</script>
<script src="{{ asset('js/composer-new-flow.js') }}"></script>
<script type="module">
    @auth