@extends('layouts.app')

@section('content')
<div id="main-content">
    <div class="container-fluid">
        <div class="row">
            <div id="region-main" class="content-col col-md-12">
                <div id="page-content">
                    <span class="notifications" id="user-notifications"></span>
                    <div role="main">
                        <span id="maincontent"></span>
                        <div class="">
                            <h2>Mapping Exam cho Domain × Campaign</h2>
                            <div class="message-class">
                                @if(session('success'))
                                    <div class="alert alert-success alert-dismissible" role="alert">
                                        <div id="content_message">{{ session('success') }}</div>
                                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                            <span aria-hidden="true">×</span>
                                        </button>
                                    </div>
                                @endif

                                @if(session('error'))
                                    <div class="alert alert-danger alert-dismissible" role="alert">
                                        <div id="content_message">{{ session('error') }}</div>
                                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                            <span aria-hidden="true">×</span>
                                        </button>
                                    </div>
                                @endif
                            </div>
                        </div>
                        
                        <div class="alert alert-info mb-3">
                            <strong>Hướng dẫn:</strong>
                            <ul class="mb-0">
                                <li>Bảng dưới đây hiển thị tất cả combinations của Domain × Campaign</li>
                                <li>Click nút "Chọn Exam" để assign exam cho mỗi combination</li>
                                <li>Exam Final URL sẽ được tạo theo format: <code>{domain}/{tenant_code}/{campaign_code}/{exam_slug}</code></li>
                            </ul>
                        </div>

                        <div class="wrapper-table-scroll">
                            <table class="table-scroll table-role table-bordered">
                                <thead class="thead-light">
                                    <tr>
                                        <th><div>STT</div></th>
                                        <th><div>Domain</div></th>
                                        <th><div>Tenant Code</div></th>
                                        <th><div>Campaign</div></th>
                                        <th><div>Campaign Code</div></th>
                                        <th style="min-width: 300px;"><div>Exam</div></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($matrix as $index => $item)
                                        <tr id="mapping-row-{{ $item['domain_id'] }}-{{ $item['campaign_id'] }}">
                                            <td>{{ $index + 1 }}</td>
                                            <td class="text-left">{{ $item['domain'] }}</td>
                                            <td>{{ $item['tenant_code'] }}</td>
                                            <td>{{ $item['campaign_name'] }}</td>
                                            <td>{{ $item['campaign_code'] }}</td>
                                            <td>
                                                <div id="exam-display-{{ $item['domain_id'] }}-{{ $item['campaign_id'] }}">
                                                    @if($item['exam'])
                                                        <div class="d-flex align-items-center justify-content-between">
                                                            <span class="badge badge-success p-2">
                                                                {{ $item['exam']->name }} (ID: {{ $item['exam']->ems_id }})
                                                            </span>
                                                            <div class="btn-group ml-2">
                                                                <button type="button" class="btn btn-sm btn-info" 
                                                                        onclick="openConfigModal({{ $item['exam']->id }}, {{ $item['campaign_id'] }}, '{{ $item['exam']->name }}', '{{ $item['campaign_name'] }}')"
                                                                        title="Cấu hình">
                                                                    <i class="fas fa-cog"></i>
                                                                </button>
                                                                <button type="button" class="btn btn-sm btn-danger" 
                                                                        onclick="removeExam({{ $item['mapping_id'] }}, {{ $item['domain_id'] }}, {{ $item['campaign_id'] }})"
                                                                        title="Xóa">
                                                                    <i class="fas fa-trash"></i>
                                                                </button>
                                                            </div>
                                                        </div>
                                                    @else
                                                        <button type="button" class="btn btn-sm btn-primary" 
                                                                onclick="openExamSelectorModal({{ $item['domain_id'] }}, {{ $item['campaign_id'] }}, '{{ $item['domain'] }}', '{{ $item['campaign_name'] }}', '{{ $item['campaign_code'] }}')">
                                                            <i class="fas fa-plus"></i> Chọn Exam
                                                        </button>
                                                    @endif
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Exam Selector Modal -->
<div class="modal fade" id="examSelectorModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Chọn Exam</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <p><strong>Domain:</strong> <span id="modal_domain"></span></p>
                    <p><strong>Campaign:</strong> <span id="modal_campaign"></span> (<span id="modal_campaign_code"></span>)</p>
                </div>
                <input type="hidden" id="modal_domain_id">
                <input type="hidden" id="modal_campaign_id">
                
                <div class="mb-3">
                    <input type="text" id="exam_search_modal" class="form-control" placeholder="Tìm kiếm exam...">
                </div>
                
                <div style="max-height: 400px; overflow-y: auto;">
                    <table class="table table-striped table-bordered">
                        <thead>
                            <tr>
                                <th>EMS ID</th>
                                <th>Tên Exam</th>
                                <th>Slug</th>
                                <th>Hành động</th>
                            </tr>
                        </thead>
                        <tbody id="exam_list_tbody">
                            @foreach($exams as $exam)
                                <tr class="exam-row" data-exam-name="{{ $exam->name }}">
                                    <td>{{ $exam->ems_id }}</td>
                                    <td>{{ $exam->name }}</td>
                                    <td>{{ $exam->slug }}</td>
                                    <td>
                                        <button type="button" class="btn btn-sm btn-success" 
                                                onclick="selectExamForMapping({{ $exam->id }}, '{{ $exam->name }}', '{{ $exam->slug }}', '{{ $exam->ems_id }}')">
                                            Chọn
                                        </button>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Đóng</button>
            </div>
        </div>
    </div>
