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

{% block title %}{% trans "Request Explanation" %} - {{ complaint.reference_number }} - PX360{% endblock %}

{% block content %}
<!-- Back Button -->
<div class="mb-6">
    <a href="{% url 'complaints:complaint_detail' pk=complaint.pk %}" class="inline-flex items-center gap-2 px-4 py-2 border border-slate-200 rounded-xl text-slate hover:text-navy hover:bg-light transition text-sm font-semibold">
        <i data-lucide="arrow-left" class="w-4 h-4"></i> {% trans "Back to Complaint" %}
    </a>
</div>

<!-- Header -->
<header class="mb-6">
    <div class="flex items-center gap-2 text-sm text-slate mb-2">
        <a href="{% url 'complaints:complaint_list' %}">{% trans "Complaints" %}</a>
        <i data-lucide="chevron-right" class="w-4 h-4"></i>
        <a href="{% url 'complaints:complaint_detail' pk=complaint.pk %}">{{ complaint.reference_number }}</a>
        <i data-lucide="chevron-right" class="w-4 h-4"></i>
        <span class="font-bold text-navy">{% trans "Request Explanation" %}</span>
    </div>
    <h1 class="text-2xl font-bold text-navy">{% trans "Request Explanation" %}</h1>
    <p class="text-slate mt-1">{{ complaint.title }}</p>
</header>

<form method="post" class="space-y-6">
    {% csrf_token %}
    
    <!-- Recipients Selection -->
    <section class="bg-white rounded-2xl p-6 shadow-sm border border-slate-100">
        <div class="flex items-center justify-between mb-6">
            <h3 class="font-bold text-navy text-lg flex items-center gap-2">
                <i data-lucide="users" class="w-5 h-5 text-blue"></i>
                {% trans "Select Recipients" %}
            </h3>
            <div class="flex gap-2">
                <button type="button" onclick="selectAllStaff()" class="px-3 py-1.5 text-xs font-semibold text-navy border border-slate-200 rounded-lg hover:bg-light transition">
                    {% trans "Select All Staff" %}
                </button>
                <button type="button" onclick="selectAllManagers()" class="px-3 py-1.5 text-xs font-semibold text-navy border border-slate-200 rounded-lg hover:bg-light transition">
                    {% trans "Select All Managers" %}
                </button>
                <button type="button" onclick="deselectAll()" class="px-3 py-1.5 text-xs font-semibold text-slate border border-slate-200 rounded-lg hover:bg-light transition">
                    {% trans "Deselect All" %}
                </button>
            </div>
        </div>
        
        {% if recipients %}
        <div class="space-y-4">
            {% for recipient in recipients %}
            <div class="border border-slate-200 rounded-xl p-4 hover:border-blue-300 transition">
                <div class="flex items-start gap-4">
                    <!-- Staff Checkbox -->
                    <div class="pt-1">
                        <input type="checkbox" 
                               name="selected_staff" 
                               value="{{ recipient.staff_id }}" 
                               id="staff_{{ recipient.staff_id }}"
                               class="staff-checkbox w-5 h-5 text-navy border-slate-300 rounded focus:ring-navy"
                               checked
                               onchange="updateManagerCheckbox('{{ recipient.staff_id }}', '{{ recipient.manager_id }}')">
                    </div>
                    
                    <!-- Staff Info -->
                    <div class="flex-1">
                        <div class="flex items-center gap-3 mb-2">
                            <div class="w-10 h-10 bg-navy rounded-full flex items-center justify-center text-white font-bold text-sm">
                                {{ recipient.staff_name|first }}
                            </div>
                            <div>
                                <h4 class="font-bold text-navy">{{ recipient.staff_name }}</h4>
                                <span class="text-xs text-slate">{{ recipient.role }}</span>
                            </div>
                            <span class="ml-auto px-2.5 py-1 bg-slate-100 rounded-lg text-xs font-bold text-slate-600">
                                {{ recipient.department }}
                            </span>
                        </div>
                        
                        {% if recipient.manager %}
                        <div class="mt-3 pl-4 border-l-2 border-blue-200">
                            <div class="flex items-center gap-3">
                                <!-- Manager Checkbox -->
                                <input type="checkbox" 
                                       name="selected_managers" 
                                       value="{{ recipient.manager_id }}" 
                                       id="manager_{{ recipient.manager_id }}"
                                       class="manager-checkbox w-4 h-4 text-blue border-slate-300 rounded focus:ring-blue"
                                       checked
                                       data-staff-id="{{ recipient.staff_id }}">
                                
                                <div class="flex items-center gap-2">
                                    <i data-lucide="user-check" class="w-4 h-4 text-blue"></i>
                                    <span class="text-sm font-semibold text-slate">{% trans "Manager:" %}</span>
                                    <span class="text-sm font-bold text-navy">{{ recipient.manager_name }}</span>
                                </div>
                            </div>
                            <p class="text-xs text-slate mt-1 ml-7">
                                {% trans "Will receive notification only (no explanation link)" %}
                            </p>
                        </div>
                        {% else %}
                        <div class="mt-3 pl-4 border-l-2 border-slate-200">
                            <p class="text-xs text-slate flex items-center gap-2">
                                <i data-lucide="alert-circle" class="w-4 h-4 text-orange-500"></i>
                                {% trans "No manager assigned to this staff member" %}
                            </p>
                        </div>
                        {% endif %}
                        
                        {% if not recipient.staff_email %}
                        <div class="mt-2 p-2 bg-red-50 border border-red-200 rounded-lg">
                            <p class="text-xs text-red-600 flex items-center gap-2">
                                <i data-lucide="alert-triangle" class="w-4 h-4"></i>
                                {% trans "This staff member has no email address. Request cannot be sent." %}
                            </p>
                        </div>
                        {% endif %}
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
        {% else %}
        <div class="text-center py-12">
            <i data-lucide="users" class="w-16 h-16 mx-auto text-slate-300 mb-4"></i>
            <p class="text-slate font-medium">{% trans "No staff members are involved in this complaint." %}</p>
        </div>
        {% endif %}
    </section>
    
    <!-- Message -->
    <section class="bg-white rounded-2xl p-6 shadow-sm border border-slate-100">
        <h3 class="font-bold text-navy mb-4 text-lg flex items-center gap-2">
            <i data-lucide="message-square" class="w-5 h-5 text-blue"></i>
            {% trans "Additional Message" %}
        </h3>
        <div>
            <label for="request_message" class="block text-sm font-semibold text-slate mb-2">
                {% trans "Optional message to include in the email" %}
            </label>
            <textarea name="request_message" 
                      id="request_message" 
                      rows="4" 
                      class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-navy focus:border-transparent transition resize-none text-sm"
                      placeholder="{% trans 'Enter any additional context or instructions for the recipients...' %}"></textarea>
        </div>
    </section>
    
    <!-- Summary -->
    <section class="bg-light/30 rounded-2xl p-6 border border-slate-100">
        <div class="flex items-center justify-between">
            <div>
                <h4 class="font-bold text-navy mb-1">{% trans "Summary" %}</h4>
                <p class="text-sm text-slate">
                    <span id="staff-count">0</span> {% trans "staff will receive explanation links" %}
                    <span class="mx-2">•</span>
                    <span id="manager-count">0</span> {% trans "managers will be notified" %}
                </p>
            </div>
            <div class="flex items-center gap-4">
                <a href="{% url 'complaints:complaint_detail' pk=complaint.pk %}" 
                   class="px-6 py-3 border border-slate-200 rounded-xl text-slate font-semibold hover:bg-white transition">
                    {% trans "Cancel" %}
                </a>
                <button type="submit" 
                        class="px-8 py-3 bg-gradient-to-r from-navy to-blue text-white rounded-xl font-semibold hover:opacity-90 transition flex items-center gap-2 shadow-md"
                        id="submit-btn">
                    <i data-lucide="send" class="w-5 h-5"></i>
                    {% trans "Send Requests" %}
                </button>
            </div>
        </div>
    </section>
