valu checkout

<div class="valu-checkout-wrapper"> <div class="checkout-card"> <div class="valu-inner-logo"> <img src="https://valu.com.eg/assets/images/valu.webp" alt="valU Logo"> </div> <h3>طلب شراء بالتقسيط</h3> <p class="product-display" id="display-p-name">جاري تحميل بيانات المنتج...</p> <form id="valu-order-form"> <input type="hidden" name="product_name" id="hidden-p-name"> <div class="form-row"> <div class="input-group"> <label>الاسم الأول</label> <input type="text" name="first_name" placeholder="مثلاً: محمد" required> </div> <div class="input-group"> <label>اسم العائلة</label> <input type="text" name="last_name" placeholder="مثلاً: علي" required> </div> </div> <div class="input-group"> <label>رقم الموبايل (المسجل في فاليو)</label> <input type="tel" name="mobile" placeholder="01xxxxxxxxx" required pattern="[0-9]{11}" title="يرجى إدخال رقم موبايل صحيح مكون من 11 رقم"> </div> <div class="input-group"> <label>المحافظة</label> <select name="city" required> <option value="">اختر المحافظة</option> <option value="القاهرة">القاهرة</option> <option value="الجيزة">الجيزة</option> <option value="الإسكندرية">الإسكندرية</option> <option value="الدقهلية">الدقهلية</option> <option value="البحر الأحمر">البحر الأحمر</option> <option value="البحيرة">البحيرة</option> <option value="الفيوم">الفيوم</option> <option value="الغربية">الغربية</option> <option value="الإسماعيلية">الإسماعيلية</option> <option value="المنوفية">المنوفية</option> <option value="المنيا">المنيا</option> <option value="القليوبية">القليوبية</option> <option value="الوادي الجديد">الوادي الجديد</option> <option value="السويس">السويس</option> <option value="أسوان">أسوان</option> <option value="أسيوط">أسيوط</option> <option value="بني سويف">بني سويف</option> <option value="بورسعيد">بورسعيد</option> <option value="دمياط">دمياط</option> <option value="الشرقية">الشرقية</option> <option value="جنوب سيناء">جنوب سيناء</option> <option value="كفر الشيخ">كفر الشيخ</option> <option value="مطروح">مطروح</option> <option value="الأقصر">الأقصر</option> <option value="قنا">قنا</option> <option value="شمال سيناء">شمال سيناء</option> <option value="سوهاج">سوهاج</option> </select> </div> <div class="input-group"> <label>العنوان بالتفصيل</label> <textarea name="address" rows="3" placeholder="اكتب عنوانك بالتفصيل (رقم الشقة، الدور، الشارع)" required></textarea> </div> <button type="submit" id="submit-btn" class="submit-btn">إرسال طلب التقسيط</button> </form> <div id="success-msg" class="success-banner" style="display:none;"> <div class="check-icon">✓</div> <h4>تم إرسال طلبك بنجاح!</h4> <p>سيقوم فريق خدمة العملاء بالتواصل معك فى خلال 24 ساعة لإتمام عملية التقسيط.</p> </div> </div> </div> <script> const urlParams = new URLSearchParams(window.location.search); const rawProductName = urlParams.get('p_name') || "منتج غير محدد"; const rawProductSku = urlParams.get('p_sku') || ""; const cleanProductName = decodeURIComponent(rawProductName); const cleanProductSku = decodeURIComponent(rawProductSku); let displayHTML = "المنتج: " + cleanProductName; if (cleanProductSku && cleanProductSku !== "N/A") { displayHTML += "<br><small style='display:block; color: #666; font-size: 13px; font-weight: normal; margin-top: 5px;'>موديل (SKU): " + cleanProductSku + "</small>"; } document.getElementById('display-p-name').innerHTML = displayHTML; document.getElementById('hidden-p-name').value = cleanProductName + (cleanProductSku ? " - SKU: " + cleanProductSku : ""); const scriptURL = 'https://script.google.com/macros/s/AKfycbzapN6zul-YxeTWnkFXa9um_WDc4ULFSXTAPGE9LueSBjp6oW9x-9v06JotqwAqgVJIEg/exec'; const form = document.getElementById('valu-order-form'); form.addEventListener('submit', e => { e.preventDefault(); const btn = document.getElementById('submit-btn'); btn.disabled = true; btn.innerText = "جاري إرسال طلبك..."; fetch(scriptURL, { method: 'POST', body: new FormData(form)}) .then(response => { document.getElementById('success-msg').style.display = 'block'; form.style.display = 'none'; window.scrollTo(0,0); }) .catch(error => { alert('حدث خطأ أثناء الإرسال'); btn.disabled = false; btn.innerText = "إرسال طلب التقسيط"; }); }); </script> <style> .valu-checkout-wrapper { direction: rtl; font-family: 'Segoe UI', Tahoma, sans-serif; background-color: #f8f9fa; padding: 50px 15px; min-height: 100vh; } .checkout-card { background: #ffffff; max-width: 500px; margin: 0 auto; padding: 30px 40px; border-radius: 20px; box-shadow: 0 15px 35px rgba(0,0,0,0.1); } .valu-inner-logo { text-align: center; margin-bottom: 15px; } .valu-inner-logo img { height: 30px; width: auto; } h3 { text-align: center; color: #1a1a1a; margin-top: 0; margin-bottom: 15px; font-size: 20px; } .product-display { text-align: center; color: #e41e26; font-weight: bold; margin-bottom: 25px; padding: 12px; background: #fff5f5; border-radius: 10px; line-height: 1.4; } .form-row { display: flex; gap: 15px; } .input-group { margin-bottom: 15px; flex: 1; text-align: right; } .input-group label { display: block; font-size: 14px; margin-bottom: 6px; color: #444; font-weight: 600; } .input-group input, .input-group select, .input-group textarea { width: 100%; border: 1px solid #ddd; border-radius: 8px; font-size: 14px; box-sizing: border-box; } .submit-btn { width: 100%; background: #000; color: #fff; border: none; padding: 16px; border-radius: 10px; font-weight: bold; cursor: pointer; font-size: 17px; margin-top: 10px; } .success-banner { text-align: center; padding: 20px 0; } .check-icon { width: 50px; height: 50px; background: #28a745; color: white; font-size: 25px; line-height: 50px; border-radius: 50%; margin: 0 auto 15px; } @media (max-width: 480px) { .form-row { flex-direction: column; gap: 0; } .checkout-card { padding: 25px; width: 95%; } .valu-inner-logo img { height: 50px; } } </style>