order-button v2: Order picker modal + product page button fix + order edit with prompt/delete"

order-button.js

@@ -1,125 +1,140 @@
 /**
- * V.AI STUDIO — Order Button Injection
- * 1. Adds "Thêm đơn" button to search dropdown results
- * 2. Adds floating "Thêm đơn" button on product detail pages
+ * V.AI STUDIO — Order Button v2
+ * 1. "Thêm đơn" on product pages → shows order picker (choose which order)
+ * 2. "Thêm đơn" in search dropdown → same order picker
+ * 3. Order detail modal: delete SP per row + prompt for fees/deposit/discount
  */
 (function(){
 'use strict';
 
-// Wait for D and VAI_ORDERS to be ready
-function waitReady(cb){
-    var t=setInterval(function(){
-        if(typeof D!=='undefined'&&D.length>100){clearInterval(t);cb();}
-    },2000);
-    setTimeout(function(){clearInterval(t);},20000);
-}
+function waitReady(cb){var t=setInterval(function(){if(typeof D!=='undefined'&&D.length>100&&window.VAI_ORDERS){clearInterval(t);cb();}},2000);setTimeout(function(){clearInterval(t);},25000);}
+function fmt(n){if(!n||isNaN(n))return'0đ';return Number(n).toLocaleString('vi-VN')+'đ';}
 
-function addToLastOrder(product){
-    if(!window.VAI_ORDERS||!window.VAI_ORDERS.getAll)return false;
-    var orders=window.VAI_ORDERS.getAll();
-    if(!orders.length)return false;
-    var latest=orders[0];
+/**
+ * Show order picker modal: let user choose which saved order to add product to
+ */
+function showOrderPicker(product,onDone){
+    var old=document.getElementById('vai-order-picker');if(old)old.remove();
+    var orders=(window.VAI_ORDERS&&window.VAI_ORDERS.getAll)?window.VAI_ORDERS.getAll():[];
+    
+    var overlay=document.createElement('div');
+    overlay.id='vai-order-picker';
+    overlay.style.cssText='position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:99999;display:flex;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(2px)';
+    overlay.addEventListener('click',function(e){if(e.target===overlay)overlay.remove();});
+    
     var name=product.name||product.n||'';
+    var sku=product.sku||product.model||product.mod||'';
     var price=product.priceNum||product.pn||0;
     if(!price)price=parseInt((product.price||product.p||'').toString().replace(/[^\d]/g,''))||0;
-    latest.items=latest.items||[];
-    // Check duplicate
-    var sku=product.sku||product.model||product.mod||'';
-    for(var i=0;i<latest.items.length;i++){if(latest.items[i].model===sku)return'dup';}
-    latest.items.push({name:name,model:sku,image:product.image||product.img||product.i||'',price:price,discPrice:price,qty:1,total:price,note:''});
-    latest.grandTotal=(latest.grandTotal||0)+price;
-    latest.savedAt=new Date().toISOString();
-    window.VAI_ORDERS.add(latest);
-    return true;
+    
+    var h='<div style="background:#fff;border-radius:16px;max-width:400px;width:100%;max-height:70vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.3)">';
+    h+='<div style="padding:14px 18px;background:#003f62;border-radius:16px 16px 0 0;color:#fff"><div style="font-weight:800;font-size:14px">🛒 Thêm vào đơn</div><div style="font-size:11px;margin-top:4px;color:#bae6fd">'+name.substring(0,40)+'</div></div>';
+    h+='<div style="padding:14px 18px">';
+    
+    if(!orders.length){
+        h+='<div style="text-align:center;padding:20px;color:#64748b">Chưa có đơn hàng nào.<br><span style="font-size:11px">Tạo báo giá trước rồi lưu đơn.</span></div>';
+    }else{
+        h+='<div style="font-size:11px;color:#64748b;margin-bottom:8px">Chọn đơn:</div>';
+        orders.forEach(function(o,idx){
+            h+='<div class="vai-op-item" data-idx="'+idx+'" style="padding:10px 12px;border:1px solid #e2e8f0;border-radius:8px;margin-bottom:6px;cursor:pointer;transition:background .1s" onmouseover="this.style.background=\'#f0f9ff\'" onmouseout="this.style.background=\'\'">';
+            h+='<div style="display:flex;justify-content:space-between;align-items:center"><b style="color:#003f62;font-size:13px">'+o.code+'</b><span style="font-size:11px;color:#64748b">'+(o.items?o.items.length:0)+' SP</span></div>';
+            h+='<div style="font-size:11px;color:#64748b;margin-top:2px">'+(o.customer||'')+(o.date?' • '+o.date:'')+'</div></div>';
+        });
+    }
+    h+='<button id="vai-op-close" style="margin-top:10px;width:100%;padding:10px;background:#e2e8f0;border:none;border-radius:8px;font-weight:600;cursor:pointer">Đóng</button>';
+    h+='</div></div>';
+    overlay.innerHTML=h;
+    document.body.appendChild(overlay);
+    
+    document.getElementById('vai-op-close').onclick=function(){overlay.remove();};
+    overlay.querySelectorAll('.vai-op-item').forEach(function(item){
+        item.addEventListener('click',function(){
+            var idx=parseInt(this.getAttribute('data-idx'));
+            var order=orders[idx];
+            if(!order)return;
+            order.items=order.items||[];
+            // Check duplicate
+            for(var i=0;i<order.items.length;i++){if(order.items[i].model===sku){overlay.remove();if(onDone)onDone('dup');return;}}
+            order.items.push({name:name,model:sku,image:product.image||product.img||product.i||'',price:price,discPrice:price,qty:1,total:price,note:''});
+            order.grandTotal=(order.grandTotal||0)+price;
+            order.savedAt=new Date().toISOString();
+            window.VAI_ORDERS.add(order);
+            overlay.remove();
+            if(onDone)onDone('ok');
+        });
+    });
 }
 
 /**
- * Override/enhance search dropdown to add "Thêm đơn" buttons
+ * Enhance search dropdown with "Thêm đơn" buttons
  */
 function enhanceSearchDropdown(){
-    // Watch for dropdown appearance and add buttons
-    var observer=new MutationObserver(function(){
+    new MutationObserver(function(){
         var dropdown=document.getElementById('vai-search-dropdown');
         if(!dropdown||dropdown.style.display==='none')return;
-        // Add buttons if not already added
-        var items=dropdown.querySelectorAll('.vai-dd-item:not([data-btn-added])');
-        items.forEach(function(item){
-            item.setAttribute('data-btn-added','1');
-            var slug=item.getAttribute('data-slug');
-            if(!slug)return;
-            // Add "Thêm đơn" button
+        dropdown.querySelectorAll('.vai-dd-item:not([data-ob])').forEach(function(item){
+            item.setAttribute('data-ob','1');
+            var slug=item.getAttribute('data-slug');if(!slug)return;
             var btn=document.createElement('button');
-            btn.className='vai-dd-add-btn';
             btn.textContent='+ Đơn';
             btn.style.cssText='padding:4px 8px;background:#003f62;color:#fff;border:none;border-radius:4px;font-size:10px;font-weight:700;cursor:pointer;white-space:nowrap;margin-left:6px;flex-shrink:0';
             btn.addEventListener('click',function(e){
                 e.stopPropagation();
-                // Find product by slug
                 for(var i=0;i<D.length;i++){
                     if(D[i]&&D[i].slug===slug){
-                        var result=addToLastOrder(D[i]);
-                        if(result===true){btn.textContent='✓';btn.style.background='#059669';}
-                        else if(result==='dup'){btn.textContent='Đã có';btn.style.background='#94a3b8';}
-                        else{btn.textContent='Chưa có đơn';btn.style.background='#dc2626';}
-                        setTimeout(function(){btn.textContent='+ Đơn';btn.style.background='#003f62';},2000);
-                        break;
+                        showOrderPicker(D[i],function(r){
+                            if(r==='ok'){btn.textContent='✓';btn.style.background='#059669';}
+                            else if(r==='dup'){btn.textContent='Đã có';btn.style.background='#94a3b8';}
+                            setTimeout(function(){btn.textContent='+ Đơn';btn.style.background='#003f62';},2000);
+                        });break;
                     }
                 }
             });
             item.appendChild(btn);
         });
-    });
-    observer.observe(document.body,{childList:true,subtree:true,attributes:true});
+    }).observe(document.body,{childList:true,subtree:true,attributes:true});
 }
 
 /**
- * Add floating "Thêm vào đơn" button on product detail pages
+ * Floating button on product detail pages
  */
 function addProductPageButton(){
-    var url=window.location.pathname;
-    var slugMatch=url.match(/\/san-pham\/([^/]+)/);
+    var slugMatch=window.location.pathname.match(/\/san-pham\/([^/]+)/);
     if(!slugMatch)return;
     var slug=slugMatch[1];
     
-    // Wait for page to load
-    setTimeout(function(){
-        // Don't add if already exists
-        if(document.getElementById('vai-add-order-btn'))return;
+    // Retry until D is loaded and product found
+    var attempts=0;
+    var t=setInterval(function(){
+        attempts++;if(attempts>20){clearInterval(t);return;}
+        if(typeof D==='undefined'||!D.length)return;
+        if(document.getElementById('vai-page-add-btn'))return;
         
-        // Find product
         var product=null;
-        for(var i=0;i<D.length;i++){
-            if(D[i]&&D[i].slug===slug){product=D[i];break;}
-        }
+        for(var i=0;i<D.length;i++){if(D[i]&&D[i].slug===slug){product=D[i];break;}}
         if(!product)return;
+        clearInterval(t);
         
-        // Create floating button
         var btn=document.createElement('button');
-        btn.id='vai-add-order-btn';
+        btn.id='vai-page-add-btn';
         btn.innerHTML='🛒 Thêm vào đơn';
-        btn.style.cssText='position:fixed;bottom:80px;right:16px;z-index:999;padding:12px 20px;background:linear-gradient(135deg,#003f62,#0369a1);color:#fff;border:none;border-radius:30px;font-size:14px;font-weight:700;cursor:pointer;box-shadow:0 4px 16px rgba(0,63,98,.4);transition:transform .2s,box-shadow .2s';
-        btn.onmouseover=function(){this.style.transform='scale(1.05)';this.style.boxShadow='0 6px 20px rgba(0,63,98,.5)';};
-        btn.onmouseout=function(){this.style.transform='';this.style.boxShadow='0 4px 16px rgba(0,63,98,.4)';};
+        btn.style.cssText='position:fixed;bottom:80px;right:16px;z-index:999;padding:12px 20px;background:linear-gradient(135deg,#003f62,#0369a1);color:#fff;border:none;border-radius:30px;font-size:14px;font-weight:700;cursor:pointer;box-shadow:0 4px 16px rgba(0,63,98,.4);transition:transform .2s';
+        btn.onmouseover=function(){this.style.transform='scale(1.05)';};
+        btn.onmouseout=function(){this.style.transform='';};
         btn.addEventListener('click',function(){
-            var result=addToLastOrder(product);
-            if(result===true){
-                btn.innerHTML='✅ Đã thêm!';btn.style.background='linear-gradient(135deg,#059669,#10b981)';
+            showOrderPicker(product,function(r){
+                if(r==='ok'){btn.innerHTML='✅ Đã thêm!';btn.style.background='linear-gradient(135deg,#059669,#10b981)';}
+                else if(r==='dup'){btn.innerHTML='ℹ️ Đã có';btn.style.background='#64748b';}
                 setTimeout(function(){btn.innerHTML='🛒 Thêm vào đơn';btn.style.background='linear-gradient(135deg,#003f62,#0369a1)';},2500);
-            }else if(result==='dup'){
-                btn.innerHTML='ℹ️ Đã có trong đơn';btn.style.background='#64748b';
-                setTimeout(function(){btn.innerHTML='🛒 Thêm vào đơn';btn.style.background='linear-gradient(135deg,#003f62,#0369a1)';},2000);
-            }else{
-                btn.innerHTML='⚠️ Chưa có đơn nào';btn.style.background='#dc2626';
-                setTimeout(function(){btn.innerHTML='🛒 Thêm vào đơn';btn.style.background='linear-gradient(135deg,#003f62,#0369a1)';},2000);
-            }
+            });
         });
         document.body.appendChild(btn);
-    },2000);
+    },1500);
 }
 
 waitReady(function(){
     enhanceSearchDropdown();
     addProductPageButton();
-    console.log('✅ Order buttons ready');
+    console.log('✅ Order buttons v2 ready');
 });
 })();