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

{% block title %}{% trans "Send Survey to Phone Number" %} - PX360{% endblock %}

{% block content %}
<!-- Header -->
<header class="mb-6">
    <div class="flex justify-between items-start">
        <div>
            <h1 class="text-2xl font-bold text-navy">
                <i data-lucide="send" class="w-6 h-6 inline-block mr-2"></i>
                {% trans "Send Survey Manually" %}
            </h1>
            <p class="text-sm text-slate mt-1">{% trans "Select a survey template and send it to a recipient" %}</p>
        </div>
        <a href="{% url 'surveys:instance_list' %}" class="inline-flex items-center gap-2 px-4 py-2 border border-slate-200 rounded-xl text-sm font-semibold text-slate hover:bg-light transition">
            <i data-lucide="arrow-left" class="w-4 h-4"></i>
            {% trans "Back to Surveys" %}
        </a>
    </div>
</header>

<!-- Mode Selection Tabs -->
<div class="bg-white rounded-2xl shadow-sm border border-slate-100 overflow-hidden mb-6">
    <div class="flex border-b border-slate-100">
        <a href="{% url 'surveys:manual_send' %}" class="flex-1 px-6 py-4 text-center font-medium text-slate hover:bg-light transition border-b-2 border-transparent">
            <i data-lucide="search" class="w-5 h-5 inline-block mr-2"></i>
            {% trans "Search Existing" %}
        </a>
        <a href="{% url 'surveys:manual_send_phone' %}" class="flex-1 px-6 py-4 text-center font-medium text-navy bg-light border-b-2 border-navy">
            <i data-lucide="smartphone" class="w-5 h-5 inline-block mr-2"></i>
            {% trans "Enter Phone" %}
        </a>
        <a href="{% url 'surveys:manual_send_csv' %}" class="flex-1 px-6 py-4 text-center font-medium text-slate hover:bg-light transition border-b-2 border-transparent">
            <i data-lucide="file-spreadsheet" class="w-5 h-5 inline-block mr-2"></i>
            {% trans "Upload CSV" %}
        </a>
    </div>
</div>

