<?php include_once('includes/config.inc.php');?>
<?php
 
// Load Composer's autoloader
require 'vendor/autoload.php';

use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\Exception;

// Function to send an email
function sendMail($toEmail, $subject, $messageBody) {
    // Create a new PHPMailer instance
    $mail = new PHPMailer(true);

    try {
        $loader='true';
        // SMTP Configuration
        $mail->isSMTP();
        $mail->Host       = 'smtp.gmail.com'; // Replace with your SMTP host
        $mail->SMTPAuth   = true;
        $mail->Username   = 'hello.pixmango@gmail.com'; // Replace with your SMTP username
        $mail->Password   = 'qpzddfhpiqdijtud';  // PES // Replace with your SMTP password
        $mail->SMTPSecure = PHPMailer::ENCRYPTION_STARTTLS; // Use TLS or PHPMailer::ENCRYPTION_SMTPS for SSL
        $mail->Port       = 587; // Replace with your SMTP port (usually 587 for TLS)

        // Sender and recipient settings
        $mail->setFrom('server@pixmango.com', 'Pixmango'); // Replace with your "From" address
        $mail->addAddress($toEmail); // Add recipient email

        // Email content
        $mail->isHTML(true);
        $mail->Subject = $subject;
        $mail->Body    = $messageBody; 

        // Send the email
        $mail->send();
         
        // return "<script>window.location.href='success.php'</script>";
        return true;
    } catch (Exception $e) {
        return false;
    }
}
 

$errors = [];
$success = '';  
$loader='';
$capError='';

