{% extends "layouts/base.html" %}
{% load i18n static %}

{% block title %}{% trans "Appreciation Detail" %} - PX360{% endblock %}

{% block extra_css %}
<style>
    .tab-active { border-bottom: 3px solid #005696; color: #005696; font-weight: 700; }
    .tab-inactive { color: #64748b; font-weight: 500; }
    .tab-inactive:hover { color: #005696; }
</style>
{% endblock %}

{% block content %}
<header class="mb-6">
    <div class="flex items-center gap-2 text-sm text-slate mb-2">
        <a href="{% url 'appreciation:appreciation_list' %}" class="hover:text-navy">{% trans "Appreciations" %}</a>
        <i data-lucide="chevron-right" class="w-4 h-4"></i>
        <span class="font-bold text-navy">{% trans "Detail" %}</span>
        <span class="px-2.5 py-1 rounded-full text-[10px] font-bold uppercase
            {% if appreciation.status == 'draft' %}bg-amber-100 text-amber-700
            {% elif appreciation.status == 'activated' %}bg-blue-100 text-blue-700
            {% elif appreciation.status == 'sent' %}bg-green-100 text-green-700
            {% else %}bg-slate-100 text-slate-600{% endif %}">
            {{ appreciation.get_status_display }}
        </span>
    </div>
    <div class="flex items-center justify-between">
        <h1 class="text-2xl font-bold text-navy flex items-center gap-3">
            <i data-lucide="heart" class="w-7 h-7 text-pink-500"></i>
            {% trans "Appreciation Detail" %}
        </h1>
        <div class="flex items-center gap-3">
            <span class="text-xs text-slate-400">
                {{ appreciation.created_at|date:"Y-m-d H:i" }} &mdash; {{ appreciation.hospital.get_localized_name }}
            </span>
            {% comment %} {% if appreciation.activated_at %}
            <a href="{% url 'appreciation:appreciation_letter' appreciation.pk %}"
               class="inline-flex items-center gap-1.5 px-3 py-2 border border-slate-200 rounded-lg text-xs font-semibold text-slate hover:border-navy hover:text-navy transition">
                <i data-lucide="file-text" class="w-3.5 h-3.5"></i>{% trans "Letter" %}
            </a>
            <a href="{% url 'appreciation:appreciation_certificate' appreciation.pk %}"
               class="inline-flex items-center gap-1.5 px-3 py-2 bg-navy text-white rounded-lg text-xs font-semibold hover:bg-blue transition">
                <i data-lucide="award" class="w-3.5 h-3.5"></i>{% trans "Certificate" %}
            </a>
            {% endif %} {% endcomment %}
        </div>
    </div>
</header>

<!-- Workflow Stepper -->
{% include "core/workflow_stepper.html" %}

<!-- Next Action Callout -->
{% if can_activate %}
<div class="bg-blue-50 rounded-2xl border border-blue-200 p-4 mb-6 flex items-center justify-between gap-4">
    <div class="flex items-center gap-3">
        <div class="w-9 h-9 rounded-full bg-blue-100 flex items-center justify-center shrink-0"><i data-lucide="zap" class="w-4 h-4 text-blue-600"></i></div>
        <div><p class="text-sm font-bold text-navy">{% trans "Activate this appreciation" %}</p><p class="text-xs text-slate">{% trans "Activate to start the workflow and trigger AI analysis." %}</p></div>
    </div>
    <form method="post" action="{% url 'appreciation:appreciation_activate' pk=appreciation.pk %}" class="inline shrink-0">
        {% csrf_token %}
        <button type="submit" class="px-4 py-2 bg-navy text-white rounded-lg font-bold text-sm hover:bg-blue transition whitespace-nowrap">{% trans "Activate" %}</button>
    </form>
</div>

{% elif can_send %}
<div class="bg-indigo-50 rounded-2xl border border-indigo-200 p-4 mb-6 flex items-center justify-between gap-4">
    <div class="flex items-center gap-3">
        <div class="w-9 h-9 rounded-full bg-indigo-100 flex items-center justify-center shrink-0"><i data-lucide="send" class="w-4 h-4 text-indigo-600"></i></div>
        <div>
            <p class="text-sm font-bold text-navy">{% trans "Ready to send" %}</p>
            <p class="text-xs text-slate">{{ appreciation.department.get_localized_name }}{% if has_recipient %} &mdash; {{ appreciation.get_recipient_name }}{% else %} &mdash; <span class="text-amber-600 font-semibold">{% trans "No staff selected" %}</span>{% endif %}</p>
        </div>
    </div>
    <div class="flex items-center gap-2 shrink-0">
        {% if has_recipient %}
        <button type="button" onclick="openSelectStaffModal()"
                class="px-3 py-2 border border-slate-300 text-slate-600 rounded-lg font-bold text-sm hover:bg-slate-50 transition">{% trans "Change Staff" %}</button>
        {% else %}
        <button type="button" onclick="document.getElementById('selectStaffModal').style.display='flex'"
                class="px-3 py-2 border border-blue-300 text-blue-700 bg-white rounded-lg font-bold text-sm hover:bg-blue-50 transition">{% trans "Select Staff" %}</button>
        {% endif %}
        <button type="button" onclick="document.getElementById('sendModal').style.display='flex'"
                class="px-4 py-2 bg-indigo-600 text-white rounded-lg font-bold text-sm hover:bg-indigo-700 transition whitespace-nowrap">{% trans "Send to Department" %}</button>
    </div>
</div>

{% comment %} {% elif appreciation.sent_at and not appreciation.acknowledged_at %}
<div class="bg-amber-50 rounded-2xl border border-amber-200 p-4 mb-6 flex items-center justify-between gap-4">
    <div class="flex items-center gap-3">
        <div class="w-9 h-9 rounded-full bg-amber-100 flex items-center justify-center shrink-0"><i data-lucide="clock" class="w-4 h-4 text-amber-600"></i></div>
        <div>
            <p class="text-sm font-bold text-navy">{% trans "Awaiting acknowledgment" %}</p>
            <p class="text-xs text-slate">{% trans "Sent on" %} {{ appreciation.sent_at|date:"M d, H:i" }}</p>
            <div class="flex items-center gap-2 mt-1">
                {% if appreciation.dept_response_reminder_sent_at %}
                <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-bold bg-amber-100 text-amber-700">
                    <i data-lucide="check" class="w-3 h-3"></i> {% trans "1st:" %} {{ appreciation.dept_response_reminder_sent_at|date:"M d, H:i" }}
                </span>
                {% endif %}
                {% if appreciation.dept_response_second_reminder_sent_at %}
                <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-bold bg-red-100 text-red-700">
                    <i data-lucide="check" class="w-3 h-3"></i> {% trans "2nd:" %} {{ appreciation.dept_response_second_reminder_sent_at|date:"M d, H:i" }}
                </span>
                {% endif %}
                {% if not appreciation.dept_response_reminder_sent_at %}
                <span class="text-xs text-slate">{% trans "No reminders sent yet" %}</span>
                {% endif %}
            </div>
        </div>
    </div>
    <div class="flex items-center gap-2 shrink-0">
        {% if not appreciation.dept_response_reminder_sent_at %}
        <form method="post" action="{% url 'appreciation:appreciation_send_dept_reminder' appreciation.pk %}" class="inline" onsubmit="return confirm('{% trans "Send 1st reminder to the department champion and manager?" %}')">
            {% csrf_token %}<input type="hidden" name="reminder_type" value="first">
            <button type="submit" class="px-4 py-2 border border-amber-300 text-amber-700 bg-white rounded-lg font-bold text-sm hover:bg-amber-50 transition whitespace-nowrap">{% trans "Send 1st Reminder" %}</button>
        </form>
        {% elif not appreciation.dept_response_second_reminder_sent_at %}
        <form method="post" action="{% url 'appreciation:appreciation_send_dept_reminder' appreciation.pk %}" class="inline" onsubmit="return confirm('{% trans "Send 2nd reminder to the department champion and manager?" %}')">
            {% csrf_token %}<input type="hidden" name="reminder_type" value="second">
            <button type="submit" class="px-4 py-2 border border-red-300 text-red-700 bg-white rounded-lg font-bold text-sm hover:bg-red-50 transition whitespace-nowrap">{% trans "Send 2nd Reminder" %}</button>
        </form>
        {% endif %}
    </div>
</div> {% endcomment %}
{% elif appreciation.sent_at %}
<div class="bg-green-50 rounded-2xl border border-green-200 p-4 mb-6 flex items-center gap-3">
    <div class="w-9 h-9 rounded-full bg-green-100 flex items-center justify-center shrink-0"><i data-lucide="check-circle-2" class="w-4 h-4 text-green-600"></i></div>
    <div>
        <p class="text-sm font-bold text-navy">{% trans "Appreciation sent" %}</p>
        <p class="text-xs text-slate">{% trans "Sent on" %} {{ appreciation.sent_at|date:"Y-m-d H:i" }}</p>
    </div>
</div>
{% endif %}

<nav class="bg-white px-6 flex gap-6 border-b shadow-sm mb-6 rounded-t-2xl">
    <button class="py-4 text-sm tab-active" onclick="switchTab('details')" id="tab-details">{% trans "Details" %}</button>
    {% if appreciation.ai_analysis %}
    <button class="py-4 text-sm tab-inactive" onclick="switchTab('ai')" id="tab-ai">{% trans "AI Analysis" %}</button>
    {% endif %}
    <button class="py-4 text-sm tab-inactive" onclick="switchTab('notes')" id="tab-notes">
        {% trans "Notes" %}
        {% if notes_count %}<span class="ml-1 px-1.5 py-0.5 bg-slate-100 text-slate-600 text-xs rounded-full">{{ notes_count }}</span>{% endif %}
    </button>
</nav>

<main class="grid grid-cols-12 gap-6">
    <div class="col-span-8 space-y-6">

        <div id="panel-details" class="tab-panel">
            <section class="bg-white rounded-2xl p-6 shadow-sm border border-slate-100 mb-6">
                <h3 class="font-bold text-navy mb-4 flex items-center gap-2">
                    <i data-lucide="message-square" class="w-5 h-5 text-emerald-600"></i>
                    {% trans "Appreciation Message" %}
                </h3>
                <p class="text-slate-700 text-sm leading-relaxed">{{ appreciation.message_en|linebreaks }}</p>
                {% if appreciation.message_ar %}
                <div class="mt-4 pt-4 border-t border-slate-100">
                    <p class="text-xs font-bold text-slate uppercase tracking-wider mb-1">{% trans "Arabic" %}</p>
                    <p class="text-slate-700 text-sm leading-relaxed" dir="rtl">{{ appreciation.message_ar|linebreaks }}</p>
                </div>
                {% endif %}
            </section>

            {% if metadata %}
            <section class="bg-white rounded-2xl p-6 shadow-sm border border-slate-100 mb-6">
                <h3 class="font-bold text-navy mb-4 flex items-center gap-2">
                    <i data-lucide="user" class="w-5 h-5 text-blue-600"></i>
                    {% trans "Submitted By" %}
                </h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    {% if metadata.submitted_by_name %}
                    <div>
                        <p class="text-[10px] font-bold text-slate uppercase tracking-wider mb-1">{% trans "Name" %}</p>
                        <p class="text-sm font-semibold text-navy">{{ metadata.submitted_by_name }}</p>
                    </div>
                    {% endif %}
                    {% if metadata.submitted_by_phone %}
                    <div>
                        <p class="text-[10px] font-bold text-slate uppercase tracking-wider mb-1">{% trans "Phone" %}</p>
                        <p class="text-sm font-semibold text-navy">{{ metadata.submitted_by_phone }}</p>
                    </div>
                    {% endif %}
                    {% if metadata.submitted_by_email %}
                    <div>
                        <p class="text-[10px] font-bold text-slate uppercase tracking-wider mb-1">{% trans "Email" %}</p>
                        <p class="text-sm font-semibold text-navy">{{ metadata.submitted_by_email }}</p>
                    </div>
                    {% endif %}
                    {% if metadata.staff_name_mentioned %}
                    <div>
                        <p class="text-[10px] font-bold text-slate uppercase tracking-wider mb-1">{% trans "Staff Mentioned" %}</p>
                        <p class="text-sm font-semibold text-navy">{{ metadata.staff_name_mentioned }}</p>
                    </div>
                    {% endif %}
                </div>
            </section>
            {% endif %}

            {% if appreciation.recipient %}
            <section class="bg-white rounded-2xl p-6 shadow-sm border border-slate-100 mb-6">
                <h3 class="font-bold text-navy mb-4 flex items-center gap-2">
                    <i data-lucide="user-check" class="w-5 h-5 text-blue-600"></i>
                    {% trans "Appreciation For" %}
                </h3>
                <div class="flex items-center gap-3">
                    <div class="w-10 h-10 rounded-full bg-navy/10 flex items-center justify-center">
                        <i data-lucide="user" class="w-5 h-5 text-navy"></i>
                    </div>
                    <div>
                        <p class="text-sm font-bold text-navy">{{ appreciation.get_recipient_name }}</p>
                        {% if appreciation.department %}
                        <p class="text-xs text-slate">{{ appreciation.department.get_localized_name }}</p>
                        {% endif %}
                    </div>
                </div>
            </section>
            {% endif %}

            {% if appreciation.status == 'sent' or appreciation.status == 'acknowledged' %}
            <section class="bg-white rounded-2xl p-6 shadow-sm border border-green-200 mb-6">
                <h3 class="font-bold text-green-800 mb-4 flex items-center gap-2">
                    <i data-lucide="check-circle-2" class="w-5 h-5 text-green-600"></i>
                    {% trans "Sent" %}
                </h3>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div>
                        <p class="text-[10px] font-bold text-slate uppercase tracking-wider mb-1">{% trans "Sent At" %}</p>
                        <p class="text-sm font-semibold text-navy">{{ appreciation.sent_at|date:"Y-m-d H:i" }}</p>
                    </div>
                </div>
                {% if appreciation.custom_message %}
                <div class="mt-4 pt-4 border-t border-green-100">
                    <p class="text-[10px] font-bold text-slate uppercase tracking-wider mb-1">{% trans "Custom Message" %}</p>
                    <p class="text-sm text-slate-700">{{ appreciation.custom_message }}</p>
                </div>
                {% endif %}
                {% if appreciation.acknowledged_at %}
                <div class="mt-4 pt-4 border-t border-green-100">
                    <div class="flex items-center gap-2">
                        <i data-lucide="check-circle" class="w-4 h-4 text-emerald-600"></i>
                        <p class="text-sm font-semibold text-emerald-700">{% trans "Acknowledged on" %} {{ appreciation.acknowledged_at|date:"Y-m-d H:i" }}</p>
                    </div>
                </div>
                {% endif %}
            </section>
            {% endif %}

            <section class="bg-white rounded-2xl p-6 shadow-sm border border-slate-100 mb-6">
                <h3 class="font-bold text-navy mb-2 flex items-center gap-2">
                    <i data-lucide="file-text" class="w-5 h-5 text-blue-600"></i>
                    {% trans "Appreciation Letter" %}
                </h3>
                <p class="text-xs text-slate mb-4">{% trans "Generate a formal letter of appreciation as a PDF." %}</p>
                <a href="{% url 'appreciation:appreciation_letter' appreciation.pk %}"
                   target="_blank" rel="noopener noreferrer"
                   class="inline-flex items-center gap-1.5 px-3 py-2 border border-slate-200 rounded-lg text-xs font-semibold text-slate hover:border-navy hover:text-navy transition">
                    <i data-lucide="download" class="w-3.5 h-3.5"></i>
                    {% trans "Download Letter" %}
                </a>
            </section>
        </div>

        {% if appreciation.ai_analysis %}
        <div id="panel-ai" class="tab-panel hidden">
            <section class="bg-white rounded-2xl p-6 shadow-sm border border-purple-200">
                <h3 class="font-bold text-purple-800 mb-4 flex items-center gap-2">
                    <i data-lucide="sparkles" class="w-5 h-5 text-purple-600"></i>
                    {% trans "AI Analysis" %}
                </h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                    {% if appreciation.ai_analysis.summary_en %}
                    <div>
                        <p class="text-[10px] font-bold text-slate uppercase tracking-wider mb-1">{% trans "Summary (EN)" %}</p>
                        <p class="text-sm text-slate-700">{{ appreciation.ai_analysis.summary_en }}</p>
                    </div>
                    {% endif %}
                    {% if appreciation.ai_analysis.summary_ar %}
                    <div>
                        <p class="text-[10px] font-bold text-slate uppercase tracking-wider mb-1">{% trans "Summary (AR)" %}</p>
                        <p class="text-sm text-slate-700" dir="rtl">{{ appreciation.ai_analysis.summary_ar }}</p>
                    </div>
                    {% endif %}
                    {% if appreciation.ai_analysis.themes %}
                    <div>
                        <p class="text-[10px] font-bold text-slate uppercase tracking-wider mb-1">{% trans "Themes" %}</p>
                        <div class="flex flex-wrap gap-1.5">
                            {% for theme in appreciation.ai_analysis.themes %}
                            <span class="px-2 py-0.5 rounded-full text-xs font-bold bg-purple-100 text-purple-700">{{ theme }}</span>
                            {% endfor %}
                        </div>
                    </div>
                    {% endif %}
                    {% if appreciation.ai_analysis.tone %}
                    <div>
                        <p class="text-[10px] font-bold text-slate uppercase tracking-wider mb-1">{% trans "Tone" %}</p>
                        <span class="px-2.5 py-1 rounded-full text-xs font-bold capitalize bg-blue-100 text-blue-700">{{ appreciation.ai_analysis.tone }}</span>
                    </div>
                    {% endif %}
                </div>
                {% if appreciation.ai_analysis.suggested_response_en %}
                <div class="mt-4 pt-4 border-t border-purple-100">
                    <p class="text-[10px] font-bold text-slate uppercase tracking-wider mb-1">{% trans "Suggested Response" %}</p>
                    <p class="text-sm text-slate-600 bg-purple-50 rounded-lg p-3">{{ appreciation.ai_analysis.suggested_response_en }}</p>
                </div>
                {% endif %}
            </section>
        </div>
        {% endif %}

        <div id="panel-notes" class="tab-panel hidden">
            {% include "partials/notes_panel.html" %}
        </div>
    </div>

    <!-- Right Column: Info Card -->
    <div class="col-span-4 space-y-6">
        <section class="bg-white rounded-2xl p-6 shadow-sm border border-slate-100">
            <h3 class="font-bold text-navy mb-4 text-sm flex items-center gap-2">
                <i data-lucide="info" class="w-4 h-4"></i> {% trans "Details" %}
            </h3>
            <div class="space-y-3 text-sm">
                <div>
                    <p class="text-[10px] font-bold text-slate uppercase tracking-wider mb-0.5">{% trans "Status" %}</p>
                    <p class="font-semibold text-navy">{{ appreciation.get_status_display }}</p>
                </div>
                {% if appreciation.category %}
                <div>
                    <p class="text-[10px] font-bold text-slate uppercase tracking-wider mb-0.5">{% trans "Category" %}</p>
                    <p class="font-semibold text-navy">{{ appreciation.category.get_localized_name }}</p>
                </div>
                {% endif %}
                {% if appreciation.activated_at %}
                <div>
                    <p class="text-[10px] font-bold text-slate uppercase tracking-wider mb-0.5">{% trans "Activated" %}</p>
                    <p class="text-slate-700">{{ appreciation.activated_at|date:"Y-m-d H:i" }}</p>
                </div>
                {% endif %}
                {% if appreciation.department %}
                <div>
                    <p class="text-[10px] font-bold text-slate uppercase tracking-wider mb-0.5">{% trans "Department" %}</p>
                    <p class="font-semibold text-navy">{{ appreciation.department.get_localized_name }}</p>
                </div>
                {% endif %}
                {% if appreciation.recipient %}
                <div>
                    <p class="text-[10px] font-bold text-slate uppercase tracking-wider mb-0.5">{% trans "Recipient" %}</p>
                    <p class="font-semibold text-navy">{{ appreciation.get_recipient_name }}</p>
                </div>
                {% endif %}
                {% if appreciation.sent_at %}
                <div class="pt-3 border-t border-slate-100">
                    <p class="text-[10px] font-bold text-slate uppercase tracking-wider mb-0.5">{% trans "Sent At" %}</p>
                    <p class="text-slate-700">{{ appreciation.sent_at|date:"Y-m-d H:i" }}</p>
                </div>
                {% endif %}
                {% if appreciation.acknowledged_at %}
                <div class="pt-3 border-t border-slate-100">
                    <div class="flex items-center gap-2">
                        <i data-lucide="check-circle" class="w-4 h-4 text-emerald-600"></i>
                        <p class="text-emerald-700 font-semibold text-sm">{% trans "Acknowledged" %} {{ appreciation.acknowledged_at|date:"Y-m-d H:i" }}</p>
                    </div>
                </div>
                {% endif %}
            </div>
        </section>
    </div>
</main>

<!-- Select Staff Modal -->
<div id="selectStaffModal" style="display:none" class="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
    <div class="bg-white rounded-2xl shadow-2xl w-full max-w-md mx-4">
        <div class="flex items-center justify-between p-5 border-b border-slate-100">
            <h3 class="text-lg font-bold text-navy flex items-center gap-2"><i data-lucide="user-check" class="w-5 h-5"></i> {% trans "Select Appreciated Staff" %}</h3>
            <button type="button" onclick="document.getElementById('selectStaffModal').style.display='none'" class="p-1.5 rounded-lg hover:bg-slate-100 text-slate-400"><i data-lucide="x" class="w-5 h-5"></i></button>
        </div>
        <form method="post" action="{% url 'appreciation:appreciation_select_recipient' pk=appreciation.pk %}">
            {% csrf_token %}
            <div class="p-5 space-y-4">
                <div>
                    <label class="block text-sm font-semibold text-slate-700 mb-1.5">{% trans "Department" %} <span class="text-red-500">*</span></label>
                    <select id="modalDeptSelect" name="department_id" onchange="loadModalStaff(this.value)"
                        class="w-full border border-slate-200 rounded-xl p-3 text-sm focus:ring-2 focus:ring-navy/20 outline-none" required>
                        <option value="">{% trans "Select Department" %}</option>
                        {% for dept in hospital_departments %}
                        <option value="{{ dept.id }}" {% if appreciation.department_id and appreciation.department_id|stringformat:"s" == dept.id|stringformat:"s" %}selected{% endif %}>{{ dept.get_localized_name }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-semibold text-slate-700 mb-1.5">{% trans "Staff" %} <span class="text-slate-400 font-normal">({% trans "optional" %})</span></label>
                    <select id="modalStaffSelect" name="staff_id"
                        class="w-full border border-slate-200 rounded-xl p-3 text-sm focus:ring-2 focus:ring-navy/20 outline-none">
                        <option value="">{% trans "Select department first" %}</option>
                    </select>
                    <p class="text-xs text-slate-400 mt-1">{% trans "Select the specific staff member, or leave blank for the department." %}</p>
                </div>
            </div>
            <div class="p-5 border-t border-slate-100 flex gap-3">
                <button type="button" onclick="document.getElementById('selectStaffModal').style.display='none'" class="flex-1 px-4 py-2.5 border border-slate-200 text-slate-600 rounded-xl font-semibold hover:bg-slate-50 transition">{% trans "Cancel" %}</button>
                <button type="submit" class="flex-1 px-4 py-2.5 bg-navy text-white rounded-xl font-bold hover:bg-blue transition flex items-center justify-center gap-2">
                    <i data-lucide="check" class="w-4 h-4"></i> {% trans "Confirm" %}
                </button>
            </div>
        </form>
    </div>
</div>

<!-- Send Modal -->
<div id="sendModal" style="display:none" class="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
    <div class="bg-white rounded-2xl shadow-2xl w-full max-w-md mx-4">
        <div class="flex items-center justify-between p-5 border-b border-slate-100">
            <h3 class="text-lg font-bold text-navy flex items-center gap-2"><i data-lucide="send" class="w-5 h-5"></i> {% trans "Send to Department" %}</h3>
            <button type="button" onclick="document.getElementById('sendModal').style.display='none'" class="p-1.5 rounded-lg hover:bg-slate-100 text-slate-400"><i data-lucide="x" class="w-5 h-5"></i></button>
        </div>
        <form onsubmit="handleAprSendSubmit(event)">
            {% csrf_token %}
            <input type="hidden" name="department_id" value="{{ appreciation.department_id }}">
            <input type="hidden" name="staff_id" value="{{ appreciation.recipient_object_id|default:'' }}">
            <div class="p-5 space-y-4">
                <div class="bg-blue-50 rounded-xl p-3 space-y-1">
                    {% if appreciation.department %}
                    <div class="flex items-center gap-2">
                        <i data-lucide="building" class="w-4 h-4 text-blue-600"></i>
                        <p class="text-sm font-bold text-navy">{{ appreciation.department.get_localized_name }}</p>
                    </div>
                    {% endif %}
                    {% if appreciation.recipient %}
                    <div class="flex items-center gap-2">
                        <i data-lucide="user" class="w-4 h-4 text-blue-600"></i>
                        <p class="text-sm text-slate-700">{{ appreciation.get_recipient_name }}</p>
                    </div>
                    {% endif %}
                </div>
                <div>
                    <label class="block text-sm font-semibold text-slate-700 mb-1.5">{% trans "Note" %} <span class="text-slate-400 font-normal">({% trans "optional" %})</span></label>
                    <textarea name="note" rows="2" class="w-full border border-slate-200 rounded-xl p-3 text-sm focus:ring-2 focus:ring-navy/20 outline-none" placeholder="{% trans 'Add context...' %}"></textarea>
                </div>
                <div id="aprSendError" class="hidden text-sm text-red-600 bg-red-50 border border-red-200 p-3 rounded-lg"></div>
            </div>
            <div class="p-5 border-t border-slate-100 flex gap-3">
                <button type="button" onclick="document.getElementById('sendModal').style.display='none'" class="flex-1 px-4 py-2.5 border border-slate-200 text-slate-600 rounded-xl font-semibold hover:bg-slate-50 transition">{% trans "Cancel" %}</button>
                <button type="submit" id="aprSendBtn" class="flex-1 px-4 py-2.5 bg-indigo-600 text-white rounded-xl font-bold hover:bg-indigo-700 transition flex items-center justify-center gap-2">
                    <i data-lucide="send" class="w-4 h-4"></i> {% trans "Send" %}
                </button>
            </div>
        </form>
    </div>
</div>

<script>
function openSelectStaffModal() {
    var modal = document.getElementById('selectStaffModal');
    if (!modal) return;
    modal.style.display = 'flex';
    var deptSelect = document.getElementById('modalDeptSelect');
    if (deptSelect && deptSelect.value) {
        loadModalStaff(deptSelect.value);
    }
}

function loadModalStaff(deptId) {
    var staffSel = document.getElementById('modalStaffSelect');
    if (!staffSel) return;
    if (!deptId) {
        staffSel.innerHTML = '<option value="">{% trans "Select department first" %}</option>';
        return;
    }
    staffSel.innerHTML = '<option value="">{% trans "Loading..." %}</option>';
    fetch('/organizations/dropdowns/department-staff/' + encodeURIComponent(deptId) + '/')
        .then(function (r) { return r.json(); })
        .then(function (items) {
            var html = '<option value="">{% trans "Select staff (optional)" %}</option>';
            (items || []).forEach(function (it) {
                var id = it.staff_id || (it.staff && it.staff.id);
                var name = it.name || (it.staff && it.staff.name) || id;
                if (id) html += '<option value="' + id + '">' + name + '</option>';
            });
            staffSel.innerHTML = html;
        })
        .catch(function () { staffSel.innerHTML = '<option value="">{% trans "Select staff (optional)" %}</option>'; });
}

function handleAprSendSubmit(event) {
    event.preventDefault();
    var err = document.getElementById('aprSendError');
    var btn = document.getElementById('aprSendBtn');
    err.classList.add('hidden');
    btn.disabled = true;
    btn.innerHTML = '<span class="inline-block w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin mr-2"></span>{% trans "Sending..." %}';
    fetch('{% url "appreciation:appreciation_send_to" pk=appreciation.pk %}', {
        method: 'POST',
        body: new FormData(event.target),
        headers: { 'X-Requested-With': 'XMLHttpRequest', 'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value || '' }
    })
    .then(async function (r) {
        var data = null;
        try { data = await r.json(); } catch (e) {}
        if (data && data.success === true) return data;
        throw new Error((data && data.error) || (r.ok ? '{% trans "Failed to send." %}' : '{% trans "Server error" %} (' + r.status + ')'));
    })
    .then(function () { window.location.reload(); })
    .catch(function (e) {
        err.textContent = e.message;
        err.classList.remove('hidden');
        btn.disabled = false;
        btn.innerHTML = '<i data-lucide="send" class="w-4 h-4"></i> {% trans "Send" %}';
        if (window.lucide) lucide.createIcons();
    });
}

function switchTab(tabName) {
    document.querySelectorAll('.tab-panel').forEach(panel => panel.classList.add('hidden'));
    document.getElementById('panel-' + tabName).classList.remove('hidden');
    document.querySelectorAll('main nav button').forEach(tab => {
        tab.classList.remove('tab-active');
        tab.classList.add('tab-inactive');
    });
    document.getElementById('tab-' + tabName).classList.remove('tab-inactive');
    document.getElementById('tab-' + tabName).classList.add('tab-active');
    if (window.lucide) lucide.createIcons();
}

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