<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>مركز استرجاع المبالغ - عبايات فيوري</title>
<style>
/* نفس الأنماط السابقة بدون تغيير */
#refund-container { font-family: "Tajawal", sans-serif; background: #f7f7f7; color: #014252; padding: 20px; direction: rtl; text-align: right; }
#refund-container .form-wrapper { max-width: 600px; margin: auto; background: #ffffff; padding: 25px; border-radius: 16px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); }
#thank-you-message { text-align: center; padding: 40px 20px; }
#thank-you-message .icon { font-size: 50px; color: #28a745; line-height: 1; }
#thank-you-message h2 { font-size: 24px; color: #014252; margin-top: 15px; }
#thank-you-message p { font-size: 16px; line-height: 1.8; color: #333; max-width: 450px; margin: 15px auto 0; }
#refund-container h2 { text-align: center; font-size: 22px; margin-bottom: 15px; color: #014252; }
#refund-container label { font-weight: bold; font-size: 15px; display: block; margin-bottom: 5px; }
#refund-container input, #refund-container select, #refund-container textarea { width: 100%; padding: 12px; margin-bottom: 16px; border: 1px solid #ccc; border-radius: 8px; font-size: 15px; box-sizing: border-box; font-family: 'Tajawal', sans-serif; }
#refund-container button[type="submit"] { width: 100%; padding: 14px; background: #014252; color: #fff; border: none; border-radius: 8px; font-size: 17px; cursor: pointer; }
#refund-container button[type="submit"]:disabled { background-color: #999; cursor: not-allowed; }
#refund-container .whatsapp-btn { width: 100%; padding: 14px; background: #25d366; color: #fff; border: none; border-radius: 8px; font-size: 16px; cursor: pointer; margin-top: 10px; display: flex; align-items: center; justify-content: center; gap: 10px; font-weight: bold; text-decoration: none; }
#refund-container .whatsapp-btn svg { width: 24px; height: 24px; fill: #fff; }
#refund-container .hidden { display: none; }
#refund-container .terms-box { margin-top: 15px; margin-bottom: 20px; display: flex; align-items: flex-start; gap: 10px; }
#refund-container .terms-box input[type="checkbox"] { width: auto; margin: 0; margin-top: 5px; flex-shrink: 0; }
#refund-container .wallet-total { background-color: #e6f3f5; color: #014252; padding: 10px; border-radius: 8px; margin-top: 5px; margin-bottom: 10px; font-weight: bold; text-align: center; }
#refund-container .intro-text { margin-bottom: 20px; line-height: 1.7; font-size: 15px; border-bottom: 1px solid #eee; padding-bottom: 15px; text-align: center; }
#refund-container .sub-label { font-size: 12px; color: #555; margin-top: -12px; margin-bottom: 12px; display: block; }
#refund-container .terms-box label { font-size: 13px; color: #c0392b; font-weight: normal; line-height: 1.6; }
.incentive-note { background-color: #e6f3f5; color: #014252; padding: 10px; border-radius: 8px; margin-bottom: 15px; font-weight: bold; text-align: center; font-size: 14px; }
.timing-note { font-size: 12px; color: #777; margin-top: -10px; margin-bottom: 10px; }
.info-message { background-color: #d1ecf1; color: #0c5460; padding: 10px; border-radius: 8px; margin-bottom: 15px; border: 1px solid #bee5eb; font-weight: bold; text-align: center; }
.mandatory-wallet { background-color: #fff3cd; color: #856404; padding: 12px; border-radius: 8px; margin-bottom: 15px; border: 1px solid #ffeeba; font-weight: bold; text-align: center; }
.reference-number-box { background: linear-gradient(135deg, #e6f3f5 0%, #f0f8ff 100%); color: #014252; padding: 30px 20px; border-radius: 12px; margin: 25px 0; border: 1px solid #b8d9e0; text-align: center; box-shadow: 0 2px 8px rgba(1, 66, 82, 0.08); }
.reference-number-box .label { font-size: 15px; color: #555; margin-bottom: 12px; font-weight: 500; letter-spacing: 0.5px; }
.reference-number-box .number { font-size: 26px; color: #014252; font-weight: 600; font-family: 'Tajawal', sans-serif; letter-spacing: 1px; word-break: break-all; line-height: 1.6; margin: 8px 0; }
.reference-number-box .copy-btn { background-color: #014252; color: #fff; border: none; padding: 11px 24px; border-radius: 8px; cursor: pointer; margin-top: 15px; font-size: 14px; font-weight: 600; transition: all 0.3s ease; box-shadow: 0 2px 6px rgba(1, 66, 82, 0.2); }
.reference-number-box .copy-btn:hover { background-color: #0a2e3f; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(1, 66, 82, 0.3); }
.reference-number-box .copy-btn:active { transform: translateY(0); }
.reference-number-box .copy-btn.copied { background-color: #28a745; box-shadow: 0 2px 6px rgba(40, 167, 69, 0.2); }
@media (max-width: 600px) { #refund-container { padding: 10px; } #refund-container .form-wrapper { padding: 15px; } #refund-container h2 { font-size: 20px; } .reference-number-box .number { font-size: 22px; } }
</style>
</head>
<body>
{
const copyBtn = document.getElementById('copyBtn');
copyBtn.textContent = 'تم النسخ ';
copyBtn.classList.add('copied');
setTimeout(() => {
copyBtn.textContent = 'نسخ الرقم';
copyBtn.classList.remove('copied');
}, 2000);
}).catch(() => {
alert('فشل نسخ الرقم. يرجى المحاولة يدويًا.');
});
}
document.addEventListener('DOMContentLoaded', function () {
const form = document.getElementById('refundForm');
const formContent = document.getElementById('form-content');
const thankYouMessage = document.getElementById('thank-you-message');
const submitBtn = document.getElementById('submit-btn');
const refundAmountInput = document.getElementById('refundAmount');
const amountInfoMessage = document.getElementById('amountInfoMessage');
const copyBtn = document.getElementById('copyBtn');
if (copyBtn) {
copyBtn.addEventListener('click', copyReferenceNumber);
}
// --- باقي تعريفات المتغيرات كما هي ---
const methodSection = document.getElementById('methodSection');
const refundMethod = document.getElementById('refundMethod');
const optionalWalletSection = document.getElementById('optionalWalletSection');
const optionalWalletTotalDisplay = document.getElementById('optionalWalletTotalDisplay');
const agreeOptionalWallet = document.getElementById('agreeOptionalWallet');
const mandatoryWalletSection = document.getElementById('mandatoryWalletSection');
const mandatoryWalletTotalDisplay = document.getElementById('mandatoryWalletTotalDisplay');
const agreeMandatoryWallet = document.getElementById('agreeMandatoryWallet');
const originalPaymentSection = document.getElementById('originalPaymentSection');
const originalPaymentMethod = document.getElementById('originalPaymentMethod');
const bankSection = document.getElementById('bankSection');
const bankFields = bankSection.querySelectorAll('input, select');
const agreeBank = document.getElementById('agreeBank');
const mobileInput = document.getElementById('mobile');
const refundReason = document.getElementById('refundReason');
const otherReasonSection = document.getElementById('otherReasonSection');
const otherReason = document.getElementById('otherReason');
// --- كل الدوال الأخرى (resetAllDynamicSections, updateFormBasedOnAmount, etc.) تبقى كما هي ---
function resetAllDynamicSections() {
methodSection.classList.add('hidden');
mandatoryWalletSection.classList.add('hidden');
optionalWalletSection.classList.add('hidden');
originalPaymentSection.classList.add('hidden');
bankSection.classList.add('hidden');
amountInfoMessage.classList.add('hidden');
refundMethod.required = false;
agreeMandatoryWallet.required = false;
agreeOptionalWallet.required = false;
originalPaymentMethod.required = false;
bankFields.forEach(field => field.required = false);
agreeBank.required = false;
}
function updateFormBasedOnAmount() {
resetAllDynamicSections();
const amount = parseFloat(refundAmountInput.value);
if (isNaN(amount) || amount <= 0) return;
if (amount < 100) {
mandatoryWalletSection.classList.remove('hidden');
agreeMandatoryWallet.required = true;
const finalAmount = amount * 1.10;
mandatoryWalletTotalDisplay.textContent = `المبلغ الإجمالي مع الرصيد الإضافي: ${finalAmount.toFixed(2)} ريال`;
mandatoryWalletTotalDisplay.classList.remove('hidden');
amountInfoMessage.textContent = `المبلغ ${amount} ريال سيتم إرجاعه إلى المحفظة مع 10% رصيد إضافي`;
amountInfoMessage.classList.remove('hidden');
} else {
methodSection.classList.remove('hidden');
refundMethod.required = true;
amountInfoMessage.textContent = `المبلغ ${amount} ريال - اختر طريقة الاسترجاع المفضلة`;
amountInfoMessage.classList.remove('hidden');
updateMethodOptions();
}
}
function updateMethodOptions() {
const selectedMethod = refundMethod.value;
const amount = parseFloat(refundAmountInput.value);
optionalWalletSection.classList.add('hidden');
originalPaymentSection.classList.add('hidden');
bankSection.classList.add('hidden');
agreeOptionalWallet.required = false;
originalPaymentMethod.required = false;
bankFields.forEach(field => field.required = false);
agreeBank.required = false;
if (selectedMethod === 'محفظة') {
optionalWalletSection.classList.remove('hidden');
agreeOptionalWallet.required = true;
const finalAmount = amount * 1.10;
optionalWalletTotalDisplay.textContent = `المبلغ الإجمالي مع الرصيد الإضافي: ${finalAmount.toFixed(2)} ريال`;
optionalWalletTotalDisplay.classList.remove('hidden');
} else if (selectedMethod === 'طريقة الدفع الأصلية') {
originalPaymentSection.classList.remove('hidden');
originalPaymentMethod.required = true;
updateOriginalPaymentOptions();
} else if (selectedMethod === 'تحويل بنكي') {
bankSection.classList.remove('hidden');
bankFields.forEach(field => field.required = true);
agreeBank.required = true;
}
}
function updateOriginalPaymentOptions() {
const selectedOriginalMethod = originalPaymentMethod.value;
bankSection.classList.add('hidden');
bankFields.forEach(field => field.required = false);
agreeBank.required = false;
const needsBankDetails = ['البطاقة الائتمانية (فيزا)', 'البطاقة الائتمانية (ماستركارد)', 'مدى'];
if (needsBankDetails.includes(selectedOriginalMethod)) {
bankSection.classList.remove('hidden');
bankFields.forEach(field => field.required = true);
agreeBank.required = true;
}
}
refundAmountInput.addEventListener('input', updateFormBasedOnAmount);
refundMethod.addEventListener('change', updateMethodOptions);
originalPaymentMethod.addEventListener('change', updateOriginalPaymentOptions);
refundReason.addEventListener('change', function() {
if (refundReason.value === 'سبب آخر') {
otherReasonSection.classList.remove('hidden');
otherReason.required = true;
} else {
otherReasonSection.classList.add('hidden');
otherReason.required = false;
otherReason.value = '';
}
});
mobileInput.addEventListener('focus', function(e) { if (e.target.value === '') e.target.value = '+966'; });
mobileInput.addEventListener('input', function(e) {
let value = e.target.value;
if (!value.startsWith('+966')) value = '+966';
value = '+966' + value.substring(4).replace(/\D/g, '');
if (value.length > 13) value = value.slice(0, 13);
e.target.value = value;
});
// --- تعديل دالة الإرسال ---
form.addEventListener('submit', function (e) {
e.preventDefault();
if (!form.checkValidity()) {
form.reportValidity();
return;
}
const formData = new FormData(form);
const object = {};
formData.forEach((value, key) => { object[key] = value; });
// إضافة الرقم المرجعي للبيانات المرسلة
object.generated_reference_number = generateReferenceNumber(object.order_id);
const json = JSON.stringify(object);
submitBtn.disabled = true;
submitBtn.textContent = 'جارٍ الإرسال...';
// استخدام fetch لإرسال البيانات إلى الـ API الخاص بك
fetch('/api/public/refund-request', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json'
},
body: json
})
.then(response => {
if (response.ok) {
return response.json();
}
// في حالة وجود خطأ من الخادم (مثل 4xx أو 5xx)
return response.json().then(err => { throw new Error(err.message || 'حدث خطأ من الخادم') });
})
.then(data => {
// في حالة النجاح
document.getElementById('displayReferenceNumber').textContent = object.generated_reference_number;
formContent.style.display = 'none';
thankYouMessage.classList.remove('hidden');
})
.catch(error => {
// في حالة فشل الاتصال أو وجود خطأ
alert(error.message || "فشل إرسال الطلب. يرجى المحاولة مرة أخرى.");
})
.finally(() => {
// إعادة تفعيل الزر في كل الحالات
submitBtn.disabled = false;
submitBtn.textContent = 'إرسال الطلب';
});
});
});
</body>
</html>