</div>

<script>
let currentDomainId, currentCampaignId;

function openExamSelectorModal(domainId, campaignId, domainName, campaignName, campaignCode) {
    currentDomainId = domainId;
    currentCampaignId = campaignId;
    
    document.getElementById('modal_domain_id').value = domainId;
    document.getElementById('modal_campaign_id').value = campaignId;
    document.getElementById('modal_domain').textContent = domainName;
    document.getElementById('modal_campaign').textContent = campaignName;
    document.getElementById('modal_campaign_code').textContent = campaignCode;
    
    $('#examSelectorModal').modal('show');
}

function selectExamForMapping(examId, examName, examSlug, emsId) {
    const domainId = document.getElementById('modal_domain_id').value;
    const campaignId = document.getElementById('modal_campaign_id').value;
    
    $.ajax({
        url: '{{ route("exam-mapping.assign") }}',
        type: 'POST',
        data: {
            _token: '{{ csrf_token() }}',
            domain_id: domainId,
            campaign_id: campaignId,
            exam_id: examId
        },
        success: function(response) {
            if (response.success) {
                // Update the display in the table
                const displayDiv = document.getElementById(`exam-display-${domainId}-${campaignId}`);
                displayDiv.innerHTML = `
                    <div class="d-flex align-items-center justify-content-between">
                        <span class="badge badge-success p-2">
                            ${examName} (ID: ${emsId})
                        </span>
                        <button type="button" class="btn btn-sm btn-danger ml-2" 
                                onclick="removeExam(null, ${domainId}, ${campaignId})">
                            <i class="fas fa-trash"></i>
                        </button>
                    </div>
                `;
                
                $('#examSelectorModal').modal('hide');
                
                // Show success message
                showMessage('success', 'Exam đã được assign thành công!');
            }
        },
        error: function(xhr) {
            showMessage('error', 'Lỗi khi assign exam: ' + (xhr.responseJSON?.message || 'Unknown error'));
        }
    });
}

function removeExam(mappingId, domainId, campaignId) {
    if (!confirm('Bạn có chắc chắn muốn xóa exam này khỏi mapping?')) {
        return;
    }
    
    // If no mappingId, need to find it first
    if (!mappingId) {
        // For now, reload the page
        location.reload();
        return;
    }
    
    $.ajax({
        url: '{{ route("exam-mapping.remove") }}',
        type: 'POST',
        data: {
            _token: '{{ csrf_token() }}',
            mapping_id: mappingId
        },
        success: function(response) {
            if (response.success) {
                // Update the display
                const displayDiv = document.getElementById(`exam-display-${domainId}-${campaignId}`);
                displayDiv.innerHTML = `
                    <button type="button" class="btn btn-sm btn-primary" 
                            onclick="openExamSelectorModal(${domainId}, ${campaignId}, '', '', '')">
                        <i class="fas fa-plus"></i> Chọn Exam
                    </button>
                `;
                
                showMessage('success', 'Exam đã được xóa khỏi mapping!');
            }
        },
        error: function(xhr) {
            showMessage('error', 'Lỗi khi xóa exam: ' + (xhr.responseJSON?.message || 'Unknown error'));
        }
    });
}

