{% extends "base.html" %}
{% block title %}إنشاء حملة{% endblock %}
{% block content %}
<div class="max-w-3xl mx-auto px-4 py-12">
    <h1 class="text-3xl font-serif font-bold text-white mb-8">إنشاء حملة تسويقية</h1>

    <!-- Process Info -->
    <div class="mb-6 bg-gradient-to-r from-blue-500/10 to-purple-500/10 rounded-xl p-4 border border-blue-500/20">
        <div class="flex items-start gap-3">
            <svg class="w-5 h-5 text-blue-400 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
            </svg>
            <div class="text-sm">
                <div class="text-blue-400 font-bold mb-1">خطوة سريعة • Quick Step</div>
                <div class="text-slate-300">
                    بعد إنشاء الحملة، ستنتقل مباشرة إلى صفحة التفاصيل حيث يمكنك توليد السيناريو والفيديو.
                    <br>
                    <span class="text-xs text-slate-400">After creating the campaign, you'll go directly to the detail page where you can generate the script and video.</span>
                </div>
            </div>
        </div>
    </div>

    <div class="glass p-8 rounded-2xl">
        <div class="mb-6 p-4 bg-black/20 rounded-xl">
            <div class="text-xs text-slate-400 mb-1">التقرير المرتبط</div>
            <div class="text-white font-bold">{{ report.project_name }}</div>
        </div>

        <form method="POST" class="space-y-6" id="campaignForm">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            <div>
                <label class="block text-xs font-mono text-slate-400 mb-2 uppercase tracking-widest">اسم الحملة</label>
                <input type="text" name="name" value="{{ report.project_name }}" required
                    class="w-full bg-black/20 border border-white/10 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-gold-500/50 transition">
            </div>

            <!-- Video Language Selection -->
            <div>
                <label class="block text-xs font-mono text-slate-400 mb-2 uppercase tracking-widest">لغة الفيديو (الصوت والنص)</label>
                <div class="grid grid-cols-2 gap-4">
                    <label class="relative cursor-pointer">
                        <input type="radio" name="video_language" value="ar" checked class="peer sr-only">
                        <div class="p-4 rounded-xl border border-white/10 bg-black/20 transition
                            peer-checked:border-gold-500 peer-checked:bg-gold-500/10 peer-checked:shadow-lg peer-checked:shadow-gold-500/20">
                            <div class="flex items-center gap-3">
                                <div class="w-12 h-12 bg-gold-500/20 rounded-lg flex items-center justify-center text-gold-400 text-xl font-bold">🇸🇦</div>
                                <div>
                                    <div class="text-white font-bold">العربية</div>
                                    <div class="text-xs text-slate-400">Arabic - صوت ونص عربي</div>
                                </div>
                            </div>
                        </div>
                    </label>
                    <label class="relative cursor-pointer">
                        <input type="radio" name="video_language" value="en" class="peer sr-only">
                        <div class="p-4 rounded-xl border border-white/10 bg-black/20 transition
                            peer-checked:border-blue-500 peer-checked:bg-blue-500/10 peer-checked:shadow-lg peer-checked:shadow-blue-500/20">
                            <div class="flex items-center gap-3">
                                <div class="w-12 h-12 bg-blue-500/20 rounded-lg flex items-center justify-center text-blue-400 text-xl font-bold">🇬🇧</div>
                                <div>
                                    <div class="text-white font-bold">English</div>
                                    <div class="text-xs text-slate-400">English - Voice and text in English</div>
                                </div>
                            </div>
                        </div>
                    </label>
                </div>
                <p class="text-[10px] text-slate-500 mt-2">اختر لغة الفيديو قبل الإنشاء. يمكن تغييرها لاحقاً من صفحة الحملة.</p>
            </div>
            <div>
                <label class="block text-xs font-mono text-slate-400 mb-2 uppercase tracking-widest">مزود الفيديو</label>
                {% if current_user.effective_video_provider == 'none' %}
                <div class="glass p-4 rounded-xl flex items-center gap-3 border border-red-500/20">
                    <div class="w-10 h-10 bg-red-500/20 rounded-lg flex items-center justify-center text-red-400 text-lg font-bold">&#10005;</div>
                    <div>
                        <div class="text-red-400 font-bold text-sm">غير متاح</div>
                        <div class="text-xs text-slate-500">توليد الفيديو غير مفعّل في باقتك الحالية</div>
                    </div>
                </div>
                {% else %}
                <div class="glass p-4 rounded-xl flex items-center gap-3">
                    <div class="w-10 h-10 bg-gold-500/20 rounded-lg flex items-center justify-center text-gold-400 text-lg font-bold">
                        {% if current_user.effective_video_provider == 'veo' %}V{% else %}S{% endif %}
                    </div>
                    <div>
                        <div class="text-white font-bold text-sm">
                            {% if current_user.effective_video_provider == 'veo' %}Google Veo 3
                            {% elif current_user.effective_video_provider == 'kling' %}Kling AI
                            {% elif current_user.effective_video_provider == 'runway' %}Runway Gen-4
                            {% elif current_user.effective_video_provider == 'pika' %}Pika Labs
                            {% elif current_user.effective_video_provider == 'fal' %}fal.ai
                            {% else %}OpenAI Sora{% endif %}
                        </div>
                        <div class="text-xs text-slate-500">يتم تحديده بواسطة مدير النظام حسب الباقة</div>
                    </div>
                </div>
                {% endif %}
            </div>

            {% if current_user.effective_video_provider != 'none' and allowed_durations %}
            <!-- Video Duration Selection -->
            <div>
                <label class="block text-xs font-mono text-slate-400 mb-2 uppercase tracking-widest">مدة الفيديو (ثانية)</label>
                <div class="flex flex-wrap gap-3">
                    {% for dur in allowed_durations %}
                    <label class="relative cursor-pointer">
                        <input type="radio" name="video_duration" value="{{ dur }}" {% if loop.last %}checked{% endif %} class="peer sr-only">
                        <div class="px-5 py-3 rounded-xl border border-white/10 bg-black/20 text-white text-center
                            peer-checked:border-gold-500 peer-checked:bg-gold-500/10 peer-checked:text-gold-400
                            hover:bg-white/5 transition min-w-[70px]">
                            <div class="text-lg font-bold">{{ dur }}s</div>
                            <div class="text-[10px] text-slate-500">{{ dur }} ثانية</div>
                        </div>
                    </label>
                    {% endfor %}
                </div>
            </div>
            {% endif %}

            {% if current_user.effective_video_provider != 'none' %}
            <!-- User Script Notes -->
            <div>
                <label class="block text-xs font-mono text-slate-400 mb-2 uppercase tracking-widest">ملاحظاتك على السيناريو (اختياري)</label>
                <textarea name="user_script_notes" rows="3" placeholder="مثال: أريد التركيز على الأسعار التنافسية، أضف عرض خاص في النهاية، استخدم أسلوب حماسي..."
                    class="w-full bg-black/20 border border-white/10 rounded-xl px-4 py-3 text-white text-sm focus:outline-none focus:border-gold-500/50 transition placeholder-slate-600"></textarea>
                <p class="text-[10px] text-slate-500 mt-1">سيتم دمج ملاحظاتك مع بيانات التقرير لتوليد سيناريو مخصص. يمكنك تعديله لاحقاً.</p>
            </div>

            <button type="submit" id="createBtn" class="w-full bg-gold-500 text-black py-4 rounded-xl font-bold hover:bg-gold-400 transition shadow-lg shadow-gold-500/20">
                إنشاء الحملة والانتقال إلى صفحة التفاصيل
            </button>
            <div id="loadingMsg" class="hidden text-center mt-4">
                <div class="inline-flex items-center gap-3 bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 px-6 py-3 rounded-xl text-sm">
                    <svg class="w-5 h-5 animate-spin" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
                    جاري إنشاء الحملة...
                </div>
            </div>
            {% else %}
            <div class="text-center p-4 bg-red-500/10 border border-red-500/20 rounded-xl text-sm text-red-400">
                يرجى ترقية الباقة لتفعيل توليد الفيديو
            </div>
            {% endif %}
        </form>
    </div>
</div>
<script>
// Simple form submission handler
document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('campaignForm');
    const btn = document.getElementById('createBtn');
    const loadingMsg = document.getElementById('loadingMsg');

    if (form) {
        form.addEventListener('submit', function(e) {
            // Don't prevent default - let form submit naturally
            btn.disabled = true;
            btn.classList.add('opacity-50');
            btn.innerHTML = '<svg class="w-5 h-5 animate-spin inline" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg> جاري إنشاء الحملة...';
            loadingMsg.classList.remove('hidden');
            // Let the form submit naturally
        });
    }
});
</script>
{% endblock %}