@props(['fileType', 'size' => '1.2rem', 'showLabel' => false, 'showImage' => false, 'imageUrl' => null, 'rotatingToolbar' => false, 'documentId' => null, 'allImages' => [],'currentIndex' => 0])

@php
    $fileIcon = get_file_type_icon($fileType);
    
    // Normalize file type to handle both MIME types and extensions
    $normalizedType = strtolower($fileType);
    
    // Check if it's an image (support both MIME types and extensions)
    $imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'svg', 'tiff', 'tif', 'heic', 'heif'];
    $imageMimeTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif', 'image/bmp', 'image/webp', 'image/svg+xml', 'image/tiff', 'image/tif', 'image/heic', 'image/heif', 'image/heic-sequence'];
    // Also check if the normalized type contains 'heic' or 'heif' to catch any variations
    $isHeic = str_contains($normalizedType, 'heic') || str_contains($normalizedType, 'heif');
    $isImage = in_array($normalizedType, $imageExtensions) || in_array($normalizedType, $imageMimeTypes) || $isHeic || str_contains($normalizedType, 'image/');
    
    // Check if it's a PDF (support both MIME type and extension)
    $isPdf = $normalizedType === 'application/pdf' || $normalizedType === 'pdf';
@endphp

<div class="d-flex align-items-center">
    @if ($isImage && $showImage && $imageUrl != null)
        @php
            $modalId = 'imagePreviewModal-' . md5($imageUrl);
            $uniqueId = 'img-' . uniqid();
            $isHeicFile = $isHeic || str_contains(strtolower($imageUrl), '.heic') || str_contains(strtolower($imageUrl), '.heif');
        @endphp
        <img src="{{ asset('storage/' . ltrim($imageUrl, '/')) }}"  alt="file preview" style="min-width: 250px; object-fit: cover; display: block; cursor: pointer;" data-bs-toggle="modal" data-bs-target="#{{ $modalId }}" @if($isHeicFile) data-heic="true" data-original-src="{{ asset('storage/' . ltrim($imageUrl, '/')) }}" @endif>
        <div class="modal fade custom-image-modal" id="{{ $modalId }}" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-xl">
                <div class="modal-content">
                    <div class="modal-header border-0 pb-0">
                        @if($rotatingToolbar)
                        <div class="btn-group" role="group">
                            <button type="button" class="btn btn-sm btn-outline-secondary rotate-btn" data-rotation="-90" data-modal-id="{{ $modalId }}" title="Rotate Left">
                                <i class="fas fa-undo"></i> Rotate Left
                            </button>
                            <button type="button" class="btn btn-sm btn-outline-secondary rotate-btn" data-rotation="90" data-modal-id="{{ $modalId }}" title="Rotate Right">
                                <i class="fas fa-redo"></i> Rotate Right
                            </button>
                            <button type="button" class="btn btn-sm btn-success save-rotation-btn" data-modal-id="{{ $modalId }}" data-image-url="{{ $imageUrl }}" data-document-id="{{ $documentId }}" title="Save Rotation" style="display: none;">
                                <i class="fas fa-save"></i> Save
                            </button>
                        </div>
                        @endif
                        <button type="button" class="btn-close custom-close-btn ms-auto" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body d-flex justify-content-center align-items-center position-relative">

                    <button type="button" class="btn btn-dark position-absolute start-0 top-50 translate-middle-y prev-image-btn"
                    data-index="{{ $currentIndex }}" data-images='@json($allImages)' style="z-index: 10;">
                    <i class="fas fa-chevron-left"></i>
                    </button>

    <div class="d-inline-block position-relative" style="overflow: hidden;">
                        <img   id="previewImage_{{ $uniqueId }}"  src="{{ asset('storage/' . ltrim($imageUrl, '/')) }}" alt="Image Preview" class="modal-preview-img {{ $uniqueId }}" data-rotation="0" style="transition: transform 0.3s ease;" @if($isHeicFile) data-heic="true" data-original-src="{{ asset('storage/' . ltrim($imageUrl, '/')) }}" @endif>
</div>

                    <button type="button" class="btn btn-dark position-absolute end-0 top-50 translate-middle-y next-image-btn"
                    data-index="{{ $currentIndex }}" data-images='@json($allImages)' style="z-index: 10;">
                    <i class="fas fa-chevron-right"></i>
                    </button>

                    </div>

                    <!-- Zoom controls -->
