{% load i18n %}
{% load static %}
<!DOCTYPE html>
<html lang="{{ LANGUAGE_CODE|default:'en' }}" dir="{% if LANGUAGE_CODE == 'ar' %}rtl{% else %}ltr{% endif %}">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% trans "Submit Explanation" %} - PX360</title>
    <link rel="stylesheet" href="{% static 'dist/css/tailwind.css' %}">
    <link rel="stylesheet" href="{% static 'vendor/fonts/noto-kufi-arabic/arabic.css' %}">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
        body { font-family: 'Inter', 'Noto Kufi Arabic', sans-serif; }
        [dir="rtl"] body,
        [dir="rtl"] input,
        [dir="rtl"] textarea,
        [dir="rtl"] select,
        [dir="rtl"] button {
            font-family: 'Noto Kufi Arabic', sans-serif;
        }

        .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;
            justify-content: 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;
            width: 100%;
        }
        .hh-btn-primary:hover {
            background: #007bbd;
        }
    </style>
</head>
<body class="bg-light min-h-screen flex items-center py-8 px-4">
    <div class="w-full max-w-3xl mx-auto">
        <!-- Gradient Header -->
        <div class="page-header-gradient text-center">
            <div class="inline-flex items-center justify-center w-16 h-16 bg-white/20 rounded-2xl mb-4">
                <i data-lucide="message-square" class="w-8 h-8"></i>
            </div>
            <h1 class="text-2xl font-bold">{% trans "Submit Your Explanation" %}</h1>
            <p class="text-white/80 mt-1">{% trans "PX360 Complaint Management System" %}</p>
        </div>

        <!-- Main Form Section -->
        <div class="form-section">
            {% if error %}
            <div class="bg-red-50 border-l-4 border-red-500 p-4 mb-6 rounded-r-lg">
                <div class="flex items-center gap-3">
                    <i data-lucide="alert-circle" class="w-5 h-5 text-red-500 flex-shrink-0"></i>
                    <p class="text-red-700 font-medium">{{ error }}</p>
                </div>
            </div>
            {% endif %}

            <!-- Staff Information -->
            {% if explanation.staff %}
            <div class="bg-navy p-6 text-white rounded-t-lg -mx-6 -mt-6 mb-6">
                <h2 class="text-sm font-semibold text-blue-200 mb-3 flex items-center gap-2">
                    <i data-lucide="user" class="w-4 h-4"></i>
                    {% trans "Requested From" %}
                </h2>
                <div class="flex items-center gap-4">
                    <div class="w-14 h-14 bg-white/20 rounded-full flex items-center justify-center text-2xl font-bold">
                        {{ explanation.staff.first_name|first }}{{ explanation.staff.last_name|first }}
                    </div>
                    <div class="flex-1">
                        <h3 class="text-xl font-bold">{{ explanation.staff.first_name }} {{ explanation.staff.last_name }}</h3>
                        <div class="flex flex-wrap items-center gap-x-4 gap-y-1 mt-1 text-sm text-blue-100">
                            <span class="flex items-center gap-1">
                                <i data-lucide="id-card" class="w-4 h-4"></i>
                                {% trans "ID:" %} {{ explanation.staff.employee_id }}
                            </span>
                            {% if explanation.staff.department %}
                            <span class="flex items-center gap-1">
                                <i data-lucide="building-2" class="w-4 h-4"></i>
                                {{ explanation.staff.department.name }}
                            </span>
                            {% endif %}
                            {% if explanation.staff.job_title %}
                            <span class="flex items-center gap-1">
                                <i data-lucide="briefcase" class="w-4 h-4"></i>
                                {{ explanation.staff.job_title }}
                            </span>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
            {% endif %}

            <!-- Original Staff Explanation (shown to manager during escalation) -->
            {% if original_explanation %}
            <div class="bg-orange-50 border border-orange-200 rounded-xl p-6 mb-6">
                <div class="flex items-center gap-2 mb-4">
                    <div class="w-8 h-8 bg-orange-500 rounded-full flex items-center justify-center">
                        <i data-lucide="arrow-up-circle" class="w-4 h-4 text-white"></i>
                    </div>
                    <h2 class="text-lg font-bold text-orange-700">{% trans "Original Staff Explanation" %}</h2>
                </div>
                <div class="bg-white rounded-xl p-4 border border-orange-200">
                    <div class="flex items-center gap-2 mb-3 pb-3 border-b border-orange-100">
                        <div class="w-8 h-8 bg-slate-200 rounded-full flex items-center justify-center text-sm font-bold text-slate">
                            {{ original_explanation.staff.first_name|first }}{{ original_explanation.staff.last_name|first }}
                        </div>
                        <div>
                            <p class="font-semibold text-navy text-sm">{{ original_explanation.staff.first_name }} {{ original_explanation.staff.last_name }}</p>
                            <p class="text-xs text-slate">{% trans "Submitted:" %} {{ original_explanation.responded_at|date:"Y-m-d H:i" }}</p>
                        </div>
                    </div>
                    <div class="text-slate text-sm leading-relaxed">
                        {{ original_explanation.explanation|linebreaksbr }}
                    </div>
                    {% if original_explanation.acceptance_notes %}
                    <div class="mt-3 pt-3 border-t border-orange-100">
                        <p class="text-xs font-semibold text-orange-600 mb-1">{% trans "Escalation Notes:" %}</p>
                        <p class="text-xs text-slate">{{ original_explanation.acceptance_notes }}</p>
                    </div>
                    {% endif %}
                </div>
                <div class="mt-4 bg-orange-100 rounded-lg p-3">
                    <p class="text-sm text-orange-800 flex items-start gap-2">
                        <i data-lucide="info" class="w-4 h-4 mt-0.5 flex-shrink-0"></i>
                        <span>{% trans "As the manager, please review the above explanation from your team member and provide your own perspective on this complaint." %}</span>
                    </p>
                </div>
            </div>
            {% endif %}

            <!-- Complaint Details -->
            <div class="bg-light/50 border border-slate-200 rounded-xl p-6 mb-6">
                <h2 class="text-lg font-bold text-navy mb-4 flex items-center gap-2">
                    <i data-lucide="file-text" class="w-5 h-5 text-blue"></i>
                    {% trans "Complaint Details" %}
                </h2>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div class="flex items-center gap-2">
                        <span class="text-slate text-sm">{% trans "Reference:" %}</span>
                        <span class="font-bold text-navy">#{{ complaint.reference_number|slice:":8" }}</span>
                    </div>
                    <div class="flex items-center gap-2">
                        <span class="text-slate text-sm">{% trans "Title:" %}</span>
                        <span class="font-bold text-navy">{{ complaint.title }}</span>
                    </div>
                    {% if complaint.patient %}
                    <div class="md:col-span-2 flex items-center gap-2">
                        <span class="text-slate text-sm">{% trans "Patient:" %}</span>
                        <span class="font-bold text-navy">{{ complaint.patient.get_full_name }}</span>
                        {% if complaint.patient.mrn %}
                        <span class="text-slate text-sm">(MRN: {{ complaint.patient.mrn }})</span>
                        {% endif %}
                    </div>
                    {% endif %}
                </div>
                <div class="mt-4 pt-4 border-t border-slate-200">
                    <span class="text-slate text-sm">{% trans "Description:" %}</span>
                    <p class="mt-2 text-slate leading-relaxed">{{ complaint.short_description_en|linebreaksbr }}</p>
                </div>
            </div>

            <!-- Action Choice -->
            <div id="action-choice">
                <h2 class="text-lg font-bold text-navy mb-2 flex items-center gap-2">
                    <i data-lucide="git-branch" class="w-5 h-5" style="color:#005696"></i>
                    {% trans "How would you like to respond?" %}
                </h2>
                <p class="text-sm mb-6" style="color:#475569">
                    {% trans "You can submit your reply directly, or investigate first by sending questions to the accused staff member(s)." %}
                </p>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <button type="button" onclick="showReplyForm()" class="flex flex-col items-center gap-3 p-6 border-2 rounded-xl transition cursor-pointer group" style="border-color:#e2e8f0" onmouseover="this.style.borderColor='#3b82f6';this.style.backgroundColor='#eff6ff'" onmouseout="this.style.borderColor='#e2e8f0';this.style.backgroundColor='transparent'">
                        <div class="w-14 h-14 rounded-full flex items-center justify-center transition" style="background:#dbeafe">
                            <i data-lucide="message-square" class="w-7 h-7" style="color:#2563eb"></i>
                        </div>
                        <span class="font-bold text-lg" style="color:#005696">{% trans "Submit Reply" %}</span>
                        <span class="text-xs text-center" style="color:#64748b">{% trans "Write your explanation and submit directly for manager review" %}</span>
                    </button>
                    {% if accused_staff %}
                    <button type="button" onclick="goToInvestigation()" class="flex flex-col items-center gap-3 p-6 border-2 rounded-xl transition cursor-pointer group" style="border-color:#e2e8f0" onmouseover="this.style.borderColor='#f59e0b';this.style.backgroundColor='#fffbeb'" onmouseout="this.style.borderColor='#e2e8f0';this.style.backgroundColor='transparent'">
                        <div class="w-14 h-14 rounded-full flex items-center justify-center transition" style="background:#fef3c7">
                            <i data-lucide="search" class="w-7 h-7" style="color:#d97706"></i>
                        </div>
                        <span class="font-bold text-lg" style="color:#005696">{% trans "Investigate First" %}</span>
                        <span class="text-xs text-center" style="color:#64748b">{% trans "Send questions to accused staff, review their answers, then write your reply" %}</span>
                    </button>
                    {% else %}
                    <div class="flex flex-col items-center gap-3 p-6 border-2 rounded-xl opacity-50" style="border-color:#f1f5f9;cursor:not-allowed">
                        <div class="w-14 h-14 rounded-full flex items-center justify-center" style="background:#f1f5f9">
                            <i data-lucide="search" class="w-7 h-7" style="color:#9ca3af"></i>
                        </div>
                        <span class="font-bold text-lg" style="color:#9ca3af">{% trans "Investigate First" %}</span>
                        <span class="text-xs text-center" style="color:#9ca3af">{% trans "No accused staff members linked to this complaint" %}</span>
                    </div>
                    {% endif %}
                </div>
            </div>

            <hr class="my-6" style="border-color:#e2e8f0">

            <!-- Form -->
            <div id="reply-section" style="display:none">
            <form method="post" enctype="multipart/form-data" class="space-y-6" data-loading data-loading-text="{% trans 'Submitting...' %}">
                {% csrf_token %}

                <!-- Explanation Field -->
                <div>
                    <label for="explanation" class="form-label">
                        {% trans "Your Explanation" %} <span class="text-red-500">*</span>
                    </label>
                    <p class="text-slate text-sm mb-3">
                        {% trans "Please provide your perspective about the complaint mentioned above. Your explanation will help us understand the situation better." %}
                    </p>
                    <textarea
                        id="explanation"
                        name="explanation"
                        rows="6"
                        required
                        class="form-control resize-none"
                        placeholder="{% trans 'Write your explanation here...' %}"
                    ></textarea>
                </div>

                <!-- Attachments -->
                <div>
                    <label for="attachments" class="form-label">
                        {% trans "Attachments (Optional)" %}
                    </label>
                    <p class="text-slate text-sm mb-3">
                        {% trans "You can attach relevant documents, images, or other files to support your explanation." %}
                    </p>
                    <div class="relative">
                        <input
                            type="file"
                            id="attachments"
                            name="attachments"
                            multiple
                            class="block w-full text-sm text-slate file:mr-4 file:py-2 file:px-4 file:rounded-xl file:border-0 file:text-sm file:font-semibold file:bg-light file:text-navy hover:file:bg-slate-100 file:transition cursor-pointer border-2 border-slate-200 rounded-xl"
                        >
                    </div>
                    <p class="text-xs text-slate mt-2">
                        {% trans "Accepted file types: PDF, DOC, DOCX, JPG, PNG, etc. Maximum file size: 10MB." %}
                    </p>
                </div>

                <!-- Info Alert -->
                <div class="bg-blue-50 border border-blue-200 rounded-xl p-4">
                    <div class="flex items-start gap-3">
                        <i data-lucide="info" class="w-5 h-5 text-blue flex-shrink-0 mt-0.5"></i>
                        <div>
                            <p class="font-semibold text-navy text-sm">{% trans "Important Note:" %}</p>
                            <p class="text-slate text-sm mt-1">
                                {% trans "This link can only be used once. After submitting your explanation, it will expire and cannot be used again." %}
                            </p>
                        </div>
                    </div>
                </div>

                <!-- Submit Button -->
                <button type="submit" class="hh-btn hh-btn-primary py-4 text-lg">
                    <i data-lucide="send" class="w-5 h-5"></i>
                    {% trans "Submit Explanation" %}
                </button>
            </form>
            </div>

            <!-- Footer -->
            <div class="mt-6 pt-4 border-t border-slate-100 text-center">
                <p class="text-slate text-xs">{% trans "PX360 Complaint Management System" %}</p>
            </div>
        </div>

        <!-- Security Note -->
        <div class="text-center mt-6">
            <div class="inline-flex items-center gap-2 text-slate text-xs">
                <i data-lucide="shield-check" class="w-4 h-4"></i>
                <span>{% trans "Secure token-based submission" %}</span>
            </div>
        </div>
    </div>

    <script>
        lucide.createIcons();

        function showReplyForm() {
            document.getElementById('action-choice').style.display = 'none';
            document.getElementById('reply-section').style.display = 'block';
        }

        function goToInvestigation() {
            window.location.href = "{{ investigate_url }}";
        }
    </script>
</body>
</html>