<!-- Form Card -->
<div class="bg-white rounded-2xl shadow-sm border border-slate-100 overflow-hidden">
    <div class="p-5 border-b border-slate-100">
        <h3 class="font-bold text-navy flex items-center gap-2 text-sm">
            <i data-lucide="smartphone" class="w-4 h-4"></i>
            {% trans "Phone Number Details" %}
        </h3>
    </div>
    <div class="p-6">
        <form method="post" id="manualPhoneSurveyForm">
            {% csrf_token %}
            
            <!-- Survey Template -->
            <div class="mb-6">
                <label for="{{ form.survey_template.id_for_label }}" class="block text-sm font-bold text-gray-700 mb-2">
                    {% trans "Survey Template" %}
                    <span class="text-red-500 ml-1">*</span>
                </label>
                <div class="relative">
                    <select name="{{ form.survey_template.name }}" id="{{ form.survey_template.id_for_label }}"
                            class="w-full px-4 py-3 border-2 border-gray-200 rounded-xl text-gray-800 focus:ring-2 focus:ring-navy focus:border-transparent transition appearance-none cursor-pointer">
                        {% for value, label in form.survey_template.field.choices %}
                            <option value="{{ value }}" {% if form.survey_template.value == value %}selected{% endif %}>{{ label }}</option>
                        {% endfor %}
                    </select>
                    <i data-lucide="chevron-down" class="absolute right-4 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400 pointer-events-none"></i>
                </div>
                {% if form.survey_template.errors %}
                    <div class="mt-2 text-red-500 text-sm flex items-center gap-1">
                        <i data-lucide="alert-circle" class="w-4 h-4"></i>
                        {% for error in form.survey_template.errors %}{{ error }}{% endfor %}
                    </div>
                {% endif %}
            </div>

            <!-- Phone Number -->
            <div class="mb-6">
                <label for="{{ form.phone_number.id_for_label }}" class="block text-sm font-bold text-gray-700 mb-2">
                    {% trans "Phone Number" %}
                    <span class="text-red-500 ml-1">*</span>
                </label>
                <div class="relative">
                    <i data-lucide="phone" class="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400"></i>
                    <input type="tel" name="{{ form.phone_number.name }}" id="{{ form.phone_number.id_for_label }}"
                           value="{{ form.phone_number.value|default:'' }}"
                           class="w-full pl-12 pr-4 py-3 border-2 border-gray-200 rounded-xl text-gray-800 focus:ring-2 focus:ring-navy focus:border-transparent transition"
                           placeholder="{% trans 'Enter phone number (e.g., +966501234567)' %}">
                </div>
                {% if form.phone_number.errors %}
                    <div class="mt-2 text-red-500 text-sm flex items-center gap-1">
                        <i data-lucide="alert-circle" class="w-4 h-4"></i>
                        {% for error in form.phone_number.errors %}{{ error }}{% endfor %}
                    </div>
                {% endif %}
                <p class="mt-2 text-sm text-gray-500 flex items-center gap-1">
                    <i data-lucide="info" class="w-4 h-4"></i>
                    {% trans "Enter the phone number in international format with country code (e.g., +966501234567)" %}
                </p>
            </div>

            <!-- Recipient Name (Optional) -->
            <div class="mb-6">
                <label for="{{ form.recipient_name.id_for_label }}" class="block text-sm font-bold text-gray-700 mb-2">
                    {% trans "Recipient Name" %}
                    <span class="text-gray-400 ml-1">({% trans "Optional" %})</span>
                </label>
                <div class="relative">
                    <i data-lucide="user" class="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400"></i>
                    <input type="text" name="{{ form.recipient_name.name }}" id="{{ form.recipient_name.id_for_label }}"
                           value="{{ form.recipient_name.value|default:'' }}"
                           class="w-full pl-12 pr-4 py-3 border-2 border-gray-200 rounded-xl text-gray-800 focus:ring-2 focus:ring-navy focus:border-transparent transition"
                           placeholder="{% trans 'Enter recipient name...' %}">
                </div>
                {% if form.recipient_name.errors %}
                    <div class="mt-2 text-red-500 text-sm flex items-center gap-1">
                        <i data-lucide="alert-circle" class="w-4 h-4"></i>
                        {% for error in form.recipient_name.errors %}{{ error }}{% endfor %}
                    </div>
                {% endif %}
            </div>

            <!-- Custom Message -->
            <div class="mb-6">
                <label for="{{ form.custom_message.id_for_label }}" class="block text-sm font-bold text-gray-700 mb-2">
                    {% trans "Custom Message" %}
                    <span class="text-gray-400">({% trans "Optional" %})</span>
                </label>
                <textarea name="{{ form.custom_message.name }}" id="{{ form.custom_message.id_for_label }}" 
                          rows="4"
                          class="w-full px-4 py-3 border-2 border-gray-200 rounded-xl text-gray-800 focus:ring-2 focus:ring-navy focus:border-transparent transition"
                          placeholder="{% trans 'Add a personalized message to the survey invitation...' %}">{{ form.custom_message.value|default:'' }}</textarea>
                {% if form.custom_message.errors %}
                    <div class="mt-2 text-red-500 text-sm flex items-center gap-1">
                        <i data-lucide="alert-circle" class="w-4 h-4"></i>
                        {% for error in form.custom_message.errors %}{{ error }}{% endfor %}
                    </div>
                {% endif %}
                <p class="mt-2 text-sm text-gray-500 flex items-center gap-1">
                    <i data-lucide="info" class="w-4 h-4"></i>
                    {% trans "Add a personalized message to the survey invitation" %}
                </p>
            </div>

            <!-- Info Box -->
            <div class="mb-6 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-500 flex-shrink-0 mt-0.5"></i>
                    <div>
                        <h4 class="font-medium text-blue-800">{% trans "How it works" %}</h4>
                        <p class="text-sm text-blue-600 mt-1">
                            {% trans "The survey will be sent via SMS to the phone number you enter. The recipient does not need to be in the system. They will receive a unique link to complete the survey." %}
                        </p>
                    </div>
                </div>
            </div>

            <!-- Submit Buttons -->
            <div class="flex justify-end gap-3 pt-4 border-t border-gray-100">
                <a href="{% url 'surveys:instance_list' %}" class="px-6 py-3 border-2 border-gray-200 text-gray-700 rounded-xl font-semibold hover:bg-gray-50 transition">
                    {% trans "Cancel" %}
                </a>
                <button type="submit" class="px-8 py-3 bg-navy text-white rounded-xl font-semibold hover:bg-navy hover:shadow-lg hover:shadow-blue-200 transition flex items-center gap-2" id="submitBtn">
                    <i data-lucide="send" class="w-5 h-5"></i>
                    {% trans "Send Survey" %}
                </button>
            </div>
        </form>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    lucide.createIcons();
    
    // Form submission loading state
    const form = document.getElementById('manualPhoneSurveyForm');
    form.addEventListener('submit', function(e) {
        const submitBtn = document.getElementById('submitBtn');
        submitBtn.disabled = true;
        submitBtn.innerHTML = `
            <svg class="animate-spin h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
            </svg>
            {% trans "Sending..." %}
        `;
    });
    
    // Phone number formatting helper
    const phoneInput = document.getElementById('{{ form.phone_number.id_for_label }}');
    phoneInput.addEventListener('blur', function() {
        let value = this.value.trim();
        if (value && !value.startsWith('+')) {
            // Auto-add + if missing
            this.value = '+' + value.replace(/^00/, '');
        }
    });
});
</script>
{% endblock %}