(function(){
var btn=document.querySelector('[data-action="track-order"]');
var input=document.getElementById('track-ref');
if(input){
input.addEventListener('keydown',function(e){
if(e.key==='Enter'){e.preventDefault();if(btn)btn.click();}
});
}
if(btn){btn.addEventListener('click',function(){
var ref=document.getElementById('track-ref').value.trim();
var result=document.getElementById('track-result');
if(!ref)return;
btn.disabled=true;
btn.innerHTML='<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><circle cx="12" cy="12" r="10" stroke-dasharray="30" stroke-dashoffset="10"><animateTransform attributeName="transform" type="rotate" from="0 12 12" to="360 12 12" dur="0.8s" repeatCount="indefinite"/></circle></svg> Tracking...';
Bridge.post('/api/router.php',{action:'track_order',reference:ref}).then(function(r){
btn.disabled=false;
btn.innerHTML='<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg> Track Order';
if(r.order){
var stages=['pending','paid','processing','packed','shipped','delivered'];
var stageLabels=['Pending','Confirmed','Processing','Packed','Shipped','Delivered'];
var current=stages.indexOf(r.order.status);
var html='<div class="track-result-card">';
html+='<div class="track-result-header"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 11-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg> Order Found</div>';
html+='<div class="track-result-ref">'+Bridge.esc(r.order.reference)+'</div>';
html+='<div class="track-timeline">';
for(var i=0;i<stages.length;i++){
var done=i<=current;
var isCurrent=i===current;
var cls='track-tl-step';
if(done)cls+=' track-tl-done';
if(isCurrent)cls+=' track-tl-current';
html+='<div class="'+cls+'">';
html+='<div class="track-tl-dot">'+(i+1)+'</div>';
html+='<div class="track-tl-label">'+stageLabels[i]+'</div>';
html+='</div>';
if(i<stages.length-1){
html+='<div class="track-tl-line'+(i<current?' track-tl-done':'')+'"></div>';
}
}
html+='</div>';
if(r.order.tracking_number){
html+='<div class="track-result-detail track-result-tracking">';
html+='<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="1" y="3" width="15" height="13"/><polygon points="16 8 20 8 23 11 23 16 16 16 16 8"/><circle cx="5.5" cy="18.5" r="2.5"/><circle cx="18.5" cy="18.5" r="2.5"/></svg>';
html+='<strong>Tracking:</strong> '+Bridge.esc(r.order.tracking_number);
html+='</div>';
}
if(r.order.carrier){
html+='<div class="track-result-detail"><strong>Carrier:</strong> '+Bridge.esc(r.order.carrier)+'</div>';
}
if(r.order.shipping_method==='express'){
html+='<div class="track-express-badge"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg> Express Post</div>';
}
html+='<div class="track-result-detail"><strong>Total:</strong> $'+Bridge.esc(r.order.total)+'</div>';
html+='</div>';
result.innerHTML=html;
}else{
result.innerHTML='<div class="track-error"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg> '+(r.error||'Order not found. Please check your reference number.')+'</div>';
}
}).catch(function(){
btn.disabled=false;
btn.innerHTML='<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg> Track Order';
result.innerHTML='<div class="track-error"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg> Connection error. Please try again.</div>';
});
});}
})();
