{% 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 %}