<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta content="width=device-width, initial-scale=1.0" name="viewport">
  <title>Apply Now - Volunteers Adventure Travel</title>
  <meta name="description" content="">
  <meta name="keywords" content="">

  <?php include 'header-link.php' ?>
</head>

<body class="service-details-page">

  <?php include 'nav-bar.php' ?>

  <main class="main">

    <!-- Page Title -->
    <div class="page-title">
      <div class="heading">
        <div class="container">
          <div class="row d-flex justify-content-center text-center">
            <div class="col-lg-8">
              <h1 class="heading-title"> Apply Now </h1>
              <p class="mb-0">
              
              </p>
            </div>
          </div>
        </div>
      </div>
      <nav class="breadcrumbs">
        <div class="container">
          <ol>
            <li><a href="index">Home</a></li>
            <li class="current">/  Apply  </li>
          </ol>
        </div>
      </nav>
    </div><!-- End Page Title -->

 <section id="contact" class="contact section">
 

     

      <div class="container" data-aos="fade-up" data-aos-delay="100">

        <div class="row gy-4">

		<h4>
			<center> APPLY TO VOLUNTEER & TRAVEL IN BANGLADESH </center>
		</h4>

          <div class="col-lg-8 mx-auto">
            <form action="forms/contact.php" method="post" class="php-email-form" data-aos="fade-up" data-aos-delay="200">
              <div class="row gy-4">

                <div class="col-md-12">
					<h4> STEP 1: CHOOSE YOUR PROGRAM </h4> 
					<p>Please select the program you wish to apply for:</p>
					
					 <input type="radio" id="program" name="programName" value="HTML">
					  <label for="program"><strong> Volunteer Program (Weeks 1 & 2) </strong></label><p/>
					<p>
					  Impactful community projects in Bangladesh.<br/>
					  <strong>  Note:</strong> Requires application review and acceptance.
					</p>
					 <input type="radio" id="program" name="programName" value="HTML">
					  <label for="program"><strong> Combined Program* *(Weeks 1–4) </strong></label><p/>
					<p>
					  Volunteer work plus travel exploration.<br/>
					  <strong>  Note:</strong> Requires application review and acceptance.
					</p>
					
					
                </div>

                <div class="col-md-12">
					<h4> STEP 2: PERSONAL DETAILS </h4> 
					<label for="program">Full Name:  </label>
					<input type="text" class="form-control my-2" name="Name" placeholder="Your Full Name" required="">
					
					<label class="mt-3">Date of Birth:  </label>
					<input type="date" class="form-control my-2" name="DOB" placeholder="Your Date of Birth" required="">
					
					<label class="mt-3">Gender:  </label><br/>
					<select name="Gender" id="Gender" class="form-control select-control">
						<option value="Male">Male</option>
						<option value="Female">Female</option>
						<option value="Other">Other</option>
						
					</select>
					
					<label class="mt-3">Nationality:  </label>
					<input type="text" class="form-control my-2" name="Nationality" placeholder="Your Nationality" required="">
				
					<div class="col-md-12">
						<div class="row">
							<div class="col-md-12">
								<label class="mt-3">Phone Number:  </label>
							</div>
							
							<div class="col-md-3">
								<select class="select-control" id="countrySelect" name="countryCode" style="height:40px;margin:10px 0px 0px 0px;"></select>
							</div>
							<div class="col-md-9">
								<input type="text" class="form-control my-2" name="Mobile" placeholder="Your Mobile Number" required="">
							</div>
						</div>
					</div>
					
					
					<label class="mt-3">Email Address:  </label>
					<input type="email" class="form-control my-2" name="Email" placeholder="Your Email Address" required="">
					
					<label class="">Emergency Contact:</label>
					<div class="row mt-3">
						<div class="col-12 col-md-9">
							<div class="row">
								<div class="col-3">
									<label>Name</label>
								</div>
								<div class="col-9">
									<input type="text" name="UrgentName" placeholder="Emergency Contact Name" required="" class="form-control">
								</div>
							</div>
						</div>
						
						<div class="col-12 col-md-9 mt-3">
							<div class="row">
								<div class="col-3">
									<label>Relation</label>
								</div>
								<div class="col-9">
									<input type="text" name="Relationship" placeholder="Relationship" required="" class="form-control">
								</div>
							</div>
						</div>
						
						<div class="col-md-12">
						<div class="row">
							<div class="col-md-12">
								<label class="mt-3">Mobile Number:  </label>
							</div>
							
							<div class="col-md-3">
								<select class="select-control" id="countrySelect" name="countryCode" style="height:40px;margin:10px 0px 0px 0px;"></select>
							</div>
							<div class="col-md-9">
								<input type="text" class="form-control my-2" name="urgentMobile" placeholder="Your Mobile Number" required="">
							</div>
						</div>
					</div>
					</div>

                </div>
				
				<div class="col-md-12">
					<h4> STEP 3: PROGRAM DETAILS </h4> 
					<p>	Select Program Type:</p>
					
					 <input type="radio" id="program" name="programType" value="Volunteer">
					  <label for="program"><strong> Volunteer Program </strong></label><p/>
					
					 <input type="radio" id="program" name="programType" value="Combined">
					  <label for="program"><strong> Combined Program </strong></label><p/>
					
					<label class="mt-3"> Preferred Start Date:   </label>
					<input type="date" class="form-control my-2" name="StartDate" placeholder="Your Preferred Start Date" required="">
					
					<label class="my-2">	Arrival Flight Details (if known) </label>
					<textarea type="text" name="FlightDetails" col="40"  placeholder="Emergency Contact Name" required="" class="form-control">Write here...</textarea>
					
					<label class="mt-3">	Any special dietary requirements or medical conditions?  </label>
					<textarea type="text" name="Dietry" col="40"  placeholder="Emergency Contact Name" required="" class="form-control">Write here...</textarea>
					
					
					<label class="mt-3"> Travel Documents (Passport/Visa):   </label>
					<input type="file" class="form-control my-2" name="TravelDocs" placeholder="Travel Documents" >
				
                </div>
				
				<div class="col-md-12">
					<h4> STEP 4: ADDITIONAL INFORMATION  </h4> 
					<p>	Select Program Type:</p>
					
					
					<label class="my-3">	1. Why do you want to participate? </label>
					<textarea type="text" name="WhyParticipate" col="40"  required="" class="form-control">Write here...</textarea>
					
					<label class="my-3">	2. Do you have any prior experience or skills? </label>
					<textarea type="text" name="Skill" col="40"  required="" class="form-control">Write here...</textarea>
					
					<label class="my-3">	3. Do you have any prior volunteering experience? </label>
					<textarea type="text" name="Experience" col="40"  required="" class="form-control">Write here...</textarea>
					
					<label class="my-3">    4.	Do you have any special skills or areas of interest? </label>
					<textarea type="text" name="Interest" col="40"  required="" class="form-control">Write here...</textarea>
					
					<label class="my-3">    5.	Do you require assistance with accommodation or travel arrangements outside of the program packages and dates? </label>
					<textarea type="text" name="NeedAssistance" col="40"  required="" class="form-control">Write here...</textarea>
					
					
				</div>	
				
				
				
				<div class="col-md-12">
					<h4> STEP 5: TERMS & AGREEMENT  </h4> 
					<p> Please review and agree to our Terms & Conditions before proceeding. <br/> (The Terms & Conditions include details on refunds, data protection, and other policies.) </p>
					
					<ul>
						<li>I understand that applications are subject to review, and acceptance is required before proceeding.</li>
						<li>I have read and agree to the Terms and Conditions.</li>
						<li>I certify that the information provided is accurate.</li>
					</ul>
					<a href="term-condition"> View Terms & Conditions </a>
				</div>	
				
				<div class="col-md-12">
					<h4> STEP 6: SUBMIT YOUR APPLICATION  </h4> 
					<div class="col-12 text-center my-5">
						  <div class="loading">Loading</div>
						  <div class="error-message"></div>
						  <div class="sent-message">Your message has been sent. Thank you!</div>

							<button type="submit" name="" class="col-8"> Apply Now </button>
					</div>
					<p>
						<strong> After submission:</strong><br/>
						You will receive an email confirmation. Our team will review your application and contact you with acceptance details and next steps.

					</p>
				</div>		
				
				

               

              </div>
            </form>
          </div><!-- End Contact Form -->

        </div>

      </div>

    </section>
	
	
  </main>
  <script src="country-code.js"></script>
  <script>
    const countrySelect = document.getElementById("countrySelect");

    // Populate dropdown with country codes
    countryCodes.forEach(country => {
      const option = document.createElement("option");
      option.value = country.dial_code;
      option.textContent = `${country.code} (${country.dial_code})`;
      countrySelect.appendChild(option);
    });

    countrySelect.addEventListener("change", () => {
      console.log("Selected:", countrySelect.value);
    });
  </script>
  
  

  <?php include 'footer.php'?>