895 lines
41 KiB
HTML
895 lines
41 KiB
HTML
{% extends 'applicant/partials/candidate_facing_base.html' %}
|
|
{% load static i18n %}
|
|
{% block title %}{% trans "Career Application Form" %} | KAAUH{% endblock %}
|
|
{% block content %}
|
|
<style>
|
|
:root {
|
|
--kaauh-teal: #00636e;
|
|
--kaauh-teal-dark: #004a53;
|
|
--kaauh-teal-light: #f0f7f8;
|
|
--error-red: #e74c3c;
|
|
--border-color: #e2e8f0;
|
|
--text-dark: #2d3436;
|
|
--text-muted: #636e72;
|
|
--shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
|
|
--radius: 12px;
|
|
}
|
|
|
|
/* 2. GLOSSY NAVBAR */
|
|
#bottomNavbar {
|
|
top: 0;
|
|
background: rgba(0, 99, 110, 0.85) !important;
|
|
backdrop-filter: blur(12px);
|
|
-webkit-backdrop-filter: blur(12px);
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
|
z-index: 1030;
|
|
}
|
|
|
|
/* 3. WIZARD CONTAINER */
|
|
.page-content-wrapper {
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: 40px 20px;
|
|
min-height: calc(100vh - 56px);
|
|
}
|
|
|
|
.wizard-container {
|
|
width: 100%;
|
|
max-width: 850px;
|
|
background: #ffffff;
|
|
border-radius: 24px;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
animation: slideIn 0.5s ease-out;
|
|
}
|
|
|
|
@keyframes slideIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
|
|
|
|
.progress-container { height: 6px; background: #f1f5f9; }
|
|
.progress-bar { height: 100%; background: var(--kaauh-teal); transition: width 0.6s ease; width: 0%; }
|
|
|
|
.wizard-header { padding: 30px 40px 10px; display: flex; justify-content: space-between; align-items: center; }
|
|
.logo { font-size: 1.3rem; font-weight: 800; color: var(--secondary); display: flex; align-items: center; gap: 10px; }
|
|
.progress-text { background: #e6f0f1; color: var(--kaauh-teal); padding: 4px 12px; border-radius: 20px; font-size: 0.85rem; font-weight: 700; }
|
|
|
|
/* 4. CONTENT & DYNAMIC FIELDS */
|
|
.wizard-content { padding: 10px 40px 30px; flex: 1; display: flex; flex-direction: column; overflow: hidden; }
|
|
.stage-container { flex: 1; overflow-y: auto; padding-right: 10px; }
|
|
.stage-title { font-size: 1.8rem; font-weight: 800; color: var(--text-main); margin-bottom: 25px; }
|
|
|
|
/* Field Styles (Used by JS) */
|
|
.field-container { margin-bottom: 24px; animation: fadeIn 0.3s ease; }
|
|
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
|
|
|
|
.field-label { display: block; font-weight: 700; color: var(--text-main); margin-bottom: 8px; font-size: 0.95rem; }
|
|
.required-indicator { color: var(--error); }
|
|
|
|
.form-input {
|
|
width: 100%; padding: 12px 16px; border: 2px solid var(--border-color);
|
|
border-radius: 12px; font-size: 1rem; background: var(--bg-light); transition: var(--transition);
|
|
}
|
|
.form-input:focus { outline: none; border-color: var(--primary); background: #fff; box-shadow: 0 0 0 4px rgba(0, 99, 110, 0.1); }
|
|
.form-input.error { border-color: var(--error); background: #fff1f2; }
|
|
|
|
.error-message { color: var(--error); font-size: 0.85rem; font-weight: 600; margin-top: 6px; display: none; }
|
|
.error-message.show { display: block; }
|
|
|
|
/* Options & File Upload */
|
|
.option-item {
|
|
display: flex; align-items: center; padding: 12px 16px; border: 2px solid var(--border-color);
|
|
border-radius: 12px; margin-bottom: 10px; cursor: pointer; transition: var(--transition); font-weight: 600;
|
|
}
|
|
.option-item:hover { border-color: var(--primary); background: #f0f9fa; }
|
|
.option-item input { margin-right: 12px; width: 18px; height: 18px; accent-color: var(--primary); }
|
|
|
|
.file-upload-area {
|
|
border: 2px dashed #cbd5e1; border-radius: 16px; padding: 30px;
|
|
text-align: center; background: var(--bg-light); cursor: pointer; transition: var(--transition);
|
|
}
|
|
.file-upload-area:hover { border-color: var(--primary); background: #e6f0f1; }
|
|
.file-upload-icon { font-size: 2rem; color: var(--primary); margin-bottom: 10px; }
|
|
|
|
.uploaded-file {
|
|
display: flex; align-items: center; justify-content: space-between; background: white;
|
|
border: 1px solid var(--border-color); padding: 12px; border-radius: 12px; margin-top: 10px;
|
|
}
|
|
|
|
/* 5. FOOTER & BUTTONS */
|
|
.wizard-footer { padding: 20px 40px 40px; display: flex; justify-content: space-between; border-top: 1px solid #f1f5f9; }
|
|
.nav-btn { padding: 12px 28px; border-radius: 50px; font-weight: 700; border: none; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: var(--transition); }
|
|
.btn-back { background: #f1f5f9; color: var(--text-muted); }
|
|
.btn-next { background: var(--kaauh-teal); color: white; box-shadow: 0 10px 15px -3px rgba(0, 99, 110, 0.3); }
|
|
.btn-submit { background: var(--kaauh-teal); color: white; box-shadow: 0 10px 15px -3px rgba(16, 185, 129, 0.3); }
|
|
.nav-btn:hover { transform: translateY(-2px); filter: brightness(1.1); }
|
|
|
|
@media (max-width: 600px) { .wizard-container { border-radius: 0; max-height: 100vh; } }
|
|
|
|
#confirmationNavbar {
|
|
background-color: var(--kaauh-teal);
|
|
padding: 12px 20px;
|
|
color:white;
|
|
}
|
|
|
|
</style>
|
|
|
|
<div id="confirmationNavbar" class="shadow-sm">
|
|
<div class="container-fluid">
|
|
<span class="text-white fw-bold ">
|
|
<i class="fas fa-check-circle me-2"></i>{{job.title}} {{job_id}}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="page-content-wrapper">
|
|
<div class="wizard-container">
|
|
<div class="progress-container"><div class="progress-bar" id="progressBar"></div></div>
|
|
<div class="wizard-header">
|
|
<div class="logo"><i class="fas fa-file-signature text-primary"></i> <span id="formTitle">{% trans "Application" %}</span></div>
|
|
<div class="progress-text" id="progressText">1 of 1</div>
|
|
</div>
|
|
<div class="wizard-content">
|
|
<div class="stage-container" id="stageContainer"></div>
|
|
<div class="preview-container" id="previewContainer" style="display: none">
|
|
<h3 class="stage-title">{% trans "Review Your Application" %}</h3>
|
|
<div id="previewContent"></div>
|
|
</div>
|
|
</div>
|
|
<div class="wizard-footer">
|
|
<button id="backBtn" class="nav-btn btn-back" style="display: none"><i class="fas fa-chevron-left"></i> {% trans "Back" %}</button>
|
|
<div style="flex:1"></div>
|
|
<button id="nextBtn" class="nav-btn btn-next">{% trans "Next" %} <i class="fas fa-chevron-right"></i></button>
|
|
<button id="submitBtn" class="nav-btn btn-submit" style="display: none">{% trans "Submit" %} <i class="fas fa-paper-plane"></i></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Application State
|
|
const csrfToken = '{{ csrf_token }}';
|
|
|
|
const state = {
|
|
templateId: '{{ template_slug }}',
|
|
job_slug: '{{ job_slug }}',
|
|
stages: [],
|
|
currentStage: 0,
|
|
formData: {},
|
|
isPreview: false,
|
|
fieldErrors: {} // Store validation errors
|
|
};
|
|
|
|
// DOM Elements
|
|
const elements = {
|
|
progressBar: document.getElementById('progressBar'),
|
|
progressText: document.getElementById('progressText'),
|
|
formTitle: document.getElementById('formTitle'),
|
|
stageContainer: document.getElementById('stageContainer'),
|
|
previewContainer: document.getElementById('previewContainer'),
|
|
previewContent: document.getElementById('previewContent'),
|
|
backBtn: document.getElementById('backBtn'),
|
|
nextBtn: document.getElementById('nextBtn'),
|
|
submitBtn: document.getElementById('submitBtn')
|
|
};
|
|
|
|
// Validation Functions
|
|
function validateEmail(email) {
|
|
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
|
return emailRegex.test(email);
|
|
}
|
|
|
|
function validatePhone(phone) {
|
|
// Remove all non-digit characters
|
|
const digits = phone.replace(/\D/g, '');
|
|
// Should be between 10-15 digits
|
|
return digits.length >= 10 && digits.length <= 15;
|
|
}
|
|
|
|
function validateRequired(value) {
|
|
if (value === undefined || value === null) return false;
|
|
if (typeof value === 'string') return value.trim() !== '';
|
|
if (Array.isArray(value)) return value.length > 0;
|
|
if (value instanceof File) return true;
|
|
return Boolean(value);
|
|
}
|
|
|
|
function validateField(field, value) {
|
|
// Clear previous error
|
|
delete state.fieldErrors[field.id];
|
|
|
|
// Check required validation
|
|
if (field.required && !validateRequired(value)) {
|
|
state.fieldErrors[field.id] = 'This field is required';
|
|
return false;
|
|
}
|
|
|
|
// Skip validation if not required and empty
|
|
if (!field.required && !validateRequired(value)) {
|
|
return true;
|
|
}
|
|
|
|
// Field type specific validation
|
|
switch (field.type) {
|
|
case 'email':
|
|
if (!validateEmail(value)) {
|
|
state.fieldErrors[field.id] = 'Please enter a valid email address';
|
|
return false;
|
|
}
|
|
break;
|
|
case 'phone':
|
|
if (!validatePhone(value)) {
|
|
state.fieldErrors[field.id] = 'Please enter a valid phone number';
|
|
return false;
|
|
}
|
|
break;
|
|
case 'file':
|
|
if (value instanceof File) {
|
|
// Validate file size
|
|
const maxFileSize = field.maxFileSize || 5;
|
|
const fileSizeMB = value.size / (1024 * 1024);
|
|
if (fileSizeMB > maxFileSize) {
|
|
state.fieldErrors[field.id] = `File size exceeds ${maxFileSize}MB limit`;
|
|
return false;
|
|
}
|
|
|
|
// Validate file type
|
|
const allowedTypes = (field.fileTypes || '.pdf,.doc,.docx').split(',');
|
|
const fileType = '.' + value.name.split('.').pop().toLowerCase();
|
|
if (!allowedTypes.some(type => type.trim().toLowerCase() === fileType)) {
|
|
state.fieldErrors[field.id] = `File type not allowed. Allowed types: ${field.fileTypes || '.pdf, .doc, .docx'}`;
|
|
return false;
|
|
}
|
|
}
|
|
break;
|
|
case 'date':
|
|
// Regex for YYYY-MM-DD (ISO standard for <input type="date"> output)
|
|
const yyyyMmDdRegex = /^\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[12][0-9]|3[01])$/;
|
|
|
|
if (value && !yyyyMmDdRegex.test(value)) {
|
|
// You might want to update the error message based on the input type
|
|
state.fieldErrors[field.id] = 'Please enter a valid date (e.g., YYYY-MM-DD).';
|
|
return false;
|
|
}
|
|
break;
|
|
}
|
|
|
|
return true;
|
|
}
|
|
|
|
function validateCurrentStage() {
|
|
const currentStage = state.stages[state.currentStage];
|
|
let isValid = true;
|
|
|
|
// Clear all errors for this stage
|
|
currentStage.fields.forEach(field => {
|
|
delete state.fieldErrors[field.id];
|
|
});
|
|
|
|
// Validate each field
|
|
currentStage.fields.forEach(field => {
|
|
const value = state.formData[field.id];
|
|
if (!validateField(field, value)) {
|
|
isValid = false;
|
|
}
|
|
});
|
|
|
|
// Show error messages
|
|
showFieldErrors();
|
|
|
|
return isValid;
|
|
}
|
|
|
|
function showFieldErrors() {
|
|
// Hide all error messages first
|
|
document.querySelectorAll('.error-message').forEach(el => {
|
|
el.classList.remove('show');
|
|
});
|
|
|
|
// Show errors for fields that have them
|
|
Object.keys(state.fieldErrors).forEach(fieldId => {
|
|
const errorElement = document.querySelector(`#error_${fieldId}`);
|
|
if (errorElement) {
|
|
errorElement.textContent = state.fieldErrors[fieldId];
|
|
errorElement.classList.add('show');
|
|
}
|
|
|
|
// Highlight the field
|
|
const fieldElement = document.querySelector(`#field_${fieldId}`);
|
|
if (fieldElement) {
|
|
fieldElement.classList.add('error');
|
|
}
|
|
|
|
// Highlight file upload area
|
|
const fileUploadArea = document.querySelector(`[data-field-id="${fieldId}"] .file-upload-area`);
|
|
if (fileUploadArea) {
|
|
fileUploadArea.classList.add('error');
|
|
}
|
|
|
|
// Highlight option items for radio/checkbox
|
|
const optionItems = document.querySelectorAll(`[name="field_${fieldId}"]`);
|
|
if (optionItems.length > 0) {
|
|
const parent = optionItems[0].closest('.field-container');
|
|
if (parent) {
|
|
parent.querySelectorAll('.option-item').forEach(item => {
|
|
item.classList.add('error');
|
|
});
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
function clearFieldError(fieldId) {
|
|
delete state.fieldErrors[fieldId];
|
|
|
|
// Remove error styling
|
|
const fieldElement = document.querySelector(`#field_${fieldId}`);
|
|
if (fieldElement) {
|
|
fieldElement.classList.remove('error');
|
|
}
|
|
|
|
const errorElement = document.querySelector(`#error_${fieldId}`);
|
|
if (errorElement) {
|
|
errorElement.classList.remove('show');
|
|
}
|
|
|
|
const fileUploadArea = document.querySelector(`[data-field-id="${fieldId}"] .file-upload-area`);
|
|
if (fileUploadArea) {
|
|
fileUploadArea.classList.remove('error');
|
|
}
|
|
|
|
const optionItems = document.querySelectorAll(`[name="field_${fieldId}"]`);
|
|
if (optionItems.length > 0) {
|
|
const parent = optionItems[0].closest('.field-container');
|
|
if (parent) {
|
|
parent.querySelectorAll('.option-item').forEach(item => {
|
|
item.classList.remove('error');
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
// Utility Functions
|
|
function getFieldIcon(type) {
|
|
const icons = {
|
|
'text': 'fas fa-font',
|
|
'email': 'fas fa-envelope',
|
|
'phone': 'fas fa-phone',
|
|
'textarea': 'fas fa-align-left',
|
|
'file': 'fas fa-file-upload',
|
|
'date': 'fas fa-calendar',
|
|
'select': 'fas fa-caret-square-down',
|
|
'radio': 'fas fa-dot-circle',
|
|
'checkbox': 'fas fa-check-square'
|
|
};
|
|
return icons[type] || 'fas fa-question';
|
|
}
|
|
|
|
function formatFileSize(bytes) {
|
|
if (bytes === 0) return '0 Bytes';
|
|
const k = 1024;
|
|
const sizes = ['Bytes', 'KB', 'MB', 'GB'];
|
|
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
|
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
|
|
}
|
|
|
|
// API Functions
|
|
async function loadFormTemplate() {
|
|
try {
|
|
const response = await fetch(`/api/v1/templates/${state.job_slug}/`);
|
|
const result = await response.json();
|
|
|
|
if (result.success) {
|
|
const templateData = result.template;
|
|
console.log(templateData);
|
|
state.stages = templateData.stages;
|
|
elements.formTitle.textContent = templateData.name;
|
|
updateProgress();
|
|
renderCurrentStage();
|
|
}
|
|
} catch (error) {
|
|
console.error('Error loading template:', error);
|
|
alert('Error loading form template.');
|
|
}
|
|
}
|
|
|
|
async function submitForm() {
|
|
// Validate all stages before submission
|
|
let allValid = true;
|
|
for (let i = 0; i < state.stages.length; i++) {
|
|
state.currentStage = i;
|
|
if (!validateCurrentStage()) {
|
|
allValid = false;
|
|
break;
|
|
}
|
|
}
|
|
|
|
if (!allValid) {
|
|
alert('Please fix the validation errors before submitting.');
|
|
return;
|
|
}
|
|
|
|
const formData = new FormData();
|
|
|
|
// Add CSRF token as a form field (CRITICAL FIX)
|
|
formData.append('csrfmiddlewaretoken', csrfToken);
|
|
|
|
// Add field responses
|
|
state.stages.forEach(stage => {
|
|
stage.fields.forEach(field => {
|
|
const value = state.formData[field.id];
|
|
|
|
// Always include the field, even if it's empty
|
|
if (field.type === 'file') {
|
|
if (value instanceof File) {
|
|
formData.append(`field_${field.id}`, value);
|
|
} else {
|
|
// Include empty file field
|
|
formData.append(`field_${field.id}`, '');
|
|
}
|
|
} else if (field.type === 'checkbox') {
|
|
// For checkboxes, send empty array if no selection
|
|
if (Array.isArray(value) && value.length > 0) {
|
|
formData.append(`field_${field.id}`, JSON.stringify(value));
|
|
} else {
|
|
formData.append(`field_${field.id}`, JSON.stringify([]));
|
|
}
|
|
} else {
|
|
// For other field types, send the value or empty string
|
|
formData.append(`field_${field.id}`, value || '');
|
|
}
|
|
});
|
|
});
|
|
|
|
try {
|
|
const response = await fetch(`/application/${state.job_slug}/submit/`, {
|
|
method: 'POST',
|
|
body: formData
|
|
// IMPORTANT: Do NOT set Content-Type header when using FormData
|
|
// Do NOT set X-CSRFToken header when using csrfmiddlewaretoken in form data
|
|
});
|
|
|
|
// Check if response is OK
|
|
if (!response.ok) {
|
|
throw new Error(`HTTP error! status: ${response.status}`);
|
|
}
|
|
|
|
const result = await response.json();
|
|
if (result.success) {
|
|
console.log('Application submitted successfully! Thank you for your submission.');
|
|
const redirect_url = result['redirect_url']
|
|
window.location.href = redirect_url; // Redirect to applications list
|
|
} else {
|
|
console.log(result)
|
|
console.log('Error submitting form: ' + (result.error || 'Unknown error'));
|
|
}
|
|
} catch (error) {
|
|
console.log(error)
|
|
//console.error('Submission error:', error);
|
|
// Try to get response text for debugging
|
|
try {
|
|
const errorText = await response.text();
|
|
console.error('Response text:', errorText);
|
|
console.log('Error submitting form. Server response: ' + errorText);
|
|
} catch (e) {
|
|
console.log('Error submitting form: ' + error.message);
|
|
}
|
|
}
|
|
}
|
|
|
|
// DOM Rendering Functions
|
|
function updateProgress() {
|
|
const totalStages = state.stages.length;
|
|
const progress = state.isPreview ? 100 : ((state.currentStage) / (totalStages - 1)) * 100;
|
|
elements.progressBar.style.width = `${progress}%`;
|
|
elements.progressText.textContent = state.isPreview ?
|
|
`Preview` :
|
|
`${state.currentStage + 1} of ${totalStages}`;
|
|
}
|
|
|
|
function renderCurrentStage() {
|
|
// Always show stage container and hide preview container initially
|
|
elements.stageContainer.style.display = 'block';
|
|
elements.previewContainer.style.display = 'none';
|
|
|
|
if (state.isPreview) {
|
|
renderPreview();
|
|
return;
|
|
}
|
|
|
|
const currentStage = state.stages[state.currentStage];
|
|
elements.stageContainer.innerHTML = '';
|
|
|
|
const stageTitle = document.createElement('h2');
|
|
stageTitle.className = 'stage-title';
|
|
stageTitle.textContent = currentStage.name;
|
|
elements.stageContainer.appendChild(stageTitle);
|
|
|
|
currentStage.fields.forEach(field => {
|
|
const fieldElement = createFieldElement(field);
|
|
elements.stageContainer.appendChild(fieldElement);
|
|
});
|
|
|
|
// Update navigation buttons
|
|
elements.backBtn.style.display = state.currentStage > 0 ? 'flex' : 'none';
|
|
elements.submitBtn.style.display = 'none';
|
|
elements.nextBtn.style.display = 'flex';
|
|
|
|
// Fix: Update the Next button text correctly
|
|
elements.nextBtn.innerHTML = state.currentStage === state.stages.length - 1 ?
|
|
'Preview <i class="fas fa-arrow-right"></i>' :
|
|
'Next <i class="fas fa-arrow-right"></i>';
|
|
}
|
|
|
|
|
|
function createFieldElement(field) {
|
|
const fieldDiv = document.createElement('div');
|
|
fieldDiv.className = 'field-container';
|
|
fieldDiv.dataset.fieldId = field.id;
|
|
|
|
const fieldLabel = document.createElement('label');
|
|
fieldLabel.className = 'field-label';
|
|
fieldLabel.innerHTML = `
|
|
${field.label}
|
|
${field.required ? '<span class="required-indicator"> *</span>' : ''}
|
|
`;
|
|
fieldDiv.appendChild(fieldLabel);
|
|
|
|
// Create input based on field type
|
|
if (field.type === 'text' || field.type === 'email' || field.type === 'phone') {
|
|
const input = document.createElement('input');
|
|
input.type = field.type === 'email' ? 'email' : field.type === 'phone' ? 'tel' : 'text';
|
|
input.className = 'form-input';
|
|
input.placeholder = field.placeholder || `Enter ${field.label.toLowerCase()}`;
|
|
input.id = `field_${field.id}`;
|
|
input.value = state.formData[field.id] || '';
|
|
input.required = field.required;
|
|
input.addEventListener('input', (e) => {
|
|
state.formData[field.id] = e.target.value;
|
|
clearFieldError(field.id);
|
|
});
|
|
input.addEventListener('blur', () => {
|
|
validateField(field, state.formData[field.id]);
|
|
showFieldErrors();
|
|
});
|
|
fieldDiv.appendChild(input);
|
|
|
|
// Add error message element
|
|
const errorDiv = document.createElement('div');
|
|
errorDiv.className = 'error-message';
|
|
errorDiv.id = `error_${field.id}`;
|
|
fieldDiv.appendChild(errorDiv);
|
|
}
|
|
else if (field.type === 'textarea') {
|
|
const textarea = document.createElement('textarea');
|
|
textarea.className = 'form-input form-textarea';
|
|
textarea.placeholder = field.placeholder || `Enter ${field.label.toLowerCase()}`;
|
|
textarea.id = `field_${field.id}`;
|
|
textarea.value = state.formData[field.id] || '';
|
|
textarea.required = field.required;
|
|
textarea.addEventListener('input', (e) => {
|
|
state.formData[field.id] = e.target.value;
|
|
clearFieldError(field.id);
|
|
});
|
|
textarea.addEventListener('blur', () => {
|
|
validateField(field, state.formData[field.id]);
|
|
showFieldErrors();
|
|
});
|
|
fieldDiv.appendChild(textarea);
|
|
|
|
// Add error message element
|
|
const errorDiv = document.createElement('div');
|
|
errorDiv.className = 'error-message';
|
|
errorDiv.id = `error_${field.id}`;
|
|
fieldDiv.appendChild(errorDiv);
|
|
}
|
|
else if (field.type === 'file') {
|
|
const fileUpload = document.createElement('div');
|
|
fileUpload.className = 'file-upload-area';
|
|
fileUpload.innerHTML = `
|
|
<div class="file-upload-icon">
|
|
<i class="fas fa-cloud-upload-alt"></i>
|
|
</div>
|
|
<div class="file-upload-text">
|
|
<p>Drag & drop your ${field.label.toLowerCase()} here or <strong>click to browse</strong></p>
|
|
</div>
|
|
<div class="file-upload-info">
|
|
<p>Supported formats: ${field.fileTypes || '.pdf, .doc, .docx'} (Max ${field.maxFileSize || 5}MB)</p>
|
|
</div>
|
|
<input type="file" class="file-input" id="field_${field.id}" accept="${field.fileTypes || '.pdf,.doc,.docx'}">
|
|
`;
|
|
|
|
const fileInput = fileUpload.querySelector('.file-input');
|
|
fileInput.addEventListener('change', (e) => {
|
|
const file = e.target.files[0];
|
|
if (file) {
|
|
state.formData[field.id] = file;
|
|
clearFieldError(field.id);
|
|
|
|
// Show uploaded file preview
|
|
const uploadedFile = document.createElement('div');
|
|
uploadedFile.className = 'uploaded-file';
|
|
uploadedFile.innerHTML = `
|
|
<div class="file-info">
|
|
<i class="fas fa-file file-icon"></i>
|
|
<div>
|
|
<div class="file-name">${file.name}</div>
|
|
<div class="file-size">${formatFileSize(file.size)}</div>
|
|
</div>
|
|
</div>
|
|
<button class="remove-file-btn">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
`;
|
|
fileUpload.appendChild(uploadedFile);
|
|
|
|
// Add remove functionality
|
|
uploadedFile.querySelector('.remove-file-btn').addEventListener('click', () => {
|
|
delete state.formData[field.id];
|
|
uploadedFile.remove();
|
|
clearFieldError(field.id);
|
|
});
|
|
} else {
|
|
delete state.formData[field.id];
|
|
clearFieldError(field.id);
|
|
}
|
|
});
|
|
|
|
fieldDiv.appendChild(fileUpload);
|
|
|
|
// Add error message element
|
|
const errorDiv = document.createElement('div');
|
|
errorDiv.className = 'error-message';
|
|
errorDiv.id = `error_${field.id}`;
|
|
fieldDiv.appendChild(errorDiv);
|
|
}
|
|
else if (field.type === 'date') {
|
|
const input = document.createElement('input');
|
|
input.type = 'date';
|
|
input.className = 'form-input';
|
|
input.placeholder = field.placeholder || 'Select date';
|
|
input.id = `field_${field.id}`;
|
|
input.value = state.formData[field.id] || '';
|
|
input.required = field.required;
|
|
input.addEventListener('input', (e) => {
|
|
state.formData[field.id] = e.target.value;
|
|
clearFieldError(field.id);
|
|
});
|
|
input.addEventListener('blur', () => {
|
|
validateField(field, state.formData[field.id]);
|
|
showFieldErrors();
|
|
});
|
|
fieldDiv.appendChild(input);
|
|
|
|
// Add error message element
|
|
const errorDiv = document.createElement('div');
|
|
errorDiv.className = 'error-message';
|
|
errorDiv.id = `error_${field.id}`;
|
|
fieldDiv.appendChild(errorDiv);
|
|
}
|
|
else if (field.type === 'select') {
|
|
const select = document.createElement('select');
|
|
select.className = 'form-input';
|
|
select.id = `field_${field.id}`;
|
|
select.required = field.required;
|
|
|
|
const defaultOption = document.createElement('option');
|
|
defaultOption.value = '';
|
|
defaultOption.textContent = `Select ${field.label.toLowerCase()}`;
|
|
select.appendChild(defaultOption);
|
|
|
|
field.options.forEach(option => {
|
|
const optionEl = document.createElement('option');
|
|
optionEl.value = option;
|
|
optionEl.textContent = option;
|
|
if (state.formData[field.id] === option) {
|
|
optionEl.selected = true;
|
|
}
|
|
select.appendChild(optionEl);
|
|
});
|
|
|
|
select.addEventListener('change', (e) => {
|
|
state.formData[field.id] = e.target.value;
|
|
clearFieldError(field.id);
|
|
});
|
|
select.addEventListener('blur', () => {
|
|
validateField(field, state.formData[field.id]);
|
|
showFieldErrors();
|
|
});
|
|
|
|
fieldDiv.appendChild(select);
|
|
|
|
// Add error message element
|
|
const errorDiv = document.createElement('div');
|
|
errorDiv.className = 'error-message';
|
|
errorDiv.id = `error_${field.id}`;
|
|
fieldDiv.appendChild(errorDiv);
|
|
}
|
|
else if (field.type === 'radio') {
|
|
const optionsDiv = document.createElement('div');
|
|
field.options.forEach((option, idx) => {
|
|
const optionItem = document.createElement('div');
|
|
optionItem.className = 'option-item';
|
|
optionItem.innerHTML = `
|
|
<input type="radio"
|
|
id="field_${field.id}_${idx}"
|
|
name="field_${field.id}"
|
|
value="${option}"
|
|
${state.formData[field.id] === option ? 'checked' : ''}>
|
|
<label for="field_${field.id}_${idx}">${option}</label>
|
|
`;
|
|
optionsDiv.appendChild(optionItem);
|
|
|
|
const radioInput = optionItem.querySelector('input');
|
|
radioInput.addEventListener('change', () => {
|
|
state.formData[field.id] = option;
|
|
clearFieldError(field.id);
|
|
});
|
|
});
|
|
fieldDiv.appendChild(optionsDiv);
|
|
|
|
// Add error message element
|
|
const errorDiv = document.createElement('div');
|
|
errorDiv.className = 'error-message';
|
|
errorDiv.id = `error_${field.id}`;
|
|
fieldDiv.appendChild(errorDiv);
|
|
}
|
|
else if (field.type === 'checkbox') {
|
|
const optionsDiv = document.createElement('div');
|
|
field.options.forEach((option, idx) => {
|
|
const optionItem = document.createElement('div');
|
|
optionItem.className = 'option-item';
|
|
optionItem.innerHTML = `
|
|
<input type="checkbox"
|
|
id="field_${field.id}_${idx}"
|
|
value="${option}"
|
|
${Array.isArray(state.formData[field.id]) && state.formData[field.id].includes(option) ? 'checked' : ''}>
|
|
<label for="field_${field.id}_${idx}">${option}</label>
|
|
`;
|
|
optionsDiv.appendChild(optionItem);
|
|
|
|
const checkboxInput = optionItem.querySelector('input');
|
|
checkboxInput.addEventListener('change', () => {
|
|
if (!state.formData[field.id]) {
|
|
state.formData[field.id] = [];
|
|
}
|
|
|
|
if (checkboxInput.checked) {
|
|
state.formData[field.id].push(option);
|
|
} else {
|
|
state.formData[field.id] = state.formData[field.id].filter(item => item !== option);
|
|
}
|
|
clearFieldError(field.id);
|
|
});
|
|
});
|
|
fieldDiv.appendChild(optionsDiv);
|
|
|
|
// Add error message element
|
|
const errorDiv = document.createElement('div');
|
|
errorDiv.className = 'error-message';
|
|
errorDiv.id = `error_${field.id}`;
|
|
fieldDiv.appendChild(errorDiv);
|
|
}
|
|
|
|
return fieldDiv;
|
|
}
|
|
|
|
function renderPreview() {
|
|
elements.stageContainer.style.display = 'none';
|
|
elements.previewContainer.style.display = 'block';
|
|
elements.previewContent.innerHTML = '';
|
|
|
|
// Add applicant info if available
|
|
if (state.formData.applicant_name || state.formData.applicant_email) {
|
|
const applicantDiv = document.createElement('div');
|
|
applicantDiv.className = 'preview-item';
|
|
applicantDiv.innerHTML = `
|
|
<div class="preview-label">Applicant Information</div>
|
|
<div class="preview-value">
|
|
${state.formData.applicant_name ? `<strong>Name:</strong> ${state.formData.applicant_name}<br>` : ''}
|
|
${state.formData.applicant_email ? `<strong>Email:</strong> ${state.formData.applicant_email}` : ''}
|
|
</div>
|
|
`;
|
|
elements.previewContent.appendChild(applicantDiv);
|
|
}
|
|
|
|
// Add stage data
|
|
state.stages.forEach(stage => {
|
|
const stageDiv = document.createElement('div');
|
|
stageDiv.className = 'preview-item';
|
|
|
|
const stageTitle = document.createElement('div');
|
|
stageTitle.className = 'preview-label';
|
|
stageTitle.textContent = stage.name;
|
|
stageDiv.appendChild(stageTitle);
|
|
|
|
const stageContent = document.createElement('div');
|
|
stageContent.className = 'preview-value';
|
|
|
|
stage.fields.forEach(field => {
|
|
let value = state.formData[field.id];
|
|
if (value === undefined || value === null || value === '') {
|
|
value = '<em>Not provided</em>';
|
|
} else if (field.type === 'file' && value instanceof File) {
|
|
value = value.name;
|
|
} else if (field.type === 'checkbox' && Array.isArray(value)) {
|
|
value = value.join(', ');
|
|
}
|
|
|
|
const fieldDiv = document.createElement('div');
|
|
fieldDiv.innerHTML = `<strong>${field.label}:</strong> ${value}`;
|
|
stageContent.appendChild(fieldDiv);
|
|
});
|
|
|
|
stageDiv.appendChild(stageContent);
|
|
elements.previewContent.appendChild(stageDiv);
|
|
});
|
|
|
|
// Update navigation buttons
|
|
elements.backBtn.style.display = 'flex';
|
|
elements.nextBtn.style.display = 'none';
|
|
elements.submitBtn.style.display = 'flex';
|
|
}
|
|
|
|
// Navigation Functions
|
|
function nextStage() {
|
|
if (state.isPreview) {
|
|
submitForm();
|
|
return;
|
|
}
|
|
|
|
if (!validateCurrentStage()) {
|
|
// Scroll to first error
|
|
const firstError = document.querySelector('.error-message.show');
|
|
if (firstError) {
|
|
firstError.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
|
}
|
|
return;
|
|
}
|
|
|
|
if (state.currentStage === state.stages.length - 1) {
|
|
// Go to preview
|
|
state.isPreview = true;
|
|
renderCurrentStage();
|
|
updateProgress();
|
|
} else {
|
|
// Go to next stage
|
|
state.currentStage++;
|
|
renderCurrentStage();
|
|
updateProgress();
|
|
}
|
|
}
|
|
|
|
function prevStage() {
|
|
if (state.isPreview) {
|
|
// Go back to last stage from preview
|
|
state.isPreview = false;
|
|
// Set to the last form stage
|
|
state.currentStage = state.stages.length - 1;
|
|
renderCurrentStage();
|
|
updateProgress();
|
|
} else if (state.currentStage > 0) {
|
|
// Go to previous stage
|
|
state.currentStage--;
|
|
renderCurrentStage();
|
|
updateProgress();
|
|
}
|
|
}
|
|
|
|
// Initialize Application
|
|
function init() {
|
|
// Load form template
|
|
loadFormTemplate();
|
|
|
|
// Set up event listeners
|
|
elements.nextBtn.addEventListener('click', nextStage);
|
|
elements.backBtn.addEventListener('click', prevStage);
|
|
elements.submitBtn.addEventListener('click', submitForm);
|
|
}
|
|
|
|
// Start the application
|
|
document.addEventListener('DOMContentLoaded', init);
|
|
|
|
|
|
|
|
</script>
|
|
{% endblock content %} |