223 lines
12 KiB
HTML
223 lines
12 KiB
HTML
{% extends "layouts/base.html" %}
|
|
{% load i18n %}
|
|
|
|
{% block title %}{% trans "Send Survey via CSV Upload" %} - 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-slate hover:bg-light transition border-b-2 border-transparent">
|
|
<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-navy bg-light border-b-2 border-navy">
|
|
<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="file-spreadsheet" class="w-4 h-4"></i>
|
|
{% trans "CSV Upload Details" %}
|
|
</h3>
|
|
</div>
|
|
<div class="p-6">
|
|
<form method="post" id="csvSurveyForm" enctype="multipart/form-data">
|
|
{% 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>
|
|
|
|
<!-- CSV File Upload -->
|
|
<div class="mb-6">
|
|
<label for="{{ form.csv_file.id_for_label }}" class="block text-sm font-bold text-gray-700 mb-2">
|
|
{% trans "CSV File" %}
|
|
<span class="text-red-500 ml-1">*</span>
|
|
</label>
|
|
<div class="relative">
|
|
<input type="file" name="{{ form.csv_file.name }}" id="{{ form.csv_file.id_for_label }}"
|
|
accept=".csv"
|
|
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 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100"
|
|
onchange="updateFileName(this)">
|
|
</div>
|
|
<div id="file-name" class="mt-2 text-sm text-gray-600 hidden"></div>
|
|
{% if form.csv_file.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.csv_file.errors %}{{ error }}{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- CSV Format Info -->
|
|
<div class="mb-6 bg-gray-50 border border-gray-200 rounded-xl p-4">
|
|
<div class="flex items-start gap-3">
|
|
<i data-lucide="file-text" class="w-5 h-5 text-gray-500 flex-shrink-0 mt-0.5"></i>
|
|
<div>
|
|
<h4 class="font-medium text-gray-800">{% trans "CSV Format Requirements" %}</h4>
|
|
<p class="text-sm text-gray-600 mt-1">
|
|
{% trans "Your CSV file should have the following format:" %}
|
|
</p>
|
|
<div class="mt-2 bg-gray-800 rounded-lg p-3 font-mono text-sm text-green-400 overflow-x-auto">
|
|
phone_number,name(optional)<br>
|
|
+966501234567,John Doe<br>
|
|
+966501234568,Jane Smith<br>
|
|
+966501234569,
|
|
</div>
|
|
<ul class="mt-3 text-sm text-gray-600 space-y-1">
|
|
<li class="flex items-center gap-2">
|
|
<i data-lucide="check-circle" class="w-4 h-4 text-green-500"></i>
|
|
{% trans "First column: Phone number with country code (e.g., +966501234567)" %}
|
|
</li>
|
|
<li class="flex items-center gap-2">
|
|
<i data-lucide="check-circle" class="w-4 h-4 text-green-500"></i>
|
|
{% trans "Second column (optional): Recipient name" %}
|
|
</li>
|
|
<li class="flex items-center gap-2">
|
|
<i data-lucide="check-circle" class="w-4 h-4 text-green-500"></i>
|
|
{% trans "Header row is optional (will be auto-detected)" %}
|
|
</li>
|
|
<li class="flex items-center gap-2">
|
|
<i data-lucide="alert-circle" class="w-4 h-4 text-amber-500"></i>
|
|
{% trans "Maximum file size: 5MB" %}
|
|
</li>
|
|
</ul>
|
|
<div class="mt-3">
|
|
<a href="data:text/csv;charset=utf-8,phone_number,name%0D%0A%2B966501234567,John%20Doe%0D%0A%2B966501234568,Jane%20Smith"
|
|
download="survey_template.csv"
|
|
class="text-sm text-blue-600 hover:text-blue-800 font-medium inline-flex items-center gap-1">
|
|
<i data-lucide="download" class="w-4 h-4"></i>
|
|
{% trans "Download sample CSV template" %}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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 "This message will be included in all survey invitations" %}
|
|
</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 system will process each phone number in the CSV file and send a survey via SMS. You will receive a summary of successful and failed sends after processing." %}
|
|
</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="upload" class="w-5 h-5"></i>
|
|
{% trans "Upload and Send" %}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
lucide.createIcons();
|
|
|
|
// File name display
|
|
window.updateFileName = function(input) {
|
|
const fileNameDiv = document.getElementById('file-name');
|
|
if (input.files && input.files.length > 0) {
|
|
fileNameDiv.textContent = '{% trans "Selected file:" %} ' + input.files[0].name;
|
|
fileNameDiv.classList.remove('hidden');
|
|
} else {
|
|
fileNameDiv.classList.add('hidden');
|
|
}
|
|
};
|
|
|
|
// Form submission loading state
|
|
const form = document.getElementById('csvSurveyForm');
|
|
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 "Processing..." %}
|
|
`;
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %}
|