<div class="modal-footer justify-content-center">
    <button type="button" class="btn btn-outline-primary zoom-btn" data-action="in" data-target="{{ $uniqueId }}">
            <i class="fas fa-search-plus"></i> Zoom In
        </button>
        <button type="button" class="btn btn-outline-primary zoom-btn" data-action="out" data-target="{{ $uniqueId }}">
            <i class="fas fa-search-minus"></i> Zoom Out
        </button>
        <button type="button" class="btn btn-outline-secondary zoom-btn" data-action="reset" data-target="{{ $uniqueId }}">
            <i class="fas fa-compress-arrows-alt"></i> Reset
        </button>
</div>


                </div>
            </div>
        </div>
        
        @if($rotatingToolbar)
        @once
        @push('scripts')
        <script>
        // Global image rotation handler - only initialized once
        window.initImageRotation = window.initImageRotation || function(modalId) {
            const modal = document.getElementById(modalId);
            
            if (!modal) {
                console.warn('Modal not found:', modalId);
                return;
            }
            
            // Skip if already initialized
            if (modal.dataset.rotationInitialized === 'true') {
                return;
            }
            
            console.log('Initializing rotation for modal:', modalId);
            modal.dataset.rotationInitialized = 'true';
            
            // Handle rotation buttons using event delegation
            modal.addEventListener('click', function(e) {
                const rotateBtn = e.target.closest('.rotate-btn');
                if (rotateBtn) {
                    e.preventDefault();
                    
                    const rotation = parseInt(rotateBtn.getAttribute('data-rotation'));
                    const img = modal.querySelector('.modal-preview-img');
                    const saveBtn = modal.querySelector('.save-rotation-btn');
                    
                    if (!img || !saveBtn) {
                        console.error('Image or save button not found');
                        return;
                    }
                    
                    // Get current rotation
                    let currentRotation = parseInt(img.getAttribute('data-rotation')) || 0;
                    currentRotation = (currentRotation + rotation) % 360;
                    
                    // Apply rotation
                    img.style.transform = 'rotate(' + currentRotation + 'deg)';
                    img.setAttribute('data-rotation', currentRotation);
                    
                    // Show save button if rotation is not 0
                    saveBtn.style.display = currentRotation !== 0 ? 'inline-block' : 'none';
                }
                
                const saveBtn = e.target.closest('.save-rotation-btn');
                if (saveBtn) {
                    e.preventDefault();
                    
                    const imageUrl = saveBtn.getAttribute('data-image-url');
                    const documentId = saveBtn.getAttribute('data-document-id');
                    const img = modal.querySelector('.modal-preview-img');
                    const rotation = parseInt(img.getAttribute('data-rotation')) || 0;
                    
                    if (rotation === 0) {
                        alert('No rotation to save');
                        return;
                    }
                    
                    // Show loading state
                    saveBtn.disabled = true;
                    saveBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Saving...';
                    
                    // Create canvas to rotate image
                    const canvas = document.createElement('canvas');
                    const ctx = canvas.getContext('2d');
                    const image = new Image();
                    image.crossOrigin = 'anonymous';
                    
                    image.onload = function() {
                        // Calculate new dimensions based on rotation
                        const radians = rotation * Math.PI / 180;
                        const cos = Math.abs(Math.cos(radians));
                        const sin = Math.abs(Math.sin(radians));
                        
                        canvas.width = image.height * sin + image.width * cos;
                        canvas.height = image.height * cos + image.width * sin;
                        
                        // Rotate and draw
                        ctx.translate(canvas.width / 2, canvas.height / 2);
                        ctx.rotate(radians);
                        ctx.drawImage(image, -image.width / 2, -image.height / 2);
                        
                        // Convert to blob
                        canvas.toBlob(function(blob) {
                            const formData = new FormData();
                            formData.append('image', blob, 'rotated-image.jpg');
                            formData.append('image_path', imageUrl);
                            formData.append('rotation', rotation);
                            if (documentId) {
                                formData.append('document_id', documentId);
                            }
                            
                            // Get CSRF token
                            const csrfToken = document.querySelector('meta[name="csrf-token"]');
                            if (!csrfToken) {
                                console.error('CSRF token not found');
                                alert('Security token not found. Please refresh the page.');
                                saveBtn.disabled = false;
                                saveBtn.innerHTML = '<i class="fas fa-save"></i> Save';
                                return;
                            }
                            
                            // Send to server
                            fetch('/api/rotate-image', {
                                method: 'POST',
                                body: formData,
                                headers: {
                                    'X-CSRF-TOKEN': csrfToken.getAttribute('content')
                                }
                            })
                            .then(response => {
                                if (!response.ok) {
                                    throw new Error('HTTP error! status: ' + response.status);
                                }
                                
                                const contentType = response.headers.get('content-type');
                                if (!contentType || !contentType.includes('application/json')) {
                                    throw new Error('Server did not return JSON');
                                }
                                
                                return response.json();
                            })
                            .then(data => {
                                if (data.success) {
                                    // Reset rotation display
                                    img.style.transform = 'rotate(0deg)';
                                    img.setAttribute('data-rotation', '0');
                                    saveBtn.style.display = 'none';
                                    saveBtn.disabled = false;
                                    saveBtn.innerHTML = '<i class="fas fa-save"></i> Save';
                                    
                                    // Reload the image with cache busting
                                    const timestamp = new Date().getTime();
                                    img.src = img.src.split('?')[0] + '?t=' + timestamp;
                                    
                                    // Update thumbnail if exists
                                    const thumbnail = document.querySelector('img[data-bs-target="#' + modalId + '"]');
                                    if (thumbnail) {
                                        thumbnail.src = thumbnail.src.split('?')[0] + '?t=' + timestamp;
                                    }
                                    
                                    alert('Image rotated and saved successfully!');
                                } else {
                                    saveBtn.disabled = false;
                                    saveBtn.innerHTML = '<i class="fas fa-save"></i> Save';
                                }
                            })
                            .catch(error => {
                                console.error('Fetch error:', error);
                                saveBtn.disabled = false;
                                saveBtn.innerHTML = '<i class="fas fa-save"></i> Save';
                            });
                        }, 'image/jpeg', 0.95);
                    };
                    
                    image.onerror = function() {
                        console.error('Error loading image for rotation');
                        alert('Error loading image for rotation');
                        saveBtn.disabled = false;
                        saveBtn.innerHTML = '<i class="fas fa-save"></i> Save';
                    };
                    
                    image.src = img.src;
                }
            });
            
            // Reset rotation when modal is closed
            modal.addEventListener('hidden.bs.modal', function() {
                const img = this.querySelector('.modal-preview-img');
                const saveBtn = this.querySelector('.save-rotation-btn');
                
                if (saveBtn && saveBtn.style.display !== 'none') {
                    img.style.transform = 'rotate(0deg)';
                    img.setAttribute('data-rotation', '0');
                    saveBtn.style.display = 'none';
                }
            });
        };

        // Initialize all rotation modals after Livewire updates
        document.addEventListener('livewire:init', function() {
            // Initialize existing modals
            document.querySelectorAll('.custom-image-modal').forEach(function(modal) {
                window.initImageRotation(modal.id);
            });
            
            // Re-initialize after any Livewire update
            Livewire.hook('morph.updated', ({ el, component }) => {
                setTimeout(function() {
                    document.querySelectorAll('.custom-image-modal').forEach(function(modal) {
                        window.initImageRotation(modal.id);
                    });
                }, 100);
            });
            
            // Listen for filesUploaded event
            Livewire.on('filesUploaded', function() {
                setTimeout(function() {
                    document.querySelectorAll('.custom-image-modal').forEach(function(modal) {
                        if (modal.dataset.rotationInitialized !== 'true') {
                            window.initImageRotation(modal.id);
                        }
                    });
                }, 200);
            });
        });

        // Fallback for non-Livewire pages
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', function() {
                document.querySelectorAll('.custom-image-modal').forEach(function(modal) {
                    window.initImageRotation(modal.id);
                });
            });
        } else {
            document.querySelectorAll('.custom-image-modal').forEach(function(modal) {
                window.initImageRotation(modal.id);
            });
        }



        </script>
        @endpush
        @endonce
        @endif
    @elseif ($isPdf && $showImage && $imageUrl != null)
        @php
            $modalId = 'pdfPreviewModal-' . md5($imageUrl);
        @endphp
        <div class="rounded-circle {{ $fileIcon['bg_color'] }} me-2" style="padding: 5px 10px; cursor: pointer;" data-bs-toggle="modal" data-bs-target="#{{ $modalId }}">
            <i class="{{ $fileIcon['icon'] }} {{ $fileIcon['color'] }}" style="font-size: {{ $size }};"></i>
        </div>
        <div class="modal fade" id="{{ $modalId }}" tabindex="-1" aria-hidden="true" style="margin-top: 0px; padding-top: 2% !important;" >
            <div class="modal-dialog modal-xl">
                <div class="modal-content" >
                    <div class="modal-header" >
                        <h5 class="modal-title">PDF Preview</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body p-0" style="height: 80vh;">
                        {{-- <iframe src="{{ asset('storage/' . ltrim($imageUrl, '/')) }}" type="application/pdf" width="100%" height="100%" style="border: none;"></iframe> --}}
                        <embed src="{{ asset('storage/' . ltrim($imageUrl, '/')) }}" width="100%" height="100%" type="application/pdf">
                    </div>
                </div>
            </div>
        </div>
    @else
    <div class="rounded-circle {{ $fileIcon['bg_color'] }} me-2" style="padding: 5px 10px;">
        <i class="{{ $fileIcon['icon'] }} {{ $fileIcon['color'] }}" style="font-size: {{ $size }};"></i>
    </div>
    @endif
    @if($showLabel)
        <small class="text-muted">{{ strtoupper($fileType) }}</small>
    @endif

     @once
        @push('scripts')
        <!-- Load heic2any library for HEIC image conversion -->
        <script src="https://cdn.jsdelivr.net/npm/heic2any@0.0.4/dist/heic2any.min.js"></script>
        <script>
// Global object URL cleanup registry
window.heicObjectUrls = window.heicObjectUrls || new Set();

// Function to convert HEIC images to viewable format
window.convertHeicImage = window.convertHeicImage || function(img, force = false) {
    if (!img) {
        return Promise.resolve();
    }
    
    // Check if already converted (unless forced)
    if (!force && img.dataset.converted === 'true') {
        return Promise.resolve();
    }
    
    // Check if it's actually a HEIC image
    if (!img.dataset.heic || img.dataset.heic !== 'true') {
        return Promise.resolve();
    }
    
    const originalSrc = img.dataset.originalSrc || img.src;
    
    // Check if the file URL suggests it's already a JPG (server-side converted)
    // If the URL ends with .jpg or .jpeg, don't try to convert
    const urlLower = originalSrc.toLowerCase();
    if (urlLower.endsWith('.jpg') || urlLower.endsWith('.jpeg')) {
        // Already converted server-side, just remove the heic attribute
        img.removeAttribute('data-heic');
        img.style.opacity = '1';
        return Promise.resolve();
    }
    
    // Clean up any existing object URL first
    if (img.dataset.objectUrl) {
        try {
            URL.revokeObjectURL(img.dataset.objectUrl);
            window.heicObjectUrls.delete(img.dataset.objectUrl);
        } catch(e) {
            console.warn('Error revoking object URL:', e);
        }
        img.removeAttribute('data-object-url');
    }
    
    // Show loading indicator
    img.style.opacity = '0.5';
    img.style.transition = 'opacity 0.3s';
    
    // Wait for heic2any to be available
    const waitForHeic2Any = new Promise((resolve, reject) => {
        let attempts = 0;
        const maxAttempts = 100; // 10 seconds max wait
        
        const checkLibrary = setInterval(() => {
            attempts++;
            if (typeof heic2any !== 'undefined' && typeof heic2any === 'function') {
                clearInterval(checkLibrary);
                resolve();
            } else if (attempts >= maxAttempts) {
                clearInterval(checkLibrary);
                reject(new Error('heic2any library failed to load after ' + maxAttempts + ' attempts'));
            }
        }, 100);
    });
    
    return waitForHeic2Any
        .then(() => {
            // Fetch the HEIC file with cache busting
            const fetchUrl = originalSrc + (originalSrc.includes('?') ? '&' : '?') + '_t=' + Date.now();
            return fetch(fetchUrl, {
                cache: 'no-cache',
                credentials: 'same-origin'
            });
        })
        .then(response => {
            if (!response.ok) {
                throw new Error('Failed to fetch HEIC file: ' + response.status + ' ' + response.statusText);
            }
            return response.blob();
        })
        .then(blob => {
            // Verify it's actually a HEIC blob
            if (!blob || blob.size === 0) {
                throw new Error('Invalid or empty HEIC file');
            }
            
            // Convert HEIC to JPEG using heic2any
            return heic2any({
                blob: blob,
                toType: 'image/jpeg',
                quality: 0.92
            });
        })
        .then(conversionResult => {
            // heic2any returns an array, get the first result
            const convertedBlob = Array.isArray(conversionResult) ? conversionResult[0] : conversionResult;
            
            if (!convertedBlob) {
                throw new Error('Conversion returned empty result');
            }
            
            // Create object URL from converted blob
            const objectUrl = URL.createObjectURL(convertedBlob);
            
            // Register for cleanup
            window.heicObjectUrls.add(objectUrl);
            
            // Update image source
            img.src = objectUrl;
            img.dataset.converted = 'true';
            img.dataset.objectUrl = objectUrl;
            img.style.opacity = '1';
            
            // Handle image load error
            img.onerror = function() {
                console.error('Error loading converted HEIC image');
                img.style.opacity = '1';
                img.dataset.converted = 'failed';
            };
            
            return objectUrl;
        })
        .catch(error => {
            console.error('Error converting HEIC image:', error);
            img.style.opacity = '1';
            img.dataset.converted = 'failed';
            
            // Check if error is due to unsupported format
            const errorMessage = error.message || (error.code ? `Error code: ${error.code}` : 'Unknown error');
            const isUnsupportedFormat = error.code === 2 || 
                                       (typeof error.message === 'string' && error.message.includes('format not supported')) ||
                                       (typeof error.message === 'string' && error.message.includes('ERR_LIBHEIF'));
            
            if (isUnsupportedFormat) {
                // Try to use the original source - maybe server already converted it
                // or show a fallback message
                console.warn('HEIC format not supported by client-side converter. Attempting to use original source.');
                
                // Check if we can try the JPG version (server might have converted it)
                const jpgUrl = originalSrc.replace(/\.(heic|heif)$/i, '.jpg');
                if (jpgUrl !== originalSrc) {
                    // Try to load the JPG version
                    const testImg = new Image();
                    testImg.onload = function() {
                        img.src = jpgUrl;
                        img.removeAttribute('data-heic');
                        img.dataset.converted = 'true';
                    };
                    testImg.onerror = function() {
                        // JPG version doesn't exist, show error indicator
                        img.style.filter = 'grayscale(100%) opacity(0.5)';
                        img.title = 'Unable to display HEIC image: Format not supported';
                        console.error('Neither HEIC conversion nor JPG fallback worked');
                    };
                    testImg.src = jpgUrl;
                    return Promise.resolve(); // Don't reject, we're handling it
                }
            }
            
            // For other errors, log and show error state
            img.title = 'Error displaying image: ' + errorMessage;
            return Promise.reject(error);
        });
};

