{% extends 'layouts/base.html' %}
{% load i18n %}

{% block title %}{{ title }} - 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: #fff;
    border: 2px solid #e2e8f0;
    border-radius: 1rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    transition: all 0.3s ease;
}
.form-section:hover {
    border-color: #005696;
    box-shadow: 0 4px 12px rgba(0, 86, 150, 0.1);
}

.form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: #1e293b;
    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;
}

.invalid-feedback {
    color: #dc2626;
    font-size: 0.875rem;
    margin-top: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
</style>
{% endblock %}

{% block content %}
<div class="p-6 max-w-4xl mx-auto">
    <!-- Back Button -->
    <div class="mb-6">
        <a href="{% url 'complaints:complaint_detail' pk=complaint.pk %}" class="hh-btn hh-btn-secondary">
            <i data-lucide="arrow-left" class="w-4 h-4"></i> {% trans "Back to Complaint" %}
        </a>
    </div>

    <!-- Gradient Header -->
    <div class="page-header-gradient">
        <h1 class="text-2xl font-bold">{{ title }}</h1>
        <p class="text-white/80 mt-1">
            {% trans "Complaint:" %} <span class="font-medium">{{ complaint.reference_number }}</span> - {{ complaint.title|truncatechars:50 }}
        </p>
    </div>

    <!-- Form Section -->
    <div class="form-section">
        <form method="post" class="space-y-6">
            {% csrf_token %}
            
            <!-- Staff Member -->
            <div>
                <label for="{{ form.staff.id_for_label }}" class="form-label">
                    {% trans "Staff Member" %} <span class="text-red-500">*</span>
                </label>
                <select name="{{ form.staff.name }}" id="{{ form.staff.id_for_label }}" class="form-select" data-tomselect required>
                    <option value="">{% trans "Select Staff Member" %}</option>
                    {% for choice in form.staff.field.choices %}
                    <option value="{{ choice.0 }}" {% if form.staff.value == choice.0 %}selected{% endif %}>{{ choice.1 }}</option>
                    {% endfor %}
                </select>
                {% if form.staff.errors %}
                <div class="invalid-feedback">
                    <i data-lucide="alert-circle" class="w-4 h-4"></i>
                    {{ form.staff.errors }}
                </div>
                {% endif %}
                <p class="text-sm text-gray-500 mt-2">{% trans "Select the staff member involved in this complaint." %}</p>
            </div>

            <!-- Role -->
            <div>
                <label for="{{ form.role.id_for_label }}" class="form-label">
                    {% trans "Role" %} <span class="text-red-500">*</span>
                </label>
                <select name="{{ form.role.name }}" id="{{ form.role.id_for_label }}" class="form-select" required>
                    <option value="">{% trans "Select Role" %}</option>
                    {% for choice in form.role.field.choices %}
                    <option value="{{ choice.0 }}" {% if form.role.value == choice.0 %}selected{% endif %}>{{ choice.1 }}</option>
                    {% endfor %}
                </select>
                {% if form.role.errors %}
                <div class="invalid-feedback">
                    <i data-lucide="alert-circle" class="w-4 h-4"></i>
                    {{ form.role.errors }}
                </div>
                {% endif %}
                <div class="mt-3 bg-gray-50 rounded-xl p-4 text-sm text-gray-600 space-y-2">
                    <p class="flex items-start gap-2">
                        <span class="font-semibold text-[#005696] min-w-[120px]">{% trans "Accused/Involved:" %}</span>
                        <span>{% trans "Staff member involved in the incident" %}</span>
                    </p>
                    <p class="flex items-start gap-2">
                        <span class="font-semibold text-[#005696] min-w-[120px]">{% trans "Witness:" %}</span>
                        <span>{% trans "Staff member who witnessed the incident" %}</span>
                    </p>
                    <p class="flex items-start gap-2">
                        <span class="font-semibold text-[#005696] min-w-[120px]">{% trans "Responsible:" %}</span>
                        <span>{% trans "Staff responsible for resolving the complaint" %}</span>
                    </p>
                    <p class="flex items-start gap-2">
                        <span class="font-semibold text-[#005696] min-w-[120px]">{% trans "Investigator:" %}</span>
                        <span>{% trans "Staff investigating the complaint" %}</span>
                    </p>
                    <p class="flex items-start gap-2">
                        <span class="font-semibold text-[#005696] min-w-[120px]">{% trans "Support:" %}</span>
                        <span>{% trans "Supporting the resolution process" %}</span>
                    </p>
                    <p class="flex items-start gap-2">
                        <span class="font-semibold text-[#005696] min-w-[120px]">{% trans "PX Employee:" %}</span>
                        <span>{% trans "Coordinating between departments" %}</span>
                    </p>
                </div>
            </div>

            <!-- Notes -->
            <div>
                <label for="{{ form.notes.id_for_label }}" class="form-label">
                    {% trans "Notes" %} <span class="text-gray-500 font-normal">({% trans "Optional" %})</span>
                </label>
                <textarea name="{{ form.notes.name }}" id="{{ form.notes.id_for_label }}" rows="3" class="form-control resize-none" placeholder="{% trans 'Enter any additional notes...' %}">{{ form.notes.value|default:'' }}</textarea>
                {% if form.notes.errors %}
                <div class="invalid-feedback">
                    <i data-lucide="alert-circle" class="w-4 h-4"></i>
                    {{ form.notes.errors }}
                </div>
                {% endif %}
            </div>

            <!-- Actions -->
            <div class="flex items-center gap-4 pt-6 border-t border-gray-100">
                <button type="submit" class="hh-btn hh-btn-primary">
                    <i data-lucide="save" class="w-4 h-4"></i>
                    {% trans "Save" %}
                </button>
                <a href="{% url 'complaints:complaint_detail' pk=complaint.pk %}" class="hh-btn hh-btn-secondary">
                    <i data-lucide="x" class="w-4 h-4"></i>
                    {% trans "Cancel" %}
                </a>
            </div>
        </form>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        lucide.createIcons();
    });
</script>
{% endblock %}