function showMessage(type, message) {
    const alertClass = type === 'success' ? 'alert-success' : 'alert-danger';
    const alertHtml = `
        <div class="alert ${alertClass} alert-dismissible" role="alert">
            <div>${message}</div>
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">×</span>
            </button>
        </div>
    `;
    $('.message-class').html(alertHtml);
    
    // Auto dismiss after 3 seconds
    setTimeout(() => {
        $('.alert').fadeOut();
    }, 3000);
}

// Search exams in modal
document.addEventListener('DOMContentLoaded', function() {
    const searchInput = document.getElementById('exam_search_modal');
    if (searchInput) {
        searchInput.addEventListener('input', function(e) {
            const searchTerm = e.target.value.toLowerCase();
            const rows = document.querySelectorAll('.exam-row');
            
            rows.forEach(row => {
                const examName = row.getAttribute('data-exam-name').toLowerCase();
                if (examName.includes(searchTerm)) {
                    row.style.display = '';
                } else {
                    row.style.display = 'none';
                }
            });
        });
    }
});

// Config Modal Functions
function openConfigModal(examId, campaignId, examName, campaignName) {
    document.getElementById('config_modal_exam_id').value = examId;
    document.getElementById('config_modal_campaign_id').value = campaignId;
    document.getElementById('config_modal_title').textContent = `Cấu hình: ${examName} - ${campaignName}`;
    
    // Load existing configs
    loadConfigs(examId, campaignId);
    
    // Show modal
    $('#configModal').modal('show');
}

function loadConfigs(examId, campaignId) {
    const configsList = document.getElementById('configsList');
    configsList.innerHTML = '<div class="text-center"><i class="fas fa-spinner fa-spin"></i> Đang tải...</div>';
    
    fetch(`/api/exam-configs/get-configs?exam_id=${examId}&campaign_id=${campaignId}&tenant_connection={{ $tenantConnection }}`, {
        method: 'GET',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'Accept': 'application/json'
        },
        credentials: 'same-origin'
    })
    .then(response => {
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        return response.json();
    })
    .then(data => {
        if (data.success) {
            displayConfigs(data.configs);
        } else {
            configsList.innerHTML = '<div class="alert alert-danger">Có lỗi xảy ra khi tải cấu hình.</div>';
        }
    })
    .catch(error => {
        console.error('Error loading configs:', error);
        configsList.innerHTML = '<div class="alert alert-danger">Có lỗi xảy ra khi tải cấu hình. Vui lòng thử lại.</div>';
    });
}

// Store configs globally for edit functionality
let currentConfigs = [];

