Update details page

resources/css/csp-safe.css

@@ -501,6 +501,77 @@ code.api-token::-webkit-scrollbar-thumb:hover {
     box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.5);
 }
 
+/* Image Modal Styles */
+.image-modal-backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 99999;
+    background-color: rgba(0, 0, 0, 0.9);
+    backdrop-filter: blur(4px);
+    align-items: center;
+    justify-content: center;
+    padding: 2rem;
+}
+
+.image-modal-backdrop.hidden {
+    display: none !important;
+}
+
+.image-modal-backdrop:not(.hidden) {
+    display: flex;
+    animation: fadeIn 0.3s ease-out;
+}
+
+.image-modal-backdrop:not(.hidden) .image-modal-container {
+    animation: modalSlideIn 0.3s ease-out;
+}
+
+.image-modal-container {
+    position: relative;
+    max-width: 90vw;
+    max-height: 90vh;
+}
+
+.image-modal-close {
+    position: absolute;
+    top: -3rem;
+    right: 0;
+    background-color: rgba(255, 255, 255, 0.1);
+    border: 2px solid rgba(255, 255, 255, 0.3);
+    color: white;
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.2s ease-in-out;
+    font-size: 1.25rem;
+}
+
+.image-modal-close:hover {
+    background-color: rgba(255, 255, 255, 0.2);
+    border-color: rgba(255, 255, 255, 0.5);
+    transform: scale(1.1);
+}
+
+/* NFO Modal Styles */
+#nfoModal {
+    display: none;
+}
+
+#nfoModal.hidden {
+    display: none !important;
+}
+
+#nfoModal:not(.hidden) {
+    display: block;
+}
+
 .confirmation-modal-footer .btn-confirm:active {
     transform: translateY(0);
 }

resources/js/csp-safe.js

@@ -423,6 +423,7 @@ function initNfoModal() {
 
         // Show modal
         modal.classList.remove('hidden');
+        modal.style.display = 'block';
 
         // Reset content with loading message
         content.innerHTML = '<div class="flex items-center justify-center py-8"><i class="fas fa-spinner fa-spin text-2xl mr-2"></i><span>Loading NFO...</span></div>';
@@ -453,6 +454,7 @@ function initNfoModal() {
         const modal = document.getElementById('nfoModal');
         if (modal) {
             modal.classList.add('hidden');
+            modal.style.display = 'none';
         }
     };
 
@@ -2316,6 +2318,131 @@ function showExpiryToast(message, type) {
     }, 3000);
 }
 
