@extends('layouts.app')

@section('title', 'DEWA Gram Udhyog • Broadcast Campaigns')

@section('content')
<div class="space-y-6">

    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
        <div>
            <h1 class="text-xl font-bold text-slate-900">Campaign Wizard & Broadcast Queues</h1>
            <p class="text-xs text-slate-500">Dispatch authenticated WhatsApp templates via official Meta Cloud API v21.0</p>
        </div>
        <button onclick="document.getElementById('campaign-modal').classList.remove('hidden')" class="bg-[#008069] hover:bg-[#075E54] text-white px-4 py-2 rounded-xl text-xs font-bold transition flex items-center gap-1.5 shadow">
            <i class="fa-solid fa-paper-plane"></i> Launch New Campaign
        </button>
    </div>

    <!-- Audience & Quota Overview Banner -->
    <div class="bg-gradient-to-r from-emerald-50 to-teal-50 border border-emerald-200 rounded-2xl p-5 flex flex-col md:flex-row md:items-center justify-between gap-4">
        <div class="flex items-center space-x-3">
            <div class="w-10 h-10 rounded-xl bg-[#008069] text-white flex items-center justify-center text-lg">
                <i class="fa-solid fa-users-check"></i>
            </div>
            <div>
                <h4 class="font-bold text-slate-900 text-sm">Target Audience: Consumer CSV Upload List</h4>
                <p class="text-xs text-slate-500">Excludes Vendors and Retailers. Messages sent exclusively to verified opting-in Consumers.</p>
            </div>
        </div>
        <div class="text-right">
            <span class="text-xs text-slate-500">Verified Consumer Recipients:</span>
            <span class="text-xl font-black text-[#008069] ml-2">{{ $eligibleCount }} Contacts</span>
        </div>
    </div>

    <!-- Campaigns List -->
    <div class="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden">
        <div class="p-5 border-b border-slate-100">
            <h3 class="font-bold text-slate-900 text-sm">All Campaigns & Live Delivery Reports</h3>
        </div>
        <div class="overflow-x-auto">
            <table class="w-full text-left text-xs text-slate-600">
                <thead class="bg-slate-50 text-slate-400 uppercase font-bold text-[10px] tracking-wider border-b border-slate-100">
                    <tr>
                        <th class="py-3 px-4">Title</th>
                        <th class="py-3 px-4">Template</th>
                        <th class="py-3 px-4">Status</th>
                        <th class="py-3 px-4">Sent</th>
                        <th class="py-3 px-4">Delivered</th>
                        <th class="py-3 px-4">Read</th>
                        <th class="py-3 px-4">Failed</th>
                        <th class="py-3 px-4">Created</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100">
                    @forelse($campaigns as $camp)
                    <tr class="hover:bg-slate-50/70 transition">
                        <td class="py-3.5 px-4 font-bold text-slate-900">{{ $camp->title }}</td>
                        <td class="py-3.5 px-4 font-mono text-emerald-700">{{ $camp->template_name }}</td>
                        <td class="py-3.5 px-4">
                            <span class="px-2 py-0.5 rounded-full text-[10px] font-bold {{ $camp->status === 'COMPLETED' ? 'bg-emerald-100 text-emerald-800' : 'bg-amber-100 text-amber-800' }}">
                                {{ $camp->status }}
                            </span>
                        </td>
                        <td class="py-3.5 px-4 font-bold text-slate-800">{{ $camp->sent_count }}</td>
                        <td class="py-3.5 px-4 font-bold text-emerald-700">{{ $camp->delivered_count }}</td>
                        <td class="py-3.5 px-4 font-bold text-sky-700">{{ $camp->read_count }}</td>
                        <td class="py-3.5 px-4 font-bold text-red-600">{{ $camp->failed_count }}</td>
                        <td class="py-3.5 px-4 text-slate-400">{{ $camp->created_at->format('d M Y, H:i') }}</td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="8" class="py-8 text-center text-slate-400">
                            No campaigns created yet. Click "Launch New Campaign" to start broadcast.
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        <div class="p-4 border-t border-slate-100">
            {{ $campaigns->links() }}
        </div>
    </div>

</div>

<!-- New Campaign Modal -->
<div id="campaign-modal" class="hidden fixed inset-0 bg-slate-900/50 backdrop-blur-sm z-50 flex items-center justify-center p-4">
    <div class="bg-white rounded-2xl max-w-lg w-full p-6 shadow-2xl border border-slate-200">
        <div class="flex items-center justify-between pb-3 border-b border-slate-100">
            <h3 class="font-bold text-base text-slate-900">Launch New WhatsApp Campaign</h3>
            <button onclick="document.getElementById('campaign-modal').classList.add('hidden')" class="text-slate-400 hover:text-slate-600 text-lg">&times;</button>
        </div>

        <form action="{{ route('consumer.campaigns.create') }}" method="POST" class="mt-4 space-y-4">
            @csrf

            <div>
                <label class="block text-xs font-bold text-slate-700 mb-1">Campaign Title *</label>
                <input type="text" name="title" value="DEWA Gram Udhyog Festive Launch 2026" required class="w-full bg-slate-50 border border-slate-300 rounded-xl px-3 py-2 text-xs font-medium text-slate-800 focus:ring-2 focus:ring-[#008069]">
            </div>

            <div>
                <label class="block text-xs font-bold text-slate-700 mb-1">Select Approved WhatsApp Template *</label>
                <select name="template_id" required class="w-full bg-slate-50 border border-slate-300 rounded-xl px-3 py-2 text-xs font-medium text-slate-800 focus:ring-2 focus:ring-[#008069]">
                    @foreach($templates as $tmpl)
                        <option value="{{ $tmpl->id }}">{{ $tmpl->template_name }} ({{ $tmpl->category }}) - APPROVED</option>
                    @endforeach
                </select>
            </div>

            <div>
                <label class="block text-xs font-bold text-slate-700 mb-1">Variable Values (e.g. Offer Details for @{{2}}) *</label>
                <input type="text" name="variable_values" value="Special 25% Off Gram Udhyog Products" class="w-full bg-slate-50 border border-slate-300 rounded-xl px-3 py-2 text-xs font-medium text-slate-800 focus:ring-2 focus:ring-[#008069]">
            </div>

            <div class="bg-slate-50 p-3 rounded-xl border border-slate-200 text-xs space-y-1">
                <p class="font-bold text-slate-700">Audience Selection (Auto-Targeted):</p>
                <p class="text-slate-500">• Target: Consumer CSV Upload List ({{ $eligibleCount }} contacts)</p>
                <p class="text-slate-500">• Senders: Meta Cloud API Phone Number ID 913349665192073</p>
            </div>

            <div class="flex items-center justify-end gap-2 pt-2">
                <button type="button" onclick="document.getElementById('campaign-modal').classList.add('hidden')" class="px-4 py-2 rounded-xl text-xs font-semibold text-slate-600 hover:bg-slate-100">Cancel</button>
                <button type="submit" class="bg-[#008069] hover:bg-[#075E54] text-white px-5 py-2 rounded-xl text-xs font-bold shadow flex items-center gap-1.5">
                    <i class="fa-solid fa-paper-plane"></i> Launch Broadcast
                </button>
            </div>
        </form>
    </div>
</div>
@endsection