// Function to initialize zoom controls and convert HEIC images
function initializeImageModals() {
    // Convert HEIC thumbnail images (images that trigger modals)
    document.querySelectorAll('img[data-heic="true"]').forEach(img => {
        // Reset conversion flag if needed (for Livewire updates)
        if (img.dataset.converted === 'failed') {
            img.removeAttribute('data-converted');
        }
        // Convert if not already converted
        if (img.dataset.converted !== 'true') {
            window.convertHeicImage(img).catch(err => {
                console.warn('Failed to convert HEIC thumbnail:', err);
            });
        }
    });
    
    // Get all image modals (handles multiple previews)
    document.querySelectorAll('[id^="previewImage_"], .modal-preview-img').forEach(img => {
        // Reset conversion flag if needed (for Livewire updates)
        if (img.dataset.converted === 'failed') {
            img.removeAttribute('data-converted');
        }
        
        // Convert HEIC if needed
        if (img.dataset.heic === 'true' && img.dataset.converted !== 'true') {
            window.convertHeicImage(img).catch(err => {
                console.warn('Failed to convert HEIC preview:', err);
            });
        }
        
        const uniqueId = img.id ? img.id.replace('previewImage_', '') : (img.className.match(/[\w-]+/) ? img.className.match(/[\w-]+/)[0] : 'default');
        const buttons = document.querySelectorAll(`.zoom-btn[data-target="${uniqueId}"]`);

        // Initialize scale if not already set
        if (!img.dataset.zoomScale) {
            img.dataset.zoomScale = '1';
        }
        
        const MIN_SCALE = 0.5;
        const MAX_SCALE = 4;
        const STEP = 0.25;

        function applyZoom() {
            const currentScale = parseFloat(img.dataset.zoomScale);
            // Preserve rotation if exists
            const rotation = img.dataset.rotation || '0';
            img.style.transform = `rotate(${rotation}deg) scale(${currentScale})`;
        }

        buttons.forEach(btn => {
            // Check if already initialized
            if (btn.dataset.zoomInitialized === 'true') {
                return;
            }
            btn.dataset.zoomInitialized = 'true';
            
            btn.addEventListener('click', () => {
                const action = btn.dataset.action;
                let currentScale = parseFloat(img.dataset.zoomScale);

                if (action === 'in') {
                    currentScale = Math.min(currentScale + STEP, MAX_SCALE);
                } else if (action === 'out') {
                    currentScale = Math.max(currentScale - STEP, MIN_SCALE);
                } else if (action === 'reset') {
                    currentScale = 1;
                }

                img.dataset.zoomScale = currentScale.toString();
                applyZoom();
            });
        });
    });
}

