<title>AIC Health Ministries | TEMPLATE</title>


<?php
include "static/header.php";
?>


    <style type="text/css">

            .donation-options {
            display: flex;
            flex-wrap: wrap;
            gap: 1em;
            margin-top: 1em;
            }

            .donation-options label {
            display: flex;
            align-items: center;
            background: #f2f2f2;
            padding: 0.5em 1em;
            border-radius: 5px;
            cursor: pointer;
            border: 1px solid #ccc;
            }

            .donation-options input[type="number"] {
            width: 200px;
            margin-left: 0.5em;
            padding: 0.3em;
            font-size: 1em;
            }

            .tabs {
            margin-top: 20px;
            }

            .tab-btn {
            padding: 0.7em 1.2em;
            border: none;
            border-bottom: 2px solid transparent;
            background: #ddd;
            color:#333;
            cursor: pointer;
            margin-right: 10px;
            font-weight: bold;
            margin-bottom: 0px;
            }

            .tab-btn.active {
            background: #eee;
            margin-bottom: 0px;
            border-bottom: 2px solid #2cb34a;
            }

            .tab-content {
            display: none;
            margin-top: 0px;
            background: #eee;
            padding: 20px;
            }

            .tab-content.active {
            display: block;
            }

            .tab-content label {
            font-weight: bold;
            display: block;
            margin-top: 10px;
            }

            .tab-content input {
            width: 90%;
            padding: 0.5em;
            margin-top: 2px;
            }

            .donation-frequency {
            display: flex;
            flex-wrap: wrap;
            gap: 1em;
            padding: 2em;
            margin-top: 1px;
            background: #ddd;
            }

            .donation-frequency label {
            display: block;
            margin: 0.5em 0;
            font-size: 1em;
            }

            .payment-option {
            padding: 1em;
            width: 100%;
            font-size: 1.1em;
            margin: 0.5em 0;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            display: block;
            text-align: center;
            text-decoration: none;
            color: white;
            }

            .card { background-color: #007bff; }
            .paypal { background-color: #003087; }
            .mpesa { background-color: #34b233; }

            .payment-option:disabled {
            background-color: #ccc !important;
            cursor: not-allowed;
            pointer-events: none;
            opacity: 0.6;
            }

            .donation-agreement {
            margin-top: 1em;
            font-size: 0.95em;
            color: #444;
            }

            .donation-agreement label {
            display: flex;
            align-items: center;
            margin-bottom: 0.5em;
            }

            .terms-link a {
            color: #2cb34a;
            text-decoration: underline;
            font-weight: 500;
            }

    </style>


    <main>


            <!--? Hero Start -->
            <div class="slider-area2">
                <div class="slider-height2 d-flex align-items-center">
                    <div class="container">
                        <div class="row">
                            <div class="col-xl-12">
                                <div class="hero-cap hero-cap2 pt-70 text-center">
                                    <h2 style="color: red; font-weight: bold;">Donate.</h2>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Hero End -->


            <!-- Work -->
            
            <section class="p-2 mb-3">
    

                <div class="container p-5" style="background-color: #eee;">

                    <form id="donation-form">

                        <div class="p-2 m-2" style="height:45px; width:45px; background-color: #eee; font-weight:bolder; font-size:xx-large;">1.</div>
                        <div class="div p-4 mb-5" style="background-color: #ddd;">

                            <h2>Choose Your Donation Amount</h2>

                             <!-- Donation Amount -->
                            <div class="donation-options mt-5">
                                <label><input type="radio" name="donation" value="2500" onclick="handleAmountSelect(this)"> &nbsp; Ksh. 5000</label>
                                <label><input type="radio" name="donation" value="5000" onclick="handleAmountSelect(this)"> &nbsp; Ksh. 50000</label>
                                <label><input type="radio" name="donation" value="10000" onclick="handleAmountSelect(this)"> &nbsp; Ksh. 500000</label>
                                <label>
                                    <input type="radio" name="donation" value="custom" onclick="handleAmountSelect(this)">
                                    &nbsp; Custom:
                                    <input type="number" id="customAmount" placeholder="Enter amount" min="1" oninput="handleCustomInput()" disabled>
                                </label>
                            </div>

                        </div></br>

                        <div class="p-2 m-2" style="height:45px; width:45px; background-color:#eee; font-weight:bolder; font-size:xx-large;">2.</div>
                        <div class="div p-4 mb-5" style="background-color: #ddd;">

                            <!-- Tabs -->
                            <h2>Contact details</h2>

                            <div class="tabs mb-0">
                                <button type="button" class="tab-btn active" onclick="switchTab('individual')">Individual</button>
                                <button type="button" class="tab-btn" onclick="switchTab('corporate')">Corporate</button>
                            </div>

                            <!-- Individual Info -->
                            <div id="individual" class="tab-content active mt-0">

                                <div class="row">
                                    <div class="col-4">
                                        <label>Salutation</label>
                                        <input type="text" id="ind-salute" required>
                                    </div>
                                    <div class="col-4">
                                        <label>Title</label>
                                        <input type="text" id="ind-title" required>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-4">
                                        <label>First Name</label>
                                        <input type="text" id="ind-fname" required>
                                    </div>
                                    <div class="col-4">
                                        <label>Last Name</label>
                                        <input type="text" id="ind-lname" required>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-4">
                                        <label>Email</label>
                                        <input type="email" id="ind-email" required>
                                    </div>
                                </div>
                        
                            </div>

                            <!-- Corporate Info -->
                            <div id="corporate" class="tab-content">
                            
                                <div class="row">
                                    <div class="col-4">
                                        <label>Salutation</label>
                                        <input type="text" id="corp-salute" required>
                                    </div>
                                    <div class="col-4">
                                        <label>Title</label>
                                        <input type="text" id="corp-title" required>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-4">
                                        <label>First Name</label>
                                        <input type="text" id="corp-fname" required>
                                    </div>
                                    <div class="col-4">
                                        <label>Last Name</label>
                                        <input type="text" id="corp-lname" required>
                                    </div>
                                    <div class="col-4">
                                        <label>Corporation</label>
                                        <input type="text" id="corp-name" required>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-4">
                                        <label>Email</label>
                                        <input type="email" id="corp-email" required>
                                    </div>
                                    <div class="col-4"></div>
                                    <div class="col-4">
                                        <label>Address</label>
                                        <input type="text" id="corp-address" required>
                                    </div>
                                </div>

                            </div>

                        </div>

                        <!-- Frequency -->
                        <div class="donation-frequency">
                            <h2>Donation Frequency</h2>
                            <label><input type="radio" name="frequency" value="once" onclick="handleFrequency()"> One-off</label>
                            <label><input type="radio" name="frequency" value="monthly" onclick="handleFrequency()"> Monthly</label>
                            <label><input type="radio" name="frequency" value="yearly" onclick="handleFrequency()"> Yearly</label>
                        </div></br></br>

                        <div class="p-2 mb-1" style="height:45px; width:45px; background-color: #eee; font-weight:bolder; font-size:xx-large;">3.</div>
                        <div class="div p-4 mb-5">
                            <!-- Payment Options -->
                            <div id="payment-options" class="p-5" style="display: none; margin-top: 20px; margin: bottom 20px; background-color:#ddd;">
                                <h2>Select Payment Method</h2>
                                <a href="#" id="card-link" class="payment-option card" disabled>💳 Debit / Credit Card</a>
                                <a href="#" id="paypal-link" class="payment-option paypal" disabled>🅿️ Donate with PayPal</a>
                                <a href="#" id="mpesa-link" class="payment-option mpesa" disabled>📱 Donate with M-Pesa</a>

                                <!-- Agreement + Terms -->
                                <div class="donation-agreement">
                                    <label>
                                    <input type="checkbox" id="agreeCheckbox" onchange="toggleDonateButtons()">
                                        &nbsp; I understand this donation is non-refundable.
                                    </label>
                                    <p class="terms-link">
                                    <a href="/terms-and-conditions.html" target="_blank">View Terms & Conditions</a>
                                    </p>
                                </div>
                            </div>
                        </div>
                        
                    </form>

                </div>    
            

            </section>
        
            <!-- Work End       -->



    </main>



    <script>
            function handleAmountSelect(radio) {
            const customInput = document.getElementById("customAmount");
            if (radio.value === "custom") {
            customInput.disabled = false;
            customInput.focus();
            } else {
            customInput.disabled = true;
            customInput.value = "";
            maybeShowPayments(radio.value);
            }
        }

        function handleCustomInput() {
            const value = document.getElementById("customAmount").value;
            if (value && parseFloat(value) > 0) {
            maybeShowPayments(value);
            } else {
            hidePaymentOptions();
            }
        }

        function switchTab(tabId) {
            const tabs = document.querySelectorAll(".tab-btn");
            tabs.forEach(btn => btn.classList.remove("active"));
            document.querySelector(`.tab-btn[onclick="switchTab('${tabId}')"]`).classList.add("active");

            const contents = document.querySelectorAll(".tab-content");
            contents.forEach(c => c.classList.remove("active"));
            document.getElementById(tabId).classList.add("active");

            maybeShowPayments(getSelectedAmount());
        }

        function getSelectedAmount() {
            const selected = document.querySelector('input[name="donation"]:checked');
            if (!selected) return null;
            return selected.value === "custom"
            ? document.getElementById("customAmount").value
            : selected.value;
        }

        function handleFrequency() {
            maybeShowPayments(getSelectedAmount());
        }

        function maybeShowPayments(amount) {
            if (!amount || parseFloat(amount) <= 0) return hidePaymentOptions();

            const frequency = document.querySelector('input[name="frequency"]:checked');
            const activeTab = document.querySelector('.tab-content.active').id;
            let isValid = false;

            if (activeTab === "individual") {
            const fname = document.getElementById("ind-fname").value.trim();
            const email = document.getElementById("ind-email").value.trim();
            const lname = document.getElementById("ind-lname").value.trim();
            const salute = document.getElementById("ind-salute").value.trim();
            const title = document.getElementById("ind-title").value.trim();
            isValid = fname && email && lname && salute && title && frequency;
            } else {
            const org = document.getElementById("corp-name").value.trim();
            const fname = document.getElementById("corp-fname").value.trim();
            const email = document.getElementById("corp-email").value.trim();
            const lname = document.getElementById("corp-lname").value.trim();
            const salute = document.getElementById("corp-salute").value.trim();
            const title = document.getElementById("corp-title").value.trim();
            const address = document.getElementById("corp-address").value.trim();
            isValid = org && fname && email && lname && salute && title && address && frequency;
            }

            if (isValid) {
            const freqValue = frequency.value;
            document.getElementById("payment-options").style.display = "block";
            document.getElementById("card-link").href = "#";
            document.getElementById("paypal-link").href = "#";
            document.getElementById("mpesa-link").href = "thank-you.html";
            } else {
            hidePaymentOptions();
            }
        }

        function hidePaymentOptions() {
            document.getElementById("payment-options").style.display = "none";
        }

        function toggleDonateButtons() {
            const isChecked = document.getElementById('agreeCheckbox').checked;
            const buttons = document.querySelectorAll('#payment-options .payment-option');
            buttons.forEach(btn => {
            btn.disabled = !isChecked;
            if (isChecked) {
                btn.classList.remove('disabled');
            } else {
                btn.classList.add('disabled');
            }
            });
        }


    </script>



<?php
include "static/footer.php";
?>




<!-- Scroll Up -->
<div id="back-top" >
    <a title="Go to Top" href="#"> <i class="fas fa-level-up-alt"></i></a>
</div>