310 lines
16 KiB
PHP
310 lines
16 KiB
PHP
<?php
|
|
require_once 'db/config.php';
|
|
|
|
// Language configuration
|
|
$lang = $_GET['lang'] ?? 'ar';
|
|
if (!in_array($lang, ['en', 'ar'])) $lang = 'ar';
|
|
$dir = ($lang === 'ar') ? 'rtl' : 'ltr';
|
|
|
|
// UI Text (subset for this page)
|
|
$texts = [
|
|
'en' => [
|
|
'title' => 'Case Details',
|
|
'raised' => 'Raised',
|
|
'of' => 'of',
|
|
'goal' => 'Goal',
|
|
'donate_now' => 'Donate Now',
|
|
'modal_title' => 'Make a Donation',
|
|
'modal_amount' => 'Amount (OMR)',
|
|
'modal_name' => 'Your Name',
|
|
'modal_email' => 'Your Email',
|
|
'modal_phone' => 'Phone Number',
|
|
'modal_submit' => 'Proceed to Payment',
|
|
'back_to_home' => 'Back to All Cases',
|
|
'case_not_found' => 'Case Not Found',
|
|
'case_not_found_desc' => 'The case you are looking for does not exist or is no longer active.',
|
|
'donate_type_me' => 'Donate for myself',
|
|
'donate_type_gift' => 'Donate as a gift',
|
|
'recipient_name' => 'Recipient Name',
|
|
'recipient_phone' => 'Recipient Phone',
|
|
'gift_message' => 'Gift Message',
|
|
'gift_notice' => 'The system will send a notification to the recipient.',
|
|
'home' => 'Home',
|
|
'about_us' => 'About Us',
|
|
'contact_us' => 'Contact Us',
|
|
'admin_panel' => 'Admin Panel',
|
|
'lang_name' => 'العربية',
|
|
'lang_code' => 'ar',
|
|
'goal_reached' => 'Goal Reached! Campaign Completed.',
|
|
'modal_name_placeholder' => 'Anonymous Donor',
|
|
'modal_email_placeholder' => 'you@example.com',
|
|
'modal_phone_placeholder' => '12345678',
|
|
'modal_phone_hint' => 'Enter 8 digits. 968 will be added automatically.',
|
|
],
|
|
'ar' => [
|
|
'title' => 'تفاصيل الحالة',
|
|
'raised' => 'تم جمع',
|
|
'of' => 'من',
|
|
'goal' => 'الهدف',
|
|
'donate_now' => 'تبرع الآن',
|
|
'modal_title' => 'تبرع الآن',
|
|
'modal_amount' => 'المبلغ (ريال عماني)',
|
|
'modal_name' => 'الاسم',
|
|
'modal_email' => 'البريد الإلكتروني',
|
|
'modal_phone' => 'رقم الهاتف',
|
|
'modal_submit' => 'الانتقال للدفع',
|
|
'back_to_home' => 'العودة إلى جميع الحالات',
|
|
'case_not_found' => 'الحالة غير موجودة',
|
|
'case_not_found_desc' => 'الحالة التي تبحث عنها غير موجودة أو لم تعد نشطة.',
|
|
'donate_type_me' => 'تبرع لنفسي',
|
|
'donate_type_gift' => 'تبرع كهدية لشخص آخر',
|
|
'recipient_name' => 'اسم المستلم',
|
|
'recipient_phone' => 'رقم هاتف المستلم',
|
|
'gift_message' => 'رسالة الهدية',
|
|
'gift_notice' => 'سيقوم النظام بإرسال إشعار إلى المستلم.',
|
|
'home' => 'الرئيسية',
|
|
'about_us' => 'من نحن',
|
|
'contact_us' => 'اتصل بنا',
|
|
'admin_panel' => 'لوحة التحكم',
|
|
'lang_name' => 'English',
|
|
'lang_code' => 'en',
|
|
'goal_reached' => 'تم تحقيق الهدف! الحملة مكتملة.',
|
|
'modal_name_placeholder' => 'فاعل خير',
|
|
'modal_email_placeholder' => 'you@example.com',
|
|
'modal_phone_placeholder' => '12345678',
|
|
'modal_phone_hint' => 'أدخل 8 أرقام. ستتم إضافة 968 تلقائيًا.',
|
|
]
|
|
];
|
|
|
|
$t = $texts[$lang];
|
|
|
|
// Database fetch
|
|
$pdo = db();
|
|
$profile = $pdo->query("SELECT * FROM org_profile LIMIT 1")->fetch();
|
|
|
|
// Get Case ID
|
|
$case_id = isset($_GET['id']) ? (int)$_GET['id'] : 0;
|
|
|
|
if ($case_id === 0) {
|
|
$case = null;
|
|
} else {
|
|
$stmt = $pdo->prepare("SELECT c.*, cat.name_en as cat_name_en, cat.name_ar as cat_name_ar
|
|
FROM cases c
|
|
LEFT JOIN categories cat ON c.category_id = cat.id
|
|
WHERE c.id = :id AND (c.status = 'active' OR c.status = 'completed')");
|
|
$stmt->execute(['id' => $case_id]);
|
|
$case = $stmt->fetch();
|
|
}
|
|
|
|
require_once 'includes/header.php';
|
|
?>
|
|
<style>
|
|
.case-header { padding: 3rem 0; background: #fff; border-bottom: 1px solid #e5e7eb; margin-bottom: 3rem; }
|
|
.case-title-main { font-size: 2.5rem; font-weight: 800; margin-bottom: 0.5rem; letter-spacing: -0.025em; }
|
|
.case-cat-main { font-size: 1rem; color: var(--primary-color); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
|
|
.case-image-full { width: 100%; height: 400px; object-fit: cover; border-radius: 24px; margin-bottom: 2rem; }
|
|
.progress-container { margin: 1.25rem 0; padding: 1.25rem; background: #f9fafb; border-radius: 12px; }
|
|
.progress { height: 12px; border-radius: 9999px; background-color: #e5e7eb; margin-bottom: 0.75rem; }
|
|
.progress-bar { background-color: var(--primary-color); }
|
|
.progress-stats { display: flex; justify-content: space-between; font-size: 1rem; color: var(--text-muted); }
|
|
.btn-donate { background-color: var(--primary-color); color: #fff; border: none; padding: 0.875rem 1.5rem; border-radius: 12px; font-weight: 700; width: 100%; transition: all 0.2s; }
|
|
.btn-donate:hover { background-color: var(--primary-hover); color: #fff; transform: scale(1.02); }
|
|
.donate-type-selector { display: flex; background: #f3f4f6; padding: 4px; border-radius: 12px; margin-bottom: 1.5rem; }
|
|
.donate-type-btn { flex: 1; text-align: center; padding: 8px; border-radius: 10px; cursor: pointer; font-weight: 600; font-size: 0.875rem; transition: all 0.2s; }
|
|
.donate-type-btn.active { background: #fff; color: var(--primary-color); box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
|
|
#giftFields { display: none; border: 1px solid #e5e7eb; padding: 1.25rem; border-radius: 12px; background: #f9fafb; margin-top: 1rem; }
|
|
</style>
|
|
|
|
<?php if ($case): ?>
|
|
<?php
|
|
$pct = min(100, round(($case['raised'] / $case['goal']) * 100));
|
|
?>
|
|
<header class="case-header">
|
|
<div class="container text-center">
|
|
<p class="case-cat-main"><?= $lang === 'en' ? ($case['cat_name_en'] ?? 'General') : ($case['cat_name_ar'] ?? 'عام') ?></p>
|
|
<h1 class="case-title-main"><?= $lang === 'en' ? $case['title_en'] : $case['title_ar'] ?></h1>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="container">
|
|
<div class="row justify-content-center">
|
|
<div class="col-lg-8">
|
|
<div class="bg-white p-4 p-md-5 rounded-4 shadow-sm">
|
|
<?php if ($case['image_url']): ?>
|
|
<img src="<?= htmlspecialchars($case['image_url']) ?>" class="case-image-full" alt="Case Image">
|
|
<?php endif; ?>
|
|
|
|
<div class="case-content-full">
|
|
<p class="lead" style="white-space: pre-line;"><?= htmlspecialchars($lang === 'en' ? $case['desc_en'] : $case['desc_ar']) ?></p>
|
|
</div>
|
|
|
|
<div class="progress-container">
|
|
<div class="progress">
|
|
<div class="progress-bar" role="progressbar" style="width: <?= $pct ?>%" aria-valuenow="<?= $pct ?>" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
<div class="progress-stats">
|
|
<span><strong><?= $t['raised'] ?>:</strong> OMR <?= number_format($case['raised']) ?></span>
|
|
<span><strong><?= $t['goal'] ?>:</strong> OMR <?= number_format($case['goal']) ?></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d-grid mt-4">
|
|
<?php if ($case['status'] === 'active'): ?>
|
|
<button class="btn btn-donate py-3 fs-5" data-bs-toggle="modal" data-bs-target="#donateModal"
|
|
data-case-id="<?= $case['id'] ?>"
|
|
data-case-title="<?= htmlspecialchars($lang === 'en' ? $case['title_en'] : $case['title_ar']) ?>">
|
|
<?= $t['donate_now'] ?>
|
|
</button>
|
|
<?php else: ?>
|
|
<div class="alert alert-success text-center fw-bold py-3 fs-5 mb-0 rounded-4">
|
|
<i class="bi bi-check-circle-fill me-2"></i>
|
|
<?= $t['goal_reached'] ?>
|
|
</div>
|
|
<?php endif; ?>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<?php else: ?>
|
|
<main class="container text-center py-5">
|
|
<div class="bg-white p-5 rounded-4 border">
|
|
<i class="bi bi-x-circle d-block mb-3 fs-1 text-danger"></i>
|
|
<h2 class="fw-bold"><?= $t['case_not_found'] ?></h2>
|
|
<p class="text-muted"><?= $t['case_not_found_desc'] ?></p>
|
|
<a href="index.php?lang=<?= $lang ?>" class="btn btn-primary rounded-pill px-4 mt-2">
|
|
<?= $t['back_to_home'] ?>
|
|
</a>
|
|
</div>
|
|
</main>
|
|
<?php endif; ?>
|
|
|
|
|
|
<!-- Donate Modal -->
|
|
<div class="modal fade" id="donateModal" tabindex="-1">
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-content border-0 shadow-lg rounded-4">
|
|
<form action="checkout.php" method="POST">
|
|
<input type="hidden" name="lang" value="<?= $lang ?>">
|
|
<div class="modal-header border-0 pb-0">
|
|
<h5 class="modal-title fw-bold"><?= $t['modal_title'] ?></h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body p-4">
|
|
<div class="p-3 bg-light rounded-3 mb-4 border-start border-success border-4">
|
|
<p id="modalCaseTitle" class="fw-bold text-success mb-0"></p>
|
|
</div>
|
|
|
|
<div class="donate-type-selector">
|
|
<div class="donate-type-btn active" data-type="me" onclick="setDonateType('me')">
|
|
<?= $t['donate_type_me'] ?>
|
|
</div>
|
|
<div class="donate-type-btn" data-type="gift" onclick="setDonateType('gift')">
|
|
<?= $t['donate_type_gift'] ?>
|
|
</div>
|
|
</div>
|
|
<input type="hidden" name="is_gift" id="isGiftInput" value="0">
|
|
|
|
<input type="hidden" name="case_id" id="modalCaseId">
|
|
<div class="mb-3">
|
|
<label class="form-label small fw-bold text-muted"><?= $t['modal_amount'] ?></label>
|
|
<div class="d-flex justify-content-between mb-2">
|
|
<button type="button" class="btn btn-outline-primary btn-sm flex-grow-1 mx-1" onclick="setAmount(1)">1</button>
|
|
<button type="button" class="btn btn-outline-primary btn-sm flex-grow-1 mx-1" onclick="setAmount(5)">5</button>
|
|
<button type="button" class="btn btn-outline-primary btn-sm flex-grow-1 mx-1" onclick="setAmount(20)">20</button>
|
|
<button type="button" class="btn btn-outline-primary btn-sm flex-grow-1 mx-1" onclick="setAmount(50)">50</button>
|
|
<button type="button" class="btn btn-outline-secondary btn-sm flex-grow-1 mx-1" onclick="setAmount('more')">More</button>
|
|
</div>
|
|
<div class="input-group">
|
|
<span class="input-group-text bg-white border-end-0">OMR</span>
|
|
<input type="number" name="amount" class="form-control border-start-0 ps-0" step="1" min="1" placeholder="10" required>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label small fw-bold text-muted"><?= $t['modal_name'] ?></label>
|
|
<input type="text" name="donor_name" class="form-control" placeholder="<?= $t['modal_name_placeholder'] ?>">
|
|
</div>
|
|
<div class="row g-3 mb-3">
|
|
<div class="col-md-6">
|
|
<label class="form-label small fw-bold text-muted"><?= $t['modal_email'] ?></label>
|
|
<input type="email" name="donor_email" class="form-control" placeholder="<?= $t['modal_email_placeholder'] ?>">
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label small fw-bold text-muted"><?= $t['modal_phone'] ?></label>
|
|
<input type="tel" name="donor_phone" class="form-control" placeholder="<?= $t['modal_phone_placeholder'] ?>" required pattern="\d{8}" title="Please enter 8 digits.">
|
|
<div class="form-text small"><?= $t['modal_phone_hint'] ?></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="giftFields">
|
|
<div class="mb-3">
|
|
<label class="form-label small fw-bold text-muted"><?= $t['recipient_name'] ?></label>
|
|
<input type="text" name="gift_recipient_name" class="form-control" placeholder="Recipient Name">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label small fw-bold text-muted"><?= $t['recipient_phone'] ?></label>
|
|
<input type="tel" name="gift_recipient_phone" id="giftRecipientPhone" class="form-control" placeholder="<?= $t['modal_phone_placeholder'] ?>" pattern="\d{8}" title="Please enter 8 digits.">
|
|
<div class="form-text small"><?= $t['modal_phone_hint'] ?></div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label small fw-bold text-muted"><?= $t['gift_message'] ?></label>
|
|
<textarea name="gift_message" class="form-control" rows="2" placeholder="Your message here..."></textarea>
|
|
</div>
|
|
<div class="small text-success">
|
|
<i class="bi bi-info-circle me-1"></i> <?= $t['gift_notice'] ?>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="modal-footer border-0 p-4 pt-0">
|
|
<button type="submit" class="btn btn-donate py-3"><?= $t['modal_submit'] ?></button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<?php require_once 'includes/footer.php'; ?>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script>
|
|
const donateModal = document.getElementById('donateModal');
|
|
if (donateModal) {
|
|
donateModal.addEventListener('show.bs.modal', event => {
|
|
const button = event.relatedTarget;
|
|
const caseId = button.getAttribute('data-case-id');
|
|
const caseTitle = button.getAttribute('data-case-title');
|
|
|
|
donateModal.querySelector('#modalCaseId').value = caseId;
|
|
donateModal.querySelector('#modalCaseTitle').textContent = caseTitle;
|
|
});
|
|
}
|
|
function setDonateType(type) {
|
|
const isGift = type === 'gift';
|
|
document.getElementById('isGiftInput').value = isGift ? '1' : '0';
|
|
document.getElementById('giftFields').style.display = isGift ? 'block' : 'none';
|
|
|
|
document.querySelectorAll('.donate-type-btn').forEach(btn => {
|
|
btn.classList.toggle('active', btn.getAttribute('data-type') === type);
|
|
});
|
|
const recipientPhone = document.getElementById('giftRecipientPhone');
|
|
if (isGift) {
|
|
recipientPhone.setAttribute('required', 'required');
|
|
} else {
|
|
recipientPhone.removeAttribute('required');
|
|
}
|
|
}
|
|
|
|
function setAmount(amount) {
|
|
const amountInput = donateModal.querySelector('input[name="amount"]');
|
|
if (amount === 'more') {
|
|
amountInput.value = '';
|
|
amountInput.focus();
|
|
} else {
|
|
amountInput.value = amount;
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|