document.addEventListener('DOMContentLoaded', function() {
    initializeImageModals();
    
    // Use Intersection Observer to convert HEIC images when they become visible
    if ('IntersectionObserver' in window) {
        const heicObserver = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting && entry.target.dataset.heic === 'true') {
                    const img = entry.target;
                    if (img.dataset.converted !== 'true') {
                        if (img.dataset.converted === 'failed') {
                            img.removeAttribute('data-converted');
                        }
                        window.convertHeicImage(img).catch(err => {
                            console.warn('Failed to convert HEIC on visibility:', err);
                        });
                    }
                }
            });
        }, {
            rootMargin: '50px' // Start conversion slightly before image is visible
        });
        
        // Observe all HEIC images
        document.querySelectorAll('img[data-heic="true"]').forEach(img => {
            heicObserver.observe(img);
        });
        
        // Re-observe after Livewire updates
        if (typeof Livewire !== 'undefined') {
            Livewire.hook('morph.updated', () => {
                setTimeout(() => {
                    document.querySelectorAll('img[data-heic="true"]').forEach(img => {
                        heicObserver.observe(img);
                    });
                }, 150);
            });
        }
    }
});

// Handle Livewire updates
if (typeof Livewire !== 'undefined') {
    document.addEventListener('livewire:init', function() {
        initializeImageModals();
        
        Livewire.hook('morph.updated', ({ el, component }) => {
            setTimeout(function() {
                // Reset conversion flags for HEIC images that might have been re-rendered
                document.querySelectorAll('img[data-heic="true"]').forEach(img => {
                    // Only reset if the image source changed (Livewire re-render)
                    if (img.dataset.converted === 'true' || img.dataset.converted === 'failed') {
                        // Check if the src has changed by comparing with originalSrc
                        const currentSrc = img.src;
                        const originalSrc = img.dataset.originalSrc || img.getAttribute('src');
                        if (currentSrc !== originalSrc && !currentSrc.startsWith('blob:')) {
                            img.removeAttribute('data-converted');
                            // Clean up old object URL
                            if (img.dataset.objectUrl) {
                                try {
                                    URL.revokeObjectURL(img.dataset.objectUrl);
                                    window.heicObjectUrls.delete(img.dataset.objectUrl);
                                } catch(e) {}
                                img.removeAttribute('data-object-url');
                            }
                        }
                    }
                });
                initializeImageModals();
            }, 150);
        });
        
        Livewire.on('filesUploaded', function() {
            setTimeout(function() {
                // Reset all HEIC conversion flags for newly uploaded images
                document.querySelectorAll('img[data-heic="true"]').forEach(img => {
                    img.removeAttribute('data-converted');
                    // Clean up any existing object URLs
                    if (img.dataset.objectUrl) {
                        try {
                            URL.revokeObjectURL(img.dataset.objectUrl);
                            window.heicObjectUrls.delete(img.dataset.objectUrl);
                        } catch(e) {}
                        img.removeAttribute('data-object-url');
                    }
                });
                initializeImageModals();
            }, 300);
        });
    });
}

