// ... existing code ...

// Modifikasi fungsi editKumuh untuk menangani preview foto
function editKumuh(id) {
    $.ajax({
        // ... existing code ...
        success: function(response) {
            if (response.data) {
                // ... existing code ...

                // Preview foto yang ada
                var fotoUrl = "/sinar/storage/app/public/foto_permukiman/" + id + ".jpeg";
                var img = new Image();
                img.onload = function() {
                    const container = document.querySelector('#edit_foto_preview .image-container');
                    container.innerHTML = `
                        <img src="${fotoUrl}" 
                             class="img-fluid" 
                             style="width: 100%; height: 100%; object-fit: contain; transform-origin: center center; transition: transform 0.3s ease;" 
                             data-rotation="0">
                    `;
                    // Inisialisasi zoom untuk foto saat ini
                    initZoom(container);
                    
                    // Tampilkan tombol rotasi
                    document.getElementById('rotate_buttons').style.display = 'block';
                };
                img.onerror = function() {
                    const container = document.querySelector('#edit_foto_preview .image-container');
                    container.innerHTML = '<div class="alert alert-info">Foto tidak tersedia</div>';
                    document.getElementById('rotate_buttons').style.display = 'none';
                };
                img.src = fotoUrl;

                // ... existing code ...
            }
        }
    });
}

// Tambahkan fungsi zoom untuk foto
function initZoom(container) {
    let scale = 1;
    let panning = false;
    let pointX = 0;
    let pointY = 0;
    let start = { x: 0, y: 0 };

    const img = container.querySelector('img');
    if (!img) return;

    // Zoom dengan mouse wheel
    container.addEventListener('wheel', (e) => {
        e.preventDefault();
        const xs = (e.clientX - container.getBoundingClientRect().left) / scale;
        const ys = (e.clientY - container.getBoundingClientRect().top) / scale;
        
        const delta = e.deltaY > 0 ? 0.9 : 1.1;
        scale *= delta;
        // Batasi zoom
        scale = Math.min(Math.max(1, scale), 4);
        
        pointX = xs * scale - xs;
        pointY = ys * scale - ys;
        
        img.style.transform = `translate(${-pointX}px, ${-pointY}px) scale(${scale}) rotate(${img.getAttribute('data-rotation') || 0}deg)`;
    });

    // Pan dengan mouse drag
    container.addEventListener('mousedown', (e) => {
        e.preventDefault();
        start = { x: e.clientX - pointX, y: e.clientY - pointY };
        panning = true;
    });

    container.addEventListener('mousemove', (e) => {
        e.preventDefault();
        if (!panning) return;
        
        pointX = (e.clientX - start.x);
        pointY = (e.clientY - start.y);
        
        img.style.transform = `translate(${-pointX}px, ${-pointY}px) scale(${scale}) rotate(${img.getAttribute('data-rotation') || 0}deg)`;
    });

    container.addEventListener('mouseup', () => {
        panning = false;
    });

    // Reset zoom dengan double click
    container.addEventListener('dblclick', (e) => {
        e.preventDefault();
        scale = 1;
        pointX = 0;
        pointY = 0;
        img.style.transform = `rotate(${img.getAttribute('data-rotation') || 0}deg)`;
    });
}

// Tambahkan CSS untuk mendukung zoom
document.head.insertAdjacentHTML('beforeend', `
    <style>
        .image-container {
            position: relative;
            overflow: hidden;
            cursor: grab;
            user-select: none;
        }
        
        .image-container:active {
            cursor: grabbing;
        }
        
        .image-container img {
            transform-origin: center center;
            pointer-events: none;
        }
    </style>
`);

// ... existing code ...