CMXX - First candidate

pricelists_manage.php

@@ -270,7 +270,7 @@ $view .= '
                         </select>
                     </td>
                     <td>
-                        <select form="update" name="item['.$pricelist_item['rowID'].'][product_id]">';
+                        <select form="update" class="exclusive-select" name="item['.$pricelist_item['rowID'].'][product_id]">';
                         foreach ($products as $product){
                             $view .= '<option value="'.$product['product_id'].'" '.($product['product_id']==$pricelist_item['product_id'] ?' selected':'').'>'.$product['product_id'] .' - '.(${$product['product_name']} ?? $product['product_name']).'</option>
                            ';}  
@@ -300,12 +300,96 @@ $view .= '
         
         <script>
             let rowCounter = 1;
+            
+            
+            function getAllSelectedValues() {
+                const selects = document.querySelectorAll(\'.exclusive-select\');
+                const selectedValues = [];
+                
+                selects.forEach(select => {
+                    if (select.value) {
+                        selectedValues.push(select.value);
+                    }
+                });
+                
+                return selectedValues;
+            }
+          
+            // Update all selects to hide options selected elsewhere
+            function updateOptions() {
+                const selects = document.querySelectorAll(\'.exclusive-select\');
+                const selectedValues = getAllSelectedValues();
+                
+                selects.forEach(select => {
+                    const currentValue = select.value;
+                    
+                    Array.from(select.options).forEach(option => {
+                        // Skip the default empty option
+                        if (option.value === \'\') return;
+                        
+                        // Skip the currently selected option for this select
+                        if (option.value === currentValue) {
+                            option.classList.remove(\'hidden\');
+                            return;
+                        }
+                        
+                        // Hide if the option is selected in another dropdown
+                        if (selectedValues.includes(option.value)) {
+                            option.classList.add(\'hidden\');
+                        } else {
+                            option.classList.remove(\'hidden\');
+                        }
+                    });
+                });
+            }
+
+            // Run on page load to set up initial state
+            document.addEventListener(\'DOMContentLoaded\', function() {
+                // Initialize all selects
+                const selects = document.querySelectorAll(\'.exclusive-select\');
+                selects.forEach(select => {
+                    select.addEventListener(\'change\', updateOptions);
+                });
+                
+                // Apply initial state
+                updateOptions();
+            });
+
+         
+            const productOptions = [
+                    ';foreach ($products as $product){
+                        
+                $view .= '{
+                            value: "'.$product['product_id'].'",
+                            text: "'.$product['product_id'].' - '.$product['product_name'].'"
+                        },';
+                    }
+    $view .='  ];
+        
+
+            // Function to generate option HTML with appropriate hidden class
+            function generateOptionsWithHidden(selectedValues) {
+            let optionsHTML = \'\';
+
+            // Manually loop through productOptions instead of using template literals
+            for (let i = 0; i < productOptions.length; i++) {
+                const option = productOptions[i];
+                const isHidden = selectedValues.includes(option.value) ? \'class="hidden"\' : \'\';
+                optionsHTML += \'<option value="\' + option.value + \'" \' + isHidden + \'>\' + option.text + \'</option>\';
+            }
+
+            return optionsHTML;
+            }
 
             function addNewRow() {
+
             rowCounter++;
             const tbody = document.getElementById(\'tableBody\');
             const newRow = document.createElement(\'tr\');
             
+            // Get all currently selected values before creating the new row
+            const selectedValues = getAllSelectedValues();
+            
             newRow.innerHTML = `
             <tr><td>
                     <select form="new" name="status">
@@ -314,11 +398,9 @@ $view .= '
                     </select>
                     </td>
                     <td>
-                        <select form="new" name="product_id">';
-                        foreach ($products as $product){
-                            $view .= '<option value="'.$product['product_id'].'">'.$product['product_id'] .' - '.(${$product['product_name']} ?? $product['product_name']).'</option>
-                           ';}  
-            $view .= '  </select>
+                        <select form="new" class="exclusive-select" name="product_id">
+                            ${generateOptionsWithHidden(selectedValues)} 
+                        </select>
                     </td>
                     <td><input form="new" type="number" min="0" step="0.01" name="price" placeholder="'.($pricelists_item_price ?? 'Price').'" value=""></td>
                     <td><input form="new" type="number" min="0" step="0.01" name="rrp" placeholder="'.($pricelists_item_rrp ?? 'Recommended Price').'" value=""></td>
@@ -338,7 +420,10 @@ $view .= '
             
             tbody.appendChild(newRow);
             }
-        </script>';
+
+          
+        </script>
+        ';
     
 $view .= '
     </div>