function displayConfigs(configs) {
    currentConfigs = configs; // Store for edit
    const configsList = document.getElementById('configsList');
    
    if (configs.length === 0) {
        configsList.innerHTML = '<div class="text-center text-muted">Chưa có cấu hình nào.</div>';
        return;
    }
    
    let html = '<div class="table-responsive"><table class="table table-sm table-striped" id="configs-table">';
    html += '<thead><tr><th width="50">Order</th><th>Name</th><th>Type</th><th>Placeholder</th><th>Class</th><th>Required</th><th width="150">Actions</th></tr></thead><tbody id="sortable-configs">';
    
    configs.forEach((config, index) => {
        html += `
            <tr data-id="${config.id}" data-order="${config.order || index + 1}">
                <td class="text-center">
                    <i class="fas fa-grip-vertical" style="cursor: move; color: #999;"></i>
                </td>
                <td><strong>${config.field_name || config.key}</strong></td>
                <td><span class="badge badge-info">${config.input_type || 'text'}</span></td>
                <td>${config.placeholder || '-'}</td>
                <td><code>${config.field_class || 'form-control'}</code></td>
                <td>
                    ${config.is_required ? 
                        '<span class="badge badge-danger"><i class="fas fa-check"></i> Required</span>' : 
                        '<span class="badge badge-success"><i class="fas fa-times"></i> Optional</span>'
                    }
                </td>
                <td>
                    <button type="button" class="btn btn-sm btn-primary" onclick="moveUp(${config.id})" title="Move up">
                        <i class="fas fa-arrow-up"></i>
                    </button>
                    <button type="button" class="btn btn-sm btn-primary" onclick="moveDown(${config.id})" title="Move down">
                        <i class="fas fa-arrow-down"></i>
                    </button>
                    <button type="button" class="btn btn-sm btn-warning" onclick="editConfig(${config.id})" title="Edit">
                        <i class="fas fa-edit"></i>
                    </button>
                    <button type="button" class="btn btn-sm btn-danger" onclick="deleteConfig(${config.id})">
                        <i class="fas fa-trash"></i>
                    </button>
                </td>
            </tr>
        `;
    });
    
    html += '</tbody></table></div>';
    configsList.innerHTML = html;
}

function addConfig() {
    const examId = document.getElementById('config_modal_exam_id').value;
    const campaignId = document.getElementById('config_modal_campaign_id').value;
    const inputType = document.getElementById('config_input_type').value;
    const placeholder = document.getElementById('config_placeholder').value;
    const fieldId = document.getElementById('config_field_id').value;
    const fieldName = document.getElementById('config_field_name').value;
    const fieldClass = document.getElementById('config_field_class').value;
    const value = document.getElementById('config_value').value;
    const isRequired = document.getElementById('config_is_required').checked;
    const requiredMessage = document.getElementById('config_required_message').value;
    
    if (!fieldName.trim()) {
        alert('Vui lòng nhập Name.');
        return;
    }
    
    // Check if CSRF token exists
    const csrfToken = document.querySelector('meta[name="csrf-token"]');
    if (!csrfToken) {
        showAlert('danger', 'CSRF token không tìm thấy. Vui lòng refresh trang.');
        return;
    }
    
    const requestData = {
        exam_id: examId,
        campaign_id: campaignId,
        key: fieldName, // Use fieldName as key
        input_type: inputType,
        placeholder: placeholder,
        field_id: fieldId,
        field_name: fieldName,
        field_class: fieldClass,
        value: value,
        is_required: isRequired ? 1 : 0,
        required_message: requiredMessage,
        tenant_connection: '{{ $tenantConnection }}'
    };
    
    fetch('/api/exam-configs/store-config', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': csrfToken.getAttribute('content'),
            'Accept': 'application/json'
        },
        credentials: 'same-origin',
        body: JSON.stringify(requestData)
    })
    .then(response => {
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        return response.json();
    })
    .then(data => {
        if (data.success) {
            // Clear form
            document.getElementById('config_input_type').value = 'text';
            document.getElementById('config_placeholder').value = '';
            document.getElementById('config_field_id').value = '';
            document.getElementById('config_field_name').value = '';
            document.getElementById('config_field_class').value = 'form-control';
            document.getElementById('config_value').value = '';
            document.getElementById('config_is_required').checked = false;
            document.getElementById('config_required_message').value = '';
            
            // Reload configs
            loadConfigs(examId, campaignId);
            
            // Show success message
            showAlert('success', data.message);
        } else {
            showAlert('danger', data.message || 'Có lỗi xảy ra khi tạo cấu hình.');
        }
    })
    .catch(error => {
        console.error('Error adding config:', error);
        showAlert('danger', 'Có lỗi xảy ra khi tạo cấu hình. Vui lòng thử lại.');
    });
}

