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

{% block title %}{% trans "Import HIS Patient Data" %} - 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:instance_list' %}" 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 Surveys" %}</span>
            </a>
        </div>
        <h1 class="text-2xl font-bold text-navy flex items-center gap-3">
            <i data-lucide="upload-cloud" class="w-7 h-7 text-blue"></i>
            {% trans "Import HIS Patient Data" %}
        </h1>
        <p class="text-slate mt-1">{% trans "Import patient visit data from MOH Statistics CSV and send surveys" %}</p>
    </div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <!-- Import Form -->
    <div class="lg:col-span-2">
        <div class="bg-white rounded-2xl shadow-sm border border-slate-100 overflow-hidden">
            <div class="p-6">
                <h2 class="text-lg font-bold text-navy mb-6 flex items-center gap-2">
                    <i data-lucide="file-spreadsheet" class="w-5 h-5 text-blue"></i>
                    {% trans "Upload CSV File" %}
                </h2>
                
                <form method="post" enctype="multipart/form-data" class="space-y-6" data-loading data-loading-text="{% trans 'Importing...' %}">
                    {% csrf_token %}
                    
                    <!-- Hospital (hidden, auto-set) -->
                    {% if not form.hospital.is_hidden %}
                    <div>
                        <label for="{{ form.hospital.id_for_label }}" class="block text-sm font-semibold text-navy mb-2">
                            {{ form.hospital.label }} <span class="text-red-600">*</span>
                        </label>
                        {{ form.hospital }}
                        {% if form.hospital.help_text %}
                        <p class="text-xs text-slate mt-1.5">{{ form.hospital.help_text }}</p>
                        {% endif %}
                    </div>
                    {% else %}
                        {{ form.hospital }}
                    {% endif %}
                    
                    <!-- CSV File Upload -->
                    <div>
                        <label for="{{ form.csv_file.id_for_label }}" class="block text-sm font-semibold text-navy mb-2">
                            {{ form.csv_file.label }} <span class="text-red-600">*</span>
                        </label>
                        {{ form.csv_file }}
                        {% if form.csv_file.help_text %}
                        <p class="text-xs text-slate mt-1.5">{{ form.csv_file.help_text }}</p>
                        {% endif %}
                    </div>
                    
                    <!-- Skip Header Rows -->
                    <div>
                        <label for="{{ form.skip_header_rows.id_for_label }}" class="block text-sm font-semibold text-navy mb-2">
                            {{ form.skip_header_rows.label }}
                        </label>
                        {{ form.skip_header_rows }}
                        {% if form.skip_header_rows.help_text %}
                        <p class="text-xs text-slate mt-1.5">{{ form.skip_header_rows.help_text }}</p>
                        {% endif %}
                    </div>
                    
                    <!-- Form Actions -->
                    <div class="flex flex-col sm:flex-row gap-3 pt-6 border-t border-slate-200">
                        <button type="submit" class="flex-1 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="upload" class="w-5 h-5"></i>
                            {% trans "Import & Review" %}
                        </button>
                        <a href="{% url 'surveys:instance_list' %}" class="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>
                    </div>
                </form>
            </div>
        </div>
    </div>
    
    <!-- Instructions Sidebar -->
    <div class="space-y-6">
        <!-- CSV Format Guide -->
        <div class="bg-white rounded-2xl shadow-sm border border-slate-100 overflow-hidden">
            <div class="p-6">
                <h3 class="text-sm font-bold text-navy mb-4 flex items-center gap-2">
                    <i data-lucide="info" class="w-4 h-4 text-blue"></i>
                    {% trans "CSV Format Guide" %}
                </h3>
                
                <div class="space-y-4">
                    <p class="text-sm text-slate">{% trans "Upload a MOH Statistics CSV file with the following columns:" %}</p>
                    
                    <ul class="space-y-2">
                        <li class="flex items-start gap-2 text-xs text-slate">
                            <span class="mt-1 w-1.5 h-1.5 rounded-full bg-blue flex-shrink-0"></span>
                            <span><strong>SNo</strong> - {% trans "Serial number" %}</span>
                        </li>
                        <li class="flex items-start gap-2 text-xs text-slate">
                            <span class="mt-1 w-1.5 h-1.5 rounded-full bg-blue flex-shrink-0"></span>
                            <span><strong>Facility Name</strong> - {% trans "Hospital/Facility" %}</span>
                        </li>
                        <li class="flex items-start gap-2 text-xs text-slate">
                            <span class="mt-1 w-1.5 h-1.5 rounded-full bg-blue flex-shrink-0"></span>
                            <span><strong>Visit Type</strong> - {% trans "EMERGENCY, INPATIENT, OPD" %}</span>
                        </li>
                        <li class="flex items-start gap-2 text-xs text-slate">
                            <span class="mt-1 w-1.5 h-1.5 rounded-full bg-blue flex-shrink-0"></span>
                            <span><strong>Admit Date</strong> - {% trans "Admission date" %}</span>
                        </li>
                        <li class="flex items-start gap-2 text-xs text-slate">
                            <span class="mt-1 w-1.5 h-1.5 rounded-full bg-blue flex-shrink-0"></span>
                            <span><strong>Discharge Date</strong> - {% trans "Discharge date" %}</span>
                        </li>
                        <li class="flex items-start gap-2 text-xs text-slate">
                            <span class="mt-1 w-1.5 h-1.5 rounded-full bg-blue flex-shrink-0"></span>
                            <span><strong>Patient Name</strong> - {% trans "Full patient name" %}</span>
                        </li>
                        <li class="flex items-start gap-2 text-xs text-slate">
                            <span class="mt-1 w-1.5 h-1.5 rounded-full bg-blue flex-shrink-0"></span>
                            <span><strong>File Number</strong> - {% trans "MRN (Medical Record Number)" %}</span>
                        </li>
                        <li class="flex items-start gap-2 text-xs text-slate">
                            <span class="mt-1 w-1.5 h-1.5 rounded-full bg-blue flex-shrink-0"></span>
                            <span><strong>SSN</strong> - {% trans "National ID" %}</span>
                        </li>
                        <li class="flex items-start gap-2 text-xs text-slate">
                            <span class="mt-1 w-1.5 h-1.5 rounded-full bg-blue flex-shrink-0"></span>
                            <span><strong>Mobile No</strong> - {% trans "Phone number" %}</span>
                        </li>
                        <li class="flex items-start gap-2 text-xs text-slate">
                            <span class="mt-1 w-1.5 h-1.5 rounded-full bg-blue flex-shrink-0"></span>
                            <span><strong>Gender</strong> - {% trans "Male/Female" %}</span>
                        </li>
                        <li class="flex items-start gap-2 text-xs text-slate">
                            <span class="mt-1 w-1.5 h-1.5 rounded-full bg-blue flex-shrink-0"></span>
                            <span><strong>Nationality</strong> - {% trans "Country" %}</span>
                        </li>
                    </ul>
                    
                    <div class="bg-blue-50 border border-blue-200 rounded-xl p-4">
                        <div class="flex items-start gap-2">
                            <i data-lucide="lightbulb" class="w-4 h-4 text-blue-600 mt-0.5 flex-shrink-0"></i>
                            <div>
                                <p class="text-xs font-semibold text-blue-800 mb-1">{% trans "Note:" %}</p>
                                <p class="text-xs text-blue-700">{% trans "The CSV may have header/metadata rows at the top. Adjust 'Skip Header Rows' accordingly (default: 5)." %}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Import Process -->
        <div class="bg-white rounded-2xl shadow-sm border border-slate-100 overflow-hidden">
            <div class="p-6">
                <h3 class="text-sm font-bold text-navy mb-4 flex items-center gap-2">
                    <i data-lucide="workflow" class="w-4 h-4 text-blue"></i>
                    {% trans "Import Process" %}
                </h3>
                
                <div class="space-y-3">
                    <div class="flex items-center gap-3 group">
                        <span class="w-8 h-8 rounded-full bg-blue text-white flex items-center justify-center text-xs font-bold shadow-sm group-hover:bg-blue-700 transition">1</span>
                        <span class="text-sm text-slate font-medium group-hover:text-navy transition">{% trans "Upload CSV file" %}</span>
                    </div>
                    <div class="flex items-center gap-3 group">
                        <span class="w-8 h-8 rounded-full bg-blue text-white flex items-center justify-center text-xs font-bold shadow-sm group-hover:bg-blue-700 transition">2</span>
                        <span class="text-sm text-slate font-medium group-hover:text-navy transition">{% trans "Review patient data" %}</span>
                    </div>
                    <div class="flex items-center gap-3 group">
                        <span class="w-8 h-8 rounded-full bg-blue text-white flex items-center justify-center text-xs font-bold shadow-sm group-hover:bg-blue-700 transition">3</span>
                        <span class="text-sm text-slate font-medium group-hover:text-navy transition">{% trans "Create patient records" %}</span>
                    </div>
                    <div class="flex items-center gap-3 group">
                        <span class="w-8 h-8 rounded-full bg-blue text-white flex items-center justify-center text-xs font-bold shadow-sm group-hover:bg-blue-700 transition">4</span>
                        <span class="text-sm text-slate font-medium group-hover:text-navy transition">{% trans "Send surveys" %}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// Apply Tailwind classes to form fields dynamically
document.addEventListener('DOMContentLoaded', function() {
    // Apply Tailwind classes to form fields
    const textInputs = document.querySelectorAll('input[type="text"], input[type="number"], input[type="file"], 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');
    });
    
    // Initialize Lucide icons
    lucide.createIcons();
});
</script>
{% endblock %}