@extends('layouts.admin')

@section('header', 'Marketing Campaign Management')

@section('content')
    <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <!-- Header section with actions -->
        <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-8">
            <div>
                <h1 class="text-2xl font-bold text-gray-900 sm:text-3xl">Marketing Campaigns</h1>
                <p class="mt-2 text-sm text-gray-500">Manage your email, SMS, and WhatsApp marketing campaigns from one place</p>
            </div>
            <div class="mt-4 md:mt-0 flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-3">
                <a href="{{ route('admin.email-campaigns.create') }}" class="inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-lg shadow-sm text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500">
                    <i class="fas fa-envelope mr-2"></i>
                    New Email Campaign
                </a>
                <a href="{{ route('admin.sms-campaigns.create') }}" class="inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-lg shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                    <i class="fas fa-sms mr-2"></i>
                    New SMS Campaign
                </a>
                <a href="{{ route('admin.whatsapp-campaigns.create') }}" class="inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-lg shadow-sm text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
                    <i class="fab fa-whatsapp mr-2"></i>
                    New WhatsApp Campaign
                </a>
            </div>
        </div>

        <!-- Campaign Stats Overview -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
            <!-- Email Campaigns -->
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-200 bg-purple-50">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center">
                            <div class="w-8 h-8 bg-purple-100 rounded-lg flex items-center justify-center mr-3">
                                <i class="fas fa-envelope text-purple-600"></i>
                            </div>
                            <h3 class="text-lg font-semibold text-gray-900">Email Campaigns</h3>
                        </div>
                        <span class="bg-purple-100 text-purple-800 text-xs font-semibold px-2.5 py-0.5 rounded-full">
                            {{ number_format($emailStats['total'] ?? 0) }} Total
                        </span>
                    </div>
                </div>
                <div class="p-6">
                    <div class="grid grid-cols-3 gap-4 mb-6">
                        <div class="text-center">
                            <span class="block text-2xl font-bold text-green-600">{{ number_format($emailStats['sent'] ?? 0) }}</span>
                            <span class="text-xs text-gray-500 flex items-center justify-center mt-1">
                                <i class="fas fa-paper-plane mr-1"></i>
                                Sent
                            </span>
                        </div>
                        <div class="text-center">
                            <span class="block text-2xl font-bold text-blue-600">{{ number_format($emailStats['scheduled'] ?? 0) }}</span>
                            <span class="text-xs text-gray-500 flex items-center justify-center mt-1">
                                <i class="fas fa-clock mr-1"></i>
                                Scheduled
                            </span>
                        </div>
                        <div class="text-center">
                            <span class="block text-2xl font-bold text-gray-600">{{ number_format($emailStats['draft'] ?? 0) }}</span>
                            <span class="text-xs text-gray-500 flex items-center justify-center mt-1">
                                <i class="fas fa-edit mr-1"></i>
                                Draft
                            </span>
                        </div>
                    </div>
                    <a href="{{ route('admin.email-campaigns.index') }}" class="block w-full text-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-lg text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 transition duration-200">
                        View All Email Campaigns
                    </a>
                </div>
            </div>

            <!-- SMS Campaigns -->
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-200 bg-blue-50">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center">
                            <div class="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center mr-3">
                                <i class="fas fa-sms text-blue-600"></i>
                            </div>
                            <h3 class="text-lg font-semibold text-gray-900">SMS Campaigns</h3>
                        </div>
                        <span class="bg-blue-100 text-blue-800 text-xs font-semibold px-2.5 py-0.5 rounded-full">
                            {{ number_format($smsStats['total'] ?? 0) }} Total
                        </span>
                    </div>
                </div>
                <div class="p-6">
                    <div class="grid grid-cols-3 gap-4 mb-6">
                        <div class="text-center">
                            <span class="block text-2xl font-bold text-green-600">{{ number_format($smsStats['sent'] ?? 0) }}</span>
                            <span class="text-xs text-gray-500 flex items-center justify-center mt-1">
                                <i class="fas fa-paper-plane mr-1"></i>
                                Sent
                            </span>
                        </div>
                        <div class="text-center">
                            <span class="block text-2xl font-bold text-blue-600">{{ number_format($smsStats['scheduled'] ?? 0) }}</span>
                            <span class="text-xs text-gray-500 flex items-center justify-center mt-1">
                                <i class="fas fa-clock mr-1"></i>
                                Scheduled
                            </span>
                        </div>
                        <div class="text-center">
                            <span class="block text-2xl font-bold text-gray-600">{{ number_format($smsStats['draft'] ?? 0) }}</span>
                            <span class="text-xs text-gray-500 flex items-center justify-center mt-1">
                                <i class="fas fa-edit mr-1"></i>
                                Draft
                            </span>
                        </div>
                    </div>
                    <a href="{{ route('admin.sms-campaigns.index') }}" class="block w-full text-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-lg text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-200">
                        View All SMS Campaigns
                    </a>
                </div>
            </div>

            <!-- WhatsApp Campaigns -->
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-200 bg-green-50">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center">
                            <div class="w-8 h-8 bg-green-100 rounded-lg flex items-center justify-center mr-3">
                                <i class="fab fa-whatsapp text-green-600"></i>
                            </div>
                            <h3 class="text-lg font-semibold text-gray-900">WhatsApp Campaigns</h3>
                        </div>
                        <span class="bg-green-100 text-green-800 text-xs font-semibold px-2.5 py-0.5 rounded-full">
                            {{ number_format($whatsappStats['total'] ?? 0) }} Total
                        </span>
                    </div>
                </div>
                <div class="p-6">
                    <div class="grid grid-cols-3 gap-4 mb-6">
                        <div class="text-center">
                            <span class="block text-2xl font-bold text-green-600">{{ number_format($whatsappStats['sent'] ?? 0) }}</span>
                            <span class="text-xs text-gray-500 flex items-center justify-center mt-1">
                                <i class="fas fa-paper-plane mr-1"></i>
                                Sent
                            </span>
                        </div>
                        <div class="text-center">
                            <span class="block text-2xl font-bold text-blue-600">{{ number_format($whatsappStats['scheduled'] ?? 0) }}</span>
                            <span class="text-xs text-gray-500 flex items-center justify-center mt-1">
                                <i class="fas fa-clock mr-1"></i>
                                Scheduled
                            </span>
                        </div>
                        <div class="text-center">
                            <span class="block text-2xl font-bold text-gray-600">{{ number_format($whatsappStats['draft'] ?? 0) }}</span>
                            <span class="text-xs text-gray-500 flex items-center justify-center mt-1">
                                <i class="fas fa-edit mr-1"></i>
                                Draft
                            </span>
                        </div>
                    </div>
                    <a href="{{ route('admin.whatsapp-campaigns.index') }}" class="block w-full text-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-lg text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition duration-200">
                        View All WhatsApp Campaigns
                    </a>
                </div>
            </div>
        </div>

        <!-- Recent Campaigns -->
        <div class="space-y-8">
            <!-- Recent Email Campaigns -->
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                    <div class="flex items-center justify-between">
                        <h3 class="text-lg font-semibold text-gray-900 flex items-center">
                            <i class="fas fa-envelope text-purple-500 mr-2"></i>
                            Recent Email Campaigns
                        </h3>
                        <a href="{{ route('admin.email-campaigns.index') }}" class="text-sm text-purple-600 hover:text-purple-800 font-medium">
                            View All <i class="fas fa-arrow-right ml-1"></i>
                        </a>
                    </div>
                </div>
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-gray-50">
                            <tr>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Campaign</th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Subject</th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Recipients</th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Open Rate</th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            @forelse ($emailCampaigns as $campaign)
                                <tr class="hover:bg-gray-50">
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="flex items-center">
                                            <div class="flex-shrink-0 h-8 w-8">
                                                <div class="h-8 w-8 bg-purple-100 rounded-lg flex items-center justify-center">
                                                    <i class="fas fa-envelope text-purple-600 text-sm"></i>
                                                </div>
                                            </div>
                                            <div class="ml-3">
                                                <div class="text-sm font-medium text-gray-900">{{ $campaign->name }}</div>
                                                <div class="text-sm text-gray-500">{{ $campaign->created_at->format('M d, Y') }}</div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="text-sm text-gray-900">{{ Str::limit($campaign->subject, 40) }}</div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        @php
                                            $statusConfig = [
                                                'draft' => ['bg' => 'bg-gray-100', 'text' => 'text-gray-800', 'icon' => 'fas fa-edit'],
                                                'scheduled' => ['bg' => 'bg-blue-100', 'text' => 'text-blue-800', 'icon' => 'fas fa-clock'],
                                                'sending' => ['bg' => 'bg-yellow-100', 'text' => 'text-yellow-800', 'icon' => 'fas fa-spinner'],
                                                'sent' => ['bg' => 'bg-green-100', 'text' => 'text-green-800', 'icon' => 'fas fa-check'],
                                                'failed' => ['bg' => 'bg-red-100', 'text' => 'text-red-800', 'icon' => 'fas fa-exclamation-triangle']
                                            ];
                                            $status = $statusConfig[$campaign->status] ?? $statusConfig['draft'];
                                        @endphp
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full {{ $status['bg'] }} {{ $status['text'] }}">
                                            <i class="{{ $status['icon'] }} mr-1"></i>
                                            {{ ucfirst($campaign->status) }}
                                        </span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                        <div class="flex items-center">
                                            <i class="fas fa-users text-gray-400 mr-1"></i>
                                            {{ number_format($campaign->recipient_count ?? 0) }}
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                        <div class="flex items-center">
                                            <i class="fas fa-envelope-open text-gray-400 mr-1"></i>
                                            {{ $campaign->open_rate ?? 0 }}%
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                        <div class="flex space-x-2">
                                            <a href="{{ route('admin.email-campaigns.show', $campaign) }}" class="text-purple-600 hover:text-purple-900" title="View Campaign">
                                                <i class="fas fa-eye"></i>
                                            </a>
                                            <a href="{{ route('admin.email-campaigns.edit', $campaign) }}" class="text-blue-600 hover:text-blue-900" title="Edit Campaign">
                                                <i class="fas fa-edit"></i>
                                            </a>
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="6" class="px-6 py-8 whitespace-nowrap text-center">
                                        <div class="text-gray-400">
                                            <i class="fas fa-envelope text-2xl mb-2"></i>
                                            <p class="text-sm font-medium text-gray-500">No email campaigns found</p>
                                        </div>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- Recent SMS Campaigns -->
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                    <div class="flex items-center justify-between">
                        <h3 class="text-lg font-semibold text-gray-900 flex items-center">
                            <i class="fas fa-sms text-blue-500 mr-2"></i>
                            Recent SMS Campaigns
                        </h3>
                        <a href="{{ route('admin.sms-campaigns.index') }}" class="text-sm text-blue-600 hover:text-blue-800 font-medium">
                            View All <i class="fas fa-arrow-right ml-1"></i>
                        </a>
                    </div>
                </div>
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-gray-50">
                            <tr>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Campaign</th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Sender ID</th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Recipients</th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Delivery Rate</th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            @forelse ($smsCampaigns as $campaign)
                                <tr class="hover:bg-gray-50">
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="flex items-center">
                                            <div class="flex-shrink-0 h-8 w-8">
                                                <div class="h-8 w-8 bg-blue-100 rounded-lg flex items-center justify-center">
                                                    <i class="fas fa-sms text-blue-600 text-sm"></i>
                                                </div>
                                            </div>
                                            <div class="ml-3">
                                                <div class="text-sm font-medium text-gray-900">{{ $campaign->name }}</div>
                                                <div class="text-sm text-gray-500">{{ $campaign->created_at->format('M d, Y') }}</div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="text-sm text-gray-900 font-mono bg-gray-50 px-2 py-1 rounded">{{ $campaign->sender_id }}</div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        @php
                                            $statusConfig = [
                                                'draft' => ['bg' => 'bg-gray-100', 'text' => 'text-gray-800', 'icon' => 'fas fa-edit'],
                                                'scheduled' => ['bg' => 'bg-blue-100', 'text' => 'text-blue-800', 'icon' => 'fas fa-clock'],
                                                'sending' => ['bg' => 'bg-yellow-100', 'text' => 'text-yellow-800', 'icon' => 'fas fa-spinner'],
                                                'sent' => ['bg' => 'bg-green-100', 'text' => 'text-green-800', 'icon' => 'fas fa-check'],
                                                'failed' => ['bg' => 'bg-red-100', 'text' => 'text-red-800', 'icon' => 'fas fa-exclamation-triangle']
                                            ];
                                            $status = $statusConfig[$campaign->status] ?? $statusConfig['draft'];
                                        @endphp
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full {{ $status['bg'] }} {{ $status['text'] }}">
                                            <i class="{{ $status['icon'] }} mr-1"></i>
                                            {{ ucfirst($campaign->status) }}
                                        </span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                        <div class="flex items-center">
                                            <i class="fas fa-mobile-alt text-gray-400 mr-1"></i>
                                            {{ number_format($campaign->recipient_count ?? 0) }}
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                        <div class="flex items-center">
                                            <i class="fas fa-check-circle text-gray-400 mr-1"></i>
                                            {{ $campaign->delivery_rate ?? 0 }}%
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                        <div class="flex space-x-2">
                                            <a href="{{ route('admin.sms-campaigns.show', $campaign) }}" class="text-blue-600 hover:text-blue-900" title="View Campaign">
                                                <i class="fas fa-eye"></i>
                                            </a>
                                            <a href="{{ route('admin.sms-campaigns.edit', $campaign) }}" class="text-blue-600 hover:text-blue-900" title="Edit Campaign">
                                                <i class="fas fa-edit"></i>
                                            </a>
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="6" class="px-6 py-8 whitespace-nowrap text-center">
                                        <div class="text-gray-400">
                                            <i class="fas fa-sms text-2xl mb-2"></i>
                                            <p class="text-sm font-medium text-gray-500">No SMS campaigns found</p>
                                        </div>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- Recent WhatsApp Campaigns -->
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                    <div class="flex items-center justify-between">
                        <h3 class="text-lg font-semibold text-gray-900 flex items-center">
                            <i class="fab fa-whatsapp text-green-500 mr-2"></i>
                            Recent WhatsApp Campaigns
                        </h3>
                        <a href="{{ route('admin.whatsapp-campaigns.index') }}" class="text-sm text-green-600 hover:text-green-800 font-medium">
                            View All <i class="fas fa-arrow-right ml-1"></i>
                        </a>
                    </div>
                </div>
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-gray-50">
                            <tr>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Campaign</th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Media Type</th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Recipients</th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Read Rate</th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            @forelse ($whatsappCampaigns as $campaign)
                                <tr class="hover:bg-gray-50">
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="flex items-center">
                                            <div class="flex-shrink-0 h-8 w-8">
                                                <div class="h-8 w-8 bg-green-100 rounded-lg flex items-center justify-center">
                                                    @if($campaign->media_type)
                                                        @switch($campaign->media_type)
                                                            @case('image')
                                                                <i class="fas fa-image text-green-600 text-sm"></i>
                                                                @break
                                                            @case('video')
                                                                <i class="fas fa-video text-green-600 text-sm"></i>
                                                                @break
                                                            @case('document')
                                                                <i class="fas fa-file text-green-600 text-sm"></i>
                                                                @break
                                                            @case('audio')
                                                                <i class="fas fa-music text-green-600 text-sm"></i>
                                                                @break
                                                            @default
                                                                <i class="fab fa-whatsapp text-green-600 text-sm"></i>
                                                        @endswitch
                                                    @else
                                                        <i class="fas fa-comment text-green-600 text-sm"></i>
                                                    @endif
                                                </div>
                                            </div>
                                            <div class="ml-3">
                                                <div class="text-sm font-medium text-gray-900">{{ $campaign->name }}</div>
                                                <div class="text-sm text-gray-500">{{ $campaign->created_at->format('M d, Y') }}</div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        @if($campaign->media_type)
                                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">
                                                @switch($campaign->media_type)
                                                    @case('image')
                                                        📷 Image
                                                        @break
                                                    @case('video')
                                                        🎥 Video
                                                        @break
                                                    @case('document')
                                                        📄 Document
                                                        @break
                                                    @case('audio')
                                                        🎵 Audio
                                                        @break
                                                    @default
                                                        {{ ucfirst($campaign->media_type) }}
                                                @endswitch
                                            </span>
                                        @else
                                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">
                                                💬 Text Only
                                            </span>
                                        @endif
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        @php
                                            $statusConfig = [
                                                'draft' => ['bg' => 'bg-gray-100', 'text' => 'text-gray-800', 'icon' => 'fas fa-edit'],
                                                'scheduled' => ['bg' => 'bg-blue-100', 'text' => 'text-blue-800', 'icon' => 'fas fa-clock'],
                                                'sending' => ['bg' => 'bg-yellow-100', 'text' => 'text-yellow-800', 'icon' => 'fas fa-spinner'],
                                                'sent' => ['bg' => 'bg-green-100', 'text' => 'text-green-800', 'icon' => 'fas fa-check'],
                                                'failed' => ['bg' => 'bg-red-100', 'text' => 'text-red-800', 'icon' => 'fas fa-exclamation-triangle']
                                            ];
                                            $status = $statusConfig[$campaign->status] ?? $statusConfig['draft'];
                                        @endphp
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full {{ $status['bg'] }} {{ $status['text'] }}">
                                            <i class="{{ $status['icon'] }} mr-1"></i>
                                            {{ ucfirst($campaign->status) }}
                                        </span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                        <div class="flex items-center">
                                            <i class="fab fa-whatsapp text-green-500 mr-1"></i>
                                            {{ number_format($campaign->recipient_count ?? 0) }}
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                        <div class="flex items-center">
                                            <i class="fas fa-eye text-gray-400 mr-1"></i>
                                            {{ $campaign->read_rate ?? 0 }}%
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                        <div class="flex space-x-2">
                                            <a href="{{ route('admin.whatsapp-campaigns.show', $campaign) }}" class="text-green-600 hover:text-green-900" title="View Campaign">
                                                <i class="fas fa-eye"></i>
                                            </a>
                                            <a href="{{ route('admin.whatsapp-campaigns.edit', $campaign) }}" class="text-blue-600 hover:text-blue-900" title="Edit Campaign">
                                                <i class="fas fa-edit"></i>
                                            </a>
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="6" class="px-6 py-8 whitespace-nowrap text-center">
                                        <div class="text-gray-400">
                                            <i class="fab fa-whatsapp text-2xl mb-2"></i>
                                            <p class="text-sm font-medium text-gray-500">No WhatsApp campaigns found</p>
                                        </div>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection