{"id":4379,"date":"2026-06-03T20:57:01","date_gmt":"2026-06-03T20:57:01","guid":{"rendered":"https:\/\/testv95.demowebsitelinks.com\/The-Insurance-Sanctuary-Foundation-V2\/?page_id=4379"},"modified":"2026-07-30T23:29:44","modified_gmt":"2026-07-30T23:29:44","slug":"donation","status":"publish","type":"page","link":"https:\/\/testv95.demowebsitelinks.com\/The-Insurance-Sanctuary-Foundation-V2\/donation\/","title":{"rendered":"Donation"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"4379\" class=\"elementor elementor-4379\">\n\t\t\t\t<div class=\"elementor-element elementor-element-eb6e649 e-flex e-con-boxed e-con e-parent\" data-id=\"eb6e649\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;gradient&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0338b00 elementor-widget elementor-widget-heading\" data-id=\"0338b00\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Donation<\/h2>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-eb98b08 e-flex e-con-boxed e-con e-parent\" data-id=\"eb98b08\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-f2e7fd8 e-con-full e-flex e-con e-child\" data-id=\"f2e7fd8\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-28044a5 elementor-widget elementor-widget-html\" data-id=\"28044a5\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<?php\n\/**\n * Main Donation Page\n * Displays donation form with Stripe integration\n *\/\n\n\/\/ Load centralized bootstrap configuration\nrequire_once __DIR__ . '\/config\/autoload.php';\nrequire_once __DIR__ . '\/app\/Security.php';\n\nuse DonationSystem\\Security;\n\n\/\/ Generate CSRF token\n$csrf_token = Security::generateToken();\n$stripe_publishable_key = $_ENV['STRIPE_PUBLISHABLE_KEY'] ?? getenv('STRIPE_PUBLISHABLE_KEY');\n\n\/\/ Check for error messages\n$error_message = $_GET['error'] ?? null;\n$success_message = $_GET['success'] ?? null;\n\nif ($error_message) {\n    $error_message = Security::escape($error_message);\n}\nif ($success_message) {\n    $success_message = Security::escape($success_message);\n}\n?>\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Make a Donation - Support Our Mission<\/title>\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n    <style>\n        :root {\n            --primary-color: #0b1c2c;\n            --secondary-color: #e69c24;\n            --text-dark: #2d3748;\n            --text-light: #718096;\n            --bg-light: #f7fafc;\n            --white: #ffffff;\n            --border-color: #e2e8f0;\n            --error-color: #e53e3e;\n            --success-color: #38a169;\n        }\n\n        * {\n            box-sizing: border-box;\n            margin: 0;\n            padding: 0;\n            font-family: 'Inter', sans-serif;\n        }\n\n        body {\n            background-color: var(--bg-light);\n            color: var(--text-dark);\n            line-height: 1.6;\n            padding: 40px 20px;\n        }\n\n        .container {\n            max-width: 1100px;\n            margin: 0 auto;\n        }\n\n        .hero-section {\n            background-color: var(--primary-color);\n            color: var(--white);\n            padding: 50px 40px;\n            border-radius: 12px;\n            margin-bottom: 50px;\n            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);\n        }\n\n        .hero-tag {\n            color: var(--secondary-color);\n            text-transform: uppercase;\n            font-weight: 700;\n            font-size: 14px;\n            letter-spacing: 1px;\n            margin-bottom: 12px;\n        }\n\n        .hero-title {\n            font-size: 32px;\n            font-weight: 700;\n            margin-bottom: 15px;\n            line-height: 1.3;\n        }\n\n        .hero-subtitle {\n            font-size: 16px;\n            color: #cbd5e0;\n            max-width: 700px;\n            margin-bottom: 40px;\n        }\n\n        .stats-grid {\n            display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));\n            gap: 30px;\n            border-top: 1px solid rgba(255, 255, 255, 0.1);\n            padding-top: 30px;\n        }\n\n        .stat-item h2 {\n            font-size: 42px;\n            color: var(--secondary-color);\n            font-weight: 700;\n            margin-bottom: 5px;\n        }\n\n        .stat-item p {\n            color: #e2e8f0;\n            font-size: 15px;\n            font-weight: 500;\n        }\n\n        .section-title {\n            text-align: center;\n            font-size: 24px;\n            font-weight: 700;\n            margin-bottom: 35px;\n            text-transform: uppercase;\n            letter-spacing: 0.5px;\n        }\n\n        .pillars-grid {\n            display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));\n            gap: 25px;\n            margin-bottom: 50px;\n        }\n\n        .pillar-card {\n            background: var(--white);\n            padding: 30px 25px;\n            border-radius: 8px;\n            border: 1px solid var(--border-color);\n            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);\n        }\n\n        .pillar-card h3 {\n            font-size: 18px;\n            font-weight: 700;\n            margin-bottom: 12px;\n            color: var(--primary-color);\n        }\n\n        .pillar-card p {\n            font-size: 14px;\n            color: var(--text-light);\n        }\n\n        .quote-container {\n            background-color: #edf2f7;\n            border-left: 4px solid var(--secondary-color);\n            padding: 25px 30px;\n            border-radius: 0 8px 8px 0;\n            margin-bottom: 60px;\n            font-style: italic;\n        }\n\n        .quote-text {\n            font-size: 20px;\n            font-weight: 600;\n            color: var(--primary-color);\n            margin-bottom: 5px;\n        }\n\n        .quote-author {\n            font-size: 14px;\n            color: var(--text-light);\n            font-style: normal;\n            font-weight: 500;\n        }\n\n        .donation-layout {\n            background: var(--white);\n            border-radius: 12px;\n            border: 1px solid var(--border-color);\n            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);\n            padding: 40px;\n            max-width: 800px;\n            margin: 0 auto 50px auto;\n        }\n\n        .alert {\n            padding: 15px 20px;\n            border-radius: 6px;\n            margin-bottom: 20px;\n            display: flex;\n            align-items: center;\n            gap: 10px;\n        }\n\n        .alert-error {\n            background-color: #fed7d7;\n            border: 1px solid #fc8181;\n            color: var(--error-color);\n        }\n\n        .alert-success {\n            background-color: #c6f6d5;\n            border: 1px solid #9ae6b4;\n            color: var(--success-color);\n        }\n\n        .frequency-toggle-wrapper {\n            display: flex;\n            justify-content: center;\n            margin-bottom: 35px;\n        }\n\n        .frequency-toggle {\n            display: flex;\n            background: #edf2f7;\n            padding: 4px;\n            border-radius: 30px;\n        }\n\n        .toggle-btn {\n            background: transparent;\n            border: none;\n            padding: 10px 24px;\n            font-size: 14px;\n            font-weight: 600;\n            color: var(--text-light);\n            cursor: pointer;\n            border-radius: 25px;\n            transition: all 0.2s ease;\n        }\n\n        .toggle-btn.active {\n            background: var(--white);\n            color: var(--primary-color);\n            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);\n        }\n\n        .tier-grid {\n            display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));\n            gap: 20px;\n            margin-bottom: 35px;\n        }\n\n        .tier-card {\n            background: var(--white);\n            border: 2px solid var(--border-color);\n            border-radius: 8px;\n            padding: 25px 20px;\n            text-align: center;\n            cursor: pointer;\n            position: relative;\n            transition: all 0.2s ease;\n        }\n\n        .tier-card:hover {\n            border-color: var(--secondary-color);\n            box-shadow: 0 4px 12px rgba(230, 156, 36, 0.1);\n        }\n\n        .tier-card.featured {\n            border-color: var(--secondary-color);\n            background-color: #fffaf0;\n        }\n\n        .badge {\n            position: absolute;\n            top: -12px;\n            left: 50%;\n            transform: translateX(-50%);\n            background: #4a5568;\n            color: var(--white);\n            font-size: 10px;\n            font-weight: 700;\n            padding: 3px 10px;\n            border-radius: 20px;\n            text-transform: uppercase;\n            letter-spacing: 0.5px;\n        }\n\n        .tier-amount {\n            font-size: 28px;\n            font-weight: 700;\n            color: var(--primary-color);\n            margin-bottom: 10px;\n        }\n\n        .tier-desc {\n            font-size: 12px;\n            color: var(--text-light);\n            line-height: 1.4;\n        }\n\n        .custom-amount-input {\n            width: 100%;\n            border: none;\n            background: transparent;\n            text-align: center;\n            font-size: 20px;\n            font-weight: 600;\n            color: var(--primary-color);\n            outline: none;\n            padding: 5px 0;\n            border-bottom: 1px dashed var(--text-light);\n        }\n\n        .form-title {\n            font-size: 18px;\n            font-weight: 700;\n            margin-bottom: 20px;\n            border-bottom: 1px solid var(--border-color);\n            padding-bottom: 10px;\n        }\n\n        .form-row {\n            display: grid;\n            grid-template-columns: 1fr 1fr;\n            gap: 20px;\n            margin-bottom: 20px;\n        }\n\n        @media (max-width: 600px) {\n            .form-row {\n                grid-template-columns: 1fr;\n                gap: 15px;\n            }\n        }\n\n        .form-group {\n            display: flex;\n            flex-direction: column;\n        }\n\n        .form-group label {\n            font-size: 13px;\n            font-weight: 600;\n            color: var(--text-dark);\n            margin-bottom: 6px;\n        }\n\n        .form-group input {\n            padding: 12px 16px;\n            font-size: 15px;\n            border: 1px solid var(--border-color);\n            border-radius: 6px;\n            outline: none;\n            background: #fafafa;\n            transition: border-color 0.2s;\n        }\n\n        .form-group input:focus {\n            border-color: var(--secondary-color);\n            background: var(--white);\n        }\n\n        .form-group.error input {\n            border-color: var(--error-color);\n        }\n\n        .error-text {\n            color: var(--error-color);\n            font-size: 12px;\n            margin-top: 4px;\n        }\n\n        .submit-btn {\n            background-color: var(--secondary-color);\n            color: var(--white);\n            border: none;\n            width: 100%;\n            padding: 16px;\n            font-size: 16px;\n            font-weight: 700;\n            border-radius: 6px;\n            cursor: pointer;\n            text-transform: uppercase;\n            letter-spacing: 0.5px;\n            transition: background-color 0.2s;\n            margin-top: 10px;\n            margin-bottom: 20px;\n        }\n\n        .submit-btn:hover {\n            background-color: #d18b1b;\n        }\n\n        .submit-btn:disabled {\n            background-color: #cbd5e0;\n            cursor: not-allowed;\n        }\n\n        .trust-footer {\n            display: flex;\n            justify-content: center;\n            gap: 20px;\n            flex-wrap: wrap;\n            font-size: 13px;\n            color: var(--text-light);\n            font-weight: 500;\n        }\n\n        .trust-item {\n            display: flex;\n            align-items: center;\n        }\n\n        .trust-item span {\n            color: var(--success-color);\n            margin-right: 5px;\n            font-weight: 700;\n        }\n\n        .stripe-element {\n            padding: 12px 16px;\n            border: 1px solid var(--border-color);\n            border-radius: 6px;\n            background: #fafafa;\n        }\n\n        .hidden {\n            display: none;\n        }\n\n        .loading {\n            display: inline-block;\n            width: 16px;\n            height: 16px;\n            border: 2px solid #f3f3f3;\n            border-top: 2px solid var(--secondary-color);\n            border-radius: 50%;\n            animation: spin 1s linear infinite;\n            margin-right: 8px;\n        }\n\n        @keyframes spin {\n            0% {\n                transform: rotate(0deg);\n            }\n            100% {\n                transform: rotate(360deg);\n            }\n        }\n    <\/style>\n<\/head>\n<body>\n\n<div class=\"container\">\n\n    <!-- Hero Section -->\n    <section class=\"hero-section\">\n        <div class=\"hero-tag\">Support the Mission<\/div>\n        <h1 class=\"hero-title\">When the system fails, we show up.<\/h1>\n        <p class=\"hero-subtitle\">Every dollar funds a survivor getting the claim appeal they deserve at no cost to them.\n            Your gift keeps the fight free.<\/p>\n\n        <div class=\"stats-grid\">\n            <div class=\"stat-item\">\n                <h2>100%<\/h2>\n                <p>Claim success rate<\/p>\n            <\/div>\n            <div class=\"stat-item\">\n                <h2>$0<\/h2>\n                <p>Cost to survivors<\/p>\n            <\/div>\n            <div class=\"stat-item\">\n                <h2>$13+<\/h2>\n                <p>Recovered per $1 donated<\/p>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <!-- Pillars Section -->\n    <h2 class=\"section-title\">Four reasons donors choose us<\/h2>\n    <section class=\"pillars-grid\">\n        <div class=\"pillar-card\">\n            <h3>No cost, ever<\/h3>\n            <p>We never charge survivors. Your donation is what makes that possible.<\/p>\n        <\/div>\n        <div class=\"pillar-card\">\n            <h3>Unbiased advocacy<\/h3>\n            <p>We work only for policyholders and their long-term recovery.<\/p>\n        <\/div>\n        <div class=\"pillar-card\">\n            <h3>Disaster focused<\/h3>\n            <p>We specialize in claim appeals, navigating complex cases seamlessly.<\/p>\n        <\/div>\n        <div class=\"pillar-card\">\n            <h3>Tax deductible<\/h3>\n            <p>We are a 501(c)(3) nonprofit. Your contribution is fully tax deductible.<\/p>\n        <\/div>\n    <\/section>\n\n    <!-- Quote Section -->\n    <div class=\"quote-container\">\n        <div class=\"quote-text\">\"Justice doesn't have a deductible.\"<\/div>\n        <div class=\"quote-author\">\u2014 The Insurance Sanctuary Foundation<\/div>\n    <\/div>\n\n    <!-- Donation Form -->\n    <div class=\"donation-layout\">\n\n        <?php if ($error_message): ?>\n            <div class=\"alert alert-error\">\n                <span>\u274c<\/span>\n                <span><?php echo $error_message; ?><\/span>\n            <\/div>\n        <?php endif; ?>\n\n        <?php if ($success_message): ?>\n            <div class=\"alert alert-success\">\n                <span>\u2713<\/span>\n                <span><?php echo $success_message; ?><\/span>\n            <\/div>\n        <?php endif; ?>\n\n        <!-- Frequency Toggle -->\n        <div class=\"frequency-toggle-wrapper\">\n            <div class=\"frequency-toggle\">\n                <button type=\"button\" class=\"toggle-btn active\" id=\"btn-one-time\" data-type=\"one_time\">Give One-Time\n                <\/button>\n                <button type=\"button\" class=\"toggle-btn\" id=\"btn-monthly\" data-type=\"monthly\">Give Monthly<\/button>\n            <\/div>\n        <\/div>\n\n        <!-- Amount Tiers -->\n        <div class=\"tier-grid\">\n            <div class=\"tier-card\" data-amount=\"50\">\n                <div class=\"tier-amount\">$50<\/div>\n                <div class=\"tier-desc\">Covers one consultation<\/div>\n            <\/div>\n            <div class=\"tier-card featured\" data-amount=\"100\">\n                <div class=\"badge\">Most Common<\/div>\n                <div class=\"tier-amount\">$100<\/div>\n                <div class=\"tier-desc\">Funds a full appeal<\/div>\n            <\/div>\n            <div class=\"tier-card\" data-amount=\"200\">\n                <div class=\"tier-amount\">$200<\/div>\n                <div class=\"tier-desc\">Supports full case resolution<\/div>\n            <\/div>\n            <div class=\"tier-card\" data-amount=\"other\">\n                <div class=\"tier-amount\" style=\"font-size: 16px; margin-top: 5px; margin-bottom: 12px;\">Other Amount\n                <\/div>\n                <input type=\"text\" class=\"custom-amount-input\" placeholder=\"$ Custom\" id=\"custom-amount\">\n            <\/div>\n        <\/div>\n\n        <!-- Donation Form -->\n        <form id=\"donation-form\">\n            <div class=\"form-title\">Your Information<\/div>\n\n            <div class=\"form-row\">\n                <div class=\"form-group\">\n                    <label for=\"first-name\">First Name<\/label>\n                    <input type=\"text\" id=\"first-name\" name=\"first_name\" placeholder=\"John\" required>\n                    <span class=\"error-text\" id=\"error-first-name\"><\/span>\n                <\/div>\n                <div class=\"form-group\">\n                    <label for=\"last-name\">Last Name<\/label>\n                    <input type=\"text\" id=\"last-name\" name=\"last_name\" placeholder=\"Doe\" required>\n                    <span class=\"error-text\" id=\"error-last-name\"><\/span>\n                <\/div>\n            <\/div>\n\n            <div class=\"form-row\" style=\"grid-template-columns: 1fr;\">\n                <div class=\"form-group\">\n                    <label for=\"email-address\">Email Address<\/label>\n                    <input type=\"email\" id=\"email-address\" name=\"email\" placeholder=\"you@example.com\" required>\n                    <span class=\"error-text\" id=\"error-email\"><\/span>\n                <\/div>\n            <\/div>\n\n            <!-- Stripe Card Element -->\n            <div class=\"form-row\" style=\"grid-template-columns: 1fr; margin-bottom: 30px;\">\n                <div class=\"form-group\">\n                    <label>Payment Method<\/label>\n                    <div id=\"card-element\" class=\"stripe-element\"><\/div>\n                    <span class=\"error-text\" id=\"card-errors\"><\/span>\n                <\/div>\n            <\/div>\n\n            <!-- Hidden Inputs -->\n            <input type=\"hidden\" id=\"donation-type\" name=\"donation_type\" value=\"one_time\">\n            <input type=\"hidden\" id=\"donation-amount\" name=\"amount\" value=\"100\">\n            <input type=\"hidden\" id=\"payment-intent-id\" name=\"payment_intent_id\">\n            <input type=\"hidden\" id=\"payment-method-id\" name=\"payment_method_id\">\n            <input type=\"hidden\" name=\"csrf_token\" value=\"<?php echo $csrf_token; ?>\">\n\n            <!-- Submit Button -->\n            <button type=\"submit\" class=\"submit-btn\" id=\"submit-btn\">\n                <span id=\"submit-btn-text\">Donate Now \u2192<\/span>\n            <\/button>\n        <\/form>\n\n        <!-- Trust Footer -->\n        <div class=\"trust-footer\">\n            <div class=\"trust-item\"><span>\u2713<\/span> Secure payment<\/div>\n            <div class=\"trust-item\"><span>\u2713<\/span> Receipt emailed<\/div>\n            <div class=\"trust-item\"><span>\u2713<\/span> 501(c)(3) verified<\/div>\n        <\/div>\n\n    <\/div>\n\n<\/div>\n\n<!-- Stripe JS SDK -->\n<script src=\"https:\/\/js.stripe.com\/v3\/\"><\/script>\n\n<script>\n    \/\/ Initialize Stripe Elements\n    const stripe = Stripe('<?php echo $stripe_publishable_key; ?>');\n    const elements = stripe.elements();\n    const cardElement = elements.create('card', {\n        style: {\n            base: {\n                fontSize: '15px',\n                fontFamily: \"'Inter', sans-serif\",\n                color: '#2d3748',\n            }\n        }\n    });\n    cardElement.mount('#card-element');\n\n    \/\/ DOM Elements\n    const toggleBtns = document.querySelectorAll('.toggle-btn');\n    const tierCards = document.querySelectorAll('.tier-card');\n    const customInput = document.getElementById('custom-amount');\n    const donationForm = document.getElementById('donation-form');\n    const donationTypeInput = document.getElementById('donation-type');\n    const donationAmountInput = document.getElementById('donation-amount');\n    const submitBtn = document.getElementById('submit-btn');\n    const submitBtnText = document.getElementById('submit-btn-text');\n    const errorDisplay = document.getElementById('card-errors');\n\n    let selectedAmount = 100;\n\n    \/\/ Frequency Toggle (One-time vs Monthly)\n    toggleBtns.forEach(btn => {\n        btn.addEventListener('click', () => {\n            toggleBtns.forEach(b => b.classList.remove('active'));\n            btn.classList.add('active');\n            donationTypeInput.value = btn.getAttribute('data-type');\n            updateSubmitButtonText();\n        });\n    });\n\n    \/\/ Preset Amount Selection\n    tierCards.forEach(card => {\n        card.addEventListener('click', () => {\n            const amount = card.getAttribute('data-amount');\n            if (amount !== 'other') {\n                tierCards.forEach(c => c.classList.remove('featured'));\n                card.classList.add('featured');\n                customInput.value = '';\n                selectedAmount = parseFloat(amount);\n                donationAmountInput.value = selectedAmount;\n            }\n        });\n    });\n\n    \/\/ Custom Amount Handling\n    customInput.addEventListener('focus', () => {\n        tierCards.forEach(c => c.classList.remove('featured'));\n        customInput.closest('.tier-card').classList.add('featured');\n    });\n\n    customInput.addEventListener('input', () => {\n        const value = parseFloat(customInput.value) || 0;\n        if (value > 0) {\n            selectedAmount = value;\n            donationAmountInput.value = selectedAmount;\n        }\n    });\n\n    \/\/ Real-time Card Field Validation Errors\n    cardElement.addEventListener('change', (event) => {\n        if (errorDisplay) {\n            errorDisplay.textContent = event.error ? event.error.message : '';\n        }\n    });\n\n    \/\/ Unified Form Submission Handler\n    donationForm.addEventListener('submit', async (e) => {\n        e.preventDefault();\n        clearError();\n\n        \/\/ 1. Validation Checks\n        const firstName = document.getElementById('first-name').value.trim();\n        const lastName = document.getElementById('last-name').value.trim();\n        const email = document.getElementById('email-address').value.trim();\n        const amount = selectedAmount || parseFloat(donationAmountInput.value);\n\n        if (!firstName || !lastName || !email || !amount) {\n            showError('Please fill in all required fields.');\n            return;\n        }\n\n        if (amount < 1) {\n            showError('Amount must be at least $1.');\n            return;\n        }\n\n        \/\/ 2. Set UI Loading State\n        setLoading(true);\n\n        try {\n            \/\/ 3. Create Stripe Payment Method\n            const { paymentMethod, error: stripeError } = await stripe.createPaymentMethod({\n                type: 'card',\n                card: cardElement,\n                billing_details: {\n                    name: `${firstName} ${lastName}`,\n                    email: email,\n                },\n            });\n\n            if (stripeError) {\n                throw new Error(stripeError.message);\n            }\n\n            \/\/ Append Payment Method ID to form\n            document.getElementById('payment-method-id').value = paymentMethod.id;\n\n            \/\/ 4. Send Payload to PHP Backend\n            const formData = new FormData(donationForm);\n            const response = await fetch('process-payment.php', {\n                method: 'POST',\n                body: formData,\n            });\n\n            const data = await response.json();\n\n            if (!response.ok || !data.success) {\n                throw new Error(data.message || 'Payment processing failed');\n            }\n\n            \/\/ 5. Handle Payment Outcome \/ Confirmation (Works for both One-Time & Monthly)\n            if (data.requires_action && data.client_secret) {\n                \/\/ Confirm the payment intent using the card element \/ attached payment method\n                const { paymentIntent, error: confirmError } = await stripe.confirmCardPayment(data.client_secret);\n\n                if (confirmError) {\n                    throw new Error(confirmError.message);\n                }\n\n                if (paymentIntent && paymentIntent.status === 'succeeded') {\n                    \/\/ \ud83d\udc48 Updated: Pass paymentIntent.id here\n                    await updateDonationStatus(data.donation_id, 'succeeded', paymentIntent.id);\n\n                    const redirectUrl = data.subscription_id\n                        ? `success.php?type=monthly&subscription_id=${data.subscription_id}&donation_id=${data.donation_id}`\n                        : `success.php?type=one_time&donation_id=${data.donation_id}`;\n\n                    window.location.href = redirectUrl;\n                } else {\n                    throw new Error('Payment confirmation was not completed.');\n                }\n            } else if (data.redirect) {\n                let target = data.redirect.replace(\/^(\\\/|donation-system\\\/)+\/, '');\n                window.location.href = target;\n            } else {\n                const redirectUrl = data.subscription_id\n                    ? `success.php?type=monthly&subscription_id=${data.subscription_id}&donation_id=${data.donation_id}`\n                    : `success.php?type=one_time&donation_id=${data.donation_id}`;\n\n                window.location.href = redirectUrl;\n            }\n\n        } catch (error) {\n            console.error('Submission Error:', error);\n            showError(error.message || 'An unexpected error occurred. Please try again.');\n            setLoading(false);\n        }\n    });\n\n    \/\/ Helpers & Utility Functions\n    function setLoading(isLoading) {\n        if (isLoading) {\n            submitBtn.disabled = true;\n            submitBtnText.innerHTML = '<span class=\"loading\"><\/span>Processing...';\n        } else {\n            submitBtn.disabled = false;\n            updateSubmitButtonText();\n        }\n    }\n\n    function showError(message) {\n        if (errorDisplay) {\n            errorDisplay.textContent = message;\n        } else {\n            alert(message);\n        }\n    }\n\n    function clearError() {\n        if (errorDisplay) {\n            errorDisplay.textContent = '';\n        }\n    }\n\n    function updateSubmitButtonText() {\n        const type = donationTypeInput.value;\n        submitBtnText.textContent = type === 'monthly' ? 'Subscribe Now \u2192' : 'Donate Now \u2192';\n    }\n\n    \/\/ Replace your existing function with this:\n    async function updateDonationStatus(donationId, status, paymentIntentId = null) {\n        try {\n            await fetch('api\/update-donation-status.php', {\n                method: 'POST',\n                headers: { 'Content-Type': 'application\/json' },\n                body: JSON.stringify({\n                    donation_id: donationId,\n                    status: status,\n                    payment_intent_id: paymentIntentId\n                }),\n            });\n        } catch (err) {\n            console.warn('Failed to update status manually:', err);\n        }\n    }\n\n    \/\/ Initialize UI\n    updateSubmitButtonText();\n<\/script>\n\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-00ac192 elementor-hidden-desktop elementor-hidden-tablet elementor-hidden-mobile e-flex e-con-boxed e-con e-parent\" data-id=\"00ac192\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-030584a e-con-full e-flex e-con e-child\" data-id=\"030584a\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-684cf63 elementor-widget elementor-widget-heading\" data-id=\"684cf63\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Why The Insurance Sanctuary Foundation<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-413bffa elementor-widget elementor-widget-text-editor\" data-id=\"413bffa\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Lorem Ipsum\u00a0is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&#8217;s standard dummy text ever since 1966, when designers at Letraset and James Mosley, the librarian at St Bride Printing Library, took a 1914 Cicero translation and scrambled it to make dummy text for Letraset&#8217;s Body Type sheets.\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-c3401b2 e-con-full e-flex e-con e-child\" data-id=\"c3401b2\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-31b6286 elementor-widget elementor-widget-html\" data-id=\"31b6286\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<?php\n\/**\n * Main Donation Page\n * Displays donation form with Stripe integration\n *\/\n\n\/\/ Load centralized bootstrap configuration\nrequire_once __DIR__ . '\/config\/autoload.php';\nrequire_once __DIR__ . '\/app\/Security.php';\n\nuse DonationSystem\\Security;\n\n\/\/ Generate CSRF token\n$csrf_token = Security::generateToken();\n$stripe_publishable_key = $_ENV['STRIPE_PUBLISHABLE_KEY'] ?? getenv('STRIPE_PUBLISHABLE_KEY');\n\n\/\/ Check for error messages\n$error_message = $_GET['error'] ?? null;\n$success_message = $_GET['success'] ?? null;\n\nif ($error_message) {\n    $error_message = Security::escape($error_message);\n}\nif ($success_message) {\n    $success_message = Security::escape($success_message);\n}\n?>\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Make a Donation - Support Our Mission<\/title>\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n    <style>\n        :root {\n            --primary-color: #0b1c2c;\n            --secondary-color: #e69c24;\n            --text-dark: #2d3748;\n            --text-light: #718096;\n            --bg-light: #f7fafc;\n            --white: #ffffff;\n            --border-color: #e2e8f0;\n            --error-color: #e53e3e;\n            --success-color: #38a169;\n        }\n\n        * {\n            box-sizing: border-box;\n            margin: 0;\n            padding: 0;\n            font-family: 'Inter', sans-serif;\n        }\n\n        body {\n            background-color: var(--bg-light);\n            color: var(--text-dark);\n            line-height: 1.6;\n            padding: 40px 20px;\n        }\n\n        .container {\n            max-width: 1100px;\n            margin: 0 auto;\n        }\n\n        .hero-section {\n            background-color: var(--primary-color);\n            color: var(--white);\n            padding: 50px 40px;\n            border-radius: 12px;\n            margin-bottom: 50px;\n            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);\n        }\n\n        .hero-tag {\n            color: var(--secondary-color);\n            text-transform: uppercase;\n            font-weight: 700;\n            font-size: 14px;\n            letter-spacing: 1px;\n            margin-bottom: 12px;\n        }\n\n        .hero-title {\n            font-size: 32px;\n            font-weight: 700;\n            margin-bottom: 15px;\n            line-height: 1.3;\n        }\n\n        .hero-subtitle {\n            font-size: 16px;\n            color: #cbd5e0;\n            max-width: 700px;\n            margin-bottom: 40px;\n        }\n\n        .stats-grid {\n            display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));\n            gap: 30px;\n            border-top: 1px solid rgba(255, 255, 255, 0.1);\n            padding-top: 30px;\n        }\n\n        .stat-item h2 {\n            font-size: 42px;\n            color: var(--secondary-color);\n            font-weight: 700;\n            margin-bottom: 5px;\n        }\n\n        .stat-item p {\n            color: #e2e8f0;\n            font-size: 15px;\n            font-weight: 500;\n        }\n\n        .section-title {\n            text-align: center;\n            font-size: 24px;\n            font-weight: 700;\n            margin-bottom: 35px;\n            text-transform: uppercase;\n            letter-spacing: 0.5px;\n        }\n\n        .pillars-grid {\n            display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));\n            gap: 25px;\n            margin-bottom: 50px;\n        }\n\n        .pillar-card {\n            background: var(--white);\n            padding: 30px 25px;\n            border-radius: 8px;\n            border: 1px solid var(--border-color);\n            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);\n        }\n\n        .pillar-card h3 {\n            font-size: 18px;\n            font-weight: 700;\n            margin-bottom: 12px;\n            color: var(--primary-color);\n        }\n\n        .pillar-card p {\n            font-size: 14px;\n            color: var(--text-light);\n        }\n\n        .quote-container {\n            background-color: #edf2f7;\n            border-left: 4px solid var(--secondary-color);\n            padding: 25px 30px;\n            border-radius: 0 8px 8px 0;\n            margin-bottom: 60px;\n            font-style: italic;\n        }\n\n        .quote-text {\n            font-size: 20px;\n            font-weight: 600;\n            color: var(--primary-color);\n            margin-bottom: 5px;\n        }\n\n        .quote-author {\n            font-size: 14px;\n            color: var(--text-light);\n            font-style: normal;\n            font-weight: 500;\n        }\n\n        .donation-layout {\n            background: var(--white);\n            border-radius: 12px;\n            border: 1px solid var(--border-color);\n            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);\n            padding: 40px;\n            max-width: 800px;\n            margin: 0 auto 50px auto;\n        }\n\n        .alert {\n            padding: 15px 20px;\n            border-radius: 6px;\n            margin-bottom: 20px;\n            display: flex;\n            align-items: center;\n            gap: 10px;\n        }\n\n        .alert-error {\n            background-color: #fed7d7;\n            border: 1px solid #fc8181;\n            color: var(--error-color);\n        }\n\n        .alert-success {\n            background-color: #c6f6d5;\n            border: 1px solid #9ae6b4;\n            color: var(--success-color);\n        }\n\n        .frequency-toggle-wrapper {\n            display: flex;\n            justify-content: center;\n            margin-bottom: 35px;\n        }\n\n        .frequency-toggle {\n            display: flex;\n            background: #edf2f7;\n            padding: 4px;\n            border-radius: 30px;\n        }\n\n        .toggle-btn {\n            background: transparent;\n            border: none;\n            padding: 10px 24px;\n            font-size: 14px;\n            font-weight: 600;\n            color: var(--text-light);\n            cursor: pointer;\n            border-radius: 25px;\n            transition: all 0.2s ease;\n        }\n\n        .toggle-btn.active {\n            background: var(--white);\n            color: var(--primary-color);\n            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);\n        }\n\n        .tier-grid {\n            display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));\n            gap: 20px;\n            margin-bottom: 35px;\n        }\n\n        .tier-card {\n            background: var(--white);\n            border: 2px solid var(--border-color);\n            border-radius: 8px;\n            padding: 25px 20px;\n            text-align: center;\n            cursor: pointer;\n            position: relative;\n            transition: all 0.2s ease;\n        }\n\n        .tier-card:hover {\n            border-color: var(--secondary-color);\n            box-shadow: 0 4px 12px rgba(230, 156, 36, 0.1);\n        }\n\n        .tier-card.featured {\n            border-color: var(--secondary-color);\n            background-color: #fffaf0;\n        }\n\n        .badge {\n            position: absolute;\n            top: -12px;\n            left: 50%;\n            transform: translateX(-50%);\n            background: #4a5568;\n            color: var(--white);\n            font-size: 10px;\n            font-weight: 700;\n            padding: 3px 10px;\n            border-radius: 20px;\n            text-transform: uppercase;\n            letter-spacing: 0.5px;\n        }\n\n        .tier-amount {\n            font-size: 28px;\n            font-weight: 700;\n            color: var(--primary-color);\n            margin-bottom: 10px;\n        }\n\n        .tier-desc {\n            font-size: 12px;\n            color: var(--text-light);\n            line-height: 1.4;\n        }\n\n        .custom-amount-input {\n            width: 100%;\n            border: none;\n            background: transparent;\n            text-align: center;\n            font-size: 20px;\n            font-weight: 600;\n            color: var(--primary-color);\n            outline: none;\n            padding: 5px 0;\n            border-bottom: 1px dashed var(--text-light);\n        }\n\n        .form-title {\n            font-size: 18px;\n            font-weight: 700;\n            margin-bottom: 20px;\n            border-bottom: 1px solid var(--border-color);\n            padding-bottom: 10px;\n        }\n\n        .form-row {\n            display: grid;\n            grid-template-columns: 1fr 1fr;\n            gap: 20px;\n            margin-bottom: 20px;\n        }\n\n        @media (max-width: 600px) {\n            .form-row {\n                grid-template-columns: 1fr;\n                gap: 15px;\n            }\n        }\n\n        .form-group {\n            display: flex;\n            flex-direction: column;\n        }\n\n        .form-group label {\n            font-size: 13px;\n            font-weight: 600;\n            color: var(--text-dark);\n            margin-bottom: 6px;\n        }\n\n        .form-group input {\n            padding: 12px 16px;\n            font-size: 15px;\n            border: 1px solid var(--border-color);\n            border-radius: 6px;\n            outline: none;\n            background: #fafafa;\n            transition: border-color 0.2s;\n        }\n\n        .form-group input:focus {\n            border-color: var(--secondary-color);\n            background: var(--white);\n        }\n\n        .form-group.error input {\n            border-color: var(--error-color);\n        }\n\n        .error-text {\n            color: var(--error-color);\n            font-size: 12px;\n            margin-top: 4px;\n        }\n\n        .submit-btn {\n            background-color: var(--secondary-color);\n            color: var(--white);\n            border: none;\n            width: 100%;\n            padding: 16px;\n            font-size: 16px;\n            font-weight: 700;\n            border-radius: 6px;\n            cursor: pointer;\n            text-transform: uppercase;\n            letter-spacing: 0.5px;\n            transition: background-color 0.2s;\n            margin-top: 10px;\n            margin-bottom: 20px;\n        }\n\n        .submit-btn:hover {\n            background-color: #d18b1b;\n        }\n\n        .submit-btn:disabled {\n            background-color: #cbd5e0;\n            cursor: not-allowed;\n        }\n\n        .trust-footer {\n            display: flex;\n            justify-content: center;\n            gap: 20px;\n            flex-wrap: wrap;\n            font-size: 13px;\n            color: var(--text-light);\n            font-weight: 500;\n        }\n\n        .trust-item {\n            display: flex;\n            align-items: center;\n        }\n\n        .trust-item span {\n            color: var(--success-color);\n            margin-right: 5px;\n            font-weight: 700;\n        }\n\n        .stripe-element {\n            padding: 12px 16px;\n            border: 1px solid var(--border-color);\n            border-radius: 6px;\n            background: #fafafa;\n        }\n\n        .hidden {\n            display: none;\n        }\n\n        .loading {\n            display: inline-block;\n            width: 16px;\n            height: 16px;\n            border: 2px solid #f3f3f3;\n            border-top: 2px solid var(--secondary-color);\n            border-radius: 50%;\n            animation: spin 1s linear infinite;\n            margin-right: 8px;\n        }\n\n        @keyframes spin {\n            0% {\n                transform: rotate(0deg);\n            }\n            100% {\n                transform: rotate(360deg);\n            }\n        }\n    <\/style>\n<\/head>\n<body>\n\n<div class=\"container\">\n\n    <!-- Hero Section -->\n    <section class=\"hero-section\">\n        <div class=\"hero-tag\">Support the Mission<\/div>\n        <h1 class=\"hero-title\">When the system fails, we show up.<\/h1>\n        <p class=\"hero-subtitle\">Every dollar funds a survivor getting the claim appeal they deserve at no cost to them.\n            Your gift keeps the fight free.<\/p>\n\n        <div class=\"stats-grid\">\n            <div class=\"stat-item\">\n                <h2>100%<\/h2>\n                <p>Claim success rate<\/p>\n            <\/div>\n            <div class=\"stat-item\">\n                <h2>$0<\/h2>\n                <p>Cost to survivors<\/p>\n            <\/div>\n            <div class=\"stat-item\">\n                <h2>$13+<\/h2>\n                <p>Recovered per $1 donated<\/p>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <!-- Pillars Section -->\n    <h2 class=\"section-title\">Four reasons donors choose us<\/h2>\n    <section class=\"pillars-grid\">\n        <div class=\"pillar-card\">\n            <h3>No cost, ever<\/h3>\n            <p>We never charge survivors. Your donation is what makes that possible.<\/p>\n        <\/div>\n        <div class=\"pillar-card\">\n            <h3>Unbiased advocacy<\/h3>\n            <p>We work only for policyholders and their long-term recovery.<\/p>\n        <\/div>\n        <div class=\"pillar-card\">\n            <h3>Disaster focused<\/h3>\n            <p>We specialize in claim appeals, navigating complex cases seamlessly.<\/p>\n        <\/div>\n        <div class=\"pillar-card\">\n            <h3>Tax deductible<\/h3>\n            <p>We are a 501(c)(3) nonprofit. Your contribution is fully tax deductible.<\/p>\n        <\/div>\n    <\/section>\n\n    <!-- Quote Section -->\n    <div class=\"quote-container\">\n        <div class=\"quote-text\">\"Justice doesn't have a deductible.\"<\/div>\n        <div class=\"quote-author\">\u2014 The Insurance Sanctuary Foundation<\/div>\n    <\/div>\n\n    <!-- Donation Form -->\n    <div class=\"donation-layout\">\n\n        <?php if ($error_message): ?>\n            <div class=\"alert alert-error\">\n                <span>\u274c<\/span>\n                <span><?php echo $error_message; ?><\/span>\n            <\/div>\n        <?php endif; ?>\n\n        <?php if ($success_message): ?>\n            <div class=\"alert alert-success\">\n                <span>\u2713<\/span>\n                <span><?php echo $success_message; ?><\/span>\n            <\/div>\n        <?php endif; ?>\n\n        <!-- Frequency Toggle -->\n        <div class=\"frequency-toggle-wrapper\">\n            <div class=\"frequency-toggle\">\n                <button type=\"button\" class=\"toggle-btn active\" id=\"btn-one-time\" data-type=\"one_time\">Give One-Time\n                <\/button>\n                <button type=\"button\" class=\"toggle-btn\" id=\"btn-monthly\" data-type=\"monthly\">Give Monthly<\/button>\n            <\/div>\n        <\/div>\n\n        <!-- Amount Tiers -->\n        <div class=\"tier-grid\">\n            <div class=\"tier-card\" data-amount=\"50\">\n                <div class=\"tier-amount\">$50<\/div>\n                <div class=\"tier-desc\">Covers one consultation<\/div>\n            <\/div>\n            <div class=\"tier-card featured\" data-amount=\"100\">\n                <div class=\"badge\">Most Common<\/div>\n                <div class=\"tier-amount\">$100<\/div>\n                <div class=\"tier-desc\">Funds a full appeal<\/div>\n            <\/div>\n            <div class=\"tier-card\" data-amount=\"200\">\n                <div class=\"tier-amount\">$200<\/div>\n                <div class=\"tier-desc\">Supports full case resolution<\/div>\n            <\/div>\n            <div class=\"tier-card\" data-amount=\"other\">\n                <div class=\"tier-amount\" style=\"font-size: 16px; margin-top: 5px; margin-bottom: 12px;\">Other Amount\n                <\/div>\n                <input type=\"text\" class=\"custom-amount-input\" placeholder=\"$ Custom\" id=\"custom-amount\">\n            <\/div>\n        <\/div>\n\n        <!-- Donation Form -->\n        <form id=\"donation-form\">\n            <div class=\"form-title\">Your Information<\/div>\n\n            <div class=\"form-row\">\n                <div class=\"form-group\">\n                    <label for=\"first-name\">First Name<\/label>\n                    <input type=\"text\" id=\"first-name\" name=\"first_name\" placeholder=\"John\" required>\n                    <span class=\"error-text\" id=\"error-first-name\"><\/span>\n                <\/div>\n                <div class=\"form-group\">\n                    <label for=\"last-name\">Last Name<\/label>\n                    <input type=\"text\" id=\"last-name\" name=\"last_name\" placeholder=\"Doe\" required>\n                    <span class=\"error-text\" id=\"error-last-name\"><\/span>\n                <\/div>\n            <\/div>\n\n            <div class=\"form-row\" style=\"grid-template-columns: 1fr;\">\n                <div class=\"form-group\">\n                    <label for=\"email-address\">Email Address<\/label>\n                    <input type=\"email\" id=\"email-address\" name=\"email\" placeholder=\"you@example.com\" required>\n                    <span class=\"error-text\" id=\"error-email\"><\/span>\n                <\/div>\n            <\/div>\n\n            <!-- Stripe Card Element -->\n            <div class=\"form-row\" style=\"grid-template-columns: 1fr; margin-bottom: 30px;\">\n                <div class=\"form-group\">\n                    <label>Payment Method<\/label>\n                    <div id=\"card-element\" class=\"stripe-element\"><\/div>\n                    <span class=\"error-text\" id=\"card-errors\"><\/span>\n                <\/div>\n            <\/div>\n\n            <!-- Hidden Inputs -->\n            <input type=\"hidden\" id=\"donation-type\" name=\"donation_type\" value=\"one_time\">\n            <input type=\"hidden\" id=\"donation-amount\" name=\"amount\" value=\"100\">\n            <input type=\"hidden\" id=\"payment-intent-id\" name=\"payment_intent_id\">\n            <input type=\"hidden\" id=\"payment-method-id\" name=\"payment_method_id\">\n            <input type=\"hidden\" name=\"csrf_token\" value=\"<?php echo $csrf_token; ?>\">\n\n            <!-- Submit Button -->\n            <button type=\"submit\" class=\"submit-btn\" id=\"submit-btn\">\n                <span id=\"submit-btn-text\">Donate Now \u2192<\/span>\n            <\/button>\n        <\/form>\n\n        <!-- Trust Footer -->\n        <div class=\"trust-footer\">\n            <div class=\"trust-item\"><span>\u2713<\/span> Secure payment<\/div>\n            <div class=\"trust-item\"><span>\u2713<\/span> Receipt emailed<\/div>\n            <div class=\"trust-item\"><span>\u2713<\/span> 501(c)(3) verified<\/div>\n        <\/div>\n\n    <\/div>\n\n<\/div>\n\n<!-- Stripe JS SDK -->\n<script src=\"https:\/\/js.stripe.com\/v3\/\"><\/script>\n\n<script>\n    \/\/ Initialize Stripe Elements\n    const stripe = Stripe('<?php echo $stripe_publishable_key; ?>');\n    const elements = stripe.elements();\n    const cardElement = elements.create('card', {\n        style: {\n            base: {\n                fontSize: '15px',\n                fontFamily: \"'Inter', sans-serif\",\n                color: '#2d3748',\n            }\n        }\n    });\n    cardElement.mount('#card-element');\n\n    \/\/ DOM Elements\n    const toggleBtns = document.querySelectorAll('.toggle-btn');\n    const tierCards = document.querySelectorAll('.tier-card');\n    const customInput = document.getElementById('custom-amount');\n    const donationForm = document.getElementById('donation-form');\n    const donationTypeInput = document.getElementById('donation-type');\n    const donationAmountInput = document.getElementById('donation-amount');\n    const submitBtn = document.getElementById('submit-btn');\n    const submitBtnText = document.getElementById('submit-btn-text');\n    const errorDisplay = document.getElementById('card-errors');\n\n    let selectedAmount = 100;\n\n    \/\/ Frequency Toggle (One-time vs Monthly)\n    toggleBtns.forEach(btn => {\n        btn.addEventListener('click', () => {\n            toggleBtns.forEach(b => b.classList.remove('active'));\n            btn.classList.add('active');\n            donationTypeInput.value = btn.getAttribute('data-type');\n            updateSubmitButtonText();\n        });\n    });\n\n    \/\/ Preset Amount Selection\n    tierCards.forEach(card => {\n        card.addEventListener('click', () => {\n            const amount = card.getAttribute('data-amount');\n            if (amount !== 'other') {\n                tierCards.forEach(c => c.classList.remove('featured'));\n                card.classList.add('featured');\n                customInput.value = '';\n                selectedAmount = parseFloat(amount);\n                donationAmountInput.value = selectedAmount;\n            }\n        });\n    });\n\n    \/\/ Custom Amount Handling\n    customInput.addEventListener('focus', () => {\n        tierCards.forEach(c => c.classList.remove('featured'));\n        customInput.closest('.tier-card').classList.add('featured');\n    });\n\n    customInput.addEventListener('input', () => {\n        const value = parseFloat(customInput.value) || 0;\n        if (value > 0) {\n            selectedAmount = value;\n            donationAmountInput.value = selectedAmount;\n        }\n    });\n\n    \/\/ Real-time Card Field Validation Errors\n    cardElement.addEventListener('change', (event) => {\n        if (errorDisplay) {\n            errorDisplay.textContent = event.error ? event.error.message : '';\n        }\n    });\n\n    \/\/ Unified Form Submission Handler\n    donationForm.addEventListener('submit', async (e) => {\n        e.preventDefault();\n        clearError();\n\n        \/\/ 1. Validation Checks\n        const firstName = document.getElementById('first-name').value.trim();\n        const lastName = document.getElementById('last-name').value.trim();\n        const email = document.getElementById('email-address').value.trim();\n        const amount = selectedAmount || parseFloat(donationAmountInput.value);\n\n        if (!firstName || !lastName || !email || !amount) {\n            showError('Please fill in all required fields.');\n            return;\n        }\n\n        if (amount < 1) {\n            showError('Amount must be at least $1.');\n            return;\n        }\n\n        \/\/ 2. Set UI Loading State\n        setLoading(true);\n\n        try {\n            \/\/ 3. Create Stripe Payment Method\n            const { paymentMethod, error: stripeError } = await stripe.createPaymentMethod({\n                type: 'card',\n                card: cardElement,\n                billing_details: {\n                    name: `${firstName} ${lastName}`,\n                    email: email,\n                },\n            });\n\n            if (stripeError) {\n                throw new Error(stripeError.message);\n            }\n\n            \/\/ Append Payment Method ID to form\n            document.getElementById('payment-method-id').value = paymentMethod.id;\n\n            \/\/ 4. Send Payload to PHP Backend\n            const formData = new FormData(donationForm);\n            const response = await fetch('process-payment.php', {\n                method: 'POST',\n                body: formData,\n            });\n\n            const data = await response.json();\n\n            if (!response.ok || !data.success) {\n                throw new Error(data.message || 'Payment processing failed');\n            }\n\n            \/\/ 5. Handle Payment Outcome \/ Confirmation (Works for both One-Time & Monthly)\n            if (data.requires_action && data.client_secret) {\n                \/\/ Confirm the payment intent using the card element \/ attached payment method\n                const { paymentIntent, error: confirmError } = await stripe.confirmCardPayment(data.client_secret);\n\n                if (confirmError) {\n                    throw new Error(confirmError.message);\n                }\n\n                if (paymentIntent && paymentIntent.status === 'succeeded') {\n                    \/\/ \ud83d\udc48 Updated: Pass paymentIntent.id here\n                    await updateDonationStatus(data.donation_id, 'succeeded', paymentIntent.id);\n\n                    const redirectUrl = data.subscription_id\n                        ? `success.php?type=monthly&subscription_id=${data.subscription_id}&donation_id=${data.donation_id}`\n                        : `success.php?type=one_time&donation_id=${data.donation_id}`;\n\n                    window.location.href = redirectUrl;\n                } else {\n                    throw new Error('Payment confirmation was not completed.');\n                }\n            } else if (data.redirect) {\n                let target = data.redirect.replace(\/^(\\\/|donation-system\\\/)+\/, '');\n                window.location.href = target;\n            } else {\n                const redirectUrl = data.subscription_id\n                    ? `success.php?type=monthly&subscription_id=${data.subscription_id}&donation_id=${data.donation_id}`\n                    : `success.php?type=one_time&donation_id=${data.donation_id}`;\n\n                window.location.href = redirectUrl;\n            }\n\n        } catch (error) {\n            console.error('Submission Error:', error);\n            showError(error.message || 'An unexpected error occurred. Please try again.');\n            setLoading(false);\n        }\n    });\n\n    \/\/ Helpers & Utility Functions\n    function setLoading(isLoading) {\n        if (isLoading) {\n            submitBtn.disabled = true;\n            submitBtnText.innerHTML = '<span class=\"loading\"><\/span>Processing...';\n        } else {\n            submitBtn.disabled = false;\n            updateSubmitButtonText();\n        }\n    }\n\n    function showError(message) {\n        if (errorDisplay) {\n            errorDisplay.textContent = message;\n        } else {\n            alert(message);\n        }\n    }\n\n    function clearError() {\n        if (errorDisplay) {\n            errorDisplay.textContent = '';\n        }\n    }\n\n    function updateSubmitButtonText() {\n        const type = donationTypeInput.value;\n        submitBtnText.textContent = type === 'monthly' ? 'Subscribe Now \u2192' : 'Donate Now \u2192';\n    }\n\n    \/\/ Replace your existing function with this:\n    async function updateDonationStatus(donationId, status, paymentIntentId = null) {\n        try {\n            await fetch('api\/update-donation-status.php', {\n                method: 'POST',\n                headers: { 'Content-Type': 'application\/json' },\n                body: JSON.stringify({\n                    donation_id: donationId,\n                    status: status,\n                    payment_intent_id: paymentIntentId\n                }),\n            });\n        } catch (err) {\n            console.warn('Failed to update status manually:', err);\n        }\n    }\n\n    \/\/ Initialize UI\n    updateSubmitButtonText();\n<\/script>\n\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fb59129 elementor-hidden-desktop elementor-hidden-tablet elementor-hidden-mobile elementor-widget elementor-widget-givewp_donation_form\" data-id=\"fb59129\" data-element_type=\"widget\" data-settings=\"{&quot;display_style&quot;:&quot;onpage&quot;}\" data-widget_type=\"givewp_donation_form.default\">\n\t\t\t\t\t<div class='root-data-givewp-embed' data-form-locale='en_US' data-form-url='https:\/\/testv95.demowebsitelinks.com\/The-Insurance-Sanctuary-Foundation-V2\/?post_type=give_forms&amp;p=4393' data-form-view-url='https:\/\/testv95.demowebsitelinks.com\/The-Insurance-Sanctuary-Foundation-V2\/?givewp-route=donation-form-view&amp;form-id=4393' data-src='https:\/\/testv95.demowebsitelinks.com\/The-Insurance-Sanctuary-Foundation-V2\/?givewp-route=donation-form-view&amp;form-id=4393' data-givewp-embed-id='give-form-shortcode-1' data-form-format='onpage' data-open-form-button='Donate now' style='--givewp-primary-color: #0b72d9; --givewp-secondary-color: #27ae60;'><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Donation Make a Donation &#8211; Support Our Mission Support the Mission When the system fails, we show up. Every dollar funds a survivor getting the claim appeal they deserve at no cost to them. Your gift keeps the fight free. 100% Claim success rate $0 Cost to survivors $13+ Recovered per $1 donated Four reasons [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"give_campaign_id":0,"footnotes":"","_links_to":"","_links_to_target":""},"class_list":["post-4379","page","type-page","status-publish","hentry"],"campaignId":"","_links":{"self":[{"href":"https:\/\/testv95.demowebsitelinks.com\/The-Insurance-Sanctuary-Foundation-V2\/wp-json\/wp\/v2\/pages\/4379","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/testv95.demowebsitelinks.com\/The-Insurance-Sanctuary-Foundation-V2\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/testv95.demowebsitelinks.com\/The-Insurance-Sanctuary-Foundation-V2\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/testv95.demowebsitelinks.com\/The-Insurance-Sanctuary-Foundation-V2\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/testv95.demowebsitelinks.com\/The-Insurance-Sanctuary-Foundation-V2\/wp-json\/wp\/v2\/comments?post=4379"}],"version-history":[{"count":28,"href":"https:\/\/testv95.demowebsitelinks.com\/The-Insurance-Sanctuary-Foundation-V2\/wp-json\/wp\/v2\/pages\/4379\/revisions"}],"predecessor-version":[{"id":5239,"href":"https:\/\/testv95.demowebsitelinks.com\/The-Insurance-Sanctuary-Foundation-V2\/wp-json\/wp\/v2\/pages\/4379\/revisions\/5239"}],"wp:attachment":[{"href":"https:\/\/testv95.demowebsitelinks.com\/The-Insurance-Sanctuary-Foundation-V2\/wp-json\/wp\/v2\/media?parent=4379"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}