function editConfig(configId) {
    const config = currentConfigs.find(c => c.id === configId);
    if (!config) {
        showAlert('danger', 'Không tìm thấy cấu hình.');
        return;
    }
    
    // Fill form with config data
    document.getElementById('edit_config_id').value = config.id;
    document.getElementById('edit_config_input_type').value = config.input_type || 'text';
    document.getElementById('edit_config_placeholder').value = config.placeholder || '';
    document.getElementById('edit_config_field_id').value = config.field_id || '';
    document.getElementById('edit_config_field_name').value = config.field_name || config.key;
    document.getElementById('edit_config_field_class').value = config.field_class || 'form-control';
    document.getElementById('edit_config_key').value = config.key || '';
    document.getElementById('edit_config_is_required').checked = config.is_required ? true : false;
    document.getElementById('edit_config_required_message').value = config.required_message || '';
    
    // Show edit form, hide add form
    document.getElementById('add-config-card').style.display = 'none';
    document.getElementById('edit-config-card').style.display = 'block';
}

function cancelEdit() {
    // Hide edit form, show add form
    document.getElementById('edit-config-card').style.display = 'none';
    document.getElementById('add-config-card').style.display = 'block';
    
    // Clear form
    document.getElementById('edit_config_id').value = '';
}

function updateConfig() {
    const examId = document.getElementById('config_modal_exam_id').value;
    const campaignId = document.getElementById('config_modal_campaign_id').value;
    const configId = document.getElementById('edit_config_id').value;
    const inputType = document.getElementById('edit_config_input_type').value;
    const placeholder = document.getElementById('edit_config_placeholder').value;
    const fieldId = document.getElementById('edit_config_field_id').value;
    const fieldName = document.getElementById('edit_config_field_name').value;
    const fieldClass = document.getElementById('edit_config_field_class').value;
    const key = document.getElementById('edit_config_key').value;
    const isRequired = document.getElementById('edit_config_is_required').checked;
    const requiredMessage = document.getElementById('edit_config_required_message').value;
    
    if (!fieldName.trim()) {
        alert('Vui lòng nhập Name.');
        return;
    }
    
    // Check if CSRF token exists
    const csrfToken = document.querySelector('meta[name="csrf-token"]');
    if (!csrfToken) {
        showAlert('danger', 'CSRF token không tìm thấy. Vui lòng refresh trang.');
        return;
    }
    
    const requestData = {
        config_id: configId,
        exam_id: examId,
        campaign_id: campaignId,
        key: key,
        input_type: inputType,
        placeholder: placeholder,
        field_id: fieldId,
        field_name: fieldName,
        field_class: fieldClass,
        value: fieldName,
        is_required: isRequired ? 1 : 0,
        required_message: requiredMessage,
        tenant_connection: '{{ $tenantConnection }}'
    };
    
    fetch('/api/exam-configs/update-config', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': csrfToken.getAttribute('content'),
            'Accept': 'application/json'
        },
        credentials: 'same-origin',
        body: JSON.stringify(requestData)
    })
    .then(response => {
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        return response.json();
    })
    .then(data => {
        if (data.success) {
            // Hide edit form, show add form
            cancelEdit();
            
            // Reload configs
            loadConfigs(examId, campaignId);
            
            // Show success message
            showAlert('success', data.message);
        } else {
            showAlert('danger', data.message || 'Có lỗi xảy ra khi cập nhật cấu hình.');
        }
    })
    .catch(error => {
        console.error('Error updating config:', error);
        showAlert('danger', 'Có lỗi xảy ra khi cập nhật cấu hình. Vui lòng thử lại.');
    });
}

function deleteConfig(configId) {
    if (!confirm('Bạn có chắc chắn muốn xóa cấu hình này?')) {
        return;
    }
    
    // Check if CSRF token exists
    const csrfToken = document.querySelector('meta[name="csrf-token"]');
    if (!csrfToken) {
        showAlert('danger', 'CSRF token không tìm thấy. Vui lòng refresh trang.');
        return;
    }
    
    const requestData = {
        config_id: configId,
        tenant_connection: '{{ $tenantConnection }}'
    };
    
    fetch('/api/exam-configs/delete-config', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': csrfToken.getAttribute('content'),
            'Accept': 'application/json'
        },
        credentials: 'same-origin',
        body: JSON.stringify(requestData)
    })
    .then(response => {
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        return response.json();
    })
    .then(data => {
        if (data.success) {
            const examId = document.getElementById('config_modal_exam_id').value;
            const campaignId = document.getElementById('config_modal_campaign_id').value;
            loadConfigs(examId, campaignId);
            showAlert('success', data.message);
        } else {
            showAlert('danger', data.message || 'Có lỗi xảy ra khi xóa cấu hình.');
        }
    })
    .catch(error => {
        console.error('Error deleting config:', error);
        showAlert('danger', 'Có lỗi xảy ra khi xóa cấu hình. Vui lòng thử lại.');
    });
}

