Server : Apache System : Linux 122.228.205.92.host.secureserver.net 5.14.0-362.18.1.el9_3.x86_64 #1 SMP PREEMPT_DYNAMIC Mon Jan 29 07:05:48 EST 2024 x86_64 User : ondostategov ( 1002) PHP Version : 8.1.33 Disable Function : NONE Directory : /home/ondostategov/public_html/ondo_ict_registration2/ |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ODSG in collaboration with GIZ to train 500 youths in Digital Skills.</title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<!-- bootstrap css -->
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">
<!-- Font awesome 6 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<!-- <link rel="stylesheet" type="text/css" href="../../../../../use.fontawesome.com/releases/v6.1.1/css/all.css"> -->
<link href="https://unpkg.com/filepond@^4/dist/filepond.css" rel="stylesheet" />
<!-- custom styles -->
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<link rel="stylesheet" type="text/css" href="assets/css/responsive.css">
<link rel="stylesheet" type="text/css" href="assets/css/animation.css">
<style>
#sidebarCarousel .carousel-item {
height: 80px;
overflow: hidden;
}
#sidebarCarousel .carousel-item img {
width: 100%;
height: 100%;
object-fit: contain;
}
</style>
</head>
<body>
<section class="registration-form">
<div class="row">
<!-- sidebar -->
<div id="sidbar" class="col-md-4 sidebar sm-100">
<div class="sidebar-inner">
<img src="assets/images/ondo_logo.png" height="150" width="200" class="image">
<div class="container">
<div class="wrapper">
<!-- sidebar-content -->
<div class="sidebar-content">
<!-- Image Carousel -->
<div id="sidebarCarousel" class="carousel slide mb-4" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="assets/images/sita.png" class="d-block w-100" alt="Slide 1">
</div>
<div class="carousel-item">
<img src="assets/images/germ.png" class="d-block w-100" alt="Slide 3">
</div>
<div class="carousel-item">
<img src="assets/images/giz.png" class="d-block w-100" alt="Slide 4">
</div>
</div>
<button class="carousel-control-prev" type="button"
data-bs-target="#sidebarCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button"
data-bs-target="#sidebarCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
<!-- contact-info -->
</div>
</div>
</div>
</div>
<!-- registration form -->
<div id="reg-form" class="col-md-8 sm-100 pop registration-form-inner">
<div class="registration-inner">
<div class="container">
<div class="wrapper">
<!-- main heading/login/signup text -->
<!-- Program Information -->
<div class="program-info mb-4">
<h3 class="mb-3">Digital Skills Training Program</h3>
<div class="info-content">
<p class="mb-2">The Ondo State Government, in collaboration with the Nigerian-German Centre for Migration and Development (GIZ-ZME), is organizing a digital skills training program aimed at equipping 500 youths in;
<div class="training-tracks mt-3">
<ul class="list-unstyled">
<li><i class="fas fa-check-circle text-success me-2"></i>Python Programming
</li>
<li><i class="fas fa-check-circle text-success me-2"></i>Frontend Web
Development</li>
<li><i class="fas fa-check-circle text-success me-2"></i>Backend Web
Development</li>
<li><i class="fas fa-check-circle text-success me-2"></i>Digital Analytics
</li>
</ul>
</div>
<div class="alert alert-info mt-3">
<i class="fas fa-info-circle me-2"></i> THE TRAINING IS FREE FOR ALL PARTICIPANTS.
</div>
<p class="mt-3 fw-bold text-primary">Don't miss this great opportunity!</p>
</div>
</div>
<!-- form 1st part -->
<div class="end_border animation-delay-25ms">
<h3>Your Basic Information</h3>
<div class="row">
<div class="tab-100 col-md-6">
<div class="focus">
<label for="email">Email<span class="text-danger">*</span></label>
<div class="input-field">
<input type="email" name="email" id="email"
placeholder="Enter your email" required>
<span></span>
</div>
</div>
</div>
<div class="tab-100 col-md-6">
<div class="focus">
<label for="fullname">Fullname<span class="text-danger">*</span></label>
<div class="input-field">
<input type="text" id="fullname" name="fullname"
placeholder="Enter your fullname" required>
<span></span>
</div>
</div>
</div>
<div class="tab-100 col-md-6">
<div class="focus">
<label for="states">Gender<span class="text-danger">*</span></label>
<div class="input-field">
<select name="gender" id="gender">
<option>Select Gender </option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
<span></span>
</div>
</div>
</div>
<div class="tab-100 col-md-6">
<div class="focus">
<label for="states">Select your age range<span
class="text-danger">*</span></label>
<div class="input-field">
<select name="age_range" id="age-range">
<option>Select Age Range </option>
<option value="Below 18">Below 18</option>
<option value="18-25">18-25</option>
<option value="26-30">26-30</option>
<option value="36-40">36-40</option>
<option value="Above 40">Above 40</option>
</select>
<span></span>
</div>
</div>
</div>
<div class="tab-100 col-md-6">
<div class="focus">
<label for="lga"> Local Government Area (LGA)<span
class="text-danger">*</span></label>
<div class="input-field">
<select name="lga" id="lga">
<option>Select LGA</option>
<option value="Akure North">Akure North</option>
<option value="Akure South">Akure South</option>
<option value="Owo">Owo</option>
<option value="Ondo">Ondo</option>
<option value="Okitipupa">Okitipupa</option>
</select>
<span></span>
</div>
</div>
</div>
<div class="tab-100 col-md-6">
<div class="focus">
<label for="phone">Home Address<span class="text-danger">*</span></label>
<div class="input-field">
<input type="text" id="address" name="address"
placeholder="Enter Home Address">
<span></span>
</div>
</div>
</div>
<div class="tab-100 col-md-6">
<div class="focus">
<label for="phone">Phone Number <span
class="text-danger">*</span></label>
<div class="input-field">
<input type="number" id="phone" name="phone"
placeholder="+2348000000000">
<span></span>
</div>
</div>
</div>
<div class="tab-100 col-md-6">
<div class="focus">
<label for="reg_num">Next Of Kin Phone Number <span
class="text-danger">*</span></label>
<div class="input-field">
<input type="number" id="relationship_phone" name="relationship_phone"
placeholder="+2348000000000">
<span></span>
</div>
</div>
</div>
<div class="tab-100 col-md-6">
<div class="focus">
<label for="education">Educational Background<span
class="text-danger">*</span></label>
<div class="input-field">
<input type="text" id="education" name="education"
placeholder="Educational Background">
<span></span>
</div>
</div>
</div>
<div class="tab-100 col-md-6">
<div class="focus">
<label for="employment">Employment Status<span
class="text-danger">*</span></label>
<div class="input-field">
<select name="employment" id="employment">
<option>Select Employment Status</option>
<option value="student">Student</option>
<option value="employed">Employed</option>
<option value="self-employed">Self-employed</option>
<option value="self-employed">Unemployed</option>
</select>
<span></span>
</div>
</div>
</div>
<div class="tab-100 col-md-6">
<div class="focus">
<label for="employment">Select Your Preferred Training Location<span
class="text-danger">*</span></label>
<div class="input-field">
<select name="training_location" id="training_location">
<option>Select Training Location</option>
<option value="Akure">Akure</option>
<option value="Owo">Owo</option>
<option value="Ondo">Ondo</option>
<option value="Okitipupa">Okitipupa</option>
</select>
<span></span>
</div>
</div>
</div>
<div class="tab-100 col-md-6">
<div class="focus">
<label for="mail-email">Course Applicable<span
class="text-danger">*</span></label>
<div class="input-field">
<input type="text" name="course" id="course"
placeholder="Enter Course Applicable" required disabled>
<span></span>
</div>
</div>
</div>
<!-- Prior Experience -->
<div class="tab-100 col-md-6">
<div class="focus">
<label for="prior_experience">Any experience in
the selected course?<span class="text-danger">*</span></label>
<div class="input-field">
<select name="prior_experience" id="prior_experience" required>
<option value="">Select Answer</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
<span></span>
<div class="mt-2" id="experience_details" style="display: none;">
<label for="experience_text">If Yes, please specify:</label>
<textarea name="experience_text" id="experience_text"
rows="2"></textarea>
</div>
</div>
</div>
</div>
<div class="tab-100 col-md-6">
<div class="focus">
<label>Do you have a laptop?<span class="text-danger">*</span></label>
<div class="input-field">
<select name="has_laptop" id="has_laptop" required>
<option value="">Select Answer</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
<span></span>
</div>
</div>
</div>
<div class="tab-100 col-md-12">
<div class="focus">
<label for="additional_skills">Rate the level of your computer skills<span
class="text-danger">*</span></label>
<div class="input-field">
<select name="digital_skill" id="digital_skill" required>
<option value="">Select Answer</option>
<option value="Basic">Basic</option>
<option value="Intermidiate">Intermidiate</option>
<option value="Advanced">Advanced</option>
</select>
<span></span>
</div>
</div>
</div>
<div class="tab-100 col-md-12">
<div class="focus">
<label for="additional_skills">Upload National Identification Number
(NIN)<span class="text-danger">*</span></label>
<div class="input-field">
<input type="file" name="file" id="fileUpload" required>
<span></span>
</div>
</div>
</div>
</div>
</div>
<!-- registration button/terms notification -->
<div class="row register-field ">
<div class="reg-btn">
<button type="button" id="submit">Submit</button>
</div>
</div>
</div>
</div>
</div>
<!-- top shape -->
<div class="shapes-top">
<div class="big-shape"></div>
<div class="small-shape"></div>
</div>
<!-- bottom shape -->
<div class="shapes-bottom">
<div class="small-shape"></div>
<div class="big-shape"></div>
</div>
</div>
</div>
</section>
<div id="error">
</div>
<!-- bootstrap JS -->
<script src="assets/js/bootstrap.min.js"></script>
<!-- Jquery -->
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<!-- custom JS -->
<script src="assets/js/custom.js"></script>
<script src="https://unpkg.com/filepond@^4/dist/filepond.js"></script>
<script src="assets/js/sweet.js"></script>
<script src="assets/js/main.js"></script>
<script>
$(document).ready(function () {
const BASE_URL = 'https://ondostate.gov.ng/ondo_ict_registration/inc/endpoints';
const formatter = new Intl.NumberFormat('en-US', {
minimumFractionDigits: 0
});
const inputElement = document.querySelector('#fileUpload');
const pond = FilePond.create(inputElement);
let base64String = ''; // Declare base64String outside the file upload function
// Listen for file add
pond.on('addfile', (error, fileItem) => {
if (error) {
console.error('Error uploading file:', error);
return;
}
const file = fileItem.file;
// Read file as Base64
const reader = new FileReader();
reader.onload = function (e) {
base64String = e.target.result;
console.log("Base64 Encoded File:", base64String);
// You can send this string to the server or use it as needed
};
reader.readAsDataURL(file);
});
$('#submit').on('click', function (event) {
// Get all form field values
var email = $('#email').val().trim();
var fullname = $('#fullname').val().trim();
var gender = $('#gender').val();
var age_range = $('#age-range').val();
var state = "AA";
var lga = $('#lga').val();
var address = $('#address').val().trim();
var phone = $('#phone').val().trim();
var emergency_contact = "AA";
var relationship = "AA";
var relationship_phone = $('#relationship_phone').val();
var education = $('#education').val();
var employment = $('#employment').val();
var training_location = $('#training_location').val();
var has_laptop = $('#has_laptop').val();
var prior_experience = $('#prior_experience').val();
var experience_text = $('#experience_text').val().trim();
var additional_skills = $('#course').val().trim();
var declarant_name = "AA";
var agree = "AA";
// Validate required fields
if (!email || !fullname || !gender || !age_range || !state || !lga || !address ||
!phone || !emergency_contact || !relationship || !education || !employment ||
!training_location || !has_laptop || !prior_experience || !additional_skills ||
!declarant_name || !agree) {
sweet('warning', 'Form Validation', 'Please fill in all required fields and accept the declaration.');
return;
}
// Check if base64String is empty (i.e., no file selected)
if (!base64String) {
sweet('warning', 'File Upload', 'Please upload a file.');
return;
}
// Make AJAX request
$.ajax({
url: `${BASE_URL}/createUsers`, // Replace with your actual endpoint
type: 'POST',
contentType: 'application/json',
data: JSON.stringify({
email: email,
fullname: fullname,
gender: gender,
age_range: age_range,
state: state,
lga: lga,
address: address,
phone: phone,
emergency_contact: emergency_contact,
relationship: relationship,
relationship_phone: relationship_phone,
education: education,
employment: employment,
training_location: training_location,
has_laptop: has_laptop,
prior_experience: prior_experience,
experience_text: experience_text,
additional_skills: additional_skills,
declarant_name: declarant_name,
image: base64String // Pass base64String here
}),
beforeSend: function () {
loadingSweet('Submitting your application...');
},
success: function (response) {
Swal.close();
if(response.message == 'exist'){
sweet('warning', 'Application with this email '+response.email+' already exists');
}else if(response.message == 'fail'){
sweet('error', 'Error submitting application. Try again');
}else{
sweet('success', 'Your application has been submitted successfully!');
$('#email').val("");
$('#fullname').val("");
$('#address').val("");
$('#phone').val("");
$('#education').val("");
}
},
error: function (xhr, status, error) {
Swal.close();
var errorMessage = xhr.responseJSON?.message || 'An error occurred while creating the agent.';
errors('Error: ' + errorMessage);
}
});
});
function sweet(icon, title, text) {
Swal.fire({
icon: icon,
title: title,
text: text
});
}
function loadingSweet(text) {
Swal.fire({
title: text,
html: 'Please wait...',
allowEscapeKey: false,
allowOutsideClick: false,
didOpen: () => {
Swal.showLoading();
}
});
}
});
</script>
</body>
</html>