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

{% block title %}{% trans "Bulk Invite" %}{% endblock %}

{% block content %}
<div class="p-6 md:p-8 bg-gradient-to-br from-light to-blue-50 min-h-screen">
    <!-- Header -->
    <div class="mb-8">
        <div class="flex items-center gap-3 mb-4">
            <div class="flex items-center justify-center w-14 h-14 bg-gradient-to-br from-blue to-navy rounded-2xl shadow-lg shadow-blue-200">
                <i data-lucide="mail-plus" class="w-8 h-8 text-white"></i>
            </div>
            <div>
                <a href="{% url 'accounts:acknowledgement-dashboard' %}" class="inline-flex items-center text-blue hover:text-navy mb-2 font-medium">
                    <i data-lucide="arrow-left" class="w-4 h-4 mr-2"></i>
                    {% trans "Back to Dashboard" %}
                </a>
                <h1 class="text-3xl font-bold text-navy">
                    {% trans "Send Bulk Invitations" %}
                </h1>
                <p class="text-slate">
                    {% trans "Invite multiple staff members to complete onboarding" %}
                </p>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
        <!-- Form -->
        <div class="lg:col-span-2">
            <div class="bg-white rounded-2xl shadow-sm border border-blue-100 p-6 md:p-8">
                <form method="post" enctype="multipart/form-data">
                    {% csrf_token %}

                    <div class="mb-8">
                        <label class="block text-navy font-bold mb-3">
                            {% trans "Upload CSV File" %}
                        </label>
                        <div class="border-2 border-dashed border-blue-200 rounded-2xl p-8 text-center hover:border-blue transition cursor-pointer bg-blue-50/50">
                            <input type="file" name="csv_file" accept=".csv" class="hidden" id="csv_file">
                            <label for="csv_file" class="cursor-pointer">
                                <div class="flex flex-col items-center">
                                    <div class="w-16 h-16 bg-gradient-to-br from-blue to-navy rounded-2xl flex items-center justify-center mb-4 mx-auto">
                                        <i data-lucide="upload-cloud" class="w-8 h-8 text-white"></i>
                                    </div>
                                    <p class="text-navy font-bold mb-1">{% trans "Click to upload CSV file" %}</p>
                                    <p class="text-slate text-sm">{% trans "or drag and drop" %}</p>
                                </div>
                            </label>
                        </div>
                        <div class="mt-4 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-600 mt-0.5 flex-shrink-0"></i>
                                <div>
                                    <p class="text-sm font-bold text-navy mb-1">{% trans "CSV Format Requirements" %}</p>
                                    <p class="text-xs text-slate">{% trans "Required columns: email, first_name, last_name, role" %}</p>
                                    <p class="text-xs text-slate">{% trans "Optional columns: hospital_id, department" %}</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="mb-8">
                        <label class="block text-navy font-bold mb-3">
                            {% trans "Or Enter Email Addresses" %}
                        </label>
                        <textarea name="emails" rows="5" class="w-full px-4 py-3 border-2 border-blue-100 rounded-xl text-navy focus:outline-none focus:ring-2 focus:ring-blue focus:border-transparent transition" placeholder="email1@example.com&#10;email2@example.com&#10;email3@example.com"></textarea>
                        <p class="text-xs text-slate mt-2">{% trans "Enter one email address per line" %}</p>
                    </div>

                    <div class="mb-8">
                        <label class="block text-navy font-bold mb-3">
                            {% trans "Custom Message (Optional)" %}
                        </label>
                        <textarea name="custom_message" rows="3" class="w-full px-4 py-3 border-2 border-blue-100 rounded-xl text-navy focus:outline-none focus:ring-2 focus:ring-blue focus:border-transparent transition" placeholder="{% trans 'Add a personal note to your invitation emails...' %}"></textarea>
                    </div>

                    <div class="flex gap-4">
                        <button type="submit" class="flex-1 bg-gradient-to-r from-blue to-navy text-white px-6 py-4 rounded-xl font-bold hover:from-navy hover:to-blue transition shadow-lg shadow-blue-200 flex items-center justify-center gap-2">
                            <i data-lucide="send" class="w-5 h-5"></i>
                            {% trans "Send Invitations" %}
                        </button>
                        <a href="{% url 'accounts:acknowledgement-dashboard' %}" class="px-6 py-4 bg-slate-100 text-slate-700 rounded-xl font-bold hover:bg-slate-200 transition">
                            {% trans "Cancel" %}
                        </a>
                    </div>
                </form>
            </div>
        </div>

        <!-- Help Sidebar -->
        <div class="space-y-6">
            <div class="bg-gradient-to-br from-blue-50 to-indigo-50 border border-blue-200 rounded-2xl p-6">
                <h3 class="font-bold text-navy mb-4 flex items-center gap-2">
                    <i data-lucide="help-circle" class="w-5 h-5 text-blue"></i>
                    {% trans "How it works" %}
                </h3>
                <div class="space-y-4">
                    <div class="flex items-start gap-3">
                        <div class="flex items-center justify-center w-8 h-8 bg-gradient-to-br from-blue to-navy rounded-lg flex-shrink-0">
                            <span class="text-white font-bold text-sm">1</span>
                        </div>
                        <div>
                            <p class="text-sm font-bold text-navy">{% trans "Prepare CSV or emails" %}</p>
                            <p class="text-xs text-slate">{% trans "Upload a CSV file or enter email addresses" %}</p>
                        </div>
                    </div>
                    <div class="flex items-start gap-3">
                        <div class="flex items-center justify-center w-8 h-8 bg-gradient-to-br from-blue to-navy rounded-lg flex-shrink-0">
                            <span class="text-white font-bold text-sm">2</span>
                        </div>
                        <div>
                            <p class="text-sm font-bold text-navy">{% trans "Review & send" %}</p>
                            <p class="text-xs text-slate">{% trans "We'll send personalized invitations" %}</p>
                        </div>
                    </div>
                    <div class="flex items-start gap-3">
                        <div class="flex items-center justify-center w-8 h-8 bg-gradient-to-br from-blue to-navy rounded-lg flex-shrink-0">
                            <span class="text-white font-bold text-sm">3</span>
                        </div>
                        <div>
                            <p class="text-sm font-bold text-navy">{% trans "Track progress" %}</p>
                            <p class="text-xs text-slate">{% trans "Monitor completion from the dashboard" %}</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="bg-white border border-blue-100 rounded-2xl p-6">
                <h4 class="font-bold text-navy mb-3">{% trans "Quick Tips" %}</h4>
                <ul class="space-y-2 text-sm text-slate">
                    <li class="flex items-start gap-2">
                        <i data-lucide="check" class="w-4 h-4 text-emerald-500 mt-0.5 flex-shrink-0"></i>
                        <span>{% trans "Use CSV for large batches (50+ users)" %}</span>
                    </li>
                    <li class="flex items-start gap-2">
                        <i data-lucide="check" class="w-4 h-4 text-emerald-500 mt-0.5 flex-shrink-0"></i>
                        <span>{% trans "Manual entry works well for small groups" %}</span>
                    </li>
                    <li class="flex items-start gap-2">
                        <i data-lucide="check" class="w-4 h-4 text-emerald-500 mt-0.5 flex-shrink-0"></i>
                        <span>{% trans "Add a custom message for personalization" %}</span>
                    </li>
                    <li class="flex items-start gap-2">
                        <i data-lucide="check" class="w-4 h-4 text-emerald-500 mt-0.5 flex-shrink-0"></i>
                        <span>{% trans "Double-check email addresses before sending" %}</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

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