<?php 
$title = "Donate Today - Wipe Tears Africa (WTA)";
$tagline = "Bringing hope & a future to the African children in Uganda";
$description = "Wipe Tears Africa (WTA) is a nonprofit organization founded in 2010, dedicated to restoring hope and transforming the lives of vulnerable children and families in Uganda.";
$keywords = "Wipe Tears Africa, WTA, Education, Health, Girl Child Empowerment, Skills Development, Counselling & Guidance";
$featured_image = 'https://www.wipetearsafrica.org/assets/images/wipe-tears-africa-uganda1.jpg';
include "includes/header.php";
?>

<?php include "includes/menu.php"; ?>
<section class="header-services" style="background: linear-gradient(to bottom, rgba(46, 178, 23, 0.763), rgba(46, 178, 23, 0.963)), url('assets/images/slides/wipe-tears-africa-4.jpg') no-repeat;background-size: cover;background-position: center;">
    <div class="container">
        <div class="row align-items-center">
            <div class="col text-center" data-aos="fade-up">
                <h1>Donate Today</h1>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="./">Home</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Donate</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>
</section>

<section class="home-intro-mid">
        <div class="container-fluid">
            <div class="row h-100 align-items-center justify-content-center" style="min-height: 100vh;">
                <div class="col-12 col-sm-8 col-md-6 col-lg-5 col-xl-4">
                    <form action="donation_server.php" method="POST">

                        <div class="rounded p-4 p-sm-5 my-4 mx-3">
                            <div class="d-flex align-items-center justify-content-between mb-3">
                            
                                    <h3><i class="fa fa-user-edit me-2"></i>Give A Donation</h3>
                                
                            </div>
                             <div>
                                <?php if(isset($_GET['error'])){?>
                                <p style="color: red;"><?php echo htmlspecialchars($_GET['error']); ?></p>
                                <?php } ?>
                            </div>
                           
                            <div class="form-floating mb-3">
                                <input name="fname" class="form-control" id="floatingText" placeholder="Remmy"
                                    type="text" required>
                                <label for="floatingText">Full Names:</label>
                            </div>
                            <div class="form-floating mb-3">
                                <input name="occupation" class="form-control" id="floatingText" placeholder="work"
                                    type="text" required>
                                <label for="floatingText">Occupation:</label>
                            </div>

                            <label>Gender:</label>
                            <input type="radio" id="male" name="gender" value="Male" required>
                            <label for="male">Male</label>
                            <input type="radio" id="female" name="gender" value="Female" required>
                            <label for="female">Female</label>

                            <div class="form-floating mb-3">
                                <input name="telno" class="form-control" id="floatingInput" type="number"
                                    placeholder="075699000" required>
                                <label for="floatingInput">Phone Number:</label>
                            </div>
                            <div class="form-floating mb-3">
                                <input name="email" class="form-control" id="floatingInput" type="email"
                                    placeholder="name@example.com" required>
                                <label for="floatingInput">Email:</label>
                            </div>
                            <div class="form-floating mb-3">
                                <select name="country" id="countrySelect" class="form-select"
                                    aria-label="Select a country" required>
                                    <option selected disabled>Loading...</option>
                                </select>
                                <label for="countrySelect">Country:</label>
                            </div>
                            <div class="form-floating mb-3">
                                <input name="donate_amount" class="form-control" id="floatingAmount" type="number" step="0.01" placeholder="100.00" required>
                                <label for="floatingAmount">Donation Amount:</label>
                            </div>

                            <div class="form-floating mb-3">
                                <textarea name="message" class="form-control" id="floatingMessage"
                                    placeholder="Your message here" style="height: 100px;" required></textarea>
                                <label for="floatingMessage">Message:</label>
                            </div>
                            <div style="display:none;">
                                <label for="website">Website</label>
                                <input type="text" id="website" name="website">
                            </div>
                            <div  class="d-flex justify-content-center align-items-center">
                                <button type="submit" class="btn btn-success">Donate Now</button>
                                      
                            </div>
                    </div>
                    
              
                
                </form>
            </div>
        </div>
    </div>
</section>
   <script>
    async function fetchCountries() {
        const select = document.getElementById("countrySelect");
        try {
            const response = await fetch("https://restcountries.com/v3.1/all");
            const countries = await response.json();
            select.innerHTML = '<option selected disabled>Select Country</option>';
            countries.forEach(country => {
                const option = document.createElement("option");
                option.value = country.name.common;
                option.textContent = country.name.common;
                select.appendChild(option);
            });
        } catch (error) {
            console.error("Error fetching countries:", error);
            select.innerHTML = '<option selected disabled>Error loading countries</option>';
        }
    }
    fetchCountries();
    </script>


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