Track orders

<p style="text-align: center;"><img style="width: 1850px;border-end-end-radius: 30px;border-end-start-radius: 30px;" src="" alt="" /></p>

<div id="track-container" style="max-width:990px; margin:auto; background:#fff; padding:20px; border-radius:12px; box-shadow:0 0 10px #eee;"> <h3 style="text-align:center; color:#333;">تتبع طلبك</h3> <input type="text" id="orderNumber" placeholder="رقم الطلب" style="width:100%;padding:10px;margin:10px 0;border:1px solid #ddd;border-radius:5px;text-align:center;"> <button onclick="trackOrder()" style="width:100%;background:#d60a30;color:white;padding:10px;border:none;border-radius:5px;font-size:15px;"> تتبع الآن </button> <div id="result" style="margin-top:25px;"></div> </div> <style> @keyframes ripple { 0% { box-shadow: 0 0 0 0 rgba(76,175,80,.4), 0 0 0 5px rgba(76,175,80,.3), 0 0 0 10px rgba(76,175,80,.2); } 70% { box-shadow: 0 0 0 10px rgba(76,175,80,0), 0 0 0 20px rgba(76,175,80,0), 0 0 0 30px rgba(76,175,80,0); } 100% { box-shadow: 0 0 0 0 rgba(76,175,80,0); } } .ripple { animation: ripple 1.5s infinite; } </style> <script> const SHEETS = [ { id: "1t8tGi3OTADMlzSKh0e6r2YoHzz0_gDv3", name: "DataForAPI" }, { id: "1meqa0JtTRSoenXvXXjKikyL_AfuqcbkI", name: "DataForAPI" } ]; const steps = [ { label: 'تم استلام الطلب', sub: 'و جار التأكيد' }, { label: 'تم تأكيد الطلب', sub: 'تم التاكيد و سيتم تجهيز الاوردر' }, { label: 'جارٍ تجهيز الطلب', sub: 'في مرحلة تجهيز الطلب لإرساله لشركة الشحن' }, { label: 'تم الشحن', sub: '' }, { label: 'تم التسليم', sub: 'شكراً لاختيارك Dream 2000' } ]; async function fetchSheet(sheet) { const url = `https://docs.google.com/spreadsheets/d/${sheet.id}/gviz/tq?tqx=out:json&sheet=${sheet.name}`; const res = await fetch(url); const text = await res.text(); const json = JSON.parse(text.substr(47).slice(0, -2)); return json.table.rows.map(r => r.c.map(c => c ? c.v : "")); } async function trackOrder() { const orderNumber = document.getElementById("orderNumber").value.trim(); const result = document.getElementById("result"); if (!orderNumber) { result.innerHTML = "<p style='text-align:center; color:red;'>⚠️ من فضلك أدخل رقم الطلب</p>"; return; } result.innerHTML = "<p style='text-align:center;'>⏳ جاري البحث عن الاوردر...</p>"; let match = null; for (const sheet of SHEETS) { try { const rows = await fetchSheet(sheet); match = rows.find(r => r[0] == orderNumber); if (match) break; } catch (err) { console.error("Error fetching sheet:", sheet.id, err); } } if (!match) { result.innerHTML = "<p style='text-align:center; color:red;'>❌ لم يتم العثور على الاوردر برجاء التأكد من الرقم</p>"; return; } const trackingAramex = match[24]; // Column Y const trackingRaya = match[25]; // Column Z const statusValues = match.slice(26, 31); // AA → AE let trackingHTML = ""; if (trackingAramex) { trackingHTML = ` تقدر تتبع الاوردر من خلال اللينك التالي:<br> <a href="https://www.aramex.com/eg/ar/track/track-results-new?source=aramex&ShipmentNumber=${trackingAramex}" target="_blank" style="color:#d41235;font-weight:bold;"> تتبع شحنة أرامكس </a><br> رقم البوليصة: ${trackingAramex} `; } else if (trackingRaya) { trackingHTML = ` تقدر تتبع الاوردر من خلال اللينك التالي:<br> <a href="https://rayalogistics.com.eg/LogisticsPortal/TrackShipment" target="_blank" style="color:#d41235;font-weight:bold;"> تتبع شحنة راية </a><br> رقم البوليصة: ${trackingRaya} `; } let progressHTML = ` <div style="display:flex; justify-content:space-between; position:relative; margin-top:30px;"> <div style="position:absolute; top:12px; left:0; right:0; height:4px; background:#e0e0e0;"></div> `; statusValues.forEach((val, i) => { const done = val && val.toString().trim() !== ""; progressHTML += ` <div style="text-align:center; z-index:2; flex:1;"> <div class="${done ? 'ripple' : ''}" style="width:26px;height:26px;margin:auto;border-radius:50%; background:${done ? '#8bc34a' : '#ccc'}; line-height:26px;color:white;font-size:12px;"> ${done ? '✓' : i + 1} </div> <p style="font-size:12px;margin-top:8px;font-weight:bold;">${steps[i].label}</p> ${done ? `<p style="font-size:11px;color:#444;margin-top:5px;"> ${i === 3 && (trackingAramex || trackingRaya) ? trackingHTML : steps[i].sub} </p>` : ""} </div> `; }); progressHTML += "</div>"; result.innerHTML = ` <div style="background:#f8f9fa;padding:20px;border-radius:8px; direction:rtl;"> <p style="text-align:center; font-size:16px;"><b>رقم الطلب:</b> ${orderNumber}</p> ${progressHTML} </div> `; } </script>