HH/templates/complaints/government_ticket_form.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 "Department & Section" %}</h5>
                </div>
                <div class="p-6 space-y-4">
                    <div>
                        <label for="id_department" class="form-label">{% trans "Department" %}</label>
                        {{ form.department }}
                    </div>
                    <div>
                        <label for="id_section" class="form-label">{% trans "Section" %}</label>
                        {{ form.section }}
                    </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_department):not(#id_section)').forEach(sel => {
        if (!sel.classList.contains('form-select') && !sel.classList.contains('form-control')) {
            sel.classList.add('form-control');
        }
    });

    // Department → Section cascading dropdown
    const departmentSelect = document.getElementById('id_department');
    const sectionSelect = document.getElementById('id_section');

    if (departmentSelect) {
        departmentSelect.addEventListener('change', function() {
            const deptId = this.value;
            if (!sectionSelect) return;
            sectionSelect.innerHTML = '<option value="">{% trans "Select Section" %}</option>';
            if (!deptId) return;
            fetch('/organizations/api/sections/?department=' + deptId)
                .then(r => r.json())
                .then(data => {
                    const sections = data.results || data;
                    sections.forEach(sec => {
                        const opt = document.createElement('option');
                        opt.value = sec.id;
                        opt.textContent = sec.name_en || sec.name || sec.display_name;
                        sectionSelect.appendChild(opt);
                    });
                })
                .catch(err => console.error('Failed to load sections:', err));
        });
    }

    {% if form.instance and form.instance.pk %}
    if (departmentSelect && departmentSelect.value) {
        departmentSelect.dispatchEvent(new Event('change'));
    }
    {% endif %}
});
</script>
{% endblock %}