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

    <!-- Header -->
    <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
        <div>
            <h1 class="text-2xl font-bold text-white tracking-tight">WhatsApp Broadcast Campaigns</h1>
            <p class="text-slate-400 text-xs">Send Meta-approved WhatsApp template notifications to segmented customer lists.</p>
        </div>
        <a href="/campaigns/create" class="bg-emerald-500 hover:bg-emerald-600 text-slate-950 text-xs font-bold px-4 py-2.5 rounded-xl shadow-lg shadow-emerald-500/20 transition flex items-center space-x-1.5">
            <i class="fa-solid fa-paper-plane text-xs"></i>
            <span>Create Campaign</span>
        </a>
    </div>

    <!-- Campaigns List -->
    <div class="bg-slate-900 border border-slate-800 rounded-3xl overflow-hidden shadow-xl">
        <div class="overflow-x-auto">
            <table class="w-full text-left text-xs text-slate-300">
                <thead class="bg-slate-950/70 border-b border-slate-800 text-slate-400 font-semibold uppercase tracking-wider">
                    <tr>
                        <th class="px-6 py-4">Campaign Name</th>
                        <th class="px-6 py-4">WhatsApp Template</th>
                        <th class="px-6 py-4">Target Audience</th>
                        <th class="px-6 py-4">Delivery Rate</th>
                        <th class="px-6 py-4">Status</th>
                        <th class="px-6 py-4 text-right">Created At</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-800/60">
                    <?php if (empty($broadcasts)): ?>
                        <tr>
                            <td colspan="6" class="px-6 py-12 text-center text-slate-500">
                                <i class="fa-solid fa-bullhorn text-3xl mb-2 opacity-40"></i>
                                <p>No broadcast campaigns launched yet.</p>
                            </td>
                        </tr>
                    <?php else: ?>
                        <?php foreach ($broadcasts as $b): 
                            $pct = ($b['total_contacts'] > 0) ? round(($b['sent_count'] / $b['total_contacts']) * 100) : 0;
                        ?>
                            <tr class="hover:bg-slate-800/30 transition">
                                <td class="px-6 py-4 font-bold text-white">
                                    <?= htmlspecialchars($b['name']) ?>
                                </td>
                                <td class="px-6 py-4 font-mono text-blue-400">
                                    <?= htmlspecialchars($b['template_name_title'] ?? 'Template #' . $b['template_id']) ?>
                                </td>
                                <td class="px-6 py-4 text-slate-400">
                                    <?php if ($b['target_tag_name']): ?>
                                        <span class="bg-purple-500/20 text-purple-300 border border-purple-500/30 px-2 py-0.5 rounded-full text-[10px]">
                                            Tag: <?= htmlspecialchars($b['target_tag_name']) ?>
                                        </span>
                                    <?php elseif ($b['target_stage_name']): ?>
                                        <span class="bg-blue-500/20 text-blue-300 border border-blue-500/30 px-2 py-0.5 rounded-full text-[10px]">
                                            Stage: <?= htmlspecialchars($b['target_stage_name']) ?>
                                        </span>
                                    <?php else: ?>
                                        <span class="text-slate-500">All Contacts</span>
                                    <?php endif; ?>
                                </td>
                                <td class="px-6 py-4">
                                    <div class="space-y-1">
                                        <div class="flex items-center justify-between text-[10px] text-slate-400">
                                            <span><?= $b['sent_count'] ?> / <?= $b['total_contacts'] ?> sent</span>
                                            <span><?= $pct ?>%</span>
                                        </div>
                                        <div class="w-32 bg-slate-800 rounded-full h-1.5 overflow-hidden">
                                            <div class="bg-emerald-500 h-1.5 rounded-full" style="width: <?= $pct ?>%"></div>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-6 py-4">
                                    <span class="text-[10px] font-semibold px-2 py-0.5 rounded-full <?= $b['status'] === 'completed' ? 'bg-emerald-500/20 text-emerald-400 border border-emerald-500/30' : 'bg-amber-500/20 text-amber-400' ?>">
                                        <?= strtoupper($b['status']) ?>
                                    </span>
                                </td>
                                <td class="px-6 py-4 text-right text-slate-500">
                                    <?= date('M d, Y H:i', strtotime($b['created_at'])) ?>
                                </td>
                            </tr>
                        <?php endforeach; ?>
                    <?php endif; ?>
                </tbody>
            </table>
        </div>
    </div>

</div>
