@extends('layouts.admin')

@section('page-title', 'Bulk SMS')

@section('content')
<div class="py-6">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        {{-- Page Header --}}
        <div class="mb-6">
            <div class="flex justify-between items-start">
                <div>
                    <h2 class="text-2xl font-bold text-gray-900 tracking-tight">Bulk SMS</h2>
                    <p class="text-sm text-gray-500 mt-1">Send targeted messages to your users and subscribers</p>
                </div>
                <a href="{{ route('admin.bulk-sms.create') }}" class="inline-flex items-center gap-2 px-4 py-2.5 bg-emerald-600 text-white rounded-lg hover:bg-emerald-700 transition-colors text-sm font-medium shadow-sm">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
                    New SMS Campaign
                </a>
            </div>
        </div>

        {{-- Stats Cards --}}
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
            <div class="bg-white rounded-xl border border-gray-200 shadow-sm p-5">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm text-gray-500 font-medium">Total Sent</p>
                        <p class="text-2xl font-bold text-gray-900 mt-1">{{ number_format($stats['total']) }}</p>
                    </div>
                    <div class="w-12 h-12 bg-gray-50 rounded-xl flex items-center justify-center">
                        <svg class="w-6 h-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8.625 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H8.25m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H12m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0h-.375M21 12c0 4.556-4.03 8.25-9 8.25a9.764 9.764 0 01-2.555-.337A5.972 5.972 0 015.41 20.97a5.969 5.969 0 01-.474-.065 4.48 4.48 0 00.978-2.025c.09-.457-.133-.901-.467-1.226C3.93 16.178 3 14.189 3 12c0-4.556 4.03-8.25 9-8.25s9 3.694 9 8.25z"/></svg>
                    </div>
                </div>
            </div>
            <div class="bg-white rounded-xl border border-gray-200 shadow-sm p-5">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm text-gray-500 font-medium">Draft</p>
                        <p class="text-2xl font-bold text-gray-900 mt-1">{{ number_format($stats['draft']) }}</p>
                    </div>
                    <div class="w-12 h-12 bg-amber-50 rounded-xl flex items-center justify-center">
                        <svg class="w-6 h-6 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"/></svg>
                    </div>
                </div>
            </div>
            <div class="bg-white rounded-xl border border-gray-200 shadow-sm p-5">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm text-gray-500 font-medium">Scheduled</p>
                        <p class="text-2xl font-bold text-yellow-600 mt-1">{{ number_format($stats['scheduled']) }}</p>
                    </div>
                    <div class="w-12 h-12 bg-yellow-50 rounded-xl flex items-center justify-center">
                        <svg class="w-6 h-6 text-yellow-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                    </div>
                </div>
            </div>
            <div class="bg-white rounded-xl border border-gray-200 shadow-sm p-5">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm text-gray-500 font-medium">Delivered</p>
                        <p class="text-2xl font-bold text-emerald-600 mt-1">{{ number_format($stats['sent']) }}</p>
                    </div>
                    <div class="w-12 h-12 bg-emerald-50 rounded-xl flex items-center justify-center">
                        <svg class="w-6 h-6 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                    </div>
                </div>
            </div>
        </div>

        {{-- Main Card --}}
        <div class="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
            {{-- Card Header with Filters --}}
            <div class="border-b border-gray-200 px-6 py-4">
                <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
                    <h4 class="text-lg font-semibold text-gray-900">SMS Campaigns</h4>
                    <form method="GET" class="flex flex-wrap items-center gap-3">
                        <div class="flex items-center">
                            <select name="status" class="px-3 py-2 border border-r-0 border-gray-200 rounded-l-lg text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
                                <option value="">All Status</option>
                                <option value="draft" {{ request('status') === 'draft' ? 'selected' : '' }}>Draft</option>
                                <option value="scheduled" {{ request('status') === 'scheduled' ? 'selected' : '' }}>Scheduled</option>
                                <option value="sent" {{ request('status') === 'sent' ? 'selected' : '' }}>Sent</option>
                                <option value="failed" {{ request('status') === 'failed' ? 'selected' : '' }}>Failed</option>
                            </select>
                            <button type="submit" class="px-4 py-2 bg-emerald-600 text-white rounded-r-lg hover:bg-emerald-700 transition-colors text-sm flex items-center gap-1.5">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 3c2.755 0 5.455.232 8.083.678.533.09.917.556.917 1.096v1.044a2.25 2.25 0 01-.659 1.591l-5.432 5.432a2.25 2.25 0 00-.659 1.591v2.927a2.25 2.25 0 01-1.244 2.013L9.75 21v-6.568a2.25 2.25 0 00-.659-1.591L3.659 7.409A2.25 2.25 0 013 5.818V4.774c0-.54.384-1.006.917-1.096A48.32 48.32 0 0112 3z"/></svg>
                                Filter
                            </button>
                        </div>
                        @if(request('status'))
                        <a href="{{ route('admin.bulk-sms.index') }}" class="px-3 py-2 bg-gray-100 text-gray-600 rounded-lg hover:bg-gray-200 transition-colors text-sm flex items-center gap-1.5">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 18L18 6M6 6l12 12"/></svg>
                            Clear
                        </a>
                        @endif
                    </form>
                </div>
            </div>

            {{-- Table --}}
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead class="bg-gray-50 border-b border-gray-200">
                        <tr>
                            <th class="text-left py-3.5 px-5 text-xs font-semibold text-gray-500 uppercase tracking-wider">Message</th>
                            <th class="text-left py-3.5 px-5 text-xs font-semibold text-gray-500 uppercase tracking-wider">Audience</th>
                            <th class="text-left py-3.5 px-5 text-xs font-semibold text-gray-500 uppercase tracking-wider">Recipients</th>
                            <th class="text-left py-3.5 px-5 text-xs font-semibold text-gray-500 uppercase tracking-wider">Status</th>
                            <th class="text-left py-3.5 px-5 text-xs font-semibold text-gray-500 uppercase tracking-wider">Delivery</th>
                            <th class="text-left py-3.5 px-5 text-xs font-semibold text-gray-500 uppercase tracking-wider">Scheduled</th>
                            <th class="text-right py-3.5 px-5 text-xs font-semibold text-gray-500 uppercase tracking-wider">Actions</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-100">
                        @forelse($messages as $sms)
                        <tr class="hover:bg-gray-50/50 transition-colors">
                            <td class="py-3.5 px-5 max-w-sm">
                                <div class="flex items-start gap-3">
                                    <div class="w-9 h-9 bg-indigo-50 rounded-lg flex items-center justify-center flex-shrink-0 mt-0.5">
                                        <svg class="w-4 h-4 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/></svg>
                                    </div>
                                    <div class="min-w-0">
                                        <p class="text-sm text-gray-900 truncate">{{ Str::limit($sms->message, 50) }}</p>
                                        <p class="text-xs text-gray-400 mt-0.5">
                                            {{ $sms->sender_id ? 'From: '.$sms->sender_id : 'Default Sender' }}
                                        </p>
                                    </div>
                                </div>
                            </td>
                            <td class="py-3.5 px-5">
                                @php
                                    $targetIcons = [
                                        'all' => ['bg-blue-50', 'text-blue-600', 'M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.95 4.099 4.099 0 002.161-2.422c.173-.677-.072-1.342-.595-1.784a14.373 14.373 0 00-3.492-2.245c-.518-.286-.873-.708-1.06-1.168a3.724 3.724 0 01-.26-1.386c0-.965.446-1.828 1.143-2.39a7.653 7.653 0 013.657-1.424c.633-.1 1.094-.602 1.094-1.236v-.876a2.25 2.25 0 00-1.244-2.013L15.75 2.25a2.25 2.25 0 00-2.013 0l-1.5.75a2.25 2.25 0 01-2.013 0l-1.5-.75a2.25 2.25 0 00-2.013 0l-1.5.75a2.25 2.25 0 01-2.013 0l-1.5-.75a2.25 2.25 0 00-2.013 0L2.25 2.987A2.25 2.25 0 000 5.237v.876c0 .634.461 1.136 1.094 1.236a7.653 7.653 0 013.657 1.424c.697.562 1.143 1.425 1.143 2.39 0 .472-.093.928-.26 1.386-.187.46-.542.882-1.06 1.168a14.373 14.373 0 00-3.492 2.245c-.523.442-.768 1.107-.595 1.784a4.099 4.099 0 002.161 2.422 9.337 9.337 0 004.121.95 9.38 9.38 0 002.625-.372L12 21.75l1.5-.75a2.25 2.25 0 001.244-2.013V19.128z'],
                                        'customers' => ['bg-emerald-50', 'text-emerald-600', 'M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.95 4.099 4.099 0 002.161-2.422c.173-.677-.072-1.342-.595-1.784a14.373 14.373 0 00-3.492-2.245c-.518-.286-.873-.708-1.06-1.168a3.724 3.724 0 01-.26-1.386c0-.965.446-1.828 1.143-2.39a7.653 7.653 0 013.657-1.424c.633-.1 1.094-.602 1.094-1.236v-.876a2.25 2.25 0 00-1.244-2.013L15.75 2.25a2.25 2.25 0 00-2.013 0l-1.5.75a2.25 2.25 0 01-2.013 0l-1.5-.75a2.25 2.25 0 00-2.013 0l-1.5.75a2.25 2.25 0 01-2.013 0l-1.5-.75a2.25 2.25 0 00-2.013 0L2.25 2.987A2.25 2.25 0 000 5.237v.876c0 .634.461 1.136 1.094 1.236a7.653 7.653 0 013.657 1.424c.697.562 1.143 1.425 1.143 2.39 0 .472-.093.928-.26 1.386-.187.46-.542.882-1.06 1.168a14.373 14.373 0 00-3.492 2.245c-.523.442-.768 1.107-.595 1.784a4.099 4.099 0 002.161 2.422 9.337 9.337 0 004.121.95 9.38 9.38 0 002.625-.372L12 21.75l1.5-.75a2.25 2.25 0 001.244-2.013V19.128z'],
                                        'vendors' => ['bg-purple-50', 'text-purple-600', 'M13.5 21v-7.5a.75.75 0 01.75-.75h3a.75.75 0 01.75.75V21m-4.5 0H2.361a1.125 1.125 0 01-.989-.565l-1.387-2.774A1.125 1.125 0 01.507 16.5V6.75a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0118.5 6.75v9.75a1.125 1.125 0 01-.507 1.005l-1.387 2.774a1.125 1.125 0 01-.989.565h-2.124z'],
                                        'subscribers' => ['bg-rose-50', 'text-rose-600', 'M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75'],
                                    ];
                                    $icon = $targetIcons[$sms->target_type] ?? $targetIcons['all'];
                                @endphp
                                <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-semibold {{ $icon[0] }} {{ $icon[1] }}">
                                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="{{ $icon[2] }}"/></svg>
                                    {{ ucfirst($sms->target_type) }}
                                </span>
                            </td>
                            <td class="py-3.5 px-5">
                                <span class="text-sm font-medium text-gray-900">{{ number_format($sms->total_recipients) }}</span>
                            </td>
                            <td class="py-3.5 px-5">
                                @php
                                    $statusConfig = [
                                        'draft' => ['bg-gray-100', 'text-gray-700', 'M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931z', 'Draft'],
                                        'scheduled' => ['bg-yellow-100', 'text-yellow-700', 'M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z', 'Scheduled'],
                                        'sent' => ['bg-emerald-100', 'text-emerald-700', 'M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z', 'Sent'],
                                        'failed' => ['bg-red-100', 'text-red-700', 'M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z', 'Failed'],
                                    ];
                                    $cfg = $statusConfig[$sms->status] ?? $statusConfig['draft'];
                                @endphp
                                <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-semibold {{ $cfg[0] }} {{ $cfg[1] }}">
                                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="{{ $cfg[2] }}"/></svg>
                                    {{ $cfg[3] }}
                                </span>
                            </td>
                            <td class="py-3.5 px-5">
                                <div class="flex items-center gap-2">
                                    @php
                                        $deliveryRate = $sms->total_recipients > 0 ? round(($sms->delivered_count / $sms->total_recipients) * 100) : 0;
                                    @endphp
                                    <div class="flex-1 w-20 bg-gray-100 rounded-full h-1.5">
                                        <div class="bg-emerald-500 h-1.5 rounded-full" style="width: {{ $deliveryRate }}%"></div>
                                    </div>
                                    <span class="text-xs text-gray-500">{{ $deliveryRate }}%</span>
                                </div>
                                <p class="text-xs text-gray-400 mt-1">{{ number_format($sms->sent_count) }} sent / {{ number_format($sms->delivered_count) }} delivered</p>
                            </td>
                            <td class="py-3.5 px-5">
                                @if($sms->scheduled_at)
                                <span class="text-sm text-gray-700">{{ $sms->scheduled_at->format('M d, Y') }}</span>
                                <p class="text-xs text-gray-400">{{ $sms->scheduled_at->format('H:i') }}</p>
                                @else
                                <span class="text-sm text-gray-400">—</span>
                                @endif
                            </td>
                            <td class="py-3.5 px-5 text-right">
                                <div class="flex items-center justify-end gap-1">
                                    @if($sms->status === 'draft' || $sms->status === 'scheduled')
                                    <form action="{{ route('admin.bulk-sms.send', $sms) }}" method="POST" class="inline">
                                        @csrf
                                        <button type="submit" onclick="return confirm('Send this SMS to {{ number_format($sms->total_recipients) }} recipients?')" class="inline-flex items-center justify-center w-8 h-8 rounded-lg hover:bg-emerald-50 transition-colors" title="Send Now">
                                            <svg class="w-4 h-4 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5"/></svg>
                                        </button>
                                    </form>
                                    @endif
                                    @if($sms->status === 'sent')
                                    <div class="inline-flex items-center justify-center w-8 h-8 rounded-lg" title="Completed">
                                        <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                                    </div>
                                    @endif
                                    <form action="{{ route('admin.bulk-sms.destroy', $sms) }}" method="POST" class="inline" onsubmit="return confirm('Delete this SMS campaign?')">
                                        @csrf @method('DELETE')
                                        <button type="submit" class="inline-flex items-center justify-center w-8 h-8 rounded-lg hover:bg-red-50 transition-colors" title="Delete">
                                            <svg class="w-4 h-4 text-gray-400 hover:text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"/></svg>
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="7" class="py-16 text-center">
                                <div class="w-16 h-16 mx-auto bg-gray-50 rounded-2xl flex items-center justify-center mb-4">
                                    <svg class="w-8 h-8 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8.625 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H8.25m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H12m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0h-.375M21 12c0 4.556-4.03 8.25-9 8.25a9.764 9.764 0 01-2.555-.337A5.972 5.972 0 015.41 20.97a5.969 5.969 0 01-.474-.065 4.48 4.48 0 00.978-2.025c.09-.457-.133-.901-.467-1.226C3.93 16.178 3 14.189 3 12c0-4.556 4.03-8.25 9-8.25s9 3.694 9 8.25z"/></svg>
                                </div>
                                <p class="text-gray-500 font-medium">No SMS campaigns yet</p>
                                <p class="text-sm text-gray-400 mt-1">Create your first bulk SMS campaign to get started</p>
                                <a href="{{ route('admin.bulk-sms.create') }}" class="inline-flex items-center gap-2 mt-4 px-4 py-2 bg-emerald-600 text-white rounded-lg hover:bg-emerald-700 transition-colors text-sm font-medium">
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
                                    Create Campaign
                                </a>
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            {{-- Pagination --}}
            @if($messages->hasPages())
            <div class="px-6 py-4 border-t border-gray-200">
                {{ $messages->links() }}
            </div>
            @endif
        </div>
    </div>
</div>
@endsection