@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>Comment</h3>
            <div class="services_searchbtn d-flex align-items-center gap-2 ms-auto">
                <div class="search_box">
                    <input type="text" class="form-control" placeholder="Search comments..." id="search-input" value="{{ request('search') }}">
                    <button class="btn btn_search" id="search-btn">
                        <img src="{{ asset('images/search_w.svg') }}" alt="Search Icon">
                    </button>
                    <button class="btn btn-clear-search" id="clear-search" style="display: {{ request('search') ? 'inline-block' : 'none' }}; margin-left: 5px;">
                        <i class="fas fa-times"></i>
                    </button>
                    <div class="search-loading" id="search-loading" style="display: none; margin-left: 10px;">
                        <i class="fas fa-spinner fa-spin text-primary"></i>
                        <small class="text-muted ms-1">Searching...</small>
                    </div>
                </div>
                <div class="contact_btns">
                    @if($permission['create'])
                    <a href="javascript:void(0);" class="add_btn btn" id="add-closing-statement-btn" data-bs-toggle="modal" data-bs-target="#closingStatementModal">
                        <img src="{{ asset('images/add.svg') }}"> Add Comment
                    </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-closing-statements">
                        <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 width="150">Modified Date</th>                               
                                <th width="100">Sort Order</th>
                                <th width="120">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($data as $closingStatement)
                                @include('admin.report-templates.closing-statements.partials.closing_statement_row', [
                                    'closingStatement' => $closingStatement,
                                    '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 closing statements found</h5>
                    <p class="text-muted">Try adjusting your search criteria or create a new closing statement.</p>
                    @if($permission['create'])
                    <button type="button" class="btn btn-primary" id="add-closing-statement-btn-bottom" data-bs-toggle="modal" data-bs-target="#closingStatementModal">
                        <i class="fas fa-plus"></i> Add New Closing Statement
                    </button>
                    @endif
                </div>
                @endif
            </div>
        </div>
    </div>

    <!-- Closing Statement Modal -->
    <div class="modal fade" id="closingStatementModal" tabindex="-1" aria-labelledby="closingStatementModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="closingStatementModalLabel">Add Closing Statement</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="closingStatementForm" 
                          data-parsley-validate>
                        @csrf
                        <input type="hidden" id="closing_statement_id" name="closing_statement_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') }}">
                       

                        <!-- 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 closing statement title">
                                <div class="invalid-feedback"></div>
                                <div class="form-text">Enter a descriptive title for the closing statement</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 closing statement description"></textarea>
                                <div class="invalid-feedback"></div>
                                <div class="form-text">Provide detailed description for the closing statement</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 closing statement 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 closing statement</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="saveClosingStatementBtn">
                        <i class="fas fa-save"></i> Save Closing Statement
                    </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 Closing Statement</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">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>
$(document).ready(function() {
    // Initialize TinyMCE
    initializeTinyMCE();
    
    // Initialize drag and drop
    initializeSortable();
    
    // Initialize Parsley for form validation (Agreement-style)
    $('#closingStatementForm').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)
    $('#closingStatementForm').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()) {
            saveClosingStatement();
        } else {
            showNotification('error', 'Please correct the validation errors before submitting.');
            // Focus on first invalid field
            setTimeout(function() {
                $('#closingStatementForm .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();
    });

    // Search functionality with live search (no page refresh)
    let searchTimeout;
    $('#search-input').on('input', function() {
        clearTimeout(searchTimeout);
        const query = $(this).val().trim();
        const $clearBtn = $('#clear-search');
        const $loading = $('#search-loading');
        
        if (query.length > 0) {
            $clearBtn.show();
        } else {
            $clearBtn.hide();
        }
        
        // Debounce search - wait 300ms after user stops typing
        searchTimeout = setTimeout(function() {
            performLiveSearch(query);
        }, 300);
    });

    // Handle Enter key press for instant search
    $('#search-input').on('keypress', function(e) {
        if (e.which === 13) { // Enter key
            e.preventDefault();
            clearTimeout(searchTimeout);
            const query = $(this).val().trim();
            performLiveSearch(query);
        }
    });

    $('#search-btn').on('click', function() {
        const query = $('#search-input').val().trim();
        performLiveSearch(query);
    });

    $('#clear-search').on('click', function() {
        $('#search-input').val('');
        $(this).hide();
        performLiveSearch('');
    });

    function performLiveSearch(query) {
        const $loading = $('#search-loading');
        const $tableBody = $('#sortable-closing-statements tbody');
        const $tableContainer = $('.table-responsive');
        const $noDataDiv = $('.text-center.py-4');
        
        $loading.show();
        
        $.ajax({
            url: '{{ route("report-templates.closing-statements.index") }}',
            type: 'GET',
            data: { search: query },
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                'X-Requested-With': 'XMLHttpRequest'
            },
            success: function(response) {
                if (response.status) {
                    if (response.count > 0) {
                        // Show table and hide no-data message
                        $tableContainer.show();
                        $noDataDiv.hide();
                        $tableBody.html(response.html);
                        
                        // Reinitialize sortable after updating content
                        initializeSortable();
                    } else {
                        // Hide table and show no-data message
                        $tableContainer.hide();
                        if ($noDataDiv.length === 0) {
                            // Create no-data message if it doesn't exist
                            $tableContainer.after(`
                                <div class="text-center py-4">
                                    <h5 class="mt-3 text-muted">No closing statements found</h5>
                                    <p class="text-muted">Try adjusting your search criteria.</p>
                                </div>
                            `);
                        } else {
                            $noDataDiv.show();
                            $noDataDiv.find('h5').text('No closing statements found');
                            $noDataDiv.find('p').text('Try adjusting your search criteria.');
                        }
                    }
                    
                    // Show notification for search results
                    if (query) {
                        //showNotification('info', `Found ${response.count} closing statement(s) matching "${query}"`);
                    }
                } else {
                    showNotification('error', response.message || 'Error performing search');
                }
            },
            error: function(xhr) {
                const response = xhr.responseJSON;
                showNotification('error', response?.message || 'Error performing search');
            },
            complete: function() {
                $loading.hide();
            }
        });
    }

    // 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/closing-statements') }}/${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 closing statement template');
                    }
                });
            }
        });
    });

    // Initialize drag and drop sorting
    function initializeSortable() {
        const table = document.querySelector('#sortable-closing-statements');
        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 closing statement:', evt.item.dataset.closingStatementId);
            },
            onEnd: function(evt) {
                console.log('Drag ended');
                // Update sort order after drag
                updateClosingStatementOrder();
            }
        });

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

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

        // Send bulk update request
        $.ajax({
            url: `{{ url('report-templates/closing-statements/update-order-bulk') }}`,
            type: 'POST',
            data: {
                closing_statements: closingStatements,
                _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)
                    $('.closing-statement-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);
    });

    // Modal functionality
    $('#add-closing-statement-btn, #add-closing-statement-btn-bottom').on('click', function() {
        resetModal();
        $('#closingStatementModalLabel').text('Add Closing Statement');
        $('#form_method').val('POST');
        $('#closing_statement_id').val('');
        // Author is automatically set to current user via hidden field
    });

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

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

    // Save closing statement functionality
    $('#saveClosingStatementBtn').on('click', function() {
        saveClosingStatement();
    });

    // 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() {
        $('#closingStatementForm')[0].reset();
        
        // Reset Parsley validation
        if ($('#closingStatementForm').parsley()) {
            $('#closingStatementForm').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 if initialized (only for tenant dropdown)
        if ($.fn.select2 && $('#tenant_id').length) {
            $('#tenant_id').val('').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
        $('#closingStatementForm').find('.is-invalid, .is-valid').removeClass('is-invalid is-valid');
        $('#closingStatementForm').find('.invalid-feedback').remove();
        
        // Remove any Parsley error elements
        $('#closingStatementForm').find('.parsley-errors-list').remove();
        $('#closingStatementForm').find('.parsley-error').removeClass('parsley-error');
        $('#closingStatementForm').find('.parsley-success').removeClass('parsley-success');
    }

    // Load closing statement data for editing
    function loadClosingStatementData(id) {
        $.ajax({
            url: `{{ url('report-templates/closing-statements') }}/${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;
                    
                    $('#closingStatementModalLabel').text('Edit Closing Statement');
                    $('#form_method').val('PUT');
                    $('#closing_statement_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);
                    
                    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 closing statement data');
                }
            },
            error: function(xhr) {
                const response = xhr.responseJSON;
                showNotification('error', response?.message || 'Error loading closing statement data');
            }
        });
    }

    // Load closing statement data for viewing (read-only)
    function loadClosingStatementDataForView(id) {
        $.ajax({
            url: `{{ url('report-templates/closing-statements') }}/${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');
                    $('#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 || 'N/A');
                    $('#view-updated-at').text(data.updated_at || 'N/A');
                } else {
                    showNotification('error', response.message || 'Error loading closing statement data');
                }
            },
            error: function(xhr) {
                const response = xhr.responseJSON;
                showNotification('error', response?.message || 'Error loading closing statement data');
            }
        });
    }

    // Save closing statement function (Agreement-style with server validation handling)
    function saveClosingStatement() {
        // Update TinyMCE content before validation
        if (tinymce.get('description')) {
            tinymce.get('description').save();
            $('#description').trigger('input');
        }
        
        // Client-side validation check
        var parsleyInstance = $('#closingStatementForm').parsley();
        if (!parsleyInstance.isValid()) {
            showNotification('error', 'Please fill in all required fields correctly.');
            $('#closingStatementForm .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 = $('#saveClosingStatementBtn');
        const originalText = $saveBtn.html();
        const isEdit = $('#form_method').val() === 'PUT';
        const id = $('#closing_statement_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,
            author_id: $('#author_id').val(), // Get from hidden field
            template_tenant_id: $('#template_tenant_id').val(), // Get template tenant from session
            template_id: $('#template_id').val(), // Get template ID from session
            _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/closing-statements') }}/${id}` : 
            `{{ url('report-templates/closing-statements') }}`;

        $.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 ? 'Closing statement updated successfully' : 'Closing statement created successfully'));
                    $('#closingStatementModal').modal('hide');
                    location.reload(); // Reload to show updated data
                } else {
                    showNotification('error', response.message || 'Error saving closing statement');
                }
            },
            error: function(xhr) {
                const response = xhr.responseJSON;
                
                // Clear existing validation errors
                $('#closingStatementForm .is-invalid').removeClass('is-invalid');
                $('#closingStatementForm .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() {
                            $('#closingStatementForm .is-invalid:first').focus();
                        }, 100);
                    }
                } else {
                    // Handle other errors
                    let errorMessage = 'Error saving closing statement';
                    
                    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
    $('#closingStatementModal').on('keypress', function(e) {
        if (e.which === 13 && !$(e.target).is('textarea')) {
            e.preventDefault();
            $('#saveClosingStatementBtn').click();
        }
    });

    // Reinitialize TinyMCE when modal is shown
    $('#closingStatementModal').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
    $('#closingStatementModal').on('hidden.bs.modal', function () {
        if (tinymce.get('description')) {
            tinymce.get('description').save();
            tinymce.get('description').remove();
        }
        // Reset Parsley validation
        $('#closingStatementForm').parsley().reset();
    });
});
</script>
@endpush