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

{% block title %}{% trans "Send Surveys to Patients" %} - PX360{% endblock %}

{% block content %}
<!-- Page Header -->
<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-6">
    <div>
        <div class="flex items-center gap-2 mb-2">
            <a href="{% url 'surveys:his_patient_review' %}" class="text-blue hover:text-navy transition flex items-center gap-1">
                <i data-lucide="arrow-left" class="w-5 h-5"></i>
                <span class="text-sm font-medium">{% trans "Back to Review" %}</span>
            </a>
        </div>
        <h1 class="text-2xl font-bold text-navy flex items-center gap-3">
            <i data-lucide="send" class="w-7 h-7 text-blue"></i>
            {% trans "Send Surveys to Patients" %}
        </h1>
        <p class="text-slate mt-1 flex items-center gap-4">
            <span class="flex items-center gap-1">
                <i data-lucide="building-2" class="w-4 h-4"></i>
                {{ hospital.name }}
            </span>
            <span class="text-slate-300">|</span>
            <span class="flex items-center gap-1">
                <i data-lucide="users" class="w-4 h-4"></i>
                {% trans "Patients Ready:" %} <span class="font-semibold">{{ total_count }}</span>
            </span>
        </p>
    </div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <!-- Survey Form -->
    <div class="lg:col-span-1">
        <div class="bg-white rounded-2xl shadow-sm border border-slate-100 overflow-hidden sticky top-4">
            <div class="p-6">
                <h2 class="text-lg font-bold text-navy mb-6 flex items-center gap-2">
                    <i data-lucide="settings" class="w-5 h-5 text-blue"></i>
                    {% trans "Survey Settings" %}
                </h2>
                
                <form method="post" class="space-y-5">
                    {% csrf_token %}
                    
                    <div>
                        <label for="{{ form.survey_template.id_for_label }}" class="block text-sm font-semibold text-navy mb-2">
                            {{ form.survey_template.label }} <span class="text-red-600">*</span>
                        </label>
                        {{ form.survey_template }}
                        {% if form.survey_template.help_text %}
                        <p class="text-xs text-slate mt-1.5">{{ form.survey_template.help_text }}</p>
                        {% endif %}
                    </div>
                    
                    <div>
                        <label for="{{ form.delivery_channel.id_for_label }}" class="block text-sm font-semibold text-navy mb-2">
                            {{ form.delivery_channel.label }} <span class="text-red-600">*</span>
                        </label>
                        {{ form.delivery_channel }}
                        {% if form.delivery_channel.help_text %}
                        <p class="text-xs text-slate mt-1.5">{{ form.delivery_channel.help_text }}</p>
                        {% endif %}
                    </div>
                    
                    <div>
                        <label for="{{ form.custom_message.id_for_label }}" class="block text-sm font-semibold text-navy mb-2">
                            {{ form.custom_message.label }}
                        </label>
                        {{ form.custom_message }}
                        {% if form.custom_message.help_text %}
                        <p class="text-xs text-slate mt-1.5">{{ form.custom_message.help_text }}</p>
                        {% endif %}
                    </div>
                    
                    <div class="pt-6 border-t border-slate-200">
                        <button type="submit" class="w-full px-6 py-3 bg-navy text-white rounded-xl font-semibold hover:bg-blue transition flex items-center justify-center gap-2 shadow-sm">
                            <i data-lucide="send" class="w-5 h-5"></i>
                            {% trans "Send Surveys" %}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    
    <!-- Patient List -->
    <div class="lg:col-span-2">
        <div class="bg-white rounded-2xl shadow-sm border border-slate-100 overflow-hidden">
            <div class="p-6">
                <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-6">
                    <h2 class="text-lg font-bold text-navy flex items-center gap-2">
                        <i data-lucide="users" class="w-5 h-5 text-blue"></i>
                        {% trans "Patients to Survey" %}
                    </h2>
                    <div class="flex gap-2">
                        <button type="button" onclick="selectAll()" class="px-4 py-2 border border-slate-200 text-slate rounded-xl font-medium hover:bg-light transition flex items-center gap-2 text-sm">
                            <i data-lucide="check-square" class="w-4 h-4"></i>
                            {% trans "Select All" %}
                        </button>
                        <button type="button" onclick="deselectAll()" class="px-4 py-2 border border-slate-200 text-slate rounded-xl font-medium hover:bg-light transition flex items-center gap-2 text-sm">
                            <i data-lucide="square" class="w-4 h-4"></i>
                            {% trans "Deselect All" %}
                        </button>
                    </div>
                </div>
                
                <form method="post">
                    {% csrf_token %}
                    
                    <div class="overflow-x-auto border border-slate-200 rounded-xl">
                        <table class="w-full text-sm">
                            <thead class="bg-slate-50 border-b border-slate-200">
                                <tr class="text-xs font-bold text-slate uppercase tracking-wider">
                                    <th class="px-4 py-3 text-left w-12">
                                        <input type="checkbox" id="select-all-checkbox" class="w-4 h-4 rounded border-slate-300 text-blue focus:ring-blue">
                                    </th>
                                    <th class="px-4 py-3 text-left">{% trans "MRN" %}</th>
                                    <th class="px-4 py-3 text-left">{% trans "Patient Name" %}</th>
                                    <th class="px-4 py-3 text-left">{% trans "Phone" %}</th>
                                    <th class="px-4 py-3 text-left">{% trans "Visit Type" %}</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-slate-100">
                                {% for patient in patients %}
                                <tr class="hover:bg-light/30 transition">
                                    <td class="px-4 py-3">
                                        <input type="checkbox" name="selected_patients" value="{{ patient.file_number }}" 
                                               checked class="patient-checkbox w-4 h-4 rounded border-slate-300 text-blue focus:ring-blue">
                                    </td>
                                    <td class="px-4 py-3 font-mono text-xs text-slate">{{ patient.file_number }}</td>
                                    <td class="px-4 py-3">
                                        <div class="font-medium text-navy">{{ patient.patient_name }}</div>
                                        <div class="text-xs text-slate mt-0.5">{{ patient.gender|default:"-" }}</div>
                                    </td>
                                    <td class="px-4 py-3 font-mono text-xs text-slate">
                                        {% if patient.patient_obj.phone %}
                                        <span class="flex items-center gap-1">
                                            <i data-lucide="phone" class="w-3 h-3"></i>
                                            {{ patient.patient_obj.phone }}
                                        </span>
                                        {% else %}
                                        <span class="inline-flex items-center gap-1 text-red-500">
                                            <i data-lucide="phone-off" class="w-3 h-3"></i>
                                            {% trans "No phone" %}
                                        </span>
                                        {% endif %}
                                    </td>
                                    <td class="px-4 py-3">
                                        {% if patient.visit_type == 'EMERGENCY' %}
                                        <span class="inline-flex items-center px-2.5 py-1 rounded-lg text-xs font-bold bg-red-100 text-red-800">
                                            {{ patient.visit_type|default:"-" }}
                                        </span>
                                        {% elif patient.visit_type == 'INPATIENT' %}
                                        <span class="inline-flex items-center px-2.5 py-1 rounded-lg text-xs font-bold bg-blue-100 text-blue-800">
                                            {{ patient.visit_type|default:"-" }}
                                        </span>
                                        {% elif patient.visit_type %}
                                        <span class="inline-flex items-center px-2.5 py-1 rounded-lg text-xs font-bold bg-slate-100 text-slate-800">
                                            {{ patient.visit_type }}
                                        </span>
                                        {% else %}
                                        <span class="text-slate-400">-</span>
                                        {% endif %}
                                    </td>
                                </tr>
                                {% empty %}
                                <tr>
                                    <td colspan="5" class="px-8 py-12 text-center text-slate">
                                        <div class="inline-flex items-center justify-center w-16 h-16 bg-slate-100 rounded-full mb-4">
                                            <i data-lucide="inbox" class="w-8 h-8 text-slate-400"></i>
                                        </div>
                                        <p class="text-sm font-medium text-slate">{% trans "No patients available for survey." %}</p>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    
                    <!-- Actions -->
                    <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mt-6 pt-6 border-t border-slate-200">
                        <p class="text-sm text-slate flex items-center gap-2">
                            <i data-lucide="check-circle-2" class="w-4 h-4 text-blue"></i>
                            <span class="font-medium"><span id="selected-count">0</span></span>
                            {% trans "patients selected" %}
                        </p>
                        <div class="flex gap-3 w-full sm:w-auto">
                            <a href="{% url 'surveys:his_patient_review' %}" class="flex-1 sm:flex-none px-6 py-3 border border-slate-200 text-slate rounded-xl font-semibold hover:bg-light transition flex items-center justify-center gap-2">
                                <i data-lucide="x" class="w-5 h-5"></i>
                                {% trans "Cancel" %}
                            </a>
                            <button type="submit" name="action" value="send" class="flex-1 sm:flex-none px-6 py-3 bg-navy text-white rounded-xl font-semibold hover:bg-blue transition flex items-center justify-center gap-2 shadow-sm">
                                <i data-lucide="send" class="w-5 h-5"></i>
                                {% trans "Send Surveys" %}
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        
        <!-- Info Banner -->
        <div class="bg-blue-50 border border-blue-200 rounded-2xl p-4 mt-4 shadow-sm">
            <div class="flex items-start gap-3">
                <i data-lucide="info" class="w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0"></i>
                <div>
                    <p class="text-sm font-semibold text-blue-800 mb-1">{% trans "Important Note" %}</p>
                    <p class="text-xs text-blue-700">{% trans "Only patients with phone numbers can receive SMS surveys. Patients without phone numbers will be skipped during the sending process." %}</p>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// Global functions for select all/deselect all buttons
