document.addEventListener('DOMContentLoaded', function () {
    const officeModal = new bootstrap.Modal(document.getElementById('office-modal'));
    const officeForm = document.getElementById('office-form');
    const officeTable = document.getElementById('offices-table').getElementsByTagName('tbody')[0];
    const modalLabel = document.getElementById('office-modal-label');

    // Function to fetch and display offices
    function loadOffices() {
        fetch('api/get_offices.php')
            .then(response => response.json())
            .then(data => {
                officeTable.innerHTML = '';
                if(data.success) {
                    data.offices.forEach(office => {
                        const row = officeTable.insertRow();
                        row.innerHTML = `
                            <td>${office.nama_kantor}</td>
                            <td>${office.alamat}</td>
                            <td>${office.tipe_kantor}</td>
                            <td>
                                <button class="btn btn-sm btn-outline-secondary edit-btn" data-id="${office.id}"><i data-feather="edit-2" class="feather-sm"></i></button>
                                <button class="btn btn-sm btn-outline-danger delete-btn" data-id="${office.id}"><i data-feather="trash-2" class="feather-sm"></i></button>
                            </td>
                        `;
                    });
                    feather.replace();
                }
            })
            .catch(error => console.error('Error loading offices:', error));
    }

    // Show modal for adding a new office
    document.getElementById('btn-add-office').addEventListener('click', function () {
        officeForm.reset();
        document.getElementById('office-id').value = '';
        modalLabel.textContent = 'Tambah Kantor Baru';
        officeModal.show();
    });

    // Handle form submission for both add and edit
    officeForm.addEventListener('submit', function (e) {
        e.preventDefault();
        const formData = new FormData(officeForm);
        const officeId = formData.get('id');
        const url = officeId ? 'api/update_office.php' : 'api/add_office.php';

        fetch(url, {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                officeModal.hide();
                loadOffices(); // Refresh the table
            } else {
                alert('Error: ' + data.message);
            }
        })
        .catch(error => console.error('Form submission error:', error));
    });

    // Handle edit and delete button clicks
    officeTable.addEventListener('click', function (e) {
        const target = e.target.closest('button');
        if (!target) return;

        const id = target.dataset.id;

        // Edit button
        if (target.classList.contains('edit-btn')) {
            // Fetch full details to edit
            fetch(`api/get_offices.php?id=${id}`) // We can reuse get_offices and filter by id server-side
                .then(response => response.json())
                .then(data => {
                    if (data.success && data.offices.length > 0) {
                        const office = data.offices[0];
                        document.getElementById('office-id').value = office.id;
                        document.getElementById('nama_kantor').value = office.nama_kantor;
                        document.getElementById('alamat').value = office.alamat;
                        document.getElementById('tipe_kantor').value = office.tipe_kantor;
                        
                        modalLabel.textContent = 'Edit Kantor';
                        officeModal.show();
                    } else {
                        alert('Error: Could not fetch office details.');
                    }
                });
        }

        // Delete button
        if (target.classList.contains('delete-btn')) {
            if (confirm('Apakah Anda yakin ingin menghapus kantor ini? Ini mungkin akan mempengaruhi pengguna dan aset yang terkait.')) {
                fetch('api/delete_office.php', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                    body: `id=${id}`
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        loadOffices(); // Refresh the table
                    } else {
                        alert('Error: ' + data.message);
                    }
                })
                .catch(error => console.error('Delete error:', error));
            }
        }
    });

    // Initial load of offices
    loadOffices();
});