{# Inline data modal component #}
<div class="modal fade" id="inlineModal" tabindex="-1">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="table-responsive">
                    <table class="table" id="inlineTable"></table>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.sortable {
    cursor: pointer;
}
.sortable:after {
    content: '';
    float: right;
    margin-top: 7px;
    border-width: 0 4px 4px;
    border-style: solid;
    border-color: #404040 transparent;
    visibility: hidden;
}
.sortable.asc:after {
    border-bottom: none;
    border-width: 4px 4px 0;
}
.sortable:hover:after {
    visibility: visible;
}
</style>

{% macro inline_modal_scripts() %}
<script>
(function() {
    let inlineModal = null;
    let currentOptions = null;

    // Initialize modal
    document.addEventListener('DOMContentLoaded', function() {
        inlineModal = new bootstrap.Modal(document.getElementById('inlineModal'));
    });

    // Show inline data modal
    window.showInlineModal = function(options) {
        if (!inlineModal) {
            inlineModal = new bootstrap.Modal(document.getElementById('inlineModal'));
        }

        currentOptions = options;
        
        // Set title
        document.querySelector('#inlineModal .modal-title').textContent = options.title;
        
        // Initialize table
        const $table = $('#inlineTable');
        
        // Reset table first
        $table.bootstrapTable('destroy');
        
        // Load data and initialize table
        const params = new URLSearchParams({
            parent_id: options.parentId,
            inline_model: options.model
        });
        
        fetch(`/admin/${options.route_id}/inline_data?${params}`)
            .then(response => response.json())
            .then(result => {
                if (result.success) {
                    // Build columns
                    const columns = result.fields.map(field => {
                        console.log('Processing field:', field);
                        return {
                            field: field.name,
                            title: field.label,
                            sortable: field.sortable,
                            width: field.width,
                            class: field.sortable ? 'sortable' : '',
                            formatter: function(value, row) {
                                const displayValue = row.display[field.name] || row.data[field.name] || '';
                                
                                // If field name contains "link" or "url", force link rendering
                                if (field.name.toLowerCase().includes('link') || field.name.toLowerCase().includes('url')) {
                                    return `<a href="${displayValue}" target="_blank" 
                                              class="text-decoration-none link-primary">${displayValue}</a>`;
                                }
                                
                                if (field.is_link || field.display_type === 'link') {
                                    const url = field.is_link ? displayValue : `/admin/${options.model}/${row.data.id}`;
                                    const target = field.is_link ? '_blank' : '_self';
                                    return `<a href="${url}" class="text-decoration-none link-primary" 
                                              target="${target}" title="View details">${displayValue}</a>`;
                                }
                                
                                switch (field.display_type) {
                                    case 'boolean':
                                        return displayValue === 'True' ? 
                                            '<i class="bi bi-check-circle text-success"></i>' : 
                                            '<i class="bi bi-x-circle text-danger"></i>';
                                    case 'datetime':
                                        return `<span class="text-muted">${displayValue}</span>`;
                                    case 'status':
                                        return `<span class="badge bg-primary">${displayValue}</span>`;
                                    default:
                                        return displayValue;
                                }
                            }
                        };
                    });
                    
                    // Add action column
                    columns.push({
                        field: 'operate',
                        title: 'Actions',
                        width: 150,
                        sortable: false,
                        formatter: function(value, row) {
                            return `
                                <button class="btn btn-sm btn-warning" onclick="editInlineRecord('${options.model}', '${row.data.id}')">
                                    <i class="bi bi-pencil"></i> Edit
                                </button>
                                <button class="btn btn-sm btn-danger" onclick="deleteInlineRecord('${options.model}', '${row.data.id}')">
                                    <i class="bi bi-trash"></i> Delete
                                </button>
                            `;
                        }
                    });

                    // Initialize table
                    $table.bootstrapTable({
                        columns: columns,
                        data: result.data,
                        pagination: true,
                        search: true,
                        pageSize: 10,
                        pageList: [10, 25, 50, 100],
                        showColumns: true,
                        showRefresh: true,
                        sortable: true,
                        sortStable: true,
                        serverSort: true,
                        sortName: options.config.default_ordering ? 
                            options.config.default_ordering[0].replace('-', '') : undefined,
                        sortOrder: options.config.default_ordering && 
                            options.config.default_ordering[0].startsWith('-') ? 'desc' : 'asc',
                        onSort: function(name, order) {
                            refreshInlineTable(name, order);
                        },
                        locale: 'en-US',
                        formatNoMatches: function() {
                            return 'No matching records found';
                        },
                        formatLoadingMessage: function() {
                            return 'Loading data...';
                        }
                    });
                    
                    // Show modal
                    inlineModal.show();
                } else {
                    console.error('Failed to load inline data:', result.error);
                }
            })
            .catch(error => {
                console.error('Error loading inline data:', error);
            });
    };

    // Refresh inline table data
    async function refreshInlineTable(sortField, sortOrder) {
        if (!currentOptions) return;
        
        try {
            const params = new URLSearchParams({
                parent_id: currentOptions.parentId,
                inline_model: currentOptions.model
            });
            
            if (sortField) {
                params.append('sort', sortField);
                params.append('order', sortOrder);
            }
            
            const response = await fetch(`/admin/${currentOptions.parentModel}/inline_data?${params}`);
            const result = await response.json();
            
            if (result.success) {
                $('#inlineTable').bootstrapTable('load', result.data);
            } else {
                console.error('Failed to refresh data:', result.error);
            }
        } catch (error) {
            console.error('Error refreshing inline table:', error);
        }
    }

    // Edit record
    window.editInlineRecord = function(model, id) {
        fetch(`/admin/${window.serverConfig.route_id}/${id}`)
            .then(response => response.json())
            .then(data => {
                showFormModal('edit', data);
            })
            .catch(error => {
                console.error('Error loading record:', error);
                alert('Failed to load data');
            });
    };

    // Delete record
    window.deleteInlineRecord = function(model, id) {
        if (confirm('Are you sure you want to delete this record?')) {
            fetch(`/admin/${window.serverConfig.route_id}/${id}/delete`, {
                method: 'POST'
            })
            .then(response => {
                if (response.ok) {
                    // Refresh table
                    $('#inlineTable').bootstrapTable('refresh');
                } else {
                    alert('Delete failed');
                }
            })
            .catch(error => {
                console.error('Delete error:', error);
                alert('Delete failed');
            });
        }
    };

    // Listen for successful form submit
    document.addEventListener('formSubmitSuccess', function() {
        // Refresh inline table
        if (inlineModal && inlineModal._element.classList.contains('show')) {
            $('#inlineTable').bootstrapTable('refresh');
        }
    });
})();
</script>
{% endmacro %}