Refactor software version update logic into a reusable function; enhance UI for file uploads and table responsiveness

profiles.php

@@ -298,59 +298,63 @@ $view .= '</form>';
 // Add basic JavaScript functionality  
 $view .= '
 <style>
-.profile-content { display: none !important; }
+.profile-content { display: none; }
+.profile-content.active { display: block !important; }
 .profile-tab { background: #f8f9fa; color: #333; }
 .profile-tab.active { background: #007bff; color: white; }
 </style>
 <script>
-document.addEventListener("DOMContentLoaded", function() {
-    
-    // Ensure all tabs start inactive
-    document.querySelectorAll(".profile-tab").forEach(tab => {
-        tab.classList.remove("active");
-    });
-    document.querySelectorAll(".profile-content").forEach(content => {
-        content.style.display = "none";
-    });
-    
-    // Tab functionality
-    document.addEventListener("click", function(e) {
-        if (e.target.classList.contains("profile-tab")) {
-            e.preventDefault();
-            
-            // Hide all content
-            document.querySelectorAll(".profile-content").forEach(content => {
-                content.style.display = "none";
-            });
-            
-            // Remove active class from all tabs
-            document.querySelectorAll(".profile-tab").forEach(t => {
-                t.classList.remove("active");
-            });
-            
-            // Show selected content and mark tab as active
-            const profileId = e.target.dataset.profile;
-            const content = document.getElementById(profileId + "-content");
-            if (content) {
-                content.style.display = "block";
-                e.target.classList.add("active");
-            }
-        }
+// Use the working tab functionality from admin.js
+document.querySelectorAll(\'.profile-tab\').forEach((element, index) => {
+    element.onclick = event => {
+        event.preventDefault();
         
-        // Bulk select functionality
-        if (e.target.classList.contains("select-all")) {
-            const profile = e.target.dataset.profile;
-            const checkboxes = document.querySelectorAll("[name=\\"" + profile + "[]\\"]");
-            checkboxes.forEach(cb => cb.checked = true);
-        }
+        // Toggle the clicked tab
+        const isActive = element.classList.contains(\'active\');
+        const profileId = element.dataset.profile;
+        const tabContent = document.getElementById(profileId + \'-content\');
         
-        if (e.target.classList.contains("select-none")) {
-            const profile = e.target.dataset.profile;
-            const checkboxes = document.querySelectorAll("[name=\\"" + profile + "[]\\"]");
-            checkboxes.forEach(cb => cb.checked = false);
+        // Remove active class from all tabs and contents
+        document.querySelectorAll(\'.profile-tab\').forEach(el => el.classList.remove(\'active\'));
+        document.querySelectorAll(\'.profile-content\').forEach(content => {
+            content.classList.remove(\'active\');
+            content.style.display = \'none\';
+        });
+        
+        // If it wasn\'t active, make it active (collapsible behavior)
+        if (!isActive && tabContent) {
+            element.classList.add(\'active\');
+            tabContent.classList.add(\'active\');
+            tabContent.style.display = \'block\';
         }
-    });
+    };
+});
+
+// Initialize first tab as open by default
+if (document.querySelectorAll(\'.profile-tab\').length > 0) {
+    const firstTab = document.querySelectorAll(\'.profile-tab\')[0];
+    const profileId = firstTab.dataset.profile;
+    const firstContent = document.getElementById(profileId + \'-content\');
+    if (firstTab && firstContent) {
+        firstTab.classList.add(\'active\');
+        firstContent.classList.add(\'active\');
+        firstContent.style.display = \'block\';
+    }
+}
+
+// Bulk select functionality
+document.addEventListener("click", function(e) {
+    if (e.target.classList.contains("select-all")) {
+        const profile = e.target.dataset.profile;
+        const checkboxes = document.querySelectorAll("[name=\\"" + profile + "[]\\"]");
+        checkboxes.forEach(cb => cb.checked = true);
+    }
     
+    if (e.target.classList.contains("select-none")) {
+        const profile = e.target.dataset.profile;
+        const checkboxes = document.querySelectorAll("[name=\\"" + profile + "[]\\"]");
+        checkboxes.forEach(cb => cb.checked = false);
+    }
 });
 </script>';