if ($_SERVER["REQUEST_METHOD"] === "POST" ) {  
    $name = htmlspecialchars($_POST['name']);
    $email = htmlspecialchars($_POST['email']);
    $phone = htmlspecialchars($_POST['phone']);
    $phoneDialCode = htmlspecialchars($_POST['phoneDialCode']);
    $countryClient = htmlspecialchars($_POST['country']);
    $company_name = htmlspecialchars($_POST['company_name']);
    $investment_interest = htmlspecialchars($_POST['investment_interest']);
    $amount = htmlspecialchars($_POST['amount']);
    $message = htmlspecialchars($_POST['message']); 
    $how_hear = htmlspecialchars($_POST['how_hear']); 

    // Get user IP address
    $user_ip = $_SERVER['REMOTE_ADDR'];

    // Get country using an API 
    $ip_data = file_get_contents("http://www.geoplugin.net/json.gp?ip={$user_ip}");
    if ($ip_data) {
        $ip_info = json_decode($ip_data, true);
        $country = $ip_info['geoplugin_countryName'] ?? "Unknown";
    }

    if (empty($errors)) {
        
        // Prepare email
        $toEmail = 'contact@pixmango.com';  
        // $toEmail = 'hello.pixmango@gmail.com';  
        $subject = "Contact Request from $name";
 
       
        $body    = ' 
            <!DOCTYPE html>
            <html lang="en"> 
            <head>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <style>
                    .button,.email-footer,.email-header{text-align:center}body{font-family:Arial,sans-serif;background-color:#f6f6f6;margin:0;padding:0}.email-container{max-width:600px;margin:20px auto;background-color:#fff;border-radius:8px;box-shadow:0 4px 8px rgba(0,0,0,.1);overflow:hidden}.button:hover,.email-header{background-color:#084258}.email-header{color:#fff;padding:20px}.email-body{padding:20px}.email-footer{background-color:#f1f1f1;color:#666;padding:10px;font-size:12px}.table{width:100%;border-collapse:collapse}.table td,.table th{text-align:left;padding:10px;border-bottom:1px solid #eee}.table th{background-color:#f7f7f7;font-weight:700}.button{display:inline-block;margin-top:20px;padding:10px 20px;color:#fff;background-color:#14a800;text-decoration:none;border-radius:4px}
                </style>
            </head>
            
            <body>
                <div class="email-container">
                    <div class="email-header">
                        <h1>Investor Request Form Submission</h1>
                    </div>
                    <div class="email-body">
                    <p>Hello Admin,</p>
                    <p>You have received a new message from the contact form https://pixmango.com. Below are the details:</p>
                
                    <table class="table">
                        <tr>
                            <th>Name</th>
                            <td> '. $name .'</td>
                        </tr>
                        <tr>
                            <th>Email</th>
                            <td>'. $email .'</td>
                        </tr>
                        <tr>
                            <th>Phone</th>
                            <td>+'. $phoneDialCode .' '. $phone .'</td> 
                        </tr>
                        <tr>
                            <th>Country</th>
                            <td>'. $countryClient .'</td>
                        </tr>
                        <tr>
                            <th>Company name</th>
                            <td>'. $company_name .'</td>
                        </tr>
                        <tr>
                            <th>Investment interest</th>
                            <td>'. $investment_interest .'</td>
                        </tr>
                        <tr>
                            <th>Amount</th>
                            <td>'. $amount .'</td>
                        </tr>
                        <tr>
                            <th>Message</th>
                            <td>'. $message .'</td>
                        </tr> 
                        <tr>
                            <th>How hear</th>
                            <td>'. $how_hear .'</td>
                        </tr> 
                        <tr>
                            <th>IP Address</th>
                            <td>'. $user_ip .', ' . $country . '</td>
                        </tr>
                    </table>
                
                    <p>To reply to this email, you can use the sender\'s email address provided above.</p>
                        <a href="mailto:'. $email .'" class="button">Reply to Sender</a>
                    </div>
                    <div class="email-footer">
                    <p>&copy; 2025 Photoeditingstudios. All rights reserved.</p>
                    </div>
                </div>
            </body>
            
            </html> 
        ';

        // Your secret key
        $secretKey = "6LeoW_8qAAAAAFKXXf8ael_KdeKclilFVXkAcTPN";
        $responseKey = $_POST['g-recaptcha-response'];
        $userIP = $_SERVER['REMOTE_ADDR'];

        // Verify reCAPTCHA response
        $url = "https://www.google.com/recaptcha/api/siteverify";
        $data = [
            'secret' => $secretKey,
            'response' => $responseKey,
            'remoteip' => $userIP,
        ];

        // Use cURL to send POST request
        $curl = curl_init($url);
        curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
        curl_setopt($curl, CURLOPT_POSTFIELDS, http_build_query($data));
        $response = curl_exec($curl);
        curl_close($curl);

        $resultCap = json_decode($response, true);

        if($resultCap['success']) {
            // echo "captch success";
            // die();
            // Send the email and display the result
            $result = sendMail($toEmail, $subject, $body);
            
            if ($result) {
                echo "<script>window.location.href='success.php'</script>";
            } else {
                $errors[] = 'Failed to send email.';
            }

        } else {
            $capError='true';
        }
 
         
    }
        
} 
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, shrink-to-fit=no">
    <link rel="shortcut icon" href="assets/images/favicon.ico" type="image/x-icon"> 
    <title>Investor Insignts</title>
  
  <script src="https://www.google.com/recaptcha/api.js" async defer></script>
    <?php include_once('includes/stylesheet.inc.php');?>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.13/css/intlTelInput.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" integrity="sha512-nMNlpuaDPrqlEls3IX/Q56H36qvBASwb3ipuo3MxeWbsQB1881ox0cRv7UPTgBlriqoynt35KjEwgGUeUXIPnw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body> 

    <!-- Navigation Menu Start -->  
    <?php include_once('includes/header.inc.php'); ?> 
    <!-- Navigation Menu End --> 

    <main>

        <!-- header wrapper start -->
        <section class="header__wrapper investor__page position-relative overflow-hidden pt-5 pb-5">
            <img src="assets/images/common/hero-water-bg.svg" alt="Pixamgo" class="img-fluid w-100 h-100 object-fit-cover position-absolute top-0 start-0 z-0" width="1903" height="637">
            <div class="container pt-md-5 position-relative z-3">
                <div class="row g-4 gx-lg-5 align-items-center">
                    <div class="col-lg-7 text-center text-lg-start">
                        <h1 class="display-6 fw-bold ff-quick lh-sm mb-4">
                            <span class="d-block text-white" data-aos="fade-up">Invest in</span>
                            <span class="text-primary display-2 fw-bold d-block" data-aos="fade-up" data-aos-delay="200">Pixmango’s Growth</span> 
                        </h1>
                        <div data-aos="fade-up" data-aos-delay="400"> 
                            <p class="text-white fs-5 fw-medium">
                                A thriving multinational in e-commerce, real estate, and IT services—secure your stake in success.
                            </p>
                        </div>
                        <div>
                            <bttton type="button" class="button" style="--clr: #02DEFE" data-bs-toggle="offcanvas" data-bs-target="#investorCanvas" aria-controls="investorCanvas">
                                Get Started
                                <span class="button__icon-wrapper">
                                    <svg viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg" class="button__icon-svg" width="10">
                                        <path
                                            d="M13.376 11.552l-.264-10.44-10.44-.24.024 2.28 6.96-.048L.2 12.56l1.488 1.488 9.432-9.432-.048 6.912 2.304.024z"
                                            fill="currentColor"></path>
                                    </svg>

                                    <svg viewBox="0 0 14 15" fill="none" width="10" xmlns="http://www.w3.org/2000/svg"
                                        class="button__icon-svg button__icon-svg--copy">
                                        <path
                                            d="M13.376 11.552l-.264-10.44-10.44-.24.024 2.28 6.96-.048L.2 12.56l1.488 1.488 9.432-9.432-.048 6.912 2.304.024z"
                                            fill="currentColor"></path>
                                    </svg>
                                </span>
                                
                            </bttton>
                        </div>
                    </div>

                    <div class="col-lg-5 text-center" data-aos="fade-left" data-aos-delay="600">
                        <img src="assets/images/common/investor-insignts-hero-thumbnail.svg" alt="Pixamgo" class="img-fluid w-100 thumbnail" width="512" height="493">
                    </div>
                </div><!--.row-->
            </div><!-- /.container-fluid-->
        </section>
        <!-- header wrapper end -->

        <!-- about wrapper start --> 
        <section class="py-5 section-spacer" id="about-us">
            <div class="container py-md-4">
                <h2 class="display-3 fw-normal ff-quick text-dark mb-5 pb-lg-4 text-center lh-1 position-relative" data-aos="fade-up">
                    Why Invest in <span class="fw-bold">Pixmango?</span>
                </h2>

                <div class="row g-4 gx-lg-5">
                    <div class="col-lg-6 d-flex">
                        <img 
                            src="assets/images/common/Financial-Performance.webp" 
                            alt="Why pixmango" data-aos="fade-right" data-aos-delay="500"
                            class="img-fluid object-fit-cover w-100 h-100 rounded-4"
                        >   
                    </div>
                    <div class="col-lg-6 d-flex align-items-center">
                        <div class="py-lg-5"> 
                            <h2 class="text-dark display-5 fw-medium ff-quick mb-4" data-aos="fade-up" data-aos-delay="200">
                                Strong 
                                <span class="fw-bold">Financial Performance</span>
                            </h2>
                            <ul class="fs-5 mb-0 check__list" data-aos="fade-up" data-aos-delay="300">
                                <li>Expected ROI of 20% per annum and IRR of 25%, surpassing industry benchmarks.</li>
                                <li>Positive Net Present Value (NPV) and a Profitability Index (PI) above 1.5, ensuring wealth creation.</li> 
                            </ul>   
                        </div>
                    </div>
                </div><!-- /.row -->


                <div class="row g-4 gx-lg-5 mt-3 mt-lg-5 pt-lg-4">
                    <div class="col-lg-6 d-flex order-lg-2">
                        <img 
                            src="assets/images/common/Diverse-Business-Model.webp" 
                            alt="Why pixmango" data-aos="fade-left" data-aos-delay="500"
                            class="img-fluid object-fit-cover w-100 h-100 rounded-4"
                        >   
                    </div>
                    <div class="col-lg-6 d-flex align-items-center order-lg-1">
                        <div class="py-lg-5"> 
                            <h2 class="text-dark display-5 fw-medium ff-quick mb-4" data-aos="fade-up" data-aos-delay="200">
                            Diverse   
                                <span class="fw-bold">Business Model</span>
                            </h2>
                            <ul class="fs-5 mb-0 check__list" data-aos="fade-up" data-aos-delay="300">
                                <li>Operations in e-commerce, real estate, and IT, minimizing risks and maximizing revenue streams.</li>
                                <li>Expansion plans in app development, web development, and AI for future growth.</li> 
                            </ul>   
                        </div>
                    </div>
                </div><!-- /.row -->

                <div class="row g-4 gx-lg-5 mt- mt-lg-5 pt-lg-4">
                    <div class="col-lg-6 d-flex">
                        <img 
                            src="assets/images/common/Market-Potential.webp" 
                            alt="Market Potential" data-aos="fade-right" data-aos-delay="500"
                            class="img-fluid object-fit-cover w-100 h-100 rounded-4"
                        >   
                    </div>
                    <div class="col-lg-6 d-flex align-items-center">
                        <div class="py-lg-5"> 
                            <h2 class="text-dark display-5 fw-medium ff-quick mb-4" data-aos="fade-up" data-aos-delay="200">
                                Market <span class="fw-bold">Potential</span>
                            </h2>
                            <ul class="fs-5 mb-0 check__list" data-aos="fade-up" data-aos-delay="300">
                                <li>Growing demand and competitive positioning in multiple industries.</li>
                                <li>Strategic expansion into new markets and innovative product lines.</li> 
                            </ul>   
                        </div>
                    </div>
                </div><!-- /.row -->
                
            </div><!--./container-->
        </section>
        <!-- about wrapper end -->

        

        <!-- social media marketing wrapper start -->
        <section class="py-5">
            <div class="container py-md-4">
                <div class="p-4 p-md-5 rounded-4" style="background-color:#EBEBEB;">
                    <h2 class="text-dark display-6 fw-bold text-center ff-quick" data-aos="fade-up">
                        Join Pixmango on its journey to success and secure sustainable long-term returns with a trusted partner.
                    </h2> 
                    <div class="d-flex justify-content-center mt-4 gap-3" data-aos="fade-up" data-aos-delay="300">
                        <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#investorCanvas" aria-controls="investorCanvas">Get Started</button>
                        <a href="contact.php" class="btn btn-outline-primary fs-5 fw-semibold">Contact us</a>
                    </div>
                </div><!--.bg--> 
            </div><!-- /.container -->
        </section>
        <!-- social media marketing wrapper end -->

        <div class="offcanvas offcanvas-end investor__canvas" tabindex="-1" id="investorCanvas" aria-labelledby="investorCanvasLabel">
            <div class="offcanvas-header">
                <p class="offcanvas-title mb-0 fs-5 fw-semibold" id="investorCanvasLabel">Investor Inquiry</p>
                <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
            </div>
            <div class="offcanvas-body">
                <?php if(!empty($capError) && $capError === 'true'): ?>    
                <div class="alert alert-danger">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                        <path fill="#e13737" d="M12.884 2.532c-.346-.654-1.422-.654-1.768 0l-9 17A1 1 0 0 0 3 21h18a.998.998 0 0 0 .883-1.467zM13 18h-2v-2h2zm-2-4V9h2l.001 5z" stroke-width="0.5" stroke="#e13737" />
                    </svg>
                    Failed to send email. Please check reCAPTCHA.
                </div>
                <?php endif;?>
                <?php if(!empty($errors)): ?>
                <div class="alert alert-danger" role="alert">
                    <?php foreach($errors as $error): ?>
                    <span><?= $error;?></span>
                    <?php endforeach;?>
                </div> 
                <?php endif; ?>
                <form action="" method="POST" id="contactForm" class="d-flex flex-column gap-3">
                    <div>
                        <label for="name" class="small d-block mb-1 label">Full Name</label>
                        <input type="text" name="name" id="name" class="form-control" placeholder="Enter your full name" required> 
                    </div>
                    <div>
                        <label for="email" class="small d-block mb-1 label">Email ID</label>
                        <input type="email" name="email" id="email" class="form-control" placeholder="Enter email address" required> 
                    </div>
                    <div>
                        <label for="phone" class="small d-block mb-1 label">Phone No.</label>
                        <input type="hidden" name="phoneDialCode" id="phoneDialCode" value="1">
                        <input type="tel" name="phone" id="phone" class="form-control" placeholder="Enter phone number" required> 
                    </div>
                    <div>
                        <label for="country" class="small d-block mb-1 label">Country</label>
                        <select name="country"  id="country" class="form-select" required>  
                        </select>
                        <small class="text-danger error" id="company_name_error"></small>
                    </div>
                    <div>
                        <label for="company_name" class="small d-block mb-1 label">Company Name</label>
                        <input type="text" name="company_name" id="company_name" class="form-control" placeholder="Enter company name">
                        <small class="text-danger error" id="company_name_error"></small>
                    </div>
                    <div>
                        <label for="investment_interest" class="small d-block mb-1 label">Investment Interest</label>
                        <select name="investment_interest"  id="investment_interest" class="form-select">
                            <option value="Investment Interest" selected disabled>Investment Interest</option>
                            <option value="Equity">Equity</option>
                            <option value="Partnership">Partnership</option>
                            <option value="Other">Other</option>
                        </select>
                        <small class="text-danger error" id="company_name_error"></small>
                    </div>
                    <div>
                        <label for="amount" class="small d-block mb-1 label">Preferred Investment Amount</label>
                        <input type="text" name="amount" id="amount" class="form-control" placeholder="Enter investment amount">
                        <small class="text-danger error" id="amount_error"></small>
                    </div> 
                    <div>
                        <label for="message" class="small d-block mb-1 label">Message/Inquiry Details</label>
                        <textarea name="message" class="form-control" id="message" rows="3" placeholder="Enter your message"></textarea>
                        <small class="text-danger error" id="amount_error"></small>
                    </div>
                    <div>
                        <label for="how_hear" class="small d-block mb-1 label">How Did You Hear About Us?</label>
                        <select name="how_hear"  id="how_hear" class="form-select" required>
                            <option value="How Did You Hear About Us?" selected disabled>How Did You Hear About Us?</option>
                            <option value="Website">Website</option>
                            <option value="Referral">Referral</option>
                            <option value="Social Media">Social Media</option>
                            <option value="Other">Other</option>
                        </select>
                        <small class="text-danger error" id="company_name_error"></small>
                    </div> 
                    <div>
                        <div class="g-recaptcha" data-sitekey="<?= $recaptcha_site_key; ?>"></div>
                    </div>
                    <div>
                        <button type="submit" class="btn btn-dark w-100 rounded-pill fs-6 mt-3">Submit</button>
                    </div>
                </form>
             
            </div><!-- /.offcanvas-body -->
        </div><!-- /.offcanvas -->

        <!-- testimonial wrapper start -->
        <section class="py-5 bg-light">
            <div class="container pt-md-4 pb-md-5">
                <h2 class="text-dark display-5 fw-bold text-center ff-quick mb-3" data-aos="fade-up">
                    What our Investor are saying
                </h2>
                <p class="text-center col-lg-10 mx-auto" data-aos="fade-up" data-aos-delay="200">Hear from our users who have saved thousands on their Startup and SaaS solution spend.</p>


                <div class="row g-4 row-cols-1 row-cols-md-2 row-cols-lg-3 mt-3">
                    <div data-aos="fade-up" data-aos-delay="200">
                        <?php
                            $image="assets/images/common/user.webp";
                            $name="Guy Hawkins";
                            $designation="Bank of America";
                            $description="It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed.";
                            include('includes/components/testimonial-card.inc.php');
                        ?> 
                    </div><!--.col-->
                    <div data-aos="fade-up" data-aos-delay="300">
                        <?php
                            $image="assets/images/common/user.webp";
                            $name="Guy Hawkins";
                            $designation="Bank of America";
                            $description="It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed.";
                            include('includes/components/testimonial-card.inc.php');
                        ?> 
                    </div><!--.col-->
                    <div data-aos="fade-up" data-aos-delay="400">
                        <?php
                            $image="assets/images/common/user.webp";
                            $name="Guy Hawkins";
                            $designation="Bank of America";
                            $description="It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed.";
                            include('includes/components/testimonial-card.inc.php');
                        ?> 
                    </div><!--.col-->
                    <div data-aos="fade-up" data-aos-delay="200">
                        <?php
                            $image="assets/images/common/user.webp";
                            $name="Guy Hawkins";
                            $designation="Bank of America";
                            $description="It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed.";
                            include('includes/components/testimonial-card.inc.php');
                        ?> 
                    </div><!--.col-->
                    <div data-aos="fade-up" data-aos-delay="300">
                        <?php
                            $image="assets/images/common/user.webp";
                            $name="Guy Hawkins";
                            $designation="Bank of America";
                            $description="It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed.";
                            include('includes/components/testimonial-card.inc.php');
                        ?> 
                    </div><!--.col-->
                    <div data-aos="fade-up" data-aos-delay="400">
                        <?php
                            $image="assets/images/common/user.webp";
                            $name="Guy Hawkins";
                            $designation="Bank of America";
                            $description="It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed.";
                            include('includes/components/testimonial-card.inc.php');
                        ?> 
                    </div><!--.col-->
                </div><!--.row-->
            </div><!-- /.container -->
        </section>
        <!-- testimonial wrapper end -->


    </main>

 
    <!-- footer wrapper start -->
    <?php include_once('includes/footer.inc.php'); ?>
    <!-- footer wrapper end --> 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.13/js/intlTelInput-jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js" integrity="sha512-2ImtlRlf2VVmiGZsjm9bEyhjGW4dU7B6TNwh/hx/iSByxNENtj3WVE6o/9Lj4TJeVXPi4bnOIMXFIJJAeufa0A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 

    <script>
        $(document).ready(function() {
            $("#phone").intlTelInput({
                initialCountry: "us",
                separateDialCode: true, 
            });
            $("#phone").on("countrychange", function() {
                var selectedCountryData = $("#phone").intlTelInput("getSelectedCountryData");
                var phoneCode = selectedCountryData.dialCode;
                $("#phoneDialCode").val(phoneCode);
                // console.log("Selected phone code:", phoneCode);
            });
        });

        document.addEventListener("DOMContentLoaded", function () {
            const countrySelect = document.getElementById("country");

            fetch("https://restcountries.com/v3.1/all")
                .then(response => response.json())
                .then(data => {
                    // Sort countries alphabetically by name
                    data.sort((a, b) => a.name.common.localeCompare(b.name.common));

                    data.forEach(country => {
                        const option = document.createElement("option");
                        option.value = country.cca2; // Using country code (ISO 3166-1 alpha-2)
                        option.textContent = country.name.common;
                        countrySelect.appendChild(option);
                    });
                })
                .catch(error => console.error("Error fetching countries:", error));
        });
    </script>
 
</body>
</html>