document.addEventListener('DOMContentLoaded', function() {
    // Modal functions
    window.openModal = function(modalId) {
        const modal = document.getElementById(modalId);
        if (modal) {
            modal.classList.remove('hidden');
            modal.classList.add('flex');
            // Prevent body scrolling when modal is open
            document.body.style.overflow = 'hidden';
        }
    };

    window.closeModal = function(modalId) {
        const modal = document.getElementById(modalId);
        if (modal) {
            modal.classList.remove('flex');
            modal.classList.add('hidden');
            // Restore body scrolling
            document.body.style.overflow = 'auto';
        }
    };

    // Close modal when clicking outside
    const modals = document.querySelectorAll('.modal');
    modals.forEach(modal => {
        modal.addEventListener('click', function(event) {
            if (event.target === this) {
                closeModal(this.id);
            }
        });
    });

    // Handle edit modal
    window.openEditModal = function(tableId) {
        const table = window.tables.find(t => t.id === parseInt(tableId));
        if (table) {
            // Set form values
            document.getElementById('edit_nomor_meja').value = table.nomor_meja;
            document.getElementById('edit_kapasitas').value = table.kapasitas;
            document.getElementById('edit_kategori').value = table.kategori;
            document.getElementById('edit_status').value = table.status;
            
            // Set form action URL
            const form = document.getElementById('editTableForm');
            form.action = `/admin/tables/${tableId}`;
            
            // Open modal
            openModal('editTableModal');
        }
    };

    // Handle form submission
    const editForm = document.getElementById('editTableForm');
    if (editForm) {
        editForm.addEventListener('submit', function(e) {
            e.preventDefault();
            
            // Submit form using fetch
            fetch(this.action, {
                method: 'POST',
                body: new FormData(this),
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // Reload page to show updated data
                    window.location.reload();
                } else {
                    // Show error message
                    alert('Terjadi kesalahan saat memperbarui meja');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('Terjadi kesalahan saat memperbarui meja');
            });
        });
    }

    // Close modals with Escape key
    document.addEventListener('keydown', function(event) {
        if (event.key === 'Escape') {
            const visibleModals = document.querySelectorAll('.modal.flex');
            visibleModals.forEach(modal => {
                closeModal(modal.id);
            });
        }
    });
});