function moveUp(configId) {
    const examId = document.getElementById('config_modal_exam_id').value;
    const campaignId = document.getElementById('config_modal_campaign_id').value;
    
    const tbody = document.getElementById('sortable-configs');
    const rows = Array.from(tbody.querySelectorAll('tr'));
    const currentRow = rows.find(row => row.dataset.id == configId);
    const currentIndex = rows.indexOf(currentRow);
    
    if (currentIndex === 0) {
        showAlert('info', 'Đã ở vị trí đầu tiên.');
        return;
    }
    
    // Swap with previous row
    const previousRow = rows[currentIndex - 1];
    tbody.insertBefore(currentRow, previousRow);
    
    // Update order in database
    updateConfigOrder(examId, campaignId);
}

function moveDown(configId) {
    const examId = document.getElementById('config_modal_exam_id').value;
    const campaignId = document.getElementById('config_modal_campaign_id').value;
    
    const tbody = document.getElementById('sortable-configs');
    const rows = Array.from(tbody.querySelectorAll('tr'));
    const currentRow = rows.find(row => row.dataset.id == configId);
    const currentIndex = rows.indexOf(currentRow);
    
    if (currentIndex === rows.length - 1) {
        showAlert('info', 'Đã ở vị trí cuối cùng.');
        return;
    }
    
    // Swap with next row
    const nextRow = rows[currentIndex + 1];
    tbody.insertBefore(nextRow, currentRow);
    
    // Update order in database
    updateConfigOrder(examId, campaignId);
}

function updateConfigOrder(examId, campaignId) {
    const tbody = document.getElementById('sortable-configs');
    const rows = Array.from(tbody.querySelectorAll('tr'));
    
    const orders = rows.map((row, index) => ({
        id: parseInt(row.dataset.id),
        order: index + 1
    }));
    
    // Check if CSRF token exists
    const csrfToken = document.querySelector('meta[name="csrf-token"]');
    if (!csrfToken) {
        showAlert('danger', 'CSRF token không tìm thấy. Vui lòng refresh trang.');
        return;
    }
    
    const requestData = {
        orders: orders,
        tenant_connection: '{{ $tenantConnection }}'
    };
    
    fetch('/api/exam-configs/update-order', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': csrfToken.getAttribute('content'),
            'Accept': 'application/json'
        },
        credentials: 'same-origin',
        body: JSON.stringify(requestData)
    })
    .then(response => {
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        return response.json();
    })
    .then(data => {
        if (data.success) {
            // Update data-order attributes
            rows.forEach((row, index) => {
                row.dataset.order = index + 1;
            });
            showAlert('success', 'Đã cập nhật thứ tự.');
        } else {
            showAlert('danger', data.message || 'Có lỗi xảy ra khi cập nhật thứ tự.');
        }
    })
    .catch(error => {
        console.error('Error updating order:', error);
        showAlert('danger', 'Có lỗi xảy ra khi cập nhật thứ tự. Vui lòng thử lại.');
    });
}

function showAlert(type, message) {
    const alertDiv = document.createElement('div');
    alertDiv.className = `alert alert-${type} alert-dismissible fade show`;
    alertDiv.innerHTML = `
        ${message}
        <button type="button" class="close" data-dismiss="alert">
            <span>&times;</span>
        </button>
    `;
    
    const configModalBody = document.querySelector('#configModal .modal-body');
    configModalBody.insertBefore(alertDiv, configModalBody.firstChild);
    
    // Auto remove after 3 seconds
    setTimeout(() => {
        alertDiv.remove();
    }, 3000);
}
</script>

