<div class="p-8 max-w-2xl mx-auto space-y-6">

    <!-- Header -->
    <div class="flex items-center justify-between">
        <div>
            <h1 class="text-2xl font-bold text-white tracking-tight">Launch WhatsApp Broadcast</h1>
            <p class="text-slate-400 text-xs">Broadcast an approved Meta WhatsApp template to targeted contact lists.</p>
        </div>
        <a href="/campaigns" class="text-xs text-slate-400 hover:text-white">Cancel</a>
    </div>

    <!-- Form -->
    <div class="bg-slate-900 border border-slate-800 rounded-3xl p-6 shadow-xl space-y-5">
        <form method="POST" action="/campaigns" class="space-y-4">
            <div>
                <label class="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-1">Campaign Title</label>
                <input type="text" name="name" required placeholder="e.g. Q3 Promotional Follow-up" class="w-full bg-slate-950 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-emerald-500">
            </div>

            <div>
                <label class="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-1">WhatsApp Approved Template</label>
                <select name="template_id" required class="w-full bg-slate-950 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-emerald-500">
                    <option value="">-- Choose Approved Template --</option>
                    <?php foreach ($templates as $tmpl): ?>
                        <option value="<?= $tmpl['id'] ?>"><?= htmlspecialchars($tmpl['name']) ?> (<?= htmlspecialchars($tmpl['language']) ?>)</option>
                    <?php endforeach; ?>
                </select>
            </div>

            <div class="border-t border-slate-800 pt-4">
                <label class="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2">Target Audience Filters (Optional)</label>
                
                <div class="grid grid-cols-2 gap-3">
                    <div>
                        <label class="block text-[10px] text-slate-500 mb-1">Filter by Tag</label>
                        <select name="target_tag_id" class="w-full bg-slate-950 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-emerald-500">
                            <option value="">All Tags (No Filter)</option>
                            <?php foreach ($tags as $tg): ?>
                                <option value="<?= $tg['id'] ?>"><?= htmlspecialchars($tg['name']) ?></option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                    <div>
                        <label class="block text-[10px] text-slate-500 mb-1">Filter by Pipeline Stage</label>
                        <select name="target_stage_id" class="w-full bg-slate-950 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-emerald-500">
                            <option value="">All Stages (No Filter)</option>
                            <?php foreach ($stages as $st): ?>
                                <option value="<?= $st['id'] ?>"><?= htmlspecialchars($st['name']) ?></option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                </div>
            </div>

            <div class="bg-blue-500/10 border border-blue-500/20 text-blue-300 p-4 rounded-2xl text-xs space-y-1">
                <div class="font-bold flex items-center space-x-1.5">
                    <i class="fa-solid fa-circle-info"></i>
                    <span>Meta Cloud API Compliance Notice</span>
                </div>
                <p>Broadcasts use official WhatsApp Business Templates to ensure high delivery rate and prevent account restriction.</p>
            </div>

            <button type="submit" class="w-full bg-emerald-500 hover:bg-emerald-600 text-slate-950 font-bold py-3 px-4 rounded-xl transition shadow-lg shadow-emerald-500/20 flex items-center justify-center space-x-2">
                <i class="fa-solid fa-paper-plane text-xs"></i>
                <span>Dispatch Broadcast Campaign</span>
            </button>
        </form>
    </div>

</div>
