@push('styles_top')
    <!-- Include necessary CSS files for select2 and jQuery UI -->
    <link rel="stylesheet" href="/assets/default/vendors/select2/select2.min.css">
    <link href="/assets/default/vendors/sortable/jquery-ui.min.css" />
@endpush

<div class="container">
    <section>
        <!-- Section title for Course Highlights -->
        <div class="">
            <h2 class="section-title after-line">Course Highlights</h2>
        </div>

        <div class="row mt-2">
            <div class="col-12">
                <button id="generate-highlights" class="btn btn-primary mb-3">Generate Highlights</button>

                <!-- Accordion wrapper for highlights -->
                <div class="accordion-content-wrapper " id="highlightsAccordion" role="tablist"
                    aria-multiselectable="true">
                    <!-- Sortable list for highlights -->
                    <ul class="draggable-content-lists draggable-lists-highlights list-unstyled"
                        data-order-table="webinar_highlights" data-drag-class="draggable-lists-highlights"
                        data-order-table="webinar_highlights">
                        @for ($i = 1; $i < 9; $i++)
                            @php
                                // Retrieve the highlight for the current iteration
                                $highlight = $webinar->highlights->firstWhere('order', $i);
                            @endphp
                            <!-- Individual highlight item -->
                            <li class="d-flex flex-column py-3 my-3"
                                data-id="{{ !empty($highlight) ? $highlight->id : '' }}">
                                <!-- Top row: textarea and controls -->
                                <div class="d-flex align-items-center">
                                    <!-- Textarea for highlight text -->
                                    <div class="col-10 position-relative">
                                        <textarea name="highlight-{{ $i }}" class="form-control highlight-text resize-none" maxlength="132"
                                            rows="1" data-webinar-id="{{ $webinar->id }}" data-highlight-id="{{ $highlight ? $highlight->id : $i }}">{{ $highlight ? $highlight->text : '' }}</textarea>
                                    </div>
                                    <!-- Toggle switch for highlight active status -->
                                    <div class="form-check form-switch ms-3">
                                        <input class="form-check-input highlight-active" type="checkbox"
                                            id="highlightActive{{ $i }}"
                                            name="highlightActive{{ $i }}"
                                            {{ $highlight && $highlight->active ? 'checked' : '' }}
                                            data-highlight-id="{{ $highlight ? $highlight->id : $i }}">
                                    </div>
                                    <!-- Move icon for drag-and-drop functionality -->
                                    <div class="ms-3">
                                        <i class="fas fa-arrows-alt move-icon cursor-pointer text-gray me-2"></i>
                                    </div>
                                </div>

                                <!-- Bottom row: character count and save button -->
                                <div class="d-flex justify-content-between align-items-center col-10 mt-2">
                                    <!-- Character count display -->
                                    <small class="text-muted character-count">0/132 characters</small>
                                    <!-- Save button for individual highlight -->
                                    {{-- <button type="button" class="btn btn-primary btn-sm save-highlight">Save</button> --}}
                                </div>
                            </li>
                        @endfor
                    </ul>
                </div>
            </div>
        </div>
    </section>
</div>

@push('scripts_bottom')
    <!-- Include necessary JavaScript files -->
    <script src="/assets/default/vendors/select2/select2.min.js"></script>
    <script src="/assets/default/vendors/sortable/jquery-ui.min.js"></script>
    <script>
        // Character counter functionality
        $('.highlight-text').on('input', function() {
            // Calculate and update the character count
            let count = $(this).val().length - 1;
            $(this).siblings('.character-count').text(count + '/132 characters');
        });

        // Initialize character counts on page load
        $('.highlight-text').trigger('input');

        // Make the list sortable using jQuery UI
        // $('.draggable-lists').sortable({
        //     handle: '.move-icon', // Use the move icon as the handle for sorting
        //     axis: 'y' // Restrict movement to vertical axis
        // });

        // Handle generate highlights button click
        $('#generate-highlights').on('click', function(event) {
            event.preventDefault();
            event.stopImmediatePropagation();
            const courseDescription = `{!! str_replace('`', '\`', $webinar->description) !!}`;

            // Show loading popup
            Swal.fire({
                title: 'Generating Highlights',
                html: 'Please wait...',
                allowOutsideClick: false,
                showConfirmButton: false,
                willOpen: () => {
                    Swal.showLoading();
                }
            });

            $.ajax({
                url: '/panel/anthropic/generate-highlights',
                method: 'POST',
                data: {
                    description: courseDescription,
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    if (response.highlights) {
                        response.highlights.forEach((highlight, index) => {
                            $(`textarea[name="highlight-${index + 1}"]`).val(highlight);
                        });
                    }
                    // Close loading popup
                    // Swal.close();
                    // Show success message
                    Swal.fire({
                        icon: 'success',
                        title: 'Highlights Generated',
                        text: 'Course highlights generated! Please review them and make any necessary adjustments before continuing.',
                        confirmButtonText: 'Close'
                    });
                },
                error: function(xhr, status, error) {
                    console.error('Error generating highlights:', error);
                    // Close loading popup and show error message
                    Swal.fire({
                        icon: 'error',
                        title: 'Oops...',
                        text: 'Failed to generate highlights. Please try again.',
                    });
                }
            });
            return false;
        });
    </script>
@endpush