<!-- Config Modal -->
<div class="modal fade" id="configModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="config_modal_title">Cấu hình Exam</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="config_modal_exam_id">
                <input type="hidden" id="config_modal_campaign_id">
                
                <!-- Add Config Form -->
                <div class="card mb-3" id="add-config-card">
                    <div class="card-header">
                        <h6 class="mb-0">Thêm cấu hình mới</h6>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label>Input Type</label>
                                    <select id="config_input_type" class="form-control">
                                        <option value="text">Text</option>
                                        <option value="email">Email</option>
                                        <option value="tel">Phone</option>
                                        <option value="number">Number</option>
                                        <option value="date">Date</option>
                                        <option value="textarea">Textarea</option>
                                        <option value="select">Select</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label>Placeholder</label>
                                    <input type="text" id="config_placeholder" class="form-control" placeholder="Placeholder text">
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label>ID</label>
                                    <input type="text" id="config_field_id" class="form-control" placeholder="Field ID">
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label>Label <span class="text-danger">*</span></label>
                                    <input type="text" id="config_field_name" class="form-control" placeholder="Label" required>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label>Class</label>
                                    <input type="text" id="config_field_class" class="form-control" value="form-control" placeholder="CSS Classes">
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label>Name <span class="text-danger">*</span></label>
                                    <input type="text" id="config_value" class="form-control" placeholder="Name" required>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label>&nbsp;</label>
                                    <div class="form-check">
                                        <input type="checkbox" id="config_is_required" class="form-check-input">
                                        <label class="form-check-label" for="config_is_required">
                                            Required
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label>Required Message</label>
                                    <input type="text" id="config_required_message" class="form-control" placeholder="Required message">
                                </div>
                            </div>
                        </div>
                        <button type="button" class="btn btn-primary" onclick="addConfig()">
                            <i class="fas fa-plus"></i> Thêm
                        </button>
                    </div>
                </div>
                
                <!-- Edit Config Form -->
                <div class="card mb-3" id="edit-config-card" style="display: none;">
                    <div class="card-header bg-warning">
                        <h6 class="mb-0">Chỉnh sửa cấu hình</h6>
                    </div>
                    <div class="card-body">
                        <input type="hidden" id="edit_config_id">
                        <div class="row">
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label>Input Type</label>
                                    <select id="edit_config_input_type" class="form-control">
                                        <option value="text">Text</option>
                                        <option value="email">Email</option>
                                        <option value="tel">Phone</option>
                                        <option value="number">Number</option>
                                        <option value="date">Date</option>
                                        <option value="textarea">Textarea</option>
                                        <option value="select">Select</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label>Placeholder</label>
                                    <input type="text" id="edit_config_placeholder" class="form-control" placeholder="Placeholder text">
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label>ID</label>
                                    <input type="text" id="edit_config_field_id" class="form-control" placeholder="Field ID">
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label>Label <span class="text-danger">*</span></label>
                                    <input type="text" id="edit_config_field_name" class="form-control" placeholder="Label" required>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label>Class</label>
                                    <input type="text" id="edit_config_field_class" class="form-control" placeholder="CSS Classes">
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label>Name <span class="text-danger">*</span></label>
                                    <input type="text" id="edit_config_key" class="form-control" placeholder="Name" required>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label>&nbsp;</label>
                                    <div class="form-check">
                                        <input type="checkbox" id="edit_config_is_required" class="form-check-input">
                                        <label class="form-check-label" for="edit_config_is_required">
                                            Required
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label>Required Message</label>
                                    <input type="text" id="edit_config_required_message" class="form-control" placeholder="Required message">
                                </div>
                            </div>
                        </div>
                        <button type="button" class="btn btn-success" onclick="updateConfig()">
                            <i class="fas fa-save"></i> Cập nhật
                        </button>
                        <button type="button" class="btn btn-secondary" onclick="cancelEdit()">
                            <i class="fas fa-times"></i> Hủy
                        </button>
                    </div>
                </div>
                
                <!-- Configs List -->
                <div class="card">
                    <div class="card-header">
                        <h6 class="mb-0">Danh sách cấu hình</h6>
                    </div>
                    <div class="card-body">
                        <div id="configsList">
                            <!-- Configs will be loaded here -->
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Đóng</button>
            </div>
        </div>
    </div>
</div>
@endsection