Embed

<section class="donation-section">
  <div class="donation-container">
    <div class="donation-language-toggle">
      <button type="button" onclick="toggleDonationLanguage()">🌐 Français / English</button>
    </div>
    <h2 id="donation-title">💧 Make a Donation</h2>

    <form id="donationForm" class="donation-form">
      <div class="donation-grid">
        <div class="donation-field">
          <label id="donation-nameLabel">Full Name</label>
          <input type="text" name="name" placeholder="Enter your full name" required>
        </div>

        <div class="donation-field">
          <label id="donation-emailLabel">Email</label>
          <input type="email" name="email" placeholder="example@email.com" required>
        </div>

        <div class="donation-field">
          <label id="donation-phoneLabel">Phone Number</label>
          <input type="tel" name="phone" placeholder="e.g., 237670000000" required>
        </div>

        <div class="donation-field">
          <label id="donation-amountLabel">Donation Amount (FCFA)</label>
          <input type="number" name="amount" placeholder="5000" required>
        </div>

        <div class="donation-field" style="grid-column: span 2;">
          <label id="donation-methodLabel">Choose Payment Method</label>
          <select name="method" required>
            <option value="" disabled selected>-- Select Method --</option>
            <option value="mtn">MTN MoMo</option>
            <option value="orange">Orange Money</option>
          </select>
        </div>
      </div>

      <div class="donation-buttons">
        <button type="submit" id="donation-donateButton">Donate Now</button>
        <button type="button" id="cartPaymentButton" onclick="redirectToCartPayment()">Pay by Cart</button>
      </div>
    </form>
  </div>
</section>


<div id="popup-processing" class="popup hidden">
  <div class="popup-content">
    <p>✅ Transaction in process...</p>
    <p>Please confirm the transaction on your phone.</p>
  </div>
</div>

<div id="popup-failed" class="popup hidden">
  <div class="popup-content error">
    <p>❌ Transaction failed.</p>
    <button onclick="closePopup('popup-failed')">Close</button>
  </div>
</div>

<div id="popup-success" class="popup hidden">
  <div class="popup-content success">
    <p>🎉 Transaction successful!</p>
    <p id="success-details"></p>
    <button onclick="closePopup('popup-success')">Close</button>
  </div>
</div>

<style>
  /* Container Styling */
  .donation-section {
    padding: 50px 20px;
    background: linear-gradient(135deg, #e8f0fe, #ffffff);
    border-radius: 16px;
    margin: 60px auto;
    max-width: 900px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  }

  .donation-container {
    background: #fff;
    padding: 40px;
    border-radius: 14px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
  }

  .donation-container:hover {
    transform: translateY(-3px);
  }

  .donation-language-toggle {
    text-align: right;
    margin-bottom: 20px;
  }

  .donation-language-toggle button {
    background: #007bff;
    color: white;
    border: none;
    font-weight: bold;
    padding: 8px 18px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.3s ease;
  }

  .donation-language-toggle button:hover {
    background: #0056b3;
  }

  .donation-section h2 {
    text-align: center;
    font-size: 28px;
    color: #007bff;
    margin-bottom: 30px;
    font-weight: 700;
  }

  .donation-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }

  .donation-field {
    display: flex;
    flex-direction: column;
  }

  .donation-section form label {
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 8px;
    color: #333;
  }

  .donation-section form input,
  .donation-section form select {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 15px;
    background: #fdfdfd;
    transition: all 0.3s ease;
  }

  .donation-section form input:focus,
  .donation-section form select:focus {
    border-color: #007bff;
    box-shadow: 0 0 6px rgba(0,123,255,0.4);
    outline: none;
  }

  .donation-buttons {
    display: flex;
    gap: 15px;
    margin-top: 30px;
  }

  .donation-buttons button {
    flex: 1;
    padding: 16px;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease;
  }

  #donation-donateButton {
    background: #28a745;
    color: white;
  }

  #donation-donateButton:hover {
    background: #218838;
    transform: scale(1.02);
  }

  #cartPaymentButton {
    background: #ffc107;
    color: #212529;
  }

  #cartPaymentButton:hover {
    background: #e0a800;
    transform: scale(1.02);
  }

  .popup {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.65);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
  }

  .popup-content {
    background: white;
    padding: 35px;
    border-radius: 14px;
    text-align: center;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 0 25px rgba(0,0,0,0.25);
    animation: popupScale 0.35s ease;
  }

  .popup-content.success {
    border-left: 6px solid #28a745;
  }

  .popup-content.error {
    border-left: 6px solid #dc3545;
  }

  .popup.hidden {
    display: none;
  }

  @keyframes popupScale {
    from { transform: scale(0.7); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
  }

  @media (max-width: 700px) {
    .donation-grid {
      grid-template-columns: 1fr;
    }
    .donation-buttons {
      flex-direction: column;
    }
    .donation-section h2 {
      font-size: 22px;
    }
  }
</style>

<script>
  function redirectToCartPayment() {
    window.location.href = "/cartpayment"; 
  }

  function showPopup(id) {
    document.getElementById(id).classList.remove("hidden");
  }

  function closePopup(id) {
    document.getElementById(id).classList.add("hidden");
  }

  document.getElementById("donationForm").addEventListener("submit", async function(e) {
    e.preventDefault();
    const form = e.target;
    const submitButton = document.getElementById("donation-donateButton");
    submitButton.disabled = true;

    const formData = {
      phone: form.phone.value.trim(),
      amount: form.amount.value.trim(),
      network: form.method.value.trim()
    };

    showPopup("popup-processing");

    try {
      const response = await fetch("https://talindigital.com/adwprocesspayment.php", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(formData)
      });

      const data = await response.json();
      closePopup("popup-processing");

      if (data.status === "success") {
        document.getElementById("success-details").innerHTML = `
          <strong>Amount:</strong> ${formData.amount} FCFA<br>
          <strong>Phone:</strong> ${formData.phone}<br>
          <strong>Method:</strong> ${formData.network.toUpperCase()}<br>
          <strong>Transaction ID:</strong> ${data.transaction_id}<br>
          <strong>Order ID:</strong> ${data.orderId}
        `;
        showPopup("popup-success");
      } else {
        showPopup("popup-failed");
      }
    } catch (error) {
      closePopup("popup-processing");
      showPopup("popup-failed");
    } finally {
      submitButton.disabled = false;
    }
  });
</script>

Africa Dream Water

Providing clean drinking water to communities in Africa. People donante money and we mount projects to provide drinking water to communities in Africa. include dashborad, donation page, impact page, payment page, notification page, contact page