@extends('admin.layouts.layout')

@section('content')
    @php($dontShowNotSection = true)
    @include('admin.report-templates.template_header')
    
    <div class="mb-4">    
        <div class="servicestitle" style="border-radius: 0; padding: 5px 12px;">
            <h3>Overview</h3>
            <div class="services_searchbtn d-flex align-items-center gap-2 ms-auto">
                <div class="contact_btns">
                    @if($permission['create'])
                    <a href="javascript:void(0);" class="add_btn btn" id="add-comment-btn" data-bs-toggle="modal" data-bs-target="#commentModal">
                        <img src="{{ asset('images/add.svg') }}"> Add Overview
                    </a>
                    @endif
                </div>
            </div>
        </div>

        <!-- Data Table -->
        <div class="card">
            <div class="card-body">
                @if($data->count() > 0)
                <div class="table-responsive">
                    <table class="table table-striped" id="sortable-introductions">
                        <thead>
                            <tr>
                                <th width="30">
                                    <div class="drag-handle-header" title="Drag to reorder">
                                        <img src="{{ asset('images/table_menue.svg') }}" alt="Drag" style="width: 16px; height: 16px;">
                                    </div>
                                </th>
                                <th class="w-20">Title</th>
                                <th class="w-25">Inspector Name</th>
                                <th class="w-20">Tenant</th>
                                <th>Evaluation Type</th>
                                <th width="100">Sort Order</th>
                                <th width="120">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($data as $introduction)
                                @include('admin.report-templates.introductions.partials.introduction_row', [
                                    'introduction' => $introduction,
                                    'permission' => $permission
                                ])
                            @endforeach
                        </tbody>
                    </table>
                </div>

                <!-- Pagination -->
                <div class="d-flex justify-content-between align-items-center mt-3">
                    <div>
                        <small class="text-muted">
                            Showing {{ $data->firstItem() }} to {{ $data->lastItem() }} of {{ $data->total() }} entries
                        </small>
                    </div>
                    <div>
                        {{ $data->appends(request()->input())->links() }}
                    </div>
                </div>
                @else
                <div class="text-center py-4">
                    <h5 class="mt-3 text-muted">No overviews found</h5>
                    <p class="text-muted">Create a new overview to get started.</p>
                    @if($permission['create'])
                    <button type="button" class="btn btn-primary" id="add-comment-btn-bottom" data-bs-toggle="modal" data-bs-target="#commentModal">
                        <i class="fas fa-plus"></i> Add New Overview
                    </button>
                    @endif
                </div>
                @endif
            </div>
        </div>
    </div>

    <!-- Overview Modal -->
    <div class="modal fade" id="commentModal" tabindex="-1" aria-labelledby="commentModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="commentModalLabel">Add Overview</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal custom-validation" 
                          id="commentForm" 
                          data-parsley-validate>
                        @csrf
                        <input type="hidden" id="comment_id" name="comment_id" value="">
                        <input type="hidden" id="form_method" name="_method" value="POST">
                        
                        <!-- Hidden field for author (current user) -->
                        <input type="hidden" id="author_id" name="author_id" value="{{ Auth::id() }}">
                        
                        <!-- Hidden fields for template context -->
                        <input type="hidden" id="template_tenant_id" name="template_tenant_id" value="{{ session('template_tenant_id') }}">
                        <input type="hidden" id="template_id" name="template_id" value="{{ session('template_id') }}">
                        
                        <!-- Tenant Selection (Super Admin Only) -->
                        

                        <!-- Title -->
                        <div class="row mb-3">
                            <div class="col-md-12">
                                <label for="title" class="form-label">Title <span class="text-danger">*</span></label>
                                <input type="text"
                                       class="form-control"
                                       id="title"
                                       name="title"
                                       required
                                       data-parsley-required
                                       data-parsley-maxlength="255"
                                       data-parsley-error-message="Title is required"
                                       placeholder="Enter overview title">
                                <div class="invalid-feedback"></div>
                                <div class="form-text">Enter a descriptive title for the overview</div>
                            </div>
                        </div>

                        <!-- Evaluation Type -->
                        <div class="row mb-3">
                            <div class="col-md-12">
                                <label for="evaluation_types" class="form-label">Evaluation Type</label>
                                <select class="form-control select2"
                                        id="evaluation_types"
                                        name="evaluation_types[]"
                                        multiple="multiple"
                                        data-placeholder="Select evaluation type(s)">
                                    @foreach($evaluation_types as $id => $name)
                                        <option value="{{ $id }}">{{ $name }}</option>
                                    @endforeach
                                </select>
                                <div class="form-text">Select one or more evaluation types for this overview</div>
                            </div>
                        </div>

                        <!-- Description -->
                        <div class="row mb-3">
                            <div class="col-md-12">
                                <label for="description" class="form-label">Description <span class="text-danger">*</span></label>
                                <textarea class="form-control tinymce" 
                                          id="description" 
                                          name="description" 
                                          rows="6" 
                                          required 
                                          data-parsley-required
                                          data-parsley-tinymce
                                          data-parsley-error-message="Description is required"
                                          placeholder="Enter comment description"></textarea>
                                <div class="invalid-feedback"></div>
                                <div class="form-text">Provide detailed description for the comment</div>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <!-- Auto Include in Report -->
                            <div class="col-md-6">
                                <label class="form-label">Auto Include in Report</label>
                                <div class="form-check mt-2">
                                    <input class="form-check-input" 
                                           type="checkbox" 
                                           value="1" 
                                           id="auto_include_in_report" 
                                           name="auto_include_in_report">
                                    <label class="form-check-label" for="auto_include_in_report">                                        
                                        Include automatically in report
                                    </label>
                                </div>
                                <small class="form-text text-muted">Auto-include this comment in generated reports</small>
                            </div>

                            <!-- Status -->
                            <div class="col-md-6">
                                <label class="form-label">Status</label>
                                <div class="form-check mt-2">
                                    <input class="form-check-input" 
                                           type="checkbox" 
                                           value="1" 
                                           id="is_active" 
                                           name="is_active" 
                                           checked>
                                    <label class="form-check-label" for="is_active">
                                        Active
                                    </label>
                                </div>
                                <small class="form-text text-muted">Enable or disable this comment</small>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-dark" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary" id="saveCommentBtn">
                        <i class="fas fa-save"></i> Save Overview
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- View Modal -->
    <div class="modal fade" id="viewModal" tabindex="-1" aria-labelledby="viewModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="viewModalLabel">View Overview</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label class="form-label fw-bold">Title:</label>
                            <p id="view-title"></p>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-bold">Author:</label>
                            <p id="view-author"></p>
                        </div>
                    </div>
                    
                    <div class="row mb-3">
                        <div class="col-md-12">
                            <label class="form-label fw-bold">Evaluation Type:</label>
                            <div id="view-evaluation-types"></div>
                        </div>
                    </div>

                    <div class="row mb-3">
                        <div class="col-md-12">
                            <label class="form-label fw-bold">Description:</label>
                            <div id="view-description" class="border p-3 rounded"></div>
                        </div>
                    </div>

                    <div class="row mb-3">
                        <div class="col-md-4">
                            <label class="form-label fw-bold">Sort Order:</label>
                            <p id="view-sort-order"></p>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label fw-bold">Auto Include in Report:</label>
                            <p id="view-auto-include"></p>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label fw-bold">Status:</label>
                            <p id="view-status"></p>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <label class="form-label fw-bold">Created At:</label>
                            <p id="view-created-at"></p>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-bold">Updated At:</label>
                            <p id="view-updated-at"></p>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-dark" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('page_script')
