fix: properly display preselected drives in individual storage slots

Major fixes for instant customization storage:
1. Preselected drives now show correctly in individual slots
2. Pricing handled correctly - preselected drives cost €0 (included)
3. Storage summary shows proper counts (4x Crucial T705 4TB + 2x Kioxia CM7-V 3.2TB)
4. When changing drives, only charge the difference from original
5. Individual slot rendering now uses preselected values from WHMCS URL

The €1520 server will now correctly show:
- NVMe 1: Crucial T705 4TB (preselected)
- NVMe 2: Crucial T705 4TB (preselected)
- NVMe 3: Crucial T705 4TB (preselected)
- NVMe 4: Crucial T705 4TB (preselected)
- NVMe 5: Kioxia CM7-V 3.2TB (preselected)
- NVMe 6: Kioxia CM7-V 3.2TB (preselected)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

Documents/Vibe Coding Projects/dedicatednodes-redesign/dedicatednodes-bare-metal/new-baremetal.html

@@ -5006,11 +5006,11 @@ var wpcf7 = {
         function createOptionGrid(opt, isWide, storageIndex = -1, isInstant = false, preselected = {}) {
             const grid = document.createElement('div');
             grid.className = isWide ? 'config-grid wide' : 'config-grid';
-            
+
             opt.values.forEach((val, index) => {
                 const card = document.createElement('div');
                 card.className = 'config-card';
-                
+
                 // Check if this value is the preselected one
                 const isPreselected = preselected[opt.id] && preselected[opt.id] === val.id;
                 // Default behavior: Select if preselected, OR if no preselection exists and it's the first item
@@ -5018,10 +5018,17 @@ var wpcf7 = {
 
                 if (isActive) {
                     card.classList.add('active');
-                    // Set initial state - use the relative price (already converted from absolute)
+
-                    configState[opt.label] = val.price;
+                    // For instant customization storage, preselected drives should have 0 cost
+                    if (isInstant && opt.type === 'storage' && isPreselected) {
+                        configState[opt.label] = 0; // Included in base price
+                    } else {
+                        // Set initial state - use the relative price (already converted from absolute)
+                        configState[opt.label] = val.price;
+                    }
+
                     configIds[opt.id] = val.id;
-                    
+
                     // Update Summary Texts & Tech Specs
                     if (opt.type === 'ram') {
                         const cleanName = val.text.replace(/\s?\(.*?\)/, '');
@@ -5056,8 +5063,38 @@ var wpcf7 = {
                 card.addEventListener('click', () => {
                     grid.querySelectorAll('.config-card').forEach(c => c.classList.remove('active'));
                     card.classList.add('active');
-                    
+
-                    configState[opt.label] = val.price;
+                    // For instant customization storage, handle price differences
+                    if (isInstant && opt.type === 'storage') {
+                        // Find the original drive for this slot
+                        const originalDrive = window.originalDrives ?
+                            window.originalDrives.find(d => d.slotId === opt.id) : null;
+
+                        if (originalDrive && originalDrive.driveId !== val.id) {
+                            // User is changing from original drive, charge the difference
+                            configState[opt.label] = val.price - originalDrive.price;
+                        } else if (originalDrive && originalDrive.driveId === val.id) {
+                            // User is reverting to original drive, no charge
+                            configState[opt.label] = 0;
+                        } else {
+                            // No original drive found, charge full price
+                            configState[opt.label] = val.price;
+                        }
+
+                        // Update original drives tracking
+                        if (window.originalDrives) {
+                            const drive = window.originalDrives.find(d => d.slotId === opt.id);
+                            if (drive) {
+                                drive.driveId = val.id;
+                                drive.text = val.text;
+                                drive.price = val.price;
+                            }
+                        }
+                    } else {
+                        // Non-instant or non-storage, use full price
+                        configState[opt.label] = val.price;
+                    }
+
                     configIds[opt.id] = val.id;
                     
                     if (opt.type === 'ram') {
@@ -5073,25 +5110,57 @@ var wpcf7 = {
                     }
                     
                     if (opt.type === 'storage') {
-                         storageSelection[opt.id] = { name: displayName, price: val.price };
+                        // For instant customization, build storage summary differently
-                         // Recalculate total storage price
+                        if (isInstant) {
-                         let totalStoragePrice = 0;
+                            // Collect all selected drives from individual slots
-                         let storageNames = [];
+                            const allStorageOptions = document.querySelectorAll('.config-card.active');
-                         Object.values(storageSelection).forEach(s => {
+                            const storageCount = {};
-                             totalStoragePrice += s.price;
+                            let storageSummary = [];
-                             if(!s.name.toLowerCase().includes('none')) storageNames.push(s.name);
+
-                         });
+                            allStorageOptions.forEach(card => {
-                         
+                                const name = card.querySelector('.option-name').textContent;
-                         // Update visualizer
+                                const price = card.querySelector('.option-price').textContent;
-                         updateDynamicStorageVisual(storageIndex, displayName, isInstant);
+
-                         
+                                // Count each drive type
-                         // Update summary text
+                                if (!name.toLowerCase().includes('none')) {
-                         const storageText = storageNames.length > 0 ? storageNames.join(' + ') : 'None';
+                                    storageCount[name] = (storageCount[name] || 0) + 1;
-                         document.getElementById('summaryStorage').textContent = storageText;
+                                }
-                         
+                            });
-                         // Update Tech Specs
+
-                         const specStorage = document.getElementById('spec-storage-config-hero');
+                            // Build summary text with counts
-                         if(specStorage) specStorage.innerText = storageText;
+                            Object.entries(storageCount).forEach(([name, count]) => {
+                                storageSummary.push(`${count}x ${name}`);
+                            });
+
+                            const storageText = storageSummary.length > 0 ? storageSummary.join(' + ') : 'None';
+                            document.getElementById('summaryStorage').textContent = storageText;
+
+                            // Update Tech Specs
+                            const specStorage = document.getElementById('spec-storage-config-hero');
+                            if(specStorage) specStorage.innerText = storageText;
+                        } else {
+                            // Custom server storage handling (original logic)
+                            storageSelection[opt.id] = { name: displayName, price: val.price };
+
+                            // Recalculate total storage price
+                            let totalStoragePrice = 0;
+                            let storageNames = [];
+                            Object.values(storageSelection).forEach(s => {
+                                totalStoragePrice += s.price;
+                                if(!s.name.toLowerCase().includes('none')) storageNames.push(s.name);
+                            });
+
+                            // Update visualizer
+                            updateDynamicStorageVisual(storageIndex, displayName, isInstant);
+
+                            // Update summary text
+                            const storageText = storageNames.length > 0 ? storageNames.join(' + ') : 'None';
+                            document.getElementById('summaryStorage').textContent = storageText;
+
+                            // Update Tech Specs
+                            const specStorage = document.getElementById('spec-storage-config-hero');
+                            if(specStorage) specStorage.innerText = storageText;
+                        }
                     }
                     
                     updateSummary();