function selectAll() {
    const patientCheckboxes = document.querySelectorAll('.patient-checkbox');
    const selectAllCheckbox = document.getElementById('select-all-checkbox');
    patientCheckboxes.forEach(cb => cb.checked = true);
    selectAllCheckbox.checked = true;
    updateSelectedCount();
}

function deselectAll() {
    const patientCheckboxes = document.querySelectorAll('.patient-checkbox');
    const selectAllCheckbox = document.getElementById('select-all-checkbox');
    patientCheckboxes.forEach(cb => cb.checked = false);
    selectAllCheckbox.checked = false;
    updateSelectedCount();
}

function updateSelectedCount() {
    const checked = document.querySelectorAll('.patient-checkbox:checked').length;
    const selectedCountSpan = document.getElementById('selected-count');
    if (selectedCountSpan) {
        selectedCountSpan.textContent = checked;
    }
}

// Initialize Lucide icons and setup event listeners
document.addEventListener('DOMContentLoaded', function() {
    lucide.createIcons();
    
    // Apply Tailwind classes to form fields
    const textInputs = document.querySelectorAll('input[type="text"], input[type="number"], select, textarea');
    textInputs.forEach(input => {
        input.classList.add('w-full', 'px-4', 'py-2.5', 'border', 'border-slate-200', 'rounded-xl', 'focus:border-blue', 'focus:ring-1', 'focus:ring-blue', 'transition', 'text-slate', 'bg-white');
    });
    
    // Select all functionality
    const selectAllCheckbox = document.getElementById('select-all-checkbox');
    const patientCheckboxes = document.querySelectorAll('.patient-checkbox');
    
    if (selectAllCheckbox) {
        selectAllCheckbox.addEventListener('change', function() {
            patientCheckboxes.forEach(cb => cb.checked = this.checked);
            updateSelectedCount();
        });
    }
    
    patientCheckboxes.forEach(cb => {
        cb.addEventListener('change', updateSelectedCount);
    });
    
    updateSelectedCount();
});
</script>
{% endblock %}