@extends('layouts.admin')

@section('title', 'Communications - Centipid ISP CRM')
@section('breadcrumb_parent', 'OUTREACH')
@section('breadcrumb_current', 'Communications')

@section('content')
<div class="space-y-8 max-w-5xl">
    <div>
        <h1 class="text-3xl font-extrabold text-white tracking-tight">Communications & <span class="text-orange-500">outreach.</span></h1>
        <p class="text-xs text-slate-400 mt-1">Broadcast expiry alerts, payment reminders & promotional WhatsApp / SMS campaigns.</p>
    </div>

    <!-- Campaign Composer Card -->
    <div class="custom-card rounded-2xl p-6 space-y-6">
        <form action="{{ route('admin.communications.sendSms') }}" method="POST" class="space-y-4">
            @csrf
            <div>
                <label class="block text-xs font-semibold text-slate-300 mb-1">Campaign Name *</label>
                <input type="text" name="name" value="Monthly Service Expiry Reminder" required class="w-full bg-[#0f0f10] border border-[#2a2a2e] text-slate-100 text-xs rounded-xl px-3.5 py-2.5 focus:border-orange-500 focus:outline-none">
            </div>

            <div>
                <label class="block text-xs font-semibold text-slate-300 mb-1">Target Recipients (Select Subscribers)</label>
                <select id="recipientSelect" onchange="updateRecipientCount()" class="w-full bg-[#0f0f10] border border-[#2a2a2e] text-slate-100 text-xs rounded-xl px-3.5 py-2.5 focus:border-orange-500 focus:outline-none">
                    <option value="all">Broadcast to All Active Subscribers ({{ count($subscribers) }} users)</option>
                    @foreach($subscribers as $sub)
                        <option value="{{ $sub->id }}">{{ $sub->name }} ({{ $sub->phone }})</option>
                    @endforeach
                </select>
                <input type="hidden" id="recipients_count" name="recipients_count" value="{{ count($subscribers) }}">
            </div>

            <!-- Message Variables Pills matching spec -->
            <div>
                <label class="block text-xs font-semibold text-slate-300 mb-1.5">Insert Template Variables</label>
                <div class="flex flex-wrap gap-2 text-[11px] font-mono">
                    <button type="button" onclick="insertVariable('@first_name')" class="px-2.5 py-1 rounded bg-[#222226] text-orange-400 border border-[#2a2a2e] hover:bg-orange-500 hover:text-black font-bold transition-all">@first_name</button>
                    <button type="button" onclick="insertVariable('@last_name')" class="px-2.5 py-1 rounded bg-[#222226] text-orange-400 border border-[#2a2a2e] hover:bg-orange-500 hover:text-black font-bold transition-all">@last_name</button>
                    <button type="button" onclick="insertVariable('@package_name')" class="px-2.5 py-1 rounded bg-[#222226] text-orange-400 border border-[#2a2a2e] hover:bg-orange-500 hover:text-black font-bold transition-all">@package_name</button>
                    <button type="button" onclick="insertVariable('@expiry_date')" class="px-2.5 py-1 rounded bg-[#222226] text-orange-400 border border-[#2a2a2e] hover:bg-orange-500 hover:text-black font-bold transition-all">@expiry_date</button>
                    <button type="button" onclick="insertVariable('@company_name')" class="px-2.5 py-1 rounded bg-[#222226] text-orange-400 border border-[#2a2a2e] hover:bg-orange-500 hover:text-black font-bold transition-all">@company_name</button>
                </div>
            </div>

            <!-- Composer Text Area -->
            <div>
                <div class="flex items-center justify-between mb-1">
                    <label class="text-xs font-semibold text-slate-300">Message Body *</label>
                    <span id="charCountBadge" class="text-[11px] font-mono text-slate-400">0 / 480 &bull; 1 segment</span>
                </div>
                <textarea id="messageBody" name="message_body" rows="4" oninput="updateCharCount()" required class="w-full bg-[#0f0f10] border border-[#2a2a2e] text-slate-100 text-xs rounded-xl p-3.5 focus:border-orange-500 focus:outline-none">Dear @first_name, your @package_name Broadband plan expires on @expiry_date. Recharge today to avoid service interruption.</textarea>
            </div>

            <div class="flex items-center justify-end pt-3 border-t border-[#2a2a2e]">
                <button type="submit" class="btn-orange text-xs font-bold px-6 py-3 rounded-xl shadow-lg shadow-orange-500/20 flex items-center gap-2">
                    <i data-lucide="send" class="w-4 h-4"></i>
                    <span>Dispatch SMS Campaign</span>
                </button>
            </div>
        </form>
    </div>

    <!-- Past Campaigns Table -->
    <div class="custom-card rounded-2xl p-6">
        <h3 class="text-sm font-bold text-white mb-4">Past Communication Logs</h3>
        <div class="overflow-x-auto">
            <table class="w-full text-left text-xs text-slate-300">
                <thead class="bg-[#1c1c1f] text-slate-400 uppercase text-[10px] font-extrabold tracking-wider border-b border-[#2a2a2e]">
                    <tr>
                        <th class="py-3 px-4">CAMPAIGN NAME</th>
                        <th class="py-3 px-4">CHANNEL</th>
                        <th class="py-3 px-4">RECIPIENTS</th>
                        <th class="py-3 px-4">SEGMENTS</th>
                        <th class="py-3 px-4">STATUS</th>
                        <th class="py-3 px-4 text-right">SENT AT</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-[#2a2a2e]">
                    @foreach($campaigns as $cmp)
                        <tr class="hover:bg-[#1f1f23]">
                            <td class="py-3.5 px-4 font-bold text-white">{{ $cmp->name }}</td>
                            <td class="py-3.5 px-4 font-mono text-orange-400">{{ $cmp->channel }}</td>
                            <td class="py-3.5 px-4 font-bold text-emerald-400">{{ $cmp->recipients_count }} users</td>
                            <td class="py-3.5 px-4 font-mono text-slate-400">{{ $cmp->segments_count }} seg</td>
                            <td class="py-3.5 px-4">
                                <span class="px-2 py-0.5 rounded text-[10px] font-bold bg-emerald-500/10 text-emerald-400 border border-emerald-500/20">Sent</span>
                            </td>
                            <td class="py-3.5 px-4 text-right font-mono text-slate-500 text-[11px]">{{ $cmp->sent_at ? $cmp->sent_at->format('M d, H:i') : '' }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    function insertVariable(v) {
        const txt = document.getElementById('messageBody');
        txt.value += ' ' + v + ' ';
        updateCharCount();
    }

    function updateCharCount() {
        const len = document.getElementById('messageBody').value.length;
        const segments = Math.max(1, Math.ceil(len / 160));
        document.getElementById('charCountBadge').innerText = `${len} / 480 • ${segments} segment${segments > 1 ? 's' : ''}`;
    }

    function updateRecipientCount() {
        const val = document.getElementById('recipientSelect').value;
        if(val === 'all') {
            document.getElementById('recipients_count').value = {{ count($subscribers) }};
        } else {
            document.getElementById('recipients_count').value = 1;
        }
    }

    document.addEventListener("DOMContentLoaded", updateCharCount);
</script>
@endpush
