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

{% block title %}{% trans "Send SMS" %} - PX360{% endblock %}

{% block content %}
<div class="max-w-2xl mx-auto p-6">
    <!-- Header -->
    <div class="mb-6">
        <h1 class="text-2xl font-bold text-[#005696] flex items-center gap-3">
            <i data-lucide="message-square" class="w-7 h-7"></i>
            {% trans "Send SMS" %}
        </h1>
        <p class="text-[#64748b] mt-1">{% trans "Send a text message directly to any phone number" %}</p>
    </div>

    <!-- Form Card -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
        <form method="post" class="p-6">
            {% csrf_token %}
            
            <!-- Phone Number -->
            <div class="mb-6">
                <label class="block text-sm font-bold text-gray-700 mb-2">
                    {% trans "Phone Number" %}
                    <span class="text-red-500">*</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="phone_number" required
                           value="{{ phone_number|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-[#005696] focus:border-transparent transition"
                           placeholder="{% trans 'e.g., +966501234567' %}">
                </div>
                <p class="mt-2 text-sm text-[#64748b] 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" %}
                </p>
            </div>

            <!-- Message -->
            <div class="mb-6">
                <label class="block text-sm font-bold text-gray-700 mb-2">
                    {% trans "Message" %}
                    <span class="text-red-500">*</span>
                </label>
                <textarea name="message" rows="6" required
                          class="w-full px-4 py-3 border-2 border-gray-200 rounded-xl text-gray-800 focus:ring-2 focus:ring-[#005696] focus:border-transparent transition resize-none"
                          placeholder="{% trans 'Type your message here...' %}"
                          maxlength="1600"
                          oninput="updateCharCount(this)">{{ message|default:'' }}</textarea>
                <div class="mt-2 flex justify-between text-sm">
                    <span class="text-[#64748b]">{% trans "Maximum 1600 characters" %}</span>
                    <span id="char-count" class="text-[#64748b]">0 / 1600</span>
                </div>
            </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 "Important Notes" %}</h4>
                        <ul class="text-sm text-blue-700 mt-2 space-y-1 list-disc list-inside">
                            <li>{% trans "SMS messages should be concise and professional" %}</li>
                            <li>{% trans "Long messages may be split into multiple SMS parts" %}</li>
                            <li>{% trans "All sent messages are logged for audit purposes" %}</li>
                            <li>{% trans "Use responsibly - abuse of this feature is strictly prohibited" %}</li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- Actions -->
            <div class="flex items-center justify-end gap-3 pt-4 border-t border-gray-100">
                <button type="reset" class="px-6 py-3 border border-gray-200 text-gray-700 rounded-xl font-semibold hover:bg-gray-50 transition">
                    {% trans "Clear" %}
                </button>
                <button type="submit" class="px-8 py-3 bg-[#005696] text-white rounded-xl font-semibold hover:bg-[#007bbd] transition flex items-center gap-2" id="submitBtn">
                    <i data-lucide="send" class="w-5 h-5"></i>
                    {% trans "Send SMS" %}
                </button>
            </div>
        </form>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        lucide.createIcons();
        
        // Initialize character count
        const textarea = document.querySelector('textarea[name="message"]');
        if (textarea.value) {
            updateCharCount(textarea);
        }
        
        // Form submission loading state
        const form = document.querySelector('form');
        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..." %}
            `;
        });
    });
    
    function updateCharCount(textarea) {
        const count = textarea.value.length;
        const max = 1600;
        const counter = document.getElementById('char-count');
        counter.textContent = `${count} / ${max}`;
        
        if (count > max) {
            counter.classList.add('text-red-500');
        } else {
            counter.classList.remove('text-red-500');
        }
    }
</script>
{% endblock %}