420 lines
17 KiB
HTML
420 lines
17 KiB
HTML
{% extends 'layouts/base.html' %}
|
|
{% load i18n static %}
|
|
|
|
{% block title %}{% if is_create %}{% trans "Create Government Ticket" %}{% else %}{% trans "Edit Government Ticket" %}{% endif %} - PX360{% endblock %}
|
|
|
|
{% block extra_css %}
|
|
<style>
|
|
.page-header-gradient {
|
|
background: linear-gradient(135deg, #005696 0%, #0069a8 50%, #007bbd 100%);
|
|
color: white;
|
|
padding: 1.5rem 2rem;
|
|
border-radius: 1rem;
|
|
margin-bottom: 1.5rem;
|
|
box-shadow: 0 10px 15px -3px rgba(0, 86, 150, 0.2);
|
|
}
|
|
.form-section {
|
|
background: white;
|
|
border-radius: 1rem;
|
|
border: 2px solid #e2e8f0;
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
|
overflow: hidden;
|
|
}
|
|
.form-section-header {
|
|
padding: 1rem 1.5rem;
|
|
border-bottom: 2px solid #e2e8f0;
|
|
background: linear-gradient(to right, #f8fafc, #f1f5f9);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
}
|
|
.form-label {
|
|
display: block;
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
color: #374151;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
.form-control, .form-select {
|
|
width: 100%;
|
|
padding: 0.75rem 1rem;
|
|
border: 2px solid #e2e8f0;
|
|
border-radius: 0.75rem;
|
|
font-size: 0.875rem;
|
|
transition: all 0.2s ease;
|
|
}
|
|
.form-control:focus, .form-select:focus {
|
|
outline: none;
|
|
border-color: #005696;
|
|
box-shadow: 0 0 0 3px rgba(0, 86, 150, 0.1);
|
|
}
|
|
.hh-btn-primary {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.75rem 1.5rem;
|
|
background: #005696;
|
|
color: white;
|
|
border-radius: 0.75rem;
|
|
font-weight: 600;
|
|
transition: all 0.2s ease;
|
|
border: none;
|
|
cursor: pointer;
|
|
}
|
|
.hh-btn-primary:hover {
|
|
background: #007bbd;
|
|
}
|
|
.hh-btn-secondary {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.75rem 1.5rem;
|
|
background: white;
|
|
color: #64748b;
|
|
border: 2px solid #e2e8f0;
|
|
border-radius: 0.75rem;
|
|
font-weight: 600;
|
|
transition: all 0.2s ease;
|
|
}
|
|
.hh-btn-secondary:hover {
|
|
background: #f1f5f9;
|
|
border-color: #005696;
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="px-6 py-4">
|
|
<!-- Page Header -->
|
|
<div class="page-header-gradient">
|
|
<div class="flex justify-between items-center">
|
|
<div>
|
|
<h1 class="text-2xl font-bold">{% if is_create %}{% trans "Create Government Ticket" %}{% else %}{% trans "Edit Government Ticket" %}{% endif %}</h1>
|
|
<p class="text-blue-100 text-sm">{% if is_create %}{% trans "Create a new ticket from a government source" %}{% else %}{% trans "Update ticket information" %}{% endif %}</p>
|
|
</div>
|
|
<div class="flex gap-2">
|
|
<a href="{% url 'complaints:government_ticket_list' %}" class="hh-btn hh-btn-secondary">
|
|
<i data-lucide="arrow-left" class="w-4 h-4"></i>{% trans "Back to List" %}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<form method="post" class="space-y-6">
|
|
{% csrf_token %}
|
|
|
|
{% if form.non_field_errors %}
|
|
<div class="bg-red-50 border-2 border-red-200 rounded-xl p-4">
|
|
<div class="flex items-center gap-2 text-red-700 font-semibold mb-2">
|
|
<i data-lucide="alert-circle" class="w-5 h-5"></i>
|
|
{% trans "Please correct the errors below" %}
|
|
</div>
|
|
<ul class="text-sm text-red-600 list-disc list-inside">
|
|
{% for error in form.non_field_errors %}
|
|
<li>{{ error }}</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if form.errors and not form.non_field_errors %}
|
|
<div class="bg-red-50 border-2 border-red-200 rounded-xl p-4">
|
|
<div class="flex items-center gap-2 text-red-700 font-semibold">
|
|
<i data-lucide="alert-circle" class="w-5 h-5"></i>
|
|
{% trans "Please correct the highlighted fields below" %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
<!-- Source & Ticket Info -->
|
|
<div class="form-section">
|
|
<div class="form-section-header">
|
|
<i data-lucide="building-2" class="w-5 h-5 text-navy"></i>
|
|
<h5 class="text-lg font-semibold text-gray-800">{% trans "Source & Ticket Info" %}</h5>
|
|
</div>
|
|
<div class="p-6 space-y-4">
|
|
<div>
|
|
<label class="form-label">{{ form.source.label }} <span class="text-red-500">*</span></label>
|
|
{{ form.source }}
|
|
{% if form.source.errors %}
|
|
<p class="mt-1 text-sm text-red-600">{{ form.source.errors }}</p>
|
|
{% endif %}
|
|
</div>
|
|
<div>
|
|
<label class="form-label">{{ form.ticket_number.label }} <span class="text-red-500">*</span></label>
|
|
{{ form.ticket_number }}
|
|
{% if form.ticket_number.errors %}
|
|
<p class="mt-1 text-sm text-red-600">{{ form.ticket_number.errors }}</p>
|
|
{% endif %}
|
|
</div>
|
|
<div>
|
|
<label class="form-label">{{ form.status.label }}</label>
|
|
{{ form.status }}
|
|
{% if form.status.errors %}
|
|
<p class="mt-1 text-sm text-red-600">{{ form.status.errors }}</p>
|
|
{% endif %}
|
|
</div>
|
|
<div>
|
|
<label class="form-label">{{ form.received_date.label }} <span class="text-red-500">*</span></label>
|
|
{{ form.received_date }}
|
|
{% if form.received_date.errors %}
|
|
<p class="mt-1 text-sm text-red-600">{{ form.received_date.errors }}</p>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Complainant Info -->
|
|
<div class="form-section">
|
|
<div class="form-section-header">
|
|
<i data-lucide="user" class="w-5 h-5 text-navy"></i>
|
|
<h5 class="text-lg font-semibold text-gray-800">{% trans "Complainant Information" %}</h5>
|
|
</div>
|
|
<div class="p-6 space-y-4">
|
|
<div>
|
|
<label class="form-label">{{ form.complainant_name.label }} <span class="text-red-500">*</span></label>
|
|
{{ form.complainant_name }}
|
|
{% if form.complainant_name.errors %}
|
|
<p class="mt-1 text-sm text-red-600">{{ form.complainant_name.errors }}</p>
|
|
{% endif %}
|
|
</div>
|
|
<div>
|
|
<label class="form-label">{{ form.national_id.label }}</label>
|
|
{{ form.national_id }}
|
|
</div>
|
|
<div>
|
|
<label class="form-label">{{ form.contact_number.label }}</label>
|
|
{{ form.contact_number }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Location & Section -->
|
|
<div class="form-section">
|
|
<div class="form-section-header">
|
|
<i data-lucide="map-pin" class="w-5 h-5 text-navy"></i>
|
|
<h5 class="text-lg font-semibold text-gray-800">{% trans "Location & Section" %}</h5>
|
|
</div>
|
|
<div class="p-6 space-y-4">
|
|
<div>
|
|
<label for="id_location" class="form-label">{% trans "Location" %}</label>
|
|
<select class="form-control" id="id_location" name="location">
|
|
<option value="">{% trans "Select Location" %}</option>
|
|
</select>
|
|
</div>
|
|
<div id="main_section_container" style="display: none;">
|
|
<label for="id_main_section" class="form-label">{% trans "Main Section" %}</label>
|
|
<select class="form-control" id="id_main_section" name="main_section">
|
|
<option value="">{% trans "Select Main Section" %}</option>
|
|
</select>
|
|
</div>
|
|
<div id="subsection_container" style="display: none;">
|
|
<label for="id_subsection" class="form-label">{% trans "Subsection" %}</label>
|
|
<select class="form-control" id="id_subsection" name="subsection">
|
|
<option value="">{% trans "Select Subsection" %}</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Assignment -->
|
|
<div class="form-section">
|
|
<div class="form-section-header">
|
|
<i data-lucide="user-check" class="w-5 h-5 text-navy"></i>
|
|
<h5 class="text-lg font-semibold text-gray-800">{% trans "Assignment" %}</h5>
|
|
</div>
|
|
<div class="p-6 space-y-4">
|
|
<div>
|
|
<label class="form-label">{{ form.assigned_to.label }}</label>
|
|
{{ form.assigned_to }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Content -->
|
|
<div class="form-section">
|
|
<div class="form-section-header">
|
|
<i data-lucide="file-text" class="w-5 h-5 text-navy"></i>
|
|
<h5 class="text-lg font-semibold text-gray-800">{% trans "Ticket Content" %}</h5>
|
|
</div>
|
|
<div class="p-6 space-y-4">
|
|
<div>
|
|
<label class="form-label">{{ form.classification.label }}</label>
|
|
{{ form.classification }}
|
|
{% if form.classification.errors %}
|
|
<p class="mt-1 text-sm text-red-600">{{ form.classification.errors }}</p>
|
|
{% endif %}
|
|
</div>
|
|
<div>
|
|
<label class="form-label">{{ form.content.label }} <span class="text-red-500">*</span></label>
|
|
{{ form.content }}
|
|
{% if form.content.errors %}
|
|
<p class="mt-1 text-sm text-red-600">{{ form.content.errors }}</p>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Actions -->
|
|
<div class="flex gap-3 pt-4">
|
|
<button type="submit" class="hh-btn hh-btn-primary">
|
|
<i data-lucide="save" class="w-4 h-4"></i>
|
|
{% if is_create %}{% trans "Create Ticket" %}{% else %}{% trans "Update Ticket" %}{% endif %}
|
|
</button>
|
|
<a href="{% url 'complaints:government_ticket_list' %}" class="hh-btn hh-btn-secondary">
|
|
<i data-lucide="x" class="w-4 h-4"></i>{% trans "Cancel" %}
|
|
</a>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Style form inputs (except the cascading selects which are manual)
|
|
const inputs = document.querySelectorAll('input, textarea');
|
|
inputs.forEach(input => {
|
|
if (!input.classList.contains('form-control')) {
|
|
input.classList.add('form-control');
|
|
}
|
|
});
|
|
document.querySelectorAll('select:not(#id_location):not(#id_main_section):not(#id_subsection)').forEach(sel => {
|
|
if (!sel.classList.contains('form-select') && !sel.classList.contains('form-control')) {
|
|
sel.classList.add('form-control');
|
|
}
|
|
});
|
|
|
|
// Load locations on page load
|
|
loadLocations();
|
|
|
|
// Pre-select existing values on edit
|
|
{% if form.instance and form.instance.pk %}
|
|
const existingLocation = '{{ form.instance.location_id|default:"" }}';
|
|
const existingMainSection = '{{ form.instance.main_section_id|default:"" }}';
|
|
const existingSubsection = '{{ form.instance.subsection_id|default:"" }}';
|
|
{% endif %}
|
|
|
|
// Location change -> load main sections
|
|
document.getElementById('id_location').addEventListener('change', function() {
|
|
loadMainSections(this.value);
|
|
});
|
|
|
|
// Main section change -> load subsections
|
|
document.getElementById('id_main_section').addEventListener('change', function() {
|
|
loadSubsections(document.getElementById('id_location').value, this.value);
|
|
});
|
|
|
|
function loadLocations() {
|
|
const locationSelect = document.getElementById('id_location');
|
|
locationSelect.classList.add('select-loading');
|
|
|
|
fetch('/organizations/dropdowns/locations/')
|
|
.then(r => {
|
|
if (!r.ok) throw new Error('HTTP ' + r.status);
|
|
return r.json();
|
|
})
|
|
.then(data => {
|
|
locationSelect.innerHTML = '<option value="">{% trans "Select Location" %}</option>';
|
|
if (Array.isArray(data) && data.length > 0) {
|
|
data.forEach(loc => {
|
|
const opt = document.createElement('option');
|
|
opt.value = loc.id;
|
|
opt.textContent = loc.name;
|
|
locationSelect.appendChild(opt);
|
|
});
|
|
}
|
|
{% if form.instance and form.instance.pk %}
|
|
if (existingLocation) {
|
|
locationSelect.value = existingLocation;
|
|
loadMainSections(existingLocation);
|
|
}
|
|
{% endif %}
|
|
})
|
|
.catch(err => {
|
|
console.error('Failed to load locations:', err);
|
|
locationSelect.innerHTML = '<option value="">{% trans "Error loading locations" %}</option>';
|
|
})
|
|
.finally(() => locationSelect.classList.remove('select-loading'));
|
|
}
|
|
|
|
function loadMainSections(locationId) {
|
|
const mainSectionSelect = document.getElementById('id_main_section');
|
|
const mainSectionContainer = document.getElementById('main_section_container');
|
|
const subsectionContainer = document.getElementById('subsection_container');
|
|
|
|
mainSectionSelect.innerHTML = '<option value="">{% trans "Select Main Section" %}</option>';
|
|
document.getElementById('id_subsection').innerHTML = '<option value="">{% trans "Select Subsection" %}</option>';
|
|
|
|
if (!locationId) {
|
|
mainSectionContainer.style.display = 'none';
|
|
subsectionContainer.style.display = 'none';
|
|
return;
|
|
}
|
|
|
|
mainSectionSelect.classList.add('select-loading');
|
|
|
|
fetch('{% url "organizations:ajax_main_sections" %}?location_id=' + locationId)
|
|
.then(r => r.json())
|
|
.then(data => {
|
|
const sections = data.sections || [];
|
|
sections.forEach(section => {
|
|
const opt = document.createElement('option');
|
|
opt.value = section.id;
|
|
opt.textContent = section.name;
|
|
mainSectionSelect.appendChild(opt);
|
|
});
|
|
|
|
mainSectionContainer.style.display = sections.length ? 'block' : 'none';
|
|
if (sections.length === 0) {
|
|
subsectionContainer.style.display = 'none';
|
|
}
|
|
{% if form.instance and form.instance.pk %}
|
|
if (existingMainSection) {
|
|
mainSectionSelect.value = existingMainSection;
|
|
loadSubsections(existingLocation, existingMainSection);
|
|
}
|
|
{% endif %}
|
|
})
|
|
.catch(err => console.error('Failed to load main sections:', err))
|
|
.finally(() => mainSectionSelect.classList.remove('select-loading'));
|
|
}
|
|
|
|
function loadSubsections(locationId, mainSectionId) {
|
|
const subsectionSelect = document.getElementById('id_subsection');
|
|
const subsectionContainer = document.getElementById('subsection_container');
|
|
|
|
subsectionSelect.innerHTML = '<option value="">{% trans "Select Subsection" %}</option>';
|
|
|
|
if (!locationId || !mainSectionId) {
|
|
subsectionContainer.style.display = 'none';
|
|
return;
|
|
}
|
|
|
|
subsectionSelect.classList.add('select-loading');
|
|
|
|
fetch('{% url "organizations:ajax_subsections" %}?location_id=' + locationId + '&main_section_id=' + mainSectionId)
|
|
.then(r => r.json())
|
|
.then(data => {
|
|
const subsections = data.subsections || [];
|
|
subsections.forEach(sub => {
|
|
const opt = document.createElement('option');
|
|
opt.value = sub.internal_id || sub.id;
|
|
opt.textContent = sub.name;
|
|
subsectionSelect.appendChild(opt);
|
|
});
|
|
|
|
subsectionContainer.style.display = subsections.length ? 'block' : 'none';
|
|
{% if form.instance and form.instance.pk %}
|
|
if (existingSubsection) {
|
|
subsectionSelect.value = existingSubsection;
|
|
}
|
|
{% endif %}
|
|
})
|
|
.catch(err => console.error('Failed to load subsections:', err))
|
|
.finally(() => subsectionSelect.classList.remove('select-loading'));
|
|
}
|
|
});
|
|
</script>
|
|
{% endblock %}
|