205 lines
11 KiB
PHP
205 lines
11 KiB
PHP
<?php
|
|
require_once('.hta_config/crm_config.php');
|
|
require_once('.htac_header.php');
|
|
require_once('.htac_nav.php');
|
|
?>
|
|
|
|
<div class="container mx-auto border-2 rounded-xl shadow">
|
|
<form method="post" class="p-4">
|
|
<p class="text-[25px] my-6">Book a medical examination appointment</p>
|
|
<p class="text-[25px] my-6">Location</p>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2">
|
|
<div class="flex flex-col ">
|
|
<label for="country"> Country:</label>
|
|
<select name="country" id="country" onchange="fetchStates()" style="border: 1px solid #363650; border-radius: 5px; padding: 6px;">
|
|
<option value="">Select Country</option>
|
|
</select>
|
|
<p id="selectMessage" style="display: none;"></p>
|
|
</div>
|
|
<div class="flex flex-col">
|
|
<label for="state"> State:</label>
|
|
<select name="state" id="state" style="border: 1px solid #363650; border-radius: 5px; padding: 6px;">
|
|
<option value="">Select State</option>
|
|
</select>
|
|
</div>
|
|
<div class="flex flex-col">
|
|
<label for="travel_country"> Country Travelling to:</label>
|
|
<select name="travel_country" id="travel_country" style="border: 1px solid #363650; border-radius: 5px; padding: 6px;">
|
|
<option value="">-Select-</option>;
|
|
<option value="Bahrain">Bahrain</option>
|
|
<option value="Kuwait">Kuwait</option>
|
|
<option value="Oman">Oman</option>
|
|
<option value="Qatar">Qatar</option>
|
|
<option value="Saudi Arabia">Saudi Arabia</option>
|
|
<option value="UAE">UAE</option>
|
|
<option value="Yemen">Yemen</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<p class="text-[25px] my-6">Candidate's information</p>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2">
|
|
<div class="flex flex-col ">
|
|
<label for="first_name">First Name:</label>
|
|
<input type="text" name="first_name" id="first_name" style="border: 1px solid #363650; border-radius: 5px; padding: 6px;" />
|
|
</div>
|
|
<div class="flex flex-col ">
|
|
<label for="last_name">Last Name:</label>
|
|
<input type="text" name="last_name" id="last_name" style="border: 1px solid #363650; border-radius: 5px; padding: 6px;" />
|
|
</div>
|
|
<div class="flex flex-col ">
|
|
<label for="dob">Date of Birth:</label>
|
|
<input type="date" name="dob" id="dob" style="border: 1px solid #363650; border-radius: 5px; padding: 6px;" />
|
|
</div>
|
|
<div class="flex flex-col ">
|
|
<label for="national"> Nationality:</label>
|
|
<select name="national" id="national" style="border: 1px solid #363650; border-radius: 5px; padding: 6px;">
|
|
<option value="">Select Country</option>
|
|
</select>
|
|
</div>
|
|
<div class="flex flex-col ">
|
|
<label for="gender"> Gender:</label>
|
|
<select name="gender" id="gender" style="border: 1px solid #363650; border-radius: 5px; padding: 6px;">
|
|
<option value="">-Select-</option>
|
|
<option value="Male">Male</option>
|
|
<option value="Female">Female</option>
|
|
</select>
|
|
</div>
|
|
<div class="flex flex-col ">
|
|
<label for="marital"> Marital Status:</label>
|
|
<select name="marital" id="marital" style="border: 1px solid #363650; border-radius: 5px; padding: 6px;">
|
|
<option value="">-Select-</option>
|
|
<option value="Married">Married</option>
|
|
<option value="Single">Single</option>
|
|
</select>
|
|
</div>
|
|
<div class="flex flex-col ">
|
|
<label for="passport">Passport No.:</label>
|
|
<input type="text" name="passport" id="passport" style="border: 1px solid #363650; border-radius: 5px; padding: 6px;" />
|
|
</div>
|
|
<div class="flex flex-col ">
|
|
<label for="confirm_passport">Confirm Passport No.:</label>
|
|
<input type="text" name="confirm_passport" id="confirm_passport" style="border: 1px solid #363650; border-radius: 5px; padding: 6px;" />
|
|
</div>
|
|
<div class="flex flex-col ">
|
|
<label for="passport_issue">Passport Issue Date:</label>
|
|
<input type="text" name="passport_issue" id="passport_issue" style="border: 1px solid #363650; border-radius: 5px; padding: 6px;" />
|
|
</div>
|
|
<div class="flex flex-col ">
|
|
<label for="passport_place">Passport Issue Place:</label>
|
|
<input type="text" name="passport_place" id="passport_place" style="border: 1px solid #363650; border-radius: 5px; padding: 6px;" />
|
|
</div>
|
|
<div class="flex flex-col ">
|
|
<label for="passport_expiry">Passport Expiry Date:</label>
|
|
<input type="text" name="passport_expiry" id="passport_expiry" style="border: 1px solid #363650; border-radius: 5px; padding: 6px;" />
|
|
</div>
|
|
<div class="flex flex-col ">
|
|
<label for="visa_type"> Visa Type:</label>
|
|
<select name="visa_type" id="visa_type" style="border: 1px solid #363650; border-radius: 5px; padding: 6px;">
|
|
<option value="">-Select-</option>
|
|
<option value="Work Visa">Work Visa</option>
|
|
<option value="Family Visa">Family Visa</option>
|
|
</select>
|
|
</div>
|
|
<div class="flex flex-col ">
|
|
<label for="email">Email ID:</label>
|
|
<input type="email" name="email" id="email" style="border: 1px solid #363650; border-radius: 5px; padding: 6px;" />
|
|
</div>
|
|
<div class="flex flex-col ">
|
|
<label for="phone">Phone No.:</label>
|
|
<input type="text" name="phone" id="phone" style="border: 1px solid #363650; border-radius: 5px; padding: 6px;" />
|
|
</div>
|
|
<div class="flex flex-col ">
|
|
<label for="phone">National ID: <span class="text-blue-500">(Optional)</span></label>
|
|
<input type="text" name="phone" id="phone" style="border: 1px solid #363650; border-radius: 5px; padding: 6px;" />
|
|
</div>
|
|
<div class="flex flex-col ">
|
|
<label for="visa_type"> Position Applied For:</label>
|
|
<select name="visa_type" id="visa_type" style="border: 1px solid #363650; border-radius: 5px; padding: 6px;">
|
|
<option value="">-Select-</option>
|
|
<option value="Banking & Finance">Banking & Finance</option>
|
|
<option value="Carpenter">Carpenter</option>
|
|
<option value="Cashier">Cashier</option>
|
|
<option value="General Secretory">General Secretory</option>
|
|
<option value="Heavy Driver">Heavy Driver</option>
|
|
</select>
|
|
</div>
|
|
<div class="flex flex-col ">
|
|
<label for="other">Other:</label>
|
|
<input type="text" name="other" id="other" style="border: 1px solid #363650; border-radius: 5px; padding: 6px;" />
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-row ">
|
|
<input type="checkbox" name="message" id="message" style="border: 1px solid #363650; border-radius: 5px; padding: 6px;" />
|
|
<label for="message">I confirm that the information given in this from is true, complete and accurate:</label>
|
|
</div>
|
|
<div class="flex flex-row gap-4 float-right">
|
|
<button style="border: 2px solid #000; border-radius: 10px; padding: 15px 45px 15px 45px;">Cancel</button>
|
|
<button style="background-color: #000; color: #fff; border: 2px solid #000; border-radius: 10px; padding: 15px 45px 15px 45px;">Save & Contunue</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<script>
|
|
function fetchCountries() {
|
|
fetch('https://api.siliconpin.com/v3/list/country/')
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
const countryDropdown = document.getElementById('country');
|
|
countryDropdown.innerHTML = '<option value="">Select Country</option>';
|
|
data.forEach(country => {
|
|
const option = document.createElement('option');
|
|
option.value = country.iso2;
|
|
option.text = country.name;
|
|
countryDropdown.appendChild(option);
|
|
});
|
|
});
|
|
}
|
|
|
|
function fetchStates() {
|
|
const selectedCountry = document.getElementById('country').value;
|
|
fetch(`https://api.siliconpin.com/v3/list/country/state/?country=${selectedCountry}`)
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
const stateDropdown = document.getElementById('state');
|
|
stateDropdown.innerHTML = '<option value="">Select State</option>';
|
|
data.forEach(state => {
|
|
const option = document.createElement('option');
|
|
option.value = state.iso2;
|
|
option.text = state.name;
|
|
stateDropdown.appendChild(option);
|
|
});
|
|
});
|
|
}
|
|
|
|
// Function to fetch cities based on selected country and state and populate the city dropdown
|
|
function fetchCities() {
|
|
const selectedCountry = document.getElementById('country').value;
|
|
const selectedState = document.getElementById('state').value;
|
|
fetch(`https://api.siliconpin.com/v3/list/country/city/?country=${selectedCountry}&state=${selectedState}`)
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
const cityDropdown = document.getElementById('city');
|
|
cityDropdown.innerHTML = '<option value="">Select City</option>';
|
|
data.forEach(city => {
|
|
const option = document.createElement('option');
|
|
option.value = city.name;
|
|
option.text = city.name;
|
|
cityDropdown.appendChild(option);
|
|
});
|
|
});
|
|
}
|
|
// Fetch countries on page load
|
|
fetchCountries();
|
|
|
|
fetch('https://api.siliconpin.com/v3/list/country/')
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
const nationalDropdown = document.getElementById('national');
|
|
nationalDropdown.innerHTML = '<option value="">Select Nationality</option>';
|
|
data.forEach(national => {
|
|
const option = document.createElement('option');
|
|
option.value = national.iso2;
|
|
option.text = national.name;
|
|
nationalDropdown.appendChild(option);
|
|
});
|
|
});
|
|
</script>
|