375 lines
19 KiB
HTML
375 lines
19 KiB
HTML
{% extends "base.html" %}
|
|
{% load static i18n %}
|
|
|
|
{% block title %}{% trans "Create Application" %} - {{ block.super }}{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="max-w-4xl mx-auto py-6 px-4">
|
|
|
|
<!-- Breadcrumb -->
|
|
<nav class="mb-6" aria-label="breadcrumb">
|
|
<ol class="flex items-center gap-2 text-sm flex-wrap">
|
|
<li><a href="{% url 'application_list' %}" class="text-gray-500 hover:underline transition flex items-center gap-1">
|
|
<i data-lucide="file-text" class="w-4 h-4"></i> {% trans "Applications" %}
|
|
</a></li>
|
|
<li class="text-gray-400">/</li>
|
|
<li class="font-semibold" style="color: #9d2235;">{% trans "Create Application" %}</li>
|
|
</ol>
|
|
</nav>
|
|
|
|
<!-- Header -->
|
|
<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-6">
|
|
<h1 class="text-2xl sm:text-3xl font-bold flex items-center gap-3">
|
|
<div class="w-12 h-12 rounded-xl flex items-center justify-center" style="background-color: rgba(157, 34, 53, 0.1);">
|
|
<i data-lucide="file-plus" class="w-6 h-6" style="color: #9d2235;"></i>
|
|
</div>
|
|
{% trans "Create New Application" %}
|
|
</h1>
|
|
<div class="flex gap-2">
|
|
<button type="button" id="openPersonModal"
|
|
class="inline-flex items-center gap-2 px-4 py-3 rounded-lg font-medium border-2 text-white transition-all duration-200"
|
|
style="background-color: #9d2235;"
|
|
onmouseover="this.style.backgroundColor='#7a1a29'"
|
|
onmouseout="this.style.backgroundColor='#9d2235'">
|
|
<i data-lucide="user-plus" class="w-4 h-4"></i>
|
|
<span class="hidden sm:inline">{% trans "Create New Applicant" %}</span>
|
|
</button>
|
|
<a href="{% url 'application_list' %}"
|
|
class="inline-flex items-center gap-2 px-6 py-3 rounded-lg font-medium border-2 border-gray-200 text-gray-700 hover:bg-gray-50 transition-all duration-200">
|
|
<i data-lucide="arrow-left" class="w-4 h-4"></i>
|
|
<span class="hidden sm:inline">{% trans "Back to List" %}</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Form Card -->
|
|
<div class="bg-white rounded-xl shadow-sm border border-gray-200">
|
|
<div class="px-6 py-4 border-b border-gray-100" style="background-color: #f8f9fa;">
|
|
<h2 class="text-lg font-bold flex items-center gap-2">
|
|
<i data-lucide="file-text" class="w-5 h-5" style="color: #9d2235;"></i>
|
|
{% trans "Application Information" %}
|
|
</h2>
|
|
</div>
|
|
|
|
<div class="p-6">
|
|
{% if form.non_field_errors %}
|
|
<div class="mb-6 p-4 rounded-lg bg-red-50 border border-red-200" role="alert">
|
|
<div class="flex items-start gap-3">
|
|
<i data-lucide="alert-triangle" class="w-5 h-5 text-red-600 flex-shrink-0 mt-0.5"></i>
|
|
<div>
|
|
<h5 class="font-semibold text-red-800 mb-1">{% trans "Error" %}</h5>
|
|
{% for error in form.non_field_errors %}
|
|
<p class="text-red-700 mb-0">{{ error }}</p>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<form method="post" enctype="multipart/form-data" id="application-form" class="space-y-6">
|
|
{% csrf_token %}
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
{% for field in form %}
|
|
{% if field.name != 'person' %}
|
|
<div>
|
|
<label for="{{ field.id_for_label }}" class="block text-sm font-semibold text-gray-700 mb-2">
|
|
{{ field.label }}
|
|
{% if field.field.required %}<span class="text-red-500">*</span>{% endif %}
|
|
</label>
|
|
{{ field }}
|
|
{% if field.help_text %}
|
|
<p class="text-xs text-gray-500 mt-1">{{ field.help_text }}</p>
|
|
{% endif %}
|
|
{% for error in field.errors %}
|
|
<div class="text-red-600 text-sm mt-1">{{ error }}</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<!-- Person Selection -->
|
|
<div>
|
|
<label for="{{ form.person.id_for_label }}" class="block text-sm font-semibold text-gray-700 mb-2">
|
|
{{ form.person.label }} <span class="text-red-500">*</span>
|
|
</label>
|
|
<div class="flex gap-2">
|
|
<select name="person" id="{{ form.person.id_for_label }}"
|
|
class="flex-1 px-4 py-3 border border-gray-200 rounded-xl text-sm focus:ring-2 focus:ring-temple-red/20 focus:border-temple-red outline-none transition bg-white">
|
|
<option value="">{% trans "Select Applicant" %}</option>
|
|
{% for choice in form.person.field.queryset %}
|
|
<option value="{{ choice.pk }}">{{ choice.get_full_name|default:choice.email }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
<button type="button" id="openPersonModal"
|
|
class="inline-flex items-center justify-center px-4 py-3 rounded-xl border-2 text-white transition-all duration-200 whitespace-nowrap"
|
|
style="background-color: #9d2235;"
|
|
onmouseover="this.style.backgroundColor='#7a1a29'"
|
|
onmouseout="this.style.backgroundColor='#9d2235'">
|
|
<i data-lucide="user-plus" class="w-4 h-4 mr-2"></i>
|
|
{% trans "New" %}
|
|
</button>
|
|
</div>
|
|
{% for error in form.person.errors %}
|
|
<div class="text-red-600 text-sm mt-1">{{ error }}</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<!-- Form Actions -->
|
|
<div class="flex flex-col sm:flex-row justify-between items-center gap-4 pt-4 border-t border-gray-200">
|
|
<a href="{% url 'application_list' %}"
|
|
class="inline-flex items-center gap-2 px-6 py-3 rounded-lg font-medium border-2 border-gray-200 text-gray-700 hover:bg-gray-50 transition-all duration-200">
|
|
<i data-lucide="x" class="w-4 h-4"></i>
|
|
{% trans "Cancel" %}
|
|
</a>
|
|
<button type="submit"
|
|
class="inline-flex items-center gap-2 px-8 py-3 rounded-lg font-medium text-white transition-all duration-200"
|
|
style="background-color: #9d2235;"
|
|
onmouseover="this.style.backgroundColor='#7a1a29'"
|
|
onmouseout="this.style.backgroundColor='#9d2235'">
|
|
<i data-lucide="save" class="w-4 h-4"></i>
|
|
{% trans "Create Application" %}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Person Modal -->
|
|
<div class="hidden fixed inset-0 z-50 overflow-y-auto" id="personModal" role="dialog" aria-labelledby="personModalLabel">
|
|
<div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
|
|
<div class="fixed inset-0 bg-black/50 transition-opacity" aria-hidden="true"></div>
|
|
<span class="hidden sm:inline-block sm:align-middle sm:h-screen sm:align-middle" aria-hidden="true">​</span>
|
|
<div class="inline-block align-bottom bg-white rounded-2xl text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-3xl sm:w-full">
|
|
<div class="px-6 py-4 border-b border-gray-100" style="background-color: #f8f9fa;">
|
|
<h3 class="text-lg font-bold flex items-center gap-2" id="personModalLabel">
|
|
<i data-lucide="user-plus" class="w-5 h-5" style="color: #9d2235;"></i>
|
|
{% trans "Create New Applicant" %}
|
|
</h3>
|
|
</div>
|
|
<div class="p-6">
|
|
<form id="person_form" hx-post="{% url 'person_create' %}" hx-vals='{"view":"job"}' hx-target="#div_id_person" hx-select="#div_id_person" hx-swap="outerHTML">
|
|
{% csrf_token %}
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
<div>
|
|
<label for="{{ person_form.first_name.id_for_label }}" class="block text-sm font-semibold text-gray-700 mb-2">
|
|
{{ person_form.first_name.label }}
|
|
</label>
|
|
{{ person_form.first_name }}
|
|
{% for error in person_form.first_name.errors %}
|
|
<div class="text-red-600 text-sm mt-1">{{ error }}</div>
|
|
{% endfor %}
|
|
</div>
|
|
<div>
|
|
<label for="{{ person_form.middle_name.id_for_label }}" class="block text-sm font-semibold text-gray-700 mb-2">
|
|
{{ person_form.middle_name.label }}
|
|
</label>
|
|
{{ person_form.middle_name }}
|
|
{% for error in person_form.middle_name.errors %}
|
|
<div class="text-red-600 text-sm mt-1">{{ error }}</div>
|
|
{% endfor %}
|
|
</div>
|
|
<div>
|
|
<label for="{{ person_form.last_name.id_for_label }}" class="block text-sm font-semibold text-gray-700 mb-2">
|
|
{{ person_form.last_name.label }}
|
|
</label>
|
|
{{ person_form.last_name }}
|
|
{% for error in person_form.last_name.errors %}
|
|
<div class="text-red-600 text-sm mt-1">{{ error }}</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
|
|
<div>
|
|
<label for="{{ person_form.email.id_for_label }}" class="block text-sm font-semibold text-gray-700 mb-2">
|
|
{{ person_form.email.label }}
|
|
</label>
|
|
{{ person_form.email }}
|
|
{% for error in person_form.email.errors %}
|
|
<div class="text-red-600 text-sm mt-1">{{ error }}</div>
|
|
{% endfor %}
|
|
</div>
|
|
<div>
|
|
<label for="{{ person_form.phone.id_for_label }}" class="block text-sm font-semibold text-gray-700 mb-2">
|
|
{{ person_form.phone.label }}
|
|
</label>
|
|
{{ person_form.phone }}
|
|
{% for error in person_form.phone.errors %}
|
|
<div class="text-red-600 text-sm mt-1">{{ error }}</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
|
|
<div>
|
|
<label for="{{ person_form.gpa.id_for_label }}" class="block text-sm font-semibold text-gray-700 mb-2">
|
|
{{ person_form.gpa.label }}
|
|
</label>
|
|
{{ person_form.gpa }}
|
|
{% for error in person_form.gpa.errors %}
|
|
<div class="text-red-600 text-sm mt-1">{{ error }}</div>
|
|
{% endfor %}
|
|
</div>
|
|
<div>
|
|
<label for="{{ person_form.national_id.id_for_label }}" class="block text-sm font-semibold text-gray-700 mb-2">
|
|
{{ person_form.national_id.label }}
|
|
</label>
|
|
{{ person_form.national_id }}
|
|
{% for error in person_form.national_id.errors %}
|
|
<div class="text-red-600 text-sm mt-1">{{ error }}</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
|
|
<div>
|
|
<label for="{{ person_form.date_of_birth.id_for_label }}" class="block text-sm font-semibold text-gray-700 mb-2">
|
|
{{ person_form.date_of_birth.label }}
|
|
</label>
|
|
{{ person_form.date_of_birth }}
|
|
{% for error in person_form.date_of_birth.errors %}
|
|
<div class="text-red-600 text-sm mt-1">{{ error }}</div>
|
|
{% endfor %}
|
|
</div>
|
|
<div>
|
|
<label for="{{ person_form.nationality.id_for_label }}" class="block text-sm font-semibold text-gray-700 mb-2">
|
|
{{ person_form.nationality.label }}
|
|
</label>
|
|
{{ person_form.nationality }}
|
|
{% for error in person_form.nationality.errors %}
|
|
<div class="text-red-600 text-sm mt-1">{{ error }}</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-4">
|
|
<label for="{{ person_form.address.id_for_label }}" class="block text-sm font-semibold text-gray-700 mb-2">
|
|
{{ person_form.address.label }}
|
|
</label>
|
|
{{ person_form.address }}
|
|
{% for error in person_form.address.errors %}
|
|
<div class="text-red-600 text-sm mt-1">{{ error }}</div>
|
|
{% endfor %}
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="px-6 py-4 border-t border-gray-100" style="background-color: #f8f9fa;">
|
|
<div class="flex flex-col sm:flex-row justify-end gap-3">
|
|
<button type="button" id="closePersonModal"
|
|
class="inline-flex items-center justify-center gap-2 px-6 py-3 rounded-lg font-medium border-2 border-gray-200 text-gray-700 hover:bg-gray-50 transition-all duration-200">
|
|
<i data-lucide="x" class="w-4 h-4"></i>
|
|
{% trans "Cancel" %}
|
|
</button>
|
|
<button type="submit" form="person_form"
|
|
class="inline-flex items-center justify-center gap-2 px-8 py-3 rounded-lg font-medium text-white transition-all duration-200"
|
|
style="background-color: #9d2235;"
|
|
onmouseover="this.style.backgroundColor='#7a1a29'"
|
|
onmouseout="this.style.backgroundColor='#9d2235'">
|
|
<i data-lucide="save" class="w-4 h-4"></i>
|
|
{% trans "Create Applicant" %}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Initialize Lucide icons
|
|
if (typeof lucide !== 'undefined') {
|
|
lucide.createIcons();
|
|
}
|
|
|
|
// Apply consistent form styling
|
|
const formInputs = document.querySelectorAll('#application-form input, #application-form select, #application-form textarea, #person_form input, #person_form select, #person_form textarea');
|
|
formInputs.forEach(input => {
|
|
if (!input.classList.contains('hidden')) {
|
|
input.classList.add('w-full', 'px-4', 'py-3', 'border', 'border-gray-200', 'rounded-xl', 'text-sm', 'focus:ring-2', 'focus:ring-temple-red/20', 'focus:border-temple-red', 'outline-none', 'transition', 'bg-white');
|
|
}
|
|
});
|
|
|
|
// Modal functionality
|
|
const modal = document.getElementById('personModal');
|
|
const openBtns = document.querySelectorAll('#openPersonModal');
|
|
const closeBtns = document.querySelectorAll('#closePersonModal');
|
|
let isModalOpen = false;
|
|
|
|
// Open modal
|
|
openBtns.forEach(btn => {
|
|
btn.addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
if (modal) {
|
|
modal.classList.remove('hidden');
|
|
document.body.style.overflow = 'hidden';
|
|
isModalOpen = true;
|
|
}
|
|
});
|
|
});
|
|
|
|
// Close modal
|
|
closeBtns.forEach(btn => {
|
|
btn.addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
if (modal && isModalOpen) {
|
|
modal.classList.add('hidden');
|
|
document.body.style.overflow = '';
|
|
isModalOpen = false;
|
|
}
|
|
});
|
|
});
|
|
|
|
// Close modal when clicking outside
|
|
if (modal) {
|
|
modal.addEventListener('click', function(e) {
|
|
if (e.target === modal && isModalOpen) {
|
|
modal.classList.add('hidden');
|
|
document.body.style.overflow = '';
|
|
isModalOpen = false;
|
|
}
|
|
});
|
|
}
|
|
|
|
// Close modal on escape key
|
|
document.addEventListener('keydown', function(e) {
|
|
if (e.key === 'Escape' && modal && isModalOpen) {
|
|
modal.classList.add('hidden');
|
|
document.body.style.overflow = '';
|
|
isModalOpen = false;
|
|
}
|
|
});
|
|
|
|
// Form validation
|
|
const form = document.getElementById('application-form');
|
|
if (form) {
|
|
form.addEventListener('submit', function(e) {
|
|
const personSelect = document.getElementById('id_person');
|
|
if (!personSelect.value) {
|
|
e.preventDefault();
|
|
alert("{% trans 'Please select an applicant.' %}");
|
|
personSelect.focus();
|
|
return false;
|
|
}
|
|
});
|
|
}
|
|
|
|
// Reinitialize Lucide icons after HTMX updates
|
|
document.body.addEventListener('htmx:afterSwap', function(evt) {
|
|
lucide.createIcons();
|
|
|
|
// Re-apply form styling to new elements
|
|
const newFormInputs = document.querySelectorAll('#person_form input, #person_form select, #person_form textarea');
|
|
newFormInputs.forEach(input => {
|
|
if (!input.classList.contains('hidden')) {
|
|
input.classList.add('w-full', 'px-4', 'py-3', 'border', 'border-gray-200', 'rounded-xl', 'text-sm', 'focus:ring-2', 'focus:ring-temple-red/20', 'focus:border-temple-red', 'outline-none', 'transition', 'bg-white');
|
|
}
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %} |