@extends('layouts.app')
@section('title', 'Communication Center')

@section('content')
<div class="space-y-5" x-data="{ composeOpen: false, templateOpen: false }">
    <div class="flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between"><div><p class="text-[10px] font-bold uppercase tracking-[.18em] text-orange-600">Omnichannel customer engagement</p><h1 class="mt-1 text-2xl font-bold text-[#0b1f38]">Communication Center</h1><p class="mt-1 text-xs text-slate-500">WhatsApp, SMS and email messages with complete delivery history.</p></div><div class="flex gap-2">@if(auth()->user()->hasPermission('communications.manage'))<button @click="templateOpen = !templateOpen" class="rounded-xl border border-slate-200 bg-white px-4 py-2.5 text-xs font-bold text-slate-700">+ Template</button><button @click="composeOpen = !composeOpen" class="rounded-xl bg-orange-600 px-4 py-2.5 text-xs font-bold text-white">Compose Message</button>@endif</div></div>

    <div class="grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
        @foreach(['whatsapp' => ['WA','bg-emerald-50 text-emerald-600'], 'sms' => ['SMS','bg-blue-50 text-blue-600'], 'email' => ['@','bg-violet-50 text-violet-600']] as $channel => $meta)<div class="erp-kpi-card"><span class="erp-kpi-icon {{ $meta[1] }}">{{ $meta[0] }}</span><p class="erp-kpi-label">{{ ucfirst($channel) }} Messages</p><p class="erp-kpi-value">{{ $channelCounts[$channel] ?? 0 }}</p><p class="erp-kpi-note">Logged communications</p></div>@endforeach
        <div class="erp-kpi-card"><span class="erp-kpi-icon bg-rose-50 text-rose-600">!</span><p class="erp-kpi-label">Failed Delivery</p><p class="erp-kpi-value">{{ $failedCount }}</p><p class="erp-kpi-note">Needs provider review</p></div>
    </div>

    @if(auth()->user()->hasPermission('communications.manage'))
    <div class="grid gap-4 xl:grid-cols-2">
        <section x-show="composeOpen" x-transition class="erp-panel"><div class="erp-panel-heading"><div><h2>Compose Message</h2><p>Queue a message for the configured provider.</p></div><button @click="composeOpen=false">×</button></div><form method="POST" action="{{ route('app.communications.messages.store') }}" class="mt-4 grid gap-3 sm:grid-cols-2">@csrf<select name="channel" class="erp-input" required><option value="whatsapp">WhatsApp</option><option value="sms">SMS</option><option value="email">Email</option></select><input name="recipient" required placeholder="Mobile or email recipient" class="erp-input"><select name="customer_id" class="erp-input"><option value="">No customer link</option>@foreach($customers as $customer)<option value="{{ $customer->id }}">{{ $customer->full_name_en }} · {{ $customer->contact?->primary_mobile }}</option>@endforeach</select><input name="subject" placeholder="Email subject (optional)" class="erp-input"><textarea name="message" required rows="4" placeholder="Message content" class="erp-input sm:col-span-2"></textarea><button class="rounded-xl bg-orange-600 px-4 py-3 text-xs font-bold text-white sm:col-span-2">Queue Message</button></form></section>
        <section x-show="templateOpen" x-transition class="erp-panel"><div class="erp-panel-heading"><div><h2>Message Template</h2><p>Use variables such as @{{customer_name}} and @{{application_number}}.</p></div><button @click="templateOpen=false">×</button></div><form method="POST" action="{{ route('app.communications.templates.store') }}" class="mt-4 grid gap-3 sm:grid-cols-2">@csrf<select name="channel" class="erp-input"><option value="whatsapp">WhatsApp</option><option value="sms">SMS</option><option value="email">Email</option></select><input name="template_code" required placeholder="Template code" class="erp-input"><input name="name_en" required placeholder="Template name" class="erp-input sm:col-span-2"><textarea name="content_en" required rows="3" placeholder="English content" class="erp-input"></textarea><textarea name="content_ar" rows="3" placeholder="Arabic content" class="erp-input"></textarea><button class="rounded-xl bg-[#0b1f38] px-4 py-3 text-xs font-bold text-white sm:col-span-2">Save Template</button></form></section>
    </div>
    @endif

    <section class="erp-panel"><div class="erp-panel-heading"><div><h2>Delivery Log</h2><p>Auditable message history across all channels.</p></div><span class="text-[10px] text-slate-400">{{ $templates->count() }} active templates</span></div><div class="mt-4 overflow-x-auto"><table class="erp-table"><thead><tr><th>Time</th><th>Channel</th><th>Recipient</th><th>Message</th><th>Linked Record</th><th>Status</th></tr></thead><tbody>@forelse($logs as $log)<tr><td><strong>{{ $log->created_at->format('d M Y') }}</strong><small>{{ $log->created_at->format('h:i A') }}</small></td><td><span class="erp-status">{{ ucfirst($log->channel) }}</span></td><td><strong>{{ $log->recipient ?: 'Not recorded' }}</strong><small>{{ $log->direction }}</small></td><td class="max-w-xs"><strong class="truncate">{{ $log->subject ?: str($log->message ?: $log->summary)->limit(60) }}</strong><small>{{ str($log->message ?: $log->summary)->limit(90) }}</small></td><td><strong>{{ $log->customer?->full_name_en ?? $log->application?->application_number ?? 'General message' }}</strong><small>{{ $log->user?->name ?? 'Automation' }}</small></td><td><span class="erp-status" data-status="{{ $log->status }}">{{ ucfirst($log->status) }}</span></td></tr>@empty<tr><td colspan="6"><div class="erp-empty"><span>@</span><strong>No communications yet</strong><p>Compose the first customer message or connect a provider.</p></div></td></tr>@endforelse</tbody></table></div><div class="mt-4">{{ $logs->links() }}</div></section>
</div>
@endsection