<meta name="csrf-token" content="{{ csrf_token() }}">
<script src="{{ asset('admin-form-plugins/tinymce/tinymce.min.js') }}"></script>
<script src="{{ asset('assets/js/template-filter.js') }}"></script>
<script src="https://cdn.jsdelivr.net/npm/parsleyjs@2.9.2/dist/parsley.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.15.0/Sortable.min.js"></script>
<script>
const evaluationTypeNames = @json($evaluation_types);
$(document).ready(function() {
    // Initialize TinyMCE
    initializeTinyMCE();
    
    // Initialize drag and drop
    initializeSortable();
    
    // Handle template header section changes - integrate with global template system for tenant workflow
    function setupSectionDisplayHandling() {
        // Define local toggle function that works with template header's page-content-wrapper
        function localToggleContentDisplay(sectionId) {
            var pageContentWrapper = $('.page-content-wrapper');
            var noSectionMessage = $('#no-section-message');
            
            // For super admin (no tenant_id in session), always show content
            @if(!session('tenant_id'))
            pageContentWrapper.show();
            if (noSectionMessage.length) {
                noSectionMessage.hide();
            }
            console.log('Super admin mode: content always visible');
            @else
            // For regular users, hide/show based on section selection
            if (sectionId && sectionId !== '') {
                pageContentWrapper.show();
                if (noSectionMessage.length) {
                    noSectionMessage.hide();
                }
                console.log('Section selected, showing content');
            } else {
                pageContentWrapper.hide();
                if (noSectionMessage.length) {
                    noSectionMessage.show();
                }
                console.log('No section selected, hiding content');
            }
            @endif
        }
        
        // Override the global function with our local implementation
        window.toggleContentDisplay = localToggleContentDisplay;
        
        // Check current section and toggle display on page load
        var currentSectionId = $('#section-select').val();
        localToggleContentDisplay(currentSectionId);
        
        // Listen for section changes
        $(document).on('change', '#section-select', function() {
            var sectionId = $(this).val();
            localToggleContentDisplay(sectionId);
        });
        
        // Also listen for template changes that might affect section availability
        $(document).on('change', '#template-select', function() {
            var templateId = $(this).val();
            if (!templateId) {
                // For regular users, hide content when no template is selected
                @if(session('tenant_id'))
                localToggleContentDisplay('');
                @endif
            }
        });
    }
    
    // Initialize section display handling
    setupSectionDisplayHandling();
    
    // Debug: Log session values for troubleshooting
    console.log('Debug - Session values:');
    console.log('tenant_id:', '{{ session("tenant_id") }}');
    console.log('template_id:', '{{ session("template_id") }}');
    console.log('selected_section_id:', '{{ session("selected_section_id") }}');
    console.log('Is super admin:', {{ !session('tenant_id') ? 'true' : 'false' }});
    
    // Force show content for super admin on page load
    @if(!session('tenant_id'))
    setTimeout(function() {
        $('.page-content-wrapper').show();
        console.log('Force showing content for super admin');
    }, 100);
    @endif
    
    // Initialize Parsley for form validation (Agreement-style)
    $('#commentForm').parsley({
        errorClass: 'is-invalid',
        successClass: 'is-valid',
        errorsWrapper: '<div class="invalid-feedback d-block"></div>',
        errorTemplate: '<div></div>',
        inputs: 'input, textarea, select',
        excluded: 'input[type=button], input[type=submit], input[type=reset], input[type=hidden], [disabled], :hidden',
        trigger: 'change input blur focusout',
        focus: 'first',
        validationThreshold: 3,
        priorityEnabled: false
    });

    // Custom validation for TinyMCE
    window.Parsley.addValidator('tinymce', {
        requirementType: 'string',
        validateString: function(value, requirement) {
            var editor = tinymce.get('description');
            if (editor) {
                var content = editor.getContent({format: 'text'}).trim();
                return content.length > 0;
            }
            return value.trim().length > 0;
        },
        messages: {
            en: 'This field is required.'
        }
    });

    // Enhanced custom validation messages
    window.Parsley.addMessages('en', {
        required: 'This field is required.',
        type: {
            number: 'This value should be a valid number.',
            email: 'This value should be a valid email address.',
            url: 'This value should be a valid URL.'
        },
        min: 'This value should be greater than or equal to %s.',
        max: 'This value should be less than or equal to %s.',
        minlength: 'This value is too short. It should have %s characters or more.',
        maxlength: 'This value is too long. It should have %s characters or fewer.',
        pattern: 'This value seems to be invalid.',
        equalto: 'This value should be the same.'
    });

    // Add tinymce validation to description field
    $('#description').attr('data-parsley-tinymce', 'required');

    // Form submission handling (Agreement-style)
    $('#commentForm').on('submit', function(e) {
        e.preventDefault();
        
        // Update TinyMCE content
        if (tinymce.get('description')) {
            tinymce.get('description').save();
            $('#description').trigger('input');
        }
        
        // Validate form
        var parsleyInstance = $(this).parsley();
        if (parsleyInstance.isValid()) {
            saveComment();
        } else {
            showNotification('error', 'Please correct the validation errors before submitting.');
            // Focus on first invalid field
            setTimeout(function() {
                $('#commentForm .is-invalid:first').focus();
            }, 100);
        }
        
        return false;
    });

    // Real-time validation for better UX
    $('#title').on('blur keyup', function() {
        $(this).parsley().validate();
    });

    $('#tenant_id').on('change', function() {
        $(this).parsley().validate();
    });

    // Filter panel toggle
    $('.show-panel').on('click', function() {
        const panelId = $(this).data('id');
        $('#' + panelId).toggle();
    });

    // Delete single item
    $(document).on('click', '.delete-item', function() {
        const id = $(this).data('id');
        const row = $(this).closest('tr');

        Swal.fire({
            title: 'Are You Sure?',
            text: 'This action cannot be undone. Do you want to continue?',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, Delete!',
            showClass: {
                popup: 'animate__animated animate__fadeInDown'
            },
            hideClass: {
                popup: 'animate__animated animate__fadeOutUp'
            }
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: `{{ url('report-templates/introductions') }}/${id}`,
                    type: 'DELETE',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(response) {
                        if (response.status) {
                            showNotification('success', response.message);
                            row.fadeOut(300, function() {
                                $(this).remove();
                            });
                        } else {
                            showNotification('error', response.message);
                        }
                    },
                    error: function(xhr) {
                        const response = xhr.responseJSON;
                        showNotification('error', response?.message || 'Error deleting introduction template');
                    }
                });
            }
        });
    });

    // Initialize drag and drop sorting
    function initializeSortable() {
        const table = document.querySelector('#sortable-introductions');
        if (!table) {
            console.log('Sortable table not found - no data available');
            return;
        }

        const tbody = table.querySelector('tbody');
        if (!tbody) {
            console.log('Sortable tbody not found - no data available');
            return;
        }

        // Create Sortable instance on the tbody
        const sortable = Sortable.create(tbody, {
            animation: 150,
            handle: '.drag-handle',
            ghostClass: 'sortable-ghost',
            chosenClass: 'sortable-chosen',
            dragClass: 'sortable-drag',
            onStart: function(evt) {
                console.log('Drag started on introduction:', evt.item.dataset.introductionId);
            },
            onEnd: function(evt) {
                console.log('Drag ended');
                // Update sort order after drag
                updateIntroductionOrder();
            }
        });

        console.log('Sortable initialized successfully');
    }

    // Update introduction order after drag and drop
    function updateIntroductionOrder() {
        let introductions = [];
        
        $('.introduction-row').each(function(index) {
            const row = $(this);
            const id = row.data('introduction-id');
            
            introductions.push({
                id: id,
                sort_order: index + 1
            });
        });

        // Send bulk update request
        $.ajax({
            url: `{{ url('report-templates/introductions/update-order-bulk') }}`,
            type: 'POST',
            data: {
                introductions: introductions,
                _token: $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
                if (response.status) {
                    showNotification('success', 'Order updated successfully');
                    // Update the sort order badges (only the secondary badges, not author badges)
                    $('.introduction-row').each(function(index) {
                        $(this).find('.badge.bg-secondary').text(index + 1);
                    });
                } else {
                    showNotification('error', response.message || 'Error updating order');
                }
            },
            error: function(xhr) {
                const response = xhr.responseJSON;
                showNotification('error', response?.message || 'Error updating order');
            }
        });
    }

    // Initialize Bootstrap tooltips properly
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl);
    });

    // Initialize Select2 for evaluation types
    $('#evaluation_types').select2({
        dropdownParent: $('#commentModal'),
        placeholder: 'Select evaluation type(s)',
        allowClear: true,
        width: '100%'
    });

    // Modal functionality
    $('#add-comment-btn, #add-comment-btn-bottom').on('click', function() {
        resetModal();
        $('#commentModalLabel').text('Add Overview');
        $('#form_method').val('POST');
        $('#comment_id').val('');
        // Author is automatically set to current user via hidden field
    });

    // Edit overview functionality
    $(document).on('click', '.edit-comment-btn', function() {
        const id = $(this).data('id');
        loadCommentData(id);
    });

    // View comment functionality
    $(document).on('click', '.view-comment-btn', function() {
        const id = $(this).data('id');
        loadCommentDataForView(id);
    });

    // Save comment functionality
    $('#saveCommentBtn').on('click', function() {
        saveComment();
    });

    // Real-time validation triggers for better UX
    $('#title').on('blur input', function() {
        $(this).parsley().validate();
    });

    $('#tenant_id').on('change', function() {
        $(this).parsley().validate();
    });

    // Initialize TinyMCE
    function initializeTinyMCE() {
        tinymce.init({
            selector: '#description',
            height: 300,
            menubar: false,
            plugins: 'lists link code',
            toolbar: 'undo redo | bold italic | alignleft aligncenter alignright | bullist numlist | link | code',
            content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }',
            promotion: false,
            branding: false,
            setup: function (editor) {
                editor.on('change keyup', function () {
                    editor.save();
                    // Trigger validation update for Parsley
                    $('#description').trigger('input').parsley().validate();
                });
            },
            init_instance_callback: function (editor) {
                // Ensure content is saved on blur
                editor.on('blur', function () {
                    editor.save();
                    $('#description').trigger('input').parsley().validate();
                });
            }
        });
    }

    // Reset modal function
    function resetModal() {
        $('#commentForm')[0].reset();
        
        // Reset Parsley validation
        if ($('#commentForm').parsley()) {
            $('#commentForm').parsley().reset();
        }
        
        // Clear form fields
        $('#title').val('');
        $('#is_active').prop('checked', true);
        $('#auto_include_in_report').prop('checked', false);
        
        // Reset TinyMCE content
        if (tinymce.get('description')) {
            tinymce.get('description').setContent('');
        } else {
            $('#description').val('');
        }
        
        // Reset select2 dropdowns
        if ($.fn.select2) {
            if ($('#tenant_id').length) {
                $('#tenant_id').val('').trigger('change');
            }
            if ($('#evaluation_types').length) {
                $('#evaluation_types').val(null).trigger('change');
            }
        }
        
        // Ensure author is set to current user
        $('#author_id').val('{{ Auth::id() }}');
        
        // Set template context from session
        $('#template_tenant_id').val('{{ session("template_tenant_id") }}');
        $('#template_id').val('{{ session("template_id") }}');
        
        // Remove any validation classes and error messages
        $('#commentForm').find('.is-invalid, .is-valid').removeClass('is-invalid is-valid');
        $('#commentForm').find('.invalid-feedback').remove();
        
        // Remove any Parsley error elements
        $('#commentForm').find('.parsley-errors-list').remove();
        $('#commentForm').find('.parsley-error').removeClass('parsley-error');
        $('#commentForm').find('.parsley-success').removeClass('parsley-success');
    }

    // Load comment data for editing
    function loadCommentData(id) {
        $.ajax({
            url: `{{ url('report-templates/introductions') }}/${id}`,
            type: 'GET',
            headers: {
                'Accept': 'application/json',
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
                if (response.status) {
                    const data = response.data;

                    $('#commentModalLabel').text('Edit Overview');
                    $('#form_method').val('PUT');
                    $('#comment_id').val(data.id);
                    $('#title').val(data.title);

                    // Set TinyMCE content
                    if (tinymce.get('description')) {
                        tinymce.get('description').setContent(data.description || '');
                    } else {
                        $('#description').val(data.description);
                    }

                    $('#is_active').prop('checked', data.is_active == 1);
                    $('#auto_include_in_report').prop('checked', data.auto_include_in_report == 1);

                    // Set evaluation_types multi-select
                    if ($('#evaluation_types').length && data.evaluation_types) {
                        $('#evaluation_types').val(data.evaluation_types).trigger('change');
                    } else {
                        $('#evaluation_types').val(null).trigger('change');
                    }

                    if ($('#tenant_id').length) {
                        $('#tenant_id').val(data.tenant_id).trigger('change');
                    }
                    // Author remains as current user, no need to change
                } else {
                    showNotification('error', response.message || 'Error loading overview data');
                }
            },
            error: function(xhr) {
                const response = xhr.responseJSON;
                showNotification('error', response?.message || 'Error loading comment data');
            }
        });
    }

    // Load comment data for viewing (read-only)
    function loadCommentDataForView(id) {
        $.ajax({
            url: `{{ url('report-templates/introductions') }}/${id}`,
            type: 'GET',
            headers: {
                'Accept': 'application/json',
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
                if (response.status) {
                    const data = response.data;
                    
                    $('#view-title').text(data.title || 'N/A');
                    $('#view-author').text(data.author?.full_name || 'N/A');

                    // Evaluation types
                    if (data.evaluation_types && data.evaluation_types.length > 0) {
                        var etHtml = data.evaluation_types.map(function(id) {
                            var name = evaluationTypeNames[id] || 'Unknown';
                            return '<span class="badge bg-primary me-1">' + name + '</span>';
                        }).join('');
                        $('#view-evaluation-types').html(etHtml);
                    } else {
                        $('#view-evaluation-types').html('<span class="text-muted">None selected</span>');
                    }

                    $('#view-description').html(data.description || 'No description provided');
                    $('#view-sort-order').text(data.sort_order || '0');
                    $('#view-auto-include').html(data.auto_include_in_report ?
                        '<span class="badge bg-success">Yes</span>' :
                        '<span class="badge bg-secondary">No</span>');
                    $('#view-status').html(data.is_active ?
                        '<span class="badge bg-success">Active</span>' :
                        '<span class="badge bg-danger">Inactive</span>');
                    $('#view-created-at').text(data.created_at_formatted || data.created_at || 'N/A');
                    $('#view-updated-at').text(data.updated_at_formatted || data.updated_at || 'N/A');
                } else {
                    showNotification('error', response.message || 'Error loading comment data');
                }
            },
            error: function(xhr) {
                const response = xhr.responseJSON;
                showNotification('error', response?.message || 'Error loading comment data');
            }
        });
    }

    // Save comment function (Agreement-style with server validation handling)
    function saveComment() {
        // Update TinyMCE content before validation
        if (tinymce.get('description')) {
            tinymce.get('description').save();
            $('#description').trigger('input');
        }
        
        // Client-side validation check
        var parsleyInstance = $('#commentForm').parsley();
        if (!parsleyInstance.isValid()) {
            showNotification('error', 'Please fill in all required fields correctly.');
            $('#commentForm .is-invalid:first').focus();
            return false;
        }

        // Additional TinyMCE content check
        var description = '';
        if (tinymce.get('description')) {
            description = tinymce.get('description').getContent({format: 'text'}).trim();
        } else {
            description = $('#description').val().trim();
        }
        
        if (!description) {
            showNotification('error', 'Description is required.');
            if (tinymce.get('description')) {
                tinymce.get('description').focus();
            } else {
                $('#description').focus();
            }
            return false;
        }

        const $saveBtn = $('#saveCommentBtn');
        const originalText = $saveBtn.html();
        const isEdit = $('#form_method').val() === 'PUT';
        const id = $('#comment_id').val();
        
        // Show loading state
        $saveBtn.prop('disabled', true)
               .html('<i class="fas fa-spinner fa-spin"></i> Saving...');

        const formData = {
            title: $('#title').val(),
            description: tinymce.get('description') ? tinymce.get('description').getContent() : $('#description').val(),
            is_active: $('#is_active').is(':checked') ? 1 : 0,
            auto_include_in_report: $('#auto_include_in_report').is(':checked') ? 1 : 0,
            'evaluation_types[]': $('#evaluation_types').val() || [],
            author_id: $('#author_id').val(),
            template_tenant_id: $('#template_tenant_id').val(),
            template_id: $('#template_id').val(),
            _token: $('meta[name="csrf-token"]').attr('content')
        };

        if ($('#tenant_id').length) {
            formData.tenant_id = $('#tenant_id').val();
        } else {
            formData.tenant_id = '{{ session("tenant_id") }}';
        }

        if (isEdit) {
            formData._method = 'PUT';
        }
        
        // Debug logging
        console.log('Form data being sent:', formData);

        const url = isEdit ? 
            `{{ url('report-templates/introductions') }}/${id}` : 
            `{{ url('report-templates/introductions') }}`;

        $.ajax({
            url: url,
            type: 'POST',
            data: formData,
            headers: {
                'Accept': 'application/json',
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
                if (response.status) {
                    showNotification('success', response.message || (isEdit ? 'Overview updated successfully' : 'Overview created successfully'));
                    $('#commentModal').modal('hide');
                    location.reload();
                } else {
                    showNotification('error', response.message || 'Error saving overview');
                }
            },
            error: function(xhr) {
                const response = xhr.responseJSON;
                
                // Clear existing validation errors
                $('#commentForm .is-invalid').removeClass('is-invalid');
                $('#commentForm .invalid-feedback').remove();
                
                if (xhr.status === 422 && response && response.errors) {
                    // Handle validation errors (Laravel validation)
                    let errorMessage = 'Please correct the following errors:';
                    let hasErrors = false;
                    
                    $.each(response.errors, function(field, messages) {
                        hasErrors = true;
                        const $field = $('#' + field);
                        const $container = $field.closest('.col-md-12, .col-md-6, .col-md-4');
                        
                        // Add error class to field
                        $field.addClass('is-invalid');
                        
                        // Add error message
                        const errorDiv = $('<div class="invalid-feedback d-block"></div>').text(messages[0]);
                        
                        // For select2 dropdowns
                        if ($field.hasClass('select2')) {
                            $container.find('.select2-container').after(errorDiv);
                        } else {
                            $field.after(errorDiv);
                        }
                    });
                    
                    if (hasErrors) {
                        showNotification('error', errorMessage);
                        // Focus on first invalid field
                        setTimeout(function() {
                            $('#commentForm .is-invalid:first').focus();
                        }, 100);
                    }
                } else {
                    // Handle other errors
                    let errorMessage = 'Error saving overview';
                    
                    if (response && response.message) {
                        errorMessage = response.message;
                    } else if (response && response.errors) {
                        const errors = Object.values(response.errors).flat();
                        errorMessage = errors.join('<br>');
                    }
                    
                    showNotification('error', errorMessage);
                }
            },
            complete: function() {
                // Restore button state
                $saveBtn.prop('disabled', false)
                       .html(originalText);
            }
        });
    }

    // Handle Enter key in modal form
    $('#commentModal').on('keypress', function(e) {
        if (e.which === 13 && !$(e.target).is('textarea')) {
            e.preventDefault();
            $('#saveCommentBtn').click();
        }
    });

    // Reinitialize TinyMCE when modal is shown
    $('#commentModal').on('shown.bs.modal', function () {
        setTimeout(function() {
            if (!tinymce.get('description')) {
                initializeTinyMCE();
            } else {
                // Focus the editor if it exists
                tinymce.get('description').focus();
            }
        }, 200);
    });

    // Clean up TinyMCE when modal is hidden
    $('#commentModal').on('hidden.bs.modal', function () {
        if (tinymce.get('description')) {
            tinymce.get('description').save();
            tinymce.get('description').remove();
        }
        // Reset Parsley validation
        $('#commentForm').parsley().reset();
    });
});
</script>
@endpush