+// Page-specific initialization functions
+function initMyMovies() {
+    // Placeholder for MyMovies page specific functionality
+    // Currently no additional functionality needed
+}
+
+function initAuthPages() {
+    // Placeholder for auth pages specific functionality
+    // Currently no additional functionality needed
+}
+
+function initProfileEdit() {
+    // Placeholder for profile edit page specific functionality
+    // Currently no additional functionality needed
+}
+
+function initDetailsPageImageModal() {
+    // Handle image modal triggers on release details page
+    const imageModalTriggers = document.querySelectorAll('.image-modal-trigger');
+    const imageModal = document.getElementById('imageModal');
+    const imageModalImage = document.getElementById('imageModalImage');
+    const imageModalTitle = document.getElementById('imageModalTitle');
+    const closeButtons = document.querySelectorAll('[data-close-image-modal]');
+
+    if (!imageModal || !imageModalImage || !imageModalTitle) {
+        return; // Not on the details page
+    }
+
+    // Add click handlers to image triggers
+    imageModalTriggers.forEach(function(trigger) {
+        trigger.addEventListener('click', function(e) {
+            e.preventDefault();
+            const imageUrl = this.getAttribute('data-image-url');
+            const imageTitle = this.getAttribute('data-image-title') || 'Image Preview';
+
+            // Update the full image URL (replace _thumb with the full image)
+            const fullImageUrl = imageUrl.replace('_thumb.jpg', '.jpg');
+
+            imageModalImage.src = fullImageUrl;
+            imageModalTitle.textContent = imageTitle;
+            imageModal.classList.remove('hidden');
+            imageModal.style.display = 'flex';
+        });
+    });
+
+    // Add click handler to close button
+    closeButtons.forEach(function(closeBtn) {
+        closeBtn.addEventListener('click', function(e) {
+            e.preventDefault();
+            imageModal.classList.add('hidden');
+            imageModal.style.display = 'none';
+        });
+    });
+
+    // Close modal when clicking on backdrop
+    imageModal.addEventListener('click', function(e) {
+        if (e.target === imageModal) {
+            imageModal.classList.add('hidden');
+            imageModal.style.display = 'none';
+        }
+    });
+
+    // Close modal with Escape key
+    document.addEventListener('keydown', function(e) {
+        if (e.key === 'Escape' && !imageModal.classList.contains('hidden')) {
+            imageModal.classList.add('hidden');
+            imageModal.style.display = 'none';
+        }
+    });
+}
+
+function initAddToCart() {
+    // Add to cart functionality is already handled in initCartFunctionality()
+    // This is just a placeholder for backward compatibility
+}
+
+function initMoviesLayoutToggle() {
+    // Placeholder for movies layout toggle functionality
+    // Currently no additional functionality needed
+}
+
+function initProfilePage() {
+    // Placeholder for profile page specific functionality
+    // Progress bars and charts are handled elsewhere
+}
+
+function initMobileEnhancements() {
+    // Handle mobile-specific enhancements
+    const mobileSidebarToggle = document.getElementById('mobile-sidebar-toggle');
+    if (mobileSidebarToggle) {
+        mobileSidebarToggle.addEventListener('click', function() {
+            const sidebar = document.getElementById('sidebar');
+            if (sidebar) {
+                sidebar.classList.toggle('hidden');
+                sidebar.classList.toggle('flex');
+            }
+        });
+    }
+}
+
+function initAdminDashboardCharts() {
+    // Placeholder for admin dashboard charts
+    // Chart initialization happens when the admin dashboard loads
+}
+
+function initAdminGroups() {
+    // Placeholder for admin groups functionality
+    // Group management is handled in event delegation
+}
+
+function initTinyMCE() {
+    // Placeholder for TinyMCE initialization
+    // TinyMCE is loaded separately when needed
+}
+
+function initAdminSpecificFeatures() {
+    // Placeholder for admin-specific features
+    // Most admin features are handled in dedicated functions
+}
+
+function initRecentActivityRefresh() {
+    // Placeholder for recent activity auto-refresh
+    // Activity refresh is handled on the admin dashboard
+}
+
 // Theme Management (moved from main.blade.php)
 function initThemeManagement() {
     const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');

resources/views/details/index.blade.php

@@ -922,7 +922,7 @@
 @endsection
 
 <!-- Image Modal -->
-<div id="imageModal" class="image-modal-backdrop hidden">
+<div id="imageModal" class="image-modal-backdrop hidden" style="display: none;">
     <div class="image-modal-container">
         <button type="button" class="image-modal-close" data-close-image-modal>
             <i class="fas fa-times"></i>

resources/views/partials/nfo-modal.blade.php

@@ -1,5 +1,5 @@
 <!-- NFO Modal - CSP Safe -->
-<div id="nfoModal" class="hidden fixed inset-0 z-50 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
+<div id="nfoModal" class="hidden fixed inset-0 z-50 overflow-y-auto" style="display: none;" aria-labelledby="modal-title" role="dialog" aria-modal="true">
     <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
         <!-- Background overlay -->
         <div class="fixed inset-0 bg-gray-500 dark:bg-gray-900 bg-opacity-75 dark:bg-opacity-75 transition-opacity" aria-hidden="true" data-close-nfo-modal></div>