</form>

<script>
// Initialize counts on page load
document.addEventListener('DOMContentLoaded', function() {
    updateCounts();
    lucide.createIcons();
});

function selectAllStaff() {
    document.querySelectorAll('.staff-checkbox').forEach(cb => {
        cb.checked = true;
    });
    updateCounts();
}

function selectAllManagers() {
    document.querySelectorAll('.manager-checkbox').forEach(cb => {
        cb.checked = true;
    });
    updateCounts();
}

function deselectAll() {
    document.querySelectorAll('.staff-checkbox, .manager-checkbox').forEach(cb => {
        cb.checked = false;
    });
    updateCounts();
}

function updateManagerCheckbox(staffId, managerId) {
    // If staff is unchecked, also uncheck their manager
    const staffCheckbox = document.getElementById('staff_' + staffId);
    if (managerId && !staffCheckbox.checked) {
        const managerCheckbox = document.getElementById('manager_' + managerId);
        if (managerCheckbox) {
            managerCheckbox.checked = false;
        }
    }
    updateCounts();
}

function updateCounts() {
    const staffCount = document.querySelectorAll('.staff-checkbox:checked').length;
    const managerCount = document.querySelectorAll('.manager-checkbox:checked').length;
    
    document.getElementById('staff-count').textContent = staffCount;
    document.getElementById('manager-count').textContent = managerCount;
    
    // Enable/disable submit button
    const submitBtn = document.getElementById('submit-btn');
    if (staffCount === 0) {
        submitBtn.disabled = true;
        submitBtn.classList.add('opacity-50', 'cursor-not-allowed');
    } else {
        submitBtn.disabled = false;
        submitBtn.classList.remove('opacity-50', 'cursor-not-allowed');
    }
}

// Update counts when any checkbox changes
document.querySelectorAll('.staff-checkbox, .manager-checkbox').forEach(cb => {
    cb.addEventListener('change', updateCounts);
});
</script>
{% endblock %}