@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>Report Question</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 report questions..." 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" @if(request('search')) style="display: inline-block; margin-left: 5px;" @else style="display: none; margin-left: 5px;" @endif>
                        <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-question-btn" data-bs-toggle="modal" data-bs-target="#questionModal">
                    <img src="{{ asset('images/add.svg') }}"> Add Question
                </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-questions">
                        <thead>
                            <tr>
                                <th width="30" class="text-center">
                                    <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-25">Question</th>
                                <th class="w-15">Question Type</th>
                                <th width="100">Display Separately</th>
                                <th width="100">Mandatory</th>
                                <th width="120">Actions</th>
                            </tr>
                        </thead>
                        <tbody id="question-tbody">
                            @foreach($data as $item)
                                @include('admin.report-templates.questions.partials.question_row', [
                                    'item' => $item,
                                    'permission' => $permission
                                ])
                            @endforeach
                        </tbody>
                    </table>
                </div>

                <!-- Pagination -->
                <div class="d-flex justify-content-between align-items-center mt-3">
                    <div class="small text-muted">
                        Showing {{ $data->firstItem() }} to {{ $data->lastItem() }} of {{ $data->total() }} entries
                    </div>
                    <div>
                        {{ $data->links() }}
                    </div>
                </div>
                @else
                <div class="text-center py-4">
                    <h5 class="mt-3 text-muted">No report questions found</h5>
                    <p class="text-muted">Try adjusting your search criteria or create a new report question.</p>
                    @if($permission['create'])
                    <button type="button" class="btn btn-primary" id="add-question-btn-bottom" data-bs-toggle="modal" data-bs-target="#questionModal">
                        <i class="fas fa-plus"></i> Add New Question
                    </button>
                    @endif
                </div>
                @endif
            </div>
        </div>
    </div>

    <!-- Question Modal -->
    <div class="modal fade" id="questionModal" tabindex="-1" aria-labelledby="questionModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="questionModalLabel">Add Question</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body" id="questionModalBody">
                    <form class="form-horizontal custom-validation" 
                          id="questionForm" 
                          data-parsley-validate>
                        @csrf
                        <input type="hidden" id="question_id" name="question_id" value="">
                        <input type="hidden" id="form_method" name="_method" value="POST">
                        
                        <!-- 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') }}">
                        
                        <!-- Question Text -->
                        <div class="mb-3">
                            <label for="question" class="form-label">Question Text <span class="text-danger">*</span></label>
                            <textarea name="question" 
                                     id="question" 
                                     class="form-control" 
                                     rows="3" 
                                     placeholder="Enter the question text"
                                     required></textarea>
                            <div class="form-text">Enter the question text that will be displayed to users</div>
                        </div>

                        <!-- Question Type -->
                        <div class="mb-3">
                            <label for="type" class="form-label">Question Type <span class="text-danger">*</span></label>
                            <select name="type" id="type" class="form-select" required>
                                <option value="">Select question type</option>
                                <option value="text">Text</option>
                                <option value="textarea">Textarea</option>
                                <option value="number">Number</option>
                                <option value="date">Date</option>
                                <option value="radio">Radio</option>
                                <option value="checkbox">Checkbox</option>
                                <option value="select">Select</option>
                            </select>
                            <div class="form-text">Select the type of question</div>
                        </div>

                        <!-- Options Section (for radio, checkbox, select) -->
                        <div class="mb-3" id="options-section" style="display: none;">
                            <label class="form-label">Options <span class="text-danger">*</span></label>
                            
                            <!-- Option Input -->
                            <div class="input-group mb-2">
                                <input type="text" 
                                       id="option-input" 
                                       class="form-control" 
                                       placeholder="Add option and hit ENTER"
                                       autocomplete="off"
                                       style="border-radius: 6px 0 0 6px;">
                                <button type="button" class="btn btn-primary" id="add-option-btn" style="border-radius: 0 6px 6px 0;">
                                    <i class="fas fa-plus"></i> Add Option
                                </button>
                            </div>
                            
                            <!-- Error message container -->
                            <div id="option-error-message" class="alert alert-danger" style="display: none; padding: 8px 12px; margin-bottom: 10px; font-size: 14px;">
                                <i class="fas fa-exclamation-triangle"></i> <span id="option-error-text"></span>
                            </div>
                            
                            <!-- Options Display -->
                            <div id="options-container" class="options-tags-container">
                                <!-- Options will be added here dynamically -->
                            </div>
                            
                            <div class="form-text">Add options for radio, checkbox, or select questions</div>
                        </div>

                        <!-- Three columns for checkboxes -->
                        <div class="row mb-3">
                            <input class="form-check-input" 
                                           type="hidden" 
                                           name="show_separately" 
                                           value="0">
                            <div class="col-md-4">
                                <label class="form-label">Show Separately</label>
                                <div class="form-check">
                                    <input class="form-check-input" 
                                           type="checkbox" 
                                           name="show_separately" 
                                           id="show_separately" 
                                           value="1">
                                    <label class="form-check-label" for="show_separately">
                                        Show this question separately
                                    </label>
                                </div>
                                <div class="form-text">Display this question in a separate section</div>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Required</label>
                                <input class="form-check-input" 
                                           type="hidden" 
                                           name="is_required" 
                                           value="0">
                                <div class="form-check">
                                    <input class="form-check-input" 
                                           type="checkbox" 
                                           name="is_required" 
                                           id="is_required" 
                                           value="1">
                                    <label class="form-check-label" for="is_required">
                                        This question is required
                                    </label>
                                </div>
                                <div class="form-text">Make this question mandatory</div>
                            </div>
                            <div class="col-md-4">
                                <input class="form-check-input" 
                                           type="hidden" 
                                           name="is_active" 
                                           value="0" 
                                           >
                                <label class="form-label">Status</label>
                                <div class="form-check">
                                    <input class="form-check-input" 
                                           type="checkbox" 
                                           name="is_active" 
                                           id="is_active" 
                                           value="1" 
                                           checked>
                                    <label class="form-check-label" for="is_active">
                                        Active
                                    </label>
                                </div>
                                <div class="form-text">Enable or disable this question</div>
                            </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="saveQuestionBtn">
                        <i class="fas fa-save"></i> Save Question
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- View Question Modal -->
    <div class="modal fade" id="viewQuestionModal" tabindex="-1" aria-labelledby="viewQuestionModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="viewQuestionModalLabel">View Question</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-12">
                            <label class="form-label fw-bold">Question Text:</label>
                            <p id="view-question" class="border p-3 rounded bg-light"></p>
                        </div>
                    </div>
                    
                    <div class="row mb-3">
                         <div class="col-md-4">
                            <label class="form-label fw-bold">Display Separately:</label>
                            <p id="view-show-separately"></p>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label fw-bold">Required:</label>
                            <p id="view-required"></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 mb-3">
                        <div class="col-md-6">
                            <label class="form-label fw-bold">Question Type:</label>
                            <p id="view-type"></p>
                        </div>
                    </div>
                    
                    <div class="row mb-3" id="view-options-section" style="display: none;">
                        <div class="col-md-12">
                            <label class="form-label fw-bold">Options:</label>
                            <div id="view-options" class="border p-3 rounded bg-light">
                                <!-- Options will be displayed here -->
                            </div>
                        </div>
                    </div>
                </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() {
    console.log('Report Questions module initialized');
    
    let searchTimeout;
    let optionIndex = 0;

    // Initialize sortable if tbody exists
    function initializeSortable() {
        const tbody = document.getElementById('question-tbody');
        if (tbody) {
            new Sortable(tbody, {
                animation: 150,
                handle: '.drag-handle',
                onEnd: function() {
                    updateSortOrder();
                }
            });
        }
    }

    // Initialize sortable on page load
    initializeSortable();

    // Search functionality with live search (no page refresh)
    $('#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 = $('#question-tbody');
        const $tableContainer = $('.table-responsive');
        const $noDataDiv = $('.text-center.py-4');
        
        $loading.show();
        
        $.ajax({
            url: '{{ route("report-templates.questions.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 questions found</h5>
                                    <p class="text-muted">Try adjusting your search criteria.</p>
                                </div>
                            `);
                        } else {
                            $noDataDiv.show();
                            $noDataDiv.find('h5').text('No questions found');
                            $noDataDiv.find('p').text('Try adjusting your search criteria.');
                        }
                    }
                    
                    // Show notification for search results
                    if (query) {
                        //showNotification('info', `Found ${response.count} question(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();
            }
        });
    }

    // Modal functionality
    $('#add-question-btn').on('click', function() {
        resetModal();
        $('#questionModalLabel').text('Add Question');
        $('#form_method').val('POST');
        $('#question_id').val('');
    });

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

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

    // Save question functionality
    $('#saveQuestionBtn').on('click', function() {
        saveQuestion();
    });

    // Question type change handler
    $('#type').on('change', function() {
        const selectedType = $(this).val();
        const requiresOptions = ['radio', 'checkbox', 'select'].includes(selectedType);
        
        if (requiresOptions) {
            $('#options-section').show();
        } else {
            $('#options-section').hide();
        }
    });

    // Add option button and enter key
    $('#add-option-btn').on('click', function() {
        addOptionTag();
    });
    
    $('#option-input').on('keypress', function(e) {
        if (e.which === 13) {
            e.preventDefault();
            addOptionTag();
        }
    });

    // Clear error when user starts typing
    $('#option-input').on('input', function() {
        if ($(this).val().trim().length > 0) {
            clearOptionError();
        }
    });

    // Reset modal function
    function resetModal() {
        $('#questionForm')[0].reset();
        $('#options-container').empty();
        $('#is_active').prop('checked', true);
        $('#type').val(''); // No default selection
        $('#options-section').hide(); // Hide options section initially
        clearOptionError(); // Clear any error states
        optionIndex = 0;
    }

    // Load question data for editing
    function loadQuestionData(id) {
        console.log('Loading question data for ID:', id);
        
        $.ajax({
            url: `{{ url('report-templates/questions') }}/${id}`,
            type: 'GET',
            headers: {
                'Accept': 'application/json',
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                'X-Requested-With': 'XMLHttpRequest'
            },
            success: function(response) {
                console.log('Success response:', response);
                
                if (response.status) {
                    const data = response.data;
                    
                    $('#questionModalLabel').text('Edit Question');
                    $('#form_method').val('PUT');
                    $('#question_id').val(data.id);
                    $('#question').val(data.question);
                    $('#type').val(data.type);
                    $('#show_separately').prop('checked', data.show_separately == 1);
                    $('#is_required').prop('checked', data.is_required == 1);
                    $('#is_active').prop('checked', data.is_active == 1);
                    
                    if ($('#tenant_id').length) {
                        $('#tenant_id').val(data.tenant_id).trigger('change');
                    }
                    
                    // Handle options
                    $('#options-container').empty();
                    optionIndex = 0;
                    
                    if (data.options && data.options.length > 0) {
                        data.options.forEach(function(option) {
                            addOptionTag(option.label);
                        });
                    }
                    
                    // Trigger question type change
                    $('#type').trigger('change');
                    
                    // Show modal
                    $('#questionModal').modal('show');
                } else {
                    console.error('Error in response:', response);
                    showNotification('error', response.message || 'Error loading question data');
                }
            },
            error: function(xhr, status, error) {
                console.error('AJAX Error:', {
                    status: xhr.status,
                    statusText: xhr.statusText,
                    responseText: xhr.responseText,
                    error: error
                });
                
                let errorMessage = 'Error loading question data';
                
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    errorMessage = xhr.responseJSON.message;
                } else if (xhr.status === 404) {
                    errorMessage = 'Question not found';
                } else if (xhr.status === 403) {
                    errorMessage = 'Access denied';
                } else if (xhr.status === 500) {
                    errorMessage = 'Server error occurred';
                }
                
                showNotification('error', errorMessage);
            }
        });
    }

    // Load question data for viewing (read-only)
    function loadQuestionDataForView(id) {
        console.log('Loading question data for view:', id);
        
        $.ajax({
            url: `{{ url('report-templates/questions') }}/${id}`,
            type: 'GET',
            headers: {
                'Accept': 'application/json',
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                'X-Requested-With': 'XMLHttpRequest'
            },
            success: function(response) {
                console.log('View success response:', response);
                
                if (response.status) {
                    const data = response.data;
                    
                    // Populate view modal
                    $('#view-question').text(data.question || 'N/A');
                    $('#view-type').html(`<span class="badge bg-secondary">${data.type ? data.type.charAt(0).toUpperCase() + data.type.slice(1) : 'N/A'}</span>`);
                    $('#view-status').html(data.is_active ? 
                        '<span class="badge bg-success">Active</span>' : 
                        '<span class="badge bg-danger">Inactive</span>');
                    $('#view-show-separately').html(data.show_separately ? 
                        '<span class="badge bg-success">Yes</span>' : 
                        '<span class="badge bg-secondary">No</span>');
                    $('#view-required').html(data.is_required ? 
                        '<span class="badge bg-warning">Required</span>' : 
                        '<span class="badge bg-secondary">Optional</span>');
                    
                    // Handle options display
                    const requiresOptions = ['radio', 'checkbox', 'select'].includes(data.type);
                    if (requiresOptions && data.options && data.options.length > 0) {
                        $('#view-options-section').show();
                        let optionsHtml = '<div class="d-flex flex-wrap gap-2">';
                        data.options.forEach(function(option) {
                            optionsHtml += `<span class="badge bg-primary fs-6 px-3 py-2">${option.label}</span>`;
                        });
                        optionsHtml += '</div>';
                        $('#view-options').html(optionsHtml);
                    } else {
                        $('#view-options-section').hide();
                    }
                    
                    // Show the modal
                    $('#viewQuestionModal').modal('show');
                } else {
                    showNotification('error', response.message || 'Error loading question data');
                }
            },
            error: function(xhr) {
                console.error('View AJAX Error:', {
                    status: xhr.status,
                    statusText: xhr.statusText,
                    responseText: xhr.responseText
                });
                
                let errorMessage = 'Error loading question data';
                
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    errorMessage = xhr.responseJSON.message;
                } else if (xhr.status === 404) {
                    errorMessage = 'Question not found';
                } else if (xhr.status === 403) {
                    errorMessage = 'Access denied';
                } else if (xhr.status === 500) {
                    errorMessage = 'Server error occurred';
                }
                
                showNotification('error', errorMessage);
            }
        });
    }

    // Add option tag function
    function addOptionTag(value = '') {
        const input = $('#option-input');
        const inputValue = value || input.val().trim();
        
        // Clear any previous error state
        clearOptionError();
        
        if (!inputValue) {
            if (!value) {
                showOptionError('Please enter an option value');
                input.focus();
            }
            return;
        }
        
        // Check for duplicates (case insensitive)
        let exists = false;
        let existingOption = '';
        $('#options-container .option-tag').each(function() {
            const existingValue = $(this).data('value');
            if (existingValue.toLowerCase() === inputValue.toLowerCase()) {
                exists = true;
                existingOption = existingValue;
                return false;
            }
        });
        
        if (exists) {
            showOptionError(`Option "${existingOption}" already exists! Please enter a different option.`);
            if (!value) {
                input.addClass('is-invalid');
                input.focus();
                // Highlight the existing option temporarily
                const existingTag = $(`#options-container .option-tag[data-value="${existingOption}"]`);
                existingTag.addClass('duplicate-highlight');
                setTimeout(() => {
                    existingTag.removeClass('duplicate-highlight');
                }, 2000);
            }
            return;
        }
        
        // Create option tag
        const tagHtml = `
            <span class="option-tag" data-value="${inputValue}">
                <span class="option-tag-text" title="${inputValue}">${inputValue}</span>
                <input type="hidden" name="options[${optionIndex}][label]" value="${inputValue}">
                <input type="hidden" name="options[${optionIndex}][value]" value="${inputValue}">
                <button type="button" class="remove-option" onclick="removeOptionTag(this)" title="Remove option">
                    <i class="fas fa-times"></i>
                </button>
            </span>
        `;
        
        $('#options-container').append(tagHtml);
        if (!value) {
            input.val('');
            input.removeClass('is-invalid');
        }
        optionIndex++;
        if (!value) input.focus();
    }

    // Show option error function
    function showOptionError(message) {
        $('#option-error-text').text(message);
        $('#option-error-message').slideDown(200);
    }

    // Clear option error function
    function clearOptionError() {
        $('#option-error-message').slideUp(200);
        $('#option-input').removeClass('is-invalid');
    }

    // Remove option tag function (global)
    window.removeOptionTag = function(button) {
        $(button).closest('.option-tag').remove();
        
        // Renumber remaining options
        $('#options-container .option-tag').each(function(index) {
            $(this).find('input[name*="[label]"]').attr('name', `options[${index}][label]`);
            $(this).find('input[name*="[value]"]').attr('name', `options[${index}][value]`);
        });
        
        optionIndex = $('#options-container .option-tag').length;
    };

    // Save question function
    function saveQuestion() {
        // Basic validation
        const question = $('#question').val().trim();
        const questionType = $('#type').val();
        
        if (!question) {
            showNotification('error', 'Question is required');
            return;
        }
        
        if (!questionType) {
            showNotification('error', 'Question type is required');
            return;
        }
        
        // Check options for types that require them
        if (['radio', 'checkbox', 'select'].includes(questionType)) {
            const optionsCount = $('#options-container .option-tag').length;
            if (optionsCount === 0) {
                showNotification('error', 'At least one option is required for this question type');
                return;
            }
        }
        
        const $btn = $('#saveQuestionBtn');
        $btn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Saving...');
        
        const formData = new FormData($('#questionForm')[0]);
        
        const url = $('#question_id').val() 
            ? `{{ url('report-templates/questions') }}/${$('#question_id').val()}`
            : '{{ route('report-templates.questions.store') }}';
            
        $.ajax({
            url: url,
            method: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
                if (response.status) {
                    showNotification('success', response.message || 'Question saved successfully');
                    $('#questionModal').modal('hide');
                    setTimeout(() => window.location.reload(), 1500);
                } else {
                    showNotification('error', response.message || 'Error saving question');
                }
            },
            error: function(xhr) {
                const response = xhr.responseJSON;
                if (xhr.status === 422 && response && response.errors) {
                    let errorMessage = 'Validation errors:\n';
                    Object.keys(response.errors).forEach(function(field) {
                        errorMessage += '• ' + response.errors[field][0] + '\n';
                    });
                    showNotification('error', errorMessage);
                } else {
                    showNotification('error', response?.message || 'Error saving question');
                }
            },
            complete: function() {
                $btn.prop('disabled', false).html('<i class="fas fa-save"></i> Save Question');
            }
        });
    }

    // Delete question handler
    $(document).on('click', '.delete-question-btn', function() {
        const questionId = $(this).data('id');
        const questionText = $(this).closest('tr').find('td:nth-child(2)').text().trim();
        
        Swal.fire({
            title: 'Are you sure?',
            text: `Do you want to delete the question: "${questionText}"?`,
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#3085d6',
            confirmButtonText: 'Yes, delete it!'
        }).then((result) => {
            if (result.isConfirmed) {
                deleteQuestion(questionId);
            }
        });
    });

    function deleteQuestion(questionId) {
        $.ajax({
            url: `{{ route('report-templates.questions.destroy', ':id') }}`.replace(':id', questionId),
            method: 'DELETE',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
                if (response.status) {
                    showNotification('success', response.message || 'Question deleted successfully');
                    setTimeout(() => window.location.reload(), 1500);
                } else {
                    showNotification('error', response.message || 'Error deleting question');
                }
            },
            error: function(xhr) {
                const response = xhr.responseJSON;
                showNotification('error', response?.message || 'Error deleting question');
            }
        });
    }

    function updateSortOrder() {
        const ids = [];
        $('#question-tbody tr').each(function() {
            ids.push($(this).data('id'));
        });

        $.ajax({
            url: '{{ route('report-templates.questions.update-order-bulk') }}',
            method: 'POST',
            data: {
                ids: ids,
                _token: $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
                if (response.status) {
                    showNotification('success', 'Order updated successfully');
                }
            },
            error: function() {
                showNotification('error', 'Error updating  order');
            }
        });
    }

});
</script>
@endpush