// Cleanup object URLs on page unload
window.addEventListener('beforeunload', function() {
    window.heicObjectUrls.forEach(url => {
        try {
            URL.revokeObjectURL(url);
        } catch(e) {
            console.warn('Error revoking object URL on unload:', e);
        }
    });
    window.heicObjectUrls.clear();
});

document.addEventListener('click', function (e) {
    const prevBtn = e.target.closest('.prev-image-btn');
    const nextBtn = e.target.closest('.next-image-btn');

    if (prevBtn || nextBtn) {
        e.preventDefault();

        const btn = prevBtn || nextBtn;
        const images = JSON.parse(btn.getAttribute('data-images'));
        let index = parseInt(btn.getAttribute('data-index'));
        const modalBody = btn.closest('.modal-body');
        const img = modalBody.querySelector('.modal-preview-img');

        if (!img || !images.length) return;

        // Calculate next/previous index
        if (prevBtn) {
            index = (index - 1 + images.length) % images.length;
        } else {
            index = (index + 1) % images.length;
        }

        // Clean up existing object URL if present
        if (img.dataset.objectUrl) {
            try {
                URL.revokeObjectURL(img.dataset.objectUrl);
                window.heicObjectUrls.delete(img.dataset.objectUrl);
            } catch(err) {
                console.warn('Error cleaning up object URL:', err);
            }
            img.removeAttribute('data-object-url');
        }

        // Update image source with cache-busting timestamp
        const newUrl = '/storage/' + images[index].replace(/^\/?storage\//, '');
        const fullUrl = newUrl + '?t=' + new Date().getTime();
        
        // Check if the new image is HEIC
        const isHeic = /\.(heic|heif)$/i.test(images[index]);
        
        // Reset zoom and conversion state when switching images
        img.dataset.zoomScale = '1';
        img.removeAttribute('data-converted');
        
        if (isHeic) {
            img.dataset.heic = 'true';
            img.dataset.originalSrc = fullUrl;
            // Set a placeholder or show loading state
            img.style.opacity = '0.5';
            // Convert HEIC image
            window.convertHeicImage(img, true).catch(err => {
                console.error('Failed to convert HEIC when switching:', err);
                img.style.opacity = '1';
            });
        } else {
            img.src = fullUrl;
            img.removeAttribute('data-heic');
            img.removeAttribute('data-original-src');
            img.style.opacity = '1';
        }
        
        // Reset transform
        const rotation = img.dataset.rotation || '0';
        img.style.transform = `rotate(${rotation}deg) scale(1)`;

        // Update button indexes
        modalBody.querySelectorAll('.prev-image-btn, .next-image-btn').forEach(btn => {
            btn.setAttribute('data-index', index);
        });
    }
});

// Handle HEIC conversion when modal is opened
document.addEventListener('shown.bs.modal', function(e) {
    const modal = e.target;
    if (modal.classList.contains('custom-image-modal')) {
        // Convert preview image
        const img = modal.querySelector('.modal-preview-img[data-heic="true"]');
        if (img) {
            // Force reconversion if previously failed
            if (img.dataset.converted === 'failed') {
                img.removeAttribute('data-converted');
            }
            if (img.dataset.converted !== 'true') {
                window.convertHeicImage(img).catch(err => {
                    console.warn('Failed to convert HEIC on modal open:', err);
                });
            }
        }
        
        // Also convert thumbnail if it exists
        const thumbnail = document.querySelector('img[data-bs-target="#' + modal.id + '"][data-heic="true"]');
        if (thumbnail && thumbnail.dataset.converted !== 'true') {
            if (thumbnail.dataset.converted === 'failed') {
                thumbnail.removeAttribute('data-converted');
            }
            window.convertHeicImage(thumbnail).catch(err => {
                console.warn('Failed to convert HEIC thumbnail:', err);
            });
        }
    }
});


        </script>

          @endpush
        @endonce
</div>